/* =========================================================
   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;}

/* ヘッダーのロゴが潰れないように */
header > div > a:first-child{flex-shrink:0;}
header > div > a:first-child img{display:block;width:auto;}

/* ===== モバイル用ハンバーガーメニュー＋ドロワー ===== */
.hamburger{display:none;flex:0 0 auto;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px;align-items:center;justify-content:center;}
.hamburger span{display:block;width:100%;height:2px;background:#2A2320;border-radius:2px;position:relative;transition:transform .25s,opacity .25s;}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:100%;height:2px;background:#2A2320;border-radius:2px;transition:transform .25s,opacity .25s;}
.hamburger span::before{top:-7px;}
.hamburger span::after{top:7px;}
body.nav-open .hamburger span{background:transparent;}
body.nav-open .hamburger span::before{transform:translateY(7px) rotate(45deg);}
body.nav-open .hamburger span::after{transform:translateY(-7px) rotate(-45deg);}

#mobile-drawer{position:fixed;inset:0;z-index:200;display:none;}
#mobile-drawer.open{display:block;}
#mobile-drawer .md-backdrop{position:absolute;inset:0;background:rgba(42,35,32,.5);opacity:0;transition:opacity .25s;}
#mobile-drawer.open .md-backdrop{opacity:1;}
#mobile-drawer .md-panel{position:absolute;top:0;right:0;height:100%;width:min(78vw,320px);background:#FAF7F3;box-shadow:-16px 0 40px -20px rgba(42,35,32,.5);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:22px 24px;overflow-y:auto;}
#mobile-drawer.open .md-panel{transform:none;}
#mobile-drawer .md-close{align-self:flex-end;width:40px;height:40px;border:0;background:transparent;font-size:26px;line-height:1;color:#2A2320;cursor:pointer;margin-bottom:8px;}
#mobile-drawer a{padding:15px 6px;border-bottom:1px solid #E7DDD3;font-family:'Outfit',sans-serif;font-size:17px;font-weight:500;color:#2A2320;letter-spacing:.02em;}
#mobile-drawer a.md-cta{margin-top:18px;border:0;background:#9B3829;color:#fff;border-radius:8px;text-align:center;font-family:'Noto Sans JP',sans-serif;font-weight:500;padding:15px;}
@media (max-width:760px){
  header nav.site-nav{display:none !important;}
  .hamburger{display:flex;}
}

/* ===== Works一覧：スマホは絞り込みを折りたたむ ===== */
.filter-toggle{display:none;}
.filter-body{display:flex;flex-direction:column;gap:14px;}
@media (max-width:700px){
  .filter-toggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;
    background:#FAF7F3;border:1px solid #E0D6CC;border-radius:12px;cursor:pointer;
    font-family:'Noto Sans JP',sans-serif;font-size:14px;font-weight:600;color:#2A2320;
    padding:12px 16px;transition:border-color .2s,background .2s;
  }
  .filter-toggle .ft-label{display:inline-flex;align-items:center;gap:9px;color:#9B3829;}
  .filter-toggle .ft-label svg{flex:0 0 auto;}
  .filter-toggle .fchevron{display:inline-flex;color:#9B3829;transition:transform .25s;}
  body.filter-open .filter-toggle{background:#F0EBE5;border-color:#C99086;}
  body.filter-open .filter-toggle .fchevron{transform:rotate(180deg);}
  .filter-body{display:none;margin-top:6px;}
  body.filter-open .filter-body{display:flex;}
}

/* ===== スクロール演出（順に現れる）＋ヒーロー登場 ===== */
@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;}}
}

/* ===== 実績カード：再生ボタン（クリックでサイト内再生の合図） ===== */
.wplay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:48px;height:48px;border-radius:50%;background:rgba(42,35,32,.55);
  display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5);opacity:.9;
  transition:transform .25s,background .2s,opacity .2s;pointer-events:none;
}
.wcard:hover .wplay,.work-card:hover .wplay{transform:translate(-50%,-50%) scale(1);background:#9B3829;opacity:1;}
.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);animation:ytFade .2s ease both;}
#yt-modal .yt-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(960px,92vw);animation:ytPop .28s cubic-bezier(.2,.7,.2,1) both;}
@keyframes ytFade{from{opacity:0;}to{opacity:1;}}
@keyframes ytPop{from{opacity:0;transform:translate(-50%,-50%) scale(.96);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
#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);}
#yt-modal .yt-external{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;letter-spacing:.02em;color:#FAF1EE;opacity:.82;transition:opacity .2s;}
#yt-modal .yt-external:hover{opacity:1;text-decoration:underline;}
@media (prefers-reduced-motion: reduce){
  #yt-modal .yt-backdrop,#yt-modal .yt-dialog{animation:none;}
}

/* ===== ページ別メディアクエリ（カンプ準拠） ===== */
/* トップ */
@media (max-width:760px){
  #hero-grid{min-height:72vh !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;} }
@media (max-width:820px){ .voice-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:900px){
  .price-grid{grid-template-columns:1fr !important;}
}
@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;} }

/* ===== D-2 カルーセル両端のやわらかフェード ===== */
.works-marquee{position:relative;}
.works-marquee::before,.works-marquee::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:3;pointer-events:none;}
.works-marquee::before{left:0;background:linear-gradient(90deg,#FAF7F3,rgba(250,247,243,0));}
.works-marquee::after{right:0;background:linear-gradient(270deg,#FAF7F3,rgba(250,247,243,0));}
@media (max-width:600px){ .works-marquee::before,.works-marquee::after{width:26px;} }

/* ===== D-5 実績カード：ホバーでサムネがわずかにズーム ===== */
.wthumb{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.work-card:hover .wthumb,.wcard:hover .wthumb{transform:scale(1.045);}
@media (prefers-reduced-motion: reduce){ .wthumb{transition:none;} .work-card:hover .wthumb,.wcard:hover .wthumb{transform:none;} }

/* ===== B-3 トップへ戻るボタン ===== */
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:#9B3829;color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:90;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility .3s,background .2s;box-shadow:0 10px 26px -10px rgba(122,42,30,.7);}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:#7A2A1E;}
body.nav-open .to-top{opacity:0 !important;visibility:hidden !important;}
@media (max-width:600px){ .to-top{right:16px;bottom:16px;width:42px;height:42px;} }

/* ===== D-1 ヒーロー：ごくゆっくりズーム（Ken Burns） ===== */
@media (prefers-reduced-motion: no-preference){
  .hero-bg{animation:heroZoom 42s ease-in-out infinite alternate;transform-origin:center right;}
  @keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.06);}}
}

/* ===== B-5-1 ヒーローのCTAボタン：極狭幅では横いっぱいに揃える ===== */
@media (max-width:430px){
  .hero-actions{width:100%;}
  .hero-actions a{flex:1 1 100%;justify-content:center;}
}