@charset "UTF-8";
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", sans-serif, sans-serif;
}

@-webkit-keyframes navLinkFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes navLinkFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes scale {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.2, 1.2);
  }
}
@keyframes scale {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.2, 1.2);
  }
}
@-webkit-keyframes moveBg {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}
@keyframes moveBg {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}
@-webkit-keyframes moveBgCenter {
  from {
    background-position: 75% 0;
  }
  to {
    background-position: 0% 0;
  }
}
@keyframes moveBgCenter {
  from {
    background-position: 75% 0;
  }
  to {
    background-position: 0% 0;
  }
}
@-webkit-keyframes moveLeft {
  0% {
    right: -100px;
  }
  100% {
    right: 100%;
  }
}
@keyframes moveLeft {
  0% {
    right: -100px;
  }
  100% {
    right: 100%;
  }
}
@-webkit-keyframes slideZoom {
  0% {
    transform: translateX(0) scale(1);
  }
  100% {
    transform: translateX(0) scale(1.2); /* 1.2倍にズーム */
  }
}
@keyframes slideZoom {
  0% {
    transform: translateX(0) scale(1);
  }
  100% {
    transform: translateX(0) scale(1.2); /* 1.2倍にズーム */
  }
}
/* ==============================
  base
============================== */
/* 全体の選択色を変える場合 */
::-moz-selection {
  background-color: #ea5504; /* 選択時の背景色 */
  color: #fff; /* 選択時の文字色 */
}
::selection {
  background-color: #ea5504; /* 選択時の背景色 */
  color: #fff; /* 選択時の文字色 */
}

/* Firefox用の対応（必要に応じて） */
::-moz-selection {
  background-color: #ffcc00;
  color: #000000;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background-color: #222222;
}

.main {
  overflow: hidden;
  z-index: 10000;
}

/* ==============================
  layout
============================== */
.layout {
  display: block;
}
@media screen and (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: 2.5fr 7.5fr;
    min-height: 100vh;
  }
}

/* 画面全体切替時のアニメーション */
.page {
  opacity: 0;
}

/* 表示完了後 */
.page.is-ready {
  opacity: 1;
}

/* ==============================
  header（新HTMLに統一）
  - .hamburger
  - .header__nav.active
============================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* hamburger */
  /* nav */
  /* ==============================
    walter
    ============================== */
}
@media screen and (min-width: 1024px) {
  .header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 60px 40px;
  }
}
.header__logo {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 45px;
  z-index: 200;
}
@media screen and (min-width: 1024px) {
  .header__logo {
    left: unset;
    top: 40px;
    left: 40px;
    width: 50px;
  }
}
.header__logo__img {
  width: 100%;
  height: auto;
  display: block;
}
.header .hamburger {
  position: fixed;
  top: 25px;
  right: 25px;
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 250;
  background: transparent;
  border: none;
  padding: 0;
}
@media screen and (min-width: 1024px) {
  .header .hamburger {
    display: none;
  }
}
.header .hamburger span {
  display: block;
  height: 3px;
  background: #fff; /* ここはお好みで $white にしてもOK */
  border-radius: 2px;
  transition: 0.3s;
}
.header .hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.header .hamburger.active span:nth-child(2) {
  opacity: 0;
}
.header .hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
.header__nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 180;
}
@media screen and (min-width: 1024px) {
  .header__nav {
    position: fixed;
    inset: 130px 0px 0 25px;
    width: auto;
    max-width: none;
    height: auto;
    background: transparent;
    transform: none;
    transition: none;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.header__nav.active {
  transform: translateX(0);
}
.header__nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 1024px) {
  .header__nav__menu {
    gap: 20px;
  }
}
.header__nav__menu__list {
  margin: 0;
  padding: 0;
}
.header__nav__menu__list a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  font-family: "kinuta-maruminold-stdn", serif;
  cursor: pointer;
  /* SP時（白背景なので黒文字） */
  color: #fff;
  font-size: 4.2666666667vw;
  /* PC時（背景が暗い想定なら白） */
}
@media screen and (min-width: 768px) {
  .header__nav__menu__list a {
    font-size: 2.0833333333vw;
  }
}
@media screen and (min-width: 1024px) {
  .header__nav__menu__list a {
    color: #fff;
    font-size: 1rem;
  }
}
.header__water {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: rgb(206, 193, 190);
  pointer-events: none;
  z-index: 0;
  display: none;
  /* ===== 水面の波（回転する塊で作る） ===== */
}
@media screen and (min-width: 1024px) {
  .header__water {
    display: block;
  }
}
.header__water::before {
  content: "";
  position: absolute;
  /* 水面の少し上から見せたいのでマイナス */
  top: -50%;
  /* 中央基準で巨大に置く */
  left: 50%;
  width: 400%;
  aspect-ratio: 1/1;
  /* ★白70%の水と馴染ませる：テクスチャ無しの薄い白 */
  background: rgb(206, 193, 190);
  /* 波っぽい“歪んだ円” */
  border-radius: 50% 50%/55% 80%;
  /* 中央合わせ */
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center center;
  /* うっすら境界 */
  filter: blur(0.4px);
  opacity: 1;
  /* 回転でゆらぎ */
  -webkit-animation: headerWaveSpin 10s linear infinite;
          animation: headerWaveSpin 10s linear infinite;
}

