/* ============================================================
   style.css  —  nava
   構造：
     1. RESET
     2. BASE（body / h1-h4 / p / a）
     3. LAYOUT CORE（.container のみ）
     4. HERO（変更禁止）
     5. ABOUT（1ブロックに統合）
     6. 新セクション共通（.sec-* クラス）
     7. SERVICE
     8. FOR THOSE WHO
     9. PROCESS
    10. CONTACT
    11. FOOTER
   ============================================================ */


/* ============================================================
   1. RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; /* スムーススクロール */
}

body {
  margin: 0;
  padding: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ============================================================
   2. BASE
   ============================================================ */

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  color: #222;
  line-height: 1.8;
  background: #ffffff;
}

/* 見出しリセット（font-size は各セクションで上書き） */
h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  margin: 0;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

/* SPだけ改行（確実版） */
.br-sp{ display:none !important; }   /* PCは絶対出さない */

@media (min-width: 769px){
  .br-sp{ display:none !important; }
}

@media (max-width: 768px){
  .br-sp{ display:inline !important; } /* SPだけ出す */
}

@media (max-width: 768px) {
  /* 既存… */

  /* ▼追加：ABOUTのリードだけ、強制brを無効化 */
  #section-about .about-lead br {
    display: none !important;
  }
}

.honeypot{
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.honeypot *{
  display: none !important;
}

/* ============================================================
   3. LAYOUT CORE
   ============================================================ */

/* 中央寄せコンテナ（HERO/ABOUTが使う。新セクションも共用） */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 900px) {
  .container {
    padding: 0 20px;
  }
}


/* ============================================================
   4. HERO（変更禁止ゾーン ここから）
   ============================================================ */

/* ----- HERO LOGO ----- */
#section-hero .hero-mark {
  width: 102px;
  height: auto;
  display: block;
  margin: 0 auto 16px;
}

/* ----- HERO SECTION ----- */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 0;
  background: #fff;
  overflow: hidden;

  /* 調整変数 */
  --vortex-size: 140vmax;
  --vortex-opacity: 0.08;
  --vortex-shift-x: 0px;
  --vortex-shift-y: -140px;
  --hero-center-shift-y: -24px;
}

/* ============================================================
   HERO VORTEX - position / zoom 分離（カクつき対策）
============================================================ */

/* 渦レイヤー */
.hero-vortex{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

/* 位置固定：translateだけ（transitionは付けない） */
.vortex-pos{
  position:absolute;
  left:50%;
  top:50%;
  transform:
    translate(-50%, -50%)
    translate(var(--vortex-shift-x, 0px), var(--vortex-shift-y, 0px));
  will-change: transform;
}

/* ズーム：transitionをやめて、keyframesで一発 */
.vortex-zoom{
  transform-origin: 50% 50%;
  will-change: transform;
  transform: translateZ(0) scale(1); /* 最終状態 */
}

/* hero読み込み直後だけズームアニメ */
.hero .vortex-zoom{
  animation: vortexZoomIn 1600ms cubic-bezier(.2,.8,.2,1) both;
}

/* 大→小 */
@keyframes vortexZoomIn{
  from { transform: translateZ(0) scale(30.0); }
  to   { transform: translateZ(0) scale(1); }
}

/* rotorはサイズ枠だけ（transformしない） */
#vortex-rotor,
.vortex-rotor{
  width: var(--vortex-size);
  height: var(--vortex-size);
}

/* SVGは枠いっぱい（ここでtransform/transitionは絶対しない） */
#vortex-rotor svg,
.vortex-rotor svg{
  width:100%;
  height:100%;
  display:block;
}

/* 各リング：色はCSS変数で統一 */
.vortex-ring{
  --ring-rgb: 126, 126, 127;
}

/* 塗りは常に rgba(var(--ring-rgb), var(--ring-a)) */
.vortex-ring path{
  fill: rgba(var(--ring-rgb), var(--ring-a)) !important;
}

/* 回転キーフレーム */
@keyframes ring-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ----- HERO TEXT REVEAL ----- */

/* 初期（非表示） */
.hero-center .hero-mark,
.hero-center .hero-catch,
.hero-center .hero-lead {
  opacity: 0;
  transform: translateY(10px);
}

/* JS で .is-hero-in を付与すると表示 */
.hero.is-hero-in .hero-mark,
.hero.is-hero-in .hero-catch,
.hero.is-hero-in .hero-lead {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity  700ms cubic-bezier(.2, .8, .2, 1),
    transform 700ms cubic-bezier(.2, .8, .2, 1);
}

.hero.is-hero-in .hero-mark  { transition-delay: 0ms;   }
.hero.is-hero-in .hero-catch { transition-delay: 180ms; }
.hero.is-hero-in .hero-lead  { transition-delay: 360ms; }

/* ロゴ＆コピーレイアウト */
.hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
}

