@charset "utf-8";

/* base */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section {
	display: block;
}
html {
	line-height: 1;
}
ul, ol {
	list-style-type: none;
}
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}
img {
	vertical-align: bottom;
	border: none;
	max-width: 100%;
	width: 100%;
	height: auto;
}
a {
	color: inherit;
	text-decoration: none;
}
*,
::before,
::after {
	box-sizing: border-box;
}
button {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	border: none;
	background: transparent;
	border-radius: 0;
	outline: none;
}

html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: source-han-sans-japanese, sans-serif;
	color: #1f2833;
	font-size: 1.4em;
	font-weight: 500;
	background: #fff;
	line-height: 1.6;
}

#lp_content {
	max-width: 750px;
	width: 100%;
	margin: auto;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

/* scroll animation */
.fadeIn {
	display: block;
	opacity: 0;
	transform: translateY(50px);
	transition: .5s;
}
.fadeIn.is_shown {
	opacity: 1;
	transform: translateY(0);
}
.no-js .fadeIn,
.fadeIn.is_shown {
	opacity: 1;
	transform: translateY(0);
}

.lp_section {
	margin: 0;
	padding: 0;
	line-height: 0;
}
.lp_section img {
	display: block;
	width: 100%;
	height: auto;
}
.lp_section--relative {
	position: relative;
}

/* notes-text */
.note_block {
	padding: 3% 6% 4%;
	line-height: 1.4;
}
.notes-text {
	color: #9FAEDB;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
}

.note_block--fv {
	position: absolute;
    top: 84%;
}
#dmm{
	position: relative;
}
.note_block--fv .notes-text {
	color: #fff;
}
.note_block--dmm {
	position: absolute;
	top: 75%;
}

.note_block--plan,
.note_block--plan {
	position: absolute;
	top: 56%;
}
@media screen and (max-width: 768px) {
	.note_block--plan,
	.note_block--plan p{
		padding: 3% 4% 4%;
	}

}
.note_block--plan-acc {
	padding-top: 2%;
	position: absolute;
	top: 68%;
	padding: 3% 6% 4%;
}
@media screen and (max-width: 768px) {
	.note_block--plan-acc p{
		font-size: 2vw;
	}

}
.note_block--merit {
	background: transparent;
}
.note_block--flow {
	background: #fff;
	padding-top: 0;
}
.note_block--satisfaction {
	position: absolute;
	top: 35.5%;

}
@media screen and (max-width: 768px) {
	.note_block--satisfaction{
		padding: 0 3%;
	}
    .note_block--satisfaction>.notes-text {
        font-size: 2vw;
        font-weight: 400;
    }
}
.note_block--cta-sub {
	background: transparent;
}
.note_block--overlay {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 4;
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	.notes-text {
		font-size: 2vw;
		font-weight: 500;
		line-height: 1.3;
	}
}

/* CTA overlay */
.cta_overlay {
	position: absolute;
	z-index: 5;
}
.cta_overlay a {
	display: block;
}
/* .cta_overlay a:hover {
	opacity: .5;
} */
.cta_overlay img {
	width: 100%;
	height: auto;
}

.cta_overlay--fv {
	top: 73%;
	left: 3.07%;
	width: 93.33%;
}

.cta_overlay--plan-1 {
	top: 86%;
	left: 5.5%;
	width: 88%;
}

.cta_overlay--merit {
	width: 100%;
	padding: 0 6.5%;
	margin-top: -5%;
}

.cta_overlay--flow {
	top: 78.89%;
	left: 5.5%;
	width: 88%;
}

.cta_overlay--voice {
	top: 84%;
	left: 5.5%;
	width: 88%;
}

.cta_overlay--cta-sub-01 {
	top: 79.5%;
	left: 5.5%;
	width: 88%;
}

.cta_overlay--cta-sub-02 {
	top: 85%;
	left: 5.5%;
	width: 88%;
}

#mv {
	background-color: #40BED3;
	padding-bottom: 10%;
}
#mv .cta_overlay--fv {
	position: static;
	width: 100%;
	margin-top: 2%;
}
#mv .cta_overlay--fv a {
	width: 93.33%;
	margin: 0 auto;
}
#mv .note_block--fv {
	position: static;
	padding: 2% 6% 4%;
}
.mv_dutasteride_overlay {
	position: absolute;
	top: 51%;
	width: 100%;
}
.mv_dutasteride_cta {
	width: 75%;
	margin: 0 auto;
}
.mv_dutasteride_cta a {
	display: block;
}
.mv_dutasteride_note {
	padding: 1% 10% 0;
}

