@charset "UTF-8";

/* =========================================================
 * 遊人 ASOBITO — 共通スタイル
 *
 * 色はすべてロゴから採った値を CSS 変数で持ちます。
 * ※ 現在の値は仮置き。ロゴの高解像度版が入手できた時点で
 *   スポイトして確定させること。
 * ========================================================= */

:root{
  /* --- ブランドカラー ---
     遊人ロゴ.png から実際に抽出した値。仮置きではなく確定値。 */
  --orange : #E95513;   /* 主役。シンボルと輪 */
  --ink    : #231815;   /* 墨黒。「&」と TO */
  --red    : #E85839;   /* A */
  --blue   : #346BB3;   /* S */
  --green  : #48B476;   /* O */
  --yellow : #F5CB45;   /* B */
  --pink   : #DF476A;   /* I */
  --base   : #FFFCF5;   /* 生成り */
  --white  : #FFFFFF;

  /* --- 淡色（セクション背景用。上の確定値に白を混ぜたもの） --- */
  --blue-pale   : #EAF1F9;
  --green-pale  : #EAF7F0;
  --yellow-pale : #FDF6DE;
  --pink-pale   : #FCEAEF;

  --ink-60 : rgba(35,24,21,.60);
  --ink-40 : rgba(35,24,21,.40);
  --ink-12 : rgba(35,24,21,.12);

  /* --- タイポグラフィ --- */
  /* ロゴが丸ゴシックなので、本文も丸ゴシックで揃える。
     Zen Maru Gothic は functions.php から Google Fonts で読み込んでいる。
     読み込みに失敗した場合や、Macでは端末側の丸ゴシックに落ちる。 */
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
          "Yu Gothic", "YuGothic", "Meiryo", sans-serif;

  /* --- レイアウト --- */
  --wrap   : 1080px;
  --gutter : clamp(20px, 5vw, 40px);
  --radius : 18px;
  --header-h: 76px;
}


/* =========================================================
 * リセット
 * ========================================================= */

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

body{
  background:var(--base);
  color:var(--ink);
  font-family:var(--font);
  font-weight:700;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
  overflow-x:hidden;   /* 傾けた帯が横スクロールを生まないように */
}

:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:12px 20px; background:var(--ink); color:var(--base);
  text-decoration:none; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }


/* =========================================================
 * スクロールでの登場演出
 *
 * JSが動く環境でだけ隠す（.js は head のインラインscriptで付与）。
 * JSが失敗しても内容が消えないことを最優先にしている。
 * ========================================================= */

.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible{
  opacity:1;
  transform:none;
}


/* =========================================================
 * 汎用パーツ
 * ========================================================= */

.container{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:1;
}

.section{ padding-block:clamp(64px, 11vw, 120px); }

/* セクションの小見出しラベル */
.eyebrow{
  display:inline-block;
  padding:7px 18px;
  border-radius:999px;
  background:var(--ink);
  color:var(--base);
  font-size:11px;
  letter-spacing:.26em;
  line-height:1;
}
.eyebrow--blue  { background:var(--blue);   color:var(--white); }
.eyebrow--green { background:var(--green);  color:var(--white); }
.eyebrow--yellow{ background:var(--yellow); color:var(--ink);   }
.eyebrow--onpink{ background:var(--white);  color:var(--pink);  }

/* 押し込めるボタン（ポップな手触りの中心） */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px;
  border-radius:999px;
  background:var(--orange);
  color:var(--white);
  text-decoration:none;
  font-size:15px;
  letter-spacing:.08em;
  box-shadow:0 5px 0 rgba(0,0,0,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.28); }
.btn:active{ transform:translateY(5px); box-shadow:0 0 0 rgba(0,0,0,.28); }

.btn--ghost{
  background:transparent;
  color:var(--ink);
  border:2.5px solid var(--ink);
  box-shadow:none;
}
.btn--ghost:hover{
  background:var(--ink); color:var(--base);
  transform:none; box-shadow:none;
}

.btn--onpink{
  background:var(--white);
  color:var(--pink);
  box-shadow:0 5px 0 rgba(0,0,0,.25);
}

