@charset "utf-8";

/* ===================================================================
SmartPhone CSS
ウィンドウ幅[0～640px]の場合に適用
=================================================================== */
@media screen and (max-width:640px) {

/* ===================================================================
各ページ共通
=================================================================== */

/*	body
--------------------------------------------------------------------*/
body {
font-size: 1.2rem;
overflow: hidden;
}

/*	h
--------------------------------------------------------------------*/

/*	header
--------------------------------------------------------------------*/
#header h1{
height: 42px;
}

/*	ttl
----------------------------------------------------*/
.ttl_bg {
margin: 135px 0 20px;
background-position: 50%;
}

.ttl{
padding: 30px 10px;
}

.ttl h2{
font-size: 2.4rem;   
}

/*	nav
--------------------------------------------------------------------*/
#nav .contact p:first-child{
margin-bottom: 8px;
}

#nav .contact p br{
display: block;
}

#nav .contact p:last-of-type{
flex-direction: column;
line-height: 1.3;
}

#nav .contact p:first-child{
margin-bottom: 5px;
}

#nav .contact p span{
margin: 0;
padding-left: 35px;
font-size: 2.8rem;
background-size: 30px;
}

/*	sp_btn
--------------------------------------------------------------------*/
.sp_btn{
    top: 55px;
}

/*	main
--------------------------------------------------------------------*/

/*	contents
--------------------------------------------------------------------*/
#contents{
padding: 10px;
}

#contents h2{
margin: 0 -10px 15px;
padding: .25em .45em .25em 1em;
font-size: 1.8rem;
line-height: 1.4;   
}

#contents h2::before{
width: 5px;
height: 18px;
top: 8px;
left: 8px;
}

#contents h3{
margin: 0 -10px 10px;
font-size: 1.8rem;
}

#contents h3 span{
display: inline-block;
padding: 0 10px;
}

#contents h4{
margin: 0 -10px 15px;
}

#contents p,
#contents figcaption{
margin-bottom: .8em;
line-height: 1.8;
}

#contents .contact{
padding: 15px;
}

#contents .contact h5{
margin-bottom: 10px;    
}

#contents .contact .contact_area{
flex-direction: column;
}

#contents .contact .contact_area > li:first-child{
margin-bottom: 10px;
}

#contents .contact .contact_area > li:last-child{
width: 100%;    
}

#contents .contact .btn_area{
justify-content: space-between;    
}

#contents .contact .btn_area li{
width: 49%;
}

#contents .contact .btn_area .con_btn{
margin: 0;
}

#contents .contact .btn_area li a{
padding: 12px 0 10px;    
}

#contents .jump_link{
justify-content: flex-start;
margin-bottom: 10px;
}

#contents .jump_link li{
margin-bottom: 10px;
font-size: 1.4rem;    
}

.pg_link{
margin-top: -135px;
padding-top: 135px;    
}

/*	sidebar
--------------------------------------------------------------------*/
#sidebar .ba{
flex-direction: column;
align-items: center;
}

#sidebar .ba li{
width: 272px;
margin-bottom: 10px;   
}

#sidebar .ba li:last-child{
margin-bottom: 0;
}

#sidebar section div{
flex-direction: column;
}

#sidebar section ul{
display: flex;
flex-wrap: wrap;
width: 100%;
border-bottom: 1px dashed gray;    
}

#sidebar section ul:last-child {
border-bottom: none;
}

#sidebar section li:first-child{
width: 100%;
margin-bottom: 3px;
}

#sidebar section li:nth-child(n+2){
margin: 0 20px 0 0;
}

#sidebar section li:first-child h5{
text-align: center;   
}

#sidebar section li i{
margin-right: 3px;    
}

/*	footer
--------------------------------------------------------------------*/
.pagetop{
right: 15px;
bottom: 15px;
}

.pagetop a{
padding: 0.4em 0;
width: 40px;
}

