@charset "utf-8";

/*--------------------------------------------------------------------

headbox

--------------------------------------------------------------------*/
/* =========================================
     SLIDESHOW SECTION
     ========================================= */
 .slideshow {margin-bottom: 130px;
    position: relative;
    width: 100%;
    /* 変更箇所: JSが無効な環境向けの予備 */
    height: 100vh;
    /* 変更箇所: JSで取得した高さを適用（1vh × 100） */
    height: calc(var(--vh, 1vh) * 100); 
    overflow: hidden;
  }
  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 10s ease;/*次の写真へ切り替わる*/
    will-change: opacity;
    /* 修正2: GPUアクセラレーションを強制し、レイヤーを独立させてカクつきを防ぐ */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .slide.active {
    opacity: 1;
  }

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 14s ease;  /* opacity → filter に変更、秒数はCOLOR_TRANSITIONに合わせて14s 白黒→カラーへの色の変化*/
    will-change: filter;
    transform: translateZ(0);
}

  .slide.colorize img {
    filter: grayscale(0%);
  }

  /* =========================================
     SCROLL HINT
     ========================================= */
  .scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    animation: hintFadeIn 2s ease 2s both;
  }
  .scroll-hint span {
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
  }

  .scroll-line {
    width: 1px;
    height: 48px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
  }

  .scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    animation: scrollDown 3s ease-in-out infinite;
  }

  @keyframes scrollDown {
    0%   { top: -100%; }
    50%  { top: 100%; }
    100% { top: 100%; }
  }

  @keyframes hintFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  
  


.inlineb{display: inline-block; text-align: center}