/* 背景に敷く大きな色の丸 */
.blob{
  position:absolute;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
.blob--green{
  background:var(--green); opacity:.16;
  width:min(62vw, 440px); aspect-ratio:1;
  right:-8%; top:-14%;
}
.blob--yellow{
  background:var(--yellow); opacity:.28;
  width:min(58vw, 400px); aspect-ratio:1;
  left:-10%; bottom:-16%;
}


/* =========================================================
 * ヘッダー
 * ========================================================= */

.site-header{
  position:relative;
  z-index:50;
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px var(--gutter);
}

.site-logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.site-logo img{ width:auto; height:46px; }

/* --- ナビ（PC） --- */
.site-nav__list{ display:flex; align-items:center; gap:8px; }

.site-nav__link{
  display:inline-block;
  padding:9px 17px;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:var(--white);
  text-decoration:none;
  font-size:11px;
  letter-spacing:.14em;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.site-nav__link:hover{
  background:var(--ink); color:var(--base);
  transform:translateY(-2px);
}
.site-nav__link.is-current{
  background:var(--orange);
  color:var(--white);
  border-color:var(--orange);
}

/* --- ハンバーガー（スマホのみ表示） --- */
.nav-toggle{
  display:none;
  width:48px; height:48px;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:var(--white);
  position:relative;
  flex:0 0 auto;
}
.nav-toggle__bar{
  position:absolute; left:50%; width:20px; height:2.5px;
  background:var(--ink); border-radius:2px;
  transform:translateX(-50%);
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle__bar:nth-child(1){ top:16px; }
.nav-toggle__bar:nth-child(2){ top:22px; }
.nav-toggle__bar:nth-child(3){ top:28px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ top:22px; transform:translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ top:22px; transform:translateX(-50%) rotate(-45deg); }


/* =========================================================
 * TOP — ファーストビュー
 * ========================================================= */

.fv{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:24px var(--gutter) 96px;
  overflow:hidden;
}

/* ロゴの「輪」と「色の丸」をモチーフにした背景。
   装飾ではなくブランドの記号として使う。 */
.fv__deco{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
}
.fv__ring{
  position:absolute;
  width:min(88vw, 620px);
  height:min(88vw, 620px);
  fill:none;
  stroke:var(--orange);
  stroke-width:5;
}
.fv__ring--1{ opacity:.30; animation:ring-spin 26s linear infinite; }
.fv__ring--2{ opacity:.18; animation:ring-spin 34s linear infinite reverse; }

@keyframes ring-spin{
  from{ transform:rotate(-18deg); }
  to  { transform:rotate(342deg); }
}

.fv__dot{
  position:absolute;
  border-radius:50%;
  border:3px solid var(--ink);
}
.fv__dot--1{ width:46px; height:46px; background:var(--blue);   top:16%;  left:12%;  animation:float-a 9s  ease-in-out infinite; }
.fv__dot--2{ width:30px; height:30px; background:var(--green);  top:24%;  right:14%; animation:float-b 11s ease-in-out infinite; }
.fv__dot--3{ width:38px; height:38px; background:var(--yellow); bottom:22%; left:18%; animation:float-b 13s ease-in-out infinite; }
.fv__dot--4{ width:26px; height:26px; background:var(--pink);   bottom:28%; right:16%; animation:float-a 10s ease-in-out infinite; }

@keyframes float-a{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-18px) rotate(8deg); }
}
@keyframes float-b{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%    { transform:translateY(14px) translateX(-10px); }
}

.fv__inner{ position:relative; z-index:1; }

.fv__logo{
  width:min(58vw, 230px);
  height:auto;
  margin:0 auto 30px;
  animation:logo-pop .85s cubic-bezier(.34,1.45,.5,1) both;
}
@keyframes logo-pop{
  0%  { opacity:0; transform:translateY(-16px) scale(.84); }
  60% { opacity:1; transform:translateY(7px)  scale(1.05); }
  80% {            transform:translateY(-4px) scale(.99); }
  100%{ opacity:1; transform:translateY(0)    scale(1); }
}

.fv__copy{
  font-size:clamp(1.6rem, 5.6vw, 3.1rem);
  font-weight:700;
  line-height:1.65;
  letter-spacing:.03em;
}

/* 読み込み時にマーカーが引かれる */
.fv__mark{
  position:relative; display:inline-block;
  padding:0 .08em; z-index:1;
}
.fv__mark::before{
  content:""; position:absolute; z-index:-1;
  left:0; bottom:.1em; height:.4em; width:0;
  background:var(--yellow); border-radius:4px;
  animation:mark-draw .9s .7s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes mark-draw{ to{ width:100%; } }

.fv__sub{
  margin-top:26px;
  font-size:clamp(.72rem, 2.5vw, .85rem);
  letter-spacing:.14em;
  color:var(--ink-60);
}

.fv__cta{ margin-top:40px; }

.fv__scroll{
  position:absolute; bottom:28px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.22em; color:var(--ink-40);
}
.fv__scroll-dots{
  width:3px; height:42px; opacity:.5;
  background:repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 13px);
  animation:scroll-flow 1.7s linear infinite;
}
@keyframes scroll-flow{ to{ background-position:0 13px; } }


/* =========================================================
 * 「遊び × ○○」の流れる帯
 * ========================================================= */

.marquee-wrap{ overflow:hidden; }

.marquee{
  background:var(--orange);
  border-block:4px solid var(--ink);
  padding-block:14px;
}

.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee-run 34s linear infinite;
}
@keyframes marquee-run{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

.marquee__set{
  display:flex;
  gap:clamp(28px, 5vw, 56px);
  padding-right:clamp(28px, 5vw, 56px);
}
.marquee__item{
  color:var(--white);
  font-size:clamp(1rem, 2.8vw, 1.5rem);
  letter-spacing:.08em;
  white-space:nowrap;
  line-height:1.5;
}
.marquee__x{ opacity:.72; margin-inline:.24em; }
.marquee__word.is-blank{ letter-spacing:.06em; opacity:.85; }


/* =========================================================
 * セクション見出し
 * ========================================================= */

.sec-head{ text-align:center; margin-bottom:clamp(36px, 6vw, 56px); }
.sec-head__title{
  margin-top:18px;
  font-size:clamp(1.4rem, 4.2vw, 2rem);
  letter-spacing:.06em;
}

.sec-sub{
  margin:clamp(28px,5vw,44px) 0 20px;
  font-size:13px;
  letter-spacing:.2em;
  color:var(--ink-60);
  display:flex; align-items:center; gap:14px;
}
.sec-sub::after{
  content:""; flex:1 1 auto; height:2px;
  background:var(--ink-12);
}

.sec-more{ margin-top:44px; text-align:center; }


/* =========================================================
 * WORKS
 * ========================================================= */

.section--works{
  background:var(--blue-pale);
  border-block:4px solid var(--ink);
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2.6vw, 26px);
}

