@charset "utf-8";
/*各ページ共通------------------------------------------------------------*/
/*メイン画像エリア*/
#main_area{position: relative;top: 0; width:100%;z-index: 1;overflow: hidden;}
#main_area {
  position: relative;
  width: 100%;
  height: 420px;
  background-image: url('../images/sports/main.webp'); /*ページごとに変更*/
  background-size: cover;     
  background-position: center; /* ページによって変更OK */
  background-repeat: no-repeat;
}
.pageti{display:block;position:absolute;top:50%;left:50%;transform: translateX(-50%);background:rgba(25,35,80,0.5);color:#FFF;text-align: center;width:clamp(18.75rem, 12.054rem + 23.81vw, 34.375rem);/*最大550最小300*/padding:2rem;font-size:clamp(1.25rem, 0.848rem + 1.43vw, 2.188rem);/*最大30最小20*/font-family:YuMincho,"Yu Mincho", "Hiragino Mincho ProN", "serif";}
/*パンくず*/
#pankuzu {display:flex;justify-content:  flex-end; max-width:1500px;margin:10px auto 30px; list-style: none;}
#pankuzu li:not(:last-child)::after{content:">";padding:0 5px;}

/*このページ単体のCSS------------------------------------------------------------*/
.menu{width:95%;max-width:1000px;margin-bottom:clamp(3.125rem, 1.786rem + 4.76vw, 6.25rem);}
.menu a{display: block; background:#192350; color:#FFF; padding:20px 0; text-align: center; border-radius: 3px;}
/*特徴・こだわり*/
#feature{position:relative;}
#feature::before{left:0px;top:12%; content:"Features";}
.imgL,.imgR{justify-content: space-between; align-items: flex-start;}
.imgL div,.imgR div{width: calc(100% - clamp(17.5rem, 5.697rem + 24.59vw, 28.75rem));}
.imgL img,.imgR img{width:clamp(15.625rem, 5.789rem + 20.49vw, 25rem);}
/*スポーツ整形外科とは？*/
#whatis{position:relative;}
#whatis::before{left:0px;top:12%; content:"What is sports orthopedics? ";height:950px;}
.imgR450{justify-content: space-between; align-items: flex-start;}
.imgR450 div{width: calc(100% - clamp(20.625rem, 8.822rem + 24.59vw, 31.875rem));}
.imgR450 img{width:clamp(18.75rem, 8.914rem + 20.49vw, 28.125rem);}
.treat4 li{display: flex; column-gap: 30px;}
.treat4 h3 img{width:clamp(3.75rem, -0.053rem + 7.92vw, 7.375rem);}
.treat4 p{width:calc(100% - clamp(3.75rem, -0.053rem + 7.92vw, 7.375rem));}
.box{border:1px solid #cccccc; border-radius: 15px;overflow: hidden;}
.box h3{background-color: #2350b5;color:#FFF; padding:15px;}
.box ul,.box p{padding:20px;}
/*主な疾患と症状*/
#symptom{position:relative;}
#symptom::before{left:0px;top:12%; content:"Symptoms＆disease";}
#symptom .flexbox.c3{justify-content: center;}
/* レスポンシブ-----------------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1025px) {
    .feature h3 br{display:none;}/*特徴・こだわり*/
    #whatis::before{height:inherit;}/*スポーツ整形外科とは？*/
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*特徴・こだわり*/
    .imgL,.imgR{justify-content:center;}
    .imgL div,.imgR div{width:100%;order:1;}
    .imgL img,.imgR img{width:85%;max-width:400px;}
    /*スポーツ整形外科とは？*/
    .imgR450{justify-content:center;}
    .imgR450 div{width:100%;order:1;}
    .imgR450 img{width:85%;max-width:400px;}
    .treat4 li:last-child img{width:100% !important; border-radius: 0;}
    /*主な疾患と症状*/
    #symptom .flexbox.c3{justify-content: flex-start;}
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*メイン画像*/
    #main_area {background-image: url('../images/sports/mainSP.webp');}
    strong{font-weight:700;}
    .menu{ row-gap:15px !important;}
    .treat4 li{margin-bottom: 20px;}
    .treat4 li span{font-weight: 700;}
}