@charset "UTF-8";

/* basic
------------------------------------------------------------ */
:root{
	--header-height: 62px;
	--max-width: 360px;
	--wrapper-width: 320px;
	--color-white: #fff;
	--color-black: #3f3f3f;
	--color-gray: #d9d9d9;
	--color-pink: #eb7171;
	--color-pink-light: #fff3f3;
	--color-blue: #5394e8;
	--color-blue-light: #eef5ff;
	--color-yellow: #fcba03;
	--color-red: #ff0000;
}

body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address, p, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main, a, em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, span, ins, del, img, iframe, embed, object, video, audio, table, caption, tbody, thead, tfoot, tr, td, th, form, label, fieldset, legend, canvas{
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-size: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html{
	font-size: 10px;
	overflow-x: clip;
}
html:has(body.nav_open){
	overflow: clip;
}

body{
	position: relative;
	margin: 0 auto;
	background-color: #fff;
	color: var(--color-black);
	font-family: "Zen Maru Gothic", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.03em;
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow: clip;
}

.wrap{
	max-width: calc( var(--max-width) - 2rem );
	margin-inline: auto;
	padding-inline: 1rem;
}

.grid{
	display: grid;
	grid-template-columns: repeat(2, auto);
	align-items: center;
	gap: 1rem;
}
.grid.col3{
	grid-template-columns: repeat(3, auto);
}

p + p{
	margin-top: 1em;
}

ul, ol{
	list-style: none;
}
li{
	line-height: 1;
}

img{
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	margin-inline: auto;
}

a{
	color: inherit;
}
a:hover img{
	opacity: 0.7;
}

[id]:target{
	scroll-margin-top: var(--header-height);
}
input:required:invalid,
select:required:invalid,
textarea:required:invalid{
	scroll-margin-top: var(--header-height);
}

em{
	display: inline-block;
	padding-inline: 2px;
	background-color: var(--color-yellow);
	font-style: normal;
	line-height: 1.2;
}

sup{
	display: inline-block;
	width: 0;
	vertical-align: top;
	font-size: 1rem;
	font-weight: 500;
	word-break: keep-all;
}

table{
	table-layout: fixed;
	border-collapse: collapse;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=search],
input[type=url],
input[type=number],
input[type=button],
button,
select,
textarea{
	width: 100%;
	max-width: 100%;
	min-height: 45px;
	padding: 1rem;
	border-radius: 4px;
	border: 1px solid var(--color-gray);
	font-size: 1.6rem;
	line-height: 1.5;
	box-sizing: border-box;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=url]::placeholder,
input[type=number]::placeholder,
select:has(option:checked[value=""]),
textarea::placeholder{
	color: #b7b7b7;
}

select{
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	padding-right: 30px;
	background: url(./images/icon-arrow.svg) no-repeat right 5px center;
}
select:focus option{
	color: var(--color-black);
}

input.calendar{
	position: relative;
	padding-right: 30px !important;
	background: url(./images/icon-calendar.svg) no-repeat right 5px center;
	background-size: 24px;
}

.btn,
input.btn,
button.btn{
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	width: 100%;
	padding-block: 1.1rem 0.9rem;
	border-radius: 4px;
	border: none;
	background-color: var(--color-pink);
	color: var(--color-white);
	font-size: 1.6rem;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
}
a.btn:hover{
	filter: brightness(1.1) drop-shadow(0 3px 2px rgb(0 0 0 / 0.3));
}

.badge{
	display: inline-block;
	margin-block: calc( (-1lh + 1em) / 2 );
	padding: 4px 10px 6px;
	border-radius: 50px;
	background-color: var(--color-pink);
	color: var(--color-white);
	font-size: 1.2rem;
	line-height: 1;
}

.marker{
	display: inline-block;
	padding: 0.25rem 1rem;
	margin-bottom: 6px;
	border-radius: 4px;
	background-color: var(--color-pink);
	color: var(--color-white);
	font-size: 2.4rem;
}

.mt{
	display: inline-block;
	margin-top: 1rem;
}
.mb{
	display: inline-block;
	margin-bottom: 1rem;
}

.center{ text-align: center; }
.right{ text-align: right; }

.bold{ font-weight: 500; }

.fz_xl{ font-size: 2em; }
.fz_l{ font-size: 1.6em; }
.fz_s{ font-size: 0.75em; }

.pink{ color: var(--color-pink); }
.blue{ color: var(--color-blue); }
.red{ color: var(--color-red); }
.yellow{ color: var(--color-yellow); }


/* common
------------------------------------------------------------ */
section{
	padding-bottom: 10rem;
}

section h2{
	font-size: 3.2rem;
	font-weight: 700;
}
section h2 .fz_xl{
	font-size: 1.5em;
}
section h2 .fz_l{
	font-size: 1.75em;
}

section.wave{
	position: relative;
	background-color: inherit;
}
section.wave:before{
	content: '';
	display: block;
	width: 100%;
	height: 42px;
	position: absolute;
	top: -41px;
	background-color: inherit;
	-webkit-mask-image: url(./images/bg-wave.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center top;
	-webkit-mask-size: 100% 100%;
	mask-image: url(./images/bg-wave.png);
	mask-repeat: no-repeat;
	mask-position: center top;
	mask-size: 100% 100%;
}

section .box{
	display: block;
	padding: 2rem 2rem 4rem;
	border-radius: 40px;
	background: var(--color-pink-light);
	color: var(--color-black);
	text-align: center;
}

h2 > .balloon{
	position: relative;
	display: inline-block;
	padding: 0.4rem 2rem;
	border-radius: 4px;
	background-color: var(--color-blue);
	color: var(--color-white);
	transform: translateY(-100%);
}
.balloon:after{
	content: '';
	position: absolute;
	bottom: -14px;
	left: calc( 50% - 9px);
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 15px solid var(--color-blue);
}

.box_balloon{
	position: relative;
	display: block;
	padding: 2rem 1.6rem;
	border-radius: 10px;
	background: var(--color-white);
	color: var(--color-black);
	text-align: left;
}
.box_balloon:before{
	content: '';
	position: absolute;
	top: -11px;
	left: 95px;
	width: 13px;
	height: 12px;
	background-color: var(--color-white);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}


/* sec-header
------------------------------------------------------------ */
#sec-header{
	position: sticky;
	top: 0;
	padding-block: 0.9rem 0.974rem;
	background-color: var(--color-white);
	box-shadow: 0 4px 16px 0 rgb(0 0 0 / 0.08);
	z-index: 1000;
}
#sec-header .wrap{
	max-width: var(--max-width);
}

