/* =========================================================================
   株式会社ウラーノ コーポレートサイト — スタイルシート
   モバイルファースト：基本＝モバイル、min-width で拡張。
   ========================================================================= */

/* =========================================================================
   1. デザイントークン（CSS カスタムプロパティ）
   ========================================================================= */
:root {
  /* --- カラー：ベース --- */
  --white: #FFFFFF;
  --ink: #17002A;

  /* --- アクセント（紫）スケール：500 がブランド基準色 --- */
  --purple-50:  #F7F0FC;
  --purple-100: #EEDFF9;
  --purple-200: #DCC0F1;
  --purple-300: #C49AE7;
  --purple-400: #A765DB;
  --purple-500: #8832CE;
  --purple-600: #6E28A8;
  --purple-700: #561F84;

  /* --- ニュートラル（紫みのグレー）スケール --- */
  --gray-50:  #FAF8FC;
  --gray-100: #F3F0F7;
  --gray-200: #E7E2EE;
  --gray-300: #D0C9DB;
  --gray-400: #A89FB8;
  --gray-500: #7E7390;
  --gray-600: #5A4E6E;
  --gray-700: #3B2C52;

  /* --- セマンティック --- */
  --success: #2E9E6B;
  --error:   #D6456A;
  --warning: #D98A2B;

  /* --- 意味付けエイリアス --- */
  --accent:        var(--purple-500);
  --accent-hover:  var(--purple-600);
  --accent-soft:   var(--purple-50);
  --accent-soft-2: var(--purple-100);

  --text-body:      var(--ink);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-on-accent: var(--white);
  --text-link:      var(--purple-500);

  --surface-page:    var(--white);
  --surface-section: var(--gray-50);
  --surface-card:    var(--white);
  --surface-tint:    var(--purple-50);

  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-accent:  var(--purple-500);

  --focus-ring: var(--purple-300);

  /* --- タイポグラフィ --- */
  --font-heading: 'Zen Maru Gothic', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  --text-display: clamp(28px, 4.5vw, 44px); /* ヒーロー見出し */
  --text-h2: clamp(24px, 3vw, 32px);        /* セクション見出し */
  --text-h3: clamp(18px, 2vw, 22px);        /* カード見出し */
  --text-lead: 18px;                         /* リード文 */
  --text-base: 16px;                         /* 本文 */
  --text-sm: 14px;                           /* 補足 */
  --text-xs: 12px;                           /* 注記 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --leading-tight: 1.4;
  --leading-normal: 1.6;
  --leading-body: 1.9;

  --tracking-heading: 0.04em;
  --tracking-body: 0.02em;

  /* --- スペーシング（4px ベース） --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --- レイアウト --- */
  --container-max: 1080px;
  --container-pad: clamp(20px, 5vw, 40px);
  --section-gap: clamp(64px, 10vw, 112px);

  /* --- 角丸 --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* --- 影 --- */
  --shadow-sm: 0 1px 4px rgba(23, 0, 42, 0.05);
  --shadow-md: 0 4px 16px rgba(23, 0, 42, 0.07);
  --shadow-lg: 0 8px 28px rgba(23, 0, 42, 0.10);

  /* --- 線 --- */
  --line-width: 1px;
  --line-accent-width: 3px;

  /* --- フォーカス --- */
  --focus-shadow: 0 0 0 3px var(--focus-ring);

  /* --- トランジション --- */
  --transition-fast: 0.15s ease;

  /* --- 固定ヘッダー高さ --- */
  --header-height: 68px;
}

/* =========================================================================
   2. ベース／リセット
   ========================================================================= */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

/* スムーズスクロール時、固定ヘッダーに隠れないようオフセット */
:target,
section[id],
[id] {
  scroll-margin-top: 84px;
}

/* =========================================================================
   3. レイアウト共通
   ========================================================================= */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--section-gap) 0;
  background: var(--surface-page);
}

/* tint セクション（薄グレー面・角丸・左右に余白） */
.section--tint {
  background: var(--surface-section);
  margin: 0 clamp(16px, 4vw, 40px);
  border-radius: var(--radius-xl);
}

/* =========================================================================
   4. セクションタイトル（SectionTitle）
   ========================================================================= */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.section-title__label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.section-title__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--text-body);
  margin: 0;
}

.section-title__rule {
  width: 48px;
  height: var(--line-accent-width);
  border-radius: var(--radius-full);
  background: var(--accent);
}

.section-title__lead {
  margin: 0;
  max-width: 620px;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* =========================================================================
   5. ボタン（Button）
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  /* md サイズ既定 */
  padding: 12px 28px;
  font-size: 16px;
}

.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
}

.btn--secondary {
  background: var(--white);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn--secondary:hover { background: var(--accent-soft); }

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid transparent;
}
.btn--ghost:hover { background: var(--accent-soft); }

.btn--sm { padding: 8px 20px; font-size: 14px; }
.btn--lg { padding: 16px 44px; font-size: 17px; }

.btn--full { display: flex; width: 100%; }

/* =========================================================================
   6. ヘッダー（SiteHeader）
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--border-default);
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex: none;
}
.site-header__logo img { height: 32px; width: auto; }

/* デスクトップナビ（既定はモバイル：非表示） */
.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

