/*
Theme Name: iDesign
Theme URI:
Description:  
Author: 
Author URI: 
Version: 1.0
*/
h1, h2, h3, h4, h5{
  color: var(--font-color-heading);
  margin: 0 0 60px;
  padding: 0;
  text-align: center;
  font-weight: 600;
  @media screen and (max-width: 767px){
    margin: 0 0 40px;
  }
}

/* TOPページ */
#top{
  ul{
    list-style: none;
    margin:0;
    padding: 0;
  }
  h2:not(.title){
    font-size: 5.8rem;
    line-height: 1.2;
    span{
      font-size: 1.8rem;
      display: block;
    }
    @media screen and (max-width: 767px){
      font-size: 4.4rem;
      span{
        font-size: 1.2rem;
      }
    }
  }
  section{
    padding: 80px 0;
    @media screen and (max-width: 767px){
      padding: 40px 0 40px;
    }
  }
  .slider{
    position: relative;
    .swiper-pagination{
      bottom: -40px;
    }
    .slider-catch{
      position: absolute;
      bottom: 80px;
      left: 5%;
      z-index: 1;
      span{
        /*background: #fff;*/
        font-weight: 600;
        color:#fff;
      }
      .slider-catch_main{
        font-size: 4.0rem;
        margin-bottom: 10px;
      }
      .slider-catch_sub{
        font-size: 2.0rem;
      }
      @media screen and (max-width: 767px){
        bottom: 40px;
        .slider-catch_main{
          font-size: 2.3rem;
          line-height: 1.6;
        }
        .slider-catch_sub{
          font-size: 1.8rem;
        }
      }
    }
  }
  .secNews{
    background:var(--bg-highlight);
    padding: 20px 0;
    .newsList{
      display: flex;
      align-items: center;
      gap: 40px;
      .newsList__head{
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        gap: 5px;
        line-height: 1;
        background: var(--main-color);
        color: #fff;
        padding: 8px 10px;
        max-width: 130px;
        border-radius: 5px;
        h2{
          font-size: 1.4rem;
          font-weight: 400;    
          margin: 0;
          color: #FFFFFF;
        }
      }
      .newsList__body{
        flex: 1;
      }
      ul{
        li{
          display: flex;
          gap: 20px;
          .post-title{
            font-weight: 600;
          }
        }
        @media screen and (max-width: 767px){
          width: 100%;
          li{
            padding: 10px 10px;
            a{
              flex-direction: column;
            }
          }
        }
      }
      .list-btn{
        a{
          border: 1px solid var(--sub-color01);
          padding: 5px 20px;
          display: block;
          text-align: center;
        }
      }
      @media screen and (max-width: 767px){
        gap: 10px;
        flex-wrap: wrap;
        .newsList__head{
          padding: 3px 5px;
          flex-shrink: 0;
          h2{
            font-size: 1.0rem;            
          }
        }
        .newsList__body{
          li{
            flex-direction: column;
            gap: 0;
            align-items: flex-start;
            padding: 0 0;
            .post-date time{
              font-size: 1.0rem;
            }
            .post-title{
              font-size: 1.2rem;
            }
          }
        }
        .list-btn{
          width: 100%;
          font-size: 1.3rem;
        }
      }
    }
  }
  .secRiyu{
    h2.title{
      text-align: center;
      span{
        font-size: 3.8rem;
        background: linear-gradient(180deg, #FFFFFF 94%, #ea851b 10%);
        /*background: linear-gradient(180deg, #FFFFFF 55%, #FFFF0080 11%);*/
        padding: 0 10px;
      }
    }
    .riyuList{
      margin: 0 0 60px;
      display: flex;
      justify-content: center;
      gap: 20px;
      li{
        width: calc(100% / 5);
        text-align: center;
        img{
          margin-bottom: 10px;
        }
        p{
          font-weight: 600;
          font-size: 1.8rem;
        }
      }
    }
    .button-wrapper{
      display: flex;
      gap: 60px;
      justify-content: center;
      a{
        margin:0;
      }
    }
    @media screen and (max-width: 767px){
      h2.title{
        span{
          font-size: 2.6rem;
        }
      }
      .riyuList{
        flex-direction: column;
        gap: 20px;
        li{
          width: 80%;
          margin: 0 auto;
          display: flex;
          gap: 20px;
          align-items: center;
          img{
            width: 60px;
          }
        }
      }
      .button-wrapper{
        flex-direction: column;
        gap: 20px;
        align-items: center;
      }
    }
  }
  .secInstagram{
    background: var(--bg-highlight);
    .carousel{
      margin-bottom: 60px;
    }
    .button-wrapper img{
      margin-bottom: 20px;
    }
    @media screen and (max-width: 767px){
      .carousel{
        margin-bottom: 40px;
      }
      .button-wrapper img{
        width: 100px;
        margin-bottom: 10px;
      }
    }
  }
  .secOrder{
    .orderList{
      display: flex;
      gap: 40px 60px;
      flex-wrap: wrap;
      li{
        width: calc((100% - 60px) / 2);
        img{
          display: block;
          margin:0 auto 10px;
        }
        h3{
          margin-bottom: 15px;
          font-size: 2.5rem;
          text-align: left;
          span{
            position: relative;
            color: var(--sub-color01);
            &::after{
              content: '';
              width: 100%;
              height: 1px;
              background-color: var(--sub-color01);
              position: absolute;
              left: 0;
              bottom: -5px;
            }
          }
        }
      }
      @media screen and (max-width: 767px){
        gap: 20px;
        li{
          width: 100%;
          h3{
            font-size: 1.8rem;
            span{
              border-bottom: 1px solid var(--sub-color01);
              &::after{
                content: none;
              }
            }
          }
        }
      }
    }
  }
  .secFlow{
    .flowList{
      display: flex;
      gap: 20px 40px;
      margin-bottom: 60px;
      li{
        position: relative;
        width: calc((100% - 100px) / 6);
        &::after{
          font-family: 'Material Icons';
          content: '\e5df';
          position: absolute;
          font-size: 6.0rem;
          right: -50px;
          top: 30px;
          line-height: 1;
        }
        img{
          margin-bottom: 10px;
        }
        p{
          line-height: 1.2;
          font-weight: 600;
          text-align: center;
          font-size: 1.8rem;
        }
        &:last-child{
          &::after{
            content: none;
          }
        }
      }
      @media screen and (max-width: 767px){
        flex-direction: column;
        gap: 20px;
        li{
          width: 80%;
          margin: 0 auto;
          display: flex;
          gap: 20px;
          align-items: center;
          justify-content: flex-start;
          img{
            width: 60px;
          }
          &::after{
            content: '\e5c5';
            font-size: 4.0rem;
            right: 50%;
            transform: translateX(50%);
            top: auto;
            bottom: -20px;
          }
        }
      }
    }
  }
  .secAbout{
    background: url('img/top/about_bg.png') no-repeat;
    background-size: 100%;
    background-position: top center;
    h2{
      color: #fff;
    }
    .container{
      background: #fff;
      padding: 60px 60px;
      @media screen and (max-width: 767px){
        padding: 0 15px;
      }
    }
    .tab{
      .tabSwitch{
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 40px;
        li{
          padding: 5px 10px;
          border: 1px solid var(--font-color-text);
          cursor: pointer;
          font-weight: 500;
          font-size: 1.8rem;
          text-align: center;
          width: 180px;
          &.active{
            background: var(--font-color-text);
            color: #fff;
          }
        }
        @media screen and (max-width: 767px){
          gap: 10px;
          li{
            font-size: 1.4rem;
            width: calc((100% - 40px) / 4);
          }
        }
      }
      .tabContents{
        .tabContent{
          display: none;
          &.active{
            display: block;
          }
          .content-wrapper{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .content-img{
              width: calc(50% + 30px);
            }
            .content-text{
              position: relative;
              width: calc(50% + 120px);
              background: var(--bg-highlight);
              padding: 60px;
              margin: 60px 0 0 -60px;
              p{
                font-size: 2.8rem;
                margin-bottom: 100px;
              }
              .button-wrapper{
                .button{
                  font-family: var(--font-family-no);
                  font-size: 1.8rem;
                  margin: 0 0 0 auto;
                  text-align: left;
                }
              }
              .content-no{
                font-family: var(--font-family-no);
                font-size: 13.0rem;
                font-weight: 600;
                color: var(--sub-color01);
                position: absolute;
                top:-65px;
                right:0;
                line-height: 1;
              }
            }
          }
        }
      }
    }
    @media screen and (max-width: 767px){
      background-size: 150%;
      .container{
        padding: 20px 15px;
        .tabSwitch{
          overflow-x: scroll;
          justify-content: flex-start;
          li{
            flex-shrink: 0;
            white-space: nowrap;
            width: auto;
            padding: 5px 20px;
          }
        }
        .tabContents{
          .tabContent{
            .content-wrapper{
              flex-direction: column;
              .content-img{
                width: 100%;
              }
              .content-text{
                width: 100%;
                margin: 0;
                padding: 20px;
                p{
                  font-size: 1.8rem;
                  margin-bottom: 20px;
                }
                .button-wrapper{
                  .button{
                    font-size: 1.4rem;
                    margin: 0;
                  }
                }
                .content-no{
                  font-size: 10.0rem;
                  top: -30px;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* コンテンツページ */
.content{
  .page-title{
    position: relative;
    height: 500px;
    padding: 0;
    &::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('img/title_bg.png');
      background-repeat: no-repeat;
      background-size: cover;  
      filter: opacity(0.6);
    }
    .container{
      display: flex;
      align-items: flex-end;
      gap: 40px;
      height: 100%;
      max-width: 90%;
    }
    .title-en{
      font-family: var(--font-family-en);
      font-size: 11.0rem;
      line-height: 0.55;
    }
    .title-ja{
      font-size: 1.8rem;
      line-height: 1;
      margin:0;
    }
    @media screen and (max-width: 767px){
      height: 250px;
      .container{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 10px;
      }
      .title-en{
        font-size: 5.0rem;
        line-height: 0.75;
      }
      .title-ja{
        font-size: 1.4rem;
      }
    }
  }
  h2{
    font-size: 4.2rem;
    position: relative;
    padding-bottom: 20px;
    &::after{
      content: '';
      width: 80px;
      height: 3px;
      background-color: var(--main-color);
      position: absolute;
      left: calc(50% - 40px);
      bottom: 0;
    }
    @media screen and (max-width: 767px){
      font-size: 2.6rem;
    }
  }
}

/* オーダーカーテンとは */
#ordercurtain{
  .page-title{
    &::before{
      background-image: url('img/ordercurtain/title_bg.png');
    }
  }
  .secCurtainAbout{
    .flex{
      gap: 40px;
      margin-bottom: 60px;
      h3{
        text-align: left;
        font-size: 2.6rem;
        margin-bottom: 20px;
      }
      img{
        width: 50%;
      }
      @media screen and (max-width: 767px){
        flex-direction: column;
        h3{
          text-align: center;
        }
        img{
          width: 100%;
        }
      }
    } 
    .iconList{
      list-style: none;
      padding: 0;
      margin: 0 0 60px;
      display: flex;
      gap: 40px;
      align-items: start;
      li{
        width: calc( 50% - 20px);
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        text-align: center;
        img{
          width: auto;
          height: 60px;
        }
        .iconList-title{
          color: var(--main-color);
          font-weight: bold;
          font-size: 2.2rem;
        }
      }
      @media screen and (max-width: 767px){
        flex-direction: column;
        li{
          width: 100%;
        }
      }
    }
    .table-wrapper{
      table{
        th, td{
          text-align: center;
          padding: 10px 12px;
          border: 1px solid var(--font-color-text);
        }
        th{
          background: #1f8ac9;
          color: #fff;
          font-weight: 400;
        }
        td{
          &.color{
            background-color: #e6f4f1;
          }
        }
      }
    }
    @media screen and (max-width: 900px){
      .table-wrapper{
        overflow-x: scroll;
        table{
          min-width: 900px;
        }
      }
    }
  }
}

/* 壁紙（クロス）について */
#wallpaper{
  .page-title{
    &::before{
      background-image: url('img/wallpaper/title_bg.png');
    }
  }
  .flex{
    gap: 20px 60px;
    img{
      width: 30%;
    }
    @media screen and (max-width: 767px){
      img{
        width: 100%;
      }
    }
  }
  .secType{
    .typeList{
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      margin-top: 60px;
      li{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc((100% - 80px) / 3);
        gap: 20px;
        .typeList-title{
          font-size: 2.2rem;
          font-weight: 600;
        }
        img{
          border-radius: 20px;
        }
      }
    }
    @media screen and (max-width: 767px){
      .typeList{
        flex-direction: column;
        li{
          width: 100%;
        }
      }
    }
  }
}

/* 納品までの流れ */
#flow{
  .page-title{
    &::before{
      background-image: url('img/flow/title_bg.png');
    }
  }
  .flowList{
    margin: 0;
    display: flex;
    gap: 48px 30px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    &::after{
      content: '';
      border-left: 1px dashed #626262;
      position: absolute;
      left: 34px;
      height: 95%;
      z-index: 0;
    }
    @media screen and (max-width: 767px){
      gap: 20px 20px;
      &::after{
        left: 20px;
      }
    }
    dt{
      margin: 0;
      padding: 0;
      width: 68px;
      height: 160px;
      background: #B5B5B5;
      color: #fff;
      font-family: var(--font-family-no);
      font-size: 2.4rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      &::before{
        content: "";
        position: absolute;
        bottom: -15px;
        right: 0;
        width: 68px;
        height: 15px;
        border: 15px solid transparent;
        border-right: 34px solid #fff;
      }
      &::after{
        content: "";
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 68px;
        height: 15px;
        border: 15px solid transparent;
        border-left: 34px solid #fff;
      }
      &:last-of-type::before, &:last-of-type::after{
        content: none;
      }
      @media screen and (max-width: 767px){
        width: 40px;
        height: 150px;
        font-size: 1.8rem;
        &::before{
          width: 40px;
          border-right: 20px solid #fff;
        }
        &::after{
          width: 40px;
          border-left: 20px solid #fff;
        }
      }
    }
    dd{
      margin: 0;
      padding: 0;
      width: calc(100% - 98px);
      .flow__title{
        font-size: 2.0rem;
        font-weight: bold;
        margin-bottom: 17px;
      }
      @media screen and (max-width: 767px){
        width: calc(100% - 60px);
        .flow__title{
          font-size: 1.8rem;
          margin-bottom: 10px;
        }
      }
    }
  }
}

/* 選ばれる理由 */
#reason{
  .page-title{
    &::before{
      background-image: url('img/reason/title_bg.png');
    }
  }
  .reason-list{
    .reason-list__item{
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 100px;
      .reason-list__item__number{
        font-family: var(--font-family-no);
        font-size: 14.0rem;
        font-weight: 600;
        color: var(--sub-color01);
        position: absolute;
        right: -60px;
        top: -80px;
        z-index: 3;
        line-height: 1;
        opacity: 0.8;
      }
      .reason-list__item__img{
        width: 35%;
        position: relative;
        z-index: 2;
      }
      .reason-list__item__text{
        min-height: 400px;
        padding: 40px 100px 40px 40px;
        width: 65%;
        margin-right: -60px;
        background: var(--bg-highlight);
        h3{
          font-size: 2.8rem;
          font-weight: 600;
          margin-bottom: 20px;
          text-align: left;
          position: relative;
          padding-left: 20px;
          &::before{
            content: '';
            width: 8px;
            height: 80%;
            background: var(--main-color);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        p{
          font-size: 1.8rem;
          line-height: 1.8;
          .text-yellow{
            background: linear-gradient(180deg, #FFFFFF 55%, #ffeccc 11%);
          }
        }
        img{
          margin-bottom: 20px;
        }
      }
      &.reverse{
        flex-direction: row-reverse;
        .reason-list__item__text{
          margin-left: -60px;
          margin-right: 0;
          padding: 40px 40px 40px 100px;
        }
        .reason-list__item__number{
          left: -60px;
          right: auto;
        }
      }
    }
    @media screen and (max-width: 767px){ 
      margin-bottom: 60px;
      .reason-list__item{
        flex-direction: column-reverse;
        &.reverse{
          flex-direction: column-reverse;
          .reason-list__item__text{
            width: 100%;
            margin-left: 0;
            padding: 20px 20px 20px 40px;
            h3{
              font-size: 2.2rem;
            }
          }
        }
        .reason-list__item__text{
          width: 100%;
          margin-right: 0;
          margin-top: 20px;
          padding: 20px 20px 20px 40px;
          min-height: auto;
          h3{
            font-size: 2.2rem;
          }
          p{
            font-size: 1.6rem;
          }
        }
        .reason-list__item__img{
          width: 100%;
          .reason-list__item__number{
            font-size: 8.0rem;
            top: -40px;
            left: 0;
          }
        }
      }
    }
  }
}
/* 会社概要 */
#company{
  .page-title{
    &::before{
      background-image: url('img/company/title_bg.png');
    }
  }
  h2.rinen-title{
    margin: 40px auto;
    border: 1px solid var(--font-color-text);
    padding-bottom: 0;
    background:#f3faff;
    &::after{
      content: none;
    }
    @media screen and (max-width: 767px){
      margin: 20px auto;
    }
  }
  .rinen{
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 60px;
    @media screen and (max-width: 767px){
      font-size: 1.8rem;
      margin-bottom: 40px;
    }
  }
  .flex{
    gap: 60px;
    .president-textarea{
      .president-title{
        font-size: 2.8rem;
        font-weight: 600;
        margin-bottom: 30px;
      }
      .presitent-text{
        margin-bottom: 40px;
      }
      .president-name{
        font-size: 2.0rem;
        font-weight: 600;
        text-align: right;
        span{
          font-size: 1.4rem;
          margin-right: 10px;
        }
      }
      @media screen and (max-width: 767px){
        .president-title{
          font-size: 2.2rem;
        }
        .presitent-text{
          margin-bottom: 20px;
        }
      }
    }
  }
  table{
    width: 80%;
    margin: 0 auto;
    th{
      border-bottom: 2px solid var(--border-color);
      width: 30%;
      font-weight: 400;
    }
    td{
      border-bottom: 1px solid var(--border-color);
    }
    th, td{
      padding: 30px 60px;
    }
    @media screen and (max-width: 767px){
      width: 100%;
      th{
        width: 25%;
      }
      th, td{
        padding: 20px 10px;
      }
    }
  }
}

/* 採用情報 */
#recruit{
  .page-title{
    &::before{
      background-image: url('img/recruit/title_bg.png');
    }
  }

  .secSchedule{
    background: var(--bg-highlight);
    .flex{
      gap: 60px;
      background-color: #fff;
      padding: 60px;
      border-radius: 40px;
      margin-bottom: 60px;
      img{
        margin-bottom: 20px;  
      }
      .staff-name{
        margin-bottom: 20px;
      }
      .staff-message{
        font-size: 2.0rem;
        font-weight: 500;
      }
    }
    table.time-schedule{
      width:85%;
      margin: 0 auto;
      line-height: 1.8;
      letter-spacing: 0;
      th{
        padding: 25px 35px 25px 0;
        vertical-align: top;
        border-right: 1px dashed #626262;
        font-family: var(--font-family-no);
        width: 80px;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          background: var(--font-color-text);
          width: 12px;
          height: 12px;
          border-radius: 50%;
          top:33px;
          right: -6px;
        }
      }
      tr:nth-child(1) th::before{
        content: '';
        background: #FAFAFA;
        width: 1px;
        position: absolute;
        right: -1px;
        top: 0;
        height: 50%;
      }
      tr:nth-last-child(1) th::before{
        content: '';
        background: #FAFAFA;
        width: 1px;
        position: absolute;
        right: -1px;
        bottom: 0;
        height: 55%;
      }
      td{
        padding: 25px 0 25px 35px;
        font-size: 1.8rem;
        span{
          font-size: 1.4rem;
        }
      }
    }  
    @media screen and (max-width: 767px){
      .flex{
        padding: 40px;
        gap: 20px 40px;
        .staff-message{
          font-size: 1.6rem;
        }
        table.time-schedule{
          width: 100%;
          tr:nth-child(1) th::before{
            height: 19%;
          }
          tr:nth-last-child(1) th::before{
            height: 70%;
          }
          th{
            padding: 10px 20px 10px 0;
            width: 60px;
            &::after{
              top: 15px;
            }
          }
          td{
            padding: 10px 0 10px 20px;
            font-size: 1.6rem;
            span{
              font-size: 1.2rem;
            }
          }
        }
      }
    }
  }
  .secYoko{
    table{
      width: 100%;
      margin-bottom: 60px;
      tr{
        th{
          width: 20%;
          padding: 20px 30px;
          background-color: var(--bg-highlight);
          border: 1px solid var(--border-color);
        }
        td{
          padding: 20px 30px;
          border: 1px solid var(--border-color);
        }
      }
    }
    p{
      margin-bottom: 40px;
    }
    @media screen and (max-width: 767px){
      table{
        margin-bottom: 20px;
        tr{
          th{
            width: 100%;
            display: block;
          }
          td{
            width: 100%;
            display: block;
            border-top: none;
          }
        }
      }
      p{
        margin-bottom: 20px;
      }
    }
  }
  .secWork{
    background: url('img/recruit/work_bg.jpg') no-repeat center center / cover;
    .container{
      background: #fff;
      padding: 60px;
      border-radius: 40px;
    }
    p{
      margin-bottom: 40px;
    }
    details {
      margin-bottom: 1rem; /* 各アコーディオンの間隔 */
    }
    summary {
      font-weight: bold;
      cursor: pointer; /* クリック可能に見せる */
      padding: 20px 40px;
      background: var(--bg-highlight);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &::-webkit-details-marker {
        display: none; 
      }
      &::after {
        content: "\e5cf";
        font-family: 'Material Icons';
        transform: rotate(0deg);
        transition: transform 0.3s ease; 
      }
    }
    details[open] summary::after {
      transform: rotate(180deg);
    }
    details > div {
      padding: 60px;
      table{
        width: 100%;
        th{
          text-align: left;
          width: 20%;
          padding: 10px 20px;
        }
        td{
          padding: 10px 20px;
        }
      }
    }
    @media screen and (max-width: 767px){
      .container{
        padding: 40px 20px;
        width:calc(100% - 30px);
      }
      p{
        margin-bottom: 20px;
      }
      summary{  
        padding: 10px 20px;
      }
      details > div{
        font-size: 1.4rem;
        padding: 20px 20px;
        table{
          th{
            padding: 10px 0 0;
            text-align: left;
            width: 100%;
            display: block;
          }
          td{
            padding: 10px 0;
            width: 100%;
            display: block;
          }
        }
      }
    }
  }
}
/* ペット対応クロス */
#wallpaper_pet{
  .page-title{
    &::before{
      background-image: url('img/wallpaper_pet/title_bg.png');
    }
  }
  .text-c{
    p{
      margin-bottom: 60px;
    }
  }
  .secPoint{
    background-color: var(--bg-highlight);
    .flex{
      gap: 40px;
      flex-wrap: wrap;
      .point-box{
        width: calc((100% - 40px) / 2);
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        .point-titleArea{
          display: flex;
          gap: 40px;
          border-bottom: 1px solid var(--sub-color01);
          padding-bottom: 10px;
          margin-bottom: 20px;
          align-items: flex-end;
          .point-no{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--sub-color01);
            font-family: var(--font-family-no);
            line-height: 1;
            font-size: 1.9rem;
            span{
              font-size: 6.0rem;
              font-weight: 600;
              color: var(--sub-color03);
            }
          }
          .point-title{
            font-size: 3.3rem;
            font-weight: 600;
          }
        }
      }
    }
    @media screen and (max-width: 767px){
      .flex{
        gap: 20px;
        .point-box{
          width: 100%;
          padding: 20px;
          .point-titleArea{ 
            gap: 20px;
            justify-content: center;
            .point-no{
              font-size: 1.6rem;
              span{
                font-size: 4.0rem;
              }
            }
            .point-title{
              font-size: 2.6rem;
            }
          }
        }
      }
    }
  }
}

/* お問い合わせ */
#contactus{
  .page-title{
    &::before{
      background-image: url('img/contact/title_bg.png');
    }
  }
  .contact-mainText{
    font-size: 2.2rem;
    color: var(--main-color);
    margin-bottom: 60px;
    @media screen and (max-width: 767px){
      text-align: center;
      font-size: 1.8rem;
      margin-bottom: 40px;
    }
  }
  .contact-tel{
    border: 1px solid var(--border-color);
    padding: 40px 160px;
    text-align: center;
    margin-bottom: 80px;
    .contact-tel_textArea{
      text-align: left;
      display: inline-block;
      .tel-no{
        font-family: var(--font-family-no);
        color: var(--main-color);
        font-weight: 600;
        font-size: 6.0rem;
        line-height: 1.4;
      }
    }
    @media screen and (max-width: 767px){
      padding: 20px 20px;
      .contact-tel_textArea{
        .tel-no{
          font-size: 4.0rem;
        }
      }
    }
  }
  .contact-form{
    table{
      width: 100%;
      margin-bottom: 60px;
      th{
        width: 28%;
        font-weight: 400;
        text-align: left;
        padding: 20px 40px 20px 40px;
        p{
          display: flex;
          justify-content: space-between;
        }
        .require{
          font-size: 1.4rem;
          background: var(--font-color-text);
          color: #fff;
          padding: 3px 15px;
          border-radius: 5px;  
          margin-left: 10px;
        }
      }
      td{
        padding: 20px 20px;
        input[type="text"], input[type="tel"],  input[type="email"], textarea {
          border: none;
          background: var(--bg-highlight);
          border-radius: 5px;
          font-size: 1.8rem;
          padding: 10px 15px;
          width: 100%;
        }
      }
    }
    .button-wrapper{
      text-align: center;
      input[type="submit"]{
        background-color: var(--main-color);
        color: #fff;
        font-size: 1.8rem;
        font-weight: 600;
        padding: 10px 60px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        transition: 0.8s;
        &:hover{
          background-color: var(--sub-color01);
        }
      }
    }
    @media screen and (max-width: 767px){
      table{
        margin-bottom: 40px;
        th{
          width: 100%;
          display: block;
          padding: 10px 10px;
          .require{
            font-size: 1.2rem;
          }
        }
        td{
          width: 100%;
          padding: 0 10px 20px;
          display: block!important;
        }
      }
    } 
  }
}

/* お知らせ */
#news{
  .news-list{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 60px 40px;
    margin-bottom: 60px;
    @media screen and (max-width: 767px){
      gap: 20px;
    }
    .post-item{
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: calc(( 100% - 80px) / 3);
      .post-thumbnail{
        img{
          width: 100%;
          height: auto;
          aspect-ratio: 4 / 3;
          object-fit: cover;
          display: block;
        }
      }
      .post-content{
        .post-meta{
          display: flex;
          gap: 20px;
          align-items: center;
          margin-bottom: 10px;
          .post-date{
            color: var(--sub-color01);
            font-family: var(--font-family-no);
            line-height: 1;
            font-size: 1.4rem;
          }
          .post-category{
            font-size: 1.2rem;
            color: #fff;
            background-color: var(--sub-color01);
            border-radius: 5px;
            line-height: 1;
            padding: 5px 10px;
          }
        }
        h2{
          font-size: 2.2rem;
          padding: 0;
          margin: 0;
          text-align: left;
          &::after{
            content: none;
          }
        }
        
      }
      @media screen and (max-width: 767px){
        width: 100%;
        flex-direction: row;
        gap: 20px;
        .post-thumbnail{
          width: 30%;
        }
        .post-content{
          flex: 1;
          .post-meta{
            margin-bottom: 5px;
          }
          .post-meta{
            gap: 10px;
            margin-bottom: 5px;
            .post-date{
              font-size: 1.2rem;
            }
            .post-category{
              font-size: 1.0rem;
            }
          }
          h2{
            font-size: 1.4rem;
            line-height: 1.2;
          }
        }
      }
    }
  }
  .pagination{
    .page-numbers{
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;
      gap: 10px;
      li{
        font-weight: 600;
        color: #fff;
        line-height: 1;
        font-family: var(--font-family-no);
        background: var(--sub-color01);
        padding: 10px;
        font-size: 1.6rem;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 40px;
        min-height: 40px;
        &:has(.current){
          background-color: var(--main-color);
        }
        @media screen and (max-width: 767px){
          font-size: 1.4rem;
          min-width: 30px;
          min-height: 30px;
        }
      }  
    }
  }
}
#single{
  .entry-content{
    width: 80%;
    margin: 0 auto 80px;
    p{
      margin-bottom: 20px;
    }
    a{
      color: var(--main-color);
    }
    @media screen and (max-width: 767px){
      width: 100%;
      margin: 0 auto 40px;
    }
  }
  .post-navigation{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
    gap: 0;
    > div{
      width: 33%;
      a{
        color: var(--main-color);
        text-align: center;
        width: 100%;
        height: 100%;
        display: block;
        padding: 10px 0;
      }
      &.nav-list{
        border-right: 1px solid var(--border-color);
        border-left: 1px solid var(--border-color);
      }
    }
    @media screen and (max-width: 767px){
      padding :10px 0;
      > div{
        a{
          font-size: 1.2rem;
        }
      }
    }
  }
}