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



 
/*--------------------------------------------------------------------

headBox

--------------------------------------------------------------------*/

.headfirex{text-align: left}
.headfirex .text01{text-align: left ;margin:30px 0 10px; line-height: 1.6; font-size:clamp(1.375rem, 1.188rem + 0.94vw, 1.563rem)}/*22-25*/
.headfirex .text02{text-align: left ;}

.pageheadBox .pic{max-width: 560px}

.headfirex .headl{text-align: left; margin: 0 5%}
.headfirex .headl .morebtn{ text-align: center; margin: 20px auto 30px; line-height: 1.4; }
.headfirex .headl .morebtn a{padding: 20px 30px 20px 20px}
.headfirex .headl .morebtn span{font-size:14px }
.headfirex img{padding: 0 5% 60px;}
/*--------------------------------------------------------------------

.symptoms

--------------------------------------------------------------------*/
.symptoms{text-align: center}
.symptoms h2{line-height: 1.6; font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem) }/*22-30*/
.symptoms .plas{margin-bottom: 0 ; display: inline-block;}
.symptoms .listBox{margin: 0 5%; display: flex; justify-content: space-between; flex-flow: wrap}
.symptoms .listBox li{width: 48%}
.symptoms .listBox .topi{margin: -10px 0 15px}
.symptoms .listBox .topi li{width: 100%; text-align: left; font-size: clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem)}/*15-18*/
.symptoms .listBox li:last-child .topi{margin-top: -30px}
.symptoms .listBox li.mt20{margin-top: -20px}


