@charset "UTF-8";
/*--------------------------------------------
SYNMBOL TEXTS
---------------------------------------------*/
[data-before]:before{
  content:attr( data-before );
  white-space: pre;
}
[data-after]:after{
  content:attr( data-after );
  white-space: pre;
}
[data-before-sp]:before{
  @media screen and ( width <= 768px ){
    content:attr( data-before-sp );
    white-space: pre;
  }
}
[data-both]{
  &:before , &:after{
    content:attr( data-both );
    white-space: pre;
  }
}
@media screen and ( width <= 768px ){
  [data-after-sp]:after{
    content:attr( data-after-sp );
    white-space: pre;
  }
  [data-both-sp]{
    &:before , &:after{
      content:attr( data-both );
      white-space: pre;
    }
  }
}
@media print,screen and ( width > 768px ){
  [data-before-pc]:before{
    content:attr( data-before-pc );
    white-space: pre;
  }
  [data-after-pc]:after{
    content:attr( data-after-pc );
    white-space: pre;
  }
  [data-both-pc]{
    &:before , &:after{
      content:attr( data-both );
      white-space: pre;
    }
  }
}
[data-outline]{
  position: relative;
  z-index: 0;
  display: inline-block;
  &:before{
    content:attr(data-outline);
    position: absolute;
    inset: 0;
    z-index: -1;
    white-space: pre;
  }
}
/*--------------------------------------------
BR TO SPCE
---------------------------------------------*/
.sp-space{
  @media screen and ( width <= 768px ){
    &:after{
      content: " ";
    }
  }
  @media print,screen and ( width > 768px ){
    &:after{
      content: "\A";
      white-space: pre;
    }
  }
}
.pc-space{
  @media screen and ( width <= 768px ){
    &:after{
      content: "\A";
      white-space: pre;
    }
  }
  @media print,screen and ( width > 768px ){
    &:after{
      content: " ";
    }
  }
}
.sp-spaceEm{
  @media screen and ( width <= 768px ){
    &:after{
      content: "　";
    }
  }
  @media print,screen and ( width > 768px ){
    &:after{
      content: "\A";
      white-space: pre;
    }
  }
}
.pc-spaceEm{
  @media screen and ( width <= 768px ){
    &:after{
      content: "\A";
      white-space: pre;
    }
  }
  @media print,screen and ( width > 768px ){
    &:after{
      content: "　";
    }
  }
}
/*--------------------------------------------
FONT WEIGHT
---------------------------------------------*/
.bold{
  font-weight: 700;
}
/*--------------------------------------------
LH NAGATIVE MARGIN
---------------------------------------------*/
.lh-up{
  margin-top: calc( ( 1em - 1lh )  / 2 );
}
.lh-up-sp{
  @media screen and ( width <= 768px ){
    margin-top: calc( ( 1em - 1lh )  / 2 );
  }
}
.lh-up-pc{
  @media print,screen and ( width > 768px ){
    margin-top: calc( ( 1em - 1lh )  / 2 );
  }
}
/*--------------------------------------------
TRANSITION
---------------------------------------------*/
:root{
  --transitionBaseDuration : .3s;
  --transitionBaseFunction : linear;
  --transitionBase : var(--transitionBaseDuration) var(--transitionBaseFunction);
  --transitionSnap : 0s calc( var(--transitionBaseDuration) / 2 ) var(--transitionBaseFunction);
}
/*--------------------------------------------
DETAILS
---------------------------------------------*/
@supports (interpolate-size: allow-keywords) and (height: calc-size(auto, size)) {
  details::details-content {
    block-size: 0;
    overflow: clip;
    interpolate-size: allow-keywords;
  }

  details[open]::details-content {
    block-size: auto;
  }
}
@supports not ((interpolate-size: allow-keywords) and (height: calc-size(auto, size))) {
  details::details-content {
    content-visibility: unset;
    display: block grid;
    grid-template-rows: 0fr;
  }
  .detailsContent {
    overflow: hidden;
  }
  .detailsContent > div {
    overflow: hidden;
  }
  details[open]::details-content {
    grid-template-rows: 1fr;
  }
}
@media ( prefers-reduced-motion : no-preference ){
  .detailsContent > div{
    transition: margin-block var(--transitionBase) , padding-block var(--transitionBase);
  }
  @supports (interpolate-size: allow-keywords) and (height: calc-size(auto, size)) {
    details::details-content{
      transition: block-size var(--transitionBase) , content-visibility var(--transitionBase) allow-discrete;
    }
  }
  @supports not ((interpolate-size: allow-keywords) and (height: calc-size(auto, size))) {
    details::details-content {
      transition: grid-template-rows var(--transitionBase);
    }
  }
}

