@charset "utf-8";
/* CSS Document */
/* googleフォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Baskervville:ital,wght@0,400..700;1,400..700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Jost:ital,wght@0,100..900;1,100..900&family=Marcellus&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');

/* 基本フォントカラーを黒に指定 */
body {
  color: #fff;
  background: var(--Brand-Color);
  background: #382F2D;
  /* overscroll-behavior-y: none;  バウンススクロール自体を抑制（好みで）by Gemini */
  --window-height: 100dvh;

  min-height: var(--window-height);
  color: #fff;
  margin: 0;
  padding: 0;

  /* 以下、古いiPad対策 */
  /* --webkit-overflow-scrolling: touch; */
  /* -webkit-transform: translate3d( 0, 0, 0); */
  /* transform: translate3d(0, 0, 0); */

}

/* 見出しを明朝体に指定 */
h1,h2,h3,h4 {font-family: var(--Font-Mincho);}

/**************** 対象外ブラウザへの警告表示 ****************/
#Caution {
  z-index: 990;
  background-color: rgba(0, 0, 0, .75);
  position: -webkit-fixed;
  position: fixed;
  inset: 0;
  align-content: center;
}
#Caution #CautionContentWrap {
  margin: auto;
  padding: 3%;
  background: #fff;
  color: #000;
  border-radius: 8px;
  width: clamp(340px, 75%, 800px);
}
#Caution #CautionContentWrap p {line-height: 1.4; margin-bottom: 0;}
#Caution #CautionContentWrap p.linkButton {
  margin-bottom: 0;
  margin-top: .5em;
  text-align: center;
  font-size: .875em;
  width: auto;
}
#Caution #CautionContentWrap a {
  /* background: rgba(56, 47, 45, 1); */
  background-color: var(--Brand-Color);
  padding: .9em 1.2em;
  border: none;
  color: #fff;
  font-weight: 500;
  text-align: center;
}
#Caution #CautionContentWrap dl {font-size: .875em; margin: 0;}
#Caution #CautionContentWrap dt {
  float: none;
  clear: both;
  padding-top: .5em;
  margin-top: 0;
}
#Caution #CautionContentWrap dd {
  display: list-item;
  float: left;
}
#Caution #CautionContentWrap p.linkButton a span {display: inline-block;}
#Caution #CautionContentWrap p.linkButton a:hover {
  opacity: .6;
  cursor: pointer;
}

html {
  body {
    #Caution {
      /* ***以下は検証用に記述*** */
      display: block;
      position: -webkit-fixed;
      position: fixed;
      visibility: visible;
      /* ******************** */
      display: none;
      position: initial;
      visibility: hidden;
    }
    #Caution.ON {
      display: block;
      position: -webkit-fixed;
      position: fixed;
      visibility: visible;
    }
  }
}

/**************** ヘッダーの指定（） ****************/
header {
  overflow: hidden;
  background: transparent;
  position: -webkit-fixed;
  position: fixed;
  z-index: 991; /* 警告表示 #Caution よりちょっと上層に */
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: row-reverse;
  transition: all .5s ease;
}
header.fadeOff {
  transform: translateY(-100%);
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  visibility: hidden;
}
/* 言語切り替え（ページ遷移）のUI （古いブラザでも表示できるように指定） */
header nav {
  background-color: var(--Brand-Color-80);
  border-radius: 0 0 6px 6px;
  margin-right: 1em;
  padding: .3em .4em .3em .3em;
}
header nav ul {
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-style: normal;
  line-height: .75;
  margin: 0;
  padding: 0;
  color: #ddd;
  display: flex;
  align-items: center;
}
header nav ul * {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  transition: all .5s ease;
}
header nav ul::before {
  content: "/";
  order: 2;
  color: #aaa;
  margin: 0 1px 0 3px;
}
header nav ul li {
  font-weight: 400;
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  order: 3;
}
header nav ul li:first-child {order: 1;}
header nav ul li.Current {border-bottom: 2px solid #ff6d6d;}
header nav ul li a {color: #bfbfbf; text-decoration: none;}
header nav ul li a:hover {
  opacity: 1;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

/*********** footerの指定 ***********/
footer, .footer {
  font-size: .7em;
  padding: .5em 0;
  align-content: center;
  position: -webkit-fixed;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(56, 47, 45, .8);
  border-top: 1px solid #555;
  > address {
    font-weight: 300;
    color: #A69B95;
    color: #dedede;
    letter-spacing: .1em;
    margin: 0;
    padding: 0;
    text-align: center;
  }
}

body {
  *.fadeIn {opacity: 1; transition: all .5s ease;}
  *.SlowfadeIn {opacity: 1; transition: all 1s ease-out;}

  *.fadeOff {opacity: 0; transition: all .5s ease;}

  .display-none {display: none;}
  .display-block {display: block;}
}

.BG {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.Panel {
  width: 100%;
  height: var(--window-height);
  background: transparent;
  overflow: hidden;
  /* transform: translate3d(0, 0, 0); */
  /* will-change: transform; 要素の変更を予測させる */
}
/* .Bridge {height: 200vh;} */
.Height2x {height: 300vh;} 


/* ********** レイヤー階層のみの指定（管理のために） ********** */
body {
  
  footer, .footer {z-index: 99; transform: translate3d(0, 0, 0);}
  
  #footerBox {z-index: 52;}
  #footerBoxWrap {z-index: 51;}
  /* :has( #footerBoxWrap ) {z-index: 50;} */

  #NextButton {z-index: 47;}
  #scroll {z-index: 46;}

  #NextStageTitleBox {z-index: 45; transform: translate3d(0, 0, 0);}
  #LIFESTYLE-Text-Box {z-index: 40; transform: translate3d(0, -6%, 0);}
  
  #VISION-box {z-index: 30;}
  #NextStageMultiBox {z-index: 29; transform: translate3d(0, 0, 0);}
  #NextStage8Box {z-index: 28;}
  #NextStage7Box {z-index: 27;}
  #NextStage6Box {z-index: 26;}
  #NextStage5Box {z-index: 25;}
  #NextStage4Box {z-index: 24;}
  #NextStage3Box {z-index: 23;}
  #NextStage2Box {z-index: 22;}
  #NextStage1st {z-index: 21;}
  /* .NextStageBox {z-index: 20; transform: translate3d(0, 0, 0);} */

  /* .Fixed {z-index: 10; transform: translate3d(0, 0, 0);} */

  #TextBox-2 {z-index: 12; transform: translate3d(0, 0, 0);}
  #TextBox-1 {z-index: 11;}
  :has( > #TextBox-1 ) {z-index: 10; position: relative;}

  #p-message_img_Box {z-index: 9; transform: translate3d(0, 0, 0);}
  #p-message_Text {z-index: 8; transform: translate3d(0, 0, 0);}
  :has( > #p-message_img_Box ) {z-index: 7; position: relative;}

  .BusinessBox {z-index: 6; transform: translate3d(0, 0, 0);}

  #footerPhoto {z-index: 5; transform: translate3d(0, 0, 0);}

  #FinishBox {z-index: 4; transform: translate3d(0, 0, 0);}
  #StartBox {z-index: 3; transform: translate3d(0, 0, 0);}

  #Background {
    transform: translate3d(0, 0, 0);
    z-index: 5;
    .wave {z-index: 1;}
  }
  #loading {z-index: 2;}

  #Panel01 {z-index: 1; position: relative;}
}

/* ***************************************************** */

/* 最初のエリア */
/* :has( > #StartBox ) {
  container: FirstViewBlock / size;
} */
/* 年号カウントブロック */
#Year {
  opacity: 0;
  #YearText {
    /* 特定のCSSプロパティに今後変更が起きることをブラウザに先読みさせる */
    will-change: transform; /* 要素の変更を予測させる */
    /*  */
    font-family: "Old Standard TT", serif;
    font-weight: 400;
    font-style: italic;
    font-size: min(20vh, 8em);
    color: #A69B95;
    text-align: center;
    line-height: 1;
    letter-spacing: -.06em;
    text-indent: -.15em;
    margin: 0;
    padding: 0;
    opacity: .55;
    transform: translate3d(0, 0, 0);
  }
}
#SubTextBox.fadeIn, #Year.fadeIn {
    opacity: 1;
    transition: all .5s ease;
}

#StartBox,#FinishBox {
  position: -webkit-fixed;
  position: fixed;
  inset: 0 0 auto ;
  width: 100%;
  height: var(--window-height);
  transform: translate3d(0, 0, 0);
  opacity: 0;
}
#FinishBox {
  align-content: start;
  opacity: 0;
}
#FinishBox.fadeIn, #StartBox.fadeIn {opacity: 1; transition: all .15s linear;}
#FinishBox.fadeOff, #StartBox.fadeOff {opacity: 0; transition: all .5s linear;}