.pagetop .fa{
margin: 0;
}

.pagetop span{
display: none;
}

#footer{
padding: 30px 10px 50px;
}

#footer .f_menu{
display: block;
columns: 2;  
width: 280px;
margin: auto;
padding-bottom: 30px;
}

#footer .f_menu li{
margin-bottom: 25px;
padding: 0;
border: none;
}

#footer .f_menu li:before{
content: '\f0da';
margin-right: 4px;
font-family: FontAwesome;
font-size: 1.2em;
font-weight: bold;
color: #fff;
}

#footer .f_bnr{
flex-direction: column;
align-items: center;
}

#footer .f_bnr li{
width: 100%;  
margin-bottom: 20px;
text-align: center;
}

#footer .f_bnr li:last-child{
margin-bottom: 0;
}

/* ===================================================================
index
=================================================================== */
.ind_main_bg{
    margin-top: 135px;
}

.ind_main{
    height: 400px;
    overflow: hidden;    
}

.ind_main .text{
    margin-right: 10px;
    padding-top: 20px;
    /* top: 20px;
    left: 50%;
    margin-left: -157px; */
}

.ind_main .text h3{
    padding-bottom: 18px;
    font-size: 2.2rem;
    line-height: 1.4;
}

.ind_main .text h3 span{
    display: block;
    font-size: 3.0rem;
}

.ind_main .text h2{
    padding-bottom: 18px;
    font-size: 2.2rem;
    line-height: 1.4;
}

.ind_main .text h2 span{
    display: block;
    font-size: 3.0rem;
}

.ind_main .text h2 span br{
    display: block;
}

.ind_main .text p.price_rink{
    margin-bottom: 25px;
}

.ind_main .text .link_case{
    margin-bottom: 25px;
}

.ind_main .text ul{
    margin-bottom: 20px;
}

.ind_main .text li{
    width: 90px;
    margin: 0;
    padding: 3px 0;
    text-align: center;
    font-size: 1.6rem;
}

.ind_main .text li:nth-child(2){
    margin: 0 12px;
}

.ind_main .notice{
    font-size: 1.2rem;
}

.ind_main .dr{
    bottom: -30px;
    right: -80px;
}

.iroha_abc{
    margin: 20px 0 0;
}

.iroha_abc .bnr_area{
    flex-direction: column;
    margin-top: 15px;
}

.iroha_abc .bnr_area li:first-child{
    margin-bottom: 15px;
}

.iroha_abc .bnr_area li img{
    width: 100%;
    height: auto;
    max-height: none;
}
    
.index .minor{
margin: 20px auto 0;
}
    
.index .minor a{
font-size: 4.2vw;
line-height: 1.5;
background-size: 15%;
} 
    
.index .minor a br{
display: block;
}

.ind_btn{
    margin: 20px 0;
    flex-direction: column;
    align-items: center;
}

.ind_btn li{
    margin-bottom: 15px;
    width: 100%;
    max-width: 320px;
    height: auto;
}

.ind_btn li img{
    width: 100%;
    height: auto;
}

.ind_menu{
    margin: 0 auto 30px;
}

.ind_menu h3{
    margin: 25px 0 20px;
    font-size: 2.0rem;
    line-height: 1.3;
}

.ind_menu h3 br{
    display: block;
}

.ind_menu h3:before,
.ind_menu h3:after{
    width: 15%;
}

.pickup h3{
    margin-bottom: 20px;
}

.pickup ul{
    flex-direction: column;
}

.pickup ul li{
    width: 100%;
    margin-bottom: 10px;;
}

.pickup ul li:last-of-type{
    margin-bottom: 0;
}

.ind_sec02{
    padding: 20px 0; 
}

.ind_sec02 li.access div{
    flex-direction: column;
}

.ind_sec02 li.access iframe{
    width: 100%;
    flex: auto;
}

.ind_sec02 li.access dl{
    padding: 15px 0 0;
    flex: auto;
}