/* plan */
#plan {
	background: #e8f7fc;
	padding-bottom: 120px;
}
.plan_card {
	position: relative;
	line-height: 0;
}
.plan_sub {
	padding: 3% 6.666% 0;
	background: #e8f7fc;
	line-height: 0;
}
.plan_sub img {
	/* width: 86.666%; */
	margin: 0 auto;
}
.plan_acc_inner {
	display: grid;
	grid-template-columns: 1fr;
	/* max-width: 98%; */
	margin: 0 auto;
	line-height: 0;
	position: relative;
}
.plan_acc .acdn_body {
	grid-area: 1 / 1;
	align-self: start;
	z-index: 1;
	margin: 0;
	overflow: visible;
}
.plan_acc .acdn_trigger {
	grid-area: 1 / 1;
	align-self: start;
	z-index: 2;
	margin: 0;
}
.plan_cta_bottom {
	padding: 0 5%;
	text-align: center;
	line-height: 0;
	position: absolute;
	bottom: 4%;
}
.effect_cta_bottom {
	padding: 0 5% 18%;
	text-align: center;
	line-height: 0;
	margin-top: -4%;
}
.plan_cta_bottom a,
.effect_cta_bottom a {
	display: block;
}
.plan_card .cta_overlay {
	width: 88%;
	left: 5.5%;
	padding-bottom: 7%;
}
.plan_card--finasteride .note_block--overlay {
	top: 54.5%;
	padding: 3% 7% 4%;
}
.plan_card--finasteride .note_block--overlay p {
	line-height: 1.2;
}
.plan_card--finasteride .cta_overlay {
	top: auto;
	bottom: 2.6%;
}
.plan_card--dutasteride {
	margin-top: 8%;
}
.plan_card--dutasteride .note_block--overlay {
	top: 61%;
	padding: 3% 10% 4%;
}
.plan_card--dutasteride .cta_overlay {
	top: auto;
	bottom: 0;
}
/* .plan_cta_bottom a:hover,
.effect_cta_bottom a:hover {
	opacity: .5;
} */

/* merit */
#merit {
	margin-top: -120px;
}
.merit_inner {
	position: relative;
	line-height: 0;
	padding-top: 40px;
}
.merit_bg {
	display: block;
	width: 100%;
	height: auto;
}
.merit_contents {
	position: absolute;
	top: 7.3%;
}
.merit_overlay {
	padding: 0 6.666%;
	margin-bottom: 60px;
}
.merit_points img:first-child {
	margin-bottom: 14.7%;
}
.merit_points img + img {
	margin-bottom: 8.8%;
}
.merit_points img + img:last-of-type {
	margin-bottom: 5%;
}
#merit .note_block--merit {
	/* position: absolute;
	top: 78.5%;
	left: 0; */
	width: 100%;
	padding: 0;
	/* padding: 0 4%; */
	line-height: 1.4;	
}
#merit .note_block--merit p {
	color: #fff;
}

/* effect */
#effect {
	background: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 5.6%,
		#dbf2ff 10%,
		#dbf2ff 100%
	);
	position: relative;
	margin-top: -60px;
	display: grid;
	grid-template-columns: 1fr;
	line-height: 0;
	--effect-contents-offset-ratio: 0.12;
	--effect-visual-crop-top: 3.2%;
}
.effect_visual {
	grid-area: 1 / 1;
	align-self: start;
	line-height: 0;
}
.effect_visual img {
	width: 100%;
	height: auto;
	display: block;
	margin-top: calc(-1 * var(--effect-visual-crop-top));
}
.effect_contents {
	grid-area: 1 / 1;
	align-self: start;
	position: relative;
	width: 100%;
	padding-top: 71%;
	z-index: 1;
	line-height: 0;
}
.effect_ingredient {
	margin-bottom: 22px;
}
.effect_links {
	display: flex;
	justify-content: center;
	gap: 2%;
	margin-bottom: 16%;
}
.effect_link {
	flex: 0 0 42.8%;
	display: block;
}
/* .effect_link:hover {
	opacity: .7;
} */
.effect_link img {
	width: 100%;
	height: auto;
}
.effect_blocks {
	padding: 0 6%;
	margin: 0 auto;
}
.effect_block {
	scroll-margin-top: 20px;
}
.effect_block + .effect_block {
	margin-top: 8%;
}
.effect_block img {
	width: 100%;
	height: auto;
	display: block;
}
.effect_cta_bottom {
	background: #dbf2ff;
}
.effect_contents .effect_acc.acdn.acdn--effect {
	padding: 0 6%;
	margin-bottom: 60px;	
}
.effect_acc_inner {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 auto;
	line-height: 0;
}
.effect_acc .acdn_body {
	grid-area: 1 / 1;
	align-self: start;
	z-index: 1;
	margin: 10px 0 0;
	overflow: visible;
}
.effect_acc .acdn_trigger {
	grid-area: 1 / 1;
	align-self: start;
	z-index: 2;
	margin: 0;
}

