@charset "UTF-8";
/* CSS Document */

#pageTitle{
display:none;
}

#contents .btn-light.personal {
	--bs-btn-color: var(--jk-personal-color2);
	--bs-btn-border-color: #fff;
	--bs-btn-hover-color: var(--jk-personal-color1);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: #fff;
	--bs-btn-active-color: var(--jk-personal-color1);
	--bs-btn-active-bg: #fff;
	--bs-btn-active-border-color: #fff;
}

#contents .fa-up-right-from-square,
#contents .fa-file-pdf {
	font-size: .9em;
	color: var(--jk-text-sub-color);
	margin-left: .125rem;
	vertical-align: .06em;
}

#contents .ctaSection {
	color: #fff;
	padding: 2rem 1.5rem;
	background: linear-gradient(90deg, var(--jk-personal-color1) 0%, var(--jk-personal-color2) 100%);
	text-align: center;
}

#contents .ctaSection p {
	margin: 0;
}

#contents .ctaSection .actionLabel {
	font-weight: bold;
}

#contents .ctaSection .action {
	margin: 1rem 0;
}

#contents .ctaSection .actionSub a {
	color: #fff;
}

#contents .sectionTitle {
	font-size: 2.5rem;
	font-weight: bold;
	line-height: 1.3;
	margin: 0;
	padding: 2.5rem 0 1.5rem;
	text-align: center;
}

#contents .pr {
	padding: 2rem 2.5rem;
	background: url("/assets/images/personal/2026_option_camp/pr.jpg") no-repeat center top;
	background-size: cover;
}

#contents .pr .col1 .logo {
	margin-bottom: .5rem;
}

#contents .pr .col1 .logo img {
	width: 100%;
}

#contents .pr .col1 h3 {
	font-size: 1rem;
	line-height: 1.7;
	color: #fff;
}

#contents .pr .col1 .point {
	display: flex;
	justify-content: space-between;
	margin: .5rem 2rem 0 0;
	padding: 0;
}

#contents .pr .col1 .point li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 8.125rem;
	height: 8.125rem;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2;
	color: #fff;
	margin: 0;
	padding: 0;
	background: var(--jk-personal-color3);
	border-radius: 50%;
	box-shadow: .125rem .125rem .25rem rgba(0, 0, 0, .2);
	list-style-type: none;
	text-align: center;
}

#contents .pr .col1 .point li strong {
	font-size: 1.5rem;
}

#contents .pr .col1 .update {
	font-size: .6875rem;
	line-height: 1;
	color: #fff;
	margin-top: 1.5rem;
	text-align: right;
}

#contents .pr .col2 {
	padding: 2rem 2.5rem;
	background: #fff;
}

#contents .pr .col2 p {
	font-size: .875rem;
	margin: 0;
}

#contents .pr .col2 p.emphasis {
	font-size: 1.125rem;
	font-weight: bold;
	color: var(--jk-personal-color2);
	margin-top: 1rem;
	text-align: center;
}

#contents .pr .col2 .btns p {
	margin: .75rem 0 0;
}

#contents .pr .col2 .btns .btn {
	width: 100%;
}

#contents .pr .col2 .btns .btn.register {
	font-size: 1.25rem;
}

#contents .pr .col2 .btns .btn .link::before {
	display: inline-block;
	width: var(--bs-btn-font-size);
	font: var(--fa-font-solid);
	font-size: .75em;
	line-height: var(--bs-btn-font-size);
	color: #fff;
	content: "\f105";
	margin-right: .5rem;
	background: var(--jk-personal-color2);
	border-radius: 50%;
	vertical-align: .1em;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


/* ----------------------------------------------
   ヒーローセクション
------------------------------------------------ */
#heroSection {
	background: #f8f3e6;
}

#heroSection .title .col1 h1 {
	font-size: 2.5rem;
	line-height: 1.5;
}

#heroSection .title .col1 h1 strong {
	font-size: 3rem;
	font-weight: bold;
}

