/*= 全体設定 =*/
.section_title {
  text-align: center;
  &:before {
    right: 0;
  }
}
.body_title {
  font-size: 1.5rem;
}
@media screen and (min-width: 1024px){
  #site-header {
  }
  #body_wrapper {
    margin-top:-90px;
  }
}

.section_wrapper:nth-of-type(odd) {
  background: #fff;
  position: relative;
  margin-top: 64px;
  padding-bottom: 64px;
  &::before {
    content: "";
    height: 51px;
    width: 100%;
    background-image:url(/wp-content/themes/original_theme_honin/assets/img/sep_white.png) ;
    background-position: bottom right;
    background-repeat: repeat-x;
    position: absolute;
    top: -51px;
    right: 0;
    z-index: 20;
  }
}

.section_wrapper:nth-of-type(even) {
  position: relative;
  &::before {
    content: "";
    height: 51px;
    width: 100%;
    background-image:url(/wp-content/themes/original_theme_honin/assets/img/sep_blue.png) ;
    background-repeat: repeat-x;
    position: absolute;
    top: -51px;
    left: 0;
    z-index: 20;
  }
}

#site-footer {
  &::before{
    display: none;
  }
}

/*= メインビジュアル =*/
.mv {
  height: 66vh;
  overflow: hidden;
  position: relative;
  .swiper-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}


/*= トップフィーチャー =*/
.section_feature {
  .section_sitelead {
    padding-top: 0;
  }
  .section_event .event_list{
    max-width: 920px;
    margin: 0 auto 1rem;
    display: grid;
    gap: 1rem;
    @media screen and (min-width: 768px){
      grid-template-columns: repeat(2,1fr);
    }
    .info_item {
      border-radius: 6px 6px 0 0;
      border: 1px solid #17B2B8;
    }
    .info_title {
      text-align: center;
      border-radius: 4px 4px 0 0;
      background: #17B2B8;
      color: #fff;
      padding: .5rem;
      font-size: 1.25rem;
    }
    .info_body {
      padding: .5rem 1rem;
      text-align: center;
      background: #fff;
    }
  }
  .section_logo {
    padding-top: 0;
    padding:0 1rem 1rem;
    text-align: center;
    img {
      width: 720px;
    }
  }
  .section_catch {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 14px;
    
  }
  .section_lead {
    text-align: center;
    margin-bottom: 24px;
    font-size: 1.2rem;
  }
  .section_doctor{
    gap:2rem;
    display: grid;
    @media screen and (min-width: 1024px){
      grid-template-columns:40% calc(60% - 2rem);
      font-size:1.125rem;
    }
  }
  .img_wrap {
    text-align: center;
  }
  .img_wrap img{
    border-radius: 24px;
  }
  .profile_greeting {
    position: relative;
    .white_dog_img {
      position: absolute;
      top: 0;
      right: -1rem;
      img {
        height: 120px;
      }
    }
    @media screen and (min-width: 1024px){
      .white_dog_img {
        top: -24px;
        img {
          height: 160px;
        }
      }
    }
    .dr_nmae {
      font-size: 2rem;
      
      color: #17B2B8;
      margin-bottom: 1rem;
    }
    .body_txt {
      background: #fff;
      border-radius: 2rem;
      padding: 2rem;
    }
    .body_txt .txt{
      font-size: calc(1.125rem + .1vw);
      padding-bottom: .5rem;
    }
  }
  .profile_specialty {
    .sub_header {
      padding-top: .5rem;
      margin: .5rem 0;
      border-top: 1px dashed #6CCBCF;
      font-size: calc(1.25rem + .1vw);
      color: #17B2B8;
    }
    .list_item {
      display: inline-block;
      font-size: calc(1.125rem + .1vw);
      padding:.25rem .5rem;
      background: #EEF4F4;
    }
  }
  .link_list {
    margin-top: 1rem;
    @media screen and (min-width: 1024px){
      display: flex;
      gap: 1rem;
      justify-content: end;
    }
    .list_item {
      margin-bottom: 1rem;
    }
  }
  .btn_wrapper {
    text-align: center;
  }
}


