@charset "utf-8";

.sidenav{position:fixed;right:0; top:40%;list-style: none; z-index:999;pointer-events:none;}
.sidenav .hours{transition:all 0.4s ease-out; transform:translateX(580px);pointer-events:auto;}
.sidenav .hours:hover{transform: translateX(0);}
/* ------------------------------ メインビジュアル------------------------------ */
#main_area {
    position: relative;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    background: linear-gradient(
    to top,
    #e3f1e1 70%,   /* 下70%に色 */
    transparent 70%
    );
}
#main_area img {
    width:clamp(600px,calc(1200/1920*100vw),1200px);
    border-top-left-radius: clamp(50px,calc(100/1920*100vw),100px);
}
#main_area h2 {
    position: absolute;
    top: 15%; /* ← 円を下方向に配置 */
    left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* ← 左寄せ */
    font-size: clamp(20px, calc(36/1920*100vw), 36px);
    background-image: url("../images/home/mainbg.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: clamp(370px, calc(700/1920*100vw), 700px);
    height: clamp(252px, calc(477/1920*100vw), 477px);
    color: #fff;
    text-align: left;
    padding-top: clamp(30px, calc(50/1920*100vw), 50px);
    padding-left: clamp(50px, calc(100/1920*100vw), 100px);

}
#main_area h2 span{font-size:clamp(26px,calc(50/1920*100vw),50px);line-height: 0.2;}
@-moz-document url-prefix() {
  #main_area h2 span {
    line-height: 1.6;
  }
}
/*お知らせトピックス*/
.news{display: flex;}
.news-left{background:#269117;padding:clamp(15px,calc(30/768*100vw),30px) 0;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.news-left h2{
    text-align: center;
    width:clamp(200px,calc(550/1920*100vw),550px);
    color:#FFF;
    font-size: clamp(18px,calc(26/1920*100vw),26px);
}
.news-left h2::before{
    display: block;
    content:"News ＆ Topics";
    font-size:clamp(16px,calc(20/1920*100vw),20px);
    color:#FFF;
}
a.newsbtn{text-align: center;display:block;background:#FFF;width:clamp(180px,calc(220/1920*100vw),220px);margin:0 auto;padding:10px 0;border-radius: 50px;color:#2c2c2c;font-size: clamp(16px,calc(20/1920*100vw),20px); margin-top: 20px;}
a.newsbtn:hover{color:#269117; opacity: 1.0;}
.entrylist{width:calc( 100% - clamp(200px,calc(550/1920*100vw),550px));}
.entrylist li{border-bottom: 1px dotted #269117;}
.entrylist a{padding:25px 35px 25px 25px;display: flex; gap:clamp(10px,calc(20/1920*100vw),20px); color:#000; position:relative;}
.entrylist a:hover{color:#269117;}
.entrylist a::after{content:"";display:inline-block;background:url("../images/arrow.svg") no-repeat center/cover; width:28px; height: 28px;position:absolute;right:15px;}

/*診療案内*/
#info h2::before{content:"Medical Information";}
.flexbox.c3 li{box-shadow: 0 0 10px rgba(0,0,0,0.3);border-radius: 12px;}
.flexbox.c3  li a{position:relative;display:block;padding-bottom: clamp(30px,calc(50/1500*100vw),50px); height: 100%;}
.flexbox.c3  li a::after{content:"";display:block;background:url("../images/arrow.svg") no-repeat center/cover; width:clamp(25px,calc(40/1500*100vw),40px); height:clamp(25px,calc(40/1500*100vw),40px);position:absolute;bottom:15px;left:50%;transform: translateX(-50%);}
.flexbox.c3 img{border-top-left-radius: 12px;border-top-right-radius: 12px;}
.flexbox.c3 div{position:relative;}
.flexbox.c3  h3{position:absolute;bottom:0;text-align: center;background:#269117;color:#FFF;padding:clamp(10px,calc(20/1920*100vw),20px) 0;opacity: 0.9;width:100%;}
.flexbox.c3 p{padding:clamp(10px,calc(20/1500*100vw),20px);color:#4c4c4c;line-height: 2.0;}

/*当院の特徴*/
#feature h2::before{content:"Our features";}
.round{border-top-left-radius: clamp(50px,calc(100/1500*100vw),100px);}
.imgL,.imgR{justify-content: space-between;align-items: flex-start;}
.imgL img,.imgR img{width:40%; max-width: 650px; height: auto;}
.imgR img{order:2;}
.imgL ul,.imgR ul{width:55%;}
.feature li{background:#FFF;padding:20px;border-radius: 12px;}
.feature h3{margin-bottom: 20px;}
#feature .inner-box { counter-reset: Feature;}
.feature li {position: relative;counter-increment: Feature;}
.feature li::before {
    content: "Feature" counter(Feature, decimal-leading-zero);
    position: absolute;
    left: 20px; /* 好みで調整 */
    top: -20px;
    color: #269117;
    font-size:clamp(18px,calc(26/1500*100vw),26px);
    font-family:"Century Gothic",YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}


/* ------------------------------ レスポンシブ------------------------------------------------------------*/

/* 1024px以下から------------------------------------------------------------*/
@media only screen and (max-width:1024px){
    /*診療案内*/
    .flexbox.c3 li{width:48.5%;}
    .imgL{align-items: flex-start;}
}


/* 768px以下から------------------------------------------------------------*/
@media only screen and (max-width:768px){
    body{min-width:748px;}
    
}
/* 450px以下から------------------------------------------------------------*/
@media only screen and (max-width:450px){
    body {min-width: inherit!important;width: 100%;}
    #main_area {
        padding-top:0px;    
        display: flex;
        flex-direction: column;
        background: linear-gradient(
        to top,
        #e3f1e1 90%,   /* 下90%に色 */
        transparent 70%
        );
    }
    #main_area img {width:100%;border-radius:0;}
    #main_area h2 {position: static;color: #fff;}
    /*お知らせ・トピックス*/
    .news{flex-direction: column;}
    .news p{padding:10px;}
    .news-left h2{width:100%;}
     a.newsbtn{margin-top:10px;padding:5px 0;}
    .entrylist{width:100%;}
    .entrylist a{padding:15px 25px 15px 15px;flex-wrap: wrap;gap:5px;}
    .entrylist a time{display: block;width:100%; }
    .entrylist a::after{width:18px; height: 18px;position:absolute;right:0px;top:50%;transform: translate(-50%);}
    /*診療案内*/
    .flexbox.c3 li{width:100%;}
    .imgL img,.imgR img{width:100%;}
    .imgL img{order:2;}
    .imgL ul,.imgR ul{width:100%;}
}