#heroSection .title .col1 h1 .contents {
	display: flex;
	gap: .5rem;
	margin: .75rem 0 1.25rem;
}

#heroSection .title .col1 h1 .contents span {
	display: inline-block;
	font-size: 1.375rem;
	line-height: 1.3;
	color: #fff;
	padding: .25rem .5rem;
	background: var(--jk-text-color);
}

#heroSection .title .col1 p {
	font-size: 1.7rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--jk-personal-color2);
	margin: 0;
}

#heroSection .title .col2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 280px;
	height: 280px;
	background: linear-gradient(90deg, var(--jk-personal-color1) 0%, var(--jk-personal-color2) 100%);
	border-radius: 999px;
	text-align: center;
}

#heroSection .title .col2 p {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.3;
	color: #fff;
	margin: .25rem 0;
}

#heroSection .title .col2 p .date {
	font-size: 1.25em;
}

#heroSection .title .col2 p .end {
	display: block;
	font-size: .75em;
}

#heroSection .img {
	position: relative;
	padding: 0 1rem;
	text-align: center;
}

#heroSection .img::before {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 42%;
	content: "";
	background: linear-gradient(90deg, var(--jk-personal-color1) 0%, var(--jk-personal-color2) 100%);
}

#heroSection .img img {
	position: relative;
}

#heroSection .ctaSection {
	padding-top: 0;
}


/* ----------------------------------------------
   キャンペーン概要
------------------------------------------------ */
#campaignSection .campaignDesc {
	margin-bottom: 2rem;
}

#campaignSection .campaignTable {
	margin: 0 0 2.5rem;
	padding: 1rem 2.5rem;
	background-color: #fff;
	border-radius: var(--jk-border-radius-lg);
}

#campaignSection .campaignTable .table {
	margin: 0;
}

#campaignSection .campaignTable strong {
	color: var(--jk-personal-color2);
}

#campaignSection .campaignTable .campaignTdNote {
	font-size: .875em;
}

#campaignSection .pr {
	position: relative;
}

#campaignSection .member {
	color: #fff;
	margin-top: -10rem;
	padding: 11rem 0 2rem;
	background: linear-gradient(90deg, var(--jk-personal-color1) 0%, var(--jk-personal-color2) 100%);
	text-align: center;
}

#campaignSection .member p {
	margin: 0;
}

#campaignSection .member a {
	color: #fff;
}


/* ----------------------------------------------
   料金プラン
------------------------------------------------ */
#planSection .subTitle {
	font-size: .875rem;
	margin-bottom: 2rem;
	text-align: center;
}

#planSection .subTitle p {
	margin: 0;
}

#planSection .cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
}

#planSection .planCard {
	background: #fff;
	border: 4px solid var(--jk-neutral-color8);
	border-radius: var(--jk-border-radius-lg);
	text-align: center;
	overflow: hidden;
}

#planSection .planCard .header {
	font-weight: bold;
	padding: 2rem 2rem 1.75rem;
	background: var(--jk-neutral-color10);
}

#planSection .planCard .header .planCardBadge {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 .75rem;
}

#planSection .planCard .header .planCardTitle {
	font-size: 2rem;
	line-height: 1.3;
	margin: 0;
}

#planSection .planCard .header .planCardInfo {
	font-size: 1.5rem;
	line-height: 1.3;
	margin: .5rem 0 0;
}

#planSection .planCard .body {
	padding: 0 2rem .5rem;
}

#planSection .planCard .body .block {
	padding: 1.5rem 0;
}

#planSection .planCard .body .block+.block {
	border-top: 2px solid var(--jk-neutral-color8);
}

#planSection .planCard .body .block .price {
	font-size: 1.125rem;
	line-height: 1;
	margin: 0;
}

#planSection .planCard .body .block .price strong {
	font-size: 2.5em;
	font-weight: bold;
	vertical-align: -.05em;
}