/* .work-card は登場演出の担当。
   見た目の箱とホバーの動きは .work-card__inner が担当する。
   同じ transform を奪い合わないよう役割を分けている。 */
.work-card{ position:relative; }

.work-card__inner{
  display:block;
  height:100%;
  background:var(--white);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
a.work-card__inner:hover{
  transform:translate(5px,5px) rotate(-1.2deg);
  box-shadow:0 0 0 var(--ink);
}

/* カテゴリごとの色。企業案件＝青、自主制作＝ピンク */
.work-card.is-corporate .work-card__inner{ border-color:var(--blue); box-shadow:5px 5px 0 var(--blue); }
.work-card.is-corporate a.work-card__inner:hover{ box-shadow:0 0 0 var(--blue); }
.work-card.is-original  .work-card__inner{ border-color:var(--pink); box-shadow:5px 5px 0 var(--pink); }
.work-card.is-original  a.work-card__inner:hover{ box-shadow:0 0 0 var(--pink); }

.work-card__visual{
  aspect-ratio:720 / 1018;
  background:var(--blue-pale);
  border-bottom:3px solid var(--ink);
  display:grid; place-items:center;
  overflow:hidden;
}
.work-card.is-corporate .work-card__visual{ background:var(--blue-pale);  border-bottom-color:var(--blue); }
.work-card.is-original  .work-card__visual{ background:var(--pink-pale);  border-bottom-color:var(--pink); }

.work-card__img{
  width:100%; height:100%;
  object-fit:cover;
}

/* 縦長でない画像も枠いっぱいに広げる。
   どこを見せるかは実績ごとの focus で指定できる（既定は中央）。 */
.work-card.is-wide .work-card__img{
  object-fit:cover;
  object-position:var(--focus, center center);
}
.work-card__noimg{
  font-size:clamp(3.4rem, 10vw, 6rem);
  line-height:1;
  color:var(--blue);
  opacity:.32;
}
.work-card.is-original .work-card__noimg{ color:var(--pink); }

.work-card__body{ padding:18px 18px 22px; }

.work-card__type{
  display:inline-block;
  padding:5px 13px;
  border-radius:999px;
  background:var(--blue);
  color:var(--white);
  font-size:10px;
  letter-spacing:.16em;
  line-height:1;
}
.work-card.is-original .work-card__type{ background:var(--pink); }

.work-card__title{
  margin-top:12px;
  font-size:clamp(.95rem, 2.4vw, 1.1rem);
  line-height:1.6;
}
.work-card__meta{
  margin-top:8px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-60);
}

/* 「次の遊びを企み中」カード */
.work-card--next .work-card__inner{
  background:transparent;
  border-style:dashed;
  border-color:var(--ink-40);
  box-shadow:none;
}
.work-card--next .work-card__visual{
  background:transparent;
  border-bottom-style:dashed;
  border-bottom-color:var(--ink-40);
}
.work-card--next .work-card__noimg{ color:var(--ink-40); opacity:.7; }
.work-card--next .work-card__type{ background:var(--ink-40); }

