/* =========================================================
   Studio Kettle — 共通スタイル
   デザイントークンはカンプ（design_handoff）の確定値に準拠。
   個々の見た目はHTML側のインラインスタイルが正。
   ここには「全ページ共通の土台」「ホバー以外で:疑似が必要なもの」
   「ページ別メディアクエリ（idはページ固有なので衝突しない）」を集約。
   ========================================================= */

:root{
  --accent:#9B3829;
  --accent-dark:#7A2A1E;
  --paper:#FAF7F3;
  --paper2:#F0EBE5;
  --ink:#2A2320;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:#2A2320;
  background:#FAF7F3;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
::selection{background:#9B3829;color:#fff;}

/* やかんアイコンの浮遊 */
@keyframes kdrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* フォーム要素 */
input,textarea,select,button{font-family:inherit;}
input::placeholder,textarea::placeholder{color:#B3A597;}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:#9B3829 !important;box-shadow:0 0 0 3px rgba(155,56,41,.1);
}

/* キーボード操作時のフォーカス可視化（アクセシビリティ） */
a:focus-visible,button:focus-visible{outline:2px solid #9B3829;outline-offset:3px;border-radius:4px;}

/* ===== フィルタ／チップ（Works一覧・Contact） ===== */
.filter-chips label{
  font-family:"Noto Sans JP",sans-serif;font-size:13.5px;font-weight:500;cursor:pointer;
  border-radius:999px;padding:8px 16px;white-space:nowrap;background:#FAF7F3;color:#5B4F44;
  border:1px solid #E0D6CC;transition:all .15s;display:inline-flex;align-items:center;gap:7px;user-select:none;
}
.filter-chips label:hover{border-color:#C99086;}
.filter-chips label:has(input:checked){background:#9B3829;color:#fff;border-color:#9B3829;}
.filter-chips .cnt{font-family:'Outfit',sans-serif;font-size:11px;opacity:.7;}

#topic-chips label{
  font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:500;cursor:pointer;
  border-radius:999px;padding:9px 16px;white-space:nowrap;background:#FAF7F3;color:#5B4F44;
  border:1px solid #E0D6CC;transition:all .15s;user-select:none;
}
#topic-chips label:hover{border-color:#C99086;}
#topic-chips label:has(input:checked){background:#9B3829;color:#fff;border-color:#9B3829;}

/* ===== Works一覧：2軸フィルタ（用途 × 制作タイプ）=====
   bodyを起点に :has() で「選択中の値に一致しないカード」を隠す。
   2つのルールが重なるとAND（両方一致）になる。"すべて"選択時はルールが効かず全件表示。 */
body:has(#u-promo:checked)     .work-card:not([data-usage="promo"])     {display:none !important;}
body:has(#u-corp:checked)      .work-card:not([data-usage="corp"])      {display:none !important;}
body:has(#u-interview:checked) .work-card:not([data-usage="interview"]) {display:none !important;}
body:has(#u-signage:checked)   .work-card:not([data-usage="signage"])   {display:none !important;}
body:has(#u-lecture:checked)   .work-card:not([data-usage="lecture"])   {display:none !important;}
body:has(#u-youtube:checked)   .work-card:not([data-usage="youtube"])   {display:none !important;}
body:has(#t-anim:checked)      .work-card:not([data-type="anim"])       {display:none !important;}
body:has(#t-live:checked)      .work-card:not([data-type="live"])       {display:none !important;}
body:has(#t-mix:checked)       .work-card:not([data-type="mix"])        {display:none !important;}

/* 該当0件メッセージ（JSが切替） */
#works-empty{display:none;}

/* スクロールバー非表示（Worksカルーセル） */
#works-scroller::-webkit-scrollbar{display:none;}

/* ブランドストーリー背景のやかん：狭い画面では隠す */
@media (max-width:840px){ .brand-kettle{display:none !important;} }

/* ===== スクロール演出（順に現れる）＋ヒーロー登場 ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1;transform:none;}
  .hero-copy > *{opacity:0;animation:heroIn .85s cubic-bezier(.2,.7,.2,1) forwards;}
  .hero-copy > *:nth-child(1){animation-delay:.10s;}
  .hero-copy > *:nth-child(2){animation-delay:.22s;}
  .hero-copy > *:nth-child(3){animation-delay:.34s;}
  .hero-copy > *:nth-child(4){animation-delay:.46s;}
  @keyframes heroIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
}

/* ===== トップのカルーセル：再生ボタン（クリックでサイト内再生の合図） ===== */
.wcard .wplay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
  width:52px;height:52px;border-radius:50%;background:rgba(155,56,41,.82);
  display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5);opacity:.92;
  transition:transform .25s,background .2s,opacity .2s;pointer-events:none;
}
.wcard:hover .wplay{transform:translate(-50%,-50%) scale(1);background:#9B3829;opacity:1;}
.wcard .wplay svg{margin-left:2px;}

/* ===== 動画モーダル（実績をサイト内で再生） ===== */
#yt-modal{position:fixed;inset:0;z-index:1000;display:none;}
#yt-modal.open{display:block;}
#yt-modal .yt-backdrop{position:absolute;inset:0;background:rgba(42,35,32,.80);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
#yt-modal .yt-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(960px,92vw);}
#yt-modal .yt-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
#yt-modal .yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
#yt-modal .yt-close{position:absolute;top:-46px;right:-2px;width:40px;height:40px;border:0;background:transparent;color:#FAF1EE;font-family:'Outfit',sans-serif;font-size:30px;line-height:1;cursor:pointer;border-radius:50%;transition:background .2s;}
#yt-modal .yt-close:hover{background:rgba(255,255,255,.12);}

/* ===== ページ別メディアクエリ（カンプ準拠） ===== */
/* トップ */
@media (max-width:760px){
  #hero-grid{min-height:auto !important;}
  .promise-grid{grid-template-columns:1fr !important;gap:30px !important;}
  #profile-grid{grid-template-columns:1fr !important;gap:32px !important;}
}
@media (max-width:880px){ .cat-grid{grid-template-columns:1fr !important;} }

/* Works一覧 */
@media (max-width:900px){ .works-grid{grid-template-columns:repeat(2,1fr) !important;} }
@media (max-width:600px){ .works-grid{grid-template-columns:1fr !important;} }

/* Works詳細 */
@media (max-width:860px){
  #detail-grid{grid-template-columns:1fr !important;}
  #meta-card{position:static !important;}
  .related-grid{grid-template-columns:1fr !important;}
}

/* About */
@media (max-width:840px){
  #about-hero{grid-template-columns:1fr !important;}
  #about-profile-grid,.strength-grid{grid-template-columns:1fr !important;}
}

/* Service */
@media (max-width:820px){
  .menu-grid{grid-template-columns:1fr !important;}
  .flow-row{grid-template-columns:1fr !important;gap:8px !important;}
  .flow-row .flow-line{display:none !important;}
  .faq-grid{grid-template-columns:1fr !important;}
}

/* Contact */
@media (max-width:840px){
  #contact-grid{grid-template-columns:1fr !important;}
  .field-row{grid-template-columns:1fr !important;}
}

/* 共通：狭い画面でグローバルナビを隠す（各ページのカンプ準拠の閾値） */
@media (max-width:860px){ .nav-hide-860{display:none !important;} }
@media (max-width:840px){ .nav-hide-840{display:none !important;} }
@media (max-width:820px){ .nav-hide-820{display:none !important;} }
@media (max-width:600px){ .nav-hide-600{display:none !important;} }