#planSection .planCard .body .block p.note {
	font-size: .875rem;
	margin: .5rem 0 0;
}

#planSection .planCard .body p.or {
	font-size: 1.5rem;
	line-height: 1;
	margin: .5rem 0 .75rem;
}

#planSection .planCard .body .block p.info {
	margin: .75rem 0 0;
}

#planSection .planCard .body .block p.link {
	font-size: 1.125rem;
	font-weight: bold;
	line-height: 1.3;
	margin: 0;
}

#planSection .planCard .body .block p.link a {
	position: relative;
	display: inline-block;
	color: var(--jk-text-color);
	padding-left: 1.5rem;
	text-decoration: none;
	text-align: left;
}

#planSection .planCard .body .block p.link a::before {
	position: absolute;
	left: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: var(--jk-personal-color2);
	content: "\f138";
}

#planSection .planCard.planCardStandard {
	border-color: var(--jk-personal-color2);
}

#planSection .planCard.planCardStandard .header {
	background: var(--jk-personal-color9);
}

#planSection .planCard.planCardStandard .header .planCardInfo {
	color: var(--jk-personal-color2);
}

#planSection .planPlus {
	font-size: 3rem;
	line-height: 1;
	color: var(--jk-personal-color2);
	margin: 1.5rem 0;
	text-align: center;
}

#planSection .planCard.planCardOption {
	border-color: var(--jk-personal-color2);
}

#planSection .planCard.planCardOption .header {
	background: var(--jk-personal-color2);
}

#planSection .planCard.planCardOption .header .planCardBadge,
#planSection .planCard.planCardOption .header .planCardTitle {
	color: #fff;
}

#planSection .planCard.planCardOption .body .optionDescHighlight {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--jk-personal-color2);
	margin: 1.25rem 0 0;
}

#planSection .planCard.planCardOption .body .optionDesc {
	font-size: .875rem;
	margin: .5rem 0 1.25rem;
}

#planSection .planCard.planCardOption .body .optionCardList {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin: 0 0 1.5rem;
	padding: 0;
}

#planSection .planCard.planCardOption .body .optionCard {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#planSection .planCard.planCardOption .body .optionCard .block {
	padding: 0;
}

#planSection .planCard.planCardOption .body .optionCard .optionCardName {
	font-size: 1.375rem;
	font-weight: bold;
	margin: 1.25rem 0;
	padding: 0 0 1rem;
	border-bottom: 2px solid var(--jk-neutral-color8);
}

#planSection .planCard.planCardOption .body .optionCard .price {
	font-size: 1rem;
}

#planSection .planCard.planCardOption .body .optionCard .price strong {
	font-size: 1.5em;
}

#planSection .optionNote {
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 2.5rem 0;
	text-align: center;
}

#planSection .optionNote a {
	position: relative;
	display: inline-block;
	font-weight: bold;
	color: var(--jk-personal-color2);
	padding: .75rem 2rem;
	background: #fff;
	border: 2px solid var(--jk-personal-color2);
	border-radius: 2rem;
	text-decoration: none;
	text-align: left;
}

#planSection .optionNote a::before {
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f138";
	margin-right: .5rem;
}


/* ----------------------------------------------
   4つの新オプションコンテンツ
------------------------------------------------ */
#detailSection .anchorNav ul {
	display: flex;
	justify-content: center;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
}

#detailSection .anchorNav li {
	font-size: 1.125rem;
	font-weight: bold;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#detailSection .anchorNav li a {
	position: relative;
	display: block;
	color: var(--jk-text-color);
	padding-right: 1.5rem;
	text-decoration: none;
}

#detailSection .anchorNav li a::after {
	position: absolute;
	top: 0;
	right: 0;
	font: var(--fa-font-solid);
	color: var(--jk-personal-color2);
	content: "\f078";
}

#detailSection {
	position: relative;
	padding: 0 0 2.5rem;
	overflow-x: clip;
}

#detailSection .wrap {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