/* accordion common */
.acdn {
	padding: 0 3.6% 2%;
	background: #e8f7fc;
}
.acdn--effect {
	background: #dbf2ff;
	padding-bottom: 4%;
}
.acdn_trigger {
	display: block;
	width: 100%;
	/* max-width: 92.666%; */
	margin: 0 auto;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	position: relative;
}
.acdn_trigger img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	pointer-events: none;
}
.plan_acc .acdn_trigger::after {
	content: '';
	position: absolute;
	right: 13px;
	top: 50%;
	width: 18px;
	height: 15px;
	transform: translateY(-50%);
	background: url(../img/arrow.png) no-repeat center / contain;
	transition: transform .3s ease;
	pointer-events: none;
}

.effect_acc .acdn_trigger::after {
	content: '';
	position: absolute;
	right: 13px;
	top: 58%;
	width: 18px;
	height: 15px;
	transform: translateY(-50%);
	background: url(../img/arrow.png) no-repeat center / contain;
	transition: transform .3s ease;
	pointer-events: none;
}
.faq_trigger::after {
	content: '';
	position: absolute;
	right: 13px;
	top: 50%;
	width: 18px;
	height: 15px;
	transform: translateY(-50%);
	background: url(../img/faq_arrow.png) no-repeat center / contain;
	transition: transform .3s ease;
	pointer-events: none;
}
.js_accordion.is-open .acdn_trigger::after,
.js_accordion.is-open .faq_trigger::after {
	transform: translateY(-50%) rotate(180deg);
}
.js_accordion .acdn_body {
	display: block;
	max-height: 0;
	opacity: 0;
	margin: 0 auto;
	overflow: hidden;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		max-height 0.45s ease,
		opacity 0.35s ease,
		transform 0.35s ease,
		visibility 0s linear 0.45s;
}
.js_accordion.is-open .acdn_body {
	max-height: 5000px;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		max-height 0.45s ease,
		opacity 0.35s ease 0.05s,
		transform 0.35s ease 0.05s,
		visibility 0s;
}
.plan_acc.is-open .acdn_body,
.effect_acc.is-open .acdn_body,
.faq_item.is-open .faq_answer {
	overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
	.js_accordion .acdn_body {
		transition: none;
		transform: none;
	}
}
.acdn_body img {
	width: 100%;
	height: auto;
	display: block;
}

/* case carousel */
#case {
	position: relative;
	background: #e8f7fc;
	padding: 0 0 4%;
}
#case::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 750 / 94;
	background: url('../img/bg_arrow.png') no-repeat center top;
	background-size: 100% auto;
	pointer-events: none;
	z-index: 1;
}
.case_ttl {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 21% 2.666% 3%;
}
.case_ttl img {
	width: 45.066%;
	height: auto;
	margin: 0 auto;
}
.case_slider {
	position: relative;
	padding: 0 6% 6%;
}
.case_slider_viewport {
	overflow: hidden;
	border-radius: 8px;
	margin-left: -13px;
	width: calc(100% + 13px);
}
.case_slider_track {
	display: flex;
	gap: 16px;
	transition: transform .4s ease;
	will-change: transform;
}
.case_slide {
	flex: 0 0 100%;
	min-width: 0;
}
.case_slide img {
	width: 100%;
	height: auto;
	display: block;
}
.case_slide--clone {
	user-select: none;
}
.case_slider_prev,
.case_slider_next {
	position: absolute;
	top: 38%;
	width: 6%;
	height: 14%;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 2;
}
.case_slider_prev {
	left: 0%;
}
.case_slider_next {
	right: 0%;
}
.case_slider_prev::after,
.case_slider_next::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	margin: 0 auto;
}
.case_slider_prev::after {
	border-width: 12px 16px 12px 0;
	border-color: transparent #2e59bb transparent transparent;
}
.case_slider_next::after {
	border-width: 12px 0 12px 16px;
	border-color: transparent transparent transparent #2e59bb;
}
.case_slider_dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 4%;
}
.case_slider_dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ccc;
	cursor: pointer;
}
.case_slider_dot.is-active {
	background: #2e59bb;
}

/* results */
#results {
	background: #33b8ca;
}
.results_inner {
	position: relative;
	line-height: 0;
}
.results_bg {
	display: block;
	width: 100%;
	height: auto;
}
.results_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.results_blocks {
	position: absolute;
	top: 19%;
	left: 7.4%;
	right: 7.4%;
	line-height: 0;
}
.results_blocks img + img {
	margin-top: 7%;
}