@-webkit-keyframes headerWaveSpin {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes headerWaveSpin {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}
/* ==============================
  nav hover marker
============================== */
.c-txt.marker {
  position: relative;
  z-index: 1;
  padding: 5px 10px;
}
.c-txt.marker::before {
  background: #ff701e;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s;
  z-index: -1;
}
.c-txt.marker:hover {
  color: #fff;
}
.c-txt.marker:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.c-txt.marker .hover-img {
  position: absolute;
  top: -10%;
  left: -30px;
  width: 28px;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.c-txt.marker:hover .hover-img {
  opacity: 1;
  visibility: visible;
}

/* ==============================
  main-bg
============================== */
.main--bg {
  position: relative;
  background-color: #222222;
  overflow: hidden;
}
.main__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  will-change: opacity, transform;
}
.main__bg--main {
  background-color: #222222;
  opacity: 1;
}

/* ==============================
  main visual
============================== */
.main__visual {
  height: 100vh;
  width: 100%;
  background-image: url("../img_sui_1006/sui_main_260126.png");
  background-size: cover;
  background-position: 62% center;
  background-repeat: no-repeat;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .main__visual {
    background-position: center;
  }
}
.main__visual__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}
@media screen and (min-width: 768px) {
  .main__visual__logo {
    width: 25%;
  }
}
@media screen and (min-width: 1024px) {
  .main__visual__logo {
    width: 21%;
    left: 40%;
  }
}
.main__visual__logo__img {
  width: 100%;
  height: auto;
  display: block;
}
.main__visual__sui__img {
  width: 45%;
  position: absolute;
  bottom: -5%;
  right: 12%;
}
@media screen and (min-width: 1024px) {
  .main__visual__sui__img {
    width: 21%;
    bottom: -7%;
  }
}
.main__visual__sui__img__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
  site-bg
============================== */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
}
.site-bg__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.site-bg__layer.is-active {
  opacity: 1;
}
.site-bg__layer--main {
  background: #222222;
}
.site-bg__layer--about {
  background: #222222;
}

/* ==============================
  about / bg
============================== */
.about--bg {
  position: relative;
  background-color: #222222;
  overflow: hidden;
}
.about__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  will-change: opacity, transform;
}
.about__bg--about {
  background: url("/assets/img_sui_1006/sui_bg.png") no-repeat center/cover;
  opacity: 0;
}