#detailSection .detailPanel {
	position: relative;
	margin: 3rem 0 0;
	padding: 2.5rem;
	background: #fff;
}

/* 2つ目以降のパネルの背面に表示する全幅の帯 */
#detailSection .detailPanel::before {
	position: absolute;
	z-index: -1;
	top: -9rem;
	left: 50%;
	width: 100vw;
	width: 100dvw;
	height: 15rem;
	content: "";
	background: linear-gradient(90deg, var(--jk-personal-color1) 0%, var(--jk-personal-color2) 100%);
	transform: translateX(-50%);
	pointer-events: none;
}

#detailSection .detailPanel:first-of-type {
	margin-top: 2rem;
}

#detailSection .detailPanel:first-of-type::before {
	display: none;
}

#detailSection .detailPanel h3 {
	position: relative;
	font-size: 2rem;
	line-height: 1.3;
	margin: 0 0 2rem;
	padding-left: 1.5rem;
}

#detailSection .detailPanel h3::before {
	position: absolute;
	top: 0;
	left: 0;
	width: .5rem;
	height: 100%;
	content: "";
	background: var(--jk-personal-color2);
	border-radius: var(--jk-border-radius);
}

#detailSection .detailPanel h4 {
	font-size: 1.375rem;
	line-height: 1.5;
	margin: 2rem 0 1rem;
	padding: .75rem 1rem;
	background: var(--jk-neutral-color9);
}

#detailSection .detailPanel h5 {
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 1.5rem 0 1rem;
}

#detailSection .detailPanel h5 .detailSearchIcon {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--jk-personal-color2);
	margin-right: .5rem;
	background: #fff;
	outline: 3px solid var(--jk-personal-color2);
	border-radius: 2rem;
	text-align: center;
	vertical-align: .1em;
}

#detailSection .detailPanel ul {
	margin-bottom: 1.25rem;
}

#detailSection .detailPanel ul {
	padding-left: 1.25em;
	list-style-type: none;
}

#detailSection .detailPanel ul li {
	position: relative;
	line-height: 1.7;
	margin-bottom: .25rem;
}

#detailSection .detailPanel ul li::before {
	position: absolute;
	top: .6em;
	left: -1em;
	width: .4em;
	height: .4em;
	content: "";
	background: var(--jk-personal-color2);
	border-radius: 50%;
}

#detailSection .detailPanel figure {
	margin: 1.5rem 0;
}

#detailSection .detailPanel figcaption {
	font-size: .875rem;
	font-weight: normal;
	line-height: 1.5;
	margin-top: 1rem;
}

#detailSection .detailPanel a {
	text-decoration: none;
}

#detailSection .detailPanel hr {
	margin: 2rem 0;
}

#detailSection .detailPanel .detailPanelLink a {
	font-weight: bold;
}

#detailSection .detailPanel .noIcon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	font-size: .75em;
	font-weight: bold;
	color: #fff;
	line-height: 1.25em;
	margin-right: .25rem;
	background: var(--jk-alert-color);
	border-radius: 1em;
	text-align: center;
	vertical-align: .15em;
}

#detailSection .detailPanel .searchBtn {
	display: inline-block;
	font-size: .875rem;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	margin: 0 .25rem;
	padding: .375rem 1rem;
	background: var(--jk-link-color);
	border-radius: 2rem;
}

#detailSection .detailPanel .searchAdvancedLink a {
	font-weight: bold;
}

