@charset "utf-8";
/*------------------------------------------------------------------------------
 ROOT（CSS変数を設定）
 -------------------------------------------------------------------------------*/
:root {
    --txt_color: #000;
    --txt_gray: #545454;/* post-date */
    --txt_gray-2: #8E8E8F;/* copy */
    --blue_green: #1FCABC;
    --blue_green-2: #D6F0EE;/* news-border */
    --gray-1: #E8E8E8;/* header-border */
    --gray-2: #D9D9D9;/* h2-border */
    --gray-3: #EFEFEF;/* bg-contents-box */
    --gray-4: #E0E0E0;/* img-border */
    --gray-5: #AAAAAA;/* btn-border /frame-border */
    --sans_serif_noto: "Noto Sans JP", sans-serif;
    --sans_serif_open: "Open Sans", sans-serif;
    --fs-1: clamp(1.2rem, 2.89vw, 1.3rem); /* min-txt */
    --fs-2: 1.5rem; /* p_small */
    --fs-3: 1.6rem; /* p */
    --fs-4: 2.0rem; /* h2 */
    --fs-5: clamp(2.0rem, 4.83vw, 2.4rem); /* h1 */
    --space-0: 10px;
    --space-1: 20px;
    --space-2: 30px;
    --space-3: 40px;
    --space-4: 60px;
    --space-5: 70px;
  }