.about {
  position: relative;
  width: 100%;
  height: auto;
  font-family: "kinuta-maruminold-stdn", serif;
  font-weight: 400;
  color: #fff;
  position: relative;
  margin-top: 20%;
}
.about__bg {
  position: absolute;
  inset: 0;
  background: url("/assets/img_sui_1006/sui_bg.png") no-repeat center/cover;
  z-index: -1;
}
@media screen and (min-width: 1024px) {
  .about__text__wrap {
    display: flex;
    flex-direction: row-reverse;
    margin-right: 13%;
  }
}
.about__text1 {
  font-size: 5.3333333333vw;
  text-align: end;
  writing-mode: vertical-rl;
  margin: 50% auto;
}
@media screen and (min-width: 1024px) {
  .about__text1 {
    font-size: 1.953125vw;
    margin: 0;
    text-align: left;
  }
}
.about__text1__text2 {
  transform: translateY(35%);
}
@media screen and (min-width: 1024px) {
  .about__text1__text2 {
    transform: translateY(0);
  }
}
.about__text2 {
  font-size: 3.7333333333vw;
  text-align: center;
  /* 余白の重複をまとめる */
}
@media screen and (min-width: 1024px) {
  .about__text2 {
    font-family: "kinuta-maruminold-stdn", serif;
    font-size: 1.5625vw;
    text-align: right;
    margin-right: 4%;
    letter-spacing: 0.1em;
    line-height: 1.4em;
  }
}
.about__text2__3, .about__text2__6, .about__text2__7, .about__text2__8, .about__text2__9, .about__text2__10 {
  margin-top: 4%;
}
@media screen and (min-width: 1024px) {
  .about__text2__3, .about__text2__6, .about__text2__7, .about__text2__8, .about__text2__9, .about__text2__10 {
    margin-top: 35px;
  }
}
.about__hl2 {
  writing-mode: vertical-rl;
  margin: 50% auto;
}
@media screen and (min-width: 1024px) {
  .about__hl2 {
    writing-mode: unset;
    margin: 0 0 0 10%;
  }
}
.about__hl2__text {
  font-size: 5.3333333333vw;
}
@media screen and (min-width: 1024px) {
  .about__hl2__text {
    font-size: 1.953125vw;
  }
}
.about__text3 {
  font-size: 3.7333333333vw;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .about__text3 {
    text-align: left;
    margin-left: 10%;
    letter-spacing: 0.1em;
    line-height: 0.8em;
  }
}
.about__text3__1, .about__text3__2 {
  margin-top: 4%;
}
@media screen and (min-width: 1024px) {
  .about__text3__1, .about__text3__2 {
    font-size: 1.5625vw;
    margin-top: 35px;
  }
}
@media screen and (min-width: 1024px) {
  .about__text__wrap2 {
    margin-top: 30%;
  }
}
.about__ame {
  width: 80%;
  position: absolute;
  top: -19%;
  left: -10%;
}
@media screen and (min-width: 1024px) {
  .about__ame {
    width: 55%;
    top: -31%;
    left: -5%;
  }
}
.about__ame__img {
  width: 100%;
  height: auto;
  display: block;
}
.about__kawa {
  position: absolute;
  width: 250%;
  top: 8%;
  left: -68%;
}
@media screen and (min-width: 1024px) {
  .about__kawa {
    width: 120%;
    top: 5%;
    left: -10%;
  }
}
.about__kawa__img {
  width: 100%;
  height: auto;
  display: block;
}

.river {
  transform: rotate(-9deg);
  position: absolute;
  left: -55%;
  right: 0;
  bottom: -5%;
  z-index: 0;
}
@media screen and (min-width: 1024px) {
  .river {
    left: 0;
    bottom: -30%;
    transform: none;
  }
}
.river__img {
  display: block;
  width: 160%;
  height: auto;
  will-change: clip-path;
}
@media screen and (min-width: 1024px) {
  .river__img {
    width: 100%;
  }
}

/* ==============================
  sui henka
============================== */
.sui__henka {
  position: relative;
  color: #fff;
  margin-top: 40%;
  margin-bottom: 150%;
}
@media screen and (min-width: 1024px) {
  .sui__henka {
    margin-bottom: 70%;
  }
}
.sui__henka__text__wrap {
  display: flex;
  justify-content: normal;
  align-items: unset;
  margin-left: 16%;
}
@media screen and (min-width: 1024px) {
  .sui__henka__text__wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-left: unset;
  }
}
.sui__henka__text__r, .sui__henka__text__c, .sui__henka__text__l {
  writing-mode: vertical-rl;
  font-size: 1rem;
  font-family: "kinuta-maruminold-stdn", serif;
}
@media screen and (min-width: 1024px) {
  .sui__henka__text__r, .sui__henka__text__c, .sui__henka__text__l {
    font-size: 2.24609375vw;
  }
}
.sui__henka__text__c {
  margin: 0 4%;
}
@media screen and (min-width: 1024px) {
  .sui__henka__text__c {
    margin: 0 2%;
  }
}
.sui__henka__img {
  position: absolute;
  top: 89%;
  left: 50%;
  transform: translate(-80%, -50%);
  width: 140%;
}
@media screen and (min-width: 1024px) {
  .sui__henka__img {
    top: 90%;
    transform: translate(-50%, -50%);
    width: 90%;
  }
}
.sui__henka__img2 {
  position: absolute;
  top: 260%;
  left: 8%;
  transform: translate(-50%, -50%);
  width: 3%;
}
@media screen and (min-width: 1024px) {
  .sui__henka__img2 {
    top: 223%;
    left: 50%;
  }
}