#sec-header .grid{
	grid-template-columns: 50% auto 38px;
	justify-items: end;
}

#sec-header .label{
	display: inline-block;
	padding: 0.3rem 1.2rem;
	border: 1.5px solid var(--color-pink);
	border-radius: 4px;
	color: var(--color-pink);
	font-size: 1rem;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.5px;
}
#sec-header .label .big{
	font-size: 1.25rem;
}

#sp_nav__btn{
	position: relative;
	display: block;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 4px;
	border: 0;
	background: transparent;
	z-index: 1000;
}
#sp_nav__btn span,
#sp_nav__btn span::before,
#sp_nav__btn span::after{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-black);
	transition: transform .25s ease, opacity .25s ease;
}
#sp_nav__btn span{
	position: relative;
}
#sp_nav__btn span::before,
#sp_nav__btn span::after{
	position: absolute;
	inset: 0;
}
#sp_nav__btn span::before{ transform: translateY(-7px); }
#sp_nav__btn span::after{ transform: translateY(7px); }
body.nav_open #sp_nav__btn span{ background: none; }
body.nav_open #sp_nav__btn span::before{ transform: rotate(-45deg); }
body.nav_open #sp_nav__btn span::after{ transform: rotate(45deg); }


/* sec-nav
------------------------------------------------------------ */
#sec-nav{
	position: fixed;
	inset: 0;
	background: var(--color-white);
	box-shadow: -8px 0 24px rgb(0 0 0 / 0.12);
	transform: translateX(100%);
	transition: transform .2s ease;
	padding-top: var(--header-height);
	overflow-y: auto;
	z-index: 999;
	text-align: left;
}
body.nav_open #sec-nav{
	transform: translateX(0);
	transition: transform .4s ease;
}

#sec-nav .wrap{
	max-width: var(--max-width);
	margin-inline: auto;
	padding: 1.2rem 1.2rem 8rem;
}

#sec-nav a{
	display: block;
	border-bottom: 1px dashed var(--color-gray);
	padding: 13px 44px 12px 20px ;
	background: url(./images/nav-icon-arrow.svg) no-repeat right 20px center;
	text-decoration: none;
	line-height: 1.5;
}
#sec-nav a:hover{
	background-color: var(--color-pink-light);
}



/* sec-kv
------------------------------------------------------------ */
#sec-kv{
	position: relative;
	padding-bottom: 0;
}

#sec-kv .wrap{
	max-width: var(--max-width);
	padding-inline: 0;
}

#sec-kv img{
	width: 100%;
}

#sec-kv .grid{
	gap: 0;
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	max-width: var(--max-width);
	margin-inline: auto;
}
#sec-kv .grid img[src$='img-01.png']{
	width: 212px;
	height: 183px;
	margin-bottom: -80px;
	z-index: 1;
}
#sec-kv .grid img[src$='img-02.png']{
	width: 88px;
	height: 188px;
	margin-right: 3rem;
}


/* sec-about
------------------------------------------------------------ */
#sec-about{
	background: var(--color-pink) url(./images/about-bg.png) no-repeat center top;
	color: var(--color-white);
}

#sec-about .wrap{
	max-width: var(--max-width);
	padding-inline: 2rem;
}
#sec-about h2{
	padding-block: 2rem 3rem;
	font-size: 2.4rem;
}
#sec-about h2 .fz_xl{
	font-size: 2em;
}
#sec-about .fz_xl{
	font-size: 1.5em;
	line-height: 1.3;
}