#MainTextBox {
  padding: 0;
  min-height: 25vh;
  align-content: center;
  opacity: 0;
  #MainText {
    /* font-size: clamp(24px, 2.25cqw, 32px); */
    font-size: clamp(28px, 3.25cqh, 32px);
    line-height: 1.65;
    font-weight: 100;
    margin: 1em 0 0;
    padding: 0 .8em;
    text-align: center;
    > span {display: inline-block;}
  }
}
#MainTextBox.SlowfadeIn {
  opacity: 1;
  transition: all 1s ease-out;
}
#Logo30th {
  /* width: 12em; */
  text-align: center;
  width: auto;
  padding: 0;
  align-content: center;
  > img {
    width: min(100%, 200px);
    margin: 0 0 0 -8%;
    transform: translateY(-7%);
    transform: translate3d(0, -7%, 0);
  }
  opacity: 0;
  transform: scale(1.15, 1.15);
}
#Logo30th.fadeIn {
  opacity: 1;
  transition: all .4s ease-out;
  transform: scale(1, 1);
}
#VisualGridBox {
  --Box-Max-Heught:calc(100dvh - 25dvh - 10dvh);
  /* --Box-Max-Heught:calc(100vh - 25vh - 10vh); */
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 15cqw 1fr;
  grid-template-areas:"b a c";
  height: fit-content;
  max-height: var(--Box-Max-Heught);

  #Logo30th {grid-area: a;}

  .BoxPhoto {
    height: 100%;
    max-height: var(--Box-Max-Heught);
    overflow: hidden;
  }
  .BoxPhoto > * {width: auto; opacity: 0;}
}

#StartBox {
  top: 0;
  align-content: center;
}
#SubTextBox {
  width: 100%;
  opacity: 0;
  #SubText {
    font-size: 1.15em;
    font-weight: 200;
    letter-spacing: .06em;
    margin: 0;
    text-align: center;
    > span {display: inline-block;}
  }
}
#FirstViewPhoto {
  padding: 4vh 0 2vh;
  text-align: center;
  > img {
    height: 26vh;
    min-height: 240px;
    max-height: 290px;
    max-height: 250px;
    filter: grayscale(100%) brightness(1);
    transition: all 2.5s ease-out;
    transform: rotate3d(0, 0, 0);
    opacity: .9;
  }
}
#FirstViewPhoto.Start {
  > img {
    opacity: 0.3;
    filter: grayscale(100%) brightness(0.25);
  }
}
#FirstViewPhoto.Color {
  > img {
    filter: grayscale(0) brightness(1);
    transition: all 2.5s ease-out;
  }
}
#FirstViewPhoto.Color.fadeOff {transform: translate3d(0, 0, 0);}