/* ==============================
  design
============================== */
.design {
  position: relative;
  background-image: url("/assets/img_sui_1006/design_bg_0126@72x.webp");
  background-repeat: repeat-y;
  background-size: contain;
}
.design__before {
  position: absolute;
  top: 0.1%;
  left: 10%;
  transform: translate(-50%, -100%);
  width: 210%;
  height: 100px;
  background-image: url(/assets/img_sui_1006/design_bg_before_016@72x.webp);
  background-size: cover;
  z-index: 0;
  pointer-events: none;
  /* アニメ用：初期状態 */
  opacity: 0;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  will-change: clip-path, opacity;
}
@media screen and (min-width: 1024px) {
  .design__before {
    width: 100%;
    left: 50%;
  }
}
.design__after {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  height: 580px;
  background-image: url(/assets/img_sui_1006/design_bg_btm@72x.webp);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  /* アニメ用：初期状態 */
  opacity: 0;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  will-change: clip-path, opacity;
}
@media screen and (min-width: 1024px) {
  .design__after {
    height: 1300px;
  }
}
.design__h2__1 {
  position: relative;
  font-size: 5.3333333333vw;
  font-family: "kinuta-maruminold-stdn", serif;
  text-align: center;
  z-index: 1;
  padding-top: 5%;
}
@media screen and (min-width: 1024px) {
  .design__h2__1 {
    font-size: 1.953125vw;
  }
}
.design__text1 {
  position: relative;
  font-size: 4vw;
  text-align: center;
  margin-top: 2%;
  font-family: "kinuta-maruminold-stdn", serif;
  color: #333;
  z-index: 1;
}
@media screen and (min-width: 1024px) {
  .design__text1 {
    font-size: 1.3671875vw;
  }
}
.design__img1 {
  width: 90%;
  margin: 7% auto 0;
}
@media screen and (min-width: 1024px) {
  .design__img1 {
    width: 70%;
    margin: 50px auto 0;
  }
}
.design__img1__img {
  width: 100%;
  height: auto;
  display: block;
}
.design__img2 {
  position: relative;
  z-index: 1;
  width: 90%;
  margin: 10% auto 0;
}
@media screen and (min-width: 1024px) {
  .design__img2 {
    width: 360px;
    margin: 80px auto 0;
  }
}
.design__img2__img {
  width: 100%;
  height: auto;
  display: block;
}
.design__logo__wrap, .design__gra__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  position: relative;
  width: 90%;
  margin: 3% auto 0;
}
@media screen and (min-width: 1024px) {
  .design__logo__wrap, .design__gra__wrap {
    width: 80%;
  }
}
.design__logo__img, .design__gra__img {
  flex: 1 1 33.333%;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
@media screen and (min-width: 1024px) {
  .design__logo__img, .design__gra__img {
    flex: 1 1 25%;
  }
}
.design__logo__img__img, .design__gra__img__img {
  width: 100%;
  height: auto;
  display: block;
}
.design__logo__hl, .design__gra__hl {
  font-size: 4.2666666667vw;
  position: relative;
  font-family: "kinuta-maruminold-stdn", serif;
  margin-left: 5%;
  margin-top: 7%;
}
@media screen and (min-width: 1024px) {
  .design__logo__hl, .design__gra__hl {
    font-size: 1.953125vw;
    margin-left: 10%;
  }
}
.design__text {
  width: 90%;
  margin: 5% auto 0;
}
@media screen and (min-width: 1024px) {
  .design__text {
    width: 70%;
  }
}
.design__h2 {
  font-size: 4.2666666667vw;
  text-align: left;
  font-family: "kinuta-maruminold-stdn", serif;
  color: #333;
}
@media screen and (min-width: 1024px) {
  .design__h2 {
    font-size: 1.953125vw;
  }
}
.design__text__text {
  font-size: 4vw;
  margin-top: 5%;
  font-family: "kinuta-maruminold-stdn", serif;
  color: #333;
}
@media screen and (min-width: 1024px) {
  .design__text__text {
    font-size: 1.5625vw;
    line-height: 1.7em;
  }
}

/* ==============================
  design__menu
  PC：横並び
  SP：横スクロール（縦書き維持）
============================== */
/* ============================== design__menu（SP横スクロール＋クリック中央寄せ） ============================== */
.design__menu__h2,
.design__menu__text {
  transition: opacity 0.3s ease;
  white-space: pre-line;
  line-height: 1.8em;
}

.design__menu__list {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 0 5%;
  margin: 0;
  list-style: none;
  scrollbar-width: none;
}
.design__menu__list::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 1024px) {
  .design__menu__list {
    flex-wrap: wrap;
    flex-direction: row-reverse;
    overflow-x: visible;
    justify-content: center;
    scroll-snap-type: none;
    padding: 0;
    width: 660px;
    margin: auto;
  }
}

