@charset "utf-8";
/* CSS Document */

#title-area { position:relative; clear:both; height: 360px; background: linear-gradient(#E6E6FF 73%,#FFFCF1 90%); text-align: center;}
#title-area img { width:100%; height:360px; object-fit: cover; position: absolute; top: 0; left: 0; }
#title { position:absolute; top: 50%; left:0; right:0; width: 90%; max-width:1400px; margin: 0 auto; text-align: left; z-index: 77777; }
#title h2 { border-bottom: 2px solid #8ECEC9; text-align: left; display: inline-block; padding:2px 5px; margin: 0 auto 1em auto; font-size: 45px; color:#201813; letter-spacing: 0.05em; font-family: "M PLUS 1p"; }

@media only screen and (max-width:1400px) {
    #title h2 { font-size:35px; }
}

@media only screen and (max-width:960px) {
    #title-area { height:220px;}
    #title-area img { height:220px;}
    #title h2 {font-size:27px; }
}

@media only screen and (max-width:640px) {
    #title-area img { height:120px;}
}
/* ===================================================================
 main
=================================================================== */
#main { clear: both; width:100%; }
#main section { width:90%; max-width:1400px; margin: 0 auto; padding: 90px 0;}

@media only screen and (max-width: 640px) {
    #main section { padding:40px 0; }
}

#main ul {}
#main ul li {}

/* AST気功とは
=================================================================== */
#ast-about { }
#ast-about h3 { color: #0C662A; font-size:31px; position: relative; display: inline-block; margin-bottom: 1em;}
#ast-about h3:before { content: ''; position: absolute; bottom: -10px; display: inline-block; width:90px; height:2px; left:0; background-color:#97CD8C;}
#ast-about .flex { margin-bottom:50px;}
#ast-about .txt { width: 60%; }
#ast-about .txt p { text-wrap: pretty; text-align: justify; text-align-last: left;}
#ast-about .photo { width: 33%; margin-bottom:50px;}
#ast-about ul li {position: relative; list-style: none; font-size: 18px; border-bottom:1px dashed #F6DA6C; padding: 8px 0 8px 20px; line-height: 1.35;}
#ast-about ul li:before { position: absolute; top:10px; left: 0;  content: '●'; color: #F6DA6C; font-size:15px; vertical-align: top;}

@media only screen and (max-width: 640px) {
    #ast-about h3 { font-size: 25px;}
    #ast-about .txt { width:100%; padding:30px 0;}
    #ast-about .photo { width:100%; max-width: 360px; margin:0 auto 20px;}
}

#ast-method { text-align: center;}
#ast-method h3 { position: relative; font-size:31px; color:#0C662A; text-align: center; display: inline-block; margin:0 auto 2em auto;}
#ast-method h3:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width:52px; height:2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#FFF;}
#ast-method h4 { color: #0C662A; font-size:23px; font-weight:bold; position: relative; display: inline-block; margin-bottom: 1.5em;}
#ast-method h4:before { content: ''; position: absolute; bottom: -10px; display: inline-block; width:90px; height:2px; left:0; background-color:#97CD8C;}

#ast-method .flex {background:#fff; border-radius:15px; padding:10px; margin-bottom:20px; text-align:left;}
#ast-method .flex .txt { width:60%; padding:50px;}
#ast-method .flex .photo { width:37%; max-width:518px;}
#ast-method .flex .txt p { text-wrap: pretty; text-align: justify; text-align-last: left;}

@media only screen and (max-width: 720px) {
    #ast-method .flex .txt { width:100%; padding:20px;}
    #ast-method .flex .photo { width:100%; max-width:518px;}
}

/* 遠隔操作
=================================================================== */
#remote-about h3 { color: #0C662A; font-size:31px; position: relative; display: inline-block; margin-bottom: 1em;}
#remote-about h3:before { content: ''; position: absolute; bottom: -10px; display: inline-block; width:90px; height:2px; left:0; background-color:#97CD8C;}