/* コンテンブロックで半分づつのグリッドレイアウトのために */
/* :has( > .HalfGridBase ) {container: HalfBaseWrap / size;} */
.HalfGridBase {
  min-height: 100dvh; /* 念のため最小値も指定 */
  height: var(--window-height);
  width: 100%;
  display: grid;
  grid-template-columns: 58% 42%;
  grid-template-rows: 100%;
  grid-template-areas: "a b";
  .Base-a {grid-area: a;}
  .Base-b {grid-area: b;}
  .Base-a, .Base-b {
    background: transparent;
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
}

#NextStageTitleBox {
  /* container: NextStageTitleBox / size; */
  position: -webkit-fixed;
  position: fixed;
  inset: 0;
  background: var(--Brand-Color);
  align-content: center;
  text-align: center;
  opacity: 0;
  transition: all .6s linear;
  #NextStageTitle {
    opacity: 0;
    font-size: 30px;
    font-weight: 100;
    margin: 0 auto 0;
    padding: 0;
    transform: translate3d(0, -40%, 0) scale(1.25);
    display: inline-block;
    span:first-child {
      font-size: 2.2em;
      font-weight: 600;
      letter-spacing: .07em;
      display: inline-block;
      /* 文字を金色グラデーションにするために */
      background: linear-gradient(90deg, #bcbe58 0%, #fef1c7 50%, #c7b759 100%);
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  #NextStageTitle.fadeIn {opacity: 1; transform: translate3d(0, -40%, 0) scale(1); transition: all .4s ease;}
}
#NextStageTitleBox.fadeIn {opacity: 1;}
#NextStageTitleBox.fadeIn.NoBG {background: transparent;}

#p-message_img_Box, #p-message_Text {
  position: -webkit-fixed;
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--window-height);
  opacity: 0;
  transition: all .45s ease;
  will-change: transform;
}
#p-message_img_Box {background: transparent;}
#p-message_img_Box.fadeIn,#p-message_Text.fadeIn {
  opacity: 1;
  /* transform: translate3d(0, 0, 0); */
}
#p-message_img {
  background-image: url(/30th/img/representative.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transform: translate3d(-10%, 0, 0);
  opacity: 0;
  background-attachment: fixed;
  position: relative;
  inset: 0;
  #p-mess_img_caption {
    --box-Color: rgba(0, 0, 0, .55);
    font-size: .8125em;
    font-weight: 200;
    line-height: 1.3;
    letter-spacing: .06em;
    text-align: left;
    position: absolute;
    bottom: 0;
    padding: 0.2em 3.6em 2.2em .3em;
    margin: 0;
    background-color: var(--box-Color);
    /* background: linear-gradient(方向, 開始色 開始位置, 追加色 追加する位置, 終了色 終了位置); */
    background: linear-gradient(to right, var(--box-Color) 85%, transparent 100%) ;
    > span {display: inline-block;}
  }
}
#p-message_img.fadeIn {
  transform: translate3d(0, 0, 0);
  transition: all .5s linear;
  opacity: 1;
}
#p-message_Text {
  container: p-messageBox / size;
  background-color: var(--Brand-Color);
  > .Base-b {
    container: MsgTextBox / size;
    .ImgBox {
      width: clamp(150px, 28cqw, 190px);
      height: 35%;
      align-content: end;
      margin-inline: auto;
    }
    #logo30th {
      opacity: 0;
      transform: translate3d(0, -25%, 0);
      transition: all .5s linear;
    }
    #logo30th.fadeIn {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    #Message {
      font-size: clamp(1.625em, 6.7cqw, 2.4em);
      font-weight: 600;
      line-height: 1.75;
      text-align: center;
      margin-block: 1.5em 0;
      color: #fcda43;
      padding-inline: .8em;

      opacity: 0;
      transform: translate3d(0, 80px, 0);
      transition: all .35s linear;

      > span:not(.intro) {
        line-height: 1.4;
        display: inline-block;
        /* 文字を金色グラデーションにするために */
        background: linear-gradient(90deg, #bcbe58 0%, #fef1c7 50%, #c7b759 100%);
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .intro {
        font-size: .75em;
        color: #fff;
        display: inline-block;
      }
    }
    #Message.fadeIn {opacity: 1; transform: translate3d(0, 0, 0);}
    #Message.FadeOFF {
      opacity: 0 !important;
    }
  }
}

#footerPhoto {
  position: -webkit-fixed;
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--window-height);
  align-content: center;
  background-image: url(/30th/img/PhotoSep03-2020_9-19-58AM.webp);
  background-position: top -20% center;
  /* background-color: #fff; */
  opacity: 0;
}
#footerPhoto.fadeIn {
  opacity: 1;
  background-position: top center;
  transition: all .7s linear;
}
#FooterContentsWrap {
  opacity: 0;
  padding-inline: 3.5vw;
}
#FooterContentsWrap.fadeIn {
  opacity: 1;
  transition: all .9s ease-out;
}

#LastTextBox {
  --box-Color: rgba(255, 255, 255, .5);
  margin: -27vh auto 0;
  padding: .5em 1em;
  background-color: var(--box-Color);
  width: fit-content;
  border-radius: 1.2em;
  box-shadow: 0px 0px 5px 7px var(--box-Color); /* エッジをぼかす */
}
#LastText {
  font-family: var(--Font-Mincho);
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.65;
  color: #000;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
  text-shadow:
    1px 1px 0 #fff,
    -1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff;
  span {display: inline-block;}
  .Text-E {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    display: inline-block;
    letter-spacing: .08em;
    font-size: 1.15em;
    dominant-baseline: middle;
  }
}

#footerBoxWrap {
  position: -webkit-fixed;
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--window-height);
  align-content: end;
  overflow: hidden;
  opacity: 1;
}
#footerBox {
  position: absolute;
  position: -webkit-fixed;
  position: fixed;
  width: 100%;
  inset: auto 0 0;
  transform: translate3d(0, 140%, 0);
  /* transform: translate3d(0, 0, 0); */
  transition: all .6s ease-out;
  background: rgba(56, 47, 45, 1);
  text-align: center;
  color: #fff;
  padding: 1.6em 0 2.6em;
  box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.3);

  #Logo {
    width: 180px;
    height: 180px;
    overflow: hidden;
    text-align: center;
    align-content: center;
    margin-inline: auto;
    margin-top: -90px;
    background-color: var(--Brand-Color);
    border-radius: 200vh;
    box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.25);
    img {width: 65%; margin-top: -20px;} 
  }
  #Menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -2em 0 0;
    padding: 0 1em;
    > * {margin: .3em .5em;}
    a {
      font-size: .78em;
      text-decoration: none;
      font-weight: 300;
      line-height: 1.15;
      color: #fff;
      padding: .35em 1em;
      border: 1px solid #A69B95;
      border-radius: 100vh;
    }
  }
  nav.scroll-up {
    position: absolute;
    width: fit-content;
    bottom: 3em;
    font-size: .85em;
    button {
      border: 1px solid #999;
      background-color: #000;
      width: 3.2em;
      color: #ddd;
      .arrow-up {
        width: 1px;
        height: 16px;
      }
      .arrow-up::before {
        border: 1px solid currentColor;
        border-left: 0;
        border-bottom: 0;
        width: 1em;
        height: 1em;
      }
    }
  }
}
#footerBox.fadeIn {
  transform: translate3d(0, 0, 0);
}

/* スクロールの文字 */
#scroll {
  text-align: center;
  align-content: center;
  height: 2.6em;
  position: -webkit-fixed;
  position: fixed;
  bottom: 7vh;
  left: 50%;
  transform: translate3d(-50%, 0 , 0);
  opacity: 0;
  transition: all 1s linear;
  .ScrollBtn {
    font-size: .85em;
    font-weight: 200;
    letter-spacing: .12em;
    line-height: 1;
    color: #fff;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    padding: .3em 1em .2em;
    border-radius: 100vh;
    border: 1px solid #A69B95;
    background-color: rgba(56, 47, 45, .7);
  }
  .ScrollBtn::before {
    content: "Scroll";
  }
  .ScrollBtn::after {
    content: "";
    display: block;
    color: #fff;
    line-height: 1;
    width: .5em;
    height: .5em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translate3d(0, -25%, 0) rotate(135deg);
    margin: .25em auto 0;
  }
}
#scroll.fadeIn {opacity: 1;}
#scroll.fadeOff{ transition: all .1s linear; z-index: initial;}

