@charset "UTF-8";
/* =========================================================
   石川｜AIコンサル  スタイルシート
   方針: 静か / 実直 / 余白が効いている
   色は3色+アクセント1色 / フォントは2種のみ / 余白は8の倍数
   ========================================================= */

:root{
  /* --- 色（3色＋アクセント1色） --- */
  --bg:        #FAF9F7; /* オフホワイト（真っ白は使わない） */
  --bg-tint:   #F2F0EA; /* 面を落とすときだけ使う同系色 */
  --ink:       #1C1C1A; /* 墨（真っ黒は使わない） */
  --ink-sub:   #6B6A64; /* 補助文字（背景比 5.1:1） */
  --line:      #DFDBD2; /* 罫線 */
  --accent:    #2E4B3F; /* 深緑（ITにありがちな青紫を避ける） */
  --accent-dk: #243B31;
  --on-accent: #F7F6F2;

  /* --- 余白（すべて8の倍数） --- */
  --s-8:8px;  --s-16:16px; --s-24:24px; --s-32:32px;
  --s-48:48px; --s-64:64px; --s-96:96px; --s-128:128px;

  --section-y:128px;   /* セクション上下の余白 */
  --gutter:24px;
  --maxw:1120px;
  --measure:34em;      /* 本文の1行の最大幅 */
  --header-h:64px;

  --radius:0;          /* 面の角丸は0で統一 */
  --radius-pill:999px; /* ボタンのみ */

  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd,blockquote{margin:0;padding:0;}
ul,ol{list-style:none;}
img,svg{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden; /* 横スクロールを出さない */
}

/* ---------- 見出し（明朝／細め） ---------- */
h1,h2,h3,.mincho{
  font-family:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-0.02em;
}
h1{font-size:clamp(30px,5.2vw,52px);line-height:1.22;}
h2{font-size:clamp(24px,3.4vw,34px);}
h3{font-size:clamp(19px,2.2vw,23px);line-height:1.35;}

p{max-width:var(--measure);}

/* ---------- 汎用 ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);}
.section + .section{border-top:1px solid var(--line);}
.section__head{margin-bottom:var(--s-64);}
.eyebrow{
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-sub);margin-bottom:var(--s-16);display:block;
}
.lead{color:var(--ink-sub);margin-top:var(--s-24);}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* 本文へスキップ：ふだんは隠し、キーボードでフォーカスしたときだけ現れる */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:12px 24px;background:var(--accent);color:var(--on-accent);
  font-size:14px;text-decoration:none;border-radius:var(--radius-pill);
  transform:translateY(-200%);transition:transform .2s var(--ease);
}
.skip-link:focus-visible{transform:none;}
[id]{scroll-margin-top:calc(var(--header-h) + 24px);}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);
  min-height:48px;padding:12px 32px;
  border-radius:var(--radius-pill);border:1px solid transparent;
  font-size:15px;font-weight:500;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn--primary{background:var(--accent);color:var(--on-accent);}
.btn--primary:hover{background:var(--accent-dk);}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn--ghost:hover{background:var(--ink);color:var(--bg);}
.btn--lg{min-height:56px;padding:16px 40px;font-size:16px;}
.btn[disabled]{opacity:.5;cursor:default;}