@media only screen and (min-width: 641px) {
    #remote-about img.sp { display: none;}
}

@media only screen and (max-width: 640px) {
    #remote-about img.pc { display: none;}
}

#remote-suit { text-align: center;}
#remote-suit h3 { position:relative; font-size:31px; font-weight: bold; color:#FFF; text-align:center; display:inline-block; margin:0 auto 2em auto;}
#remote-suit h3:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width:52px; height:2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#CFEBD3;}
#remote-suit .box { width: 100%; padding:50px; border-radius:20px; border:1px solid #FFFCF1; color: #fff;} 
#remote-suit ul { display: table; text-align: left; margin-left: auto; margin-right: auto;}
#remote-suit ul li {position:relative; list-style:none; font-size:21px; font-weight:bold; border-bottom:1px dashed #FDF8CE; padding:13px 20px 13px 33px; line-height: 1.35;}
#remote-suit ul li:before { position:absolute; top:16px; left:10px; content:'●'; color: #F6DA6C; font-size:15px; vertical-align:top;}

@media only screen and (max-width: 640px) {
    #remote-suit .box { padding:25px; }
    #remote-suit ul li { padding:13px 5px 13px 30px;}
    #remote-suit ul li:before { left:7px;}
}

#remote-course {}
#remote-course h3 { font-size:31px; font-weight:bold; color: #fff; text-align: center;}
#remote-course .txtL { width: 30%; background: #57B38A; border-radius:20px 0 0 20px; padding:50px 0; text-align: center;}
#remote-course .txtR { width: 70%; background: #FFFCF1; border-radius:0 20px 20px 0; padding:90px 0 50px 0; text-align: center;}
#remote-course .txtL img.cut { padding: 20px 0 0 0;}
#remote-course dl { clear:both; width:80%; max-width: 660px; margin: 0 auto 30px auto; font-size: 21px; text-align:center; border-bottom:2px solid #CFEBD3; line-height: 1.2;}
#remote-course dl dt { padding:16px 0 8px 0; clear:left; float:left; width:50%; border-top:2px solid #CFEBD3; }
#remote-course dl dd { padding:16px 0 8px 0; margin-left:50%; border-top:2px solid #CFEBD3; border-left:2px solid #CFEBD3;}
#remote-course dl:after,#remote-course dl dt:after,#remote-course dl dd:after { content:" "; display:block; clear:both;}

@media only screen and (max-width: 640px) {
    #remote-course h3 { font-size:27px; }
    #remote-course .txtL { width:100%; border-radius:20px 20px 0 0; padding: 50px 0; text-align: center;}
    #remote-course .txtR { width:100%; border-radius:0 0 20px 20px; padding: 50px 0; text-align: center;}
    #remote-course .txtL img { padding:20px 0;}
	#remote-course dl dt { clear: both; float: none; width: 100%; padding-bottom:0;}
	#remote-course dl dd { padding-bottom: 14px; margin-left:0; border-top:none; border-left: none;}
    #remote-course img { max-width: 90%;}
}

#remote-frequent { text-align:center;}
#remote-frequent h3 { position:relative; font-size:31px; color:#0C662A; text-align:center; display:inline-block; margin:0 auto 2em auto;}
#remote-frequent h3:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width:52px; height:2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#CFEBD3;}
#remote-frequent p { }

