@charset "UTF-8";
/*--------------------------------------------
TITLES
---------------------------------------------*/
#titles{
  position: relative;
  font-weight: 400;
  overflow: hidden;
  z-index: 0;
  picture{
    position: absolute;
    inset: 0;
    z-index: -1;
    img{
      opacity: .8;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  h1{
    color:var(--green);
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    letter-spacing: 0.05em;
  }
  p{
    letter-spacing: 0.02em;
    font-weight: 500;
    color:var(--base02);
    em{
      font-weight: 800;
      color:var(--orange);
    }
  }
  ul{
    overflow: hidden;
  }
  .tel{
    display: block;
    align-content: center;
    position: relative;
    &:before{
      content:"";
      display: block;
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      font-size: 0;
      width: auto;
      aspect-ratio: 1;
      filter:var(--filterDarkGreen);
      background : url( "../images/ui/icon/tel02.svg" ) center / contain no-repeat;
    }
    > span{
      display: block;
      text-box: trim-both cap alphabetic;
      &:nth-of-type(1){
        color:var(--base02);
        font-weight: 700;
      }
      &:nth-of-type(2){
        color:var(--darkGreen);
        font-weight: 700;
        letter-spacing: 0.05em;
      }
      &:nth-of-type(3){
        color:var(--base02);
      }
    }
  }
  .line{
    display: block;
    align-content: center;
    position: relative;
    &:before , &:after{
      content:"";
      display: block;
      position: absolute;
      font-size: 0;
      top: 50%;
      translate: 0 -50%;
      width: auto;
      aspect-ratio: 1;
    }
    &:before{
      left: 0;
      background : url( "../images/ui/sns/line.svg" ) center / contain no-repeat;
    }
    &:after{
      background : url( "../images/ui/arrow/right02.svg" ) center / contain no-repeat;
      filter:var(--filterBase02);
    }
    > span{
      display: block;
      color:var(--base02);
      font-weight: 700;
    }
  }
  @media screen and ( width <= 768px ){
    height : calc( 440 * var(--remBase ) );
    padding-top : calc( 24 * var(--remBase ) );
    picture{
      img{
        object-position: right center;
        opacity: .25;
      }
    }
    h1{
      text-shadow: calc( 2 * var(--remBase) ) calc( 2 * var(--remBase) ) calc( 10 * var(--remBase) ) color-mix( in srgb , white 95% , transparent ) ,calc( -2 * var(--remBase) ) calc( 2 * var(--remBase) ) calc( 10 * var(--remBase) ) color-mix( in srgb , white 95% , transparent ) ,calc( 2 * var(--remBase) ) calc( -2 * var(--remBase) ) calc( 10 * var(--remBase) ) color-mix( in srgb , white 95% , transparent ) , calc( -2 * var(--remBase) ) calc( -2 * var(--remBase) ) calc( 10 * var(--remBase) ) color-mix( in srgb , white 95% , transparent );
      font-size: calc( 40 * var(--remBase ) );;
      line-height: 1.4;
      padding-inline : calc( 16 * var(--contentBase ) );
    }
    p{
      margin-top : calc( 12 * var(--remBase ) );
      font-size: calc( 14 * var(--remBase ) );;
      line-height: calc( 20 / 14 );;
      text-shadow: calc( 2 * var(--remBase) ) calc( 2 * var(--remBase) ) calc( 10 * var(--remBase) ) color-mix( in srgb , white 95% , transparent ) ,calc( -2 * var(--remBase) ) calc( 2 * var(--remBase) ) calc( 10 * var(--remBase) ) color-mix( in srgb , white 95% , transparent ) ,calc( 2 * var(--remBase) ) calc( -2 * var(--remBase) ) calc( 10 * var(--remBase) ) color-mix( in srgb , white 95% , transparent ) , calc( -2 * var(--remBase) ) calc( -2 * var(--remBase) ) calc( 10 * var(--remBase) ) color-mix( in srgb , white 95% , transparent );
      padding-inline : calc( 16 * var(--contentBase ) );
    }
    ul{
      margin-top : calc( 16 * var(--remBase ) );
      padding-inline : calc( 16 * var(--contentBase ) );
      li + li{
        margin-top : calc( 12 * var(--remBase ) );
      }
      a{
        filter: drop-shadow( calc( 2 * var(--remBase) ) calc( 2 * var(--remBase) ) 0 color-mix( in srgb , black 12.5% , transparent ) );
        width: 100%;
        border-radius : calc( 16 * var(--remBase ) );
        background-color: var(--ivory);
        overflow: hidden;
      }
    }
    .tel{
      padding-left : calc( 80 * 100% / 326 );
      height : calc( 64 * var(--remBase ) );
      &:before{
        left : calc( 26 * 100% / 326 );
        height : calc( 32 * var(--remBase ) );
      }
      > span{
        &:nth-of-type(1){
          font-size : calc( 12 * var(--remBase ) );
        }
        &:nth-of-type(2){
          font-size : calc( 28 * var(--remBase ) );
          margin-top : calc( 8 * var(--remBase ) );
        }
        &:nth-of-type(3){
          font-size : calc( 12 * var(--remBase ) );
          margin-top : calc( 4 * var(--remBase ) );
        }
      }
    }
    .line{
      padding-left : calc( 80 * 100% / 326 );
      height : calc( 64 * var(--remBase ) );
      &:before{
        left : calc( 24 * 100% / 326 );
        height : calc( 36 * var(--remBase ) );
      }
      &:after{
        right : calc( 12 * 100% / 326 );
        height : calc( 24 * var(--remBase ) );
      }
      > span{
        &:nth-of-type(1){
          font-size : calc( 14 * var(--remBase ) );
        }
        &:nth-of-type(2){
          margin-top : calc( 8 * var(--remBase ) );
          font-size : calc( 14 * var(--remBase ) );
        }
      }
    }
  }
  @media print,screen and ( width > 768px ){
    height : calc( 440 * var(--remBase ) );
    padding-top : calc( 32 * var(--remBase ) );
    display: grid;
    grid-template-rows: row;
    grid-template-rows: 1fr auto auto 1fr auto;

    picture{
      img{
        object-position: center;
      }
    }
    h1{
      font-size: calc( 60 * var(--remBase ) );;
      line-height: calc( 82 / 60 );;
      grid-row: 2;
    }
    p{
      margin-top : calc( 16 * var(--remBase ) );
      font-size: calc( 17 * var(--remBase ) );;
      line-height: calc( 28 / 17 );;
      grid-row: 3;
    }
    ul{
      grid-row: 5;
      background-color: var(--ivory);
      width : calc( 770 * var(--contentBase ) );
      margin-inline : auto;
      border-radius : calc( 14 * var(--remBase ) ) calc( 14 * var(--remBase ) ) 0 0;
      height : calc( 100 * var(--remBase ) );
      padding-inline : calc( 25 * var(--contentBase ) );
      display: grid;
      align-items: center;
      grid-template-columns: calc( 310 * 100% / 720 ) calc( 354 * 100% / 720 );
      justify-content: space-between;
      position: relative;
      box-shadow: 0 calc( 6 * var(--remBase) ) calc( 20 * var(--remBase) ) color-mix( in srgb , black 4% , transparent );
      &:before{
        content:"";
        display: block;
        position: absolute;
        font-size: 0;
        top: 50%;
        translate: 0 -50%;
        width: 1px;
        left : calc( 362 * 100% / 770 );
        height : calc( 56 * var(--remBase ) );
        background-color: #C9C7C0;
      }
    }
    .tel{
      padding-left : calc( 60 * 100% / 310 );
      &:before{
        left : 0;
        height : calc( 42 * var(--remBase ) );
      }
      > span{
        &:nth-of-type(1){
          font-size : calc( 14 * var(--remBase ) );
        }
        &:nth-of-type(2){
          font-size : calc( 29 * var(--remBase ) );
          margin-top : calc( 8 * var(--remBase ) );
        }
        &:nth-of-type(3){
          font-size : calc( 13 * var(--remBase ) );
          margin-top : calc( 8 * var(--remBase ) );
        }
      }
    }
    .line{
      padding-left : calc( 65 * 100% / 354 );
      &:before{
        height : calc( 50 * var(--remBase ) );
      }
      &:after{
        right: 0;
        height : calc( 25 * var(--remBase ) );
      }
      > span{
        &:nth-of-type(1){
          font-size : calc( 14 * var(--remBase ) );
        }
        &:nth-of-type(2){
          margin-top : calc( 8 * var(--remBase ) );
          font-size : calc( 15 * var(--remBase ) );
        }
      }
    }
  }
}