/* 予告カード：正方形の画像を切らずに収め、上下は画像の地の色で埋める */
.work-card.work-card--coming .work-card__visual{ background:#131213; }
.work-card.work-card--coming .work-card__img{ object-fit:contain; }
.work-card.work-card--coming .work-card__type{ background:var(--ink); }


/* =========================================================
 * ABOUT / MAKE WITH US
 * ========================================================= */

.section--about,
.section--make{
  position:relative;
  overflow:hidden;
  text-align:center;
}
.section--about{ background:var(--green-pale);  border-bottom:4px solid var(--ink); }
.section--make{ background:var(--yellow-pale); }

/* TOPでは直後のCONTACTが斜めに切り込んでくるので、そのぶんの余白を足す */
.home .section--make{ padding-bottom:calc(clamp(64px, 11vw, 120px) + 46px); }

.teaser__title{
  margin-top:18px;
  font-size:clamp(1.15rem, 3.6vw, 1.7rem);
  line-height:1.6;
}
.teaser__text{
  margin:16px auto 0;
  max-width:36em;
  font-size:.92rem;
  color:var(--ink-60);
}
.teaser__link{
  display:inline-block;
  margin-top:22px;
  font-size:12px;
  letter-spacing:.14em;
  text-decoration:none;
  border-bottom:2.5px solid var(--orange);
  padding-bottom:3px;
  transition:color .2s ease;
}
.section--about .teaser__link{ border-bottom-color:var(--green); }
.section--make  .teaser__link{ border-bottom-color:var(--yellow); }
.teaser__link:hover{ color:var(--orange); }


/* =========================================================
 * CONTACT（フィナーレ。斜めに切り込んで一番強く出す）
 * ========================================================= */

.section--contact{
  background:var(--pink);
  color:var(--white);
  text-align:center;
  margin-top:-46px;
  clip-path:polygon(0 46px, 100% 0, 100% 100%, 0 100%);
  padding-top:calc(clamp(64px, 11vw, 120px) + 46px);
}
.contact-cta__title{
  margin-top:18px;
  font-size:clamp(1.3rem, 4.4vw, 2rem);
  letter-spacing:.04em;
}
.contact-cta__text{
  margin:14px 0 32px;
  font-size:.9rem;
  opacity:.9;
}


/* =========================================================
 * 下層ページ共通（ABOUT / MAKE WITH US）
 * ========================================================= */

.page-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(48px, 8vw, 88px) 0;
  border-bottom:4px solid var(--ink);
  text-align:center;
}
.page-hero--green { background:var(--green-pale); }
.page-hero--yellow{ background:var(--yellow-pale); }

.page-hero__title{
  margin-top:20px;
  font-size:clamp(1.5rem, 5.2vw, 2.6rem);
  line-height:1.55;
  letter-spacing:.03em;
}
.page-hero__lead{
  margin-top:22px;
  font-size:.92rem;
  color:var(--ink-60);
}

.lead-head{
  font-size:clamp(1.2rem, 3.8vw, 1.7rem);
  line-height:1.6;
  letter-spacing:.03em;
  margin-bottom:clamp(28px, 5vw, 44px);
}

/* --- 名前の由来 ---
   ロゴの「&」がそのまま名前の意味なので、ロゴを主役にして左右に並べる */
.name-sec .lead-head{ text-align:center; }

.name-block{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:clamp(24px, 4vw, 48px);
  max-width:820px;
  margin-inline:auto;
  background:var(--white);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:6px 6px 0 var(--green);
  padding:clamp(26px, 4.4vw, 48px);
}
.name-block__mark{
  display:grid; place-items:center;
  width:clamp(140px, 20vw, 190px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--green-pale);
  border:3px solid var(--green);
}
.name-block__mark img{ width:60%; height:auto; }

.name-block__title{
  font-size:clamp(1.25rem, 3.4vw, 1.6rem);
  letter-spacing:.04em;
}
.name-block__amp{ color:var(--orange); }
.name-block__text{
  margin-top:14px;
  font-size:.95rem;
  line-height:1.95;
  color:var(--ink-60);
}

@media (max-width:640px){
  .name-block{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
}

/* --- 遊びの定義 --- */
.define{
  font-size:clamp(1.05rem, 3.4vw, 1.5rem);
  line-height:1.9;
}
.define strong{ color:var(--orange); }
/* 言葉の途中で改行させず、区切りごとに折り返す */
.define .nw{ display:inline-block; }
.define__text{
  margin-top:22px;
  max-width:40em;
  font-size:.92rem;
  color:var(--ink-60);
}

/* --- 掛け合わせの例 --- */
.pair-list{
  display:flex; flex-wrap:wrap;
  gap:clamp(10px, 1.6vw, 16px);
}
.pair{
  padding:13px 24px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--white);
  box-shadow:4px 4px 0 var(--ink);
  font-size:clamp(.9rem, 2.4vw, 1.05rem);
  letter-spacing:.04em;
  line-height:1;
}
.pair__x{ color:var(--orange); margin-inline:.18em; }
.pair.is-blank{
  background:transparent;
  border-style:dashed;
  box-shadow:none;
  color:var(--ink-60);
}
.pair-note{
  margin-top:26px;
  font-size:.88rem;
  color:var(--ink-60);
}

