/* 文字は STUDIO版と同じ Noto Sans JP(英字部分のみ)。サイト内のファイルを使う(Google Fonts の読み込み待ちをなくすため) */
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/noto-sans-jp-latin.woff2) format("woff2")}
:root{
  --navy:#17233d; /* 案A(少し濃い紺)。STUDIO版の色は #1b2a49 */
  --navy-dark:#111a2e;
  --gold:#b99c56;
  --gold-text:#826c36; /* 白・薄い灰色の背景に置く金色の文字用(読みやすさの基準を満たす濃さ) */
  --red:#8c1c13;
  --ink:#3b3b3b;
  --muted:#555;
  --bg-soft:#f5f5f5;
  --line:#bfbfbf;
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:77px} /* ページ内リンクで止まる位置=ヘッダーの真下 */
section[id]{scroll-margin-top:-32px} /* セクションの上の余白(56px)を飛ばして、見出しをヘッダーの24px下に */
.service{scroll-margin-top:20px} /* サービスは写真の上端をヘッダーの20px下に */
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--ink);line-height:1.5;background:#fff;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff}
.header-in{display:flex;align-items:center;justify-content:space-between;height:77px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.15em;font-size:25px;line-height:1.3;text-transform:uppercase}
.brand img{width:40px;height:40px;object-fit:contain;flex:none}
.brand-footer{font-size:18px}
nav ul{display:flex;align-items:center;gap:24px;list-style:none;font-size:16px;letter-spacing:.02em;text-transform:uppercase}
nav a:hover{color:var(--gold)}
.btn-quote-sm{background:var(--gold);color:#fff;border:1px solid #fff;padding:8px 14px}
nav a.btn-quote-sm:hover{color:#fff;opacity:.85}
.menu-btn{display:none;background:none;border:0;color:#fff;width:44px;height:44px;cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:22px;height:2px;background:#fff;position:relative;content:"";margin:auto}
.menu-btn span::before{position:absolute;top:-7px}
.menu-btn span::after{position:absolute;top:7px}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;padding:40px 0 30px}
.hero-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.eyebrow{color:var(--gold);letter-spacing:.2em;font-size:15px;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--gold)}
.hero h1{font-size:32px;line-height:1.4;margin:20px 0 16px}
.hero p{font-size:16px;max-width:480px}
.hero-btns{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;line-height:1.3;font-weight:500;letter-spacing:.1em;font-size:15px;text-transform:uppercase;text-align:center;border:1px solid transparent;cursor:pointer}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#a8221a}
.btn-outline{border-color:var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:var(--navy)}
.hero-img{aspect-ratio:2/1;background:#33436c;border-radius:8px;overflow:hidden}
.hero-img img,.service-img img{width:100%;height:100%;object-fit:cover}
.hero-img img{object-position:50% 100%} /* 高さが足りない分は写真の上側を切る */
.scroll-hint{display:flex;flex-direction:column;align-items:center;margin-top:24px;padding-left:.3em;color:var(--line);font-size:15px;font-weight:300;letter-spacing:.3em;text-transform:uppercase;line-height:1.4}
.scroll-hint::after{content:"";width:1px;height:30px;background:var(--line);margin-left:-.3em}

/* ---------- sections ---------- */
section{padding:56px 0}
.section-label{color:var(--gold-text);letter-spacing:.2em;font-size:15px;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.section-label::before{content:"";width:36px;height:1px;background:var(--gold)}
h2{font-size:32px;margin:8px 0 28px;line-height:1.4}

.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px 24px} /* サービス同士の間は広く */
.service-img{aspect-ratio:16/7.5;background:#dfe3ea;margin-bottom:12px;overflow:hidden;border-radius:8px} /* 写真と説明の間は狭く */
.service h3{font-size:24px;line-height:1.4;margin-bottom:8px}
.service p{font-size:16px;color:var(--muted)}

.standard{background:var(--bg-soft);text-align:center}
.standard h2{margin-bottom:32px}
.standard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:left}
.standard-item::before{content:"";display:block;width:64px;height:1px;background:var(--gold);margin-bottom:12px}
.standard-item h3{font-size:24px;line-height:1.4;margin-bottom:6px}
.standard-item p{font-size:16px;color:var(--muted)}

/* FAQ */
.faq details{border-bottom:1px solid var(--red)}
.faq details:last-child{border-bottom-color:var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:700;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;border:5px solid transparent;border-top-color:var(--ink);border-bottom:0;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{padding:0 0 20px 12px;font-size:16px;color:var(--ink)}

.about{background:var(--bg-soft)}
.about p{font-size:16px;margin-bottom:16px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.field label .req{color:var(--red)}
.field input,.field textarea{width:100%;padding:14px 12px;border:1px solid var(--line);font:inherit;font-size:16px;background:#fff;border-radius:0}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:0}
.field textarea{min-height:150px;resize:vertical}
.privacy{text-align:center;color:var(--gold-text);font-size:15px;letter-spacing:.05em;margin-bottom:12px}
.btn-send{width:100%;background:var(--red);color:#fff;border:0;padding:14px;font-family:inherit;font-weight:700;letter-spacing:.2em;font-size:20px;cursor:pointer;text-transform:uppercase}
.btn-send:hover{background:#a8221a}
.btn-send:disabled{opacity:.6;cursor:wait}
.form-msg{margin-top:14px;font-size:15px;display:none}
.form-msg.ng{display:block;color:var(--red);border:1px solid var(--red);background:#fbeeed;padding:12px 14px}
.form-done{border:1px solid var(--gold);background:var(--bg-soft);padding:40px 24px;text-align:center;outline:none}
.form-done::before{content:"\2713";display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--gold);color:#fff;font-size:26px;font-weight:700}
.form-done-title{font-size:26px;font-weight:700;color:var(--navy);margin-bottom:8px}
.form-done p:last-child{font-size:16px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.info-item{border-bottom:1px solid var(--line);padding:0 0 14px;margin-bottom:20px}
.info-item .k{color:var(--red);letter-spacing:.2em;font-size:14px;font-weight:500;text-transform:uppercase}
.info-item .v{font-size:20px;line-height:1.5;margin-top:2px;word-break:break-word}

/* footer */
footer{background:var(--navy);color:#fff;padding:80px 0}
footer .wrap{max-width:1328px} /* STUDIO版と同じく、中身の幅は最大1280px */
.footer-grid{display:grid;grid-template-columns:509fr 264fr 145fr 362fr;padding-bottom:20px;border-bottom:1px solid var(--bg-soft)}
.footer-grid>div{padding-right:16px}
.footer-grid .brand{gap:10px}
.footer-grid h3{color:var(--gold);letter-spacing:.2em;font-size:16px;line-height:24px;text-transform:uppercase;margin-bottom:15px;font-weight:400}
.footer-grid li{list-style:none;font-size:14px;font-weight:200;letter-spacing:.1em;line-height:21px;margin-bottom:10px}
.footer-grid li:last-child{margin-bottom:0}
.footer-grid a:hover{color:var(--gold)}
.footer-tag{color:var(--gold);font-size:12px;font-weight:300;letter-spacing:.15em;margin-top:30px;max-width:450px}
.footer-tel{font-size:20px;line-height:30px;margin-bottom:10px;letter-spacing:.15em}
.footer-mail{font-size:14px;font-weight:200;letter-spacing:.1em;line-height:21px;margin-bottom:30px;word-break:break-word}
.copy{text-align:center;color:var(--gold);font-size:12px;padding-top:17px}

/* ---------- 小さめのPC: 1024〜1099px(ヘッダーが折り返さないようにサイト名を少し小さく) ---------- */
@media (min-width:1024px) and (max-width:1099px){
  .brand{font-size:20px;letter-spacing:.1em}
}
/* ---------- tablet: 768〜1023px(ヘッダーが折り返さないように詰める) ---------- */
@media (min-width:768px) and (max-width:1023px){
  .brand{font-size:16px;letter-spacing:.06em}
  nav ul{gap:14px;font-size:14px}
  .btn-quote-sm{white-space:nowrap;padding:8px 10px}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:40px}
}

/* ---------- mobile: 768px未満 ---------- */
@media (max-width:767px){
  .wrap{padding:0 16px}
  .menu-btn{display:block}
  html{scroll-padding-top:61px}
  section[id]{scroll-margin-top:-16px} /* スマホのセクション上の余白は40px */
  .header-in{height:61px}
  nav{display:none;position:absolute;left:0;right:0;top:61px;background:var(--navy-dark);padding:8px 16px 20px}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch;gap:0;font-size:14px;font-weight:500;letter-spacing:.2em}
  nav li a{display:block;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.12)}
  nav li:last-child a{border:1px solid #fff;margin-top:12px;text-align:center}
  .brand{font-size:15px;font-weight:700;letter-spacing:.05em;line-height:1.2}
  .brand-footer{font-size:18px;font-weight:800;letter-spacing:.05em}
  .eyebrow,.section-label{font-size:14px}
  .eyebrow{letter-spacing:.12em;gap:10px;white-space:nowrap} /* iPhoneでも1行に収める */
  .eyebrow::before{width:24px;flex:none}
  .hero{padding:24px 0 30px}
  .hero-in{grid-template-columns:1fr;gap:24px}
  .hero-img{order:-1;aspect-ratio:16/9}
  .hero-img,.service-img{border-radius:6px} /* STUDIO版のスマホと同じ丸み */
  .hero h1{font-size:28px}
  .hero-btns{gap:12px}
  .hero-btns .btn{flex:1;padding:14px 8px;font-size:14px;letter-spacing:normal;white-space:nowrap}
  section{padding:40px 0}
  h2{font-size:28px}
  .service h3,.standard-item h3{font-size:28px}
  .field label{font-size:14px}
  .privacy{font-size:14px}
  .btn-send{font-size:14px}
  .info-item .k{font-size:14px;font-weight:500}
  .info-item .v{font-size:18px}
  .footer-grid h3{font-size:14px;font-weight:500}
  .services-grid{grid-template-columns:1fr;gap:56px}
  .standard-grid{grid-template-columns:1fr;gap:24px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  footer{padding:48px 0 24px}
  /* スマホ:カテゴリーの中は詰めて、カテゴリー同士の間はあける */
  .footer-grid{grid-template-columns:1fr;gap:36px;text-align:center}
  .footer-grid>div{padding-right:0}
  .footer-tag{margin-top:12px}
  .footer-grid h3{margin-bottom:8px}
  .footer-grid li{margin-bottom:4px}
  .footer-tel{margin-bottom:2px}
  .footer-mail{margin-bottom:4px}
  .footer-grid .brand{justify-content:center}
  .footer-tag{margin-left:auto;margin-right:auto}
}

/* ---------- とても狭いスマホ(360px未満)向けの予備 ---------- */
@media (max-width:359px){
  .eyebrow{font-size:12px;letter-spacing:.08em}
}

/* ---------- privacy page ---------- */
.policy{background:var(--bg-soft);padding:56px 0 72px}
.policy-in{max-width:720px;margin:0 auto;padding:0 24px}
.policy h1{text-align:center;font-size:24px;font-weight:500;letter-spacing:.12em;margin-bottom:36px}
.policy .lead{font-size:14px;margin-bottom:32px}
.policy h2{font-size:18px;margin:36px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.policy p{font-size:14px;line-height:1.9}
.policy li{font-size:14px;line-height:1.7}
.policy ul{margin:6px 0 0 22px}
.policy a{text-decoration:underline}
@media (max-width:767px){
  .policy{padding:36px 0 48px}
  .policy-in{padding:0 16px}
  .policy h1{font-size:18px}
  .policy h2{font-size:16px}
}

/* ---------- 動き(STUDIO版に合わせた控えめなもの) ---------- */
/* 「動きを減らす」設定の人には、以下は一切適用しない */
@media (prefers-reduced-motion:no-preference){
  /* ページを開いたとき:ヘッダーの中身は上から、ヒーローは下からふわっと(ヘッダーの紺色の背景は最初から表示) */
  .header-in{animation:fade-down .5s cubic-bezier(.39,.575,.565,1) both}
  .hero-text{animation:fade-up-sm .6s cubic-bezier(.39,.575,.565,1) both}
  .hero-img{animation:fade-up-lg .6s cubic-bezier(.39,.575,.565,1) both}

  /* スクロールで画面に入ったとき(JSが動く環境だけ隠しておく) */
  .js-anim .reveal{opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.39,.575,.565,1),transform .6s cubic-bezier(.39,.575,.565,1)}
  .js-anim .reveal-lg{transform:translateY(20px)}
  .js-anim .reveal-fade{transform:none;transition:opacity .6s ease-in-out}
  .js-anim .reveal.is-in{opacity:1;transform:none}

  /* ホバー・矢印の変化をなめらかに */
  nav a,.footer-grid a{transition:color .3s,opacity .3s}
  .btn,.btn-send,.btn-quote-sm{transition:background-color .3s,color .3s}
  .faq summary::after{transition:transform .3s cubic-bezier(.4,.4,0,1)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
@keyframes fade-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes fade-up-sm{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade-up-lg{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}