@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap');

:root {
	--color-green-400: #55EACE;
	--color-green-700: #D5FAF3;
	--color-navy-50: #1A1A1E;
	--color-navy-700: #F0F0F2;
	--color-yellow-100: #F4E921;
	--color-green-black: #2F3231;
    --color-green-light: #E4ECEA;
	--color-white: #FCFCFC;
	--border-radius-round: 100px;
	--font-weight-regular: 400;
    --font-weight-bold: 600;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    --font-size-6xl: 60px;
    --font-size-7xl: 72px;
    --font-family: "Local Noto Sans JP","Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif;
}

html,body {
	font-family: var(--font-family);
    color: var(--color-navy-50);
}

pre {
	font-family: var(--font-family);
}

a {
	text-decoration: none;
}

sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px 0px;
	background: #FFFFFF;
	box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.25);
	z-index: 100;
}

.header .logo {
	min-width: 70px;
}

.header .icon-group {
	text-align:	center;
	width: 52px;
}

.header .icon-group .icon {
	width:36px;
	margin: auto;
}

.header .icon-group .name {
	font-size: 6px;
	font-weight: 600;
}

.header-btn {
	padding: 10px 20px;
	border-radius:var(--border-radius-round);
	background: var(--color-green-light);
    display: inline-flex;
	align-items: center;
    gap: 4px;
	font-size: var(--font-size-md);
	.icon {
		width: 18px;
		height: 18px;
	}
	&:hover {
		opacity: 0.85;
	}
}

.section-mainvisual {
	display: flex;
	align-items: center;
    min-height: 682px;
	background: var(--color-green-400);
	flex-direction: column;
	max-width: 100%;
	.img {
		width: 100%;
		img {
			aspect-ratio: 1.95 / 1;
			width: 100%;
			height: auto;
			object-fit: cover;
		}
	}
	.txt {
		width: 100%;
		margin-top: 0 !important;
		padding: 0 15px !important;
		& > div.is-layout-flex {
			justify-content: center;
			align-items: center;
			position: relative;
            top: -22px;
		}
	}
	.mainvisual-ttl {
		margin-top: 25px;
		text-align: center;
		.txt-small {
			font-size: 28px;
		}
		.highlight {
			text-decoration: underline;
        	text-decoration-thickness: 8px;
        	text-decoration-color: var(--color-green-700);
        	text-underline-offset: -0.05em;
        	text-decoration-skip-ink: none;
        	font-weight: var(--font-weight-bold);
		}
	}
	.mainvisual-btn-wrap {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin-top: 45px;
	}
}

@media (min-width: 768px) { 
	.section-mainvisual {
		flex-direction: row;
		justify-content: flex-start;
		.img {
			width: 50%;
			align-self: stretch;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.txt {
			width: 50%;
		}
		.mainvisual-ttl {
			margin-top: 45px;
			text-align: left;
			.txt-small {
				font-size: 40px;
			}
		}
	}
}

.cta {
	display: inline-flex;
	width: 100%;
	height: 74px;
	border-radius: var(--border-radius-round);
	background: var(--color-green-black);
	color: var(--color-white);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	padding: 0 40px;
	align-items: center;
	box-sizing: border-box;
	position: relative;
	&:hover {
		opacity: 0.85;
	}
	.cta-txt {
		display: flex;
		align-items: center;
		gap: 2px;
		flex: 1;
        justify-content: center;
	}
	.micro-copy {
		display: inline-block;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-bold);
		background: var(--color-yellow-100);
		border-radius: var(--border-radius-round);
		color: var(--color-navy-50);
		width: 100%;
		max-width: 238px;
		padding: 5px 23px;
		text-align: center;
		position: absolute;
		top: -16px;
		left: 50%;
		transform: translate(-50%, 0);
		box-sizing: border-box;
	}
	&.cta--secondary {
		background: var(--color-white);
		color: var(--color-navy-50);
	}
}

@media (min-width: 768px) {
	.cta {
		display: inline-flex;
		width: 378px;
		height: 74px;
	}
}

.section-ttl {
	font-size: 28px;
	font-weight: var(--font-weight-bold);
	text-align: left;
	line-height: 1.3;
	margin-bottom: 24px;
	width: 100%;
	.txt-large {
		font-size: 40px;
	}
}