/* ---------- フォーカス（消さない） ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- ヘッダー ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  background:var(--bg); /* backdrop-filterは使わない（メニューが閉じ込められる事故を防ぐ） */
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.header.is-scrolled{border-bottom-color:var(--line);}
.header__inner{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-24);
}
.brand{
  font-family:"Zen Old Mincho",serif;font-size:19px;font-weight:500;
  letter-spacing:.08em;text-decoration:none;
}
.brand small{
  display:block;font-family:"Noto Sans JP",sans-serif;
  font-size:10px;letter-spacing:.16em;color:var(--ink-sub);margin-top:2px;line-height:1;
}
.nav{display:flex;align-items:center;gap:var(--s-32);}
.nav a{
  font-size:14px;text-decoration:none;letter-spacing:.04em;
  padding:12px 0;position:relative; /* 上下の余白でタップ領域を44px以上にする */
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav .btn{padding:8px 24px;min-height:44px;font-size:14px;} /* タップ領域44px以上 */
.nav .btn::after{display:none;}

.burger{
  display:none;width:48px;height:48px;margin-right:-12px;
  background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:22px;height:1px;background:var(--ink);position:relative;transition:background-color .2s;}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:1px;background:var(--ink);
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.burger span::before{top:-7px;}
.burger span::after{top:7px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* ---------- モバイルメニュー（headerの外に置く） ---------- */
.menu{
  position:fixed;inset:0;z-index:99;
  background:var(--bg);
  padding:calc(var(--header-h) + 32px) var(--gutter) var(--s-48);
  display:flex;flex-direction:column;justify-content:space-between;
  overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.menu.is-open{opacity:1;visibility:visible;transform:none;}
.menu__list li + li{border-top:1px solid var(--line);}
.menu__list a{
  display:flex;align-items:center;min-height:56px;
  font-family:"Zen Old Mincho",serif;font-size:20px;letter-spacing:.04em;
  text-decoration:none;
}
.menu__foot{margin-top:var(--s-48);}
.menu__foot .btn{width:100%;}
body.is-locked{overflow:hidden;}

/* ---------- ヒーロー ---------- */
.hero{
  padding-top:calc(var(--header-h) + 96px);
  padding-bottom:var(--section-y);
}
.hero__name{
  font-size:13px;letter-spacing:.18em;color:var(--ink-sub);
  margin-bottom:var(--s-32);
}
.hero h1{max-width:16em;}
.hero__sub{
  font-family:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(18px,2.4vw,24px);line-height:1.6;letter-spacing:-0.01em;
  margin-top:var(--s-24);max-width:24em;
}
.hero__lead{margin-top:var(--s-32);font-size:17px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-16);margin-top:var(--s-48);}
.hero__note{font-size:14px;color:var(--ink-sub);margin-top:var(--s-16);}
.hero__rule{margin-top:var(--s-96);border-top:1px solid var(--line);padding-top:var(--s-24);}
.hero__tags{
  display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-32);
  font-size:14px;color:var(--ink-sub);
}

/* ---------- 困りごと ---------- */
.voices{border-top:1px solid var(--line);}
.voice{
  display:grid;grid-template-columns:96px 1fr;gap:var(--s-32);
  padding-block:var(--s-48);border-bottom:1px solid var(--line);
}
.voice__no{font-size:12px;letter-spacing:.14em;color:var(--ink-sub);padding-top:.6em;}
.voice h3{margin-bottom:var(--s-16);}
.voice p{color:var(--ink-sub);}

/* ---------- できること ---------- */
.service{
  display:grid;grid-template-columns:240px 1fr;gap:var(--s-48);
  padding-block:var(--s-64);border-top:1px solid var(--line);
}
.service:last-child{border-bottom:1px solid var(--line);}
.service__label{font-size:14px;letter-spacing:.08em;}
.service__label span{
  display:block;font-size:11px;letter-spacing:.16em;color:var(--ink-sub);margin-top:var(--s-8);
}
/* 料金の目安（ホームページ制作のみ表示） */
.service__label .service__price{font-size:15px;letter-spacing:.04em;color:var(--ink);margin-top:var(--s-16);}
.service h3{margin-bottom:var(--s-24);}
.service p + p{margin-top:var(--s-16);}
/* 入口商品の囲み。影は使わず、左の細い線と地の色だけで区切る */
.callout{
  margin-top:var(--s-32);
  padding:var(--s-24) var(--s-32);
  background:var(--bg-tint);
  border-left:2px solid var(--accent);
}
.callout__label{
  font-size:12px;letter-spacing:.12em;color:var(--accent);margin-bottom:var(--s-8);
}
.callout__title{font-size:20px;line-height:1.4;letter-spacing:-0.02em;margin-bottom:var(--s-8);}
.callout p:last-child{font-size:15px;color:var(--ink-sub);margin:0;}

.service ul{margin-top:var(--s-24);}
.service li{
  position:relative;padding-left:var(--s-24);font-size:15px;color:var(--ink-sub);
}
.service li + li{margin-top:var(--s-8);}
.service li::before{
  content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--accent);
}

/* ---------- 進め方 ---------- */
.steps{border-left:1px solid var(--line);padding-left:var(--s-32);}
.step{padding-bottom:var(--s-48);position:relative;}
.step:last-child{padding-bottom:0;}
.step::before{
  content:"";position:absolute;left:calc(var(--s-32) * -1 - 4px);top:.7em;
  width:7px;height:7px;background:var(--accent);border-radius:999px;
}
.step__no{font-size:12px;letter-spacing:.14em;color:var(--ink-sub);}
.step h3{margin:var(--s-8) 0 var(--s-16);}
.step p{color:var(--ink-sub);}

/* ---------- 石川について ---------- */
.about{display:grid;grid-template-columns:1fr 380px;gap:var(--s-96);align-items:start;}
.about p + p{margin-top:var(--s-24);}
.about__list{margin-top:var(--s-32);border-top:1px solid var(--line);}
.about__list div{
  display:grid;grid-template-columns:120px 1fr;gap:var(--s-16);
  padding-block:var(--s-16);border-bottom:1px solid var(--line);font-size:15px;
}
.about__list dt{color:var(--ink-sub);}
.about__list dd{max-width:none;}