/* ネクストボタン */
#NextButton {opacity: 0;}
#NextButton.fadeIn {opacity: 1;}
#NextButton.fadeOff{ transition: all .1s linear;}
.NavBtn {
  display: none;
  text-align: center;
  align-content: center;
  height: 3em;
  position: -webkit-fixed;
  position: fixed;
  /* top: 86vh; */
  bottom: calc( var(--window-height) * .05);
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  transition: all 2s linear;
  .NextBtn {
    font-size: .85em;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1;
    color: #fff;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    padding: .5em 1.8em .65em;
    border-radius: 100vh;
    border: 1px solid #A69B95;
    background-color: rgba(56, 47, 45, .85);
  }
  .NextBtn::before {
    content: "Next";
  }
  .NextBtn::after {
    content: "";
    display: block;
    color: #fff;
    line-height: 1;
    width: .5em;
    height: .5em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translate3d(0, -25%, 0) rotate(135deg);
    margin: .35em auto -.2em;
  }
}
/* #NextButton {top: 80vh;} */

/*********** hoverが使えないタッチ端末を想定した装飾 ***********/
@media (hover: none) {
  #scroll {display: none;}
  .NavBtn {display: block;}
  .Bridge {display: none; visibility: hidden; height: 0 !important; width: 0 !important;}
  .Height2x {
    height: var(--window-height);
    height: 150vh;
  }
}

/* アニメーションの設定 */
@keyframes gradient {
  0% {background-position: 0% 0%;}
  50% {background-position: 100% 100%;}
  100% {background-position: 0% 0%;}
}
@keyframes wave {
  2% {transform: translate3d(1, 0, 0);}
  /* 25% {transform: translateX(-25%);} */
  25% {transform: translate3d(-25%, -5%, 0);}
  /* 50% {transform: translateX(-50%);} */
  50% {transform: translate3d(-50%, -15%, 0);}
  /* 75% {transform: translateX(-25%);} */
  75% {transform: translate3d(-25%, -5%, 0);}
  100% {transform: translate3d(1, 0, 0);}
}

/* ***************************************************** */

/* #Panel04 {container: LIFESTYLE-TextBox / size;} */
#LIFESTYLE-Text-Box {
  color: #fff;
  position: -webkit-fixed;
  position: fixed;
  will-change: transform;
  inset: 0 0 auto;
  /* top: 0; */
  /* width: 100%; */
  opacity: 1;
  background: transparent;
  padding-inline: 0;
  align-content: start;
  #LIFESTYLE-1Line {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;

    font-size: 5.85cqw;
    line-height: 1;
    letter-spacing: .1cqw;
    margin: 0;
    padding-inline: 0;

    opacity: 0;

    display: flex;
    justify-content: space-between;
    > span:first-child {margin-left: 0;}
    > span {
      white-space: nowrap;
      margin-inline: .04cqw;
      background: -webkit-linear-gradient(-90deg, rgba(255,255,255,0.65) 20%, rgba(255,255,255,0.1));
      background: linear-gradient(180deg, rgba(255,255,255,0.65) 20%, rgba(255,255,255,0.1));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }
  #LIFESTYLE-1Line.ON {transform: translate3d(0, 15vh, 0); opacity: 0; transition: all .05s ease;}
  #LIFESTYLE-1Line.fadeIn {
    transform: translate3d(0, 0, 0);
    opacity: .35;
    transition: all .5s ease;
  }
  #LIFESTYLE-1Line.OpacityAdd {
    transition: all .5s ease;
    opacity: .75;
  }
  #LIFESTYLE-1Line.Opacity1 {
    transition: all 1s ease;
    opacity: 1;
    /* background-image: linear-gradient(0deg, transparent, #0090febf 60%); */
    /* text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.7); */
    /* background-clip: border-box; */
  }
  &:has(#LIFESTYLE-1Line.Opacity1) {
    background-image: linear-gradient(0deg, transparent, rgba(11, 149, 255, .6) 60%);
    transition: all .8s ease;
  }
}

#Background {
  height: var(--window-height);
  padding: 0;
  background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgb(103, 81, 77) 98%);
  animation: gradient 13s ease infinite;
  background-size: 800% 800%;
  .wave {
    background: rgb(255 255 255 / 20%);
    border-radius: 1000% 1000% 0 0;
    position: -webkit-fixed;
    position: fixed;
    width: 250vw;
    height: 35vh;
    animation: wave 13s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.3;
    bottom: 0;
    left: 0;
  }
  .wave:nth-of-type(2) {
    bottom: -1.25em;
    left: -1.5em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.5;
  }
  .wave:nth-of-type(3) {
    bottom: -2.5em;
    left: -4em;
    animation: wave 25s -1s reverse infinite;
    opacity: 0.8;
  }
}
#Background.fadeIn {opacity: 1; transition: all 1s linear;}

#TextBox-1 {
  container: TextBox1 / size;
  background-color: var(--Brand-Color);
  opacity: 0;
  /* will-change: transform; */
  position: absolute;
  position: -webkit-fixed;
  position: fixed;
  inset: 0;
  overflow: hidden;
  .Base-a {
    padding-top: 30vh;
    text-align: center;
    color: #fff;
    position: relative;
    inset: 0 0 auto;
    > * {
      font-family: "Jost", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      text-align: center;
      margin: 0;
    }
    .LIFESTYLE {
      font-size: 4em;
      font-size: min(15cqw, 4em);
      line-height: 1.05;
      font-weight: 500;
      letter-spacing: .2em;
      margin-left: .2em; /* 文字間を開いた分、微調整 */
      opacity: 0;
      transform: translate3d(0, -150%, 0);
      transition: all .5s ease-out;
    }
    .HOSPITALITY {
      font-size: 1.8em;
      line-height: 1.05;
      font-weight: 400;
      letter-spacing: .16em;
      opacity: 0;
      transform: translate3d(0, 150%, 0);
      transition: all .5s ease-out;
    }
    .LIFESTYLE.fadeIn, .HOSPITALITY.fadeIn {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  .Base-a.MoveUp {
    transition: all .15s linear;
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
}
#TextBox-1.fadeIn {opacity: 1; transition: all 1s ease-out;}
/* :has( > #TextBox-1 ) {position: relative;} */

#TextBox-2 {align-content: center;}
#VISION-box {
  container: VISIONBox / inline-size;
  text-align: center;
  background-color: rgba(0, 0, 0, .4);
  padding-bottom: .5em;
  opacity: 0;
  transition: all .8s ease-out;

  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate3d(0, -50%, 0);

  #VISION {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase; /* テキストをすべて大文字にする */
    color: #e7cf17;
    margin: 0 auto;
    font-size: 3.2em;
    letter-spacing: .1em;
    /* 文字を金色グラデーションにする */
    background: linear-gradient(90deg, #bcbe58 0%, #fef1c7 50%, #c7b759 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* グラデーションにする時は必須 */
  }
  #ForLife {
    font-size: clamp(2em, 10cqw, 3.8em);
    font-weight: 200;
    margin: 0;
    padding-inline: .25em;
    letter-spacing: .025em;
  }
  #COMPANY-J {
    font-size: clamp(1.125em, 5.5cqw, 1.85em);
    font-weight: 200;
    margin: .5em 0 0;
    > span {display: inline-block;}
  }
}
#VISION-box.fadeIn {opacity: 1;}