/*== ご挨拶 ==*/
.section_profile {
  .section_main{
    @media screen and (min-width: 1024px){
      display: grid;
      gap:2rem;
      grid-template-columns: 40% 1fr;
      align-items: center;
    }
  }
  .img_wrap {
    text-align: center;
  }
  .profile_greeting {
    .body_title {
      font-size: 1.5rem;
      
    }
    .dr_nmae {
      font-size: 2rem;
      
      color: #17B2B8;
      margin-bottom: 1rem;
    }
    .body_txt {
      background: #fff;
      border-radius: 2rem;
      padding: 2rem;
    }
    .body_txt .txt{
      font-size: calc(1.125rem + .1vw);
      padding-bottom: .5rem;
    }
  }
  .section_drinfo{
    @media screen and (min-width: 1024px){
      display: grid;
      gap:2rem;
      grid-template-columns: repeat(2,1fr);
    }
  }
  .sub_header {
    border-radius: 8px;
    background: #17B2B8;
    color: #fff;
    padding: 8px;
    margin-bottom: 8px;
  }
  .info_list {
    margin-bottom: 1rem;
  }
  .list_item {
    position: relative;
    padding-left: 18px;
    &::before{
      content: "";
      width:4px;
      height:4px;
      background: #17B2B8;
      border-radius: 2px;
      position: absolute;
      left: 4px;
      top: .6rem;
    }
  }
  .profile_career {
    .career_table{
      margin-bottom: 18px;
      width: 100%;
      border: 1px solid #A7D8DA;
      th,td {
        padding: 8px;
        border-bottom: 1px solid #A7D8DA;
      }
      th {
        background: #fff;
        border-right:1px solid #A7D8DA;
        vertical-align: middle;
      }
      td {
      }
    }
  }
  @media screen and (min-width: 1280px){

  }
}

