@charset "UTF-8";
.small {
  line-height: 1.6em;
  font-size: 85%;
}
/* pcのみ画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンのみ画像が表示される */
@media only screen and (max-width: 480px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/*赤羽限定、ヘッダーメニュー用CSS*/
header .header__inner .navi__bottom li a{
  filter: none;
}

/* 文字色 */
.main {color: #4d4d4d;}
.sub {color: #e98379;}
.accent {color: #fdf3f2;}

/* レイアウトボックス・背景色 */
section h2 {
    text-align: center;
    color: #4d4d4d;
    font-size: clamp(25px, 2.5vw, 30px);
    font-weight: bold;
    padding-top: 40px;
    margin: auto;
    width: fit-content;
    position: relative;
}
section h2 img{
  position: absolute;
  right: -35px;
  top: 25%;
  width: 30px;
  height: 30px;
}
@media only screen and (min-width: 798px) {
}
article h2,
article h3 {
    color: #4d4d4d;
    font-size: clamp(22px, 2.5vw, 26px);
    font-weight: bold;
    margin-bottom: 15px;
}
section {position: relative;}
section.tri:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 0;
    z-index: 5;
}
.bg_main.tri:after {border-top: 30px solid #f0f0f0;}
.bg_sub.tri:after {border-top: 30px solid #dff2ff;}
.bg_accent.tri:after {border-top: 30px solid #fdf3f2;}
.bg_white.tri:after {border-top: 30px solid #fff;}

article {padding: 20px 0 20px}
article + article {
  padding: 0 0 20px;
}
@media only screen and (min-width: 798px) {
  article {padding: 20px 0 50px}  
}
.bg_main {background: #f0f0f0;}
.bg_sub {background: #dff2ff;}
.bg_accent {background: #fdf3f2;}
.bg_white {background: #fff;}
.bg_gray {background: #eee;}

/*ページ内リンク用CSS*/
.ownLinks{
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #46a348;
  margin: auto;
  padding: 20px;
}
.ownLinks a{
  font-size: 14px,2.5vw,15px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 3%;
}
.ownLinks a:before{
  content: "";
  position: relative;
  bottom: 1px;
  left: -2px;
  display: inline-block;
  margin-right: 10px;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transition: 0.4s;
}
.ownLinks a:hover:before{
  left: 3px;
}

/*共通レイアウトCSS*/
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}

.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt30{padding-top: 30px !important;}
.pt40{padding-top: 40px !important;}
.pt50{padding-top: 50px !important;}
.pt60{padding-top: 60px !important;}
.pt70{padding-top: 70px !important;}
.pt80{padding-top: 80px !important;}
.pt90{padding-top: 90px !important;}
.pt100{padding-top: 100px !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pb50{padding-bottom: 50px !important;}
.pb60{padding-bottom: 60px !important;}
.pb70{padding-bottom: 70px !important;}
.pb80{padding-bottom: 80px !important;}
.pb90{padding-bottom: 90px !important;}
.pb100{padding-bottom: 100px !important;}

.mx10{margin-left: 10px;margin-right: 10px;}
.mx20{margin-left: 20px;margin-right: 20px;}
.mx30{margin-left: 30px;margin-right: 30px;}
.mx40{margin-left: 40px;margin-right: 40px;}
.mx50{margin-left: 50px;margin-right: 50px;}
.mx60{margin-left: 60px;margin-right: 60px;}
.mx70{margin-left: 70px;margin-right: 70px;}
.mx80{margin-left: 80px;margin-right: 80px;}
.mx90{margin-left: 90px;margin-right: 90px;}
.mx100{margin-left: 100px;margin-right: 100px;}
.my10{margin-top: 10px;margin-bottom: 10px;}
.my20{margin-top: 20px;margin-bottom: 20px;}
.my30{margin-top: 30px;margin-bottom: 30px;}
.my40{margin-top: 40px;margin-bottom: 40px;}
.my50{margin-top: 50px;margin-bottom: 50px;}
.my60{margin-top: 60px;margin-bottom: 60px;}
.my70{margin-top: 70px;margin-bottom: 70px;}
.my80{margin-top: 80px;margin-bottom: 80px;}
.my90{margin-top: 90px;margin-bottom: 90px;}
.my100{margin-top: 100px;margin-bottom: 100px;}

.px10{padding-left: 10px;padding-right: 10px;}
.px20{padding-left: 20px;padding-right: 20px;}
.px30{padding-left: 30px;padding-right: 30px;}
.px40{padding-left: 40px;padding-right: 40px;}
.px50{padding-left: 50px;padding-right: 50px;}
.px60{padding-left: 60px;padding-right: 60px;}
.px70{padding-left: 70px;padding-right: 70px;}
.px80{padding-left: 80px;padding-right: 80px;}
.px90{padding-left: 90px;padding-right: 90px;}
.px100{padding-left: 100px;padding-right: 100px;}
.py10{padding-top: 10px;padding-bottom: 10px;}
.py20{padding-top: 20px;padding-bottom: 20px;}
.py30{padding-top: 30px;padding-bottom: 30px;}
.py40{padding-top: 40px;padding-bottom: 40px;}
.py50{padding-top: 50px;padding-bottom: 50px;}
.py60{padding-top: 60px;padding-bottom: 60px;}
.py70{padding-top: 70px;padding-bottom: 70px;}
.py80{padding-top: 80px;padding-bottom: 80px;}
.py90{padding-top: 90px;padding-bottom: 90px;}
.py100{padding-top: 100px;padding-bottom: 100px;}

.Box{
    max-width: 1280px;
    margin: auto;
    font-size: clamp(14px,2vw,16px);
    text-align: justify;
}
.Box p{
    line-height: 1.8em;
}
.w840{max-width: 840px;margin: auto;}

.leftBox,.rightBox {width: 100%;padding: 20px;order: 1;}
.leftBox .txt,.rightBox .txt {order: 3;}
.leftBox.picture,.rightBox.picture {padding:0;}
.Box picture {padding: 0;border-radius: 20px;object-fit: cover;height: 450px;width: auto;}

@media only screen and (min-width: 798px) {
    .leftBox,.rightBox {width: calc(50% - 15px);}
    .txt {max-width: 440px;}
    .leftBox.txt {margin: 0 15px 0 auto;}
    .rightBox.txt {margin: 0 auto 0 15px;order: 2;}
    .leftBox.picture {margin: 0 0 0 auto;padding:0;text-align: right;}
    .rightBox.picture {margin: 0 auto 0 0;padding:0;}
}

/* MV */
.mv,
.mv img {
  position: relative;
  width: 100%;
  height: 65vh;
  max-height: 380px;
  object-fit: cover;
  object-position: 75% center;
}
.mv {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.mv__catch {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 15px 15px 10px;
  border-radius: 0 10px 0 0;
}
.mv .ttl {
  width: 100%;
  font-size: clamp(25px, 2.5vw, 40px);
  font-weight: bold;
  color: #4d4d4d;
  line-height: 1.5em;
}
.mv .ttl__top {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #46a348;
  padding: 5px 18px;
  color: #fff;
  font-size: clamp(10px, 3.5vw, 14px);
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 1280px) {
  .mv,
  .mv img {
    max-height: 460px;
    object-position: center center;
  }
  .mv__catch {
    top: 35%;
    margin: 0 20%;
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
  }
}

/*診療の特徴を説明*/
.w840 ul.count {
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 25px;
    flex-wrap: wrap;
}
.w840 ul.count li {
    width: calc(100% - 40px);
    position: relative;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.w840 ul.count li:last-child {
    margin-bottom: 0;
}
.w840 ul.count li span {
  font-size: 115%;
    font-weight: bold;
    color: #4d4d4d;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: auto;
    padding: 6px 0;
    width: 95%;
}
.w840 ul.count li picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #fff;
    padding: 0;
    margin: auto;
}
.w840 ul.count li picture img{
  height: auto;
  width: 55%;
  margin-top: 8px;
}
.w840 ul.count li p{
    text-align: left;
    margin: 10px auto 0;
    font-size: clamp(14px,2vw,15px);
    width: 55%;
}
.w840 ul.count li p strong{
  font-size: 120%;
  color: #7f4a1b;
  display: inline-block;
  width: 100%;
  text-align: center;
  padding-bottom: 5px;
}

/*テキストかアイコンのみの場合*/
.w840 ul.count.only {
  column-gap: 15px;
}
.w840 ul.count.only li {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background-color: #fff;
    align-content: center;
    padding-bottom: 0;
}
.w840 ul.count.only li img{
  height: auto;
  width: 45%;
  margin-top: 35px;
}
.w840 ul.count.only li p{
  font-size: clamp(13px, 2vw, 14px);
  width: 90%;
  text-align: justify;
}

@media only screen and (min-width: 798px) {
    .w840 ul.count li {
        width: calc(33% - 25px);
        align-content: flex-start;
        margin-bottom: 0;
        padding-bottom: 30px;
    }
    .w840 ul.count li p{
        width: 90%;
        margin: auto;
    }
    .w840 ul.count li picture {
      width: 160px;
      height: 160px;
      margin-bottom: -15px;
    }

  .w840 ul.count.only li {
      width: 175px;
      height: 175px;
      margin-left: 40px;
      margin-right: 40px;
  }
}

.links {
  font-size: clamp(15px,2vw,17px);
  text-align: center;
  color: white;
  background: #46a348;
  border-radius: 25px;
  border: solid 1px #46a348;
  padding: 15px 18px 15px 0;
  margin: 15px auto;
  display: block;
  position: relative;
  transition: 0.4s;
}
.links:after {
  content: "";
  background: url(../../img/common/ico_arrow01_white.svg) no-repeat center / cover;
  width: 15px;
  height: 12px;
  position: absolute;
  right: 5px;
  top: 36%;
  transition: 0.4s;
}
.links:hover {
  background: #fff;
  color: #46a348;
}
.links:hover:after {
  content: "";
  background: url(../../img/common/ico_arrow01_brown.svg) no-repeat center / cover;  
  right: -5px;
}
.txticon {
  font-size: clamp(15px,2vw,16px);
  text-align: center;
  color: white;
  padding: 6px 15px;
  margin: 0.5% auto;
  display: inline-block;
}
.txticon.c1 {background: #46a348;}
.txticon.c2 {background: #ff933b;}
.txticon.c3 {background: #00b900;}
.txticon.c4 {background: #e98379;}

.links.w100 {width: 100%;}
.links.w50 {width: calc(49% - 1px);display: inline-block;}
.links.w50 + .links.w50{margin-left: 1%;}
.txticon.w100 {width: 100%;}
.txticon.w80 {width: 78%;}
.txticon.w50 {width: 49%;margin-right: 0.5%;}

/*診療の流れ*/
.flow_article{
  width: 100%;
  height: 100%;
  min-height: 120px;
  background-color: #eee;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
}
.flow_article p{
  display: inline-block;
  width: calc(55% - 5px);
  padding: 15px 15px 15px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}
.flow_article picture{
  width: 45%;
  height: auto;
  min-height: 135px;
  max-height: 280px;
  padding: 0;
  display: flex;
}
.flow_article picture img{
  object-fit: cover;
  object-position: center;
  border-radius: 10px 0 0 10px;
}

@media only screen and (min-width: 798px) {
  .flow_article p{
    padding: 20px 25px 20px 10px;
  }
  .flow_article picture{
    max-height: 160px;
  }
}

/*料金*/
.price{
  font-weight: bold;
  color: #e98379;
  margin-top: 15px;
}
.price strong{
  font-size: clamp(28px,2.5vw,35px);
  margin-left: 5px;
  margin-right: 5px;
}


/*注意事項*/
.attention {
  max-width: 800px;
  padding: 30px;
  margin: 0 auto;
  border-radius: 15px;
}
.attention p{
  font-size: clamp(12px,2.5vw,13px);
  line-height: 1.5em;
  margin-bottom: 4px;
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.attention p:before{
  content: "●";
  font-size: 80%;
  color: #bbb;
  margin-right: 6px;
}
.attention p:last-child{
  margin-bottom: 0;
}

/* パンくず */
.breadcrumb {
}
.breadcrumb .list {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: auto;
}
.breadcrumb .list li {
    padding: 20px 5px 20px 15px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}
.breadcrumb .list li a {
    color: #4d4d4d;
    display: block;
    position: relative;
    display: inline-block;
}
.breadcrumb .list li a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-top: solid 1px #4d4d4d;
    border-right: solid 1px #4d4d4d;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
@media only screen and (max-width: 767px) {
  .breadcrumb .list li {
    font-size: 10px;
  }
}

/*自費診療レイアウト共有CSS*/