#sec-about .box_balloon{
	padding-bottom: 4rem;
	font-size: 2rem;
	font-feature-settings: "palt";
}

#sec-about .box_balloon .mb:nth-of-type(1){
	margin-bottom: 1rem;
}
#sec-about .box_balloon .mb:nth-of-type(2){
	margin-bottom: 1.5rem;
}
#sec-about .box_balloon .mb:nth-of-type(3){
	margin-bottom: 2rem;
}

#sec-about .box_balloon img[src$='img-01.png'],
#sec-about .box_balloon img[src$='img-03.png']{
	position: absolute;
}
#sec-about .box_balloon img[src$='img-01.png']{
	top: -3rem;
	right: 0.5rem;
	width: 153px;
	height: 176px;
}
#sec-about .box_balloon img[src$='img-03.png']{
	bottom: 2rem;
	right: 2.5rem;
	width: 59px;
	height: 66px;
}

#sec-about .box_balloon img[src$='img-02.png']{
	width: 240px;
	height: 184px;
	margin-bottom: 2rem;
}

#sec-about .box{
	padding: 1.6rem 3.5rem;
	border-radius: 10px;
	line-height: 2;
	font-size: 1.6rem;
}


/* sec-necessity
------------------------------------------------------------ */
#sec-necessity{
	background: #fff url(./images/necessity-bg.png) no-repeat center top;
	font-size: 2rem;
}

#sec-necessity h2{
	line-height: 1.25;
	margin-bottom: 1rem;
}

#sec-necessity img[src$='img-01.png']{
	width: 121px;
	height: 102px;
	margin-bottom: 2rem;
	transform: translateX(1rem);
}


/* sec-abroad
------------------------------------------------------------ */
#sec-abroad{
	background: var(--color-blue-light) url(./images/abroad-bg.png) no-repeat center top 1rem;
	padding-bottom: 4rem;
}

#sec-abroad h2{
	margin-bottom: 3rem;
}

#sec-abroad .grid{
	margin-bottom: 2rem;
}
#sec-abroad .grid__item{
	padding: 15px 9px 13px;
	border-radius: 10px;
	background-color: var(--color-white);
	padding: 1rem;
}
#sec-abroad .grid__item img{
	width: 107px;
	height: 25px;
	margin: 0 0 1rem;
}

#sec-abroad .text{
	font-size: 2rem;
}

#sec-abroad .references{
	margin-top: 2rem;
	font-size: 1rem;
	font-weight: 500;
	text-align: left;
}


/* sec-policy
------------------------------------------------------------ */
#sec-policy{
	padding-top: 2.7rem;
	padding-bottom: 0;
	background: var(--color-white) url(./images/policy-bg.png) no-repeat center top;
}
#sec-policy h2{
	margin-block: calc((-1lh + 1em) / 2);
	padding-inline: 0.7rem;
	font-size: 2rem;
	text-align: left;
}
#sec-policy h2 .fz_xl{
	font-size: 2.4em;
}
#sec-policy h2 .fz_l{
	font-size: 1.6em;
}

#sec-policy h2 .mb{
	margin-bottom: 0.2rem;
}

#sec-policy img[src$='policy-img-01.png']{
	margin-block: 2.8rem;
	margin-left: -2rem;
}

#sec-policy .box{
	margin-top: calc( 168px * 0.4 + 3rem);
	background: linear-gradient( 180deg, #f5f5f5 0%, #f0f0f0 100%);
}
#sec-policy .box img[src$='policy-box-img-01.png']{
	margin-inline: auto;
	width: 280px;
	height: 168px;
	margin-top: calc( -168px * 0.4 - 2rem );
	margin-bottom: 3rem;
}


/* sec-features
------------------------------------------------------------ */
#sec-features{
	margin-top: calc( 108px * 0.5);
	padding-top: 9rem;
	padding-bottom: 5rem;
	background-color: var(--color-pink-light);
}

#sec-features .box{
	background: var(--color-pink) url(./images/bg-dotted.svg) repeat center top;
	background-blend-mode: soft-light;
}

#sec-features img[src$='features-img-01.png']{
	width: 108px;
	height: 108px;
	margin-top: calc( -108px * 0.5 - 2rem );
}

#sec-features h2{
	margin-bottom: 2rem;
	color: var(--color-white);
}
#sec-features h2 .badge{
	background-color: var(--color-white);
	color: var(--color-pink);
}

#sec-features li.grid{
	grid-template-columns: 64px auto;
	grid-template-rows: auto;
	align-items: center;
	justify-items: start;
	gap: 10px 8px;
	padding: 2rem 0.8rem 2rem 1.8rem;
	border-radius: 20px;
	background-color: var(--color-white);
	box-shadow: -4px 4px 4px 0 rgb(0 0 0 / 0.12);
}
#sec-features li.grid + li.grid{
	margin-top: 1.2rem;
}