#remote-flow { text-align: center;}
#remote-flow h3 { position:relative; font-size:31px; font-weight: bold; color:#0C662A; text-align:center; display:inline-block; margin:0 auto 1.5em auto;}
#remote-flow ol { margin:50px auto 0 auto; list-style: none; counter-reset:num; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; }
#remote-flow ol li { position:relative; list-style:none; width:25%; margin-bottom:3%; margin-right:0; margin-left:2%; padding:35px 30px 30px 45px; background: #fff; border-radius:20px; border-bottom:1px dashed #FDF8CE; text-align:left; line-height: 1.35;}
#remote-flow ol li.wide { width:41%;}
#remote-flow ol li::before{ position: absolute; left:-10px; top:-10px; counter-increment:num; content: counter(num); font-size:41px; font-weight: bold; display: inline-flex; justify-content: center; align-items: center; vertical-align: top; width: 1.2em; height: 1.2em; background-color:#F6DA6C; color:#fff; border-radius: 100%; margin-right: 3px;}
#remote-flow ol li::after { position: absolute; top:45%; left:-28px; font-family: "Font Awesome 6 Free"; content: "\f30b"; font-size:31px; font-weight: 900; color: #B4E352;}
#remote-flow ol li:first-child::after { content: none;}
#remote-flow ol li h4 { font-size:19px; font-weight: bold; margin-bottom:1em; padding: 1px; }

@media screen and (min-width:1200px) {
  #remote-flow ol li h4 { display: inline-block; background: linear-gradient(transparent 50%, #C3D974 50%);}
}

@media screen and (max-width:1200px) {
  #remote-flow ol li h4 { font-size:20px; text-decoration:underline; text-decoration-color:#C3D974; text-decoration-thickness:5px; }
}

@media screen and (max-width:960px) {
  #remote-flow ol li { position:relative; width:100%; margin-bottom:20px; padding:35px 20px 30px 40px; }
  #remote-flow ol li.wide { width:100%;}
  #remote-flow ol li::after { content: "\f309"; top:-28px; left:45%; }
}

/* 当院について
=================================================================== */
#clinic-profile { text-align: center;}
#clinic-profile h3 { position:relative; font-size:31px; color:#0C662A; text-align:center; display:inline-block; margin:0 auto 2em auto;}
#clinic-profile h3:before { content:''; position: absolute; bottom: -15px; display: inline-block; width:52px; height:2px; left:50%; -webkit-transform:translateX(-50%); transform: translateX(-50%); background-color:#CFEBD3;}
#clinic-profile dl { clear:both; width:100%; max-width: 960px; margin:0 auto 30px auto; font-size:18px; text-align:left; border-bottom:2px solid #CFEBD3; border-left:2px solid #CFEBD3; border-right:2px solid #CFEBD3; line-height:1.2;}
#clinic-profile dl dt { padding:14px 1% 7px 1.7%; clear:left; float:left; width:15em; border-top:2px solid #CFEBD3; }
#clinic-profile dl dd { padding:14px 1% 7px 1.7%; margin-left:15em; border-top:2px solid #CFEBD3; border-left:2px solid #CFEBD3;}
#clinic-profile dl:after,#clinic-profile dl dt:after,#clinic-profile dl dd:after { content:" "; display:block; clear:both;}
#clinic-profile dl dd a { color:  #57B38A;}

@media only screen and (max-width:640px) {
    #clinic-profile h3 { font-size:25px;}
    #clinic-profile dl { font-size: 17px;}
	#clinic-profile dl dt { padding:14px 5px 7px 10px; clear:left; float:left; width:6em; border-top:2px solid #CFEBD3; }
    #clinic-profile dl dd { padding:14px 5px 7px 10px; margin-left:6em; border-top:2px solid #CFEBD3; border-left:2px solid #CFEBD3;}
}

#clinic-therapist { text-align:center}
#clinic-therapist h3 { position:relative; font-size:31px; color:#FFF; text-align:center; display:inline-block; margin:0 auto 2em auto;}
#clinic-therapist h3:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width:52px; height:2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#CFEBD3;}
#clinic-therapist .flex { margin-bottom:30px; padding:50px; text-align:left; border-radius:20px; border:1px solid #FFFCF1; color: #fff;} 
#clinic-therapist .flex .txt { width:85%; padding:0 20px;}
#clinic-therapist .flex .txt h4 { font-size:25px; font-weight:bold; margin-bottom:1em; padding:10px 0 10px 63px; border-bottom:3px solid #CEE5BC; background:url("../images/ico_star.png") no-repeat left top;}
#clinic-therapist .flex .txt ul { margin-bottom:25px;}
#clinic-therapist .flex .txt ul li {position:relative; list-style:none; font-size:18px; font-weight:bold; border-bottom:1px dashed #fff; padding:8px 0 8px 20px; line-height:1.35;}
#clinic-therapist .flex .txt ul li:before { position:absolute; top:10px; left:0; content:'●'; color:#F6DA6C; font-size:15px; vertical-align:top;}
#clinic-therapist .flex .txt p { margin-bottom: 0;  font-weight:bold; text-wrap:pretty; text-align:justify; text-align-last:left;}
#clinic-therapist .flex .photo { width:14%; max-width:160px;}