@media (min-width: 768px)  {
	.section-ttl {
		font-size: var(--font-size-4xl);
		text-align: center;	
		.txt-large {
			font-size: 48px;
		}
	}
}

.section-desc {
	font-size: var(--font-size-md);
	text-align: left;
	line-height: 2;
}

@media (min-width: 768px) {
	.section-desc {
		text-align: center;
	}
}

.section-inr {
	max-width: 1142px;
	margin: 0 auto;
	padding: 16px 0;
}

.about-img {
	max-width: 640px;
	width: 100%;
	margin-top: 48px !important;
	img {
		width: 100%;
	}
}

.price-sample-img-lst {
	display: flex;
	flex-direction: column;
	img {
		max-width: 300px;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.price-sample-img-lst {
		flex-direction: row;
	}
}

.example-slide-txt {
	text-align: center;
	font-size: var(--font-size-md);
}

.example-slide-item {
	max-width: 160px;
	margin-top: 0 !important;
}

.reason-item-ttl {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: 20px;
}

.reason-item-desc {
	font-size: var(--font-size-md);
	line-height: 1.5;
}

.top-body {
	width: 100%;
	padding: unset;
	margin-top: 70px;
}

.section {
	padding-top: 32px;
	padding-bottom: 32px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: var(--color-navy-700);
	max-width: 100%;
	&.padding-large {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

@media (min-width: 768px) {
	.section {
		padding-left: 0;
		padding-right: 0;
	}
}

.button {
	display: block;
	cursor: pointer;
	outline: none;
	appearance: none;
	text-decoration: none;
	text-align: center;
	line-height: normal;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button.small {
	border-radius: 84px;
	padding: 10px 15px;
	min-width: 96px;
	font-size: 16px;
	font-weight: 600;
}

@media (min-width: 768px) {
	.button.small {
		min-width: 128px;	
	}
}


.button.regular {
	border-radius: 84px;
	padding: 20px 25px;
	min-width: 302px;
	font-size: 18px;
	font-weight: 700;
}

.button.primary {
	color: #FFFFFF;
	background-color: #FF6B3D;
}

.button.secondary {
	border: 1px solid #FF6B3D;
	color: #FF6B3D;
	background-color: #FFFFFF;
}

.button.accent {
	border: 1px solid #00B893;
	color: #00B893;
	background-color: #FFFFFF;
}

.button.after-icon {
	display: flex; 
	align-items: center;
}

.button .icon {
	width: 24px;
	height: 24px;
	margin-left: 8px;
}

.register-area {
	display: block;
	text-align:	center;
}

.register-area .group {
	display: flex;
	justify-content: center;
}

.register-area .group .box {
	text-align: center;
	margin: 0px 12px;
}

.register-area .text {
	color: #282838;
	font-size: 16px;
	font-weight: 700;
}

.register-area .link {
	font-size: 16px;
	font-weight: 400;
	color: #FF6B3D;
	text-decoration: underline;
}

.link-title {
	color: #282838;
	font-size: 16px;
	font-weight: 700;
}

.about-area {
	background: linear-gradient(to top, #6CD0D8 0%, #00E0B5 100%);
}

.about-area .about-group {
	display: flex;
	justify-content: center;
}

.about-area .image-group {
	display: flex;
	justify-content: center;
}

.about-area .image {
	margin: 0 12px;
}

.about-area .text-group {
	padding: 0 24px;
}

.about-area .about-text {
	max-width: 700px;
	font-weight: 600;
	font-size: 16px;
	line-height: 22.4px;
	color: #383850;
	text-align: justify;
}

.about-area .caution-text {
	font-size: 14px;
	font-weight: 300;
	color: #383850;
}

.example-area .example-slide-box {
	width: 100%;
	overflow: hidden;
	scrollbar-width: none;
	margin-right: -15px;
	margin-left: -15px;
	width: 100vw;
}

@media (min-width: 768px) {
	.example-slide-box {
		margin-left: 0;
		margin-right: 0;
	}
}

.example-area .example-slide-box .example-slide {
	gap: 20px;
	transition-timing-function: linear;
}

.example-area .example-slide-box .example-slide figure {
	display: flex;
	margin-block-start: 0 !important;
}

.example-area .example-slide-box .example-slide img {
	height: auto;
	max-width: none;
}

.recommendation-area .title-group {
	display: flex;
}

.recommendation-area .card-group {
	width:	100%;
	padding-top: 30px;
	margin: 24px auto 0;
}

@media (min-width: 768px) { 
	.recommendation-area {
		.card-group {
			padding: 30px 15px;
		}
	}
}

@media (min-width: 1200px) {
	.recommendation-area {
		.card-group {
			padding: 30px 0;
		}
	}
}

.recommendation-area .card-group .line {
	display: flex;
	flex-direction: column;
	gap: 65px;
	margin-top: 30px;
	padding-bottom:50px;
}

@media (min-width: 768px) {
	.recommendation-area .card-group .line   {
		display: flex;
		justify-content: center;
		padding-bottom:50px;
		flex-direction: row;
		gap: 20px;
		box-sizing: border-box;
		align-items: stretch;
		max-width: 1142px;
		width: 100%;
		.wp-block-group {
			flex: 1;
		}
	}
}

.recommendation-area .reason-card {
	position: relative;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 320px;
	border-radius: 20px;
	background-color: #FFFFFF;
	padding: 32px 24px 24px 24px;
	box-sizing: unset;
}

@media (min-width: 768px) {
	.recommendation-area {
		.reason-card {
			box-sizing: border-box;
			height: 100%;
			width: 100%;
			max-width: 100%;
		}
	}
}

.recommendation-area .reason-card .icon {
	position: absolute;
	top: -45px;
	left: 20px;
	width: 80px;
	height: 80px;
}

.recommendation-area .reason-card .title {
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.recommendation-area .reason-card .content {
	margin-top: 16px;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	text-align: justify;
}

.recommendation-area .reason-card .reference {
	position: absolute;
	bottom: -25px;
	right: 0px;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	color: #828291;
}

@media (min-width: 768px) {
	.recommendation-area {
		.reason-card {
			.reference {
				font-size: 12px;
			}
		}
		
	}
}

@media (min-width: 1000px) {
	.recommendation-area {
		.reason-card {
			.reference {
				font-size: 14px;
			}
		}
		
	}
}

.recommendation-area .reason-card .reference .link {
	text-decoration: none;
	color: #00B893;
	cursor: pointer;
}

.emotional-area .image-box {
	width: 100%;
	min-height: 240px;
}

@media (min-width: 768px) {
	.emotional-area .image-box {
		min-height: 430px;
	}
}

.emotional-area .image-box .title {
	text-align: center;
	font-size: clamp(24px, 4vw, 48px);
	font-weight: 600;
	line-height: clamp(32px, 4vw, 56px);
	margin: auto;
	width: 100%;
	max-width: 840px;
	color: #FFFFFF;
}

.owner-voice-area {
	text-align: center;
	.section-ttl {
		margin-bottom: 48px;
	}
}

.owner-voice-area .group {
	display: flex;
	justify-content: center;
}

.owner-voice-group {
	padding: 0;
}

@media (min-width: 768px) {
	.owner-voice-group {
		padding: 0 15px;
	}
}

@media (min-width: 1200px) {
	.owner-voice-group {
		padding: 0;
	}
}

.owner-voice-cta {
	padding: 5px 0;
	&:hover {
		opacity: 0.85;
	}
}

@media (min-width: 768px) {
	.owner-voice-cta {
		padding: 29px 0;
	}
}

.more-button {
	font-size: 18px;
	text-decoration: underline;
	text-align: center;
	&:hover {
		opacity: 0.7;
	}
}

.question-list-area .question-list {
	max-width: 1142px;
	width: 100%;
	padding-bottom:12px;
}

@media (min-width: 768px) {
	.question-list-area {
		.question-list {
			padding: 0 15px 12px;	
		}
	}
}

@media (min-width: 1200px) {
	.question-list-area {
		.question-list {
			padding: 0 0 12px;	
		}
	}
}

.question-list-area .question-list .question-box {
	width: 100%;
	border-bottom: 1px solid #CBCBD2;
}

.question-list-area .question-list .question-box .question-group {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-right: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	cursor: pointer;
}

.question-list-area .question-list .question-box .question-group .question-title {
	font-size: 16px;
	font-weight: var(--font-weight-regular);
	line-height: 23.87px;
	max-width: 90%;
	text-align: justify;
}

.question-list-area .question-list .question-box .question-group .accordion-icon {
	display: flex;
	min-width: 19px;
	max-width: 19px;
	transition: transform 0.3s ease-in-out;
	transform-origin: center;
}

.question-list-area .question-list .question-box .question-content {
	font-size: 14px;
	font-weight: 400;
	color: #5D5D70;
	line-height: 18px;
	text-align: justify;
	padding-bottom: 24px;
	display: none;
}

@media (min-width: 768px) {
	.question-list-area .question-list .question-box .question-group .question-title {
		font-size: 20px;
	}
	.question-list-area .question-list .question-box .question-content {
		font-size: 16px;
		line-height: 22.4px;
	}
}

.question-list-area .question-list .question-box.open .question-group .accordion-icon {
	transform: rotate(180deg);
}

.question-list-area .question-list .question-box.open .question-content {
	display: block;
	animation-name: fadeIn;
	animation-fill-mode: forwards;
	animation-duration: 1s;
}

.recommend-retry-area {
	background-color: #FFFFFF;
	text-align: center;
}

.recommend-retry-area .group {
	display: flex;
	justify-content: center;
}

.recommend-retry-area .group .box {
	text-align: center;
	margin: 0px 12px;
}

.cta-section {
	background: transparent;
	.section-ttl {
		text-align: left;
		font-size: 23px;
		margin-bottom: 10px;
	}
}

@media (min-width: 768px) {
	.cta-section {
		padding-left: 15px;
		padding-right: 15px;
		.section-ttl {
			font-size: 28px;
		}
	}
}

@media (min-width: 1200px) {
	.cta-section {
		padding-left: 0;
		padding-right: 0;
	}
}

.cta-section-item {
	background: var(--color-green-400);
	color: var(--coolor-navy-50);
	box-sizing: border-box;
	border-radius: 15px;
	max-width: 1080px;
	padding: 30px;
	gap: 15px;
	flex-direction: column;
	align-items: center;
}

@media (min-width: 768px) {
	.cta-section-item {
		padding: 30px 80px;
		gap: 80px;
		flex-direction: row;
	}
}

.cta-section-item-desc {
	font-size: var(--font-size-md);
	margin-bottom: 40px;
	br {
		display: none;
	}
}

@media (min-width: 768px) {
	.cta-section-item-desc {
		br {
			display: block;
		}
	}
}

.cta-section-btn {
	display: flex;
	max-width: 352px;
	width: 100%;
	padding: 20px 25px;
	background: var(--color-green-black);
	color: var(--color-white);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	gap: 4px;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius-round);
	margin: 0;
	box-sizing: border-box;
	&:hover {
		opacity: 0.85;
	}
	&.secondary {
		background: var(--color-white);
		color: var(--color-navy-50);
	}
}

.footer {
	z-index: 10;
	padding: 44px 0px;
	width: 100%;
	background-color: var(--color-navy-700);
	color: var(--color-navy-50);
}

.footer .footer-group {
	margin: 0px 20px;
	flex-direction: column;
	align-items: flex-start;
}

@media (min-width: 768px) {
	.footer {
		.footer-group {
			flex-direction: row;
			align-items: center;
		}
	}
}

.footer .link {
	font-weight: 400;
	font-size: 16px;
	text-decoration: underline;
}

.footer .copy-right {
	font-size: 14px;
}

/* モバイルで非表示 */
.pc-only {
	display: none;
}

.sp-only {
	display: block;
}

@media (min-width: 768px) {
	/* PCで非表示 */
	.sp-only {
		display: none;
	}
	.pc-only {
		display: block;
	}
}

/* アニメーションの定義 */
@keyframes infinity-scroll-right-pc {
	0% {
		transform: translateX(100%); /* 初期位置: コンテンツの外側右端 */
	}
	100% {
		transform: translateX(-100%); /* 終了位置: コンテンツの外側左端 */
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}