#sec-features li.grid img{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	width: 64px;
	height: 64px;
}
#sec-features li.grid h3{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	font-size: 2.4rem;
	text-align: left;
	line-height: 1.5;
}
#sec-features li.grid h3:has(.fz_s){
	line-height: 1.5;
}
#sec-features li.grid h3 .fz_s{
	display: block;
	font-size: 16px;
}
#sec-features li.grid .text{
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	width: 100%;
	padding-right: 1.2rem;
	padding-left: 0.2rem;
	line-height: 1.5;
	text-align: center;
}
#sec-features li.grid .text br + .fz_s{
	display: block;
	margin-top: -0.25em;
}

#sec-features img[src$='features-img-02.png']{
	width: 48px;
	height: 48px;
	margin-top: 4rem;
	margin-bottom: 1rem;
}
#sec-features img[src$='features-img-02.png'] + .text{
	font-size: 1.4rem;
	font-weight: 500;
}


/* sec-prices
------------------------------------------------------------ */
#sec-prices{
	padding-top: 5rem;
	padding-bottom: 2rem;
}

#sec-prices h2{
	margin-bottom: 1rem;
	color: var(--color-pink);
}

#sec-prices .scroll{
	margin-top: 3rem;
	overflow-x: scroll;
}

#sec-prices table{
	max-width: unset;
	border-collapse: collapse;
}

#sec-prices table th,
#sec-prices table td{
	padding: 1.4rem 0.8rem;
	bottom: 0;
	border-bottom: 1px solid #ddd;
	vertical-align: middle;
}

#sec-prices table thead th:nth-of-type(2),
#sec-prices table thead th:nth-of-type(3),
#sec-prices table thead th:nth-of-type(4){
	width: 10rem;
	border-radius: 10px 10px 0 0;
	border-right: 2px solid #fff;
	color: var(--color-white);
	text-align: center;
}
#sec-prices table thead th:nth-of-type(2){
	background-color: #f5bcb3;
}
#sec-prices table thead th:nth-of-type(3){
	background-color: #e89d90;
}
#sec-prices table thead th:nth-of-type(4){
	background-color: #eb7171;
}

#sec-prices table tbody th{
	padding: 1rem 2rem;
	font-size: 1.2rem;
	text-align: left;
	word-break: keep-all;
}
#sec-prices table tbody th .fz_s{
	display: block;
	font-size: 1rem;
	font-weight: 500;
}

#sec-prices table tbody td{
	border-right: 1px solid #ddd;
}
#sec-prices table tbody td:nth-of-type(1){
	background-color: rgb(245 188 179 / 0.1);
}
#sec-prices table tbody td:nth-of-type(2){
	background-color: rgb(232 157 144 / 0.3);
}
#sec-prices table tbody td:nth-of-type(3){
	background-color: rgb(235 113 113 / 0.4);
}

#sec-prices table img[src$='icon-supported.svg']{
	width: 30px;
	height: 30px;
}
#sec-prices table img[src$='icon-unsupported.svg']{
	width: 14px;
	height: 14px;
}


/* sec-payment
------------------------------------------------------------ */
#sec-payment{
	padding-top: 3rem;
	text-align: left;
}

#sec-payment .wrap .wrap{
	max-width: 280px;
	padding-inline: 0;
}

#sec-payment h2{
	width: 260px;
	margin-inline: auto;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	line-height: 1;
	border-bottom: 1px solid var(--color-black);
	text-align: center;
}

#sec-payment .wrap > .text{
	margin-block: calc( (-1lh + 1em) / 2 );
}

#sec-payment .box-method{
	width: 280px;
	margin-inline: auto;
	margin-bottom: 2rem;
}
#sec-payment .box-method h3{
	padding: 0.4rem 1rem 0.5rem;
	border-radius: 10px 10px 0 0;
	background-color: var(--color-black);
	color: var(--color-white);
	font-weight: 700;
}
#sec-payment .box-method .text{
	padding: 1rem;
	border-radius: 0 0 10px 10px;
	border: 1px solid var(--color-black);
}

#sec-payment .box{
	margin-top: 3rem;
	padding: 2rem;
	border-radius: 10px;
	background-color: #f6f6f6;
}
#sec-payment .box h3{
	margin-block: calc( (-1lh + 1em) / 2 );
	margin-bottom: 3rem;
	font-size: 1.6rem;
	font-weight: 700;
	text-align: left;
}
#sec-payment .box .text{
	font-size: 1.2rem;
	font-weight: 400;
	text-align: justify;
	font-feature-settings: "palt";
}


/* sec-explanation
------------------------------------------------------------ */
#sec-explanation{
	background: var(--color-pink-light) url(./images/explanation-bg.png) no-repeat center top 2.5rem;
	padding-bottom: 0;
}

#sec-explanation h2{
	margin-bottom: 2rem;
}
#sec-explanation h2 > .balloon{
	background-color: var(--color-yellow);
	color: var(--color-white);
}
#sec-explanation h2 > .balloon:after{
	border-top-color: var(--color-yellow);
}
#sec-explanation h2 .text{
	display: block;
}

#sec-explanation img[src$='img-01.png']{
	width: 271px;
	height: 314px;
	margin-bottom: 2rem;
}