body {
  .BusinessBox {
    align-content: start;
    /* min-height: 100svh; 念のため最小値も指定 */
    /* height: var(--window-height); */
    padding-top: 6cqw; /* #LIFESTYLE-1Lineのフォントサイズと同じに */
    overflow: hidden;
    /* transform: translate3d(0, 0, 0); */
    will-change: scroll-position; /* 要素の変更を予測させる */

    .Box {
      height: min(100%, 980px);
      width: min(90%, 1050px);
      margin: 0 auto;
      padding-bottom: 1.5em;
      display: flex;
      flex-direction: column;
    }
  }
  .BusinessBox.Off {
    opacity: 0;
    transform: scale(1.2);
    transition: all .2s ease-in;
  }
  #Background, .BusinessBox {
    position: -webkit-fixed;
    position: fixed;
    inset: 0;
    transform: translate3d(0, 0, 0);
    opacity: 0;
    will-change: transform;
  }
  .BusinessBox.fadeIn {opacity: 1;}

  .BusinessTitle {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase; /* テキストをすべて大文字にする */

    font-size: clamp(2.65em, 3.2cqw, 3.8em);
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    color: #ddd;
    margin: 0;
    padding: 0 .2em 0;
    position: relative;
    width: 100%;
    top: 6vh; /* 13vh */
    left: 50%;
    transform: translate3d(-50%, 0, 0) scale(2.7, 1);
    /* letter-spacing: .3em; */
    opacity: 0;
    transition: all .4s ease;

    > span {display: inline-block;}
    .and {font-family: var(--Font-Mincho); font-size: .85em; margin-inline: .35em;}
    .Jp {
      font-family: var(--Font-Mincho);
      font-size: max(12px, .4em);
      font-weight: 200;
      color: #fff;
      letter-spacing: -.05em;
      display: block;
      margin-top: .1em;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
    }
  }
  .BusinessTitle.fadeIn {
    /* letter-spacing: 0.02em; */
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  .Photo-box {
    position: relative;
    margin: 6vh 0 0;
    padding: 0;
    flex-grow: 2;
    > * {
      height: 43%;
      max-height: 240px;
      position: absolute;
      aspect-ratio: 1.6 / 1; /* 黄金比  */
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      opacity: 0;
      transform: scale(1.1);
      inset: 0;

      border: 2px solid #fff;
      box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.4);

      background-color: #fff; /* 仮の背景  */
    }
    *.fadeIn {
      opacity: 1;
      transform: scale(1);
      transition: all .4s ease-out;
    }
  }

  .BusinessBox-01 {
    .Photo1 {
      inset: 5% auto auto -2% ;
      background-image: url(/30th/img/hotel-01.webp);
    }
    .Photo2 {
      inset: 10% auto auto 29%;
      background-image: url(/shared/images/business/hotel-kimpton01.webp);
    }
    .Photo3 {
      inset: 7% -2% auto auto;
      background-image: url(/shared/images/business/hotel-nagoya01.webp);
    }
    .Photo4 {
      inset: 45% auto auto 10%;
      background-image: url(/shared/images/business/hotel-interShinagawa01.webp);
    }
    .Photo5 {
      inset: 48% 12% auto auto;
      background-image: url(/30th/img/hotel-05-2.webp);
    }
  }
  .BusinessBox-02 {
    .Photo1 {
      inset: 15% auto auto -4%;
      background-image: url(/30th/img/bridal-01.webp);
    }
    .Photo2 {
      inset: 7% auto auto 32%;
      background-image: url(/30th/img/bridal-02.webp);
    }
    .Photo3 {
      inset: 9% -3% auto auto;
      background-image: url(/30th/img/bridal-03.webp);
    }
    .Photo4 {
      inset: 47% auto auto 14%;
      background-image: url(/30th/img/bridal-04.webp);
    }
    .Photo5 {
      inset: 50% 13% auto auto;
      background-image: url(/30th/img/bridal-05.webp);
    }
  }
  .BusinessBox-03 {
    .Photo1 {
      inset: 15% auto auto -1%;
      background-image: url(/30th/img/contents-01.webp);
    }
    .Photo2 {
      inset: 8% auto auto 31%;
      background-image: url(/shared/images/business/our-project_annivasary.webp);
    }
    .Photo3 {
      inset: 17% -3% auto auto;
      background-image: url(/30th/img/contents-03.webp);
    }
    .Photo4 {
      inset: 48% auto auto 6%;
      background-image: url(/30th/img/contents-04.webp);
    }
    .Photo5 {
      inset: 50% 12% auto auto;
      background-image: url(/shared/images/business/photography-photo02.webp);
    }
  }
  .BusinessBox-04 {
    .Photo1 {
      inset: 10% auto auto -2%;
      background-image: url(/30th/img/restaurant-01.webp);
    }
    .Photo2 {
      inset: 5% auto auto 37%;
      background-image: url(/30th/img/restaurant-02.webp);
    }
    .Photo3 {
      inset: 8% -4% auto auto;
      background-image: url(/30th/img/restaurant-03.webp);
    }
    .Photo4 {
      inset: 43% auto auto 15%;
      background-image: url(/30th/img/restaurant-04.webp);
    }
    .Photo5 {
      inset: 47% 10% auto auto;
      background-image: url(/30th/img/restaurant-05.webp);
    }
  }
  .BusinessBox-05 {
    .Photo1 {
      inset: 2% auto auto -4%;
      background-image: url(/shared/images/business/our-project_img05.webp);
    }
    .Photo2 {
      inset: 8% auto auto 35%;
      background-image: url(/shared/images/business/party-mice_kv.webp);
    }
    .Photo3 {
      inset: 3% -5% auto auto;
      background-image: url(/shared/images/business/party-mice__img01.webp);
    }
    .Photo4 {
      inset: 47% auto auto 15%;
      background-image: url(/30th/img/party-04.webp);
    }
    .Photo5 {
      inset: 43% 11% auto auto;
      background-image: url(/shared/images/business/party-mice__img03.webp);
    }
  }
  .BusinessBox-06 {
    .Photo1 {
      inset: 5% auto auto -2%;
      background-image: url(/shared/images/business/spa-photo.webp);
    }
    .Photo2 {
      inset: 9% auto auto 36%;
      background-image: url(/30th/img/wellness-02.webp);
    }
    .Photo3 {
      inset: 2% -3% auto auto;
      background-image: url(/shared/images/business/fitness-photo.webp);
    }
    .Photo4 {
      inset: 45% auto auto 11%;
      background-image: url(/30th/img/wellness-04.webp);
    }
    .Photo5 {
      inset: 48% 17% auto auto;
      background-image: url(/30th/img/wellness-05.webp);
    }
  }

  /* 新規事業全面写真のブロック */
  .NextStageBox {
    /* container-type: size; */
    position: -webkit-fixed;
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--window-height);
    align-content: center;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform: translate3d(0, 12%, 0);
    transition: all .5s linear;
    opacity: 0;
    /* transform: translate3d(0, 0, 0); */
    will-change: scroll-position; /* 要素の変更を予測させる */
    .Title {
      font-family: var(--Font-Mincho);
      margin-top: -10vh;
      font-size: clamp(17px, 2cqw, 24px);
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
      background-color: rgba(0, 0, 0, .25);
      padding: .5em 1em;
      > span {display: inline-block;}
    }
  }
  #NextStage1stTitle, #NextStage3BoxTitle, #NextStage5BoxTitle, #NextStage7BoxTitle {
    position: -webkit-fixed;
    position: fixed;
    z-index: 31;
    top: 32%;
    width: 100%;
    opacity: 0;
    font-family: var(--Font-Mincho);
    /* margin-top: -10vh; */
    font-size: clamp(17px, 2cqw, 24px);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
    background-color: rgba(0, 0, 0, .25);
    padding: .5em 1em;
    text-align: center;
    transition: all .2s ease;
    > span {display: inline-block;}
    &.fadeIn {opacity: 1; transition: all 1.5s ease-out;}
  }

  .NextStageBox.fadeOff.fadeIn {opacity: 1; transform: translate3d(0, 0, 0); transition: all .4s ease;}
  .NextStageBox.fadeOff {opacity: 0; transform: translate3d(0, 0, 0); transition: all .4s linear;}

  #NextStage1st {
    background-image: url(/30th/img/Photo_Aug_02_2024_4_00_52PM.webp);
    background-position: left 10% center;
  }
  #NextStage2Box {background-image: url(/30th/img/hau-tree-bar-003.webp);}
  #NextStage3Box {background-image: url(/30th/img/HS_Kimpton_Palladian_Exterior_01-2.webp);}
  #NextStage4Box {background-image: url(/30th/img/HS_Kimpton_Palladian_PennRoyal_04.webp);}
  #NextStage5Box {background-image: url(/30th/img/ai_edit_image-01.webp);}
  #NextStage6Box {background-image: url(/30th/img/250514_375.webp);}
  #NextStage7Box {
    background-image: url(/30th/img/Exterior_Day2.webp);
    background-position: top center;
  }
  #NextStage8Box {background-image: url(/30th/img/WET_Deck.webp);}


  /* 新規事業 複数写真のブロック */
  #NextStageMultiBox {
    position: -webkit-fixed;
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--window-height);
    padding: 0;
    opacity: 0;
    transition: all .5s ease-in;
    .Photo-box {
      margin: 0;
      /* min-height: 100svh; 念のため最小値も指定 */
      /* max-height: 100%; */
      height: var(--window-height);
      display: grid;
      grid-template-columns: repeat(8, 12.5cqw);
      > * {
        position: relative;
        height: 100%;
        max-height: 100%;
        /* width: 12.5cqw; */
        /* width: -webkit-fill-available; */
        /* width: -moz-available; */
        /* width: stretch; */
        aspect-ratio: auto;
        border-inline-width: 1px;
        border-block: none;
        transition: all .6s ease;
        opacity: 0;
      }
      > *:first-child {border-left: none;}
      > *:last-child {border-right: none;}
      > *:nth-of-type(odd) {transform: translate3d(0, -7%, 0);}
      > *:nth-of-type(even) {transform: translate3d(0, 7%, 0);}
      > *.fadeIn {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
    .Photo1 {background-image: url(/30th/img/whoDALWHre-1089920-VillaAzur-High.webp);}
    .Photo2 {background-image: url(/30th/img/whoDALWH-1102205-QueenQueenWonderfulGuestRoom-High.webp);}
    .Photo3 {background-image: url(/30th/img/Altitude.webp);}
    .Photo4 {background-image: url(/30th/img/HS_Kimpton_Palladian_Exterior_01.webp);}
    .Photo5 {background-image: url(/30th/img/whoDALWH.1102216.webp);}
    .Photo6 {background-image: url(/30th/img/Exterior_Day2.webp);}
    .Photo7 {background-image: url(/30th/img/Photo_Aug_02_2024_4_00_52PM.webp); background-position: 28% center;}
    .Photo8 {background-image: url(/30th/img/240925_Kaimana_OceanViewSignature2BRSuite_2.webp);}
    .Photo9 {background-image: url(/30th/img/HS_Kimpton_Palladian_Glass_Studio_04_V2.webp);}
  }
  #NextStageMultiBox.fadeIn {opacity: 1;}

  #VisualGridBox { height: var(--Box-Max-Heught);}
  .BoxPhoto {
    #TopPhoto-L, #TopPhoto-R {
      list-style: none;
      margin: 0;
      padding: 0;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(13, 1fr);
      > * {
        grid-column: span 4;
        grid-row: span 4;
        margin: 0;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: all .3s ease;
      }
      > *.fadeIn {opacity: 1;}
    }
  }
  .BoxPhoto:has( #TopPhoto-L ) {
    grid-area: b;
    > * {transform: translate3d(-5%, 0, 0);}
  }
  .BoxPhoto:has( #TopPhoto-R ) {
    grid-area: c;
    > * {transform: translate3d(5%, 0, 0);}
  }
  .BoxPhoto :is(#TopPhoto-L, #TopPhoto-R).fadeIn {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: all .3s ease;
  }
  #TopPhoto-L {
    .Photo1 {background-image: url(/30th/img/top_01.webp);}
    .Photo2 {background-image: url(/30th/img/top_02.webp);}
    .Photo3 {background-image: url(/30th/img/top_03.webp);}
    .Photo4 {background-image: url(/30th/img/top_04.png);}
    .Photo5 {background-image: url(/30th/img/top_05.webp); background-position: bottom center;}
    .Photo6 {background-image: url(/30th/img/top_06.webp);}
    .Photo7 {background-image: url(/30th/img/top_07.webp);}
    .Photo8 {background-image: url(/30th/img/top_08.webp);}
    /* .Photo9 {background-image: url(/30th/img/HS_Kimpton_Palladian_Glass_Studio_04_V2.webp);} */
  }
  #TopPhoto-R {
    .Photo1 {background-image: url(/30th/img/top_19.webp); background-position: bottom center;}
    .Photo2 {background-image: url(/30th/img/top_21.webp); background-position: bottom left 12%;}
    .Photo3 {background-image: url(/30th/img/top_12.png); background-position: bottom center;}
    .Photo4 {background-image: url(/30th/img/top_13.webp);}
    .Photo5 {background-image: url(/30th/img/top_11.webp);}
    .Photo6 {background-image: url(/30th/img/top_14.webp);}
    .Photo7 {background-image: url(/30th/img/top_15.webp); background-position: bottom center;}
    .Photo8 {background-image: url(/30th/img/top_16.webp);}
    .Photo9 {background-image: url(/30th/img/top_17.webp);}
    .Photo10 {background-image: url(/30th/img/top_18.webp);}
  }
}