.site-nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-body);
  line-height: 1.5;
  transition: color var(--transition-fast);
}
.site-nav__link:hover { color: var(--accent); }

/* ハンバーガーボタン（モバイルのみ表示） */
.nav-toggle {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.nav-toggle__bar {
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイル展開メニュー */
.mobile-nav {
  border-top: 1px solid var(--border-default);
  background: var(--white);
  padding: var(--space-4) var(--container-pad) var(--space-5);
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}
.mobile-nav.is-open { display: flex; }

.mobile-nav__link {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-body);
  transition: color var(--transition-fast);
}
.mobile-nav__link:hover { color: var(--accent); }

/* =========================================================================
   7. ヒーロー（Hero）
   ========================================================================= */
.hero {
  background: var(--surface-page);
  padding: clamp(40px, 6vw, 36px) 0 clamp(28px, 4vw, 52px);
  overflow-x: clip;
}

.hero__title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--tracking-heading);
  color: var(--text-body);
  margin: 0 0 clamp(20px, 3vw, 36px);
}

.hero__visual {
  position: relative;
}

.hero__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}

.hero__photos {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.hero__photo {
  width: clamp(260px, 30vw, 440px);
  height: clamp(300px, 40vw, 480px);
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}

/* JS が複製した4枚目以降はデスクトップでは非表示（モバイルのループ用） */
.hero__photo:nth-child(n+4) { display: none; }

/* モバイルでは横スクロールで3枚を見せる */
@media (max-width: 719px) {
  .site-header__inner { height: 50px; }
  .site-header__logo img { height: 24px; }

  .hero__photos {
    gap: 0;
    padding: 0;
    overflow: hidden;
    width: max-content;
  }
  .hero__photos.is-ready {
    animation: scroll-left 20s linear infinite;
  }
  .hero__photo {
    width: min(72vw, 320px);
    height: min(86vw, 380px);
    margin-left: clamp(16px, 4vw, 32px);
  }
  .hero__photo:nth-child(n+4) { display: block; }

  /* モバイル：背景画像は比率を保ったまま高さいっぱいに（左右ははみ出す） */
  .hero__bg {
    width: auto;
    height: 100vw;
    min-height: 100%;
    max-width: none;
  }

  /* 右から左へ動かすアニメーションの定義 */
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}

/* =========================================================================
   8. ミッション（Mission）
   ========================================================================= */
.mission {
  background: transparent;
  background-image: url(../img/mission-bg.webp);
  background-repeat: no-repeat;
  background-position: center bottom 60px;
  background-size: 100% auto;
}
@media (max-width: 719px) {
  .mission { background-size: 200% auto; }
}

.mission__body {
  max-width: 720px;
  margin: var(--space-7) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.mission__body p {
  margin: 0;
  text-align: center;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.mission__figure-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.mission__figure {
  position: relative;
  width: min(551px, 92vw);
  aspect-ratio: 551 / 488;
}

.mission__img--portrait {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 88%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}

.mission__img--landscape {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 61%;
  height: 46%;
  box-sizing: border-box;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
  border: 6px solid var(--surface-page);
}

/* =========================================================================
   9. 事業内容（Business）
   ========================================================================= */
.business__grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.biz-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.biz-item__img {
  width: 100%;
  aspect-ratio: 944 / 600; /* 元画像の比率を固定。画面幅が変わっても比率は不変 */
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}

.biz-item__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-body);
}

.biz-item__body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

@media (min-width: 719px) {
  .business__grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* =========================================================================
   10. 会社概要（Company）
   ========================================================================= */
.company__wrap {
  max-width: 760px;
  margin: var(--space-7) auto 0;
}

.company__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.company__table tr {
  border-bottom: 1px solid var(--border-default);
}
.company__table tr:first-child {
  border-top: 1px solid var(--border-default);
}

.company__table th {
  text-align: left;
  vertical-align: top;
  width: clamp(96px, 22%, 180px);
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-body);
  white-space: nowrap;
}

.company__table td {
  padding: var(--space-5) 0;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

.company__note {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* =========================================================================
   11. お問い合わせ（Contact）
   ========================================================================= */
.contact__card {
  max-width: 640px;
  margin: var(--space-7) auto 0;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 4vw, 40px);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* フォームフィールド（Field） */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-body);
}

.field__required {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  line-height: 1.7;
}

.control {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.control:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-shadow);
}

textarea.control {
  resize: vertical;
  min-height: 180px;
}

/* 送信エラーメッセージ */
.contact__error {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--error);
  text-align: center;
  min-height: 1.2em;
}

/* 送信完了メッセージ */
.contact__done {
  text-align: center;
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-6) 0;
}
.contact__done.is-visible { display: flex; }
.contact__form.is-hidden { display: none; }

.contact__check {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact__done h3 { margin: 0; font-size: var(--text-h3); }
.contact__done p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* =========================================================================
   12. フッター（SiteFooter）
   ========================================================================= */
.site-footer {
  background: var(--surface-page);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
.site-footer__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* =========================================================================
   13. レスポンシブ：デスクトップナビの表示切替（>= 880px）
   ========================================================================= */
@media (min-width: 880px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* アクセシビリティ：動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .hero__photos { animation: none !important; }
}