@charset "utf-8";
/*---メイン画像 sp ----*/
.main_photo{
    position: relative;
    height: 645px;
    transition: .3s;    
    
    .main_layer_01{/*---丸い画像 ----*/
        position: absolute;
        width: 110px;
        top: 290px;
        left: 10px;
        transition: .3s;
    }
    .main_layer_02{/*---テキスト ----*/
        position: absolute;
        width: 16.5em;
        top: 328px;
        left: calc(110px + 10px + 10px);
        font-weight: var(--Bold);
        font-size: 1.4rem;
        transition: .3s;
    }
    .main_layer_03{/*---診療時間 ----*/
        position: absolute;
        width: min(90%,340px);
        bottom: 25px;
        right: 5%;
        transition: .3s;
    }
}
.main_img{
    height: 320px;
    padding-top: 70px;
    transition: .3s;

    img{
        width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 90% 50%;        
    }
    
}
/*---お知らせ sp---*/
.news{
    padding: var(--px50) 0;
    background-color: var(--gray);
    
    .inner{
      width: min(90%,1740px);
      margin: 0 auto;
      
      .news_box{
        width: min(90%,300px);

        .info_btn{
            background-color: #246DE5;
            color: #ffffff;
            font-weight: 600;
            border-radius: 50px;
            position: relative;
            width: 160px;
            margin-top: var(--px30);
            text-align: center;

            a{
                color: #ffffff;
                padding: 6px 20px 6px 0;
                display: block;
                
            }
            &::after{
                display: inline-block;
                content: "";
                position: absolute;
                background-image: url("../images/common/png_03.png");
                width: 12px;
                height: 12px;
                background-size: 12px;
                top: 12px;
                right: 20px;
                transition: all .3S;
                background-repeat: no-repeat;
            }
        }
        
      }
      
      .info_box{
        margin: 40px 0 0;
        border-top: 2px solid var(--main-color);
        
        a{
          position: relative;
          display: block;
          width: 100%;          
          }
        
        li{
          border-bottom: 1px solid var(--main-color);
          padding: 10px 0;
        }
        
        .date{
          color: var(--font-color);
          margin: 2px 0;

          span{
            color: #fff;
            background-color: #2BAEA3;
            padding: 2px 20px;
            line-height: 1;
            margin-left: 10px;
            font-size: var(--font-size14);
            font-weight: var(--Medium);
            border-radius: 50px;
          }
        }
        .text{
          padding: 0 16px 0 0px;
          color: var(--font-color);
          margin: 2px 0;
          /*テキスト・・・*/
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; 
          line-clamp: 1;
          font-weight: var(--Bold);  
          font-size: var(--font-size20);       
        }
      }
    }
  }