.ind_sec02 li h3{
    margin-bottom: 10px;
}

.ind_sec02 li.access dt{
    margin-bottom: 10px;
}

.ind_sec02 li.access .notice{
    margin-bottom: 15px;
}

.ind_sec02 li.access dd p.tel{
    margin-bottom: 15px;
}

.ind_covidLink p {
    font-size: 1.4rem;
}

.ind_covid{
padding: 10px;   
}
    
.ind_covid dt{
margin-bottom: 0.25em;
font-size: 1.6rem;
}

/*	whats
----------------------------------------------------*/
.whats .flex{
flex-direction: column;
align-items: center;
}

.whats .flex figure{
flex: auto;
margin: 0 0 1em;
} 

.whats .nintei figure{
margin: 0 0 1em;
}

.whats .one_price{
font-size: 1.8rem;
}

.whats .one_price dd span{
font-size: 1.2rem;
}

.whats .dr_info th,
.whats .dr_info td{
    display: block;
}

.whats .dr_info th{
    padding: 0.5em;
}

.whats .dr_info td{
    text-align: center;
}

/*about
----------------------------------------------------*/
.about section dl{
flex-direction: column;
align-items: center;
}

.about section dt{
flex: auto;
padding: 0 0 15px;
}

/*	treatment
----------------------------------------------------*/
.treatment #contents h3{
margin: 0 -10px 10px;
font-size: 1.8rem;
}

.treatment #contents h3 span {
display: inline-block;
padding: 0 10px;
}

.treatment section dl{
flex-direction: column;
align-items: center;
}

.treatment section dt{
margin: 0 0 15px;
}

.treatment section .houkei_flex dt,
.treatment section .aga_medicine_flex dt,
.treatment section .aga_medicineitem_flex dt{
flex: auto;
}

.treatment section .aga_recommen dt{
display: block;
text-align: center;
font-size: 1.8rem;    
}

.treatment section .aga_recommen dd{
flex-direction: column;
}

.treatment section .aga_recommen dd .tbl{
flex-direction: column;
width: 100%;    
margin-bottom: 15px;
}

.treatment section .aga_recommen dd .tbl table{
width: 100%;   
}

.treatment section .aga_recommen dd .tbl table:last-child{
border-top: none;   
}

.treatment section .aga_recommen dd .tbl table:last-child thead{
display: none;    
}

.treatment section .aga_recommen dd .tbl_ex{
width: 100%;   
}

/*	flow
----------------------------------------------------*/
.flow section p a{
display: inline;
}

.flow section dl{
flex-direction: column;   
align-items: center;
}

.flow section dl dt{
flex: auto;
margin: 0 0 10px;    
}

.flow section ul.price_check{
margin-bottom: 5px;
}

.flow section ul.price_check li{
margin-bottom: 10px;
font-size: 1.4rem;    
}

/*	price
----------------------------------------------------*/
.price section .p_hokei th, 
.price section .p_hokei td{
display: block;
padding: 5px;    
text-align: center;
}

.price section .p_hokei td.price{
text-align: center;    
}

.price section p.caution{
margin: 0 0 30px !important;    
}

.price #contents .price_ex table{
font-size: 1.4rem;    
}

.price #contents .price_ex td{
display: block;
width: 100%;    
}

.price #contents .price_ex .ex_price{
border-top: none;    
}

.price #contents .price_ex .ex_treatment{
width: 100%;    
}

.price #contents .price_ex .total:first-of-type{
display: none;
}

.price section table{
font-size: 1.4rem;    
}

.price section .p_zodai tr:not(:last-of-type),
.price section .p_soro tr:not(:last-of-type){
display: block;
margin-bottom: 15px;
}

.price section .p_zodai th, 
.price section .p_zodai td, 
.price section .p_soro th, 
.price section .p_soro td{
display: block;
width: 100%;  
padding: 5px 0;  
}