.hero-center {
  text-align: center;
  transform: translateY(96px);
  padding-bottom: calc(32px + 64px + 18px);
}

.hero-mark {
  width: 102px;
  height: auto;
  display: inline-block;
  margin: 0 0 18px;
}

.hero-catch {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 200;
  color: #444444;
  font-kerning: normal;
  font-feature-settings: "palt" 1; /* プロポーショナル化（効く環境で詰まる） */
  font-variant-east-asian: normal; /* 念のため */
  font-size: clamp(48px, 6.0vw, 76px);
  letter-spacing: 0.02em;              /* ← まずこれが最重要 */
  line-height: 1.5;
  margin: 56px 0 0;
}

@media (min-width: 769px){
  #section-hero .hero-catch{ white-space: nowrap; }
}


.hero-lead {
  font-weight: 300;
  color: #5e5e5e;
  font-size: clamp(18px, 2.0vw, 48px);
  line-height: 1.9;
  margin: 80px 0 0;
}

@media (max-width: 768px){
  #section-hero .hero-lead{
    margin-top: 32px; /* ←ここを調整。例：24〜44px */
    font-size: 20px;  /* 任意：SPは小さめにしたいなら */
  }
}


/* ----- HERO DIVIDER ----- */
.hero-divider {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  width: 1px;
  height: 80px;
  background: #7e7e7f;

  -webkit-mask-image: linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 0%;
  -webkit-mask-position: 0 0;
  mask-image: linear-gradient(#000 0 0);
  mask-repeat: no-repeat;
  mask-size: 100% 0%;
  mask-position: 0 0;

  animation: hero-divider-reveal-hide 2.2s ease-in-out infinite;
}

@media (max-height: 780px) { .hero-divider { height: 44px; } }
@media (max-height: 740px) { .hero-divider { display: none; } }

@keyframes hero-divider-reveal-hide {
  0%   { -webkit-mask-size: 100% 0%;   -webkit-mask-position: 0 0;    mask-size: 100% 0%;   mask-position: 0 0;    }
  18%  { -webkit-mask-size: 100% 0%;   -webkit-mask-position: 0 0;    mask-size: 100% 0%;   mask-position: 0 0;    }
  52%  { -webkit-mask-size: 100% 100%; -webkit-mask-position: 0 0;    mask-size: 100% 100%; mask-position: 0 0;    }
  68%  { -webkit-mask-size: 100% 100%; -webkit-mask-position: 0 0;    mask-size: 100% 100%; mask-position: 0 0;    }
  69%  { -webkit-mask-size: 100% 100%; -webkit-mask-position: 0 100%; mask-size: 100% 100%; mask-position: 0 100%; }
  100% { -webkit-mask-size: 100% 0%;   -webkit-mask-position: 0 100%; mask-size: 100% 0%;   mask-position: 0 100%; }
}

/* ----- HERO SP ----- */
@media (max-width: 768px) {
  .hero {
    --vortex-size: 190vmax;
    --hero-center-shift-y: -10px;
    --vortex-shift-x: 0px;
    --vortex-shift-y: -130px;
  }
  .hero-mark    { width: 86px; margin-bottom: 14px; }
  .hero-divider { height: 56px; margin-top: 28px; }
}

/* ----- HERO reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
  #vortex-rotor,
  .vortex-rotor,
  .vortex-ring {
    animation: none !important; /* JS制御アニメを止める唯一の手段なので必須 */
  }
  .hero-center .hero-mark,
  .hero-center .hero-catch,
  .hero-center .hero-lead {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ============================================================
   4. HERO（変更禁止ゾーン ここまで）
   ============================================================ */


/* ============================================================
   5. ABOUT
   ============================================================ */

/* ---- ダークセクション修飾クラス ----
   背景・文字色・antialiasedの制御はこのクラスのみで行う。
   将来 footer 等にも使い回し可能。                        */
.section-dark {
  background: #444;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ダーク背景用：sec-header の文字色だけ白に上書き */
.sec-header--light .sec-en-title,
.sec-header--light .sec-ja-title {
  color: #fff;
}

.sec-header--light .sec-ja-title {
  opacity: 0.75;
}

/* ---- #section-about 固有スタイル ---- */

/* section 自体：padding は他セクションと同リズム */
#section-about {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
}

/* container */
#section-about .about-container {
  position: relative;
}