#sec-explanation .intro{
	background-color: var(--color-white);
}
#sec-explanation .intro .wrap{
	max-width: var(--max-width);
	margin-inline: auto;
	margin-top: 4rem;
	margin-bottom: 6rem;
	padding-block: 2rem 3rem;
	padding-inline: 47px;
	background-image: url(./images/explanation-bg-01.png), url(./images/explanation-bg-02.png);
	background-repeat: no-repeat;
	background-position: left 16px top 3rem, right 7px top 20rem;
	font-size: 2rem;
}
#sec-explanation .intro .fz_xl{
	display: block;
	font-size: 4.8rem;
}

#sec-explanation .big_box{
	max-width: var(--max-width);
	margin-inline: auto;
	margin-top: -6rem;
	padding-top: 7.3rem;
	padding-bottom: 12rem;
	padding-inline: 2rem;
	border-radius: 40px 40px 0 0;
	background: #f2d176 url(./images/bg-dotted.svg) repeat center top;
	background-blend-mode: soft-light;
}
#sec-explanation .big_box h2{
	display: inline-block;
	margin-top: -100%;
	transform: translateY(-1rem);
	padding: 0.4rem 2rem;
	border-radius: 4px;
	background-color: var(--color-yellow);
	color: var(--color-white);
	rotate: -2.39deg;
}
#sec-explanation .big_box .inner{
	padding-bottom: 4rem;
	background-color: var(--color-white);
	border-radius: 10px;
}

#sec-explanation .big_box .box{
	margin-block: 3rem;
	margin-inline: 2rem;
	padding: 2rem 2.4rem 0;
	border-radius: 10px;
	background-color: #fffedf;
}

#sec-explanation .big_box .fz_l{
	font-size: 1.5em;
}

#sec-explanation .big_box img[src$='box-img-01.png']{
	width: 311px;
	height: 86px;
}
#sec-explanation .big_box img[src$='box-img-02.png']{
	margin-top: 2rem;
	width: 233px;
	height: 138px;
}
#sec-explanation .big_box img[src$='explanation-bg.png']{
	margin-block: 1rem;
	width: 10px;
	height: 33px;
}
#sec-explanation .big_box img[src$='box-img-03.png']{
	margin-bottom: 2rem;
	width: 266px;
	height: 164px;
}

#sec-explanation .big_box + .big_box{
	position: relative;
	background-color: var(--color-pink);
	background-blend-mode: hard-light;
	padding-top: 6.6rem;
	padding-bottom: 8rem;
}
#sec-explanation .big_box + .big_box:before{
	content: '';
	position: absolute;
	top: calc( -65px / 2 );
	left: calc( ( 100% - 37px ) / 2 );
	display: block;
	margin-inline: auto;
	width: 37px;
	height: 65px;
	background: url(./images/explanation-icon-arrow.svg) no-repeat center top;
}
#sec-explanation .big_box + .big_box .inner{
	padding-top: 2rem;
}

#sec-explanation .big_box + .big_box .inner .text .mb{
	margin-bottom: 0.2rem;
}

#sec-explanation .big_box + .big_box .inner .line{
	border-top: 1px dashed var(--color-pink);
	margin-block: 2rem;
	margin-inline: 2rem;
	padding-top: 2rem;
}

#sec-explanation .big_box + .big_box .box{
	background-color: var(--color-pink-light);
	margin-block: 1rem;
	margin-inline: 0.8rem;
	padding-block: 2rem 1.8rem;
}
#sec-explanation .big_box + .big_box .box + .box{
	margin-bottom: 1.5rem;
	background-color: var(--color-blue-light);
}

#sec-explanation .big_box img[src$='box-img-04.png']{
	margin-top: 2rem;
	width: 281px;
	height: 214px;
}
#sec-explanation .big_box img[src$='box-img-05.png']{
	margin-top: 2rem;
	width: 281px;
	height: 175px;
}

#sec-explanation .big_box .japan{
	background: url(./images/explanation-bg-japan.png) no-repeat center;
	background-size: contain;
}
#sec-explanation .big_box + .big_box .inner .text.japan .mb{
	margin-bottom: 1rem;
}


/* sec-medical
------------------------------------------------------------ */
#sec-medical{
	padding-top: 1rem;
	padding-bottom: 4rem;
	background-color: var(--color-pink-light);
}

#sec-medical h2{
	font-size: 1.6rem;
}

#sec-medical img[src$='img-01.png']{
	margin-block: 2rem;
	width: 274px;
	height: 184px;
}

#sec-medical .box_balloon{
	padding: 2rem 0.9rem;
	text-align: center;
	filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.25));
}
#sec-medical .box_balloon:before{
	top: -18px;
	width: 20px;
	height: 19px;
	left: calc( ( 100% - 20px ) / 2 );
}

#sec-medical img[src$='img-02.png']{
	margin-block: 1rem 2rem;
	width: 302px;
	height: 46px;
}

#sec-medical .background{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 55px;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	background-image: url(./images/medical-bg-01.png), url(./images/medical-bg-02.png);
	background-repeat: no-repeat;
	background-position: left center, right center;
}

#sec-medical .references{
	margin-top: 1rem;
	font-weight: 500;
}