.design__menu__list__item {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-width: 100%;
  margin: 0 auto;
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s ease;
  z-index: 0;
}
@media screen and (min-width: 1024px) {
  .design__menu__list__item {
    min-width: auto;
    max-width: 220px;
  }
}
.design__menu__list__item .design__menu__list__text {
  position: relative;
  z-index: 2;
  font-family: "kinuta-maruminold-stdn", serif;
  font-size: 4.2666666667vw;
  color: #fff;
  transition: color 0.3s ease, transform 0.3s ease;
  writing-mode: vertical-rl;
}
@media screen and (min-width: 1024px) {
  .design__menu__list__item .design__menu__list__text {
    font-size: 1.125rem;
  }
}
.design__menu__list__item .design__menu__img {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%) scale(1.05);
  width: 20px;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .design__menu__list__item .design__menu__img {
    width: 90%;
  }
}
.design__menu__list__item.list__active {
  z-index: 10;
}
.design__menu__list__item.list__active .design__menu__list__text {
  color: #ea5504;
  transform: translateY(-2px);
  font-weight: bold;
}
.design__menu__list__item.list__active .design__menu__img {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px) scale(1);
}
@media screen and (min-width: 1024px) {
  .design__menu__list__item:hover {
    transform: translateY(-5px);
  }
  .design__menu__list__item:hover .design__menu__list__text {
    color: #ea5504;
  }
  .design__menu__list__item:hover .design__menu__img {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) scale(1);
  }
}

.design__menu {
  width: 90%;
  margin: 14% auto 0;
}
@media screen and (min-width: 1024px) {
  .design__menu {
    width: 90%;
  }
}
.design__menu__strike {
  display: block;
  width: 1939px;
  height: 32px;
  margin-left: 48%;
}
@media screen and (min-width: 1024px) {
  .design__menu__strike {
    display: block;
    width: 607px;
    height: 18px;
    margin: auto;
  }
}
.design__menu__strike__img {
  width: 100%;
  height: auto;
  display: block;
}
.design__menu__h2 {
  font-size: 5.3333333333vw;
  text-align: center;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  margin-top: 5%;
}
@media screen and (min-width: 1024px) {
  .design__menu__h2 {
    font-size: 1.25rem;
    text-align: left;
    margin-top: -8%;
    width: 30%;
  }
}
.design__menu__text {
  font-size: 4vw;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  text-align: left;
  width: 90%;
  margin: 10% auto;
}
@media screen and (min-width: 1024px) {
  .design__menu__text {
    font-size: 1.125rem;
    width: 100%;
    margin: 0;
  }
}
@media screen and (min-width: 1024px) {
  .design__menu__text__wrap {
    width: 70%;
  }
}
@media screen and (min-width: 1024px) {
  .design__menu__sol {
    display: flex;
    width: 780px;
    justify-content: center;
    margin-top: 15%;
    margin-right: auto;
    margin-left: auto;
    flex-direction: row;
  }
}

.design-menu__rail,
.design-menu__connector {
  pointer-events: none;
}