/* 本文ブロック（z-index:1 で透かしより前面） */
#section-about .about-body {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* リード文 */
#section-about .about-lead {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 500;
  font-feature-settings: "palt" 1; /* プロポーショナル化（効く環境で詰まる） */
  font-variant-east-asian: normal; /* 念のため */
  font-size: clamp(21px, 1.7vw, 26px);
  letter-spacing: 0.02em;
  line-height: 2.0;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 64px;
}

/* 本文 */
#section-about .about-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 15px);
  letter-spacing: 0.01em;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.72);
  margin: 20px 0 0;
}

/* ダーク背景用：sec-cta-link の色だけ上書き
   margin-top / text-align は共通 .sec-cta をそのまま使用 */
#section-about .sec-cta-link {
  color: rgba(255, 255, 255, 0.80);
  border-bottom-color: transparent; /* 通常時は非表示 */
}

#section-about .sec-cta-link:hover {
  color: rgba(255, 255, 255, 0.98);
  border-bottom-color: rgba(255, 255, 255, 0.60); /* hover時のみ表示 */
}

/* ---- SP ---- */
@media (max-width: 768px) {
  #section-about {
    padding: 80px 0;
  }

  #section-about .about-body {
    text-align: left;
  }

  .sec-header {
    padding-top: 16px !important;
    padding-bottom: 32px !important;
    margin-bottom: 32px !important;
  }
}


/* ============================================================
   6. 新セクション共通（.sec-* クラス）
      対象：#section-service / #section-for-those-who /
            #section-process / #section-contact
   ============================================================ */

/* セクションヘッダー */
.sec-header {
  text-align: center;
  margin-bottom: 72px;
  position: relative;
  z-index: 1;
  padding: 72px 0 56px;
}

/* ------- 渦アニメーション用 SVG ラッパー ------- */
/* overflow:hidden + height=width/2 で上半円のみ表示          */
/* .sec-en-title 直前に挿入し、タイトル中央を基準に配置        */
.sec-header-vortex {
  --vortex-size: min(480px, 70vw);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -128%) translateY(calc(var(--vortex-size) / 2));

  width: 100vw; /* ★ここだけ：表示領域を横いっぱいに */

  height: calc(var(--vortex-size) * 0.78); /* 数字を変えて調整 */
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sec-header-vortex svg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: var(--vortex-size);  /* 渦サイズは今のまま */
  height: var(--vortex-size); /* 渦サイズは今のまま */
  display: block;
  overflow: visible;
}

/* 各リング：初期は非表示・透明 */
.sec-header-vortex .sh-ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* ダーク背景内 */
.sec-header--light .sec-header-vortex .sh-ring circle {
  stroke: rgba(255, 255, 255, 0.16);
}

/* ------- タイトル文字：初期は非表示 ------- */
.sec-en-title,
.sec-ja-title {
  opacity: 0; /* JSが制御 */
}

/* 1文字ずつラップするspan */
.sec-title-char {
  display: inline-block;
  overflow: hidden;       /* マスク効果 */
  vertical-align: bottom;
  line-height: 1.15;
}

.sec-title-char-inner {
  display: inline-block;
  transform: translateY(110%); /* 地平線より下 */
  will-change: transform;
}

