@charset "utf-8";
#main_area img{width:100%;}
/*お知らせ*/
.news{display:flex;column-gap:clamp(20px,calc(50/1280*100vw),50px);width:60%;}
.bnr{width:30%;}
.news h2{writing-mode: vertical-rl;}
.news h2::after{display:block;content:"News & Topics";font-size:14px;}
.news ul{border-top:1px solid #443527;width:100%;max-width:730px;}
.news li a{position:relative;display:block;border-bottom:1px solid #443527;padding:20px 30px 20px 10px;}
.news li a:hover{background:#f5f8f8;}
.news a::after{position:absolute; right:0;top:50%;transform: translateY(-50%);content:"→";background:#443527;padding:1px 8px; color:#FFF;font-size:11px;border-radius: 12px;}
.news time{font-size:14px;}

/*診療のご案内*/
.imgL,.imgR{position:relative;display:flex; gap:clamp(20px,calc(50/1920*100vw),50px); width:clamp(500px,calc(1080/1920*100vw),1080px);align-items: flex-start;z-index:1;}
.imgL img,.imgR img{width:clamp(200px,calc(385/1920*100vw),385px);}
.imgR{flex-direction:row-reverse;margin-left: auto;}
.imgL::after{content:"";background:url("../images/home/bg_bird1.svg") no-repeat center / cover;width:clamp(300px,calc(550/1920*100vw),550px); height:clamp(180px,calc(258/1920*100vw),258px); position:absolute; top:0;right:clamp(-650px,calc(-650/1920*100vw),-250px);}
.imgR::before{content:"";background:url("../images/home/bg_bird2.svg") no-repeat center / cover;width:clamp(300px,calc(540/1920*100vw),540px); height:clamp(238px,calc(428/1920*100vw),428px); position:absolute; top:0;left:clamp(-650px,calc(-650/1920*100vw),-250px);}
.tabon{display:none;}
.flexbox.c3 a{position:relative;display:flex; flex-wrap: wrap; color:#333333;width: 100%; height: 100%;padding-bottom: 15px;}
.flexbox.c3 a::after{position:absolute;bottom:0px;right:0px; content:"→";background:#1b5175;padding:1px 8px; color:#FFF;font-size:11px;border-radius: 12px;}
.flexbox.c3 h3{width:calc(100% - 190px);color:#000000;}
.flexbox.c3 h3::before{display:block;content:""; width:60px;height:52px;margin-bottom:20px;}
h3.makizume::before{ background: url("../images/home/icon_makizume.webp") no-repeat;}
h3.vaccine::before{background: url("../images/home/icon_vaccine.webp") no-repeat;}
h3.checkup::before{background: url("../images/home/icon_checkup.webp") no-repeat;}

/*しんいけクリニックの特徴*/
.bgwrap{overflow:hidden;width:100%;height:clamp(350px,calc(500/1920*100vw),500px);}
.bgwrap img {
    width:100%; 
    object-fit: cover;
}
.feature{align-items: center; justify-content: space-between;margin-top:clamp(-300px,calc(-300/1920*100vw),-200px);}
.leftco{width:27%;}
.rightco{width:65%;}
.leftco h2{font-size:clamp(20px,calc(28/1500*100vw),28px);line-height: 1.4;}
.fs18{font-size:clamp(16px,calc(18/1500*100vw),18px);}
.rightco img{display:block;margin:auto;}
.rightco h3{font-size:clamp(20px,calc(26/1500*100vw),26px);}
.rightco a{position:relative;display:flex; flex-wrap: wrap; color:#333333;width: 100%; height: 100%;padding-bottom: 15px;}
.rightco a::after{position:absolute;bottom:0px;right:0px; content:"→";background:#1b5175;padding:1px 8px; color:#FFF;font-size:11px;border-radius: 12px;}

/* レスポンシブ
------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
    .flexbox.c3 div{width:47.5%;}
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*お知らせ*/
    .news{width:100%; margin-bottom: 50px;}
    .bnr{width:100%;display: flex;gap:15px;}
    /*診療のご案内*/
    .tabon{display:inherit;}
    .tabnon{display:none;}
    .imgL,.imgR{width:100%;flex-direction: column;padding-top:40px;}
    .imgL img,.imgR img{width:450px;margin:auto;}
    .imgL::after{width:200px; height:94px; top:0px;right:-30px;}
    .imgR::before{width:200px; height:158px; top:0px;left:-50px;}
    
    .flexbox.c3 div{width:80%; margin: auto;}
    .flexbox.c3 h3{width:calc(100% - clamp(100px,calc(180/768*100vw),180px));}
    .flexbox.c3 img{width:clamp(100px,calc(180/768*100vw),180px);}

    /*しんいけクリニックの特徴*/
    .bgwrap{height:180px;}
    .feature{margin-top:clamp(-30px,calc(-30/768*100vw),-30px);;}
    .leftco{width:100%;margin-bottom: 30px;}
    .leftco a.arrow{display:block;text-align: right;}
    .rightco{width:100%;}
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*お知らせ*/
    .inner-box2.flexbox{row-gap:30px;}
    .news,.bnr{flex-direction: column;margin:0;}
    .news h2{writing-mode: inherit;margin-bottom: 10px;}
    .bnr img{display:block;margin:auto;width:85%;}
    /*診療のご案内*/
     .flexbox.c3 div{width:100%; margin: auto;}
    /*しんいけクリニックの特徴*/
    .bgwrap{height:250px;}

    .feature{margin-top:0;}
    .rightco li{width:100%;}
}