#detailSection .detailPanel .searchAdvancedLink a::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	color: var(--jk-personal-color2);
	content: "";
	background-color: currentColor;
	mask: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cpath%20d%3D%22M502.6%2C457.6l-126.1-126.2c25-34.3%2C39.8-76.5%2C39.8-122.2s-2.1-33.8-6-49.7l-57.8%2C52.6c-1.6%2C77.8-65.2%2C140.5-143.4%2C140.5s-143.4-64.2-143.4-143.4%2C1.1-20.4%2C3.2-30c.3-2.5.9-5%2C1.8-7.3%2C16.4-61.1%2C72.2-106.1%2C138.5-106.1s58.2%2C9.3%2C81.3%2C25.2l44.5-39.5c1.4-1.3%2C2.8-2.5%2C4.3-3.5C303.7%2C19.2%2C258.4%2C2%2C209.2%2C2%2C94.7%2C2%2C2%2C94.7%2C2%2C209.2s92.7%2C207.2%2C207.2%2C207.2%2C88-14.7%2C122.2-39.8l126.1%2C126.2c12.5%2C12.5%2C32.7%2C12.5%2C45.1%2C0%2C12.5-12.5%2C12.5-32.7%2C0-45.1Z%22%2F%3E%0A%3Cpath%20d%3D%22M405.8%2C98.6l-25.4-25.4c-1.4-1.4-3-2.2-4.8-2.5-.5%2C0-1.1-.1-1.6-.1h0c-2.3%2C0-4.7.8-6.4%2C2.6l-41.9%2C37.2-117.8%2C104.7-72-72c-1.8-1.8-4.1-2.7-6.4-2.7s-4.7.9-6.4%2C2.7l-25.4%2C25.4c-3.5%2C3.5-3.5%2C9.3%2C0%2C12.9l72%2C72%2C31.8%2C31.8c1.8%2C1.8%2C4.1%2C2.7%2C6.4%2C2.7s4.7-.9%2C6.4-2.7l31.8-28.2%2C106.6-97.1%2C50.3-45.9%2C2.7-2.4c3.5-3.5%2C3.5-9.3%2C0-12.9Z%22%2F%3E%0A%3Cpath%20d%3D%22M70%2C174.3c.2-.8.4-1.6.6-2.5-.9%2C2.4-1.5%2C4.8-1.8%2C7.3.3-1.4.6-2.9%2C1-4.3%2C0-.2%2C0-.4.1-.6Z%22%2F%3E%0A%3Cpath%20d%3D%22M69.9%2C174.8c0-.2%2C0-.4.1-.6%2C0%2C.2%2C0%2C.4-.1.6Z%22%2F%3E%0A%3C%2Fsvg%3E');
	margin-right: .25rem;
	vertical-align: -.1em;
}


/* ----------------------------------------------
   Media Queries
------------------------------------------------ */
@media (any-hover: hover) {

	#contents .btn.btn-light.personal span.hoverLine {
		background: linear-gradient(var(--jk-personal-color2), var(--jk-personal-color2)) 100% 100%/0 1px no-repeat;
	}

	#contents .ctaSection .actionSub a:hover {
		text-decoration: none;
	}

	#contents .ctaSection .actionSub a span.hoverLine {
		background: linear-gradient(#fff, #fff) 100% 100%/0 1px no-repeat;
	}

	#contents .pr .col2 .btns .btn .link span.hoverLine {
		background: linear-gradient(var(--jk-text-color), var(--jk-text-color)) 100% 100%/0 1px no-repeat;
	}

	/* キャンペーン概要 */
	#campaignSection .member a:hover {
		text-decoration: none;
	}

	/* 料金プラン */
	#planSection .planCard .body .block p.link a span.hoverLine {
		background: linear-gradient(var(--jk-text-color), var(--jk-text-color)) 100% 100%/0 1px no-repeat;
	}

	#planSection .optionNote a span.hoverLine {
		background: linear-gradient(var(--jk-personal-color2), var(--jk-personal-color2)) 100% 100%/0 1px no-repeat;
	}

	/* 4つの新オプションコンテンツ */
	#detailSection .anchorNav li a span.hoverLine {
		background: linear-gradient(var(--jk-text-color), var(--jk-text-color)) 100% 100%/0 1px no-repeat;
	}

}