/* 英語タイトル */
.sec-en-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(56px, 5vw, 72px);
  letter-spacing: 0.02em;
  color: #444;
  margin: 0;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

/* 日本語サブタイトル */
.sec-ja-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #888;
  margin: 8px 0 0;
  position: relative;
  z-index: 1;
}

/* ダーク背景用：色上書き */
.sec-header--light .sec-en-title {
  color: #fff;
}

.sec-header--light .sec-ja-title {
  color: rgba(255,255,255,0.75);
}

/* セクション末尾 CTA */
.sec-cta {
  text-align: center;
  margin-top: 72px;
  position: relative;
  z-index: 1;
}

/* ===== ui-arrow: SVG矢印共通 ===== */
.ui-arrow{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
}

.ui-arrow svg{
  display:block;
  width:25px;
  height:4px;
}

/* CTA内：少し小さめにしたいならここで調整 */
.ui-arrow{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
}

.ui-arrow svg{
  display:block;
  width:25px;
  height:4px;
}

.sec-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #999;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}

.sec-cta-link:hover {
  color: #333;
  border-bottom-color: #aaa;
}

@media (prefers-reduced-motion: reduce) {
  .sec-header-vortex .sh-ring {
    opacity: 1;
    animation: none;
  }
  .sec-en-title,
  .sec-ja-title {
    opacity: 1;
  }
  .sec-title-char-inner {
    transform: none;
  }
}


/* ============================================================
   7. SERVICE
   ============================================================ */

#section-service {
  position: relative;
  background: #fff;
  padding: 90px 0;
  overflow: hidden;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 1;
}

.service-item {
  text-align: center;
  padding: 48px 32px;
  border-left: 1px solid #e8e8e8;
}

.service-item:first-child {
  border-left: none;
}

.service-icon {
  width: 112px;
  height: 125px;
  color: #666; 
  margin: 0 auto 28px;
}

.service-icon svg {
  width: 100%;
  height: 100%;
}

.service-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: 36px;
  letter-spacing: 0.02em;
  color: #444;
  margin: 0 0 20px;
}

.service-sub {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #888;
  margin: 0 0 18px;
  line-height: 1.7;

  /* 追加：2行分の高さを確保して縦センター */
  min-height: calc(1.7em * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #888;
  line-height: 2.0;
  margin: 0;
}

@media (max-width: 768px) {
  #section-service {
    padding: 80px 0;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-item {
    border-left: none;
    border-top: 1px solid #e8e8e8;
    padding: 48px 20px;
  }

  .service-item:last-child {
    border-bottom: 1px solid #e8e8e8;
  }

  .service-icon {
    width: 90px;  /* ★SP調整用：PCは112px */
    height: 100px; /* ★SP調整用：PCは125px */
    margin-bottom: 16px; /* ★SP：アイコン下余白（全体） */
  }

  /* web promotion（2番目）のみ個別余白 */
  .service-item:nth-child(2) .service-icon {
    margin-bottom: 1px; /* ★SP：web promotionのアイコン下余白 */
  }
}


/* ============================================================
   8. FOR THOSE WHO
   ============================================================ */

#section-for-those-who {
  position: relative;
  background: #fafafa;
  padding: 90px 0;
  overflow: hidden;
}

.forthosewho-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.forthosewho-item {
  position: relative;
  padding: 36px 40px;
  text-align: center;
}

/* 括弧風ボーダー（左辺） */
.forthosewho-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 50px 0 0 50px;
}

/* 括弧風ボーダー（右辺） */
.forthosewho-item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 24px;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 50px 50px 0;
}

.forthosewho-item span {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #555;
  line-height: 2.0;
  display: block;
}

@media (max-width: 768px) {
  #section-for-those-who {
    padding: 80px 0;
  }

  .forthosewho-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .forthosewho-item {
    padding: 28px 32px;
  }
}


/* ============================================================
   9. PROCESS
   ============================================================ */

#section-process {
  position: relative;
  background: #fff;
  padding: 90px 0;
  overflow: hidden;
}