/********************** SPへの対応 **********************/

body {
  @container TextBox1 (width < 430px) {
    #TextBox-1 .Base-a .HOSPITALITY {font-size: 6.8cqw;}
  }

  #p-message_Text .Base-b {
    @container MsgTextBox (height < 500px ) {
      #Message {
        margin-block: 5cqh 0;
        font-size: max(3.9cqw, 1.3em);
      }
      .ImgBox {
        text-align: center;
        height: 30%;
        #logo30th {
          width: auto;
          height: 100%;
        }
      }
    }
    @container MsgTextBox (height < 310px ) {
      .ImgBox {height: 25%;}
    }
  }
}

@media (width < 600px) {
  body {
    #NextStageTitleBox #NextStageTitle {font-size: 1.2em;}
  }
}

@media (width < 850px) {
  body {
    .HalfGridBase {
      grid-template-columns:  100%;
      grid-template-rows: 60% 40%;
      grid-template-areas: "a" "b";
      .Base-a {background-color: #A69B95;}
      .Base-b {background-color: #faeab5;}
    }
    #p-message_Text {
      .Base-b {
        background-color: var(--Brand-Color);
        padding-top: 3vh;
      }
    }
    #p-message_img #p-mess_img_caption {padding-bottom: .3em;}
    .BusinessBox {
      padding-top: 16cqw; /* #LIFESTYLE-1Lineのフォントサイズの２倍（２行なので） */
      .Box {width: 85%;}
    }
    #NextStageMultiBox {
      .Photo-box {
        grid-template-columns: repeat(4, 25cqw);
        grid-template-rows: 1fr 1fr;
        transition: all .4s ease;
        > *:nth-of-type(-n+4) {transform: translate3d(0, -10%, 0); opacity: 0;}
        > *:nth-of-type(n+5) {transform: translate3d(0, 10%, 0); opacity: 0;}
        > *.fadeIn {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
    }
    #LastText {font-size: .95em;}
  }
}

@media (width < 600px) and (orientation:portrait) {
  body {
    .Photo-box {
      > * {height: auto; width: 60cqw;}
    }
  }
}

@media (width < 1050px) and (orientation:portrait) {
  body {
    .BusinessBox-01 { /* .BusinessBox */
      .Photo2 {inset: 8% auto auto 45%;}
      .Photo3 {inset: 35% auto auto 22%;}
      .Photo4 {inset: 67% auto auto -10%;}
      .Photo5 {inset: 60% -7% auto auto;}
    }
    .BusinessBox-02 {
      .Photo1 {inset: 6% auto auto -2%;}
      .Photo2 {inset: 8% auto auto 46%;}
      .Photo3 {inset: 33% auto auto 24%;}
      .Photo4 {inset: 67% auto auto 2%;}
      .Photo5 {inset: 60% 5% auto auto;}
    }
    .BusinessBox-03 {
      .Photo1 {inset: 10% auto auto -5%;}
      .Photo2 {inset: 5% auto auto 56%;}
      .Photo3 {inset: 38% auto auto 20%;}
      .Photo4 {inset: 71% auto auto -2%;}
      .Photo5 {inset: 64% 0% auto auto;}
    }
    .BusinessBox-04 {
      .Photo1 {inset: 5% auto auto 0%;}
      .Photo2 {inset: 33% auto auto 9%;}
      .Photo3 {inset: 8% 0% auto auto;}
      .Photo4 {inset: 68% auto auto 3%;}
      .Photo5 {inset: 57% -10% auto auto;}
    }
    .BusinessBox-05 {
      .Photo1 {inset: 4% auto auto -3%;}
      .Photo2 {inset: 32% auto auto 30%;}
      .Photo3 {inset: 7% 0% auto auto;}
      .Photo4 {inset: 66% auto auto -5%}
      .Photo5 {inset: 59% 6% auto auto;}
    }
    .BusinessBox-06 {
      .Photo1 {inset: 5% auto auto 4%;}
      .Photo2 {inset: 7% auto auto 50%;}
      .Photo3 {inset: 35% 12% auto auto;}
      .Photo4 {inset: 60% auto auto -4%;}
      .Photo5 {inset: 65% 6% auto auto;}
    }

    .BusinessTitle {
      font-size: 2.6em;
      top: 2.7vh;
    }
  }
}

@media (width < 800px) and (width > 600px) and (orientation:portrait)  {
  body {
    .BusinessBox-01 {
      .Photo4 {inset: 67% auto auto -10%;}
    }
    .BusinessBox-02 {
      .Photo4 {inset: 67% auto auto -10%;}
      .Photo5 {inset: 70% -8% auto auto;}
    }
    .BusinessBox-03 {
      .Photo4 {inset: 71% auto auto -13%;}
    }
    .BusinessBox-04 {
      .Photo1 {inset: 4% auto auto -10%;}
      .Photo3 {inset: 5% -8% auto auto;}
      .Photo4 {inset: 67% auto auto -10%;}
      .Photo5 {inset: 59% -6% auto auto;}
    }
    .BusinessBox-05 {
      .Photo1 {inset: 4% auto auto -5%;}
      .Photo2 {inset: 35% auto auto 15%;}
      .Photo3 {inset: 7% -5% auto auto;}
      .Photo4 {inset: 78% auto auto -3%;}
      .Photo5 {inset: 64% -5% auto auto;}
    }
    .BusinessBox-06 {
      .Photo1 {inset: 4% auto auto -6%;}
      .Photo2 {inset: 7% auto auto 52%;}
      .Photo3 {inset: 34% 12% auto auto;}
      .Photo4 {inset: 60% auto auto -9%;}
      .Photo5 {inset: 70% -15% auto auto;}
    }
  }
}

@media (width < 700px) {
  body {
    #Year {
      #YearText {font-size: min(6.8em,29.5vw); transform: translate3d(0, 0, 0);}
    }
    #FirstViewPhoto {
      > img {
        height: 170px;
        min-height: revert;
        max-height: revert;
      }
    }
    #SubTextBox #SubText {font-size: 1em;}
    #VisualGridBox {
      grid-template-areas: "a a" "b c";
      grid-template-columns: 1fr 1fr;
      grid-template-rows: .5fr 1fr;
      gap: 2px;
    }
    #Logo30th {
      > img {
        width: 30vw;
        margin: 3vh auto 7vh;
        transform: translateY(0);
      }
    }
    #MainTextBox {
      #MainText {
        font-size: 6cqw;
        span:first-of-type {font-size: 5cqw;}
      }
    }
  }
}