@media print,
screen and (min-width: 1200px) {

	#contents .ctaSection .actionLabel {
		font-size: 1.5rem;
	}

	#contents .ctaSection .action a {
		font-size: 1.5rem;
		padding: .75rem 5rem;
	}

	#contents .ctaSection .actionSub {
		font-size: 1.125rem;
	}

	#contents .pr .cols {
		display: flex;
	}

	#contents .pr .cols .col1 {
		width: 460px;
	}

	#contents .pr .cols .col2 {
		width: 460px;
		margin-left: auto;
	}

	/* ヒーローセクション */
	#heroSection .title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 3rem 0 1rem;
	}

	#heroSection .title .col1 {
		margin-right: 1rem;
	}

	/* キャンペーン概要 */
	#campaignSection .campaignTable th,
	#campaignSection .campaignTable td {
		font-size: 1.125rem;
		padding: 1rem 0;
		border-bottom: 1px solid var(--jk-neutral-color8);
	}

	#campaignSection .campaignTable th {
		padding-right: 1rem;
		white-space: nowrap;
	}

	#campaignSection .campaignTable tr:last-of-type th,
	#campaignSection .campaignTable tr:last-of-type td {
		border-bottom: none;
	}

	/* 料金プラン */
	#planSection .planCard.planCardOption .body .optionCardList {
		gap: 60px;
	}

	#planSection .planCard.planCardOption .body .optionCard {
		position: relative;
	}

	#planSection .planCard.planCardOption .body .optionCard+.optionCard::before {
		position: absolute;
		top: 0;
		left: -30px;
		width: 2px;
		height: 100%;
		content: "";
		background: var(--jk-neutral-color8);
	}

	#planSection .planCard.planCardOption .body .optionCard .optionCardName {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		min-height: 5.5rem;
		margin-top: 0;
	}

}