.process-list {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.process-item {
  border-top: 1px solid #e4e4e4;
  padding: 48px 0 36px;
}

.process-item--last {
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 48px;
}

.process-item-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.process-text {
  flex: 1;
}

.process-step-num {
  font-family: "Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.02em;
  color: #444;
  margin: 0 0 10px;
}

.process-step-sub {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #666;
  margin: 0 0 20px;
  line-height: 1.8;
}

.process-step-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #888;
  line-height: 2.1;
  margin: 0;
}

.process-icon {
  color: #666;
  flex-shrink: 0;
  width: 107px;
  height: 104px;
  margin-top: 6px;
}

.process-icon svg {
  width: 100%;
  height: 100%;
}

.process-divider {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

.process-divider svg {
  width: 24px;
  height: 16px;
}

@media (max-width: 768px) {
  #section-process {
    padding: 80px 0;
  }

  .process-item-inner {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }

  /* process-text を透過してフレックス子要素を直接並べる */
  .process-text {
    display: contents;
  }

  .process-step-num  { order: 1; width: 100%; text-align: center; margin-bottom: 12px; }
  .process-step-sub  { order: 2; width: 100%; text-align: center; margin-bottom: 20px; }
  .process-icon      { order: 3; width: 80px; height: 80px; margin: 0 0 20px; }
  .process-step-desc { order: 4; width: 100%; text-align: left; }

  .process-step-num {
    font-size: 28px;
  }
}


/* ============================================================
   10. CONTACT
   ============================================================ */

#section-contact {
  position: relative;
  background: #fafafa;
  padding: 90px 0 100px;
  overflow: hidden;
}

.contact-lead {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 500;
  font-feature-settings: "palt" 1; /* プロポーショナル化（効く環境で詰まる） */
  font-variant-east-asian: normal; /* 念のため */
  font-size: clamp(21px, 1.7vw, 26px);
  letter-spacing: 0.02em;
  color: #555;
  text-align: center;
  line-height: 2.0;
  margin: 0 0 64px;
  position: relative;
  z-index: 1;
}

.contact-form {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.form-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
}

.form-label {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #666;
  min-width: 110px;
  padding-top: 14px;
  flex-shrink: 0;
}

.form-field-wrap {
  flex: 1;
  position: relative;
}

.form-input {
  width: 100%;
  background: #f3f3f3;
  border: none;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: background 0.25s;
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder {
  color: #bbb;
  font-weight: 300;
}

.form-input:focus {
  background: #eeeeee;
}

.form-textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.8;
  padding-right: 140px; /* 「入力必須項目です」と被らないよう右側に余白 */
}

.form-required {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #aaa;
  pointer-events: none;
  white-space: nowrap;
}

.form-row--textarea .form-required {
  top: 14px;
  transform: none;
}

.form-actions {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.form-submit {
  display: block;
  width: 100%;
  max-width: 480px;
  padding: 18px 24px;
  background: #5b5b5b;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s;
}

/* 送信ボタンだけ矢印をほんの少し上げる */
.form-submit .ui-arrow{
  transform: translateY(-4px);
}

.form-submit:hover {
  background: #444;
}

.form-reset {
  background: none;
  border: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #aaa;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.25s;
}

.form-reset:hover {
  color: #666;
}

@media (max-width: 768px) {
  #section-contact {
    padding: 80px 0;
  }

  .form-row {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }

  .form-label {
    padding-top: 0;
    min-width: auto;
  }

  .form-required {
    font-size: 10px;
  }

  /* 幅オーバー防止 */
  .contact-form {
    width: 100%;
    box-sizing: border-box;
  }

  .form-field-wrap,
  .form-input {
    width: 100%;
    box-sizing: border-box;
  }

  /* iOSタップ時ズーム防止（16px未満で発生） */
  .form-input {
    font-size: 16px;
  }
}


/* ============================================================
   11. FOOTER
   ============================================================ */

#section-footer {
  background: #444;
  color: #fff;
  text-align: center;
  padding: 60px 24px 48px;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 48px;
}