/* sec-experiences
------------------------------------------------------------ */
#sec-experiences{
	padding-top: 5rem;
	padding-bottom: 6rem;
}

#sec-experiences h2{
	display: inline-block;
	margin-bottom: 3rem;
	margin-left: 4.5rem;
	padding-right: 4.5rem;
	background-image: url(./images/experiences-bg-h2-01.svg), url(./images/experiences-bg-h2-02.svg);
	background-repeat: no-repeat;
	background-position: left top, right bottom;
	font-size: 2.4rem;
}

#sec-experiences li.grid{
	grid-template-columns: 56px auto;
	grid-template-rows: auto;
	align-items: center;
	justify-items: start;
	gap: 20px 12px;
	padding: 1.5rem;
	border-radius: 10px;
	background-color: var(--color-pink);
}
#sec-experiences li.grid + li.grid{
	margin-top: 2rem;
}

#sec-experiences li.grid img{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	width: 56px;
	height: 56px;
}
#sec-experiences li.grid h3{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	color: var(--color-white);
	font-size: 2rem;
	text-align: left;
	line-height: 1.5;
}
#sec-experiences li.grid .accordion{
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	width: 100%;
	border-radius: 4px;
	background-color: var(--color-white);
}
#sec-experiences li.grid .accordion .inner{
	padding: 1rem;
	font-size: 1.4rem;
	text-align: justify;
	line-height: 1.5;
}
#sec-experiences li.grid .accordion .btn{
	position: relative;
	grid-template-columns: repeat(2, auto);
	justify-content: center;
	padding: 1rem;
	background-color: var(--color-white);
	color: var(--color-pink);
	font-size: 1.6rem;
	line-height: 1.5;
	cursor: pointer;
	user-select: none;
}
#sec-experiences li.grid .accordion .btn:after{
	content: '+';
	margin-left: 1em;
}

#sec-experiences li.grid .accordion .btn:before{
	content: '体験談を閉じる';
	display: grid;
	align-items: center;
	justify-items: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-white);
	transform: rotateX(90deg);
	transition: transform 0.3s ease-in-out;
	transition-delay: 0.5s;
}
#sec-experiences li.grid .accordion.open .btn:before{
	/* transition: transform 0.3s ease-in-out;
	transition-delay: 0.5s; */
	transform: rotateX(0deg);
}


/* sec-flows
------------------------------------------------------------ */
#sec-flows{
	padding-top: 5rem;
	padding-bottom: 3rem;
	background-color: var(--color-pink-light);
}

#sec-flows h2{
	padding-bottom: 3rem;
}

#sec-flows .box-step{
	position: relative;
	max-width: 300px;
	margin-inline: auto;
	margin-bottom: 2rem;
}
#sec-flows .box-step:not(:last-child):after{
	content: '';
	position: absolute;
	bottom: calc( -2rem + 2px );
	left: 50%;
	display: block;
	width: 1px;
	height: calc( 2rem - 4px );
	border-left: 1px dashed var(--color-black);
}
#sec-flows .box-step h3{
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 1rem;
	align-items: center;
	justify-content: start;
	padding: 1rem;
	border-radius: 10px 10px 0 0;
	background-color: var(--color-black);
}
#sec-flows .box-step h3 .step{
	display: grid;
	grid-template-rows: repeat(2, auto);
	align-items: center;
	justify-items: center;
	width: 41px;
	padding-block: 0.25rem;
	border-radius: 4px;
	background-color: var(--color-white);
	color: var(--color-black);
	font-size: 1.2rem;
	font-weight: 700;
}
#sec-flows .box-step h3 .step .num{
	font-size: 2.4rem;
}
#sec-flows .box-step h3 .inner{
	color: var(--color-white);
	text-align: left;
	font-size: 2rem;
	font-weight: 700;
}
#sec-flows .box-step h3 .inner .fz_s{
	font-size: 1.2rem;
	font-weight: 500;
}

#sec-flows .box-step .text{
	padding: 1rem;
	border-radius: 0 0 10px 10px;
	border: 1px solid var(--color-black);
	background-color: var(--color-white);
	text-align: left;
	line-height: 1.5;
}
#sec-flows .box-step .text .red{
	font-weight: 500;
}


/* sec-faq
------------------------------------------------------------ */
#sec-faq{
	padding-top: 4rem;
	padding-bottom: 3rem;
}

#sec-faq h2{
	padding-bottom: 3rem;
}

#sec-faq .accordion{
	margin-bottom: 2rem;
	padding: 1rem;
	border-radius: 4px;
	border: 1px solid var(--color-pink);
}

#sec-faq .accordion .faq_q.btn{
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	padding-block: 1rem;
	background-color: var(--color-white);
	color: var(--color-black);
	font-size: 1.6rem;
	text-align: left;
	line-height: 1.5;
	cursor: pointer;
	user-select: none;
}
#sec-faq .accordion .faq_q:before{
	content: url(./images/faq-icon-q.svg);
}
#sec-faq .accordion .faq_q:after{
	content: url(./images/icon-arrow.svg);
	transition: rotate 0.3s ease-in-out;
}
#sec-faq .accordion.open .faq_q:after{
	rotate: -180deg;
}