/* --- これまでつくってきた形 --- */
.range-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(14px, 2vw, 22px);
}
.range{
  display:flex; flex-direction:column; gap:8px;
  padding:22px 24px;
  border:3px solid var(--ink);
  border-radius:var(--radius);
  background:var(--white);
}
.range.is-blue  { box-shadow:5px 5px 0 var(--blue); }
.range.is-green { box-shadow:5px 5px 0 var(--green); }
.range.is-yellow{ box-shadow:5px 5px 0 var(--yellow); }
.range.is-pink  { box-shadow:5px 5px 0 var(--pink); }
.range__label{ font-size:1.05rem; }
.range__note{ font-size:.8rem; color:var(--ink-60); }

/* --- ご相談の流れ --- */
.flow-lead{
  margin:-16px 0 clamp(28px, 4vw, 40px);
  padding:18px 22px;
  background:var(--white);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  font-size:.9rem;
  line-height:1.9;
}
.flow-lead strong{
  color:var(--orange);
  font-size:1.1em;
}

.flow{ display:flex; flex-direction:column; gap:clamp(16px, 2.4vw, 24px); }
.flow__title{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.flow__badge{
  padding:5px 11px;
  border-radius:999px;
  background:var(--blue);
  color:var(--white);
  font-size:10px;
  letter-spacing:.1em;
  line-height:1;
}
.flow__step{
  display:flex; align-items:flex-start; gap:18px;
  background:var(--white);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:4px 4px 0 var(--ink);
  padding:20px 24px;
}
.flow__num{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--orange); color:var(--white);
  font-size:14px; line-height:1;
}
.flow__title{ font-size:1rem; }
.flow__note{ margin-top:6px; font-size:.85rem; color:var(--ink-60); }


/* =========================================================
 * CONTACT フォーム
 * ここは遊ばず、読みやすさと押しやすさを優先する。
 * ========================================================= */

.page-hero--pink{ background:var(--pink-pale); }
.eyebrow--pink{ background:var(--pink); color:var(--white); }

.form-wrap{ max-width:660px; }

.form-notice{
  display:flex; flex-direction:column; gap:10px;
  padding:20px 24px;
  margin-bottom:clamp(28px, 5vw, 44px);
  background:var(--white);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  font-size:.85rem;
  line-height:1.8;
}
.form-notice strong{ color:var(--orange); }

