/* ANN theme — main.css v1.0.0 */
:root {
  --dark: #0e0e11;
  --dark-2: #16161b;
  --paper: #f4f2ec;
  --paper-2: #ebe8e0;
  --ink: #131316;
  --mute-d: rgba(244,242,236,.55);
  --mute-l: rgba(19,19,22,.55);
  --acid: #d6ff4b;
  --blue: #2b3cff;
  --line-d: rgba(244,242,236,.14);
  --line-l: rgba(19,19,22,.14);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --grot: "Space Grotesk", "Helvetica Neue", sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--dark); color:var(--paper); line-height:1.9; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; }
::selection { background:var(--acid); color:var(--dark); }

/* 粒子テクスチャ */
.grain { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ヘッダー（共通部品） */
header.site { position:fixed; top:28px; left:0; right:0; z-index:50; mix-blend-mode:difference; color:#fff; }
body.admin-bar header.site { top:60px; }
header.site .in { max-width:1280px; margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:center; }
.logo { font-family:var(--grot); font-weight:700; font-size:20px; letter-spacing:.28em; color:inherit; text-decoration:none; }
.logo sup { font-size:9px; letter-spacing:.1em; }
nav.g { display:flex; gap:34px; font-family:var(--grot); font-size:12px; letter-spacing:.14em; }
nav.g a { color:#fff; text-decoration:none; opacity:.75; transition:opacity .25s; }
nav.g a:hover { opacity:1; }

.wrap { max-width:1280px; margin:0 auto; padding:0 40px; }

/* ヒーロー */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.blobs { position:absolute; inset:0; z-index:0; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); }
.blob.b1 { width:55vw; height:55vw; background:radial-gradient(circle, #2b3cff 0%, transparent 70%); top:-18%; right:-12%; opacity:.5; animation:drift1 21s ease-in-out infinite alternate; }
.blob.b2 { width:40vw; height:40vw; background:radial-gradient(circle, #7b2bff 0%, transparent 70%); bottom:8%; left:-14%; opacity:.38; animation:drift2 17s ease-in-out infinite alternate; }
.blob.b3 { width:22vw; height:22vw; background:radial-gradient(circle, #d6ff4b 0%, transparent 70%); top:34%; left:44%; opacity:.12; animation:drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from { transform:translate(0,0) scale(1); } to { transform:translate(-9vw,7vh) scale(1.15); } }
@keyframes drift2 { from { transform:translate(0,0) scale(1); } to { transform:translate(7vw,-9vh) scale(0.9); } }

.hero .wrap { position:relative; z-index:2; padding-top:150px; padding-bottom:56px; }
.hero .kicker { font-family:var(--grot); font-size:12px; letter-spacing:.34em; color:var(--mute-d); margin-bottom:34px; }
.hero h1 { font-weight:900; letter-spacing:.005em; line-height:1.16; font-size:clamp(50px, 9.6vw, 130px); }
.hero h1 .row { display:block; overflow:hidden; }
.hero h1 .row > span { display:inline-block; transform:translateY(110%); animation:rise 1s cubic-bezier(.2,.65,.2,1) forwards; }
.hero h1 .row:nth-child(2) > span { animation-delay:.14s; }
@keyframes rise { to { transform:translateY(0); } }
.hero h1 em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--acid); letter-spacing:0; padding-right:.06em; }
.hero .sub { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:44px; flex-wrap:wrap; }
.hero .lead { max-width:470px; font-size:14.5px; color:var(--mute-d); }
.btn { display:inline-flex; align-items:center; gap:14px; font-weight:700; font-size:14px; letter-spacing:.06em;
  color:var(--dark); background:var(--acid); border-radius:999px; padding:18px 36px; text-decoration:none; transition:transform .3s cubic-bezier(.2,.65,.2,1); will-change:transform; }
.btn .ar { font-family:var(--grot); transition:transform .3s; }
.btn:hover .ar { transform:translateX(5px); }

/* 数字ストリップ */
.facts { position:relative; z-index:2; border-top:1px solid var(--line-d); }
.facts .in { max-width:1280px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(5,1fr); }
.fact { padding:26px 26px 26px 0; border-right:1px solid var(--line-d); }
.fact:last-child { border-right:none; }
.fact:not(:first-child) { padding-left:26px; }
.fact .k { font-family:var(--grot); font-size:11px; letter-spacing:.24em; color:var(--mute-d); margin-bottom:6px; }
.fact .v { font-weight:900; font-size:clamp(18px, 2vw, 26px); line-height:1.3; }
.fact .v i { font-style:normal; color:var(--acid); }
.fact .v small { font-size:12px; font-weight:400; color:var(--mute-d); }

/* セクション共通 */
section { position:relative; padding:130px 0; }
.sec-label { display:flex; align-items:baseline; gap:22px; margin-bottom:64px; }
.sec-label .no { font-family:var(--grot); font-size:13px; letter-spacing:.2em; }
.sec-label .no.no-acid { color:var(--acid); }
.sec-label h2 { font-size:clamp(30px, 4.6vw, 54px); font-weight:900; letter-spacing:.02em; line-height:1.3; }
.sec-label h2 em { font-family:var(--serif); font-style:italic; font-weight:400; }
.reveal { opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.2,.65,.2,1), transform .9s cubic-bezier(.2,.65,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* WORKS */
.works-sec { background:var(--dark); overflow:hidden; padding-top:110px; }
.works-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:56px; }
.works-head .note { font-size:13px; color:var(--mute-d); max-width:380px; }
.works-track { display:flex; gap:22px; overflow-x:auto; padding:6px 40px 26px; scroll-snap-type:x mandatory; margin:0 -40px; }
.works-track::-webkit-scrollbar { height:4px; }
.works-track::-webkit-scrollbar-thumb { background:var(--line-d); border-radius:2px; }
.work { flex:none; width:clamp(270px, 30vw, 400px); scroll-snap-align:start; }
.thumb { aspect-ratio:4/4.7; border-radius:18px; overflow:hidden; position:relative; border:1px solid var(--line-d);
  display:flex; align-items:center; justify-content:center; transition:transform .5s cubic-bezier(.2,.65,.2,1); }
.work:hover .thumb { transform:translateY(-8px); }
.mini { width:74%; background:#fff; border-radius:8px; box-shadow:0 30px 60px rgba(0,0,0,.35); overflow:hidden; }
.mini .bar { height:14px; background:#ececec; display:flex; gap:3px; align-items:center; padding:0 6px; }
.mini .bar i { width:4px; height:4px; border-radius:50%; background:#c9c9c9; }
.mini .mh { height:74px; }
.mini .ml { padding:9px; }
.mini .ml div { height:5px; border-radius:2px; background:#e3e3e3; margin-bottom:5px; }
.mini .ml div:nth-child(1){ width:62%; } .mini .ml div:nth-child(2){ width:88%; } .mini .ml div:nth-child(3){ width:74%; }
.t1 .thumb { background:linear-gradient(150deg,#f1e4d2,#c98d5c); } .t1 .mh { background:linear-gradient(120deg,#8a5a34,#d8a878); }
.t2 .thumb { background:linear-gradient(150deg,#dfe8e4,#5d8f7f); } .t2 .mh { background:linear-gradient(120deg,#3c6b5b,#88b4a4); }
.t3 .thumb { background:linear-gradient(150deg,#e2e6f2,#5a6ec9); } .t3 .mh { background:linear-gradient(120deg,#33418f,#8493d8); }
.t4 .thumb { background:linear-gradient(150deg,#f2e2e6,#c95a7a); } .t4 .mh { background:linear-gradient(120deg,#8f3350,#d884a0); }
.t5 .thumb { background:linear-gradient(150deg,#e9e4f2,#8a5ac9); } .t5 .mh { background:linear-gradient(120deg,#5a338f,#a884d8); }
.t6 .thumb { background:linear-gradient(150deg,#f2ede2,#c9a75a); } .t6 .mh { background:linear-gradient(120deg,#8f7333,#d8bc84); }
.t7 .thumb { background:linear-gradient(150deg,#e3e7ea,#5a7a96); } .t7 .mh { background:linear-gradient(120deg,#34506b,#84a4c0); }
.t8 .thumb { background:linear-gradient(150deg,#f7ead8,#d9924a); } .t8 .mh { background:linear-gradient(120deg,#9a6226,#e0b078); }
.t9 .thumb { background:linear-gradient(150deg,#dfece2,#6a9e6e); } .t9 .mh { background:linear-gradient(120deg,#3f6b43,#8fb892); }
.work .cap { display:flex; justify-content:space-between; align-items:baseline; padding:16px 4px 0; }
.work .cap h3 { font-size:15px; font-weight:700; }
.work .cap span { font-family:var(--grot); font-size:11px; letter-spacing:.16em; color:var(--mute-d); }

/* REASON */
.light { background:var(--paper); color:var(--ink); border-radius:32px 32px 0 0; }
.light .sec-label .no { color:var(--blue); }
.svc-rows { border-top:1px solid var(--line-l); }
.svc-row { display:grid; grid-template-columns:110px 1fr 1.1fr 60px; gap:24px; align-items:center; padding:38px 8px; border-bottom:1px solid var(--line-l); transition:background .35s, padding-left .35s; cursor:default; }
.svc-row:hover { background:#fff; padding-left:24px; }
.svc-row .idx { font-family:var(--grot); font-size:13px; color:var(--mute-l); }
.svc-row h3 { font-size:clamp(19px, 2.4vw, 27px); font-weight:900; letter-spacing:.02em; }
.svc-row p { font-size:13.5px; color:var(--mute-l); }
.svc-row .ar { font-family:var(--grot); font-size:20px; color:var(--blue); opacity:0; transform:translateX(-8px); transition:.35s; }
.svc-row:hover .ar { opacity:1; transform:none; }

/* 種明かし */
.secret-sec { background:var(--paper-2); color:var(--ink); padding:150px 0; }
.secret { max-width:860px; }
.secret .en { font-family:var(--grot); font-size:12px; letter-spacing:.3em; color:var(--blue); margin-bottom:30px; }
.secret h2 { font-size:clamp(32px, 5.4vw, 64px); font-weight:900; line-height:1.4; margin-bottom:34px; }
.secret h2 em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--blue); }
.secret p { font-size:15px; color:var(--mute-l); max-width:640px; margin-bottom:14px; }

/* PRICE：Bento */
.price-sec { background:var(--dark); }
.bento { display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; }
.cell { border:1px solid var(--line-d); border-radius:22px; padding:34px 32px; background:var(--dark-2); }
.cell.main { grid-column:span 7; grid-row:span 2; display:flex; flex-direction:column; justify-content:space-between; min-height:380px;
  background:linear-gradient(135deg, #17171d 0%, #101018 60%), var(--dark-2); }
.cell.main .p-label { font-family:var(--grot); font-size:12px; letter-spacing:.3em; color:var(--mute-d); }
.cell.main .amount { font-family:var(--grot); font-weight:700; font-size:clamp(64px, 8.6vw, 118px); line-height:1.05; letter-spacing:-.02em; }
.cell.main .amount .yen { font-size:.45em; vertical-align:.5em; margin-right:.08em; }
.cell.main .amount small { display:block; font-family:var(--sans); font-size:13px; font-weight:400; color:var(--mute-d); letter-spacing:.1em; margin-top:16px; }
.cell.s { grid-column:span 5; }
.cell h4 { font-size:16px; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.cell h4::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--acid); flex:none; }
.cell p { font-size:12.5px; color:var(--mute-d); }
.cell.wide { grid-column:span 12; display:flex; gap:40px; flex-wrap:wrap; align-items:center; justify-content:space-between; background:transparent; border-style:dashed; }
.cell.wide p { font-size:12px; }

/* FLOW */
.flow-sec { background:var(--paper); color:var(--ink); }
.flow-sec .sec-label .no { color:var(--blue); }
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-left:1px solid var(--line-l); }
.step { padding:8px 30px 20px; border-right:1px solid var(--line-l); position:relative; }
.step .ghost { font-family:var(--grot); font-weight:700; font-size:clamp(56px, 6.5vw, 92px); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(19,19,22,.25); margin-bottom:22px; }
.step h3 { font-size:17px; font-weight:900; margin-bottom:10px; }
.step p { font-size:12.5px; color:var(--mute-l); }

/* FAQ */
.faq-sec { background:var(--paper); color:var(--ink); padding-top:0; }
.faq-sec .sec-label .no { color:var(--blue); }
.faq { max-width:820px; border-top:1px solid var(--line-l); }
.faq details { border-bottom:1px solid var(--line-l); }
.faq summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:28px 6px; font-weight:700; font-size:15.5px; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pl { font-family:var(--grot); font-size:22px; font-weight:400; color:var(--blue); transition:transform .35s; flex:none; }
.faq details[open] summary .pl { transform:rotate(45deg); }
.faq .a { padding:0 6px 28px; font-size:13.5px; color:var(--mute-l); max-width:640px; }

/* CTA */
.cta-sec { background:var(--dark); text-align:center; padding:170px 0; }
.cta-sec h2 { font-size:clamp(38px, 7vw, 92px); font-weight:900; line-height:1.3; letter-spacing:.02em; margin-bottom:26px; }
.cta-sec h2 em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--acid); }
.cta-sec p { color:var(--mute-d); font-size:14px; margin-bottom:48px; }

/* フッター（共通部品） */
footer.site2 { background:var(--dark); border-top:1px solid var(--line-d); padding:44px 0; }
footer.site2 .in { max-width:1280px; margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-size:12px; color:var(--mute-d); }
footer.site2 nav { display:flex; gap:26px; }
footer.site2 a { color:var(--mute-d); text-decoration:none; }
footer.site2 a:hover { color:var(--paper); }

a.work { display:block; color:inherit; text-decoration:none; }

/* 下層ページ */
.page-hero { position:relative; background:var(--dark); padding:200px 0 80px; }
.post-meta { font-family:var(--grot); font-size:12px; letter-spacing:.22em; color:var(--mute-d); margin-bottom:16px; }
.entry img { border-radius:14px; border:1px solid var(--line-l); }
.entry figure { margin:0 0 22px; }
.page-hero h1 { font-weight:900; font-size:clamp(34px, 5.5vw, 64px); letter-spacing:.02em; }
.entry-sec { border-radius:32px 32px 0 0; min-height:50vh; }
.entry { max-width:820px; font-size:15px; }
.entry h2 { font-size:clamp(22px, 3vw, 30px); font-weight:900; margin:48px 0 18px; }
.entry h3 { font-size:18px; font-weight:700; margin:36px 0 12px; }
.entry p { margin-bottom:18px; color:rgba(19,19,22,.8); }
.entry ul, .entry ol { margin:0 0 18px 22px; color:rgba(19,19,22,.8); }
.entry a { color:var(--blue); }
.entry table { border-collapse:collapse; width:100%; margin-bottom:18px; }
.entry th, .entry td { border:1px solid var(--line-l); padding:10px 14px; text-align:left; font-size:13.5px; }

/* 制作依頼フォーム（Contact Form 7） */
.contact-intro { font-size:14.5px; color:rgba(19,19,22,.75); max-width:640px; margin-bottom:8px; }
.entry .f-sec { margin:52px 0 0; }
.f-sec h3 { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:900; margin-bottom:24px; }
.f-sec h3 span { font-family:var(--grot); color:var(--blue); font-size:12px; border:1.5px solid var(--blue); border-radius:50%; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.f-item { margin-bottom:22px; }
.f-item label { display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.f-item label em { font-style:normal; font-size:10px; font-weight:700; color:#fff; background:var(--blue); border-radius:3px; padding:2px 7px; margin-left:8px; vertical-align:middle; letter-spacing:.08em; }
.f-item input[type="text"], .f-item input[type="email"], .f-item input[type="tel"], .f-item select, .f-item textarea {
  width:100%; max-width:640px; padding:14px 16px; border:1px solid var(--line-l); border-radius:10px;
  background:#fff; font-family:var(--sans); font-size:14px; color:var(--ink); }
.f-item input:focus, .f-item select:focus, .f-item textarea:focus { outline:2px solid var(--blue); outline-offset:0; border-color:transparent; }
.f-item textarea { min-height:130px; resize:vertical; }
.f-item .wpcf7-list-item { display:inline-block; margin:0 18px 10px 0; }
.f-item .wpcf7-list-item label { display:inline-flex; align-items:center; gap:8px; font-weight:400; font-size:14px; cursor:pointer; margin:0; }
.f-item input[type="checkbox"], .f-item input[type="radio"] { accent-color:var(--blue); width:16px; height:16px; }
.f-submit { margin-top:44px; }
.f-submit .wpcf7-submit { font-family:var(--sans); background:var(--ink); color:var(--paper); border:none; border-radius:999px;
  padding:18px 46px; font-weight:700; font-size:14px; letter-spacing:.06em; cursor:pointer; transition:opacity .3s; }
.f-submit .wpcf7-submit:hover { opacity:.85; }
.wpcf7-response-output { border-radius:10px; padding:14px 18px; margin:26px 0 0 !important; font-size:13px; }
.wpcf7-not-valid-tip { font-size:12px; margin-top:6px; }

@media (max-width: 860px) {
  .wrap { padding:0 22px; }
  header.site .in { padding:0 22px; }
  nav.g { display:none; }
  .facts .in { grid-template-columns:1fr 1fr; padding:0 22px; }
  .fact { border-right:none; border-bottom:1px solid var(--line-d); padding-left:0 !important; }
  .svc-row { grid-template-columns:48px 1fr; grid-template-rows:auto auto; }
  .svc-row p { grid-column:2; } .svc-row .ar { display:none; }
  .cell.main, .cell.s, .cell.wide { grid-column:span 12; }
  .steps { grid-template-columns:1fr 1fr; border-left:none; }
  .step { border-left:1px solid var(--line-l); margin-bottom:36px; }
  .works-track { padding:6px 22px 26px; margin:0 -22px; }
}