/* section backgrounds */
#dmm {
	background: #e8f7fc;
}
#merit {
	background: #e8f7fc;
}
#flow {
	margin-top: -22%;
}
#satisfaction {
	margin-top: -60%;
	position: relative;
	top: 33%;
}
#voice {
	background: #fff9f0;
}
#medicine {
	background: #fff;
}
#faq {
	background: #fff7e9;
}

/* FAQ */
.faq_ttl {
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-bottom: 15px;
}

.faq_list {
	padding: 6.5% 6% 17%;
}
.faq_cat {
	text-align: center;
	margin: 14% 0 3%;
}
.faq_cat img {
	height: auto;
	margin: 0 auto;
	display: block;
}
.faq_cat img[src*="faq_cat_usage"] {
	width: 58%;
}
.faq_cat img[src*="faq_cat_payment"] {
	width: 65%;
}
.faq_cat img[src*="faq_cat_note"] {
	width: 25%;
}
.faq_item {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: 4%;
	line-height: 0;
	--faq-answer-overlap: 3%;
}
.faq_trigger {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	grid-area: 1 / 1;
	align-self: start;
	z-index: 2;
	position: relative;
}
.faq_trigger img {
	width: 100%;
	height: auto;
	pointer-events: none;
}
.faq_item .faq_answer {
	grid-area: 1 / 1;
	align-self: start;
	z-index: 1;
	margin: 0;
	overflow: visible;
	padding-top: calc(15.22% - var(--faq-answer-overlap));
	line-height: normal;
}
#faq .js_accordion .acdn_body {
	max-width: 100%;
}
.faq_answer_body {
	background: #fff;
	padding: calc(18px + var(--faq-answer-overlap)) 15px 25px;
	color: #3F5079;
	font-size: 13px;
	line-height: 1.67;
	border-radius: 0 0 19px 19px;
}
.faq_answer_body p {
	margin: 0;
}
/* .faq_answer_body p + p {
	margin-top: 0.3em;
} */
.faq_answer_body>.faq_answer_ttl {
	font-weight: 500;
	margin-top: 1.3em;
}
.faq_answer_block>.faq_answer_subttl {
	font-weight: 500;
	margin-top: 0;
}
.faq_answer_block + .faq_answer_block>.faq_answer_subttl {
	margin-top: 1.3em;
}
.faq_answer_ttl_info{
	background: #EBF0FC;
    padding: 2% 3%;
    margin-top: 1.8em;
}

.faq_answer_section {
	margin-top: 1em;
}
.faq_answer_section .faq_answer_ttl {
	margin-top: 0;
}

.faq_answer_note {
	margin-top: 1em;
}
.faq_answer_fig {
	margin: 0.5em 0;
	padding: 0;
	line-height: 0;
}
.faq_answer_fig img {
	width: 100%;
	height: auto;
	display: block;
}


/* cta02 */

#cta_sub_01, #cta_sub_02 {
	background: #E6F6FF;
	padding-bottom: 20%;
}
#cta_sub_02 {
	padding-top: 8%;
}

/* footer */
footer {
	padding: 0;
	position: relative;
	background: #3666c3;
	line-height: 1.5;
}
footer .page_top {
	position: absolute;
	top: -12%;
	right: 3%;
	z-index: 10;
}
footer .page_top a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: #3666c3;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
}

.footer_nav {
	padding: 11.7% 5%;
}
.footer_nav_list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.footer_nav_list li {
	width: 100%;
}
.footer_nav_list a {
	display: block;
	margin-bottom: 15px;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
/* .footer_nav_list a:hover {
	opacity: .7;
} */

/* floating */
.floating {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	background: rgba(255, 255, 255, .7);
	padding: 1.5% 4% 1%;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	z-index: 1000;
}
.floating img {
	width: 100%;
	height: auto;
}
/* .floating a:hover {
	opacity: .5;
} */
@media screen and (min-width: 769px) {
	.note_block {
		padding: 3% 7% 4%;
	}
	.note_block--satisfaction {
		top: 34%;
	}
	#effect{
		margin-top: -110px;
	}
	.note_block--plan, .note_block--plan {
		top: 58.3%;
	}
	.plan_acc .acdn_trigger::after {
		right: 25px;
		width: 30px;
		height: 20px;
	}
	.effect_acc .acdn_trigger::after {
		right: 25px;
		top: 59%;
		width: 30px;
		height: 20px;
	}
	.faq_trigger::after {
		right: 25px;
		width: 30px;
		height: 15px;
	}
	.footer_nav_list a {
		font-size: 18px;
		margin-bottom: 25px;
	}
	.faq_answer_body{
		font-size: 18px;
	}
	.case_slider_next::after {
		border-width: 20px 0 20px 25px;
	}
	.case_slider_prev::after {
		border-width: 21px 25px 20px 25px;
	}
	.effect_contents .effect_acc.acdn.acdn--effect {
		margin-bottom: 100px;	
	}


}