@media (width < 850px) {
  body {
    #LIFESTYLE-Text-Box {
      transform: translate3d(0, 0, 0);
      #LIFESTYLE-1Line {
        font-size: 8.7cqw;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        > span:last-child {margin-top: -.2em;}
      }
    }
  }
}

/****************** 以下 スマホ専用スタイル *****************/
/* iPhone SEのSafariにおける、アドレスバー（ツールバー）を除いた実質的な画面表示領域 */
@media (width < 600px) and (height > 500px) {
  header nav ul {font-size: 1.2em;}
  body {
    /* #MainTextBox { */
      /* #MainText {font-size: 1.4em;} */
    /* } */
    #scroll {
      position: -webkit-fixed;
      position: fixed;
      font-size: 1.3em;
      bottom: 28px; /* 2.4vh */
      .ScrollBtn {
        font-weight: 500;
        padding: .3em 1em .35em;
        background-color: rgba(56, 47, 45, .7);
        .dli-chevron-down {display: none;}
      }
    }
    #scroll.fadeIn.fadeOff {opacity: 1; z-index: 98;}
    #Logo30th > img {margin: 2vh auto 4vh;}
    
    .HalfGridBase {
      grid-template-columns: 100%;
      grid-template-rows: 50% 50%;
      grid-template-areas:
        "a"
        "b";
    }
    #p-message_img #p-mess_img_caption {font-size: .75em;}
    .BusinessTitle {font-size: 1.6em; top: 2.7vh; padding: 0;}
    .Photo-box {margin-top: 2vh;}
    .BusinessBox .Box {padding-bottom: 4.5em;} 
    .BusinessBox-01 {
      .Photo1 {inset: 5% auto auto -7%;}
      .Photo4 {inset: 58% auto auto -12%;}
      .Photo5 {inset: 74% -16% auto auto;}
    }
    .BusinessBox-02 {
      .Photo1 {inset: 9% auto auto -5%;}
      .Photo2 {inset: 5% auto auto 49%;}
      .Photo4 {inset: 61% auto auto -7%;}
      .Photo5 {inset: 67% -11% auto auto;}
    }
    .BusinessBox-03 {
      .Photo1 {inset: 10% auto auto -13%;}
      .Photo2 {inset: 5% auto auto 48%;}
      .Photo3 {inset: 40% auto auto 7%;}
      .Photo4 {inset: 74% auto auto -9%;}
      .Photo5 {inset: 56% -8% auto auto;}
    }
    .BusinessBox-04 {
      .Photo1 {inset: 4% auto auto -5%;}
      .Photo2 {inset: 37% auto auto 6%;}
      .Photo3 {inset: 12% -12% auto auto;}
      .Photo4 {inset: 68% auto auto -10%;}
      .Photo5 {inset: 59% -22% auto auto;}
    }
    .BusinessBox-05 {
      .Photo1 {inset: 4% auto auto -3%;}
      .Photo2 {inset: 35% auto auto 8%;}
      .Photo3 {inset: 9% -15% auto auto;}
      .Photo4 {inset: 72% auto auto -15%;}
      .Photo5 {inset: 55% -7% auto auto;}
    }
    .BusinessBox-06 {
      .Photo1 {inset: 4% auto auto -5%;}
      .Photo2 {inset: 8% auto auto 46%;}
      .Photo3 {inset: 32% 12% auto auto;}
      .Photo4 {inset: 54% auto auto -2%;}
      .Photo5 {inset: 66% -15% auto auto;}
    }

    #VISION-box #ForLife {font-size: 9.95cqw;}
    #VISION-box {transform: translate3d(0, -65%, 0);}

    #LastTextBox {margin-top: -35vh; padding: .5em;}
    #footerBox {
      font-size: .85em;
      #Logo {width: 153px; height: 153px;}
      nav.scroll-up {
        left: .8em;
        bottom: auto;
        top: 1em;
      }
    }
    footer, .footer {font-size: .6em;}
  }
}