@media only screen and (max-width: 1199px) {

	#contents {
		overflow: hidden;
	}

	#contents .ctaSection {
		padding: 1rem;
	}

	#contents .ctaSection .action {
		margin: .75rem 0;
	}

	#contents .ctaSection .action a {
		padding: .5rem 3rem;
	}

	#contents .ctaSection .actionSub {
		font-size: .875rem;
	}

	#contents .sectionTitle {
		font-size: 1.5rem;
		padding: 1.5rem 0 1.25rem;
	}

	#contents .pr {
		padding: 1.5rem;
		background: url("/assets/images/personal/2026_option_camp/sp_pr.jpg") no-repeat center top;
		background-size: cover;
	}

	#contents .pr .col1 .logo {
		max-width: 37.5rem;
		margin: 0 auto .75rem;
	}

	#contents .pr .col1 h3 {
		font-size: .875rem;
	}

	#contents .pr .col1 .point {
		justify-content: center;
		gap: .875rem;
		margin: 1rem 0 0;
	}

	#contents .pr .col1 .point li {
		width: 5.625rem;
		height: 5.625rem;
		font-size: .75rem;
	}

	#contents .pr .col1 .point li strong {
		font-size: 1.25rem;
	}

	#contents .pr .col1 .update {
		font-size: .75rem;
		margin-top: 1rem;
		text-align: right;
	}

	#contents .pr .col2 {
		margin-top: 1rem;
		padding: .75rem 1.25rem;
	}

	#contents .pr .col2 p {
		font-size: .75rem;
	}

	#contents .pr .col2 p.emphasis {
		font-size: .875rem;
		margin-top: 0;
	}

	#contents .pr .col2 .btns {
		margin-top: .75rem;
	}

	#contents .pr .col2 .btns p {
		margin: .5rem 0 0;
	}

	#contents .pr .col2 .btns .btn {
		padding-left: 0;
		padding-right: 0;
	}

	#contents .pr .col2 .btns .btn.register {
		font-size: 1rem;
	}

	#contents .pr .col2 .btns .btn .link {
		font-size: .875em;
	}

	/* ヒーローセクション */
	#heroSection .title {
		position: relative;
		max-width: 36rem;
		margin: 0 auto;
		padding: 1.5rem 1rem;
	}

	#heroSection .title .col1 h1 {
		font-size: 1.25rem;
	}

	#heroSection .title .col1 h1 strong {
		display: inline-block;
		font-size: 1.5rem;
		line-height: 1.4;
		padding-top: .25rem;
	}

	#heroSection .title .col1 h1 .contents {
		gap: .25rem;
		margin: .5rem 0 0;
	}

	#heroSection .title .col1 h1 .contents span {
		font-size: .7rem;
		padding: .125rem .25rem;
	}

	#heroSection .title .col1 p {
		font-size: .875rem;
		margin: .75rem 0 0;
	}

	#heroSection .title .col2 {
		position: absolute;
		top: 1.5rem;
		right: 1rem;
		width: 8rem;
		height: 8rem;
	}

	#heroSection .title .col2 p {
		font-size: 1rem;
		margin: 0;
	}

	#heroSection .img img {
		max-width: 600px;
	}

	/* キャンペーン概要 */
	#campaignSection {
		padding: 0 1rem;
	}

	#campaignSection .campaignTable {
		margin: 0 0 1.5rem;
		padding: .25rem 1rem;
	}

	#campaignSection .campaignDesc {
		margin-bottom: 1.25rem;
	}

	#campaignSection .campaignTable .table,
	#campaignSection .campaignTable .table tbody,
	#campaignSection .campaignTable .table tr,
	#campaignSection .campaignTable .table th,
	#campaignSection .campaignTable .table td {
		display: block;
	}

	#campaignSection .campaignTable .table th {
		padding: .75rem 0 0;
		border-bottom: none;
	}

	#campaignSection .campaignTable .table td {
		padding: 0 0 .75rem;
		border-bottom: 1px solid var(--jk-neutral-color8);
	}

	#campaignSection .campaignTable tr:last-of-type td {
		border-bottom: none;
	}

	#campaignSection .member {
		margin: -10rem -1rem 0;
		padding: 11rem 0 1.5rem;
	}

	#campaignSection .member p {
		font-size: .875rem;
	}

	/* 料金プラン */
	#planSection .subTitle {
		margin: 0 1rem 1rem;
		text-align: left;
	}

	#planSection .cols {
		display: block;
	}

	#planSection .planCard {
		margin: 1.5rem 1rem 0;
		border-width: 2px;
	}

	#planSection .planCard .header {
		padding: 1rem 0;
	}

	#planSection .planCard .header .planCardBadge {
		font-size: 1rem;
	}

	#planSection .planCard .header .planCardTitle {
		font-size: 1.25rem;
	}

	#planSection .planCard .header .planCardInfo {
		font-size: 1rem;
	}

	#planSection .planCard .body {
		padding: 0 1rem;
	}

	#planSection .planCard .body p.or {
		font-size: 1rem;
		margin: .25rem 0 .5rem;
	}

	#planSection .planCard .body .block {
		padding: 1rem 0;
	}

	#planSection .planCard .body .block .price {
		font-size: .875rem;
	}

	#planSection .planCard .body .block .price strong {
		font-size: 2em;
	}

	#planSection .planCard .body .block p.info {
		margin: .25rem 0 0;
	}

	#planSection .planCard .body .block p.note {
		margin: .25rem 0 0;
	}

	#planSection .planCard .body .block p.link {
		font-size: 1rem;
	}

	#planSection .planCard.planCardStandard {
		margin-top: 0rem;
	}

	#planSection .planPlus {
		font-size: 2.25rem;
		margin: .75rem 0;
	}

	#planSection .planCard.planCardOption {
		margin-top: 0rem;
	}

	#planSection .planCard.planCardOption .body .optionDescHighlight {
		font-size: 1rem;
		line-height: 1.5;
		text-align: left;
	}

	#planSection .planCard.planCardOption .body .optionDesc {
		margin: .75rem 0 0;
		text-align: left;
	}

	#planSection .planCard.planCardOption .body .optionCardList {
		grid-template-columns: 1fr;
		margin-bottom: 0;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid var(--jk-neutral-color8);
	}

	#planSection .planCard.planCardOption .body .optionCard {
		margin: 1.5rem 0 0;
		padding: 1.5rem 0 0;
		border-top: 1px solid var(--jk-neutral-color8);
	}

	#planSection .planCard.planCardOption .body .optionCard .img img {
		height: 9rem;
	}

	#planSection .planCard.planCardOption .body .optionCard .optionCardName {
		margin: 1rem 0;
		padding: 0;
		border: none;
	}

	#planSection .optionNote {
		font-size: 1rem;
		margin: 1.5rem 1rem;
	}

	#planSection .optionNote a {
		width: 100%;
		padding: .75rem 0;
		text-align: center;
	}

	#planSection .optionNote a::before {
		margin-right: .25rem;
	}

	/* 4つの新オプションコンテンツ */
	#detailSection .anchorNav {
		margin: 0 1rem;
	}

	#detailSection .anchorNav ul {
		display: block;
	}

	#detailSection .anchorNav li {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	#detailSection .anchorNav li a {
		display: inline-block;
		padding-right: 1.25rem;
	}

	#detailSection .detailPanel {
		margin: 1.5rem 1rem 0;
		padding: 1.25rem 1rem;
	}

	#detailSection .detailPanel::before {
		top: -5rem;
		height: 8rem;
	}

	#detailSection .detailPanel h3 {
		font-size: 1.25rem;
		margin: 0 0 1.25rem;
		padding-left: 1rem;
	}

	#detailSection .detailPanel h3::before {
		width: .375rem;
	}

	#detailSection .detailPanel h4 {
		font-size: 1.125rem;
		margin: 1.5rem 0 1rem;
		padding: .5rem .75rem;
	}

	#detailSection .detailPanel h5 {
		font-size: 1.125rem;
	}

	#detailSection .detailPanel h5.detailSearchTitle {
		position: relative;
		padding-left: 1.75rem;
	}

	#detailSection .detailPanel h5.detailSearchTitle .detailSearchIcon {
		position: absolute;
		top: .2em;
		left: 0;
		width: 1.25rem;
		height: 1.25rem;
		font-size: .875rem;
		line-height: 1.25rem;
		margin: 0;
		outline: 2px solid var(--jk-personal-color2);
	}

	#detailSection .detailPanel p.detailSearchStep {
		position: relative;
		padding-left: 1.25em;
	}

	#detailSection .detailPanel p.detailSearchStep .noIcon {
		position: absolute;
		top: .5em;
		left: 0;
	}

}