.form-field{ margin-bottom:22px; }
.form-field label{
  display:flex; align-items:center; gap:10px;
  margin-bottom:8px;
  font-size:.85rem;
  letter-spacing:.06em;
}
.form-req{
  padding:4px 9px;
  border-radius:999px;
  background:var(--red); color:var(--white);
  font-size:10px; letter-spacing:.1em; line-height:1;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea{
  width:100%;
  padding:14px 16px;
  font-family:inherit;
  font-size:1rem;      /* スマホで勝手に拡大されないよう16px相当を確保 */
  font-weight:700;
  color:var(--ink);
  background:var(--white);
  border:3px solid var(--ink);
  border-radius:12px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form-field textarea{ min-height:180px; line-height:1.8; resize:vertical; }
.form-field select{ appearance:none; background-image:none; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(233,85,19,.16);
}

/* 「制作について相談したい」を選んだときだけ出る欄 */
.form-detail{
  padding:22px 24px 4px;
  margin-bottom:22px;
  background:var(--yellow-pale);
  border:3px dashed var(--ink);
  border-radius:var(--radius);
}
.form-detail[hidden]{ display:none; }
.form-detail__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  margin-bottom:18px;
  font-size:.9rem;
}
.form-detail__head span{ font-size:.75rem; color:var(--ink-60); }

.form-agree{
  margin:28px 0;
  font-size:.85rem;
}
.form-agree input[type="checkbox"]{
  width:20px; height:20px;
  accent-color:var(--orange);
  margin-right:8px;
  vertical-align:-4px;
}
.form-agree a{ text-decoration:none; border-bottom:2px solid var(--orange); }

.form-submit{ text-align:center; margin-top:8px; }
.form-submit input[type="submit"]{
  display:inline-block;
  padding:17px 48px;
  border:none;
  border-radius:999px;
  background:var(--orange);
  color:var(--white);
  font-family:inherit;
  font-size:15px; font-weight:700; letter-spacing:.1em;
  cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.form-submit input[type="submit"]:hover{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.28); }

.form-foot{
  margin-top:36px;
  padding-top:24px;
  border-top:2px solid var(--ink-12);
  font-size:.85rem;
  color:var(--ink-60);
  text-align:center;
}
.form-foot a{ color:var(--ink); }

/* Contact Form 7 が出すメッセージ */
.wpcf7-not-valid-tip{
  margin-top:7px;
  font-size:.78rem;
  color:var(--red);
}
.wpcf7-response-output{
  margin:24px 0 0 !important;
  padding:16px 20px !important;
  border:3px solid var(--ink) !important;
  border-radius:12px;
  font-size:.85rem;
}


/* =========================================================
 * 送信完了 / プライバシーポリシー / 404
 * ========================================================= */

.thanks{ text-align:center; }
.thanks__mark{
  display:block;
  font-size:clamp(3.5rem, 12vw, 6rem);
  line-height:1;
  color:var(--orange);
}
.thanks__title{
  margin-top:22px;
  font-size:clamp(1.4rem, 4.4vw, 2rem);
  line-height:1.6;
}
.thanks__text{ margin-top:22px; font-size:.95rem; }
.thanks__text strong{ color:var(--orange); }
.thanks__note{
  margin-top:18px;
  font-size:.82rem;
  color:var(--ink-60);
}
.thanks__actions{
  margin-top:36px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}

.legal{ max-width:44em; font-weight:500; }
.legal__intro{ font-size:.92rem; }
.legal h2{
  margin:2.2em 0 .7em;
  font-size:1.02rem;
  font-weight:700;
  padding-left:14px;
  border-left:5px solid var(--orange);
}
.legal p{ font-size:.9rem; margin-bottom:1em; }
.legal ul{ margin:0 0 1em; padding-left:1.2em; }
.legal li{ font-size:.9rem; list-style:disc; margin-bottom:.3em; }
.legal__date{
  margin-top:3em;
  font-size:.82rem;
  color:var(--ink-60);
}

.notfound{ text-align:center; }
.notfound__code{
  font-size:clamp(3.5rem, 14vw, 7rem);
  line-height:1;
  color:var(--orange);
  letter-spacing:.06em;
}
.notfound__title{
  margin-top:14px;
  font-size:clamp(1.1rem, 3.4vw, 1.5rem);
}
.notfound__formula{
  margin-top:clamp(32px, 6vw, 52px);
  font-size:clamp(1.1rem, 4vw, 1.8rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.3em;
}
.notfound__x{ color:var(--orange); }
.notfound__blank{
  /* 指で押せるよう、高さは最低44pxを確保する */
  display:inline-flex; align-items:center;
  min-height:44px;
  font-family:inherit; font-weight:700; font-size:inherit;
  color:var(--ink);
  padding:0 .4em;
  border-bottom:4px solid var(--orange);
  border-radius:4px;
  transition:background .18s ease, transform .12s ease;
}
.notfound__blank:hover{ background:var(--yellow-pale); transform:translateY(-2px); }
.notfound__result{ color:var(--ink-40); }
.notfound__result.is-filled{ color:var(--ink); }
.notfound__hint{
  margin-top:16px;
  font-size:.75rem;
  color:var(--ink-40);
}
.notfound__actions{
  margin-top:40px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}


/* =========================================================
 * NEWS（お知らせ）
 * ========================================================= */

.section--news{
  background:var(--base);
  border-bottom:4px solid var(--ink);
}

.news-wrap{ max-width:860px; }

.news-list{ border-top:2px solid var(--ink); }

.news-item{ border-bottom:2px solid var(--ink-12); }

.news-item__link{
  display:grid;
  grid-template-columns:6.5em auto 1fr;
  align-items:center;
  gap:8px 18px;
  padding:20px 10px;
  text-decoration:none;
  transition:background .18s ease;
}
.news-item__link:hover{ background:var(--white); }
.news-item__link:hover .news-item__title{ color:var(--orange); }

.news-item__date{
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--ink-60);
  font-variant-numeric:tabular-nums;
}

/* カテゴリーごとの色：お知らせ＝オレンジ／イベント＝青／メディア掲載＝緑 */
.news-item__type{
  justify-self:start;
  padding:5px 12px;
  border-radius:999px;
  background:var(--ink);
  color:var(--white);
  font-size:10px;
  letter-spacing:.12em;
  line-height:1;
  white-space:nowrap;
}
.is-info  .news-item__type{ background:var(--orange); }
.is-event .news-item__type{ background:var(--blue); }
.is-media .news-item__type{ background:var(--green); }

.news-item__title{
  font-size:.95rem;
  line-height:1.7;
  transition:color .18s ease;
}

.news-empty{ color:var(--ink-60); text-align:center; }

/* --- 記事ページ --- */
.news-single__head{ text-align:left; }
.news-single__meta{
  display:flex; align-items:center; gap:12px;
  margin-top:18px;
  font-size:.85rem;
  color:var(--ink-60);
  font-variant-numeric:tabular-nums;
}
.news-single__title{
  margin-top:12px;
  font-size:clamp(1.3rem, 4vw, 2rem);
  line-height:1.6;
  letter-spacing:.02em;
}
.news-single__visual{
  margin:0 0 clamp(28px, 4vw, 40px);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
}
.news-single__visual img{ width:100%; height:auto; }

.news-single__nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:clamp(40px, 6vw, 56px);
  padding-top:28px;
  border-top:2px solid var(--ink-12);
}
.news-single__pager{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 18px;
  border:2px solid var(--ink-12);
  border-radius:12px;
  text-decoration:none;
  font-size:.88rem;
  line-height:1.6;
  transition:border-color .18s ease;
}
.news-single__pager:hover{ border-color:var(--orange); }
.news-single__pager span{ font-size:.72rem; letter-spacing:.1em; color:var(--ink-60); }
.news-single__pager.is-next{ grid-column:2; text-align:right; }