.footer-nav a {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.25s;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-nav span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.footer-logo {
  width: 80px;
  margin: 0 auto 28px;
}

.footer-logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer-tagline {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 32px;
}

.footer-copy {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

@media (max-width: 768px) {
  .footer-nav {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 48px;
  }

  .footer-nav span {
    display: none;
  }

  .footer-nav a {
    font-size: 14px;
  }
}

/* フッターロゴ：黒地向けパステルHue */
#section-footer .footer-logo img{
  animation: footerLogoPastel 5s ease-in-out infinite;
  will-change: filter;
}

@keyframes footerLogoPastel{
  0%{
    filter: sepia(0.45) hue-rotate(200deg) saturate(1.6) brightness(1.25);
  }
  50%{
    filter: sepia(0.45) hue-rotate(310deg) saturate(1.6) brightness(1.25);
  }
  100%{
    filter: sepia(0.45) hue-rotate(200deg) saturate(1.6) brightness(1.25);
  }
}

@media (prefers-reduced-motion: reduce){
  #section-footer .footer-logo img{ animation:none; }
}



/* ============================================================
   Footer Tagline - 地平線マスク（ライン無し）
   IN : 1文字ずつ 下→上
   OUT: 左→右で 1文字ずつ 下へ沈んで消える
============================================================ */

.tagline-horizon{
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* 1文字ラッパー（上下マスク） */
.tagline-horizon .ch{
  display:inline-block;
  overflow:hidden;
  vertical-align: baseline;
  line-height: 1.2;
}

/* 実際に動く文字 */
.tagline-horizon .ch > span{
  display:inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}

/* ===== IN ===== */
.tagline-horizon.is-in .ch > span{
  animation: chIn 700ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i) * 28ms + 80ms);
}

/* ===== OUT（左→右で順番に沈む） ===== */
.tagline-horizon.is-out .ch > span{
  animation: chOut var(--out-ms) cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * var(--stagger));
}

@keyframes chIn{
  0%   { transform: translateY(110%); opacity: 0; }
  100% { transform: translateY(0%);   opacity: 1; }
}

/* 下へ沈みながら薄くして消える（パッと消えない） */
@keyframes chOut{
  0%   { transform: translateY(0%);     opacity: 1; }
  100% { transform: translateY(-120%);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .tagline-horizon .ch > span{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.footer-tagline{
  position: relative;
  height: 1.4em; /* 文字の高さ確保 */
}

.tagline-layer{
  position:absolute;
  inset:0;
  display:inline-block;
  white-space: nowrap;
  overflow: visible;     /* ← hidden をやめる */
}

/* 文字単位でマスク */
.tagline-layer .ch{
  display:inline-block;
  overflow:hidden;
  vertical-align: bottom;
  line-height: 1.2;      /* 文字箱を安定させる */
}

.tagline-layer .ch > span{
  display:inline-block;
  transform: translateY(120%);
  opacity: 0;
}

:root{
  --in-ms: 720ms;
  --out-ms: 900ms;
  --stagger: 24ms;
}

/* IN：下→中央 */
.tagline-layer.is-in .ch > span{
  animation: chIn var(--in-ms) cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i) * var(--stagger));
}

/* OUT：中央→上（優雅） */
.tagline-layer.is-out .ch > span{
  animation: chOut var(--out-ms) cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * var(--stagger));
}

@keyframes chIn{
  0%   { transform: translateY(120%); opacity: 0; }
  100% { transform: translateY(0%);   opacity: 1; }
}
@keyframes chOut{
  0%   { transform: translateY(0%);    opacity: 1; }
  100% { transform: translateY(-120%); opacity: 0; }
}



/* ============================================================
   12. page top
   ============================================================ */

.pagetop{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(90,90,90,.85);
  color: #CCC;
  cursor: pointer;
  z-index: 9999;

  /* ▼非表示はdisplayで完全に消す（iOS対策） */
  display: none;

  /* ▼表示時のアニメ用 */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}

.pagetop.is-show{
  display: grid;
  place-items: center;

  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* PageTop icon size */
.pagetop .pagetop-icon{
  width: 22px;
  height: 7px;
  display: block;
}

/* SPは70% */
@media (max-width: 768px){
  .pagetop .pagetop-icon{
    width: 18px; /* 22 * 0.7 ≒ 15 */
    height: 7px; /* 7  * 0.7 ≒ 5  */
  }
}