/* --- 既存のレイアウト（そのまま維持） --- */
.section-grid {
  align-items: center;
  display: flex;
  gap: 60px;
  padding: 0 0 80px;
  padding-left: max(60px, calc(50% - 470px));
}
.flow .section-grid {
  padding-bottom: 160px;
}
.section-grid__text {
  flex: 0 0 200px;
  padding-top: 10px;
}
.section-grid__title {line-height: 1;
  font-family: 'Cormorant', serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.section-grid__subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.section-grid__category {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 2;
  margin-bottom: 30px;
}

/* ==========================================================================
   1. 既存のレイアウト（そのまま維持）
   ========================================================================== */
.section-grid {
  align-items: center;
  display: flex;
  gap: 60px;
  padding: 0 0 80px;
  padding-left: max(60px, calc(50% - 470px));
}

.flow .section-grid {
  padding-bottom: 160px;
}

.section-grid__text {
  flex: 0 0 200px;
}

.section-grid__title {
  font-family: 'Cormorant', serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.section-grid__subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-bottom: 24px;
}

.section-grid__category {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 2;
  margin-bottom: 30px;
}


/* ==========================================================================
   2. 画像エリアとボタンの中央配置（構造の統合・修正）
   ========================================================================== */
.section-grid__image {
  flex: 1;
  min-width: 0;
  position: relative; /* btn-viewを中央配置する基準 */
}

.section-grid__image img {
  width: 100%;
  height: auto;
  display: block; /* 画像の下にできる不要な隙間を解消 */
}

.btn-view {
  display: inline-block; 
  text-align: center;  
  letter-spacing: 4px;  
  line-height: 1; 
  
  /* 常に縦横真ん中に配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* アニメーションを滑らかにする設定 */
  transition: transform 0.3s ease; 
  
  /* ボタン上でのホバーのチラつきを完全に防止 */
  pointer-events: none; 
}

/* ボタン内テキストの初期設定 */
.btn-view p {
  font-weight: 400; 
  font-size: 26px;
  margin: 0;
  color: #fff; /* 画像の上で見えやすいように白に設定 */
}

.btn-view span {
  font-size: 11px; 
  letter-spacing: 3px;
  display: inline-block;
  margin-top: 5px;
}

/* 矢印の位置（文字の右側に綺麗に配置されるよう調整） */
.btn-view .btn-view__arrow {
  position: absolute; 
  right: -20px; 
  top: 50%;
  transform: translateY(-50%); 
}


/* ==========================================================================
   3. ホバー時の同時アニメーション（新規追加・干渉対策済）
   ========================================================================== */

/* A. a（画像）にホバーしたとき、全体の拡大 ＆ 文字間隔を広げる */
.section-grid__image a:hover ~ .btn-view {
  /* 中央配置を維持しながら1.05倍に拡大 */
  transform: translate(-50%, -50%) scale(1.05); 
}

/* 文字間隔の変化をなめらかにするトランジション設定 */
.btn-view p,
.btn-view span {
  transition: letter-spacing 0.3s ease;
}

/* ホバー時に文字間隔を広げる設定（数値はお好みで調整してください） */
.section-grid__image a:hover ~ .btn-view p {
  letter-spacing: 5px; /* 初期値 4px → 8px */
}

.section-grid__image a:hover ~ .btn-view span {
  letter-spacing: 4px; /* 初期値 3px → 5px */
}


/* B. 下線の土台設定（文字幅の変化に干渉されない記述） */
.btn-view::after {
  content: "";
  position: absolute;
  bottom: -8px; /* 文字の下側からの距離 */
  
  /* leftとrightを0にすることで、文字が広がる動きに下線が自動追従します */
  left: 0;
  right: 0; 
  
  height: 1px;
  background-color: #fff; /* 白い1pxの線 */
  
  /* 初期状態は横幅をゼロ（縮んだ状態）にしておく */
  transform: scaleX(0);
  transform-origin: left center; /* 左端を起点にする（左から伸びる） */
  transition: transform 0.3s ease;
}

/* C. a（画像）にホバーしたとき、下線を左から右へ100%伸ばす */
.section-grid__image a:hover ~ .btn-view::after {
  transform: scaleX(1);
}
/* ==============================
   ABOUT US
================================= */

.about__inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 6% 0 0;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

/* ここから .about__image の中だけ設定・変更しています。
   他の要素（.about__content やテキスト等）の形状・配置には一切干渉しません。
*/
.about__image {
  flex: 0.7;
  min-width: 0;
  position: relative; /* btn-viewを中央配置する基準 */
}
.about__image a {
  display: block;
  position: relative;
  text-decoration: none;
}
.about__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ABOUT内のbtn-view用の中央配置・文字アニメーション初期設定 */
.about__image .btn-view {white-space: nowrap;
  display: inline-block; 
  text-align: center;  
  letter-spacing: 4px;  
  line-height: 1; 
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  transition: transform 0.3s ease; 
  pointer-events: none; 
}

.about__image .btn-view p {
  font-weight: 400; 
  font-size: 26px;
  margin: 0;
  color: #fff;
  
  transition: letter-spacing 0.3s ease;
}

/* 矢印の位置 */
.about__image .btn-view .btn-view__arrow {
  position: absolute; 
  right: -20px; 
  top: 50%;
  transform: translateY(-50%);
}

/* 下線の土台設定 */
.about__image .btn-view::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0; 
  height: 1px;
  background-color: #fff;
  
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

/* マウスオーバー時の連動アニメーション */
.about__image a:hover .btn-view {
  transform: translate(-50%, -50%) scale(1.05); 
}
.about__image a:hover .btn-view p {
  letter-spacing: 8px !important; /* 文字間隔を広げる */
}
.about__image a:hover .btn-view::after {
  transform: scaleX(1); /* 下線を左から右へ伸ばす */
}
/* .about__image 内の設定ここまで
*/

.about__content {
  flex: 0 0 420px;
  padding-top: 30px;
}
.about__title {line-height: 1; white-space: nowrap;
  font-family: 'Cormorant', serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.about__subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-bottom: 30px;
}
.about__text {
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 2.2;
  margin-bottom: 40px;
}

@media screen and (min-width: 640px) {
.about__title{ padding-top:30px}
}

@media screen and (min-width: 980px) {
.about {
  gap: 60px;
  padding: 0 0 160px;
  padding-right: max(60px, calc(50% - 580px)); /* ←ここが逆 */
  /* padding-left: 0 → 画像が左端へ */
}
.about__inner {align-items: center;
        max-width: 100%;
        margin: 0 auto 0 0;
        padding: 0; display: flex;    gap: 100px;
}
.about__image{width: 43% ;min-width: auto ; flex: none;}
.about__content{width: 40% ;flex: auto; padding: 0}
}
/* ==============================
   RESPONSIVE: TABLET (< 980px)
================================= */
@media screen and (max-width: 979px) {
  /* Show hamburger, hide desktop nav */

  /* Concept */
  .concept__text {
    font-size: 20px;
  }

  /* Grid sections */
  .section-grid {
    padding: 0 6% 60px;
    gap: 40px;
  }
  .section-grid__text {
    flex: 0 0 220px;
  }
.about__image{flex: auto; width: 40%}
  /* About */
  .about__inner {
    gap: 40px;
  }
  .about__content {flex:auto;
width: 60%
  }
}

/* ==============================
   RESPONSIVE: MOBILE (< 640px)
================================= */
@media screen and (max-width: 639px) {

 .slideshow {margin-bottom: 80px;}
  /* Concept */
  .concept__title,.section-grid__title ,.section-grid__title {
    font-size: 36px;
  }

  .concept__subtitle {
    margin-bottom: 35px;
  }
  .concept__text {
    font-size: 18px;
    line-height: 2;
  }
  /* Grid sections stack vertically */
  .section-grid {align-items:flex-start;
    flex-direction: column;
    padding: 0 6% 60px;
    gap: 30px;
  }
  .section-grid__text {
    flex: none; text-align: center;
    display: inline-block;
    order: 1;
  }
  .section-grid__image {
    flex: none;
    width: 100%;
    order: 2;
  }
.slider-list li{width: 380px}

.section-grid__category {margin-bottom: 0}
.section-grid__subtitle{margin-bottom: 0}

.flow .section-grid{padding-bottom:70px}

  /* About stack */
  .about {
    padding: 0px 0 160px 6%;
  }
  .about__image{width: 100%; text-align: right}
.about__image img{width: 45%}
  .about__inner {
    flex-direction: column;
    gap: 0;
  }
  .about__content {
    flex: none;
    display: inline-block; 
    padding-top: 0;
  }
  .about__title {
    font-size: 36px;
  }
  
  .about__text:last-of-type{margin-bottom: 0}

.btn-view p{font-size: 22px}

}


@media screen and (min-width: 640px) {
.about__inner{padding: 0 ; align-items:center}
}

@media screen and (min-width: 1600px) {
.concept {
    padding: 100px 0% 120px;
}
}