@import url('./common.css');

/* home.css固有のスタイル */


/* homeページのメインコンテンツ */

#about{
.wrapper{
  .title{
        margin-top: calc(220 / 1363 * 100%);
                            &:after {
                        content: "";
                        display: block;
                        width: 80px;
                        height: 2px;
                        background-color: var(--gold);
                        margin: calc(70 / 1363 * 100%) auto;
                        @media screen and (min-width: 769px) {
                        height: 4px;
                        }
                    }
                  }
  .text{
      font-size:clamp(16px, 0.4vw + 14.48px, 20px);
      font-weight: 400;
      line-height: 2;
    margin: 0 auto;
    margin-bottom:calc(80 / 1363 * 100%);
    }
    .title-sub{
      font-size:clamp(24px, 0.81vw + 20.96px, 32px);
      font-weight: 700;
      line-height: 1.4;
        margin-bottom:calc(80 / 1363 * 100%);
        border-top: 6px solid var(--gold-sub);
        border-bottom: 4px solid var(--gold-sub);
        position: relative;
        padding: calc(40 / 1363 * 100%) 0;
        @media screen and (min-width: 769px) {
        line-height: 1.0;
        }
        span{
          font-size:clamp(18px, 0.61vw + 15.72px, 24px);
        }
        &::before{
          content: "";
          display: block;
          width:100%;
          position: absolute;
          top: 0;
          height:  1px;
          background-color: var(--gold-sub);
          margin: calc(10 / 1363 * 100%) auto 0;
        }
    }
    .title-common{
      font-size:clamp(20px, 1.01vw + 16.2px, 30px);
      color: var(--white);
      background-color: var(--black-sub);
      display: flex;
       justify-content: center;
      align-items: center;
      height: 67px;
      line-height: 1;
      overflow: clip;
       margin-bottom: calc(90 / 1363 * 100%);
        @media screen and (min-width: 641px) {
    justify-content: space-between;
        }
      @media screen and (min-width: 769px) {
      justify-content: space-between;
      overflow: hidden;
      }
    
      &::before{
        content:url(../img/ill-title-sc.svg);
        height: 68px;
        display: block;
      }
      &::after{
        content:url(../img/ill-title-sc.svg);
        height: 68px;
        display: block;
        transform: scaleX(-1);
      }
      h3{
        white-space: nowrap;
        @media screen and (min-width: 769px) {
          white-space: normal;
        }
      }
      span{
        font-size:clamp(16px, 0.4vw + 14.48px, 20px);
        display: block;
        line-height: 1.2;
        @media screen and (min-width: 769px) {
          display: inline-block;
        }
      }
    }
    .inner-sub{
      max-width: 100%;
      margin: 0 auto;
      padding-bottom: calc(40 / 1363 * 100%);
      @media screen and (min-width: 769px) {
    max-width: calc(753 / 822 * 100%);
      }
    }
   .img-right{
    text-align: right;
        z-index: -1;
    img{
    width: calc(712 / 1363 * 100%);
   transform: translateX(3.1rem); /* margin-rightの代わり */
   }
  }
  .schedule{
  
  .img-schedule-02,
  .img-schedule-03{
    max-width:100%;
    @media screen and (min-width: 769px) {
      max-width: calc(600 / 822 * 100%);
    }
  }
 
  }
  .culture{
    margin-top: calc(60 / 1363 * 100%);
    .culture-people{
      .title-lead{
        border-left: 5px solid var(--gold);
        padding: calc(15 / 1363 * 100%) 0  calc(15 / 1363 * 100%) calc(40 / 1363 * 100%);
        text-align: left;
        color: var(--gold);
        font-size: clamp(16px, 0.61vw + 13.72px, 22px);
      }
      .title-people{
        border-left: 5px solid var(--black-sub);
        padding: calc(20 / 1363 * 100%) 0  calc(20 / 1363 * 100%) calc(40 / 1363 * 100%);
        text-align: left;
        font-size: clamp(20px, 0.81vw + 16.96px, 28px);
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: calc(20 / 1363 * 100%);
        span{
          font-size: clamp(16px, 0.61vw + 13.72px, 20px);
        }
      }
      .text{
        padding-left: calc(50 / 1363 * 100%);
      }
    }
  }
  .after{
    .img-after-01{
      max-width: 100%;
      @media screen and (min-width: 769px) {
        max-width: calc(614 / 822 * 100%);
      }
    }
    .img-after-02{
     max-width: 100%;
     margin-top: calc(80 / 1363 * 100%);
      @media screen and (min-width: 769px) {
      }
    }
  }
  .food{
    margin-top: calc(60 / 1363 * 100%);
  }
  .castle{
    margin-top: calc(50 / 1363 * 100%);
    .img-castle-01{
           max-width: 100%;
      @media screen and (min-width: 769px) {

           max-width: calc(600 / 822 * 100%);
      }
    }
  }
}
}