/*= インフォメーション =*/
.section_information {
  padding-bottom: 82px !important;
  .section {
    max-width: 100%;
    @media screen and (min-width: 1280px){
      padding: 1rem 4rem;
    }
  }
  .section_body{
    gap:2rem;
    display: grid;
    @media screen and (min-width: 1280px){
      font-size:1.125rem;
      grid-template-columns: repeat(2,1fr);
      column-gap:8rem;
      row-gap: 4rem;
      position: relative;
      &::before {
        content: "";
        width: 1px;
        height: calc(100% - 3rem);
        background: #D3EBEC;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
      }
    }
    .body_title {
      color: #17B2B8;
    }
    .grid_item {
      min-width: 0;
    }
    /*= 診療時間 =*/
    .time_table_wrap {
      margin-bottom: 2rem;
    }
    .time_table {
      width: 100%;
      border-top: 2px solid #6CCBCF;
      margin-bottom: .5rem;
      .open {
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 4px solid #F683A0;
        border-radius: 12px;
        vertical-align: middle;
      }
      .closed {
        display: inline-block;
        width: 18px;
        height: 4px;
        background: #A7D8DA;
        vertical-align: middle;
        border-radius: 2px;
      }
      .short {
        width: 24px;
        height: 24px;
        display: inline-block;
        background-image: url(/wp-content/themes/original_theme_honin/assets/img/icon_triangle.png);
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
      }
    }
    .table_wrap th{
      font-family: "Rera-06","Noto Sans JP", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif;
    }
    .table_wrap th,
    .table_wrap td{
      background: #fff;
      text-align: center;
      padding:8px 4px;
      border-bottom: 2px solid #D3EBEC;
      vertical-align: middle;
    }
    .table_wrap .time_bg {
      background: #F9FCFD;
    }
    .table_wrap .table_title {
      font-weight: 400;
    }
    .saturday {
      color: #00d;
    }
    .holiday {
      color:#d00;
    }
    .note {
      font-size: calc(1rem + .1vw);
      padding-bottom: 4px;
    }
    .info_item{
      padding: 1rem;
      background: #fff;
      @media screen and (min-width: 1024px){
        grid-template-columns: repeat(2,1fr);
      }
      .info_time{
        display: grid;
        gap: .5rem;
        grid-template-columns: repeat(2,1fr);
        text-align: center;
        position: relative;
        &:before{
          content: "";
          height: 90%;
          width: 1px;
          background-color: #17B2B8;
          position: absolute;
          margin: auto;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
        }
        .label {
          font-size: calc(1.125rem + .1vw);
          margin-bottom: 18px;
          position: relative;
          display: inline-block;
          &:before{
            content: "";
            width: 0;
            height: 0;
            border:6px solid transparent;
            border-top: 6px solid #17B2B8;
            position: absolute;
            bottom:-18px;
            left: 0;
            right: 0;
            margin: auto;
          }
        }
      }
    }
    /*= 診療カレンダー =*/
    .calendar_wrap {
      margin-bottom: 2rem;
      @media screen and (min-width: 1280px){
        margin-bottom: 0;
      }
      .xo-event-calendar caption {
        background: #F9FCFD;
        color: #17B2B8;
        border-radius: 4px 4px 0 0;
        border:1px solid #D3EBEC;
      }
      .xo-event-calendar table.xo-month,
      .xo-event-calendar table.xo-month td,
      .xo-event-calendar table.xo-month th {
        border-color: #D3EBEC;
        font-family: "Rera-04","Noto Sans JP", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif;
      }
      .xo-event-calendar table.xo-month .month-dayname td div.today {
        font-family:"Rera-06","Noto Sans JP", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif;
        font-weight: normal;
        color: #17B2B8;
      }
      .holiday-titles .holiday-title{
        font-family:"Rera-04","Noto Sans JP", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif;
        display: inline-block;
        margin-right: 1.25rem;
      }
      .xo-event-calendar table.xo-month button span.nav-next,
      .xo-event-calendar table.xo-month button span.nav-prev{
        border-radius: 2px;
        border-color: #17B2B8;
      }
    }
    /*= お知らせ =*/
    .section_news {
      .news_list {
        border-top: 2px solid #6CCBCF;
        margin-bottom: 1rem;
      }
      .news_item {
        padding:8px;
        border-bottom:1px solid #D3EBEC;
        transition:background .25s ease-out;
        position: relative;
        &:hover{
          background: rgba(255,255,255,.5);
        }
      }
      .news_date {
        font-size: calc(.75rem + .1vw);
        display: inline-block;
        @media screen and (min-width: 1024px){
          padding:8px;
          border-right:1px solid #3cd3d8;
        }
      }
      .entry-title{
        display: block;
        @media screen and (min-width: 1024px){
          display: grid;
          grid-template-columns: 140px 1fr;
          gap:2rem;
          align-items:center;
        }
        &::before{
          content: "";
          height: 1px;
          width:3rem;
          border-radius: 1px;
          background: #F65481;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: calc(1.5rem + 12px);
          transition: right .25s ease-out;
        }
        &::after{
          content: "";
          height: 18px;
          width: 12px;
          background-image:url(/wp-content/themes/original_theme_honin/assets/img/btn_arrow.svg) ;
          background-size: contain;
          background-repeat: no-repeat;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 1.5rem;
          transition: right .25s ease-out;
        }
      }
      .entry-title_inner {
        font-size: calc(1rem + .1vw);
        padding-right: 8rem;
      }
      .entry-title:hover{
        &::before{
          right: calc(.5rem + 12px);
        }
        &::after{
          right: 1.25rem;
        }
      }
    }
    /*= ドナー募集バナー =*/
    .section_banner {
      text-align: center;
      margin-top: 4rem;
      min-width: 0;
    }
    .banner_swiper {
      padding-bottom: 34px;
    }
    .swiper-pagination-bullet-active {
      background: #F65481;
    }
  }
}