.price section .p_zodai .left_b,
.price section .p_soro .left_b{
padding: 10px 0;
border-top: 1px dotted gray;
border-left: none;    
}

.price section .p_zodai .left_b br,
.price section .p_soro .left_b br{
display: none;
}

.price section .p_other tr{
display: block;
margin-bottom: 15px;
}

.price section .p_other th,
.price section .p_other td{
display: block;
padding: 5px 0;
}

.price section .p_aga th, 
.price section .p_aga td{
display: block;
padding: 5px 0;   
}

.price section .p_aga td:first-of-type{
display: none;
}

.price section ul.price_check{
flex-direction: column;    
}

.price section ul.price_check li{
font-size: 1.4rem;    
}

.price section ul.price_check li:not(:last-child){
margin: 0 0 8px;    
}

.price #contents section .loan p.price_check{
text-align: left;
font-size: 1.4rem !important;    
}

/*minor
----------------------------------------------------*/
.minor .ttl h2 br{
display: block;
}

.minor .minor_area{
padding: 10px;
}

.minor #contents .minor_area h4{
margin: 0 0 10px;
font-size: 1.6rem;    
}

.minor .minor_area .adobe{
margin: 0;
}

/*karte
----------------------------------------------------*/
.karte .pdf_area{
flex-direction: column;
padding: 10px;    
}

.karte .pdf_area li:first-child{
margin: 0 0 8px;   
}

.karte .pdf_area li a{
font-size: 1.4rem;   
}

/*clinic
----------------------------------------------------*/
.clinic #contents .clinic_info{
    flex-direction: column;
    align-items: center;
}

.clinic #contents .clinic_info figure{
    margin: 0;
}

.clinic #contents .clinic_info figcaption{
    text-align: center;
}

.clinic #contents iframe{
    height: 250px;
}

.clinic #contents h4{
    font-size: 1.8rem;
    line-height: 1.4;
}

.clinic #contents h4 br{
    display: block;
}

.clinic #contents .root{
    flex-direction: column;
}

.clinic #contents .root li{
    width: 100%;
}

.clinic #contents .root li figcaption{
    line-height: 1.6;
}

/* covid
----------------------------------------------------*/
.covid_list {
    flex-direction: column;
}

.covid_item {
    width: 100%;
}

/* ===================================================================
sguideページ
=================================================================== */
.sguide #header {
    position: static;
}

.sguide .logo {
    width: 90px;
}

.sguide .sp_btn {
    top: 10px;
}

.sguide .navi_btn {
    border: 1px solid #eaeaea;
}

.sguide .sp_btn p {
    text-shadow: 1px 1px 2px #eaeaea, -1px -1px 2px #eaeaea,
                 -1px 1px 2px #eaeaea, 1px -1px 2px #eaeaea,
                 0px 1px 2px #eaeaea,  0 -1px 2px #eaeaea,
                 -1px 0 2px #eaeaea, 1px 0 2px #eaeaea;
}

.sguide #nav {
    height: unset;
}

.sguide #nav .link_list {
    z-index: 10;
}

.sguide #nav .page_menu {
    padding-top: 80px;
}

.sguide .breadcrumb {
    margin-top: unset;
}

.sguide #header h1 {
    height: unset;
    padding: 3px 5px;
}

.sguide #header h1 span {
    width: calc(100% - 80px);
    margin: unset;
    line-height: 1.3;
}

.sguide #header h1 span br {
    display: block;
}

.sguide #contents .sguide_ttl-sec {
    font-size: 1.6rem;
}

.sguide #contents .sguide_ttl::after {
    border-width: 20px 45px 0 45px;
    bottom: -20px;
}

.sguide #contents .sguide_ttl-sec span.inner::before {
    left: -35px;
}

.sguide #contents .sguide_ttl-sec span.inner::after {
    right: -35px;
}