.news-single__back{ margin-top:32px; text-align:center; }

/* 本文中のリンク（実績とお知らせで共通） */
.work-text a{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* --- ページ送り --- */
.pagination .nav-links{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  margin-top:40px;
}
.page-numbers{
  display:inline-grid; place-items:center;
  min-width:42px; height:42px;
  padding:0 14px;
  border:2px solid var(--ink);
  border-radius:999px;
  text-decoration:none;
  font-size:.85rem;
}
.page-numbers.current{ background:var(--ink); color:var(--base); }
.page-numbers.dots{ border-color:transparent; }

@media (max-width:640px){
  .news-item__link{ grid-template-columns:auto 1fr; padding:16px 6px; }
  .news-item__title{ grid-column:1 / -1; }
  .news-single__nav{ grid-template-columns:1fr; }
  .news-single__pager.is-next{ grid-column:auto; }
}


/* =========================================================
 * 「開催中」バッジ
 *
 * 実績の date_start / date_end に日付が入っていて、
 * 今日がその範囲内のときだけ表示される（PHP側で判定）。
 * ========================================================= */

.work-card__visual{ position:relative; }

.work-card__ongoing{
  position:absolute; top:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 11px;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font-size:11px;
  letter-spacing:.12em;
  line-height:1;
  border:2.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.work-card__ongoing::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--white);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{ opacity:1; }
  50%    { opacity:.25; }
}


/* =========================================================
 * WORKS 一覧ページ
 * ========================================================= */

.sec-head__lead{
  margin-top:16px;
  font-size:.9rem;
  color:var(--ink-60);
}
.sec-sub__note{
  margin:-8px 0 22px;
  font-size:.82rem;
  color:var(--ink-60);
}


/* =========================================================
 * 実績の詳細ページ
 * ========================================================= */

.work-hero{
  padding:clamp(36px, 6vw, 64px) 0 clamp(28px, 5vw, 48px);
  border-bottom:4px solid var(--ink);
  background:var(--blue-pale);
}
.work-single.is-original .work-hero{ background:var(--pink-pale); }

.work-hero__crumb{
  font-size:11px; letter-spacing:.18em; color:var(--ink-60);
  display:flex; align-items:center; gap:10px;
}
.work-hero__crumb a{ text-decoration:none; border-bottom:2px solid var(--blue); padding-bottom:2px; }
.work-single.is-original .work-hero__crumb a{ border-bottom-color:var(--pink); }

.work-hero__ongoing{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px;
  padding:8px 18px;
  border-radius:999px;
  background:var(--red); color:var(--white);
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font-size:12px; letter-spacing:.14em; line-height:1;
}
.work-hero__ongoing::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--white); animation:blink 1.6s ease-in-out infinite;
}

.work-hero__title{
  margin-top:16px;
  font-size:clamp(1.5rem, 5vw, 2.6rem);
  line-height:1.5;
  letter-spacing:.03em;
}

.work-hero__visual{
  margin-top:clamp(24px, 4vw, 40px);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:6px 6px 0 var(--ink);
  background:var(--white);
}
.work-hero__img{ width:100%; height:auto; }

.work-body{ padding-block:clamp(40px, 7vw, 72px); }

.work-meta{
  border-top:2px solid var(--ink-12);
  max-width:44em;
}
.work-meta__row{
  display:flex; flex-wrap:wrap; gap:4px 24px;
  padding:16px 4px;
  border-bottom:2px solid var(--ink-12);
}
.work-meta dt{
  flex:0 0 8em;
  font-size:12px; letter-spacing:.14em; color:var(--ink-60);
}
.work-meta dd{ margin:0; font-size:.95rem; }