/*---当クリニックについて sp---*/
.about{

    .inner{
        padding: 0 0 var(--px140); 

        .image{
            aspect-ratio: 89 / 50;
            overflow: hidden;
            padding-bottom: 60px;
            
            img{
                height: 100%;
                object-fit: cover;
                object-position: 50% 70%;
            }
        }
        
        .titles{
            width: 90%;
            margin: 0 auto;
        
            h3{
                font-size: var(--font-size20);
                font-weight: var(--Bold);
                padding-top: var(--px30);
                padding-left: 20px;
            }
            p{
                padding-top: var(--px20);
                width: min(100%,630px);
                line-height: 1.7;
                padding-left: 20px;
            }
            .about_btn{
                padding-top: var(--px20);
                padding-left: 20px;

                li{
                    background-color: #246DE5;
                    color: #ffffff;
                    font-weight: 600;
                    border-radius: 50px;
                    position: relative;
                    width: 240px;
                    padding-left: 20px;
                    margin-top: var(--px20);
        
                    a{
                        color: #ffffff;
                        padding: 6px 20px 6px 0;
                        display: flex;
                        align-items: center;
                    }
                    &::after{
                        display: inline-block;
                        content: "";
                        position: absolute;
                        background-image: url("../images/common/png_03.png");
                        width: 12px;
                        height: 12px;
                        background-size: 12px;
                        top: 12px;
                        right: 20px;
                        transition: all .3S;
                        background-repeat: no-repeat;
                    }
                    img{
                       width: 24px; 
                       margin-right: 5px;
                    }
                }
            }

            .titles_img{
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(1, auto);
                grid-gap: var(--px10);
                padding-top: var(--px30);
                padding-left: 20px;
            }
        }
    }  
} 
/*---診療案内 sp---*/
.service{
    background-color: var(--gray);
    padding: var(--px80) 0 var(--px140);

    .service_title{
        font-weight: var(--Bold);
        font-size: var(--font-size36);
        line-height: .9;
        position: relative;
        text-align: center;
        width: 4em;
        margin: 0 auto;
        
        &::before{
          content: '';
          position: absolute;
          display: inline-block;
          height: 3em;
          top: -4em;
          left: 2em;
          border-left: solid clamp(3px,.5vw,5px) var(--main-color);
        }
              
        span{
          font-weight: var(--Regular);
          color: var(--main-color);
          font-size: var(--font-size16);
        }
    }
    .inner{
        width: min(90%,480px);
        margin: 0 auto;

        .inspection_wrap{
            border-radius: var(--px20);
            padding: var(--px35) 0;
            margin-top: var(--px40);
            background: linear-gradient(0deg, #fff 0%, #f8f8f8 50%, #fff 50%, #fff 100%);
        }
        .inspection_inner{
            width: 90%;
            margin: 0 auto;
        }
        .inspection_img{
            width: 110px;
            margin: 0 auto;
        }
        .inspection_tx{
            padding: 0 0 var(--px40);
        
            h3{
                padding: 20px 0 8px;
                font-size: var(--font-size20);
                font-weight: var(--Bold);
                text-align: center;
                position: relative;

                &::before{
                    position: absolute;
                    content: '';
                    display: inline-block;
                    width: 3em;
                    bottom: -.5em;
                    right:  calc((100% - 3em) / 2);
                    border-bottom: solid 2px #246DE5;  
                }
                &.color_green{
                    &::before{
                        border-bottom: solid 2px #2BAEA3;  
                    }
                }
                &.color_orange{
                    &::before{
                        border-bottom: solid 2px #E59E24;  
                    }
                }
            }
            p{
                padding-top: var(--px60);
            }
        }
        .inspection_btn{
            color: #ffffff;
            border-radius: 50px;
            position: relative;
            width: 235px;
            margin: 0 auto;

            a{
                color: #ffffff;
                padding: 6px 0 6px 20px;
                display: block;
                
            }
            &::after{
                display: inline-block;
                content: "";
                position: absolute;
                background-image: url("../images/common/png_03.png");
                width: 12px;
                height: 12px;
                background-size: 12px;
                top: 12px;
                right: 20px;
                transition: all .3S;
                background-repeat: no-repeat;
            }
        }

    }
        
}
/*---訪問リハビリ sp---*/
.rehab{
    padding: var(--px100) 0; 

    .inner{
        padding: 0 0 var(--px100); 
        width: min(90%,1800px);
        margin: 0 auto;

        .titles{
        
            h3{
                font-size: var(--font-size20);
                font-weight: var(--Bold);
                padding-top: var(--px30);
                padding-left: 20px;
            }
            p{
                padding-top: var(--px20);
                width: min(100%,630px);
                line-height: 1.7;
                padding-left: 20px;
            }
            .about_btn{
                padding-top: var(--px20);
                padding-left: 20px;

                li{
                    background-color: #246DE5;
                    color: #ffffff;
                    font-weight: 600;
                    border-radius: 50px;
                    position: relative;
                    width: 240px;
                    padding-left: 20px;
                    margin-top: var(--px20);
        
                    a{
                        color: #ffffff;
                        padding: 6px 20px 6px 0;
                        display: flex;
                        align-items: center;
                    }
                    &::after{
                        display: inline-block;
                        content: "";
                        position: absolute;
                        background-image: url("../images/common/png_03.png");
                        width: 12px;
                        height: 12px;
                        background-size: 12px;
                        top: 12px;
                        right: 20px;
                        transition: all .3S;
                        background-repeat: no-repeat;
                    }
                    img{
                       width: 24px; 
                       margin-right: 5px;
                    }
                }
            }
        }

        .image{
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(1, auto);
            grid-gap: var(--px20);
            padding-top: var(--px40);
            padding-left: 20px;
        }
    }  
} 
/*---フッタアクセス sp ----*/
.foot_access{
	width: min(90%,1280px);
	margin: clamp(30px,6vw,100px) auto 0;
	background-color: var(--gray);
	border-radius: var(--px20);
	padding: var(--px40) clamp(10px,3.2vw,60px) var(--px50);
  
  .access_tx{

    ul{
        padding-top: var(--px60);

        li{
            &:first-child{
                font-size: var(--font-size20);
                font-weight: var(--Bold);
            }
        }
    }
    
  }
  .access_map{
    padding-top: var(--px30);
    aspect-ratio: 64 / 35;
  }
}
.foot_title{
    font-weight: var(--Bold);
    font-size: var(--font-size36);
    line-height: .9;
    position: relative;
    padding-left: 1em;
    
    &::before{
      content: '';
      position: absolute;
      display: inline-block;
      height: 3.5em;
      bottom: -.1em;
      left: 0;
      border-left: solid clamp(3px,.5vw,5px) var(--main-color);
    }
          
    span{
      font-weight: var(--Regular);
      color: var(--main-color);
      font-size: var(--font-size16);
    }
  }
/*---フッタ診療時間 sp ----*/
.foot_info_top{
	width: min(90%,1280px);
	margin: clamp(30px,6vw,100px) auto 0;
	background-color: var(--gray);
	border-radius: var(--px20);
	padding: var(--px40) clamp(10px,3.2vw,60px) var(--px50);
    
    .foot_info_tx{

        table{
            padding-top: var(--px40);
        }
    
        table tr td{
            vertical-align: top;
            padding: 6px 0px;
            line-height: 1.5;
        }
        .foot_info_ti{
            background-color: #333;
            color: #ffffff;
            text-align: center;
            width: 4.5em;
            font-weight: 600;
            border-radius: 50px;
            margin-right: 10px;
        }
        .foot_info_btn{
            background-color: #246DE5;
            color: #ffffff;
            font-weight: 600;
            border-radius: 50px;
            position: relative;
            width: 210px;

            a{
                color: #ffffff;
                padding: 6px 0 6px 50px;
                display: block;
                
            }
            &::before{
                display: inline-block;
                content: "";
                position: absolute;
                background-image: url("../images/common/png_04.png");
                width: 27px;
                height: 20px;
                background-size: 20px;
                top: .7em;
                left: 20px;
                transition: all .3S;
                background-repeat: no-repeat;
            }
            &::after{
                display: inline-block;
                content: "";
                position: absolute;
                background-image: url("../images/common/png_03.png");
                width: 12px;
                height: 12px;
                background-size: 12px;
                top: 12px;
                right: 20px;
                transition: all .3S;
                background-repeat: no-repeat;
            }
        }
        .info_tel{
            position: relative;
            padding: 3px 0 3px 30px; 
            font-weight: 400;
            letter-spacing: .08em;
            font-size: 3rem;
            
            &::before{
                display: inline-block;
                content: "";
                position: absolute;
                background-image: url("../images/common/png_01.png");
                width: 22px;
                height: 22px;
                background-size: 22px;
                top: 11px;
                left: 0px;
                transition: all .3S;
                background-repeat: no-repeat;
            }
        }
        
    }
    .foot_info_img{
            padding-top: var(--px30);
            width: min(100%,600px);
            margin: 0 auto;
        }
}
@media (min-width:768px){
    /*---メイン画像 tab ----*/
    .main_photo{
        height: 620px;
        
        .main_layer_01{/*---丸い画像 ----*/
            width: 160px;
            top: 430px;
            left: 15px;
        }
        .main_layer_02{/*---テキスト ----*/
            top: 500px;
            left: calc(160px + 15px + 10px);
            font-size: 1.6rem;
        }
        .main_layer_03{/*---診療時間 ----*/
            width: 370px;
            bottom: 90px;
            right: 15px;
            text-align: right;
        }
    }
    .main_img{
        height: 480px;
        padding-top: 90px;
    }
/*---お知らせ tab---*/
.news{
    
    .inner{
      display: flex;
      justify-content: space-between;
      
      .news_box{
        width: min(30%,320px);   
      }
      
      .info_box{
        margin: 0;
        width: 68%;
      }
    }
  }
/*---当クリニックについて tab---*/
.about{

    .inner{ 
        
        .titles{

            .about_btn{
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                width: min(95%,630px);

                li{
                    width: 49%;

                    img{
                       width: 26px; 
                       margin-right: 8px;
                    }
                }
            }
            .titles_img{
                width: min(95%,630px);
            }

        }
    }  
} 
/*---診療案内 tab---*/
.service{

    .inner{
        width: min(90%,1480px);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .inspection_wrap{
            width: 48%;
            background: linear-gradient(0deg, #fff 0%, #f8f8f8 54%, #fff 54%, #fff 100%); 
                     
        }
        .inspection_inner{
            width: 90%;
            margin: 0 auto;
        }  
        .inspection_tx{

            p{
                min-height: 13.5em;
            }
        }             
    }
        
}





    /*---フッタアクセス tab ----*/
    .foot_access{
        display: flex;
        justify-content: space-between;

        .access_tx{
            width: 40%;
            padding-left: 15px;

            ul{
                padding-left: 25px;  
            }
        }
        .access_map{
            width: 55%;
          }
    }
    /*---フッタ診療時間 tab ----*/
    .foot_info_top{

        .foot_info_tx{
            padding-left: 15px;

            table{
                padding-left: 25px;
            }

            .foot_info_btn{
                width: 200px;
            }
            
        }
        .foot_info_img{
            width: min(90%,600px);
        }
    }
}

@media (min-width:1024px){
    /*---メイン画像 pc ----*/
    .main_photo{
        height: 860px;
        
        .main_layer_01{/*---丸い画像 ----*/
            width: 200px;
            top: auto;
            bottom: 30px;
            left: 30px;
        }
        .main_layer_02{/*---テキスト ----*/
            top: auto;
            bottom: 55px;
            left: calc(200px + 30px + 20px);
            font-size: 1.8rem;            
        }
        .main_layer_03{/*---診療時間 ----*/
            width: clamp(440px,43vw,820px);
            bottom: 35px;
            right: 20px;
            text-align: left;
        }
    }
    .main_img{
        height: 680px;
        padding-top: 120px;
    }
    /*---お知らせ pc---*/
    .news{
    
        .inner{
            
            .info_box{
                width: calc(100% - 300px);
            }
        }
    }
    /*---当クリニックについて pc---*/
    .about{

        .inner{
            display: flex;
            justify-content: space-between;

            .image{
                aspect-ratio: 89 / 100;
                padding-bottom: 0;
                width: 30%;
            }
            
            .titles{
                width: 67%;
                margin: 0;
                padding-top: 100px;

                h3{
                    padding-left: 30px;
                }
                p{
                    padding-left: 30px;
                }

                .about_btn{
                    padding-left: 30px;

                    li{
                        &::after{
                            top: 15px;
                            right: 20px;
                        }
                        img{
                        width: 30px; 
                        margin-right: 10px;
                        }
                    }
                }
                .titles_img{
                    padding-left: 30px;
                }

            }
        }  
    } 
    /*---診療案内 pc---*/
    .service{

        .inner{
            width: min(94%,1480px);

            .inspection_wrap{
                width: 32%;            
            }
    
            .inspection_img{
                width: 160px;
            }

            .inspection_btn{

                &::after{
                    top: 14px;
                    right: 15px;
                }
            }
        }        
    }
    /*---訪問リハビリ pc---*/
    .rehab{

        .inner{ 
            display: flex;
            justify-content: space-between;

            .titles{
                width: 67%;
                margin: 0;
            
                h3{
                    padding-left: 30px;
                }
                p{
                    padding-left: 30px;
                }
                .about_btn{
                    padding-left: 30px;

                    li{
                        padding-left: 30px;
                        width: 300px;

                        &::after{
                            top: 15px;
                            right: 20px;
                        }

                        img{
                            width: 35px; 
                            margin-right: 10px;
                        }
                    }
                }
            }

            .image{
                width: 30%;
                margin: 0;
                grid-template-columns: repeat(1, 1fr);
                grid-template-rows: repeat(2, auto);
                padding: 0;
            }
        }  
    } 

    


    /*---フッタ診療時間 pc ----*/
    .foot_info_top{
		display: flex;
        justify-content: space-between;
        align-items: center;

        .foot_info_tx{
            width: 40%;
	
            .foot_info_ti{
                width: 5em;
                margin-right: 22px;
            }
            .info_tel{
                padding: 0 0 0 40px; 
                font-size: 3.5rem;
                
                &::before{
                    width: 31px;
                    height: 31px;
                    background-size: 31px;
                    top: 5px;
                }
            }
            .foot_info_btn{

                &::before{
                    background-size: 26px;
                    top: 9px;
                    left: 17px;
                }
            }
        }
        .foot_info_img{
            width: 55%;
            padding-top: 0;
            margin: 0;

        }
   } 
 
}
@media (min-width:1280px){
    /*---メイン画像 1280 ----*/
    .main_photo{
        height: 910px;
        
        .main_layer_01{/*---丸い画像 ----*/
            width: 290px;
            bottom: 40px;
            left: 30px;
        }
        .main_layer_02{/*---テキスト ----*/
            bottom: 70px;
            left: calc(290px + 30px + 25px);
            font-size: clamp(2.1rem,1.7vw,2.8rem);            
        }
        .main_layer_03{/*---診療時間 ----*/
            bottom: 20px;
            right: 30px;
        }
    }
    /*---当クリニックについて 1280---*/
    .about{

        .inner{

            .image{
                aspect-ratio: 89 / 72;
                width: 47%;
            }
            
            .titles{
                width: 50%;

                h3{
                    padding-left: 40px;
                }
                p{
                    padding-left: 40px;
                }

                .about_btn{
                    padding-left: 40px;
                }
                .titles_img{
                    padding-left: 40px;
                }
            }
        }  
    }
    /*---診療案内 1280---*/
    .service{
        .inner{
            .inspection_tx{
                p{
                    min-height: 12em;
                }
            } 
        }        
    } 
    /*---訪問リハビリ 1280---*/
    .rehab{

        .inner{ 

            .titles{
                width: 48%;
            
                h3{
                    padding-left: 30px;
                }
                p{
                    padding-left: 30px;
                }
                .about_btn{
                    padding-left: 30px;

                    li{
                        padding-left: 30px;

                        img{
                            width: 30px; 
                            margin-right: 10px;
                        }
                    }
                }
            }

            .image{
                width: 50%;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(1, auto);
            }
        }  
    } 
}
@media (min-width:1380px){
    /*---フッタアクセス 1380 ----*/
    .foot_access{

        .access_tx{
            padding-left: 30px;

            ul{
                padding-left: 35px;  
            }
        }
    }
    /*---フッタ診療時間 1380 ----*/
    .foot_info_top{

        .foot_info_tx{
            padding-left: 30px;

            table{
                padding-left: 35px;
            }
            .info_tel{
                padding: 0 0 0 42px; 
                font-size: 4.6rem;
                
                &::before{
                    top: 16px;
                }
            }            
        }
    }
}

@media (min-width:1680px){
    /*---メイン画像 1680 ----*/
    .main_photo{
        height: 930px;
        
        .main_layer_01{/*---丸い画像 ----*/
            width: 350px;
            bottom: 30px;
            left: 60px;
        }
        .main_layer_02{/*---テキスト ----*/
            bottom: 80px;
            left: calc(350px + 60px + 30px);         
        }
        .main_layer_03{/*---診療時間 ----*/
            right: 40px;
        }
    }
    /*---診療案内 1680---*/
    .service{
        .inner{
            .inspection_tx{
                p{
                    min-height: auto;
                }
            } 
        }        
    } 
}
@media (min-width:1800px){
    /*---訪問リハビリ 1800---*/
    .rehab{

        .inner{ 

            .titles{
                padding-left: 90px;
            }
        }  
    } 
}