/* ==============================
  tech
============================== */
.tech {
  margin-top: 18%;
  position: relative;
  z-index: 1;
}
.tech__h2 {
  font-size: 4.2666666667vw;
  font-family: "kinuta-maruminold-stdn", serif;
  text-align: center;
  line-height: 1.8em;
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .tech__h2 {
    font-size: 1.953125vw;
  }
}
.tech__img {
  width: 90%;
  margin: 4% auto 0;
}
@media screen and (min-width: 1024px) {
  .tech__img {
    width: 80%;
  }
}
.tech__img__img {
  width: 100%;
  height: auto;
  display: block;
}
.tech__text__wrapper {
  width: 90%;
  margin: 5% auto 0;
}
@media screen and (min-width: 1024px) {
  .tech__text__wrapper {
    width: 69%;
    margin: 0;
  }
}
.tech__text__wrap1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10%;
}
@media screen and (min-width: 1024px) {
  .tech__text__wrap1 {
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 80%;
    margin: 15% auto;
  }
}
.tech__h3 {
  font-size: 5.3333333333vw;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  font-weight: 300;
  text-align: center;
  writing-mode: unset;
}
@media screen and (min-width: 1024px) {
  .tech__h3 {
    font-size: 1.953125vw;
    text-align: left;
    writing-mode: vertical-rl;
    letter-spacing: 0.5em;
  }
}
.tech__h3__left {
  margin-top: 11.8%;
}
.tech__text1 {
  font-size: 3.7333333333vw;
  font-family: "kinuta-maruminold-stdn", serif;
  font-weight: 300;
  text-align: left;
  color: #fff;
  line-height: 1.8em;
}
@media screen and (min-width: 1024px) {
  .tech__text1 {
    font-size: 1.5625vw;
    line-height: 1.7em;
  }
}
.tech__bold {
  position: relative;
  font-size: 4.8vw;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  font-weight: 300;
  display: inline-block;
  text-align: center;
  margin: 5% auto;
}
.tech__bold::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #f5b617;
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
}
@media screen and (min-width: 1024px) {
  .tech__bold {
    font-size: 1.7578125vw;
    text-align: left;
    margin: 3% auto;
  }
}
.tech__design {
  width: 75%;
  margin: 10% auto;
}
@media screen and (min-width: 1024px) {
  .tech__design {
    width: 60%;
  }
}
.tech__design__img {
  width: 100%;
  height: auto;
}

.t5 {
  margin-top: 5%;
}

/* ==============================
  osae
============================== */
.osae {
  height: 100vh;
  position: relative;
  margin-top: 10%;
}
@media screen and (min-width: 1024px) {
  .osae {
    margin-top: 15%;
  }
}
.osae__img1, .osae__img2, .osae__img3 {
  display: block;
  height: auto;
  position: absolute;
}
.osae__img1 {
  width: 54%;
  top: 10%;
  left: 20%;
}
@media screen and (min-width: 1024px) {
  .osae__img1 {
    width: 34%;
    left: 53%;
    transform: translate(-50%, -50%);
  }
}
.osae__img2 {
  width: 54%;
  top: 25%;
  right: -20%;
}
@media screen and (min-width: 1024px) {
  .osae__img2 {
    width: 32%;
    top: 43%;
    left: 80%;
    right: auto;
    transform: translate(-50%, -50%);
  }
}
.osae__img3 {
  width: 61%;
  top: 40%;
  left: -2%;
}
@media screen and (min-width: 1024px) {
  .osae__img3 {
    width: 39%;
    top: 60%;
    left: 26%;
    transform: translate(-50%, -50%);
  }
}
.osae__text {
  font-size: 3.7333333333vw;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  text-align: left;
  line-height: 1.5em;
  position: absolute;
  top: 69%;
  left: 8%;
}
@media screen and (min-width: 1024px) {
  .osae__text {
    font-size: 1.5625vw;
    top: 62%;
    left: 50%;
  }
}

/* ==============================
  detail
============================== */
.detail {
  width: 100%;
  margin-top: 136%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  /* height: 100vh; */
  position: relative;
  margin-bottom: 140%;
}
@media screen and (min-width: 1024px) {
  .detail {
    flex-direction: row;
    justify-content: flex-end;
    align-items: baseline;
    height: 150vh;
    margin-bottom: 0;
    margin-top: 20%;
    z-index: -1;
  }
}
.detail__img1 {
  width: 58%;
  margin: 0 auto;
  margin-top: 100%;
}
@media screen and (min-width: 1024px) {
  .detail__img1 {
    width: 21%;
    margin: 16% 7% 0 0;
  }
}
.detail__img1__img {
  width: 100%;
  height: auto;
  display: block;
}
.detail__img2 {
  width: 120%;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .detail__img2 {
    width: 58%;
    margin-right: -7%;
  }
}
.detail__img2__img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  will-change: clip-path, opacity;
}
.detail__h2 {
  width: 3%;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -90%);
}
.detail__h2__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
  contact