/*------------------------------------------------------------------------------
 共通
 -------------------------------------------------------------------------------*/
 html{
    font-size: 62.5%;/* 1rem = 10px */
 }
 body{
    overflow-wrap: anywhere;
    margin: 0;
    font-family: var(--sans_serif_noto);
    color: var(--txt_color);
    letter-spacing: 0.02rem;
    font-weight: 400;
    line-height: 1.6;
    img{
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
}

@media print {
  body {
    display: none !important;
  }
}

/* 全要素に box-sizing を適用 */
 *,
 *::before,
 *::after {
 box-sizing: border-box;
 }

 /* SPのみ表示要素 */
 .sp{
    display: none;
 }
 /* PCのみ表示要素 */
 .pc{
    display: block;
 }

 .txt_bold{
  font-weight: 600;
 }
 .txt_small{
  font-size: var(--fs-2);
 }
 .txt_min{
  font-size: var(--fs-1);
 }
 .txt_underline{
  text-decoration: underline;
  text-underline-offset: 0.2rem;
 }
 .txt_red{
  color: red;
 }

 h1 , h2 , h3 , h4{
  font-weight: 600;
 }
 h2{
   font-size: var(--fs-4);
   padding-left: 18px;
   position: relative;
   margin-bottom: var(--space-2);
   line-height: 1.4;
   &::before{
      content: "";
      border-left: 6px solid var(--gray-2);
      height: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
   }
 }
 h3{
   font-size: var(--fs-4);
   position: relative;
   padding-left: 24px;
   margin-bottom: var(--space-0);
   &::before{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 16px;
    height: 16px;
    background-color: #000;
   }
 }
 /* セクション一番上が画像/frameで始まる場合使用 */
 h3.is-top-image{
  margin-bottom: var(--space-1);
 }

 a{
  text-decoration: none;
 }
 a.block-link{
   display: block;
   width: fit-content;
 }

 section{
   margin-bottom: var(--space-5);
   scroll-margin-top: 50px;
   p{
    font-size: var(--fs-3);
    line-height: 1.8;
    margin-bottom: var(--space-2);
   }
   ul{
    font-size: var(--fs-3);
    list-style: none;
    margin-bottom: var(--space-2);
   }
 }
 section > *:last-child{
  margin-bottom: 0;
 }

 .post-img{
   max-width: 480px;
   height: auto;
   margin-bottom: var(--space-2);
 }

 .btn{
    display: block;
    width: fit-content;
    text-align: center;
    font-size: var(--fs-3);
    text-decoration: none;
    color: var(--txt_color);
    border: 1px solid var(--gray-5);
    border-radius: 5px;
    padding: 20px 110px;
    margin: 0 auto;
    margin-bottom: var(--space-2);
 }
  @media all and (max-width:768px) {
    .post-img{
      max-width: 100%;
    }
    .btn{
      width: 100%;
      padding: 20px 0;
    }
    .sp{
      display: block;
    }
    .pc{
      display: none;
    }
      
  }
/*------------------------------------------------------------------------------
 header
 -------------------------------------------------------------------------------*/
 header{
    display: flex;
    align-items: center;
    position: sticky;
    width: 100%;
    height: 56px;
    border-bottom: 1px solid var(--gray-1);
    .h-logo{
        margin: 0 auto;
        width: 135px;
        height: 28px;
    }
 }

/*------------------------------------------------------------------------------
 main
 -------------------------------------------------------------------------------*/
 .post{
   max-width: 750px;
   margin: var(--space-2) auto 0;
 }
 .post-category{
   font-size: var(--fs-3);
   color: var(--blue_green);
   font-family: var(--sans_serif_open);
   letter-spacing: 0.12rem;
   margin-bottom: 4px;
 }
 .post-title{
   font-size: var(--fs-5);
   margin-bottom: var(--space-0);
 }
 .post-date{
   display: block;
   font-size: var(--fs-1);
   color: var(--txt_gray);
   margin-bottom: var(--space-2);
 }
 .post-thumb{
   margin-bottom: var(--space-3);
 }
 .news{
  font-size: var(--fs-1);
  line-height: 1.6;
  border: 4px solid var(--blue_green-2);
  border-radius: 16px;
  padding: 15px 20px;
  margin-bottom: var(--space-3);
  >p{
    color: var(--blue_green);
    margin-bottom: 6px;
  }
  ul{
    list-style: none;
    overflow-y: auto;
    max-height: 8em;
    scrollbar-width: none;
    li{
      font-weight: 500;
      border-bottom: 1px solid var(--gray-1);
      padding: 8px 0;
      &:first-of-type{
        padding-top: 0;
      }
      &:last-of-type{
        border-bottom: none;
      }
      a{
        color: var(--txt_color);
        text-underline-offset: 2px;
        text-decoration: underline;
      }
      time{
        color: var(--txt_gray-2);
      }
    }
  }
 }
 h3.h-contents{
  padding-left: 0;
  &::before{
    display: none;
  }
 }
 .contents-box{
   background-color: var(--gray-3);
   list-style-position: inside;
   margin-bottom: 70px;
   padding: 26px;
   li{
    font-size: var(--fs-3);
    margin-bottom: 10px;
    &:last-of-type{
      margin-bottom: 0;
    }
   }
   a{
    text-decoration: none;
    color: var(--txt_color);
   }
 }
 #lead{
   margin-bottom: var(--space-3);
 }

 .img_flex_wrapper{
   display: flex;
   flex-wrap: wrap;
   gap: 50px 30px;
   .img_flex_box{
     width: calc((100% - 30px) / 2);
     display: flex;
     flex-direction: column;
     div{
      margin-bottom: 10px;
     }
   }
   p{
    line-height: 1.5;
    &:last-of-type{
      margin-top: auto;
    }
   }
   img{
    border: 2px solid var(--gray-4);
    object-fit: cover;
   }
 }

 .frame{
   border: 1px solid var(--gray-5);
   border-radius: 5px;
   padding: 28px 22px;
   width: 100%;
   margin-bottom: var(--space-2);
   a{
    text-decoration: none;
    color: var(--txt_color);
   }
 }
 .frame > *:last-child{
  margin-bottom: 0;
 }

 .info-list {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1em;
    font-size: var(--fs-3);
    line-height: 1.8;
    margin-bottom: var(--space-2);
    dt {
        white-space: nowrap;
    }
    dd {
        margin: 0;
    }
 }

 .notes_list , .bullet_list , .circle_number_list{
  list-style: none;
  line-height: 1.8;
  margin-bottom: var(--space-2);
  li{
    position: relative;
    padding-left: 1em;
    &::after{
      content: "※";
      position: absolute;
      top: 0;
      left: 0;
      color: var(--txt_color);
    }
  }
 }

 .bullet_list{
  li::after{
    content: "・";
  }
 }

 .circle_number_list{
  li{
    padding-left: 1.2em;
    &::after{
      content: attr(data-counter);
    }
  }
 }

 @media all and (max-width:1000px) {
  .post{
    width: 90%;
  }
 }
 @media all and (max-width:768px) {
  .post{
    width: 88%;
  }
  .post-thumb{
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .news ul{
    max-height: 11em;
  }
  .img_flex_wrapper{
    gap: 40px 20px;
    .img_flex_box{
      width: calc((100% - 20px) / 2);
    }
    img{
      border: 1px solid var(--gray-4);
    }
  }
 }

/*------------------------------------------------------------------------------
 footer
 -------------------------------------------------------------------------------*/
 footer{
  text-align: center;
  padding-bottom: var(--space-0);
 }
 .sns_area{
   border-top: 1px solid var(--gray-1);
   border-bottom: 1px solid var(--gray-1);
   padding: var(--space-2);
   margin-bottom: var(--space-3);
   p{
    font-size: var(--fs-3);
    margin-bottom: 10px;
  }
  ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    li{
      width: fit-content;
      height: auto;
    }
  }
 }
 .f-logo{
   width: 150px;
   height: auto;
   margin: 0 auto var(--space-0);
 }
 .copy{
  color: var(--txt_gray-2);
  margin-bottom: var(--space-5);
 }

/*------------------------------------------------------------------------------
 余白調整
 -------------------------------------------------------------------------------*/
 /* 要素下 margin0 */
 .mg-bm-none{
  margin-bottom: 0;
 }
 /* 要素下 margin10 */
 .mg-bm--10{
  margin-bottom: 10px;
 }

/*------------------------------------------------------------------------------
 画像保護
 -------------------------------------------------------------------------------*/
img {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 user-select: none;
}