@charset "utf-8";

:root{}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* common */

.spHidden{ display: none;}

/* HOME
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
#wrapper{ width: 100%; height: 100%; margin: 0px auto; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); position: relative; overflow: hidden;}
#wrapper img{ width: 100%; height: auto;}

/* header
--------------------------------------------------------------*/
header{ margin: 0px auto; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; z-index: 1000; background-color: rgba(255, 255, 255, 0.64); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
header section{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
header section h1{ width: 48%; padding-left: 2%;}
header section nav{ width: 50%;}
header section nav ul{ display: flex; justify-content: flex-end; flex-wrap: wrap;}
header section nav ul li{ flex: 1;}
header section nav ul li a{ opacity: 1.0;}
header section nav ul li a:hover{ opacity: 0.72;}

/* main
--------------------------------------------------------------*/
main{ margin: 0px auto;}

.promo{ position: relative;}
.promo .ctaBtn{ width: 80%; position: absolute; bottom: 3.2rem; left: 50%; transform: translateX(-50%); z-index: 100;}
.promo .ctaBtn a{ display: block; overflow: hidden; border-radius: 100px; box-shadow: 0 8px 0 0 #CD858F; position: relative; top: 0; transition: all 0.3s ease 0s;}
.promo .ctaBtn a:hover{ box-shadow: none; top: 8px;}

.contents{ padding: 4.0rem 0;}
.contents section{ width: calc(100% - 4%); margin: 0px auto; position: relative;}
.contents section p{ margin-top: 2.0rem;}
.contents section p:first-child{ margin-top: 0;}

.priceList{ background: #EBF7F7; padding-bottom: 4.0rem;}
.priceList section{ width: calc(100% - 4%); margin: 0px auto; position: relative;}
.priceList section p{ margin-top: 2.0rem;}
.priceList section p.button{ width: 80%; margin: 2.0rem auto 0;}
.priceList section p.button a{ display: block; overflow: hidden; border-radius: 100px; box-shadow: 0 8px 0 0 #0069B5; position: relative; top: 0; transition: all 0.3s ease 0s;}
.priceList section p.button a:hover{ box-shadow: none; top: 8px;}

.clinic{}
.clinic section{ position: relative; border-radius: 0 0 32px 32px; overflow: hidden;}
.clinic section ul{ width: calc(100% - 4%); display: flex; justify-content: space-between; flex-wrap: wrap; position: absolute; bottom: 4.0rem; left: 50%; transform: translateX(-50%);}
.clinic section ul li{ flex: 1;}
.clinic > p{ width: calc(100% - 4%); margin: 0px auto; padding: 4.0rem 0;}

.voice{ background: #EBF7F7; padding: 4.0rem 0;}
.voice section{ width: calc(100% - 4%); margin: 0px auto; position: relative;}
.voice section p{ margin-top: 1.6rem; border-radius: 16px; box-shadow: 0 0 16px rgba(0,0,0,0.16); overflow: hidden;}
.voice .button{ width: 80%; margin: 2.4rem auto 0; box-shadow: none; border-radius: 0; overflow: visible;}
.voice .button a{ display: block; box-shadow: 0 8px 0 0 #32908C; position: relative; top: 0; transition: all 0.3s ease 0s; border-radius: 100px; overflow: hidden;}
.voice .button a:hover{ top: 8px; box-shadow: none;}

.faq{ padding: 4.0rem 0;}
.faq section{ width: calc(100% - 4%); margin: 0px auto; position: relative;}
.qaList{ margin-top: 2.4rem;}
.qaList dt { cursor: pointer; background: #FFF; padding: 0.8em 2.0em; padding-left: 3.0em; font-weight: 600; line-height: 1.4em; position: relative; border-radius: 8px; box-shadow: 0 0 8px rgba(0,0,0,0.08);}
.qaList dt:before{ content:""; width: 24px; height: 24px; background: url("../../images/faq_icon.webp") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0.8em; transform: translateY(-50%);}
.qaList dt::after { content: "\2b"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 50%; right: .8em; transform: translateY(-50%);}
.qaList dt.active::after { content: "\f068";}
.qaList dd { overflow: hidden; height: 0; transition: height 0.3s ease; margin: 0.5em 0;}
.qaList dd.open{ background: #EBF7F7; padding: 0.8em; border-radius: 8px; color: #3EAAA6; font-weight: 600;}

.digikar{ background: #F2F7FC; padding: 4.0rem 0;}
.digikar section{ width: calc(100% - 4%); margin: 0px auto; position: relative;}
.digikar section p,
.digikar section div{ margin-top: 2.4em;}
.digikar section p:first-child{ margin-top: 0;}
.digikar section p.button{ position: relative;}
.digikar section p.button a{ display: block;  width: 80%; position: absolute; bottom: 3.2rem; left: 50%; transform: translateX(-50%); z-index: 100;; overflow: hidden; border-radius: 100px; box-shadow: 0 4px 0 0 #0069B5; transition: all 0.3s ease 0s;}
.digikar section p.button a:hover{ box-shadow: none; bottom: 2.8rem;}
.digikar section div{ position: relative;}
.digikar section div ul{ width: 80%; position: absolute; bottom: 2.4em; left: 10%; z-index: 10; display: flex; justify-content: space-between; flex-wrap: wrap;}
.digikar section div ul li:nth-child(1){ width: 44%;}
.digikar section div ul li:nth-child(2){ width: 54%;}

.coution{ background: #EEEEEE;}
.coution h2{ font-size: 2.4rem; line-height: 1.2em; text-align: center; padding: 0.8em 0; background: #DDDDDD;}
.coution section{ padding: 1.6em 2%;}
.coution section dl{}
.coution section dl dt{ margin-top: 1.0em; font-weight: 700;}
.coution section dl dd{ padding-top: 0.24em; font-size: 1.6rem; line-height: 1.6em;}

/* footer
--------------------------------------------------------------*/
footer{ background: #3EB4AF; padding: 4.0rem 0;}
footer section{ width: calc(100% - 4%); margin: 0px auto; text-align: center;}
footer section h2{ width: 90%; margin: 0px auto;}
footer section .address{ text-align: center; font-weight: 600; color: #FFF; margin-top: 1.0em;}
footer section ul{ margin-top: 1.0em; display: inline-block;}
footer section ul li{ color: #FFF; font-weight: 600; line-height: 1.2em;}
footer section ul li:nth-child(n+2){ margin-top: 0.24em;}
footer section ul li span{ display: inline-block; color: #FFF; font-weight: 600; width: 5.0em;}
footer section .copyright{ font-size: 1.2rem; line-height: 1.4em; margin-top: 2.4em; color: #FFF; text-align: center; font-weight: 600;}

/*--------------------------------------------------------------
# basic configuration
--------------------------------------------------------------*/
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

html, body {
  min-height: 100%;
}

body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size:1.6rem;
	line-height:1.8em;
	font-family: -apple-system,'Noto Sans JP', BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	color:#333;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #F6F6F6;
	position:relative;
}

a{color:#00A2D8; text-decoration:none; transition: all 0.3s ease 0s;}
a:hover{color:#6EDAFF; text-decoration:none;}

/*--------------------------------------------------------------
# reset
--------------------------------------------------------------*/
html { height:100%; font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,img,p{ margin: 0px; padding: 0px; font-weight: 400;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{ text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption,th { text-align: left;}
q:before,q:after { content: '';}
img,
object,
embed { vertical-align: top;}
legend{ display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img,abbr,acronym,fieldset{ border:none;}
li{ list-style-type: none;}
svg{ fill: currentColor;}

/*---------- align ----------*/
.align-left{ text-align: left;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}

/*----- clearfix -----*/
.container,
.clearfix { zoom:1;}
.container:after,
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}