.sguide #contents .sguide_ttl-sec::before {
    border-width: 20px 45px 0 45px;
    bottom: -20px;
}

.sguide #contents .sguide_ttl-sec .lg {
    font-size: 2rem;
}

.sguide #contents .sguide_text {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1.4rem;
}

.sguide #contents .sguide_qa {
    padding-top: 10px;
}

.sguide #contents .sguide_qa .sguide_text:last-of-type {
    text-align: left;
}

.sguide #contents .sguide_qa .sguide_text:last-of-type br {
    display: none;
}

.sguide #contents .contact h5 {
    flex-direction: column;
}

.sguide #contents .sp_br {
    /* display: block; */
}

.sguide #contents .pc_br {
    display: none;
}

/* sguide_course
----------------------------------------------------*/
.sguide #contents .sguide_ttl-sec.sguide_course-ttl {
    padding-top: .4em;
    padding-bottom: .48em;
}

.sguide #contents .sguide_courseList .card:not(:first-of-type) {
    margin-top: 5px;
}

.sguide #contents .sguide_courseList .card_main p {
    font-size: 1.4rem;
}

.sguide #contents .sguide_courseList .card_ttl {
    border: 1px solid #34a563;
}
.sguide #contents .sguide_courseList .card_ttl .sub {
    width: 70px;
}

.sguide #contents .sguide_courseList .card_ttl .sub,
.sguide #contents .sguide_courseList .card_ttl .main {
    height: 60px;
}

.sguide #contents .sguide_courseList .card_ttl .main {
    padding-left: 10px;
}

.sguide #contents .sguide_courseList .card_ttl::before {
    width: 16px;
    height: 18px;
    left: 2px;
}

.sguide #contents .sguide_courseList .card_ttl::after {
    width: 26px;
    height: 26px;
    right: 10px;
}

.sguide #contents .sguide_courseList .card_main {
    padding: 15px;
    border-right: 1px solid #34a563;
    border-bottom: 1px solid #34a563;
    border-left: 1px solid #34a563;
}

.sguide #contents .hokei_type-top {
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.sguide #contents .hokei_type-top + p {
    margin-top: 10px;
}

.sguide #contents .hokei_type-img {
    width: 100px;
    margin-right: unset;
    margin-bottom: 10px;
}

.sguide #contents .hokei_type-top p.text_sp {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
}

.sguide #contents .hokei_type-text .text_pc {
    display: none;
}

.sguide #contents .hokei_type-inner {
    padding: 10px;
}

.sguide #contents .sguide_courseList .card_ttl .sp_br {
    display: block;
}

.sguide #contents .sguide_courseList .four .select-ttl{
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
}

.sguide #contents .sguide_courseList .four .select-ttl .ttl-l {
    width: auto;
    height: auto;
    margin-bottom: 5px;
}

.sguide #contents .sguide_courseList .one_last {
    margin-top: 10px;
}

.sguide #contents .width_md {
    width: 100%;
}

.sguide #contents .sguide_courseList .q_item {
    padding-left: 37px;
}

.sguide #contents .sguide_courseList .q_item::before {
    width: 30px;
    height: 30px;
    background: url(../images/sguide/illst-man01-sp.svg) no-repeat center center / 100%;
    top: 0;
    transform: unset;
}

.sguide #contents .sguide_courseList .q_item.q_item02::before {
    background-image: url(../images/sguide/illst-man02-sp.svg);
}

.sguide #contents .sguide_courseList .q_item.q_item03::before {
    background-image: url(../images/sguide/illst-man03-sp.svg);
}

.sguide #contents .sguide_courseList .q_item.q_item04::before {
    background-image: url(../images/sguide/illst-man04-sp.svg);
}

.sguide #contents .sguide_courseList .q_item.q_item05::before {
    background-image: url(../images/sguide/illst-man05-sp.svg);
}

.sguide #contents .sguide_courseList .q_item.q_item06::before {
    background-image: url(../images/sguide/illst-man06-sp.svg);
}