/*--------------------------------------------
TITLE
---------------------------------------------*/
@container style( --looks: casulal ){
}
@container style( --looks: formal ){
  .title01{
    font-family: "Noto Serif JP", serif;
    letter-spacing: .025em;
    text-indent: .025em;
  }
}
.title01{
  position: relative;
  overflow: clip;
  z-index: 0;
  font-weight: 500;
  text-align: center;
  &[data-en]{
    &:before , &:after{
      display: block;
    }
    &:before{
      content:attr(data-en);
      text-align: center;
      color:var(--brown);
      font-weight: 100;
      font-family: "Pinyon Script";
      margin-inline : auto;
      text-box: trim-both cap alphabetic;
      align-content: center;
      background-color: white;
      z-index: 1;
      width: fit-content;
      padding-left: 0.5em;
      padding-right: .75em;
    }
    &:after{
      content:"";
      position: absolute;
      left: 50%;
      translate: -50% 0;
      top: 0;
      z-index: -1;
      background-size: 100% 1px;
      background-position: left 50%;
      background-repeat: no-repeat;
      background: linear-gradient( to right, var(--brown) );
      font-size: 0;
    }
  }
  @media screen and ( width <= 768px ){
    font-size : calc( 32 * var(--remBase ) );
    &[data-en]{
      &:before , &:after{
        height : calc( 36 * var(--remBase ) );
      }
      &:before{
        font-size : calc( 36 * var(--remBase ) );
        margin-bottom : calc( 4 * var(--remBase ) );
      }
      &:after{
        width : calc( 326 * var(--contentBase ) );
      }
    }
  }
  @media print,screen and ( width > 768px ){
    font-size : calc( 64 * var(--remBase ) );
    &[data-en]{
      &:before , &:after{
        height : calc( 48 * var(--remBase ) );
      }
      &:before{
        font-size : calc( 48 * var(--remBase ) );
        margin-bottom : calc( 2 * var(--remBase ) );
      }
      &:after{
        width : calc( 640 * var(--contentBase ) );
      }
    }
  }
}

/*--------------------------------------------
LINKS
---------------------------------------------*/
@container style( --looks: casual ){
  .link01{
    border-radius : calc( 8 * var(--remBase ) );
  }
}
.link01{
  margin-inline : auto;
  display: grid;
  align-items: center;
  justify-content: center;
  color:white;
  font-weight: 500;
  grid-auto-flow: column;
  box-shadow: 0 calc( 4 * var(--remBase) ) calc( 4 * var(--remBase) ) color-mix( in srgb , black 25% , transparent );
  position: relative;
  &:after{
    content:"";
    display: block;
    font-size: 0;
    background : url( "../images/ui/arrow/right01.svg" ) left top / contain no-repeat;
    aspect-ratio: 8.8/16;
    width: auto;
    filter:var(--filterWhite);
    top: 50%;
    translate: 0 -50%;
    position: absolute;
  }
  @media screen and ( width <= 768px ){
    width : 100%;
    height : calc( 52 * var(--remBase ) );
    background-image: linear-gradient( 135deg , #baa478 , #7d5d23 );
    column-gap : calc( 12 * 100% / 352 );
    font-size : calc( 16 * var(--remBase ) );
    padding-right : calc( 16 * var(--contentBase ) );
    img{
      height : calc( 24 * var(--remBase ) );
    }
    &:after{
      height : calc( 12 * var(--remBase ) );
      right : calc( 12 * 100% / 336 );
    }
  }
  @media print,screen and ( width > 768px ){
    width : calc( 400 * var(--contentBase ) );
    height : calc( 64 * var(--remBase ) );
    background-image: linear-gradient( 135deg , #baa478 , #7d5d23 );
    column-gap : calc( 16 * 100% / 376 );
    font-size : calc( 18 * var(--remBase ) );
    padding-right : calc( 24 * var(--contentBase ) );
    img{
      height : calc( 28 * var(--remBase ) );
    }
    &:after{
      height : calc( 16 * var(--remBase ) );
      right : calc( 16 * 100% / 400 );
    }
  }
}