@media only screen and (max-width: 767px) {

	/* ヒーローセクション */
	#heroSection .title {
		position: relative;
		max-width: 24rem;
		margin: 0 auto;
		padding: 1rem 1rem .25rem;
	}

	#heroSection .title .col1 h1 {
		font-size: .8rem;
	}

	#heroSection .title .col1 h1 strong {
		display: inline-block;
		font-size: 1.5rem;
		line-height: 1.4;
		padding-top: .25rem;
	}

	#heroSection .title .col1 h1 strong span {
		display: block;
	}

	#heroSection .title .col1 h1 .contents {
		width: 18rem;
		flex-wrap: wrap;
		gap: .25rem;
		margin: .5rem 0 0;
	}

	#heroSection .title .col1 h1 .contents span {
		font-size: .875rem;
		padding: .125rem .25rem;
	}

	#heroSection .title .col1 p {
		font-size: 1rem;
		margin: .75rem 0 0;
	}

	#heroSection .title .col1 p span {
		display: block;
	}

	#heroSection .title .col2 {
		position: absolute;
		top: 1rem;
		right: .75rem;
		width: 7rem;
		height: 7rem;
	}

	#heroSection .title .col2 p {
		font-size: .875rem;
		margin: 0;
	}

	#heroSection .img img {
		max-width: 350px;
	}

}