/*== 当院の特徴 ==*/
.section_details {
  .black_dog_img {
    position: absolute;
    top: -72px;
    z-index: 21;
    img {
      max-width: 140px;
      @media screen and (max-width: 500px){
        max-width: 120px;
      }
      @media screen and (max-width: 414px){
        max-width: 108px;
      }
    }
    @media screen and (min-width: 1024px){
      width: 18%;
      min-width: 160px;
      text-align: center;
    }
  }
  .section{
    max-width: 100%;
  }
  .section_header{
    text-align: center;
  }
  .section_title:before{
    right: 0;
  }
  .features_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .list_item {
      text-align: center;
      height: 240px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      margin: 1rem;
      width:calc(50% - 2rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      @media screen and (min-width: 768px){
        width:calc(33.33333% - 2rem);
      }
      @media screen and (min-width: 1024px){
        width:240px;
        height:240px;
      }
      @media screen and (min-width: 1440px){
        width:300px;
        height:300px;
      }
      .feature_name {
        font-size: calc(1.25rem + .1vw);
        a {
          transition:color .5s ease;
        }
      }
      .feature_no {
        color: #fff;
        font-size: 2rem;
        font-family: 'Rera-06';
        border-radius: 100%;
        display: inline-block;
        padding:1rem 2rem;
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        @media screen and (min-width: 1280px){
          top: -1rem;
        }
      }
    }
    .list_item:nth-of-type(odd) {
      background-image:url(/wp-content/themes/original_theme_honin/assets/img/bg_details_odd.png) ;
      .feature_no {
        background: #CEC6FB;
      }
      .feature_name a:hover {
        color:#CEC6FB;
      }
    }
    .list_item:nth-of-type(even) {
      background-image:url(/wp-content/themes/original_theme_honin/assets/img/bg_details_even.png) ;
      .feature_no {
        background: #FFC4CC;
      }
      .feature_name a:hover {
        color:#FFC4CC;
      }
    }
    /*.list_item {
      margin:3.5rem 2rem 2rem;
      text-align: center;
      padding:0;
      width: calc(100% - 8px - .5rem);
      color: #333;
      position: relative;
      background: #fff;
      border: 2px solid #333;
      border-top: 3rem solid #333;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      @media screen and (min-width: 768px){
        width:calc(50% - 4px - 4rem);
      }
      @media screen and (min-width: 1280px){
        width:calc(33.33333% - 4px - 4rem);
      }
      @media screen and (min-width: 1600px){
        width:calc(25% - 4px - 4rem);
      }
      &::before {
        content: "";
        width: calc(100% + 1rem);
        height: calc(100% + 3.75rem);
        border: solid 1px #333;
        position: absolute;
        top: -3.5rem;
        left: -.6rem;
        border-radius: 6px;
        pointer-events: none;
      }
    }
    .feature_name {
      font-size: calc(1.25rem + .1vw);
      padding: 0 1rem 1rem;
    }
    .feature_no {
      color: #fff;
      font-size: 1.5rem;
      font-family: 'Rera-06';
      border-radius: 100%;
      position: absolute;
      top: -5rem;
      left: 50%;
      transform: translateX(-50%);
      display: inline-block;
      padding:1rem 1.75rem 0;
      aspect-ratio: 1 / 1;
      @media screen and (min-width: 1280px){
        font-size: 2rem;
      }
    }
    .list_item:nth-of-type(odd) {
      color: #17B2B8;
      border-color: #CEC6FB;
      .feature_no,.feature_name {
        background: #CEC6FB;
      }
      &::before {
        border-color:#CEC6FB;
        transform: rotate(4deg);
      }
    }
    .list_item:nth-of-type(even) {
      color: #F51F4D;
      border-color: #FFC4CC;
      .feature_no,.feature_name {
        background: #FFC4CC;
      }
      &::before {
        border-color:#FFC4CC;
        transform: rotate(-4deg);
      }
    }
    .feature_desc {
      padding: 1rem;
      min-height: 200px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-radius: 4px 4px 0 0;
    }
    .img_wrap {
      padding-bottom: .5rem;
    }
    .btn_wrapper {
      text-align: center;
    }
    .txt {
      word-break: break-all;
    }
    a{
      text-decoration: underline;
      transition: color .25s ease;
    }
    a:hover{
      color: #F65481;
    }
  }*/
}