#sec-faq .accordion .faq_a{
	font-size: 1.4rem;
	font-weight: 500;
	text-align: left;
	line-height: 1.8;
}


/* appointment
------------------------------------------------------------ */
#appointment{
	padding-top: 4rem;
	padding-bottom: 8rem;
	background-color: #f7f7f7;
}

#appointment h2{
	font-size: 2.4rem;
}

.select_clinic_wrap{
	margin-top: 2rem;
}

/* --- list-area --- */
.list-area{
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.list-area > .accordion{
	padding-inline: 1rem;
	border-radius: 8px;
	background-color: var(--color-white);
	box-shadow: 0 0 4px rgb(0 0 0 / 0.12);
}
.list-area > .accordion > .btn{
	display: block;
	padding: 1.4rem 24px;
	position: relative;
	background-color: var(--color-white);
	color: var(--color-black);
	font-size: 2rem;
	text-align: left;
	line-height: 1.5;
}
.list-area > .accordion > .btn:before{
	content: url(./images/icon-pin.svg);
	width: 24px;
	height: 24px;
	position: absolute;
	left: 0;
	top: calc( 50% - 24px / 2 );
}
.list-area > .accordion > .btn:after{
	content: url(./images/icon-arrow.svg);
	width: 24px;
	height: 24px;
	position: absolute;
	right: 0;
	top: calc( 50% - 24px / 2 );
	transition: rotate 0.3s ease-in-out;
}
.list-area > .accordion.open > .btn:after{
	rotate: -180deg;
}

/* --- list-prefecture --- */
.list-prefecture{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

.list-prefecture > .accordion{
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}
.list-prefecture > .accordion > .btn{
	position: relative;
	padding: 1rem 4rem 1rem 2rem;
	position: relative;
	border-radius: 10px 10px 0 0;
	background-color: var(--color-black);
	color: var(--color-white);
	font-size: 1.6rem;
	text-align: left;
	line-height: 1.5;
}
.list-prefecture > .accordion > .btn:before,
.list-prefecture > .accordion > .btn:after{
	content: '';
	width: 1px;
	height: 13px;
	position: absolute;
	right: 2rem;
	top: calc( 50% - 12px / 2 );
	background-color: var(--color-white);
	transition: scale 0.3s ease-in-out;
}
.list-prefecture > .accordion > .btn:after{
	rotate: 90deg;
}
.list-prefecture > .accordion.open > .btn:before{
	scale: 1 0;
}
.list-prefecture > .accordion > .cts{
	border: 1px solid var(--color-black);
	border-radius: 0 0 10px 10px;
}

/* --- list-clinic --- */
.list-clinic > li{
	margin-inline: 2rem;
	padding-block: 2rem;
	text-align: left;
	line-height: 1.5;
}
.list-clinic > li + li{
	border-top: 1px solid var(--color-gray);
}

.c-name,
.c-name a{
	margin-bottom: 1rem;
	color: inherit;
	font-size: 1.4rem;
	text-decoration: underline;
}
.c-zipcode, .c-address, .c-tel, .c-holiday, .c-url{
	font-size: 1.2rem;
}
.c-url{
	color: var(--color-pink);
	text-decoration: underline;
}
.c-btn .btn{
	margin-top: 2rem;
	font-size: 1.6rem;
}

/* --- form --- */
#appointment #form{
	display: none;
	margin-top: 5rem;
	padding-inline: 2rem;
	border-radius: 8px;
	background-color: var(--color-white);
	box-shadow: 0 0 4px rgb(0 0 0 / 0.12);
}
#appointment #form.open{
	display: block;
}

#appointment #form .valid-msg:not(:empty){
	margin-block: 5px;
	color: var(--color-red);
	font-size: 0.75em;
}

#appointment h3{
	padding-top: 2rem;
}

#appointment .clinic_name{
	color: var(--color-pink);
}
#appointment .clinic_name:before{
	content: '\201C';
}
#appointment .clinic_name:after{
	content: '\201D';
}

#appointment .fields{
	padding-block: 2rem;
	border-bottom: 1px solid var(--color-gray);
	text-align: left;
}
#appointment .fields.other,
#appointment .fields.privacy,
#appointment .fields.submit{
	border-bottom: 0;
}

#appointment .fields .grid{
	align-items: start;
	gap: 8px;
}

#appointment .fields .fz_l{
	font-size: 1.6rem;
}
#appointment .fields .fz_s{
	font-size: 1.2rem;
}
#appointment .fields .fz_s.red{
	font-size: 1rem;
}

#appointment .fields .ico_required{
	margin-left: 3px;
	color: var(--color-red);
	font-size: 2rem;
}

#appointment .fields .red{
	padding-bottom: 5px;
	font-weight: 500;
}
#appointment .fields > .red{
	padding-bottom: 1.5rem;
}

#appointment .labels .title{
	display: block;
	padding-bottom: 1rem;
}

#appointment .inputs + .labels{
	margin-top: 1rem;
}