============================== */
.contact {
  position: relative;
  background-image: url("/assets/img_sui_1006/footer_bg.webp");
  padding: 2% 0;
  background-size: cover;
  /* ====== ここが::beforeの置き換え（実体レイヤー） ====== */
  /* 中身は上に（beforeより前面へ） */
}
.contact__before {
  pointer-events: none;
  content: "";
  display: block;
  width: 130%;
  height: 242%;
  background-image: url("/assets/img_sui_1006/contact_before@150x.webp");
  background-size: cover;
  position: absolute;
  top: -121%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  /* ★マスク初期（GSAPでも初期セットするけど保険） */
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
@media screen and (min-width: 1024px) {
  .contact__before {
    width: 120%;
    height: 242%;
  }
}
.contact__bg {
  width: 98%;
  margin: 5% auto;
  position: relative;
  z-index: 1;
  height: 260px;
}
@media screen and (min-width: 1024px) {
  .contact__bg {
    height: 300px;
  }
}
.contact__bg__img {
  width: 100%;
  width: 350px;
  height: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 1024px) {
  .contact__bg__img {
    width: 752px;
    margin: auto;
  }
}
.contact__hl {
  font-size: 3.7333333333vw;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  font-weight: 300;
  text-align: left;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
@media screen and (min-width: 1024px) {
  .contact__hl {
    font-size: 1.375rem;
    top: 20%;
    left: 17%;
    transform: translate(0);
  }
}
.contact__text {
  font-size: 3.2vw;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  text-align: left;
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
@media screen and (min-width: 1024px) {
  .contact__text {
    font-size: 1rem;
    top: 30%;
    left: 17.4%;
    transform: translate(0);
  }
}
.contact__web__reserve, .contact__mail__reserve {
  height: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
@media screen and (min-width: 1024px) {
  .contact__web__reserve, .contact__mail__reserve {
    left: 5%;
    transform: translate(0);
  }
}
.contact__web__reserve {
  bottom: 28%;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .contact__web__reserve {
    width: 100%;
    bottom: 30%;
  }
}
.contact__web__reserve__img {
  width: 100%;
}
.contact__mail__reserve {
  bottom: 0%;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .contact__mail__reserve {
    bottom: 5%;
  }
}
.contact__img {
  width: 100%;
}
.contact__reserve__wrap {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 180px;
}
@media screen and (min-width: 1024px) {
  .contact__reserve__wrap {
    position: absolute;
    top: 56%;
    left: 24%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 180px;
  }
}

.footer {
  margin-top: 110%;
}
@media screen and (min-width: 1024px) {
  .footer {
    margin-top: 65%;
  }
}
.footer__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .footer__inner {
    margin: 0 auto;
    width: 750px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 400px;
  }
}
.footer__logo {
  margin: 0 auto;
  width: 120px;
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .footer__logo {
    width: 200px;
    height: auto;
    margin: 0;
  }
}
.footer__logo__img {
  width: 100%;
}
.footer__nav__wrap {
  width: 150px;
}
@media screen and (min-width: 1024px) {
  .footer__nav__wrap {
    width: 200px;
    height: 90px;
  }
}
.footer__nav {
  inset: 0 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 180;
}
@media screen and (min-width: 1024px) {
  .footer__nav {
    width: auto;
    max-width: none;
    height: auto;
    background: transparent;
    transform: none;
    transition: none;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.footer__nav.active {
  transform: translateX(0);
}
.footer__nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  display: none;
}
@media screen and (min-width: 1024px) {
  .footer__nav__menu {
    display: block;
  }
}
.footer__nav__menu__list {
  margin: 0;
  padding: 0;
}
.footer__nav__menu__list a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  font-family: "kinuta-maruminold-stdn", serif;
  cursor: pointer;
  /* SP時（白背景なので黒文字） */
  color: #fff;
  font-size: 11px;
  /* PC時（背景が暗い想定なら白） */
}
@media screen and (min-width: 768px) {
  .footer__nav__menu__list a {
    font-size: 11px;
  }
}
@media screen and (min-width: 1024px) {
  .footer__nav__menu__list a {
    color: #fff;
    font-size: 0.6875rem;
  }
}
.footer__company {
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .footer__company {
    align-items: unset;
    margin: 0;
    height: 90px;
  }
}
.footer__company__text {
  font-size: 11px;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
}
.footer__company__insta {
  width: 25px;
  height: 25px;
}
.footer__company__insta__img {
  width: 100%;
}
.footer__copy {
  font-size: 0.75rem;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  margin-top: 40px;
  font-family: "kinuta-maruminold-stdn", serif;
}
@media screen and (min-width: 1024px) {
  .footer__copy {
    margin-top: 0;
  }
}

/* ==============================
  utility
============================== */
.br__sp {
  display: block;
}
@media screen and (min-width: 1024px) {
  .br__sp {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .br__pc {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .br__pc {
    display: block;
  }
}

.sp__img {
  display: block;
}
@media screen and (min-width: 1024px) {
  .sp__img {
    display: none;
  }
}

.sp__tab__img {
  display: block;
}
@media screen and (min-width: 768px) {
  .sp__tab__img {
    display: none;
  }
}

.tab__img {
  display: none;
}
@media screen and (min-width: 768px) {
  .tab__img {
    display: block;
  }
}

.tab__img__works {
  display: none;
}
@media screen and (min-width: 768px) {
  .tab__img__works {
    display: flex;
  }
}

.pc__img {
  display: none;
}
@media screen and (min-width: 1024px) {
  .pc__img {
    display: block;
  }
}

/* ==============================
  fade-up
============================== */
.js-fade-up {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

/* ==============================
  fade-in
============================== */
.js-fade-in {
  opacity: 0;
  will-change: opacity;
}

/* ==============================
  margin_top20px
============================== */
@media screen and (min-width: 1024px) {
  .mt0__pc {
    margin-top: 0;
  }
}

@media screen and (min-width: 1024px) {
  .mt5 {
    margin-top: 5px;
  }
}

@media screen and (min-width: 1024px) {
  .mt10 {
    margin-top: 10px;
  }
}

.mt20 {
  margin-top: 20px;
}
@media screen and (min-width: 1024px) {
  .mt20 {
    margin-top: 20px;
  }
}

.mt30 {
  margin-top: 30px;
}
@media screen and (min-width: 1024px) {
  .mt30 {
    margin-top: 30px;
  }
}

.mt40 {
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .mt40 {
    margin-top: 40px;
  }
}

.logo__main {
  position: relative;
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .logo__main {
    width: 580px;
    height: 100vh;
    margin: auto;
  }
}
.logo__main__logo {
  width: 180px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.1;
}
@media screen and (min-width: 1024px) {
  .logo__main__logo {
    width: 225px;
  }
}
.logo__main__h1 {
  font-size: 1.125rem;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  text-align: left;
  margin-top: 90px;
}
@media screen and (min-width: 1024px) {
  .logo__main__h1 {
    font-size: 1.875rem;
    text-align: left;
    margin-top: 40px;
  }
}
.logo__main__text {
  font-size: 0.9375rem;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  text-align: left;
  line-height: 1.5em;
}
@media screen and (min-width: 1024px) {
  .logo__main__text {
    font-size: 1rem;
    text-align: left;
    line-height: 1.7em;
  }
}

@media screen and (min-width: 1024px) {
  .logo__content {
    width: 100%;
    margin: 0 auto;
  }
}
.logo__content__h2 {
  font-size: 0.75rem;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  line-height: 1.5em;
}
@media screen and (min-width: 1024px) {
  .logo__content__h2 {
    font-size: 0.875rem;
    text-align: left;
    line-height: 1.5em;
  }
}
.logo__content__h2__wrap {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
}
@media screen and (min-width: 1024px) {
  .logo__content__h2__wrap {
    width: 580px;
    margin: 0 auto;
    margin-top: 100px;
  }
}
.logo__content__img {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
}
@media screen and (min-width: 1024px) {
  .logo__content__img {
    margin-top: 20px;
  }
}
.logo__content__text {
  font-size: 0.9375rem;
  color: #fff;
  font-family: "kinuta-maruminold-stdn", serif;
  line-height: 2em;
}
@media screen and (min-width: 1024px) {
  .logo__content__text {
    font-size: 1rem;
    text-align: left;
    line-height: 2em;
  }
}
.logo__content__text__wrap {
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .logo__content__text__wrap {
    width: 580px;
    margin: 0 auto;
    margin-bottom: 10%;
  }
}

.logo__main__content {
  position: relative;
  margin-top: 50px;
}
@media screen and (min-width: 1024px) {
  .logo__main__content {
    margin-top: 0;
  }
}

/* pin対象 */
.logo__content__pin {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像 */
.logo__content__img-wrap {
  position: relative;
  width: 100%;
}

.logo__content__img {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.logo__content__img.is-active {
  opacity: 1;
  position: relative;
}

.logo__main__river {
  display: none;
}
@media screen and (min-width: 1024px) {
  .logo__main__river {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
}

.logo__main__river__img {
  display: block;
  width: 240px;
  height: auto;
  -webkit-animation: floatY 4.2s ease-in-out infinite;
          animation: floatY 4.2s ease-in-out infinite;
  will-change: transform;
}
@media screen and (min-width: 1024px) {
  .logo__main__river__img {
    width: 320px;
  }
}

.pin-spacer {
  background-color: #f8f7f6;
}

.text__orange {
  color: #ff701e;
}

.logo__main__img {
  width: 100%;
}
/*# sourceMappingURL=style.css.map */