/* =========================================================
   株式会社YST コーポレートサイト  style.css
   依存ライブラリ無し / レスポンシブ対応
   ========================================================= */

:root{
  --navy:        #16263f;   /* 見出し・ボタン・ロゴ */
  --navy-deep:   #0d1726;   /* 運営実績の背景・フッター */
  --gold:        #c89a3e;   /* アクセント（CTA・数値） */
  --gold-dark:   #b3852f;
  --text:        #44505f;   /* 本文 */
  --text-light:  #6b7684;
  --line:        #e4e8ee;
  --bg-cream:    #f6f2ea;   /* SERVICEセクション */
  --bg-gray:     #f2f4f6;   /* STRENGTHSセクション */
  --chip-bg:     #e7edf6;
  --chip-text:   #2c4a73;
  --blue:        #2f5d99;   /* 図解・アイコンのアクセント（紺より明るい青） */
  --blue-soft:   #eaf1fa;   /* アイコン下地・淡い青 */
  --white:       #ffffff;
  --radius:      14px;
  --shadow:      0 10px 30px rgba(16,38,63,.08);
  --maxw:        1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:var(--text);
  line-height:1.85;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* スマホ：オフキャンバスメニューによる横スクロールを防止 */
  width:100%;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:15px 34px; border-radius:999px; font-weight:700; font-size:1rem;
  cursor:pointer; border:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-gold{ background:var(--gold); color:#fff; box-shadow:0 8px 22px rgba(200,154,62,.35); }
.btn-gold:hover{ background:var(--gold-dark); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:#fff; border-radius:8px; }
.btn-navy:hover{ background:#1f3557; }
.btn-block{ display:flex; justify-content:center; width:100%; padding:17px; font-size:1.05rem; }

/* ---------- 共通：セクション ---------- */
.section{ padding:96px 0; }
.section-head{ text-align:center; margin-bottom:56px; }
.label{
  display:inline-block; background:var(--chip-bg); color:var(--chip-text);
  font-size:.72rem; font-weight:700; letter-spacing:.12em;
  padding:6px 16px; border-radius:999px;
}
.label-dark{ background:rgba(255,255,255,.1); color:#d8e0ec; }
.section-title{
  font-size:2.1rem; color:var(--navy); margin:18px 0 0; font-weight:800; letter-spacing:.02em;
}
.section-title-light{ color:#fff; }
.title-rule{ display:block; width:46px; height:3px; background:var(--gold); margin:18px auto 0; border-radius:2px; }
.title-rule-light{ background:var(--gold); }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  transition:background .3s ease, box-shadow .3s ease;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:27px; width:auto; display:block; }
.brand-name{ font-weight:800; font-size:1.18rem; color:#fff; transition:color .3s ease; }
.nav{ display:flex; gap:34px; }
.nav a{ font-size:.95rem; font-weight:600; color:#fff; transition:color .2s ease, opacity .2s ease; }
.nav a:hover{ opacity:.7; }

/* スクロール後：白背景ヘッダー */
.site-header.scrolled{ background:#fff; box-shadow:0 2px 14px rgba(16,38,63,.07); }
.site-header.scrolled .brand-name{ color:var(--navy); }
.site-header.scrolled .nav a{ color:var(--navy); }

/* ハンバーガー（モバイル） */
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#fff; transition:transform .3s ease, opacity .3s ease, background .3s ease; }
.site-header.scrolled .nav-toggle span{ background:var(--navy); }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:url("images/hero.jpg") center/cover no-repeat;
  color:#fff; overflow:hidden;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(13,23,38,.82) 0%, rgba(13,23,38,.55) 55%, rgba(13,23,38,.35) 100%);
}
.hero-inner{ position:relative; z-index:2; text-align:center; padding:110px 24px 90px; }
.hero-badge{
  display:inline-block; border:1px solid rgba(255,255,255,.5);
  padding:7px 20px; border-radius:999px; font-size:.82rem; font-weight:600; letter-spacing:.06em;
  margin-bottom:30px; backdrop-filter:blur(2px);
}
.hero-title{ font-size:2.55rem; line-height:1.5; font-weight:800; margin:0 0 26px; text-shadow:0 2px 18px rgba(0,0,0,.3); }
.hero-lead{ max-width:680px; margin:0 auto 38px; font-size:1.05rem; line-height:1.9; color:#eef1f5; }
.hero-scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.7rem; letter-spacing:.18em; color:#fff;
}
.hero-scroll-arrow{ font-size:1.1rem; animation:bounce 1.8s infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* =========================================================
   会社について
   ========================================================= */
.about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-image img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; }
.section-title-left{ font-size:1.85rem; color:var(--navy); font-weight:800; line-height:1.5; margin:16px 0 22px; }
.about-text .label{ margin-bottom:4px; }
.about-text p{ font-size:1rem; }

/* =========================================================
   カード共通グリッド
   ========================================================= */
.card-grid{ display:grid; gap:28px; }
.service-grid{ grid-template-columns:repeat(4,1fr); }
.strengths-grid{ grid-template-columns:repeat(2,1fr); }
.stats-grid{ grid-template-columns:repeat(3,1fr); }

.card-icon{
  display:inline-grid; place-items:center; width:46px; height:46px;
  background:var(--chip-bg); color:var(--navy); border-radius:11px; margin-bottom:14px;
}
.card-icon svg{ width:24px; height:24px; }

/* 事業内容カード */
.service{ background:var(--bg-cream); }
.card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(16,38,63,.13); }
.card-img{ aspect-ratio:3/2; overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.card:hover .card-img img{ transform:scale(1.05); }
.card-body{ padding:24px 22px 28px; }
.card-body h3{ color:var(--navy); font-size:1.15rem; margin:0 0 10px; font-weight:800; }
.card-body p{ font-size:.92rem; line-height:1.8; margin:0; color:var(--text-light); }

/* =========================================================
   業務の流れ
   ========================================================= */
.flow-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.flow-step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.flow-step:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(16,38,63,.13); }
/* ステップ画像（カード上部・縦横比を統一） */
.flow-img{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--bg-gray); }
.flow-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.flow-step:hover .flow-img img{ transform:scale(1.04); }
/* ステップ番号バッジ（画像の上に重ねる） */
.flow-badge{
  position:absolute; top:12px; left:12px; width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:.95rem; font-weight:800;
  display:grid; place-items:center; border:2px solid #fff; box-shadow:0 3px 10px rgba(13,23,38,.35);
}
.flow-body{ padding:20px 20px 24px; }
.flow-num{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--blue); margin-bottom:8px; }
.flow-step h3{ color:var(--navy); font-size:1.08rem; margin:0 0 10px; font-weight:800; line-height:1.5; }
.flow-step p{ font-size:.86rem; line-height:1.8; margin:0; color:var(--text-light); }

/* 業務の流れ：各ステップを順番に表示（段階アニメーション） */
.flow-steps > .flow-step:nth-child(1){ transition-delay:.05s; }
.flow-steps > .flow-step:nth-child(2){ transition-delay:.16s; }
.flow-steps > .flow-step:nth-child(3){ transition-delay:.27s; }
.flow-steps > .flow-step:nth-child(4){ transition-delay:.38s; }

/* =========================================================
   選ばれる理由
   ========================================================= */
.strengths{ background:var(--bg-gray); }
.strength-card{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.strength-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(16,38,63,.13); }
/* 理由カードの画像（上部・縦横比を統一） */
.strength-img{ aspect-ratio:3/2; overflow:hidden; background:var(--bg-gray); }
.strength-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.strength-card:hover .strength-img img{ transform:scale(1.04); }
.strength-body{ padding:28px 30px 30px; flex:1 1 auto; }
.strength-card h3{ color:var(--navy); font-size:1.14rem; margin:0 0 10px; font-weight:800; line-height:1.5; }
.strength-card p{ font-size:.92rem; margin:0; color:var(--text-light); line-height:1.8; }
.strength-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.strength-chips span{
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  background:var(--chip-bg); color:var(--chip-text);
  padding:5px 12px; border-radius:999px;
}

/* =========================================================
   運営実績
   ========================================================= */
.achievements{ background:var(--navy-deep); }
.stat-card{
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  background:rgba(255,255,255,.02); padding:42px 24px; text-align:center;
  display:flex; flex-direction:column; justify-content:center;
}
.stat-num{ font-size:2.7rem; font-weight:800; color:var(--gold); margin:0 0 12px; line-height:1; }
.stat-channels{ font-size:1.5rem; font-weight:800; color:var(--gold); margin:0 0 12px; line-height:1.4; letter-spacing:.01em; }
.stat-num span{ font-size:1rem; font-weight:600; color:#cdd5e0; margin-left:4px; }
.stat-label{ color:#fff; font-weight:700; font-size:1.05rem; margin:0 0 6px; }
.stat-sub{ color:#8c97a6; font-size:.82rem; margin:0; }

/* =========================================================
   会社概要
   ========================================================= */
.company-table-wrap{ max-width:760px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.company-table{ width:100%; border-collapse:collapse; }
.company-table th,.company-table td{ text-align:left; padding:18px 26px; font-size:.96rem; vertical-align:top; }
.company-table th{ width:34%; background:#f7f9fb; color:var(--text-light); font-weight:600; }
.company-table td{ color:var(--navy); }
.company-table tr:not(:last-child) th,
.company-table tr:not(:last-child) td{ border-bottom:1px solid var(--line); }

/* =========================================================
   お問い合わせ
   ========================================================= */
.contact{ background:var(--bg-gray); }
.contact-lead{ margin-top:22px; color:var(--text-light); font-size:1rem; }
.contact-form{ max-width:680px; margin:0 auto; }
.form-row{ margin-bottom:22px; }
.form-row label{ display:block; font-weight:700; color:var(--navy); font-size:.92rem; margin-bottom:8px; }
.req{ color:#d0413b; font-weight:700; }
.form-row input,.form-row textarea{
  width:100%; padding:14px 16px; border:1px solid #d5dbe3; border-radius:8px;
  font-size:1rem; font-family:inherit; background:#fff; color:var(--navy); transition:border-color .2s ease, box-shadow .2s ease;
}
.form-row input:focus,.form-row textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,154,62,.15);
}
.form-row textarea{ resize:vertical; }
.form-note{ text-align:center; color:var(--text-light); font-size:.88rem; margin-top:18px; }
/* ハニーポット（画面外へ追いやる） */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* =========================================================
   フッター
   ========================================================= */
.site-footer{ background:var(--navy-deep); color:#cdd5e0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:48px 24px; flex-wrap:wrap; }
.footer-name{ font-weight:800; color:#fff; font-size:1.15rem; margin:0 0 4px; }
.footer-addr{ font-size:.86rem; color:#8c97a6; margin:0; }
.footer-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-nav a{ font-size:.9rem; color:#cdd5e0; transition:color .2s ease; }
.footer-nav a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); text-align:center; padding:20px; }
.footer-bottom p{ margin:0; font-size:.82rem; color:#8c97a6; }

/* =========================================================
   スクロール表示アニメーション
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-scroll-arrow{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:980px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  /* 業務の流れ：2列に折り返し */
  .flow-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav{
    position:fixed; top:74px; right:0; width:min(78vw,320px); height:calc(100vh - 74px);
    flex-direction:column; gap:0; background:#fff; box-shadow:-6px 0 26px rgba(16,38,63,.12);
    transform:translateX(100%); transition:transform .3s ease; padding:14px 0;
  }
  .nav a{ color:var(--navy); padding:16px 28px; border-bottom:1px solid var(--line); }
  body.nav-open .nav{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .about-inner{ grid-template-columns:1fr; gap:34px; }
  .flow-steps{ grid-template-columns:repeat(2,1fr); }
  .strengths-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:560px){
  .container{ padding:0 18px; }
  .section{ padding:60px 0; }
  /* 見出しの強制改行はスマホでは解除し、自然に折り返す */
  .hero-title br, .section-title-left br{ display:none; }
  .hero-title{ font-size:1.5rem; line-height:1.6; }
  .hero-lead{ font-size:.95rem; }
  .hero-inner{ padding:96px 18px 84px; }
  .section-title{ font-size:1.6rem; }
  .section-title-left{ font-size:1.4rem; }
  .service-grid{ grid-template-columns:1fr; }
  .flow-steps{ grid-template-columns:1fr; max-width:360px; margin:0 auto; }
  .strength-body{ padding:24px 22px 26px; }
  .stat-num{ font-size:2.3rem; }
  .stat-channels{ font-size:1.35rem; }
  /* 会社概要テーブル：狭い画面で余白を詰める */
  .company-table th,.company-table td{ padding:14px 14px; font-size:.9rem; }
  .company-table th{ width:34%; }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:18px; padding:40px 18px; }
}