.sguide #contents .sguide_courseList .q_item.q_item07::before {
    background-image: url(../images/sguide/illst-man07-sp.svg);
}

.sguide #contents .sguide_courseList .a_doctor {
    margin-top: 20px;
    margin-bottom: 20px;
}

.sguide #contents .sguide_courseList .a_doctor-img {
    width: 65px;
    height: 78px;
    margin-left: 14px;
}

.sguide #contents .sguide_courseList .a_doctor-text {
    padding: 10px;
}

.sguide #contents .sguide_courseList .a_doctor-text::after {
    width: 14px;
    height: 12px;
    right: -14px;
}

.sguide #contents .sguide_courseList .a_doctor-rev .a_doctor-img {
    margin-right: 14px;
}

.sguide #contents .sguide_courseList .a_doctor-rev .a_doctor-text::after {
    left: -14px;
}

.sguide #contents .sguide_courseList .q_item {
    margin-top: 10px;
}

.sguide #contents .sguide_courseList .three .card_main .q {
    margin-bottom: 15px;
    padding-left: 35px;
    line-height: 1.3;
}

.sguide #contents .sguide_courseList .three .card_main .q::before {
    width: 30px;
    height: 30px;
}

.sguide #contents .sguide_courseList .three .card_main .a_list {
    flex-direction: column;
    margin-bottom: 10px;
    padding-right: unset;
}

.sguide #contents .sguide_courseList .three .card_main .a_item {
    width: 100%;
}

.sguide #contents .sguide_courseList .three .card_main .a_item:nth-of-type(2) {
    margin-top: 10px;
}

.sguide #contents .sguide_courseList .three .card_main .a_item dt {
    height: 30px;
}

.sguide #contents .sguide_courseList .three .card_main .a_item dt::after {
    content: none;
}

.sguide #contents .sguide_courseList .three .card_main .a_item dd {
    height: auto;
    padding: 15px 7px;
    position: relative;
    background: url(../images/sguide/illst-parents-f-sp_v2.png) no-repeat bottom right 5px / 80px 94px;
    z-index: 1;
}

.sguide #contents .sguide_courseList .three .card_main .a_item:nth-of-type(2) dd {
    background-image: url(../images/sguide/illst-parents-m-sp_v2.png);
}

.sguide #contents .sguide_courseList .three .card_main .a_list::after {
    right: unset;
    left: 50%;
    transform: translateX(-50%);
}

.sguide #contents .sguide_courseList .three .card_main .chart_img {
    margin-top: 15px;
    margin-bottom: 20px;
}

.sguide #contents .sguide_courseList .four .select_text {
    padding: 10px;
}

.sguide #contents .sguide_courseList .five .difference_img {
    width: 104px;
    height: 70px;
    margin-left: 5px;
}

.sguide #contents .sguide_courseList .five .difference_list01-item + .difference_list01-item, .sguide #contents .sguide_courseList .five .difference_list02-item + .difference_list02-item {
    margin-top: 5px;
}

.sguide #contents .sguide_courseList .five .difference_list-l {
    height: 30px;
    padding-left: 10px;
}

.sguide #contents .sguide_courseList .five .difference_list-r {
    padding: 10px;
}

.sguide #contents .sguide_courseList .five .text_under {
    /* padding-bottom: 60px;
    background-size: 60px 52px; */
}

.sguide #contents .sguide_courseList .extra_ttl {
    height: 32px;
}

.sguide #contents .sguide_courseList .extra_ttl::before {
    width: 22px;
    height: 22px;
}

.sguide #contents .sguide_courseList .extra_box {
    flex-direction: column;
}

.sguide #contents .sguide_courseList .extra_img {
    max-width: 100%;
    margin: 0 auto;
}

.sguide #contents .sguide_courseList .extra_text {
    margin-top: 15px;
    margin-bottom: 15px;
}
}