@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/orthopedics/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;}

/*痛みの３つのタイプ*/
#type{position:relative;}
#type::before{left:5px;top:10%; content:"Orthopedics";}
.imgRtype{justify-content: space-between; align-items: flex-start;}
.imgRtype div{width: calc(100% - clamp(20.625rem, 2.92rem + 36.89vw, 37.5rem));}
.imgRtype img{width:clamp(18.75rem, 3.668rem + 31.42vw, 33.125rem);}
.flexbox.c3 div{display:flex;flex-direction: column;}
.flexbox.c3 p{flex-grow: 1;margin-bottom: 30px;}
.box{border:1px solid #2350b5; border-radius: 12px; padding:15px;}

/*主な治療内容*/
#treatment{position:relative;}
#treatment::before{left:5px;top:7%; content:"Treatment approach";}
.imgLtreat{justify-content: space-between; align-items: flex-start;}
.imgLtreat div{width: calc(100% - clamp(21.25rem, 10.102rem + 23.22vw, 31.875rem));}
.imgLtreat img{width:clamp(18.75rem, 8.914rem + 20.49vw, 28.125rem);}
.arrowW{
    position:relative;
    display: inline-block;
    width:300px;
    background:#008ac8;
    color:#FFF;
    padding:15px 0;
    text-align:center;
    border-radius: 3px;
    border-radius: 40px;
}
.arrowW::after{content:url("../images/arrowW.webp"); width:28px; height: 28px; position: absolute;right:10px;top:50%;transform: translateY(-50%);}
/*交通事故・労災*/
.imgRjiko,.imgLjiko{justify-content: space-between; align-items: flex-start;}
.imgRjiko div,.imgLjiko div{width: calc(100% - clamp(20.625rem, 2.92rem + 36.89vw, 37.5rem));}
.imgRjiko img,.imgLjiko img{width:clamp(18.75rem, 3.668rem + 31.42vw, 33.125rem);}
.jiko::before,.rousai::before,.ost::before{content:"Traffic Accident"; display:block; font-family: "Merriweather", serif; font-size:clamp(1rem, 0.143rem + 3.05vw, 3rem);color:#ced0db;line-height: 0.9;}
.rousai::before{content:"Workplace Accident";}
.ost::before{content:"Osteoporosis";}
.jiko,.rousai,.ost{font-size:clamp(1.125rem, 0.911rem + 0.76vw, 1.625rem);margin-bottom:1em;}

/*骨粗鬆症*/
.imgLost,.imgLost2{justify-content: space-between; align-items: flex-start;}
.imgLost div{width: calc(100% - clamp(20.625rem, 2.92rem + 36.89vw, 37.5rem));}
.imgLost img{width:clamp(18.75rem, 3.668rem + 31.42vw, 33.125rem);}
.imgLost2 div{width: calc(100% - clamp(21.25rem, 10.102rem + 23.22vw, 31.875rem));}
.imgLost2 img{width:clamp(18.75rem, 8.914rem + 20.49vw, 28.125rem);}
.bg_b{background:#d1d8e5;padding:30px;border-radius:15px; max-width: 1200px; margin: auto;}
#ost{position:relative;}
#ost::before{position:absolute; top:20%; left:0;display:block;content:"";background:url("../images/bg_gray.webp") no-repeat top center /cover; width: clamp(12.5rem, 2.934rem + 34.01vw, 43.75rem); height: clamp(6.25rem, 1.467rem + 17.01vw, 21.875rem);transform:scale(-1, 1);z-index:-1;}
/* レスポンシブ-----------------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1025px) {
 
}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*痛みの３つのタイプ*/
    .imgRtype{flex-wrap: wrap;justify-content: center;}
    .imgRtype div{width:100%;order:2;}
    .imgRtype img{width:85%;max-width:530px;order:1;}
    .flexbox.c3 div{width:100%;}
    /*主な治療内容*/
    .imgLtreat{flex-wrap: wrap;justify-content: center;}
    .imgLtreat div{width:100%;margin-bottom: 40px;}
    .imgLtreat img{width:85%;max-width:450px;}
    .right{text-align: center ;}
    /*交通事故・労災*/
    .imgRjiko,.imgLjiko{flex-wrap: wrap;justify-content: center;}
    .imgRjiko div,.imgLjiko div{width:100%;margin-bottom: 40px;}
    .imgRjiko img,.imgLjiko img{width:85%;max-width:600px;}
    .imgRjiko div{order:2;}
    .imgRjiko img{order:1;}
    /*骨粗鬆症*/
    .imgLost,.imgLost2{flex-wrap: wrap;justify-content: center;}
    .imgLost div,.imgLost2 div{width:100%;margin-bottom: 40px;}
    .imgLost img{width:85%;max-width:600px;}
    .imgLost2 img{width:85%;max-width:450px;}
    #ost::before{top:3%; width: 300px; height:150px;}
}

/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*メイン画像*/
    #main_area {background-image: url('../images/orthopedics/mainSP.webp');}
    .menu{ row-gap:15px !important;}
    /*痛みの３つのタイプ*/
    .fc_navy{font-weight:700;}
}