.work-text{
  margin-top:clamp(28px, 5vw, 48px);
  max-width:38em;
  font-weight:500;
}
.work-text p{ margin-bottom:1.6em; }
.work-text h2{ margin:2em 0 .8em; font-size:1.2rem; }
.work-text h3{ margin:1.8em 0 .6em; font-size:1.05rem; }
.work-text ol{ margin:0 0 1.6em; padding-left:1.5em; list-style:decimal; }
.work-text li{ margin-bottom:.5em; padding-left:.2em; }
.work-text li::marker{ color:var(--orange); font-weight:700; }
.work-text img{ border-radius:12px; margin-block:1.4em; }

/* 販売終了などの注意書き */
.work-notice{
  margin-top:clamp(28px, 4vw, 40px);
  max-width:38em;
  padding:16px 20px;
  background:var(--yellow-pale);
  border:3px solid var(--ink);
  border-radius:12px;
  font-size:.85rem;
  line-height:1.8;
}

.work-link{ margin-top:clamp(24px, 4vw, 32px); }
.work-back{ margin-top:clamp(36px, 6vw, 56px); }

/* 画面には出さず、読み上げソフトにだけ伝える文 */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.section--others{
  background:var(--base);
  border-top:4px solid var(--ink);
}


/* =========================================================
 * フッター
 * ========================================================= */

.site-footer{
  border-top:4px solid var(--ink);
  background:var(--white);
  padding:clamp(48px, 8vw, 72px) 0 28px;
}
.site-footer__inner{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-wrap:wrap; gap:40px;
  align-items:flex-start; justify-content:space-between;
}
.site-footer__logo{ height:74px; width:auto; }
.site-footer__tagline{
  margin-top:14px;
  font-size:13px;
  color:var(--ink-60);
}
.site-footer__nav ul{ display:flex; flex-direction:column; gap:10px; }
.site-footer__nav a{
  text-decoration:none;
  font-size:12px;
  letter-spacing:.12em;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
.site-footer__nav a:hover{ border-color:var(--orange); }

.site-footer__copy{
  margin-top:44px;
  text-align:center;
  font-size:10px;
  letter-spacing:.2em;
  color:var(--ink-40);
}


/* =========================================================
 * 汎用ページ（フォールバック）
 * ========================================================= */

.page-head__title{ font-size:clamp(1.4rem,4vw,2rem); }
.post-list__item{ padding-block:24px; border-bottom:2px solid var(--ink-12); }
.post-list__title{ font-size:1.1rem; }
.post-list__title a{ text-decoration:none; }
.post-list__excerpt{ margin-top:8px; font-size:.9rem; color:var(--ink-60); }


/* =========================================================
 * スマホ
 * ========================================================= */

@media (max-width:860px){

  .nav-toggle{ display:block; }

  /* ナビを全画面オーバーレイに切り替える */
  .site-nav{
    position:fixed; inset:0; z-index:40;
    background:var(--base);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }
  body.nav-open .site-nav{ opacity:1; visibility:visible; }
  body.nav-open{ overflow:hidden; }

  .site-nav__list{
    flex-direction:column;
    gap:18px;
    text-align:center;
  }
  .site-nav__link{
    font-size:15px;
    padding:14px 30px;
    letter-spacing:.18em;
  }

  .site-header{ position:relative; z-index:60; }

  .site-logo img{ height:40px; }

  .site-footer__inner{ flex-direction:column; gap:32px; }

  .work-grid{ grid-template-columns:repeat(2, 1fr); }
  .range-list{ grid-template-columns:1fr; }
  .fv__ring{ stroke-width:7; }
  .fv__dot--1{ width:34px; height:34px; left:6%; }
  .fv__dot--2{ width:24px; height:24px; right:7%; }
  .fv__dot--3{ width:28px; height:28px; left:9%; }
  .fv__dot--4{ width:20px; height:20px; right:8%; }
}

@media (max-width:480px){
  .work-grid{ grid-template-columns:1fr; }
  .work-card__inner{ box-shadow:4px 4px 0 var(--ink); }
  .work-card.is-corporate .work-card__inner{ box-shadow:4px 4px 0 var(--blue); }
  .work-card.is-original  .work-card__inner{ box-shadow:4px 4px 0 var(--pink); }
}


/* =========================================================
 * 動きを減らす設定への対応
 *
 * 重要：登場演出は初期状態が opacity:0 なので、
 * ここで必ず可視へ戻す。戻さないと内容が永久に見えなくなる。
 * ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  .js [data-reveal],
  .js [data-reveal].is-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .marquee__track{ animation:none !important; }
  .fv__mark::before{ width:100% !important; animation:none !important; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}