.symptoms .text01{padding: 0 0 50px ; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/

.symptoms dl{margin: 0 5% ; position: relative; z-index: 2}
.symptoms dt img{max-width:161px; width: 50% }
.symptoms dd{border-top:2px solid #ffb423 ; border-bottom:2px solid #ffb423; margin-top: -25px; padding: 20px 0; text-align: left}

/*--------------------------------------------------------------------

.exa

--------------------------------------------------------------------*/
.exa{ background: #fff8ed; text-align: center;
  position: relative; margin-top: -20px
}

.exa:before {
  content: "";
  position: absolute;
  top: -1px;  /* 上に矢印が表示されるように */
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-width: 10vw 49vw 0 50vw;  /* 上に凹む矢印 */
  border-style: solid;
  border-color: #fff transparent transparent transparent;  
}
.exa:after {
  content: "";
  position: absolute;
  bottom: -10vw;  /* 下側に配置 */
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  /* 下向き（下側に尖った）矢印：上側に色、下側が 0 */
  border-width: 10vw 49vw 0 50vw;
  border-style: solid;
  border-color: #fff8ed transparent transparent transparent;
}

.exa h2{margin-top: 80px; display: inline-block}
.exa .listBox{width: 90%; margin: 0 5%}
.exa .listBox li.fle{margin-bottom: 15px; display: flex; justify-content: space-between; flex-flow: wrap; text-align: left; align-items:flex-start }
.exa .listBox li img{width: 15%; max-width:71px; margin-top: 10px }
.exa .listBox li .topi{width: 80%; }
.exa .listBox li .topi h3{font-weight: 700; font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem)}/*18-22*/
.exa .listBox li .com{font-size: 15px;}
.exa .listBox li .com li{list-style: disc; margin-left: 20px; line-height: 1.6; margin-bottom: 8px}


/*--------------------------------------------------------------------

#a2 診療案内

--------------------------------------------------------------------*/
#a2{padding-top: 80px}

.supCont .plas{margin: 20px 0 10px; display: inline-block}
.supCont{ text-align: center; padding:30px 5% ; position: relative; margin: 50px 5% 100px ; background:#fff8ed; border-radius: 20px }
.supCont:before{    position: absolute;
    border: 2px solid #fff; border-radius: 20px;
    content: "";
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;}
.supCont .hand{width:88px; position: absolute; top: -44px; left:50%; margin-left: -44px ;z-index: 1}

.supBox .menuInfo{display: flex; justify-content: space-between; flex-flow: wrap}
.supBox .menuInfo .morebtn{margin: 0 0 10px; width: 48% }
.supBox .menuInfo .morebtn:first-child{width: 100%}
.supBox .menuInfo .morebtn:last-child{width: 100%}

.supBox .menuInfo .morebtn a{ text-align: left; display: block; border:1px solid #ff9000; line-height: 1.2;
color:#ff9000; padding: 20px 0px 20px 35px; background:#fff url("../img/top/s01_i01.png") no-repeat 10px 50%;
background-size:18px 17px; font-size: clamp(1.063rem, 1rem + 0.31vw, 1.125rem)}/*17-18*/
.supBox .menuInfo .morebtn a:before{border-right: 2px solid #ff9000; border-top: 2px solid #ff9000;}

.supBox .menuInfo .morebtn:nth-child(2) a{ background:#fff url("../img/top/s01_i02.png") no-repeat 10px 50%;
background-size:18px 17px ; }
.supBox .menuInfo .morebtn:nth-child(3) a{ background:#fff url("../img/top/s01_i03.png") no-repeat 10px 50%;
background-size:18px 17px ; }
.supBox .menuInfo .morebtn:nth-child(4) a{ background:#fff url("../img/top/s01_i04.png") no-repeat 10px 50%;
background-size:18px 17px ;}
.supBox .menuInfo .morebtn:nth-child(5) a{ background:#fff url("../img/top/s01_i06.png") no-repeat 10px 50%;
background-size:18px 17px; }
.supBox .menuInfo .morebtn:nth-child(6) a{ background:#fff url("../img/top/s01_i05.png") no-repeat 10px 50%;
background-size:18px 17px ;}
.supBox .menuInfo .morebtn:nth-child(7) a{ background:#fff url("../img/top/s01_i07.png") no-repeat 10px 50%;
background-size:18px 17px ; }
.supBox .menuInfo .morebtn:nth-child(8) a{ background:#fff url("../img/top/usa.png") no-repeat 10px 50%;
background-size:30px 37px; padding: 20px 30px 20px 40px }


.supBox .menuInfo .morebtn img{width:20px; margin-right: 5px; vertical-align: middle}
.supBox .att{text-align: left; margin-bottom: 30px; line-height: 1.5;margin: 20px 0  ; font-size:clamp(0.813rem, 0.75rem + 0.31vw, 0.875rem) }/*13-14*/

.supBox .pic02 img{max-width:293px }




@media (min-width: 640px){
.pageheadBox{background: none}
.pageheadBox .pageMenuA{padding: 20px 40px; width: 1100px ; margin: 20px auto 40px;}
.pageheadBox .pic{position: absolute; left: 50%; top: 190px; width: 298px; margin-left: 240px }
.pageheadBox .headfirex{width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.headfirex .headl{margin: 0; width:640px }
.headfirex img{margin: 80px 0 0; width:374px; padding: 0 }
.headfirex .headl .morebtn{text-align: left}

.symptoms { text-align: center;}
.symptoms .listBox {margin: 30px auto 0; width: 1100px;}
.symptoms .listBox li{width: 19%}
.symptoms .listBox li:nth-child(6){margin-left: 10%}
.symptoms .listBox li:last-child{margin-right: 10%}
.symptoms .listBox li img{width: 195px}
.symptoms .listBox .topi {margin: 0px 0 15px;}
.symptoms .listBox li.mt20 { margin-top: 0;}
.symptoms .text01{padding: 50px 0 ;}
.symptoms .listBox li:last-child .topi { margin-top: 0;}


.symptoms .heck { margin: 0 auto; width: 780px; text-align: left; display: flex; justify-content: space-between; align-items: flex-start }
.symptoms .heck dt {width:161px; max-width: 100%}
.symptoms .heck dd {width:587px; margin-top: 40px}
.symptoms dt img{width: 161px}


.exa .listBox {width: 1100px;  margin: 0 auto; display: flex; justify-content: space-between; flex-flow: wrap}
.exa .listBox li.fle{width: 48%}

#a2 { padding-top: 200px;}
.supBox .menuInfo{margin: 0; width: 100%}
.supBox .bttCont {padding: 0; width: 450px; margin: 0 auto;}
.supBox .text01{padding: 0; margin-bottom: 30px}
.supBox .menuInfo .morebtn{width: 23%; margin-bottom: 20px}
.supBox .menuInfo .morebtn:first-child , .supBox .menuInfo .morebtn:last-child{width: 23%}
.supBox .menuInfo .morebtn:nth-child(8) a{padding: 30px 30px 30px 40px;}
.supBox .att{text-align: left; padding: 0 ; margin-bottom: 40px;}
.supBox .menuInfo .morebtn a{padding: 20px 0px 20px 50px; background: #fff url("../img/top/s01_i01.png") no-repeat 15px 50%; background-size:29px 28px}
.supBox .menuInfo .morebtn a:before{border-right: 2px solid #ff9000; border-top: 2px solid #ff9000;}

.supBox .menuInfo .morebtn:nth-child(2) a{ background:#fff url("../img/top/s01_i02.png") no-repeat 15px 50%;
background-size:29px 28px }
.supBox .menuInfo .morebtn:nth-child(3) a{ background:#fff url("../img/top/s01_i03.png") no-repeat 15px 50%;
background-size:29px 28px }
.supBox .menuInfo .morebtn:nth-child(4) a{ background:#fff url("../img/top/s01_i04.png") no-repeat 15px 50%;
background-size:29px 28px }
.supBox .menuInfo .morebtn:nth-child(5) a{ background:#fff url("../img/top/s01_i06.png") no-repeat 15px 50%;
background-size:29px 28px}
.supBox .menuInfo .morebtn:nth-child(6) a{ background:#fff url("../img/top/s01_i05.png") no-repeat 15px 50%;
background-size:29px 28px }
.supBox .menuInfo .morebtn:nth-child(7) a{ background:#fff url("../img/top/s01_i07.png") no-repeat 15px 50%;
background-size:29px 28px }
.supBox .menuInfo .morebtn:nth-child(8) a{ background:#fff url("../img/top/usa.png") no-repeat 15px 50%;
background-size:30px 37px; padding: 30px 30px 30px 50px }
.supBox .pic02 { width: 293px; position: absolute; right: -10px; top: -130px; z-index: 1  }


.supCont{ margin: 50px auto 150px; width: 1100px}




}