@media (width < 1050px) {
  body {
    /* トップの写真のために */
    #TopPhoto-R {
      .Photo2 {background-position: bottom left 17%;}
    }
  }
}
/* BisBox部分 */
@media (width < 1050px) and (width >= 600px){
  body {
    .BusinessTitle {font-size: 2.6em; top: 2.7vh;}
    .Photo-box {
      margin-top: 1vh;
      > * {height: 38%;}
    }
  }
}

@media (width < 750px) {
  body {
    #TopPhoto-R {
      .Photo2 {background-position: bottom left 18%;}
    }
  }
}

/****************** 以下は英語版用のスタイル *****************/
:lang(en) #Caution #CautionContentWrap p {line-height: 1.25; text-align: left;}
:lang(en) #Caution #CautionContentWrap dd {line-height: 1.15;}
:lang(en) {
  body {
    .BusinessTitle {transform: translate3d(-50%, 5%, 0) scale(2.7, 1);}
    .BusinessTitle.fadeIn {transform: translate3d(-50%, 5%, 0) scale(1);}
    .BusinessTitle .Jp {display: none;}
    #LastTextBox {max-width: 860px;}
    #LastText {font-weight: 500;}
    #VISION-box #COMPANY-J {
      font-family: var(--Font-Gothic);
      font-size: clamp(1em, 4.2cqw, 1.375em);
      font-weight: 200;
      letter-spacing: .05em;
    }
    #p-message_Text .Base-b {
      @container MsgTextBox (height < 300px ) {
        #Message {
          margin-block: 2.2cqh 0;
          line-height: 1.05;
          font-size: max(3.9cqw, 1.25em);
        }
      }
    }
    #p-message_img #p-mess_img_caption {
      font-size: .7812em;
      padding-bottom: 2.4em;
    }
    @media (width < 600px) and (height > 500px) {
      #p-message_img #p-mess_img_caption {
        font-size: .75em;
      }
    }
    @media (width < 850px) {
      #p-message_img #p-mess_img_caption {
        padding-bottom: .3em;
      }
    }
  }
}

/****************** ローディング画面 *****************/
body {
  #loading {
    display: inline-block;
    margin: 0;
    box-sizing: border-box;
    position: fixed;
    inset: 30vh auto auto 50%;
    transform: translate3d(-56%, 0, 0) ;
  }
  #loading.loaded {
    opacity: 0;
    visibility: hidden;
  }
  .spinner > div {
    width: 10px;
    height: 10px;
    margin-inline: 5px;
    /* background-color: #a69334; */
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0); background-color: #544605; }
  40% { -webkit-transform: scale(1.0); background-color: #fffa73; }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
    background-color: #544605;
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    background-color: #fffa73;
  }
}