@media only screen and (max-width: 720px) {
    #clinic-therapist .flex { padding:25px;}
    #clinic-therapist .flex .txt { width:100%; padding:0;}
    #clinic-therapist .flex .txt h4 { font-size:20px; background-size:33px; padding:5px 0 10px 38px;} 
    #clinic-therapist .flex .txt ul li { font-size:18px;}
    #clinic-therapist .flex .photo { width:100%; max-width:160px; margin:0 auto 20px; text-align: center;}
}

#clinic-room:after { content:" "; display:block; clear:both;}
#clinic-room .flex { width:66%; text-align:left; } 
#clinic-room .flex img { width:48.11%; padding:0;}
#clinic-room .floatR { width:31.43%}

@media only screen and (max-width:480px) {
    #clinic-room .flex { width:100%; text-align:left;} 
    #clinic-room .flex img { width:100%; padding:0; margin-bottom:20px;}
    #clinic-room .floatR { width:100%;}
}

#access { text-align: center;}
#access h3 { position:relative; font-size:31px; color:#0C662A; text-align:center; display:inline-block; margin:0 auto 2em auto;}
#access h3:before { content:''; position: absolute; bottom: -15px; display: inline-block; width:52px; height:2px; left:50%; -webkit-transform:translateX(-50%); transform: translateX(-50%); background-color:#97CD8C;}

#access .box { width: 100%; max-width:1400px; padding:50px 50px 5px 50px; border-radius:20px; border:1px solid #FFFCF1; }
#access .camera-map { margin-bottom:80px;}
#access h4 { width: 100%; color: #FFF; font-size:23px; font-weight:bold; text-align: center; margin-bottom: 1em; padding:5px; background-color:#97CD8C;}
#access ul { width:100%; max-width:1200px; margin: 0 auto 50px auto; -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack:justify; justify-content:space-between;}
#access li { position:relative; width:29.2%; margin-right:6.2%; }
#access li:after { position:absolute; top:42%; right:-57px; font-family:"Font Awesome 6 Free"; content:"\f04e"; font-size:40px; font-weight:900; color:#F6DA6C;}
#access li:last-child {margin-right: 0;}
#access li:last-child:after { display: none;}

@media only screen and (max-width:960px) {
    #access li:after { position:absolute; top:42%; font-family:"Font Awesome 6 Free"; content:"\f04e"; font-size:30px;}
}

@media only screen and (max-width:520px) {
    #access .camera-map { margin-bottom:50px;}
    #access .box { padding:30px 15px 0 15px; }
    #access h4 { font-size:21px; padding:5px 1px;}
    #access ul { width:90%; max-width:350px; text-align:center;}
    #access li { position:relative; width:100%; margin:0 auto 40px auto; text-align:center;}
    #access li:after {text-align:center; top:100%; left:0; right:0; transform:rotate(90deg); content:"\f04e"; font-size:25px;}
    #access li:last-child { margin:0 auto;}
}

#map-area { }
#map-area .map{ position:relative; width:100%; max-width:1400px; height:400px; margin:0 auto;}
#map-area .map iframe { position:absolute; top:0; left:0; width:100%; height:100%;}

@media only screen and (max-width:640px) {
    #map-area .map{ width:100%; }
}