#appointment .fields .fz_s:not(.red){
	display: inline-block;
	padding-bottom: 0.8rem;
}


#appointment .fields label[for*='your_address'] {
  display: inline-block;
  margin-top: 5px;
}

#appointment .fields .caution:empty{
	display: none;
}
#appointment .fields .caution{
	margin-top: 5px;
	line-height: 1.5;
	letter-spacing: 0;
}

#clinic_menu.limited [value^='B検査'],
#clinic_menu.limited [value^='C検査']{
	display: none;
}

#appointment .fields.expected .inputs:has(input[name^='gestational_age']){
	grid-template-columns: repeat(2, auto);
	gap: 5px;
}
#appointment .fields.expected .inputs:has(input[name^='gestational_age']) .grid__item{
	display: grid;
	grid-template-columns: auto 1em;
	align-items: baseline;
	justify-items: center;
	gap: 5px;
}

#appointment .fields.preferred .grid{
	grid-template-columns: 1fr 1fr;
	align-items: end;
}
#appointment .fields.preferred .caution.pref_date.ok{
	color: var(--color-blue);
}
#appointment .fields.preferred .caution.pref_date.ng{
	color: var(--color-red);
}

#appointment .fields.other .labels .fz_s{
	font-weight: 500;
}

#appointment .fields.privacy{
	padding-block: 1rem 4rem;
	font-size: 1rem;
	text-align: center;
}

#appointment .fields.privacy .inputs + .inputs{
	margin-top: 1rem;
}

#appointment .fields.privacy label{
	display: block;
}

#appointment .fields.privacy input[type=checkbox]{
	margin-right: 0.8rem;
	vertical-align: middle;
}

#appointment .fields.privacy a{
	display: block;
	margin-block: 1rem;
	color: var(--color-black);
	font-weight: 500;
}

#appointment .fields.submit{
	padding-top: 0;
	padding-bottom: 3rem;
}

#appointment .fields.submit input[type=submit]:disabled{
	background-color: var(--color-gray);
	color: var(--color-white);
	cursor: not-allowed;
}

/* wpcf7 */
#form .wpcf7 .screen-reader-response ul,
#appointment .fields.privacy input[name^="privacy"] + .wpcf7-list-item-label,
#appointment .fields.privacy input[name^="notice"] + .wpcf7-list-item-label{
	display: none;
}

#form .wpcf7:has(form:where(.invalid,.spam,.sent)) .screen-reader-response,
#form .wpcf7:has(form:where(.invalid,.spam,.sent)) .wpcf7-response-output{
	color: var(--color-red);
	font-size: 1.2rem;
	text-align-last: left;
}
#form .wpcf7:has(form:where(.invalid,.spam,.sent)) .screen-reader-response{
	padding-top: 2rem;
}
#form .wpcf7:has(form:where(.invalid,.spam,.sent)) .wpcf7-response-output{
	padding-bottom: 2rem;
}
#form .wpcf7:has(form.sent) .screen-reader-response,
#form .wpcf7:has(form.sent) .wpcf7-response-output{
	color: #19a11e;
}

#form .wpcf7 [aria-invalid="true"]{
	outline: 1px solid var(--color-pink);
	background-color: var(--color-pink-light) !important;
}

#form .wpcf7-turnstile{
	margin-inline: -2rem;
}




/* sec-footer
------------------------------------------------------------ */
#sec-footer{
	background-color: var(--color-black);
	color: var(--color-white);
	padding-top: 2rem;
	padding-bottom: 80px;
	font-size: 1rem;
	font-weight: 500;
}


/* floating
------------------------------------------------------------ */
#floating{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	background-color: var(--color-white);
	letter-spacing: 0;
	box-shadow: 0 -4px 16px 0 rgb(0 0 0 / 0.08);
	z-index: 1000;
	transition: bottom 0.3s ease-in-out;
}
#floating.show{
	bottom: 0 !important;
}

#floating .grid{
	justify-content: space-between;
	gap: 0;
	max-width: var(--max-width);
	margin-inline: auto;
}

#floating a{
	display: block;
	text-decoration: none;
	letter-spacing: 1px;
}

#floating .fz_s{
	display: inline-block;
	font-size: 10px;
	font-feature-settings: "palt";
}

#floating .grid__item:nth-of-type(1){
	line-height: 20px;
	font-size: 20px;
	text-align-last: left;
}
#floating .grid__item:nth-of-type(1) img{
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: bottom;
}

#floating .grid__item:nth-of-type(2){
	width: 150px;
}



@media (min-width: 768px){
	#sec-prices .scroll{
		overflow-x: visible;
		margin-inline: calc((100vw - 100%) / 2 * -1);
	}
	#sec-prices table{
		margin-inline: auto;
	}
} /* @media (sp)*/

@media (max-width: 360px){
} /* @media (sp)*/

@media (max-width: 320px){
	html{
		font-size: 9px;
	}
	#floating .grid__item:nth-of-type(2){
		width: 120px;
	}
} /* @media (sp)*/


.grecaptcha-badge{
	z-index: 99999;
}