/* イラストが入る枠：画像が無くても成立させる。決まったらimgを入れるだけ */
.illust{
  aspect-ratio:4/5;
  background:var(--bg-tint);
  border:1px solid var(--line);
  display:flex;align-items:flex-end;
  padding:var(--s-24);
  overflow:hidden;
}
.illust img{width:100%;height:100%;object-fit:cover;}
.illust__note{font-size:11px;letter-spacing:.12em;color:var(--ink-sub);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:52em;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-24);
  min-height:64px;padding-block:var(--s-16);cursor:pointer;list-style:none;
  font-family:"Zen Old Mincho",serif;font-size:17px;line-height:1.5;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px);}
.faq__body{padding:0 0 var(--s-32);color:var(--ink-sub);}

/* ---------- 問い合わせ ---------- */
.contact{background:var(--bg-tint);}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-96);align-items:start;}
.form{display:flex;flex-direction:column;gap:var(--s-24);}
.field{display:flex;flex-direction:column;gap:var(--s-8);}
.field label{font-size:14px;font-weight:500;}
.req{color:var(--accent);font-size:12px;margin-left:var(--s-8);letter-spacing:.08em;}
.field input,.field select,.field textarea{
  width:100%;
  font-size:16px; /* 16px未満にしない（iPhoneで勝手に拡大される） */
  line-height:1.6;
  padding:14px var(--s-16);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .3s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-sub);}
.field textarea{min-height:160px;resize:vertical;}
/* セレクトの矢印は自前で描く（appearance:none で標準の矢印が消えるため） */
.field select{
  appearance:none;
  padding-right:48px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C1C1A' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}
.field__hint{font-size:13px;color:var(--ink-sub);}
/* ハニーポット（人には見えない罠の欄） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__note{font-size:13px;color:var(--ink-sub);max-width:none;}
.form__status{font-size:14px;min-height:1.8em;max-width:none;}
.form__status[data-state="error"]{color:#8B2F1F;}
.turnstile:not(:empty){margin-block:var(--s-8);}

.contact__side p{color:var(--ink-sub);}
.contact__side .about__list{margin-top:var(--s-32);}

/* ---------- フッター ---------- */
.footer{border-top:1px solid var(--line);padding-block:var(--s-64);font-size:14px;}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-24);}
.footer__links{display:flex;flex-wrap:wrap;gap:0 var(--s-24);}
/* タップ領域を44px以上にする */
.footer__links a{display:inline-flex;align-items:center;min-height:44px;}
.footer a{text-decoration:none;color:var(--ink-sub);}
.footer a:hover{color:var(--ink);text-decoration:underline;}
.footer__copy{color:var(--ink-sub);}

/* ---------- 下層ページ ---------- */
.page{padding-top:calc(var(--header-h) + 96px);padding-bottom:var(--section-y);}
.prose{max-width:44em;margin-top:var(--s-32);}
.prose h2{margin:var(--s-64) 0 var(--s-24);}
.prose h2:first-of-type{margin-top:var(--s-48);}
.prose p,.prose li{color:var(--ink-sub);}
.prose p + p{margin-top:var(--s-16);}
.prose ul{margin-top:var(--s-16);}
.prose ul + p{margin-top:var(--s-16);}
.prose li{position:relative;padding-left:var(--s-24);}
.prose li + li{margin-top:var(--s-8);}
.prose li::before{content:"";position:absolute;left:0;top:.9em;width:8px;height:1px;background:var(--accent);}
.prose a{color:var(--accent);}

.center-page{
  min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--header-h) + 96px) var(--s-96);
}

/* ---------- フェードイン（動きはこれだけ） ---------- */
.reveal{opacity:0;transform:translateY(16px);}
.reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}

/* ---------- スマホ ---------- */
@media (max-width:900px){
  :root{--section-y:80px;--gutter:20px;}
  .nav{display:none;}
  /* 下層ページのヘッダーは項目が少ないので、スマホでも消さずに出す
     （display:none で消すだけにすると、スマホで導線がなくなる） */
  .nav--simple{display:flex;gap:var(--s-16);}
  .nav--simple .nav__link{display:none;} /* 文字リンクだけ畳み、ボタンは残す */
  .burger{display:flex;}
  .about,.contact__grid{grid-template-columns:1fr;gap:var(--s-48);}
  .service{grid-template-columns:1fr;gap:var(--s-24);padding-block:var(--s-48);}
  .voice{grid-template-columns:1fr;gap:var(--s-16);padding-block:var(--s-32);}
  .voice__no{padding-top:0;}
  .hero{padding-top:calc(var(--header-h) + 64px);}
  .hero__rule{margin-top:var(--s-64);}
  .hero__actions .btn{width:100%;}
  .illust{aspect-ratio:1/1;}
  .about__list div{grid-template-columns:96px 1fr;}
}
@media (min-width:901px){
  .menu{display:none;}
}

/* ---------- 印刷 ---------- */
@media print{
  .header,.menu,.burger,.hero__actions,.contact{display:none;}
  body{background:#fff;}
}

/* ---------- 動きを減らす設定への対応 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none;}
}