/*
Theme Name: HOMELY Original
Theme URI: https://homely.link/
Author: HOMELY
Description: homely.link 独自オリジナルテーマ(ystandard非依存)。Figmaデザインに準拠したフルスクラッチHTML/CSS/JS実装。
Version: 1.0.0
Text Domain: homely-original
*/

/* ==========================================================
   HOMELY ─ base / design tokens
   ========================================================== */
:root{
  --navy:#1a2c44;
  --gray:#66706b;
  --cream:#f9f8f4;
  --teal:#43aec6;
  --red:#f83838;
  --mesh-green:#C9EB98;
  --mesh-sage:#88C5B3;
  --mesh-cyan:#6BCDD2;
  --mesh-navy:#052B6E;
  --grad-text: linear-gradient(90deg, rgb(28,110,180) 0%, rgb(52,148,222) 40%, rgb(45,170,165) 100%);
  --mesh-bg-image:
    radial-gradient(at 0% 0%,   var(--mesh-green) 0px, transparent 50%),
    radial-gradient(at 50% 0%,  var(--mesh-sage)  0px, transparent 50%),
    radial-gradient(at 100% 0%, var(--mesh-cyan)  0px, transparent 50%),
    radial-gradient(at 0% 50%,  var(--mesh-navy)  0px, transparent 50%),
    radial-gradient(at 100% 50%,var(--mesh-green) 0px, transparent 50%),
    radial-gradient(at 0% 100%, var(--mesh-sage)  0px, transparent 50%),
    radial-gradient(at 50% 100%,var(--mesh-cyan)  0px, transparent 50%),
    radial-gradient(at 100% 100%,var(--mesh-navy) 0px, transparent 50%);
  --font-jp: "Zen Kaku Gothic Antique", sans-serif;
  --font-en: "Outfit", sans-serif;
  --container: 1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-jp);
  color:var(--navy);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }

/* サイト全体のcustom-css-jsが h2::before に "...." 装飾ドットを差し込むため、当テーマの見出しでは無効化する */
#top h2::before,
.page-hero h2::before,
.site-footer h2::before,
.about__heading::before,
.section-heading::before,
.service__heading::before,
.contact__heading::before,
.work-detail__heading::before,
.work-detail__related-title::before,
.page-hero__title::before{ content:none !important; display:none !important; }

/* 英字の大きな装飾テキスト(ABOUT/WORRIES/CONTACT/Service等の背景文字、
   WORKS/COLUMN/NEWSのeyebrow)は行間による上下の余白が目立つため、
   グリフの実際の高さにトリミングして余白を詰める。
   お悩みカードの01〜04(.worry-card__num)はこのトリミングだと詰まり過ぎて
   見えたため対象から外している。 */
.about__bg-text, .worries__bg-text, .contact__bg-text, .service__bg-text,
.eyebrow__grad{
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.eyebrow{ display:flex; align-items:center; gap:20px; color:var(--navy); line-height:normal; }
.eyebrow__grad{
  font-family:var(--font-en); font-weight:300; font-size:64px; letter-spacing:3.84px; line-height:normal;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow__ja{ font-size:20px; font-weight:400; }
.eyebrow--light .eyebrow__grad{ color:rgba(255,255,255,.2); background:none; -webkit-text-fill-color:rgba(255,255,255,.2); }

.section-heading{
  text-align:center;
  font-family:var(--font-jp) !important; font-size:40px !important; font-weight:500 !important;
  letter-spacing:.8px; color:var(--navy);
  margin:0 !important;
}

/* buttons */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:space-between; gap:24px;
  padding:12px 40px; border-radius:999px; font-weight:700; font-size:15px; white-space:nowrap;
}
.btn-pill .arrow{ width:24px; height:24px; display:block; }
.btn-pill--dark{ background:var(--navy); color:#fff; padding:12px 40px; font-size:13px; }
.btn-pill--teal{ background:var(--navy); color:#fff; box-shadow:5px 5px 20px rgba(0,0,0,.25); }
.btn-pill--white{ background:#fff; color:var(--navy); box-shadow:5px 5px 20px rgba(0,0,0,.25); }
.btn-outline{
  display:inline-flex; align-items:center; justify-content:space-between; gap:24px;
  padding:12px 40px; border-radius:999px; border:2px solid var(--teal); color:var(--teal);
  font-weight:700; font-size:15px;
}

/* ==========================================================
   Header (site-wide)
   ========================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 60px;
}
/* お問い合わせページ(page-id-54)もworks詳細ページと同じ固定ヒーロー構成(.hero--work)を
   使うため、ヘッダーもホーム/works詳細と同様に固定(追従)させる */
body:not(.home):not(.single-works):not(.page-id-54):not(.page-id-25021):not(.has-work-hero) .site-header{ position:absolute; }
/* ログイン中はWordPress管理バー(高さ32px/モバイル46px)の分だけ固定ヘッダーを下げる */
body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){
  body.admin-bar .site-header{ top:46px; }
}
.site-header__logo img{ height:40px; }
.site-header__nav{
  display:flex; align-items:center; gap:32px;
  padding:16px 40px; border-radius:100px;
  background: rgb(193 193 193 / 35%);
  backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px);
}
.site-header__nav ul{ display:flex; gap:32px; }
.site-header__nav a:not(.btn-pill){ font-family:var(--font-en); color:var(--navy); font-size:16px; font-weight:500; }
.site-header__nav a.btn-pill{ font-family:var(--font-en); font-size:16px; font-weight:500; }

/* ハンバーガーメニュー(モバイル専用。デスクトップでは非表示)
   参考: https://tokusha.jp/ の「MENU」テキスト+アイコンのヘッダーを踏襲 */
.site-header__burger{
  display:none; align-items:center; gap:10px;
  border:none; background:none; padding:0; outline:none;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer; flex:none;
  font-family:var(--font-en); color:#fff; font-size:14px; font-weight:700; letter-spacing:.1em;
}
/* 開いた時に3本線のうち上下2本をX字に交差させる。flexの中央寄せ(gap込み)で
   算出したtranslateYの値だと2本の交差位置が微妙にズレて、Xの線がぴったり
   重ならず両端に余分な線が飛び出て見えてしまっていたため、絶対配置に変更し
   上下の線を同じtop位置へ動かしてから回転させることで確実に交差させる。 */
.site-header__burger-icon{
  position:relative;
  width:28px; height:20px; flex:none;
}
.site-header__burger-icon span{
  display:block; position:absolute; left:0; width:100%; height:2px; background:#fff;
  transition:transform .25s ease, top .25s ease, opacity .25s ease;
}
.site-header__burger-icon span:nth-child(1){ top:0; }
.site-header__burger-icon span:nth-child(2){ top:9px; }
.site-header__burger-icon span:nth-child(3){ top:18px; }
.site-header__burger[aria-expanded="true"] .site-header__burger-icon span:nth-child(1){ top:9px; transform:rotate(45deg); }
.site-header__burger[aria-expanded="true"] .site-header__burger-icon span:nth-child(2){ opacity:0; }
.site-header__burger[aria-expanded="true"] .site-header__burger-icon span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* ドロワー: ヘッダー直下からリストが始まり、上部に黒いCTAボタン、
   各リンクは左揃え+区切り線というtokusha.jpの構成を踏襲 */
.site-mobile-nav{
  display:none;
  position:fixed; inset:0; z-index:99;
  background:#fff;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease;
  overflow-y:auto;
}
.site-mobile-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.site-mobile-nav__cta{
  display:flex; align-items:center; justify-content:center;
  margin:82px 20px 0; padding:20px; border-radius:8px;
  background:var(--navy); color:#fff;
  font-size:16px; font-weight:700; text-align:center;
}
.site-mobile-nav nav{ padding:0 20px; }
.site-mobile-nav ul{ display:flex; flex-direction:column; margin-top:12px; }
.site-mobile-nav__link{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px;
  border-bottom:1px solid #e2ddd0;
  font-family:var(--font-en); color:var(--navy); font-size:20px; font-weight:500; letter-spacing:1px;
  text-align:left;
}
.site-mobile-nav__link .arrow{ width:20px; height:20px; display:block; flex:none; }

/* ==========================================================
   共通メッシュグラデーション(参考: https://web-tools.repop.jp/css-mesh-gradient/)
   8点の放射グラデーション + background-size:200% 200% + 単純な線形アニメーション。
   ========================================================== */
.mesh-anim, .hero__mesh, .page-hero__mesh, .service__mesh{
  background-color:var(--mesh-navy);
  background-image:var(--mesh-bg-image);
  background-size:200% 200%;
  animation:meshMove 18s ease infinite;
}
@keyframes meshMove{
  0%{ background-position:0% 0%; }
  100%{ background-position:100% 100%; }
}

/* ==========================================================
   FV / HERO ─ セクション丸ごと画面に固定(position:fixed)。
   直後の .hero-spacer が固定表示の間だけスクロール量を確保し、
   .page-shell(z-index高)配下の .about が透過パネルとして迫り上がって覆う。
   ========================================================== */
.hero{
  position:fixed; inset:0; z-index:1;
  height:100vh;
  overflow:hidden;
  color:#fff;
}
.hero-spacer{ height:100vh; }

.hero__mesh{
  position:absolute; inset:0; z-index:0;
}
.hero__glow{
  position:absolute; z-index:0; top:-320px; left:20px; pointer-events:none;
  width:43.75rem; height:43.75rem; aspect-ratio:1/1; border-radius:43.75rem;
  background:rgba(255,255,255,.30); filter:blur(100px);
}
.hero__grain, .page-hero__grain, .service__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* FV(.hero__mesh)とSERVICE(.service__mesh)の動いているグラデーション部分は
   ノイズをより強く効かせる(page-heroの固定ページバナーは元の強さのまま)。
   元のfeTurbulenceは中間グレーに寄った柔らかいノイズでoverlayブレンドでも
   ほぼ見えなかったため、feColorMatrixでアルファ値を急峻に増幅し、白黒の
   粒がはっきり見えるコントラストの強いノイズに差し替えている。 */
.hero__grain, .service__grain{
  opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 25 -12'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero__fixed-content{
  position:absolute; z-index:3; top:18%; left:0; right:0;
  max-width:var(--container); margin:0 auto;
  padding:0 60px;
  transform:translateY(80px);
}
.hero__headline-svg{ display:block; width:1000px; max-width:100%; height:auto; }
.hero__headline-svg path{ fill:#fff; }
/* reveal-rectの伸長はCSS @keyframesではなくJS(rAF)で直接attributeを書き換えて実装
   (clipPath内の要素はCSSアニメーションが効かないブラウザ挙動があるため) */
.hero__lead{ font-size:32px; font-weight:500; margin:40px 0 10px; color:#fff; }
.hero__tag{ font-family:var(--font-en); font-weight:400; font-size:50px; letter-spacing:5px; line-height:1.3; color:#fff; }

/* background-attachment:fixedを明示しないと、.aboutのbackdrop-filterがこの
   写真(ラスター画像)だけを正しくサンプリングできずシャープなまま透けてしまう
   (実機確認済み: 同じ.hero内でもCSSグラデーションの.hero__meshは無指定でも
   正常にぼける一方、写真はfixedを明示して初めて正しくぼける)。.heroは既に
   position:fixedなので見た目は変わらないが、backdrop-filterのサンプリング対象
   として正しく扱われるようにするための指定。 */
.hero__image{
  position:absolute; z-index:2; left:0; right:0; bottom:0; top:38%;
  background-image:url("assets/images/fv-photo.webp");
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
  transform:translateY(80px);
}
.hero__image-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
}

/*
  ABOUT以降のすべてのセクションをこの箱に入れる。当初は.page-shell自体に
  position:relative + z-indexを与え、1つのスタッキングコンテキストとして
  まとめて.heroの上に重ねていたが、これが原因で.aboutのbackdrop-filterが
  .hero(別のスタッキングコンテキスト)を正しくサンプリングできず、ぼかしが
  一切効かない不具合が実機で確認された(backdrop-filterは同じスタッキング
  コンテキストの外にある内容を正しく透過できないブラウザ挙動がある)。
  そのため.page-shell自体はスタッキングコンテキストを作らず(z-index無し)、
  直下の各セクションに個別にz-index:2を与える方式に変更した。
*/
.page-shell{ position:relative; }
/* .page-shellの直下は<main id="top">が1つあるだけで、.about等の各セクションは
   さらにその子にあたる。<main>自体にz-indexを与えるとまた1つのスタッキング
   コンテキストにまとまってしまい.aboutのbackdrop-filterが.heroを越境して
   サンプリングできなくなるため、<main>には何も付けず、その直下の各セクション
   1つ1つに個別にz-index:2を与える。 */
main#top > *{ position:relative; z-index:2; }
/* .page-shell自体は背景を持たない(透明)。こうしないと.aboutの角丸四隅の
   切り欠き部分にこの背景色が覗いてしまう。各セクションが個別に背景を持つ。 */

/* ==========================================================
   ABOUT / AI x SYSTEM ─ 全幅の半透明パネルが、固定されたFVの上に
   ぼかして透けて見せながら迫り上がる(WORRIESセクションと同じ考え方)。
   ========================================================== */
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes activeBDBlur{
  from{ backdrop-filter:blur(0px) opacity(0); -webkit-backdrop-filter:blur(0px) opacity(0); }
  to{ backdrop-filter:blur(10px) opacity(1); -webkit-backdrop-filter:blur(10px) opacity(1); }
}

.about{
  position:relative;
  background:rgba(217,217,217,.20);
  backdrop-filter:blur(10px) opacity(1);
  -webkit-backdrop-filter:blur(10px) opacity(1);
  border-radius:60px 60px 0 0;
  padding:150px 60px 140px;
  overflow:hidden;
  color:#fff;
  animation:fadeIn .3s ease-out forwards, activeBDBlur .2s ease-out .1s forwards;
}
.about__inner{
  position:relative;
  max-width:1200px; margin:0 auto;
  text-align:center;
}
.about__title-stack{ display:grid; place-items:center; margin-bottom:30px; }
.about__title-stack > *{ grid-area:1/1; margin:0 !important; }
.about__bg-text{
  font-family:var(--font-en); font-weight:300; font-size:120px; letter-spacing:7.2px;
  color:rgba(255,255,255,.15);
}
.about__label{ position:relative; z-index:1; font-size:32px; font-weight:700; color:#fff; }
.about__title-graphic{ width:min(560px,90%); margin:0 auto 30px; }
.about__heading{ font-family:var(--font-jp) !important; font-size:32px !important; font-weight:500 !important; line-height:1.5625; margin:0 0 40px !important; color:#fff; }
.about__body{ max-width:900px; margin:0 auto; text-align:left; }
.about__body p{ font-size:15px; line-height:2; margin-bottom:20px; color:#fff; }
.about__steps{ width:100%; max-width:1050px; margin:50px auto 0; }

/* ==========================================================
   WORKS
   ========================================================== */
.works{ background:#F9F8F4; padding:120px 60px; }
.works__inner{ max-width:var(--container); margin:0 auto; }
.works__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:50px; flex-wrap:wrap; gap:20px; }
.works__body{ display:grid; grid-template-columns:194px 1fr; gap:25px; }
.works__filter li{ padding:8px 0 8px 16px; position:relative; font-size:15px; }
.works__filter li::before{ content:"▸"; position:absolute; left:0; font-size:10px; color:var(--navy); }
.works__filter li.is-active, .works__filter li a.is-active{ font-weight:700; }
.works__filter a{ display:block; }

.works__content{ min-width:0; }
.works__tabs{
  display:flex; justify-content:center; gap:10px; background:#fff; border-radius:999px; padding:10px; margin-bottom:40px;
}
.works__tabs a{
  display:flex; align-items:center; justify-content:center;
  width:160px; flex:none; height:40px; border:none; border-radius:999px; background:transparent;
  font-family:var(--font-jp); font-size:13px; font-weight:500; color:#9c9ea2; cursor:pointer;
}
.works__tabs a.is-active{ background:#bfdce3; color:#64a3b1; font-weight:700; }

/* 大きい記事(概要文つき)は小さい記事より背が高くなりやすく、同じグリッド行に
   混在させると行の高さが大きい記事に引っ張られて小さい記事の下に大きな空白が
   できてしまう。大きい記事(+詳しく見るボタン)は独立したフレックス列にし、
   小さい記事は別の2列グリッドに分離することで、互いの高さに影響しないようにする。 */
.works__grid{
  display:flex; align-items:flex-start; gap:25px;
}
.works__featured{
  display:flex; flex-direction:column; gap:25px;
  flex:0 0 calc((100% - 50px) * 407 / 931);
}
.works__small-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:25px;
  flex:1; align-content:start;
}
/* モバイル専用の「一覧へ」ボタン(WORKS/COLUMN)。デスクトップでは非表示にし、
   モバイルでは記事一覧の一番下・コンテンツ幅いっぱいに表示する。 */
.works__more-mobile, .contact__submit-mobile{ display:none; }
/* モバイルのみ強制改行させたい箇所に付与するユーティリティ。デスクトップでは無効化。 */
.u-sp-only{ display:none; }
.work-card{ display:block; }
.work-card img{ width:100%; aspect-ratio:262/150; object-fit:cover; border:1px solid #dfdfdf; margin-bottom:16px; background:#eee; }
.work-card--large img{ aspect-ratio:407/260; }
.work-card__tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.work-card__tags span{ border:1px solid var(--navy); font-size:10px; font-weight:700; padding:2px 10px; }
.work-card__title{ font-size:14px; font-weight:700; line-height:1.5; margin-bottom:8px; color:var(--navy); }
.work-card--large .work-card__title{ font-size:18px; }
.work-card__date{ font-family:var(--font-en); font-weight:300; font-size:8px; color:var(--gray); }
.work-card--large .work-card__date{ font-size:12px; }
.work-card__excerpt{ font-size:15px; line-height:1.7; color:var(--gray); margin-top:10px; }
.works__more-wrap .btn-outline{ width:100%; height:56px; padding:12px 40px; }

/* 制作事例一覧(archive.php): コンテンツ幅1200px・大カテゴリータブを最上部・最新記事の大表示なしの均一グリッド */
.work-detail__inner{ max-width:1200px; margin:0 auto; }
.works--archive .works__inner{ max-width:1200px; margin:0 auto; }
.works--archive .works__body{ align-items:start; }
.works__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px; align-content:start; min-width:0; }
.works--archive .work-card__title{ font-size:14px; }

/* ==========================================================
   WORRIES ─ 上部の帯(.worries-visual)はビル写真をそのまま
   background-attachment:fixedで固定表示するプレビュー帯。
   直後の .worries-wrap は .worries と全く同じ高さになる箱で、
   中の .worries-wrap__bg が(.worriesの高さがカード数で変わっても)
   常にビル写真をfixedで固定表示し続ける。.worries自体はABOUTと
   全く同じ透過+ぼかしスタイル(rgba(217,217,217,.20)+blur(10px))で
   その上にせり上がり、常に正しくビル写真がぼけて透けて見える。
   iOS Safariでは background-attachment:fixed が効かないため、
   モバイルでは通常のscroll指定にフォールバックする。
   ========================================================== */
.worries-visual{
  height:70vh; min-height:460px;
  background-color:#0a1a2e;
  background-image:url("assets/images/worries-buildings.webp");
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}

.worries-wrap{ position:relative; margin-top:-90px; }
.worries-wrap__bg{
  position:absolute; inset:0;
  background-color:#0a1a2e;
  background-image:url("assets/images/worries-buildings.webp");
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}

.worries{
  position:relative;
  background:rgba(217,217,217,.20);
  backdrop-filter:blur(10px) opacity(1);
  -webkit-backdrop-filter:blur(10px) opacity(1);
  padding:150px 60px 100px;
  border-radius:60px 60px 0 0;
  overflow:hidden;
  animation:fadeIn .3s ease-out forwards, activeBDBlur .2s ease-out .1s forwards;
}
/* backdrop-filterが効かない/サポートされないブラウザでは、透過率20%の
   薄いグレーだけではFV(hero)の文字がくっきり透けて見えてしまう。
   backdrop-filter未対応環境ではぼかしに頼らず、背景をしっかり不透明にして
   FVを完全に隠すフォールバック。対応環境の見た目はそのまま(rgba(217,217,217,.20)
   + blur)を維持する。 */
@supports not (backdrop-filter:blur(1px)) and not (-webkit-backdrop-filter:blur(1px)) {
  .about, .worries{ background:rgba(26,44,68,.92); }
}
.worries__bg-text{
  position:absolute; bottom:0; left:50%; transform:translate(-50%,24px);
  font-family:var(--font-en); font-weight:300; font-size:200px; line-height:1; letter-spacing:12px;
  color:rgba(255,255,255,.35); text-transform:uppercase; white-space:nowrap;
  z-index:0;
}
.worries .section-heading{ position:relative; margin:0 0 60px !important; }
.worries__grid{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:1200px; margin:0 auto;
}
.worry-card{
  background:rgba(255,255,255,.6); border-radius:20px; padding:40px; text-align:center;
}
.worry-card__num{
  display:inline-block;
  font-family:var(--font-en); font-weight:700; font-size:56px;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:14px;
}
.worry-card h3{ font-family:var(--font-jp) !important; font-size:24px !important; font-weight:500 !important; margin-bottom:18px; color:var(--navy); }
.worry-card p:not(.worry-card__num){ font-size:15px; line-height:1.85; color:var(--gray); text-align:left; }

/* ==========================================================
   KODAWARI
   ========================================================== */
.kodawari{ background:#F9F8F4; padding:100px 60px 140px; text-align:center; }
.kodawari .section-heading{ margin:0 0 60px !important; }
.kodawari__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1200px; margin:60px auto 0;
}
.kodawari-card img{ max-width:260px; margin:0 auto 20px; }
.kodawari-card h3{ font-family:var(--font-jp) !important; font-size:20px !important; font-weight:500 !important; margin-bottom:16px; color:var(--navy); }
.kodawari-card p{ font-size:15px; line-height:1.9; color:var(--gray); text-align:left; }

/* ==========================================================
   SERVICE
   ========================================================== */
.service{ position:relative; padding-bottom:100px; overflow:hidden; }
.service__mesh{
  position:absolute; inset:0; z-index:0;
}
.service::before{
  content:""; position:absolute; top:0; left:0; right:0; height:304px; z-index:1;
  background:linear-gradient(to top, rgba(249,248,244,0), var(--cream));
}
.service__intro{
  position:relative; z-index:1; color:#fff; max-width:1200px; margin:0 auto; padding:120px 60px 60px;
}
.service__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.service__title-stack{ display:grid; margin-bottom:20px; }
.service__title-stack > *{ grid-area:1/1; align-self:center; margin:0 !important; }
.service__bg-text{
  font-family:var(--font-en); font-weight:300; font-size:120px; letter-spacing:7.2px;
  color:rgba(255,255,255,.2);
}
.service__heading{ position:relative; z-index:1; font-family:var(--font-jp) !important; font-size:32px !important; font-weight:700 !important; color:#fff; }
.service__lead{ font-size:32px; font-weight:500; line-height:1.3; margin-bottom:30px; color:#fff; }

.service__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  padding-left:120px;
}
.service-card{
  display:block; position:relative; min-height:660px;
  background-size:cover; background-position:center;
  padding:40px; color:#fff;
}
.service-card::before{
  content:""; position:absolute; inset:0; background:rgba(26,44,68,.55);
}
.service-card__body{ position:relative; display:flex; flex-direction:column; gap:14px; height:100%; justify-content:flex-end; color:#fff; }
.service-card__num{ font-family:var(--font-en); font-weight:300; font-size:24px; display:flex; align-items:center; gap:14px; color:#fff; }
.service-card__num span{ font-size:12px; letter-spacing:.72px; }
.service-card__label{ font-size:20px; font-weight:500; color:#fff; }
.service-card h3{ font-family:var(--font-jp) !important; font-size:26px !important; font-weight:700 !important; line-height:1.4; color:#fff; }
.service-card__foot{ display:flex; gap:24px; align-items:flex-end; }
.service-card__foot p{ font-size:15px; line-height:1.8; flex:1; color:#fff; }
.circle-arrow{
  width:50px; height:50px; border:2px solid #fff; border-radius:999px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.circle-arrow img{ width:24px; }

/* ==========================================================
   COLUMN
   ========================================================== */
.column{ background:#F9F8F4; padding:120px 60px; }
/* COLUMNとNEWSは同じ.columnセクションが連続しており、COLUMNの下padding(120px)+
   NEWSの上padding(120px)+NEWSの内側border上の追加padding(60px)が積み重なって
   余白が開きすぎて見えるため、COLUMN側の下paddingをなくす */
#column{ padding-bottom:0; }
#news .column__inner{ border-top:1px solid #d8d2c2; padding-top:60px; }
.column__inner{ max-width:var(--container); margin:0 auto; }
.column__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.column-card{ position:relative; display:block; background:#fff; padding:20px; }
.column-card img{ width:100%; aspect-ratio:384/201; object-fit:cover; margin-bottom:11px; background:#eee; }
.column-card__date{ font-family:var(--font-en); font-size:14px; color:var(--gray); margin-bottom:6px; }
.column-card__title{ font-size:15px; font-weight:700; line-height:1.5; margin-bottom:8px; color:var(--navy); }
.column-card__excerpt{ font-size:13px; line-height:1.7; color:var(--gray); }

/* コラム一覧の左カラム(タグ一覧/新着コラム/よく読まれている記事/アーカイブ) */
.column-layout{ display:grid; grid-template-columns:1fr 280px; gap:48px; align-items:start; }
.column-layout .column__grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
.column-layout .column-card{ padding:16px; }
.column-main__heading{ display:flex; align-items:center; gap:14px; font-family:var(--font-jp) !important; font-weight:500 !important; font-size:24px !important; letter-spacing:.48px; color:var(--navy) !important; margin:0 0 24px !important; }
.column-main__heading .work-detail__dot{ margin-top:0; }
.column-main__count{ font-size:14px; font-weight:400; color:var(--gray); letter-spacing:0; }
.column-main{ min-width:0; }
.column-side{ display:flex; flex-direction:column; gap:40px; }
.column-side__heading{ font-family:var(--font-jp) !important; font-size:16px !important; font-weight:700 !important; color:var(--navy); margin:0 0 16px !important; padding:0 0 10px; border-bottom:1px solid var(--navy); }
.column-side__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.column-side__tags a{ display:inline-block; border:1px solid #cecece; background:#fff; padding:4px 12px; font-size:12px; color:var(--navy); }
.column-side__tags a.is-active{ border-color:var(--navy); background:var(--navy); color:#fff; }
.column-side__item + .column-side__item{ margin-top:10px; }
.column-side__item a{ display:flex; gap:12px; align-items:center; position:relative; background:#fff; padding:10px; }
.column-side__thumb{ flex:none; width:72px; aspect-ratio:1; background:#e9e7e0; overflow:hidden; }
.column-side__thumb img{ width:100%; height:100%; object-fit:cover; }
.column-side__thumb picture{ display:block; width:100%; height:100%; }
.column-side__info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.column-side__date{ font-family:var(--font-en); font-weight:300; font-size:12px; color:var(--gray); }
.column-side__title{ font-size:13px; font-weight:700; line-height:1.5; color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.column-side__rank{ position:absolute; left:0; top:0; z-index:1; min-width:22px; height:22px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:var(--navy); color:#fff; font-family:var(--font-en); font-size:12px; font-weight:600; }
.column-side__archive li{ border-bottom:1px solid #e2ddd0; }
.column-side__archive a{ display:flex; justify-content:space-between; padding:10px 4px; font-size:14px; color:var(--navy); }
.column-side__archive a span{ color:var(--gray); }
.column-side__archive a.is-active{ font-weight:700; }
.badge-new{
  position:absolute; top:20px; left:20px; background:#c00000; color:#fff;
  font-size:14px; font-weight:700; padding:2px 19px; z-index:1;
}

/* ==========================================================
   CONTACT (front page dark band)
   ========================================================== */
.contact{
  position:relative;
  min-height:600px;
  background-image:url("assets/images/contact-bg.webp");
  background-size:cover; background-position:center;
  display:flex; align-items:center;
  color:#fff;
  padding:100px 60px;
}
.contact__overlay{ position:absolute; inset:0; z-index:0; background:rgba(0,0,0,.5); }
.contact::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:250px; z-index:1;
  background:linear-gradient(to bottom, rgba(249,248,244,0), var(--cream));
}
.contact__inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; width:100%; display:flex; flex-wrap:wrap; gap:60px; align-items:center; justify-content:space-between; }
.contact__left{ display:flex; flex-direction:column; align-items:flex-start; }
.contact__title-stack{ display:grid; margin-bottom:30px; }
.contact__title-stack > *{ grid-area:1/1; align-self:center; margin:0 !important; }
.contact__bg-text{ font-family:var(--font-en); font-weight:300; font-size:120px; letter-spacing:7.2px; color:rgba(255,255,255,.2); }
.contact__heading{ position:relative; z-index:1; font-family:var(--font-jp) !important; font-size:32px !important; font-weight:700 !important; color:#fff; }
.contact__text{ max-width:520px; }
.contact__text h3{ font-family:var(--font-jp) !important; font-size:32px !important; font-weight:500 !important; line-height:1.3; margin-bottom:20px; color:#fff; }
.contact__text p{ font-size:15px; line-height:1.9; color:#dce5e0; margin-bottom:14px; }

/* ==========================================================
   FOOTER (site-wide) ─ 左:ロゴ/会社情報 + 右:事業概要(区切り線)、下段にナビ・著作権
   ========================================================== */
.site-footer{ background:var(--cream); padding:100px 60px 60px; }
.site-footer__inner{ max-width:var(--container); margin:0 auto; }
.site-footer__top{ display:flex; flex-wrap:wrap; gap:60px; justify-content:space-between; }
.site-footer__brand{ max-width:500px; }
.site-footer__logo{ height:36px; margin-bottom:30px; }
.site-footer__name{ font-size:18px; font-weight:500; margin-bottom:16px; color:var(--navy); }
.site-footer__address{ font-size:14px; line-height:1.8; color:var(--navy); }
.site-footer__services{
  display:flex; flex-direction:column; gap:20px; flex:1; max-width:520px;
  border-left:1px solid #cecece; padding-left:40px;
}
.site-footer__services-title{ font-size:14px; font-weight:700; margin-bottom:6px; color:var(--navy); }
.site-footer__services p:not(.site-footer__services-title){ font-size:10px; line-height:1.6; color:var(--navy); }
.site-footer__nav{
  display:flex; gap:24px; flex-wrap:wrap; margin-top:30px;
}
.site-footer__nav a{ font-size:16px; text-transform:uppercase; color:var(--navy); }
.site-footer__copyright{ font-family:var(--font-en); font-weight:300; font-size:10px; color:var(--navy); margin-top:24px; }

/* ==========================================================
   見出しテキストアニメーション(左からさらさら)
   参考: https://weval.jp/animation/133 (txtToRight)
   1文字ずつspanに分割し、scaleX(0)→scaleX(1)を左端起点でずらしながら
   再生することで、文字が左から流れるように現れる。
   ========================================================== */
.hml-anime-heading{ overflow:hidden; }
.hml-anime-heading span{
  display:inline-block; transform:scaleX(0); transform-origin:left;
  transition:transform .5s ease;
}
.hml-anime-heading.is-revealed span{ transform:scaleX(1); }

/* 英字+日本語の組み合わせタイトル(WORKS/COLUMN/NEWSのeyebrow)。
   .eyebrow__gradはbackground-clip:textでグラデーション文字を描画しているため、
   1文字ずつ<span>で分割すると背景(background)が継承されず透明になって消えて
   しまう。そのため英字側は単語単位でscaleXアニメーションさせ、日本語側
   (.eyebrow__ja)だけ他の見出しと同じ1文字ずつのアニメーションを適用する。 */
.hml-anime-eyebrow .eyebrow__grad{
  transform:scaleX(0); transform-origin:left; transition:transform .5s ease;
}
.hml-anime-eyebrow.is-revealed .eyebrow__grad{ transform:scaleX(1); }
.hml-anime-eyebrow .eyebrow__ja{ overflow:hidden; }
.hml-anime-eyebrow .eyebrow__ja span{
  display:inline-block; transform:scaleX(0); transform-origin:left;
  transition:transform .5s ease;
}
.hml-anime-eyebrow.is-revealed .eyebrow__ja span{ transform:scaleX(1); }

/* ==========================================================
   下からフェードイン(ABOUT〜NEWSの各コンテンツ)
   .hml-anime-headingと同じIntersectionObserver(is-revealed付与)を流用。
   グリッド内のカードは.fade-up-group > *でnth-childごとに再生を少しずつ
   ずらし、順番に浮かび上がるようにする。
   ========================================================== */
.fade-up{
  opacity:0; transform:translateY(40px);
  transition:opacity .7s ease, transform .7s ease;
}
.fade-up.is-revealed{ opacity:1; transform:translateY(0); }
.fade-up-group > *{ transition-delay:0s; }
.fade-up-group > *:nth-child(2){ transition-delay:.1s; }
.fade-up-group > *:nth-child(3){ transition-delay:.2s; }
.fade-up-group > *:nth-child(4){ transition-delay:.3s; }
.fade-up-group > *:nth-child(5){ transition-delay:.4s; }

/* ==========================================================
   Inner pages ─ page banner + generic content typography
   ========================================================== */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  min-height:340px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:140px 24px 60px;
}
.page-hero__mesh{ position:absolute; inset:0; z-index:0; }
.page-hero__eyebrow{ font-family:var(--font-en); font-weight:300; font-size:15px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:12px; }
.page-hero__title{ position:relative; font-size:36px; font-weight:700; color:#fff; }

.content-section{ padding:80px 24px 120px; }
.content-wrap{ max-width:840px; margin:0 auto; }
.content-wrap.is-wide{ max-width:1200px; }

.entry-content{ font-size:16px; line-height:1.9; color:var(--navy); }
.entry-content h2{ font-size:26px; font-weight:700; margin:2em 0 .8em; color:var(--navy); }
.entry-content h3{ font-size:20px; font-weight:700; margin:1.8em 0 .6em; color:var(--navy); }
.entry-content h4{ font-size:17px; font-weight:700; margin:1.6em 0 .5em; color:var(--navy); }
.entry-content p{ margin:0 0 1.4em; color:var(--navy); }
.entry-content ul, .entry-content ol{ margin:0 0 1.4em; padding-left:1.4em; }
.entry-content ul{ list-style:disc; }
.entry-content ol{ list-style:decimal; }
.entry-content li{ margin-bottom:.4em; }
.entry-content a{ color:var(--teal); text-decoration:underline; }
.entry-content img{ height:auto; border-radius:8px; }
.entry-content table{ width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:14px; }
.entry-content table td, .entry-content table th{ border:1px solid #e2ddd0; padding:10px 14px; text-align:left; vertical-align:top; }
.entry-content table th, .entry-content table td:first-child{ background:#f5f2ea; font-weight:700; width:9em; }
.entry-content blockquote{ margin:1.6em 0; padding:1em 1.4em; border-left:4px solid var(--teal); background:#f5f2ea; color:var(--gray); }
.entry-content .wp-block-button__link{ display:inline-block; padding:.9em 2.2em; border-radius:999px; background:var(--teal); color:#fff; font-weight:700; text-decoration:none; }

/* Contact Form 7 baseline */
.wpcf7-form{ font-size:15px; }
.wpcf7-form p{ margin:0 0 1.4em; }
.wpcf7-form label{ display:block; font-weight:700; margin-bottom:.5em; }
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],
.wpcf7-form select,
.wpcf7-form textarea{
  width:100%; padding:.9em 1em; border:1px solid #d8d2c2; border-radius:8px;
  font-family:var(--font-jp); font-size:15px; background:#fff; color:var(--navy);
}
.wpcf7-form textarea{ min-height:160px; resize:vertical; }
.wpcf7-form input[type=submit]{
  display:inline-block; padding:1em 3em; border:none; border-radius:999px;
  background:var(--teal); color:#fff; font-weight:700; font-size:15px; cursor:pointer;
}
.wpcf7-form input[type=submit]:hover{ opacity:.9; }
.wpcf7-not-valid-tip{ color:#c00000; font-size:13px; margin-top:.4em; }
.wpcf7-response-output{ border-radius:8px; padding:1em 1.2em; margin-top:1.5em; }

/* Archive pagination */
.pagination{ display:flex; justify-content:center; gap:10px; margin-top:60px; }
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 8px; border-radius:999px;
  border:1px solid #d8d2c2; font-size:14px; color:var(--navy);
}
.pagination .current{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* 404 */
.error-404{ text-align:center; padding:180px 24px 140px; }
.error-404__code{ font-family:var(--font-en); font-size:80px; font-weight:700; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 900px){
  /* PCの.site-header__nav(ピル型ナビ)と同じメッシュ透過(半透明+ぼかし)を
     ヘッダーバー全体に適用する */
  .site-header{
    padding:12px 16px; margin:6px 14px 14px; border-radius:0.5rem;
    background: rgb(193 193 193 / 35%);
    backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px);
  }
  .site-header__logo img{ height:32px; }
  .site-header__nav{ display:none; }
  .site-header__burger{ display:flex; color:var(--navy); }
  .site-header__burger-icon span{ background:var(--navy); }
  .site-mobile-nav{ display:block; }

  /* ボタンの角丸をpill(999px)から.5remに統一 */
  .btn-pill, .btn-outline{ border-radius:.5rem; }

  /* FVのキャッチコピー・写真をさらに80px下に(元の20pxシフト+80px=100px) */
  .hero__fixed-content{ top:15%; padding:0 24px; transform:translateY(100px); }
  .hero__lead{ font-size:20px; margin-top:20px; }
  .hero__tag{ font-size:24px; letter-spacing:3px; }
  .hero__image{ transform:translateY(100px); }

  .eyebrow__grad{ font-size:40px; letter-spacing:2px; }
  .eyebrow{ gap:12px; }
  .section-heading{ font-size:26px !important; }
  .u-sp-only{ display:inline; }

  /* セクションタイトル下の余白をスマホでは40pxに統一 */
  .about__title-stack{ margin-bottom:40px; }
  .works__head{ margin-bottom:40px; }
  .worries .section-heading{ margin:0 0 40px !important; }
  .kodawari .section-heading{ margin:0 0 40px !important; }
  .service__title-stack{ margin-bottom:40px; }
  .contact__title-stack{ margin-bottom:40px; }

  .about{ padding:56px 20px; border-radius:30px 30px 0 0; }
  .about__bg-text{ font-size:56px; }
  .about__label{ font-size:22px; }
  .about__heading{ font-size:22px !important; text-align:left; }
  .about__heading br{ display:none; }

  .works{ padding:56px 20px; }
  .works__body{ grid-template-columns:1fr; }
  .works__filter{ display:none; }
  .works__list{ grid-template-columns:1fr 1fr; gap:10px; }
  .works__tabs a{ width:auto; flex:1; font-size:11px; padding:0 4px; }
  .works__grid{ flex-direction:column; gap:10px; }
  .works__featured{ flex-basis:auto; width:100%; gap:10px; }
  .works__small-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  #works .works__head .btn-pill{ display:none; }
  #works .works__more-mobile{ display:flex; width:100%; justify-content:center; margin-top:30px; }
  /* 新着記事(大きいカード)は、スマホでは概要文と「詳しく見る」ボタンを非表示にする */
  .work-card--large .work-card__excerpt{ display:none; }
  .works__featured .works__more-wrap{ display:none; }

  /* こんなお悩み: .worries-wrap(こんなお悩みセクション)の開始位置を
     .worries-visual(画像)の開始位置と完全に一致させる。.worries-visualの
     高さがheight:70vhのため、同じ70vh分だけ上にmargin-topで引き上げる。
     iOS Safari等ではbackground-attachment:fixedが未対応の場合に背景画像
     自体が表示されなくなることがあるため、モバイルではscrollに明示的に
     切り替えて画像が確実に表示されるようにする。 */
  .worries-visual, .worries-wrap__bg{ background-attachment:scroll; }
  .worries-wrap{ margin-top:-70vh; }
  .worries{ padding:56px 20px; border-radius:0; }
  /* PC(font-size:200px)基準のtransform:translate(-50%,24px)は下に24pxはみ出す
     演出だが、モバイルはフォントサイズが80pxと小さいため同じ24pxのはみ出しが
     相対的に大きく、overflow:hiddenで文字の下側が大きく見切れてしまう。
     モバイルでは下方向のオフセットをなくし、見切れないようにする */
  .worries__bg-text{ font-size:80px; letter-spacing:0; transform:translate(-50%,0); }
  .worries__grid{ grid-template-columns:1fr; }
  .worry-card__num{ font-size:40px; }

  .kodawari{ padding:56px 20px; }
  .kodawari__grid{ grid-template-columns:1fr; gap:50px; }

  .service{ padding-bottom:0; }
  .service__intro{ padding:56px 20px 40px; }
  .service__bg-text{ font-size:56px; }
  .service__heading{ font-size:22px !important; }
  .service__lead{ font-size:20px; margin-bottom:0; }
  .service__head .btn-pill{ display:none; }
  .service__grid{ grid-template-columns:1fr; padding-left:0; padding-right:0; }
  .service-card{ min-height:auto; padding-left:24px; padding-right:24px; }
  .service-card h3{ font-size:20px !important; }

  /* #columnはID指定なのでこの中の.column{padding:56px 20px}より優先されて
     しまうため、PC用のpadding-bottom:0をモバイルでは明示的に56pxへ戻す */
  #column{ padding-bottom:56px; }
  .column{ padding:56px 20px; }
  .column__grid{ grid-template-columns:1fr; gap:10px; }
  .column-layout{ grid-template-columns:1fr; gap:48px; }
  .column-layout .column__grid{ grid-template-columns:1fr; gap:10px; }
  #column .works__head .btn-pill, #news .works__head .btn-pill{ display:none; }
  #column .works__more-mobile, #news .works__more-mobile{ display:flex; width:100%; justify-content:center; margin-top:30px; }

  .contact{ padding:56px 20px; }
  .contact__inner{ flex-direction:column; align-items:flex-start; gap:24px; }
  .contact__bg-text{ font-size:56px; }
  .contact__heading{ font-size:22px !important; }
  .contact__text h3{ font-size:22px !important; }
  .contact__left .btn-pill{ display:none; }
  .contact__submit-mobile{ display:flex; width:100%; justify-content:center; margin-top:24px; }

  .site-footer{ padding:56px 20px; }
  .site-footer__top{ flex-direction:column; gap:30px; }
  /* 区切り線を「システム開発」の上ではなく、マーケティングの概要文とロゴの間
     (services→brandの並び替え後の境目)に表示する */
  .site-footer__brand{ order:2; border-top:1px solid #cecece; padding-top:20px; }
  .site-footer__services{ order:1; border-left:none; padding-left:0; }
  .site-footer__nav{ gap:20px; }

  .page-hero__title{ font-size:26px; }
}

/* ==========================================================
   works詳細ページ(Figma node-id=1627:7 準拠)
   ========================================================== */
/* FVと同じ「hero固定+spacerでスクロール量確保」のパララックス構成。
   work-detail/CONTACTは.work-page-shell配下でz-index:2を与えて
   固定されたheroの上に迫り上がって覆う(角丸で下のheroが一瞬覗く)。 */
.hero--work{ height:560px; }
.hero-spacer--work{ height:560px; }
.work-page-shell{ position:relative; }
.work-page-shell > *{ position:relative; z-index:2; }
/* work-page-shell内で固定heroの非表示化(script.js)が間に合わない場合の保険として、
   フッターもz-indexを与えて固定heroより確実に上に描画されるようにする */
.single-works .site-footer, .page-id-54 .site-footer, .page-id-25021 .site-footer, .has-work-hero .site-footer{ position:relative; z-index:2; }

/* 英字タイトルはヘッダー下端から100px、日本語タイトルは丸パネル(work-page-shell)上端から
   100pxになるよう、中央寄せではなく上下それぞれ絶対配置で固定する。
   ヘッダー高さ120px(PC)/62px(SP、margin-top6px込み)、丸パネルの迫り上がり量80px(PC)/30px(SP)を
   踏まえた値。 */
.work-hero{ position:absolute; inset:0; width:100%; max-width:var(--container); margin:0 auto; text-align:left; box-sizing:border-box; }
.work-hero__en{ position:absolute; top:220px; left:24px; right:24px; font-family:var(--font-en); font-weight:300; font-size:80px; letter-spacing:4.8px; color:#fff; line-height:1; margin:0; }
.work-hero__ja{ position:absolute; bottom:180px; left:24px; right:24px; font-family:var(--font-jp); font-size:20px; color:#fff; margin:0; }

.work-detail{ position:relative; z-index:2; background:var(--cream); border-radius:80px 80px 0 0; margin-top:-80px; padding:100px 24px 120px; overflow:hidden; }
.work-detail__blur{ position:absolute; left:-120px; top:-260px; width:700px; height:700px; z-index:0; pointer-events:none; }
.work-detail__blur img{ width:100%; height:100%; display:block; }

.work-detail__col{ position:relative; z-index:1; max-width:950px; margin:0 auto; }

.work-detail__title{ display:flex; align-items:flex-start; gap:14px; font-family:var(--font-jp) !important; font-weight:500 !important; font-size:32px !important; letter-spacing:.64px; color:var(--navy) !important; margin:0 0 40px !important; }
/* 見出し下の装飾ドット廃止に伴い、ドット用に確保されていた下パディングを無くす */
.work-detail__title{ padding-bottom:0; }
.work-detail__dot{ width:14px; height:14px; flex:none; display:block; margin-top:.55em; }

.work-detail__figure{ overflow:hidden; aspect-ratio:950/500; background:#eee; margin-bottom:32px; }
.work-detail__figure img{ width:100%; height:100%; object-fit:cover; display:block; }

.work-detail__cta-row{ position:relative; z-index:1; max-width:var(--container); margin:0 auto 64px; display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }

.work-cta{ display:inline-flex; align-items:center; justify-content:space-between; gap:16px; width:300px; max-width:100%; height:64px; padding:12px 32px; border-radius:999px; box-shadow:5px 5px 20px rgba(0,0,0,.25); color:#fff; font-family:var(--font-jp); font-weight:700; font-size:15px; white-space:nowrap; box-sizing:border-box; }
.work-cta .arrow{ width:24px; height:24px; flex:none; display:block; }
.work-cta--navy{ background:var(--navy); }
.work-cta--red{ background:var(--red); }

.work-detail__table-wrap{ position:relative; z-index:1; max-width:800px; margin:0 auto 80px; }
.work-detail__heading{ font-family:var(--font-jp) !important; font-weight:700 !important; font-size:24px !important; letter-spacing:.48px; color:var(--navy) !important; margin:0 0 30px !important; }
.work-detail__table{ width:100%; border-collapse:collapse; }
.work-detail__table tr{ border-bottom:1px solid #cecece; }
.work-detail__table th, .work-detail__table td{ text-align:left; font-family:var(--font-jp); font-size:16px; padding:20px 0; vertical-align:middle; }
.work-detail__table th{ width:160px; font-weight:700; color:var(--navy); }
.work-detail__table td{ font-weight:400; color:var(--gray); }
.work-detail__table td.is-link{ color:var(--teal); word-break:break-all; }
.work-detail__tag{ display:inline-flex; border:1px solid var(--navy); color:var(--navy); font-weight:700; font-size:16px; padding:2px 10px; }
.work-detail__tags{ display:flex; flex-wrap:wrap; gap:8px; }

.work-detail__section{ margin-bottom:64px; }
.work-detail__section-heading{ font-family:var(--font-jp) !important; font-weight:500 !important; font-size:24px !important; letter-spacing:.48px; color:var(--navy) !important; margin:0 !important; }
.work-detail__divider{ display:block; width:100%; height:2px; margin:20px 0; }
.work-detail__section-body{ font-family:var(--font-jp); font-size:15px; line-height:1.9; color:var(--gray); }
.work-detail__section-body p{ margin:0 0 1em; }
.work-detail__section-body p:last-child{ margin-bottom:0; }
.work-detail__section-body ul, .work-detail__section-body ol{ margin:0 0 1em; padding-left:1.4em; }
.work-detail__section-body ul{ list-style:disc; }
.work-detail__section-body ol{ list-style:decimal; }
.work-detail__section-body li{ margin-bottom:.4em; }
.work-detail__section-body a{ color:var(--teal); }

.work-detail__specs{ background:#fff; padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:80px; }
.work-detail__specs-label{ font-family:var(--font-jp); font-weight:500; font-size:15px; color:var(--gray); margin:0 0 12px; }
.work-detail__swatches{ display:flex; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
.work-detail__swatch-chip{ display:block; width:80px; height:40px; border:1px solid #e3e3e3; }
.work-detail__swatch-codes{ display:flex; gap:14px; font-family:var(--font-jp); font-size:15px; color:var(--gray); flex-wrap:wrap; }
.work-detail__swatch-codes span{ width:80px; }
.work-detail__fonts{ font-family:var(--font-jp); font-size:15px; color:var(--gray); margin:0; }
.work-detail__sitemap{ list-style:disc; padding-left:1.4em; margin:0; font-family:var(--font-jp); font-size:15px; color:var(--gray); }
.work-detail__sitemap li{ margin-bottom:4px; }

.work-detail__mockup{ position:relative; z-index:1; max-width:var(--container); margin:0 auto 60px; display:flex; align-items:flex-end; justify-content:center; }

.work-detail__mockup-pc{ position:relative; width:64%; max-width:640px; aspect-ratio:1600/904; }
.work-detail__mockup-pc-frame{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2; pointer-events:none; }
.work-detail__mockup-pc-screen{ position:absolute; left:10%; top:4.42%; width:80.625%; height:79.09%; overflow:hidden; background:#111; }
.work-detail__mockup-pc-screen img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

.work-detail__mockup-sp{ position:relative; z-index:1; width:196px; aspect-ratio:447/904; margin-left:-32px; margin-bottom:-10px; }
.work-detail__mockup-sp-frame{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2; pointer-events:none; }
.work-detail__mockup-sp-screen{ position:absolute; left:8.28%; top:4.42%; width:83.9%; height:91.8%; overflow:hidden; background:#111; }
.work-detail__mockup-sp-screen img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

.work-detail__white-panel{ position:relative; z-index:1; max-width:var(--container); margin:0 auto 80px; background:#fff; padding:64px; }

.work-detail__design{ display:flex; gap:40px; align-items:flex-start; margin:0 0 50px; }
.work-detail__design-col{ flex:0 0 700px; max-width:700px; min-width:0; }
.work-detail__design-col--sp{ flex:0 0 332px; max-width:332px; }
.work-detail__design-heading{ text-align:center; font-family:var(--font-jp); font-weight:500; font-size:20px; letter-spacing:.4px; color:var(--navy); margin:0 0 30px; }
.work-detail__design-frame{ border:1px solid #e3e3e3; overflow-y:auto; overflow-x:hidden; height:800px; }
.work-detail__design-frame img{ display:block; width:100%; height:auto; }

.work-detail__subpages{ border-top:1px solid #cecece; padding-top:50px; }
.work-detail__subpages-heading{ text-align:center; font-family:var(--font-jp); font-weight:500; font-size:20px; letter-spacing:.4px; color:var(--navy); margin:0 0 40px; }
.work-detail__subpages-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.work-detail__subpages-item{ aspect-ratio:516/323; overflow:hidden; }
.work-detail__subpages-item img{ width:100%; height:100%; object-fit:cover; display:block; }

.work-detail__related{ position:relative; z-index:1; max-width:var(--container); margin:80px auto 0; border-top:1px solid #cecece; padding-top:64px; }
.work-detail__related-heading-row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:40px; }
.work-detail__related-heading-row .work-detail__dot{ margin-top:.5em; }
.work-detail__related-title{ font-family:var(--font-jp) !important; font-weight:500 !important; font-size:32px !important; letter-spacing:.64px; color:var(--navy) !important; margin:0 !important; }
.work-detail__related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.work-detail__related-back{ text-align:center; margin-top:50px; }

@media (max-width:900px){
  .hero--work{ height:420px; }
  .hero-spacer--work{ height:420px; }
  .work-hero__en{ top:162px; left:20px; right:20px; font-size:44px; letter-spacing:2px; }
  .work-hero__ja{ bottom:130px; left:20px; right:20px; font-size:15px; }

  .work-detail{ padding:60px 20px 80px; border-radius:30px 30px 0 0; margin-top:-30px; }
  .work-detail__blur{ width:400px; height:400px; left:-160px; top:-140px; }

  .work-detail__title{ font-size:21px; gap:10px; margin-bottom:24px; }
  .work-detail__figure{ margin-bottom:20px; }

  .work-detail__cta-row{ gap:12px; margin-bottom:40px; }
  .work-cta{ width:100%; max-width:320px; height:56px; padding:12px 24px; font-size:14px; }

  .work-detail__table-wrap{ margin-bottom:50px; }
  .work-detail__heading{ font-size:19px; margin-bottom:20px; }
  .work-detail__table th, .work-detail__table td{ font-size:14px; padding:14px 0; }
  .work-detail__table th{ width:100px; }

  .work-detail__section{ margin-bottom:40px; }
  .work-detail__section-heading{ font-size:18px; }
  .work-detail__section-body{ font-size:14px; }

  .work-detail__specs{ grid-template-columns:1fr; gap:24px; padding:24px; margin-bottom:50px; }

  .work-detail__mockup{ display:none; }

  .work-detail__white-panel{ padding:30px 20px; margin-bottom:50px; }
  .work-detail__design{ flex-direction:column; gap:24px; margin-bottom:30px; }
  .work-detail__design-col{ flex:none; max-width:100%; width:100%; }
  .work-detail__design-col--sp{ max-width:260px; margin:0 auto; }
  .work-detail__design-frame{ height:420px; }

  .work-detail__subpages{ padding-top:30px; }
  .work-detail__subpages-grid{ grid-template-columns:1fr; gap:12px; }

  .work-detail__related{ padding-top:40px; margin-top:50px; }
  .work-detail__related-title{ font-size:24px; }
  .work-detail__related-grid{ grid-template-columns:1fr 1fr; gap:12px; }
}

/* ==========================================================
   お問い合わせページ(Figma node-id=1642:535 準拠)
   .work-detail(works詳細ページの角丸パネル)をそのまま流用し、
   中身だけ差し替える。ヒーロー/パララックスもworks詳細と共通(.hero--work)。
   ========================================================== */
.contact-page__section{ max-width:var(--container); margin:0 auto 80px; }
.contact-page__section:last-child{ margin-bottom:0; }

.contact-page__methods{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-page__method{ background:#fff; border-radius:20px; padding:32px 24px; min-height:176px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.contact-page__method-heading{ font-family:var(--font-jp); font-weight:500; font-size:20px; letter-spacing:.4px; color:var(--navy); margin:0 0 20px; }
.contact-page__tel{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-en); font-weight:300; font-size:40px; letter-spacing:2.4px; color:#5cbdb1; margin:0 0 20px; }
.contact-page__tel img{ width:28px; height:28px; flex:none; }
.contact-page__hours{ font-family:var(--font-jp); font-size:16px; letter-spacing:.32px; color:var(--navy); margin:0; }
.contact-page__line-btn{ display:inline-flex; align-items:center; gap:16px; background:#06c655; color:#fff; padding:14px 40px; border-radius:100px; font-family:var(--font-jp); font-weight:500; font-size:20px; letter-spacing:.4px; filter:drop-shadow(0 4px 2px rgba(0,0,0,.25)); }
.contact-page__line-btn img{ width:30px; height:29px; flex:none; }

.contact-page__lead{ font-family:var(--font-jp); font-size:15px; line-height:1.9; color:var(--gray); margin:0 0 40px; }

/* Contact Form 7(id=19612)を白背景カードに載せ、既存の CF7_* クラスを
   Figmaデザインに合わせて上書きする。フォームの入力項目・並び順自体は
   wp-adminのフォーム編集内容をそのまま使用(このCSSはスタイルのみ)。 */
.contact-page__form-card{ background:#fff; border-radius:20px; padding:64px; }
.contact-page__form-card .CF7_lead{ display:none; } /* 同内容を.contact-page__leadとして枠の外に表示済み */

.contact-page__form-card table.CF7_table{ width:100%; border-collapse:collapse; }
.contact-page__form-card table.CF7_table tr{ border:none; }
/* table.CF7_table tr/th/tdの!important付きpadding(旧テーマ由来、table.CF7_table th 等の
   詳細度(0,1,2)が高い)を確実に上書きするため、同じ詳細度以上のセレクタで指定する */
.contact-page__form-card table.CF7_table th, .contact-page__form-card table.CF7_table td{ text-align:left; padding:0 !important; vertical-align:top; }
.contact-page__form-card table.CF7_table th{ width:240px; padding-right:40px !important; }
/* CF7_noteを含む各trの下余白(Figma: 20px)。table-rowにmarginは効かないためtdのpaddingで入れる */
.contact-page__form-card table.CF7_table td{ padding-bottom:20px !important; }
/* ご相談の種類の行のみ、前後の行との余白を40px(直前の行の20px+20px / 下40px)にし、
   ラベルは注釈を除いた選択肢の範囲に対して上下中央に揃える(Figma仕様) */
.contact-page__form-card table.CF7_table th:has(+ td.purpose){ padding-top:20px !important; }
.contact-page__form-card table.CF7_table td.purpose{ padding-bottom:40px !important; }
@media (min-width:901px){
  .contact-page__form-card table.CF7_table td.purpose{ padding-top:20px !important; }
  .contact-page__form-card table.CF7_table th:has(+ td.purpose){ vertical-align:middle; padding-bottom:calc(40px + 13px + 1.5 * 13px) !important; } /* 下40px + 注釈(margin13px+1行19.5px) */
}
/* height:60pxで隣の入力欄(input/select、高さ60px固定)と下線の位置を厳密に一致させる。
   paddingで高さを決めると、ラベル側とinput側でpaddingの値が違うため下線の高さがずれる。 */
/* width:200pxで項目名の文字数に関わらず下線の幅を揃える(Figma仕様通り) */
.contact-page__form-card th p{ display:inline-flex; align-items:center; gap:10px; margin:0; width:200px; height:60px; padding:0; box-sizing:border-box; border-bottom:1px solid var(--navy); font-family:var(--font-jp); font-weight:500; font-size:16px; color:var(--navy); }
.contact-page__form-card .CF7_req{ font-size:0; padding:0; margin-right:0; background:transparent; border-radius:0; }
.contact-page__form-card .CF7_req::before{ content:"*"; font-size:16px; font-family:var(--font-jp); color:#dc080c; }
.contact-page__form-card .CF7_unreq{ display:none; }

.contact-page__form-card td > p{ margin:0; }
.contact-page__form-card .wpcf7-form-control-wrap{ display:block; }
.contact-page__form-card .CF7_note{ display:block; margin-top:13px; font-family:var(--font-jp); font-weight:300; font-size:13px; color:var(--navy); }

/* サイト共通のカスタマイザー追加CSS(旧テーマ由来、table.CF7_table input/select/textarea等に
   !important付きでスタイルを当てている)がAutoptimizeで本テーマCSSより後に結合されるため、
   同格以上の詳細度(table.CF7_table を含める)+!importantで確実に上書きする。 */
.contact-page__form-card table.CF7_table input[type=text],
.contact-page__form-card table.CF7_table input[type=email]{
  display:block !important; width:100% !important; height:60px !important; box-sizing:border-box !important; margin:0 !important;
  border:none !important; border-bottom:1px solid #cecece !important; border-radius:0 !important; background-color:transparent !important;
  padding:16px 0 !important; font-family:var(--font-jp) !important; font-size:16px !important; line-height:normal !important; color:var(--navy) !important;
}
.contact-page__form-card table.CF7_table select{
  display:block !important; width:100% !important; height:60px !important; box-sizing:border-box !important; margin:0 !important;
  border:none !important; border-bottom:1px solid #cecece !important; border-radius:0 !important;
  padding:16px 20px 16px 0 !important; font-family:var(--font-jp) !important; font-weight:500 !important; font-size:16px !important; line-height:normal !important; color:var(--navy) !important;
  cursor:pointer !important; appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  background:url("assets/images/contact-page/icon-select-arrow-down.svg") right 4px center no-repeat transparent !important;
  background-size:10px 5px !important;
}
.contact-page__form-card table.CF7_table textarea{
  display:block !important; width:100% !important; height:300px !important; min-height:300px !important; max-height:none !important;
  box-sizing:border-box !important; margin:0 !important; resize:vertical !important;
  border:none !important; border-bottom:1px solid #cecece !important; border-radius:0 !important; background-color:transparent !important;
  padding:16px 0 !important; font-family:var(--font-jp) !important; font-size:16px !important; line-height:1.6 !important; color:var(--navy) !important;
}
.contact-page__form-card input::placeholder,
.contact-page__form-card textarea::placeholder{ color:#999 !important; opacity:1 !important; }

/* ご相談の種類(ラジオ) ─ Figmaは背景付きの角丸ピル+四角チェックの見た目 */
.contact-page__form-card td.purpose .wpcf7-form-control.wpcf7-radio{ display:flex; flex-wrap:wrap; gap:10px; }
.contact-page__form-card td.purpose .wpcf7-list-item{ margin:0; }
.contact-page__form-card td.purpose .wpcf7-list-item label{ display:flex; align-items:center; gap:8px; background:#f5f5f5; border:none; border-radius:0; padding:16px 10px; font-family:var(--font-jp); font-weight:500; font-size:15px; color:var(--navy); cursor:pointer; }
.contact-page__form-card td.purpose .wpcf7-list-item label:hover{ border-color:transparent; }
.contact-page__form-card td.purpose input[type=radio]{ appearance:none; -webkit-appearance:none; width:14px; height:14px; margin:0; flex:none; border:1px solid #cecece; border-radius:0; background:#fff; }
.contact-page__form-card td.purpose input[type=radio]:checked{ background:var(--navy); border-color:var(--navy); }

/* 個人情報の取扱いに同意する(チェックボックス) */
.contact-page__form-card .CF7_agree{ text-align:center; border-top:1px solid #cecece; padding-top:40px; margin:44px 0 0; }
.contact-page__form-card .CF7_agree .wpcf7-list-item{ margin:0; }
.contact-page__form-card .CF7_agree label{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-jp); font-weight:500; font-size:16px; color:var(--navy); cursor:pointer; }
.contact-page__form-card .CF7_agree input[type=checkbox]{ appearance:none; -webkit-appearance:none; width:14px; height:14px; margin:0; flex:none; border:1px solid var(--navy); border-radius:0; background:#fff; }
.contact-page__form-card .CF7_agree input[type=checkbox]:checked{ background:var(--navy); }

.contact-page__form-card .CF7_btn{ text-align:center; margin:60px 0 0; }
/* 旧テーマ由来のカスタマイザー追加CSS(.wpcf7 input.wpcf7-submit)と詳細度が同点かつ
   結合順で後勝ちするため、.wpcf7を含めて詳細度を上げて確実に上書きする。 */
.contact-page__form-card .wpcf7 input.wpcf7-submit{
  display:inline-flex; align-items:center; justify-content:center; width:300px; max-width:100%; height:64px;
  padding:12px 32px !important; margin:0 !important; border:none !important; border-radius:999px; background:var(--red) !important; color:#fff !important;
  font-family:var(--font-jp); font-weight:700; font-size:15px !important; box-shadow:5px 5px 20px rgba(0,0,0,.25); cursor:pointer; transition:opacity .2s ease;
}
.contact-page__form-card .wpcf7 input.wpcf7-submit:hover{ opacity:.9; background:var(--red) !important; color:#fff !important; }

.contact-page__form-card .CF7_privacy{ text-align:center; margin:12px 0 0; }
.contact-page__form-card .CF7_privacy small{ display:block; font-family:var(--font-jp); font-weight:300; font-size:13px; line-height:1.45; color:var(--navy); }
.contact-page__form-card .CF7_privacy a{ text-decoration:underline; }
.contact-page__form-card .wpcf7-not-valid-tip{ display:block; margin-top:6px; }

@media (max-width:900px){
  .contact-page__methods{ grid-template-columns:1fr; gap:16px; }
  .contact-page__method{ padding:24px 20px; min-height:auto; }
  .contact-page__tel{ font-size:26px; }
  .contact-page__line-btn{ gap:10px; padding:14px 24px; font-size:16px; white-space:nowrap; }
  .contact-page__line-btn img{ width:24px; height:23px; }

  .contact-page__form-card{ padding:32px 20px; }
  .contact-page__form-card table.CF7_table,
  .contact-page__form-card table.CF7_table tbody,
  .contact-page__form-card table.CF7_table tr{ display:block; width:100%; }
  .contact-page__form-card table.CF7_table th,
  .contact-page__form-card table.CF7_table td{ display:block; width:100% !important; }
  .contact-page__form-card table.CF7_table th{ padding-right:0 !important; margin-bottom:8px; }
  .contact-page__form-card td.purpose .wpcf7-list-item label{ font-size:14px; padding:12px 10px; }
  .contact-page__form-card td.purpose .wpcf7-form-control.wpcf7-radio{ gap:8px; }
  /* 上のスマホ用指定(margin-bottom:24px)が!importantに負けて効いていなかったため、!importantで有効化 */
  .contact-page .work-detail__title{ margin-bottom:24px !important; }
  .contact-page__form-card .CF7_privacy small{ font-size:12px; word-break:auto-phrase; }
  .contact-page__form-card .CF7_btn{ margin-top:40px; }
}

/* ==========================================================
   会社案内ページ(固定ページ slug: company / ID 25021、Figma node-id=1654:2 準拠)
   ヒーロー/パララックスはお問い合わせ・works詳細と共通(.hero--work + .work-page-shell)。
   ========================================================== */
.company-page{ padding-bottom:100px; }
.company-page__section{ max-width:var(--container); margin:0 auto 100px; }
.company-page__section:last-child{ margin-bottom:0; }
.company-page__section--overview .work-detail__title{ margin-bottom:32px !important; }

/* 会社概要テーブル: 項目名(200px、下線=ティール)+内容(下線=#cecece)、各行60px */
.company-table{ margin:0; }
.company-table__row{ display:grid; grid-template-columns:200px 1fr; min-height:60px; }
.company-table dt, .company-table dd{
  display:flex; align-items:center; box-sizing:border-box; min-height:60px; margin:0;
  font-family:var(--font-jp); font-size:16px; line-height:normal;
}
.company-table dt{ font-weight:500; color:#5cbdb1; border-bottom:1px solid #5cbdb1; }
.company-table dd{ font-weight:400; color:var(--navy); border-bottom:1px solid #cecece; }
/* 事業内容(箇条書き): 複数行になるため行の高さは最小60pxで可変。項目名は行全体の上下中央 */
.company-table__list{ margin:0; padding:16px 0; list-style:none; }
.company-table__list li{ position:relative; padding-left:1em; line-height:1.7; }
.company-table__list li::before{ content:"・"; position:absolute; left:0; }
.company-table dt span, .company-table dd span{ display:block; text-box-trim:trim-both; text-box-edge:cap alphabetic; }

/* 代表挨拶 */
.company-message__lead, .company-message__body, .company-message__role, .company-message__name{ font-family:var(--font-jp); color:var(--navy); margin:0; }
/* 文節ごとに折り返す(<wbr>位置以外では改行しない)。見出しは行の長さを均等化、本文は行末の孤立を避ける */
.company-message__lead, .company-message__body{ word-break:keep-all; overflow-wrap:anywhere; }
/* 文節区切り(.ph)はスマホ幅(<=900px)のみ有効。PC幅では句読点(、。)でだけ折り返す */
.company-message__lead .ph, .company-message__body .ph{ display:none; }
.company-message__lead{ text-wrap:balance; }
.company-message__body p{ margin:0 0 40px; font-family:inherit; font-size:inherit; line-height:inherit; color:inherit; text-wrap:pretty; }
.company-message__body p:last-child{ margin-bottom:0; }
.company-message__lead{ font-weight:700; font-size:24px; line-height:40px; margin-bottom:20px; }
.company-message__body{ font-weight:400; font-size:16px; line-height:40px; margin-bottom:56px; }
.company-message__role{ font-weight:700; font-size:20px; line-height:normal; margin-bottom:4px; }
.company-message__name{ font-weight:700; font-size:40px; line-height:normal; }

@media (max-width:900px){
  .company-page{ padding-bottom:80px; }
  .company-page__section{ margin-bottom:60px; }
  .company-page__section--overview .work-detail__title{ margin-bottom:24px !important; }
  .company-table__row{ grid-template-columns:1fr; padding-bottom:8px; }
  .company-table dt{ width:200px; max-width:100%; min-height:48px; font-size:15px; }
  .company-table dd{ min-height:52px; padding:14px 0; font-size:15px; }
  .company-table__list{ padding:0; }
  .company-message__lead .ph, .company-message__body .ph{ display:inline; }
  .company-message__lead .br-pc, .company-message__body .br-pc{ display:none; } /* スマホでは句読点での強制改行を解除 */
  .company-message__body p{ margin-bottom:24px; }
  .company-message__lead .ph::before, .company-message__body .ph::before{ content:"\200B"; }
  .company-message__lead{ font-size:18px; line-height:1.7; }
  .company-message__body{ font-size:16px; line-height:1.9; margin-bottom:40px; }
  .company-message__role{ font-size:15px; }
  .company-message__name{ font-size:28px; }
}

/* コラム詳細(single.php)の記事ヘッダー */
.column-article__title{ font-family:var(--font-jp); font-size:24px; font-weight:700; line-height:1.5; color:var(--navy); margin:0 0 16px; }
.column-article__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:0 0 24px; }
.column-article__date{ font-family:var(--font-en); font-weight:300; font-size:14px; color:var(--gray); }
.column-article__thumb{ margin:0 0 40px; }
.column-article__thumb img{ width:100%; height:auto; display:block; }
.column-article .entry-content > *:first-child{ margin-top:0; }
/* 目次(Rich Table of Content)はプラグイン既定の最大幅700pxを外し、本文の幅いっぱいに広げる */
.entry-content #rtoc-mokuji-wrapper.rtoc-mokuji-content{ max-width:none !important; width:100% !important; box-sizing:border-box; }

/* フォント統一: 旧カスタマイザーCSSの h1〜h5 / p,ul,li,dl,dt,dd,table,label 直指定
   ("Overpass","Noto Sans JP")を上書きし、全ページ "Zen Kaku Gothic Antique" に揃える。
   クラス指定のフォント(英字のOutfit等)は詳細度が高いのでそのまま効く。 */
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body table, body ul, body ol, body li, body dl, body dt, body dd, body label,
body input, body select, body textarea, body button{ font-family:var(--font-jp); }
.rtoc-mokuji-content, .rtoc-mokuji-content *, .rtoc-mokuji-content *::before, .rtoc-mokuji-content *::after{ font-family:var(--font-jp) !important; }

/* コラム詳細: 記事タイトル・本文の見出しサイズ(旧CSSの h1/h2/h3 の em 指定 !important を上書き) */
.column-article .column-article__title{ font-size:24px !important; }
.column-article .entry-content h2{ font-size:22px !important; border-top:3px solid #43aec6 !important; border-bottom:3px solid #43aec6 !important; padding:14px 0 !important; }
.column-article .entry-content h3{ font-size:20px !important; }

/* 目次(Rich Table of Content): 文字はMedium、オレンジ(#fcaa00)の番号・点・線は #43AEC6 に統一。
   プラグインの色指定(!important付き)に勝つため #rtoc-mokuji-wrapper で詳細度を上げる */
#rtoc-mokuji-wrapper.rtoc-mokuji-content, #rtoc-mokuji-wrapper.rtoc-mokuji-content *, #rtoc-mokuji-wrapper.rtoc-mokuji-content *::before, #rtoc-mokuji-wrapper.rtoc-mokuji-content *::after{ font-weight:500 !important; }
#rtoc-mokuji-wrapper.rtoc-mokuji-content .rtoc-item::before, #rtoc-mokuji-wrapper.rtoc-mokuji-content .rtoc-item::after{ color:#43aec6 !important; }
#rtoc-mokuji-wrapper.rtoc-mokuji-content .mokuji_ul .rtoc-item::before, #rtoc-mokuji-wrapper.rtoc-mokuji-content .mokuji_ul.level-1>.rtoc-item::before, #rtoc-mokuji-wrapper.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item::before, #rtoc-mokuji-wrapper.rtoc-mokuji-content .rtoc-item::after, #rtoc-mokuji-wrapper.rtoc-mokuji-content #rtocAC.accent-point::after{ background-color:#43aec6 !important; }

/* ==========================================================
   スマホ(900px以下)専用の文字サイズ・見出し調整。
   PC(901px以上)には一切影響しないよう、すべてこのメディアクエリ内に限定する。
   ========================================================== */
@media (max-width:900px){
  /* 小さすぎる文字(PC 8〜10px)は読める大きさに */
  .work-card__tags span{ font-size:11px; padding:2px 8px; }
  .work-card__date{ font-size:11px; }
  .works__tabs a{ font-size:12px; }
  .site-footer__services p:not(.site-footer__services-title){ font-size:12px; line-height:1.7; }
  .site-footer__copyright{ font-size:11px; }

  /* 旧CSSの h1/h2/h3 の em 指定(!important)で固定ページの見出しが巨大になるのを抑える */
  .page-hero__title{ font-size:26px !important; }
  .entry-content{ overflow-wrap:anywhere; }
  .entry-content h2, .content-wrap h2{ font-size:22px !important; line-height:1.5; }
  .entry-content h3, .content-wrap h3{ font-size:18px !important; line-height:1.5; }
  .entry-content h4, .content-wrap h4{ font-size:16px !important; }
  .entry-content .ystdb-heading__text, .content-wrap .ystdb-heading__text{ font-size:22px !important; }

  /* コラム詳細(PCはタイトル24px/H2 22px/H3 20px指定)をスマホでは一段小さく */
  .column-article .column-article__title{ font-size:20px !important; }
  .column-article .entry-content h2{ font-size:20px !important; padding:12px 0 !important; }
  .column-article .entry-content h3{ font-size:18px !important; }
}

/* スマホ専用プルダウン(PCでは非表示) */
.column-side__archive-select, .works__industry-select-wrap{ display:none; }

@media (max-width:900px){
  /* ---- 下層ページ共通: Heroブロックの高さを縮める / 英字と日本語見出しの間を詰める ---- */
  .hero--work, .hero-spacer--work{ height:250px; }
  .work-hero__en{ top:102px; }
  .work-hero__ja{ bottom:70px; }
  .page-hero{ min-height:0; padding:96px 20px 36px; }
  .page-hero__eyebrow{ margin-bottom:6px; }

  /* ---- コラム一覧: 記事を2カラム ---- */
  .column-layout .column__grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .column-layout .column-card{ padding:10px; }
  .column-layout .column-card__date{ font-size:11px; margin-bottom:4px; }
  .column-layout .column-card__title{ font-size:13px; margin-bottom:4px; }
  .column-layout .column-card__excerpt{ font-size:11px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  /* サイドバー: アーカイブはプルダウン、新着/よく読まれているは2カラム */
  .column-side__archive{ display:none; }
  .column-side__archive-select{ display:block; width:100%; height:44px; padding:0 36px 0 12px; border:1px solid #cecece; border-radius:0; background:#fff url("assets/images/contact-page/icon-select-arrow-down.svg") right 14px center no-repeat; background-size:10px 5px; font-family:var(--font-jp); font-size:14px; color:var(--navy); -webkit-appearance:none; appearance:none; }
  .column-side__list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .column-side__item + .column-side__item{ margin-top:0; }
  .column-side__item a{ flex-direction:column; align-items:stretch; gap:8px; height:100%; }
  .column-side__thumb{ width:100%; aspect-ratio:16/9; background:#fff; }
  .column-side__thumb img{ object-fit:contain; }
  .column-side__title{ font-size:12px; }

  /* ---- Works一覧: 業種は大カテゴリーの下にプルダウン ---- */
  .works__industry-select-wrap{ display:block; margin-bottom:24px; }
  .works__industry-select{ display:block; width:100%; height:44px; padding:0 36px 0 12px; border:1px solid #cecece; border-radius:0; background:#fff url("assets/images/contact-page/icon-select-arrow-down.svg") right 14px center no-repeat; background-size:10px 5px; font-family:var(--font-jp); font-size:14px; color:var(--navy); -webkit-appearance:none; appearance:none; }

  /* ---- 会社案内: 項目名の幅を揃え、項目名の下線を削除 ---- */
  .company-table dt{ width:100%; min-height:0; border-bottom:none !important; padding:14px 0 0; }
  .company-table dd{ min-height:0; }

  /* ---- お問い合わせ: 電話/LINEカード内の文字間隔10px ---- */
  .contact-page__method-heading{ margin:0 0 10px; }
  .contact-page__tel{ margin:0 0 10px; }

  /* ---- お問い合わせフォーム: 項目名の下線を削除、項目名と入力欄の間を詰める ---- */
  .contact-page__form-card th p{ border-bottom:none; height:auto; width:auto; padding:0 0 4px; }
  .contact-page__form-card table.CF7_table th{ margin-bottom:0; }
  .contact-page__form-card table.CF7_table td{ margin-bottom:20px; }
  .contact-page__form-card table.CF7_table input[type=text],
  .contact-page__form-card table.CF7_table input[type=email],
  .contact-page__form-card table.CF7_table select{ height:48px !important; padding-top:8px !important; padding-bottom:8px !important; }
  .contact-page__form-card table.CF7_table textarea{ padding-top:8px !important; }
}

/* ==========================================================
   事業案内：ホームページ制作ページ(固定ページ service/website / ID 25310)
   Figma node-id=1730:2 準拠。クラスは .sw- 接頭辞。
   ========================================================== */

.sw-page {
  --sw-text: #1e2b3a;
  --sw-sub: #66706b;
  --sw-mute: #777;
  --sw-label: #808080;
  --sw-border: #dddad3;
  --sw-teal: #43aec6;
  --sw-navy: #1a2c44;
  --sw-cta: #1e2b3a;
  --sw-red: #f83838;
  --sw-cream: #f9f8f4;
  --sw-grad: linear-gradient(250deg, #3494de 5.31%, #4fc2b3 51.28%, #cbe29a 97.25%);
  background: var(--sw-cream);
}

.sw-page .sw-main {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  color: var(--sw-text);
}
.sw-page .sw-main *, .sw-page .sw-main *::before, .sw-page .sw-main *::after { box-sizing: border-box; }
.sw-page .sw-main :where(h1, h2, h3, p, ul, ol, li, dl, dt, dd) { margin: 0; padding: 0; }
.sw-page .sw-main :where(ul, ol) { list-style: none; }
.sw-page .sw-main :where(ul, ol, li, dl, dt, dd, p, div, a, span, button) { font-family: inherit; }
.sw-page .sw-main h1::before, .sw-page .sw-main h2::before, .sw-page .sw-main h3::before, .sw-page .sw-main h1::after, .sw-page .sw-main h2::after, .sw-page .sw-main h3::after { content: none !important; display: none !important; }
.sw-page .sw-main img { display: block; max-width: 100%; }
.sw-page .sw-main :where(a) { text-decoration: none; color: inherit; }


/* 既存テーマのグローバル見出し指定（h2 の font-size:2.8em !important 等）を打ち消す */
body.sw-page { font-family: "Zen Kaku Gothic Antique", sans-serif; }
.sw-page .sw-main :where(h1, h2, h3) {
  position: static !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: "Zen Kaku Gothic Antique", sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.sw-page .sw-main :where(h1, h2, h3)::before { content: none !important; display: none !important; }

.sw-page .sw-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- 見出し（英字グラデ＋和文） ---------- */
.sw-page .sw-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  line-height: normal;
  margin-bottom: 32px;
}
.sw-page .sw-head--center { align-items: center; text-align: center; }
.sw-page .sw-head__en {
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 2.4px;
  line-height: normal;
  background-image: var(--sw-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sw-page .sw-head__ja {
  font-family: "Zen Kaku Gothic Antique", sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: normal !important;
  color: var(--sw-label) !important;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.sw-page .sw-head--lg { gap: 20px; margin-bottom: 15px; }
.sw-page .sw-head--lg .sw-head__en { font-size: 64px; letter-spacing: 3.84px; }
.sw-page .sw-head--lg .sw-head__ja { font-weight: 400 !important; font-size: 20px !important; color: var(--sw-navy) !important; }
.sw-page .sw-head--white .sw-head__en { background: none; color: #fff; }
.sw-page .sw-head--white .sw-head__ja { color: #fff !important; }

/* ---------- ボタン ---------- */
.sw-page .sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 300px;
  height: 64px;
  padding: 12px 32px;
  border-radius: 999px;
  box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, .25);
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  color: #fff !important;
  white-space: nowrap;
  transition: opacity .3s;
}
.sw-page .sw-btn:hover { opacity: .8; }
.sw-page .sw-btn img { width: 24px; height: 24px; flex: none; }
.sw-page .sw-btn--navy { background: var(--sw-navy); }
.sw-page .sw-btn--red { background: var(--sw-red); }
.sw-page .sw-btn--auto { width: auto; min-width: 300px; }

/* =========================================================
   ページタイトル（TOPページと同じメッシュ背景）
   ========================================================= */
.sw-page .sw-hero {
  position: relative;
  height: 649px;
  overflow: hidden;
  color: #fff;
}
.sw-page .sw-hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--mesh-navy, #052b6e);
  background-image: var(--mesh-bg-image);
  background-size: 200% 200%;
  animation: meshMove 18s ease infinite;
}
.sw-page .sw-hero__glow {
  position: absolute;
  z-index: 0;
  top: -221px;
  left: 174px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  filter: blur(100px);
  pointer-events: none;
}
.sw-page .sw-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 25 -12'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.sw-page .sw-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 236px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  line-height: normal;
}
.sw-page .sw-hero__en {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  font-size: 80px;
  letter-spacing: 4.8px;
  line-height: normal;
}
.sw-page .sw-hero__ja {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: "Zen Kaku Gothic Antique", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: normal !important;
  color: #fff !important;
}
.sw-page .sw-hero__ja::before, .sw-page .sw-hero__ja::after { content: none; display: none; }

/* 本文パネル（上角丸80px） */
.sw-page .sw-main {
  position: relative;
  z-index: 3;
  margin-top: -163px;
  background: var(--sw-cream);
  border-radius: 80px 80px 0 0;
}

/* ---------- 事業タブ ---------- */
.sw-page .sw-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 90px 0 16px; /* 上74px＋上下16px */
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
}
.sw-page .sw-tabs a {
  font-weight: 500;
  color: var(--sw-mute) !important;
  transition: color .3s;
}
.sw-page .sw-tabs a:hover { color: var(--sw-teal) !important; }
.sw-page .sw-tabs a.is-active { font-weight: 700; color: var(--sw-teal) !important; }

/* =========================================================
   S01 ヒーロー
   ========================================================= */
.sw-page .sw-intro { padding-top: 80px; }
.sw-page .sw-intro__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 480px;
  border-radius: 8px;
  background: #e5e2dc;
  font-size: 13px;
  color: var(--sw-mute);
}
.sw-page .sw-intro__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-top: 40px;
}
.sw-page .sw-intro__title {
  font-weight: 700 !important;
  font-size: 40px !important;
  line-height: 1.5 !important;
  color: var(--sw-text) !important;
  white-space: nowrap !important;
}
.sw-page .sw-intro__lead {
  width: 568px;
  margin-top: 15px !important;
  font-size: 16px;
  line-height: 1.9;
  color: var(--sw-sub);
}
.sw-page .sw-intro__btns {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 64px;
}

/* =========================================================
   S02 こんな課題はありませんか
   ========================================================= */
.sw-page .sw-problems { padding-top: 100px; }
.sw-page .sw-problems__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
  padding: 40px !important;
  border: 2px solid #000;
  border-radius: 20px;
}
.sw-page .sw-problems__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sw-text);
}
.sw-page .sw-problems__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 100px;
  background: var(--sw-teal);
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
  color: #fff;
}

/* =========================================================
   S03 対応するサイトの種類
   ========================================================= */
.sw-page .sw-types { padding: 100px 0; }
.sw-page .sw-types__grid {
  display: grid;
  grid-template-columns: repeat(4, 288px);
  gap: 16px;
}
.sw-page .sw-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 8px;
  overflow: hidden;
}
.sw-page .sw-card__img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
}
.sw-page .sw-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: normal;
}
.sw-page .sw-card__title {
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: normal !important;
  color: var(--sw-text) !important;
}
.sw-page .sw-card__text {
  font-size: 16px;
  color: var(--sw-sub);
}

/* 対応範囲 */
.sw-page .sw-scope { margin-top: 32px; }
.sw-page .sw-scope__title {
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
  margin-bottom: 32px !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: normal !important;
  color: var(--sw-text) !important;
}
.sw-page .sw-scope__title::after {
  content: "" !important;
  display: block !important;
  flex: 1;
  height: 2px;
  background: var(--sw-text);
}
.sw-page .sw-scope__list {
  display: grid;
  grid-template-columns: repeat(4, 288px);
  gap: 14px 16px;
}
.sw-page .sw-scope__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px;
  border-radius: 4px;
  background: #f1efea;
  font-weight: 500;
  font-size: 18px;
  line-height: normal;
  color: var(--sw-text);
  white-space: nowrap;
}
.sw-page .sw-scope__num {
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  font-size: 24px;
  background-image: var(--sw-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   S04 HOMELYが選ばれる理由
   ========================================================= */
.sw-page .sw-strengths {
  padding: 100px 0 154px;
  background: #fff;
}
.sw-page .sw-strength {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}
.sw-page .sw-strength + .sw-strength { margin-top: 72px; }
.sw-page .sw-strength--reverse { flex-direction: row-reverse; justify-content: flex-end; }
.sw-page .sw-strength__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 520px;
  flex: none;
}
.sw-page .sw-strength__title {
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1.5 !important;
  color: var(--sw-text) !important;
}
.sw-page .sw-strength__text p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--sw-sub);
}
.sw-page .sw-strength__figure {
  position: relative;
  flex: none;
  width: 640px;
  padding-top: 35px;
}
.sw-page .sw-strength__figure img {
  width: 640px;
  height: 380px;
  object-fit: cover;
  border-radius: 20px;
}
.sw-page .sw-strength__num {
  position: absolute;
  top: 0;
  right: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 100px;
  line-height: .72; /* text-box-trim 相当：数字の天地をトリム */
  color: var(--sw-teal);
}
.sw-page .sw-strength--reverse .sw-strength__num { right: auto; left: 40px; }

/* =========================================================
   S05 ご相談から公開までの流れ（見出し追従）
   ========================================================= */
.sw-page .sw-flow { padding: 100px 0; }
.sw-page .sw-flow__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.sw-page .sw-flow__side {
  position: sticky;
  top: 100px;
  flex: none;
}
.sw-page .sw-flow__side .sw-head { margin-bottom: 0; }
.sw-page .sw-flow__list {
  width: 760px;
  flex: none;
}
.sw-page .sw-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sw-page .sw-step + .sw-step { margin-top: 104px; } /* 32 + 矢印40 + 32 */
.sw-page .sw-step + .sw-step::before {
  content: "";
  position: absolute;
  top: -72px;
  left: 50%;
  width: 150px;
  height: 40px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg width='150.941' height='42.0157' viewBox='0 0 150.941 42.0157' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Vector' d='M0.470588 0.882353L75.4706 40.8824L150.471 0.882353' stroke='%231E2B3A' stroke-width='2' stroke-miterlimit='10'/%3E %3C/svg%3E") center / 100% 100% no-repeat;
}
.sw-page .sw-step__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 328px;
  line-height: normal;
}
.sw-page .sw-step__title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: normal !important;
  color: var(--sw-text) !important;
}
.sw-page .sw-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--sw-teal);
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.sw-page .sw-step__desc {
  font-size: 16px;
  color: var(--sw-sub);
}
.sw-page .sw-step__note {
  margin-top: 6px !important; /* 16px - gap10px */
  font-size: 13px;
  color: var(--sw-mute);
}
.sw-page .sw-step__img {
  width: 400px;
  height: 230px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
}

/* =========================================================
   S06 料金の目安
   ========================================================= */
.sw-page .sw-price {
  padding: 100px 0;
  background: var(--sw-teal);
}
.sw-page .sw-price__table {
  display: flex;
  justify-content: space-between;
}
.sw-page .sw-plan {
  width: 236px;
  font-size: 15px;
  line-height: normal;
}
.sw-page .sw-plan__name {
  padding: 32px 28px 22px !important;
  border-radius: 20px 20px 0 0 !important;
  background: #fff !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: normal !important;
  color: var(--sw-text) !important;
}
.sw-page .sw-plan__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 16px 0;
  background: #fff;
  line-height: 1;
}
.sw-page .sw-plan__amount {
  line-height: 22px;
  font-weight: 700;
  font-size: 32px;
  color: var(--sw-teal);
}
.sw-page .sw-plan__unit {
  font-weight: 500;
  font-size: 16px;
  color: #444;
}
.sw-page .sw-plan__spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 16px;
  background: #e7f5f8;
}
.sw-page .sw-plan__spec dt { font-weight: 700; color: var(--sw-text); }
.sw-page .sw-plan__spec dd { text-align: right; color: #444; }
.sw-page .sw-plan__period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-radius: 0 0 20px 20px;
  background: #fff;
  text-align: center;
}
.sw-page .sw-plan__period dt { font-weight: 700; color: var(--sw-text); }
.sw-page .sw-plan__period dd { color: #444; }
.sw-page .sw-price__note {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 16px;
  line-height: normal;
}
.sw-page .sw-price__note p {
  font-size: 13px;
  color: var(--sw-text);
}
.sw-page .sw-price__note a {
  flex: none;
  font-weight: 700;
  font-size: 14px;
  color: #fff !important;
  white-space: nowrap;
}
.sw-page .sw-price__note a:hover { opacity: .8; }

/* =========================================================
   S07 制作事例（背景：白）
   ========================================================= */
.sw-page .sw-works {
  padding: 100px 0;
  background: #fff;
}
.sw-page .sw-works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sw-page .sw-work__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 8px;
  overflow: hidden;
  transition: opacity .3s;
}
.sw-page .sw-work__link:hover { opacity: .8; }
.sw-page .sw-work__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--sw-border);
}
.sw-page .sw-work__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e2dc;
  font-size: 13px;
  color: var(--sw-mute);
}
.sw-page .sw-work__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 24px;
  line-height: normal;
}
.sw-page .sw-work__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-page .sw-work__tags span {
  padding: 2px 10px;
  border: 1px solid var(--sw-navy);
  font-weight: 700;
  font-size: 12px;
  color: var(--sw-navy);
}
.sw-page .sw-work__title {
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: var(--sw-text) !important;
}
.sw-page .sw-work__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  font-size: 15px;
  line-height: 1.7;
}
.sw-page .sw-work__dl dt { font-weight: 700; color: var(--sw-text); }
.sw-page .sw-work__dl dd { color: var(--sw-sub); }
.sw-page .sw-work__more {
  margin-top: auto;
  padding-top: 4px;
  font-weight: 700;
  font-size: 15px;
  color: var(--sw-teal);
}
.sw-page .sw-works__btn {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

/* =========================================================
   S08 よくある質問（アコーディオン）
   ========================================================= */
.sw-page .sw-faq { padding: 100px 0; }
.sw-page .sw-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 8px;
  overflow: hidden;
}
.sw-page .sw-faq__item + .sw-faq__item { border-top: 1px solid var(--sw-border); }
.sw-page .sw-faq__item h3 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: inherit !important;
}
.sw-page .sw-faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 32px;
  border: 0;
  background: none;
  font: inherit;
  line-height: normal;
  text-align: left;
  color: var(--sw-text);
  cursor: pointer;
}
.sw-page .sw-faq__mark {
  flex: none;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--sw-teal);
}
.sw-page .sw-faq__text {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 16px;
}
.sw-page .sw-faq__icon {
  flex: none;
  font-size: 20px;
  line-height: normal;
}
.sw-page .sw-faq__icon::before { content: "+"; }
.sw-page .sw-faq__item.is-open .sw-faq__icon::before { content: "−"; }
.sw-page .sw-faq__a {
  overflow: hidden;
  transition: height .3s ease;
}
.sw-page .sw-faq__a-inner {
  padding: 0 32px 24px 63px; /* 32 + Q幅15 + 16 */
  font-size: 16px;
  line-height: 1.9;
  color: var(--sw-sub);
}

/* =========================================================
   S09 CTA（紺背景＋写真）
   ========================================================= */
.sw-page .sw-cta {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-top: 80px;
  padding: 64px;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(rgba(30, 43, 58, .85), rgba(30, 43, 58, .85)),
    url(https://homely.link/wp-content/uploads/2026/10/sw-cta-v4-stock-20261008.jpg) center / cover no-repeat;
  background-color: var(--sw-cta);
}
.sw-page .sw-cta__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.sw-page .sw-cta__en {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: normal;
  color: var(--sw-teal);
}
.sw-page .sw-cta__title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1.6 !important;
  color: #fff !important;
}
.sw-page .sw-cta__text {
  font-size: 15px;
  line-height: 1.9;
  color: #fff;
}
.sw-page .sw-cta__btns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 360px;
  flex: none;
}
.sw-page .sw-cta__btn {
  display: flex;
  justify-content: center;
  padding: 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
  transition: opacity .3s;
}
.sw-page .sw-cta__btn:hover { opacity: .8; }
.sw-page .sw-cta__btn--white { background: #fff; color: var(--sw-cta) !important; }
.sw-page .sw-cta__btn--outline { border: 1px solid #fff; color: #fff !important; }

/* =========================================================
   S10 あわせて相談できること
   ========================================================= */
.sw-page .sw-related { margin-top: 80px; }
.sw-page .sw-related__title {
  margin: 0 0 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: normal !important;
  color: var(--sw-text) !important;
}
.sw-page .sw-related__list {
  display: grid;
  grid-template-columns: repeat(2, 588px);
  gap: 24px;
}
.sw-page .sw-related__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 36px;
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 8px;
  line-height: normal;
  transition: opacity .3s;
}
.sw-page .sw-related__card:hover { opacity: .8; }
.sw-page .sw-related__en {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.95px;
  color: var(--sw-teal);
}
.sw-page .sw-related__name {
  font-weight: 700;
  font-size: 22px;
  color: var(--sw-text);
}
.sw-page .sw-related__text {
  font-size: 15px;
  color: #444;
}
/* S10 → お問い合わせ 100px（FAQセクションの下余白） */

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1280px) {
  .sw-page .sw-container, .sw-page .sw-hero__inner { padding-left: 40px; padding-right: 40px; }
  .sw-page .sw-types__grid, .sw-page .sw-scope__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sw-page .sw-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-page .sw-intro__lead { width: auto; flex: 1; }
  .sw-page .sw-intro__title { white-space: normal !important; }
  .sw-page .sw-strength__text { width: auto; flex: 1; }
  .sw-page .sw-strength__figure { width: 55%; }
  .sw-page .sw-strength__figure img { width: 100%; height: auto; aspect-ratio: 640 / 380; }
  .sw-page .sw-flow__list { width: 62%; }
  .sw-page .sw-step__text { width: 43%; }
  .sw-page .sw-step__img { width: 53%; height: auto; aspect-ratio: 400 / 230; }
  .sw-page .sw-price__table { gap: 6px; }
  .sw-page .sw-plan { width: auto; flex: 1; min-width: 0; }
  .sw-page .sw-plan__spec { height: auto; min-height: 76px; gap: 8px; }
}

@media (max-width: 1024px) {
  .sw-page .sw-hero { height: 480px; }
  .sw-page .sw-hero__inner { padding-top: 170px; }
  .sw-page .sw-hero__en { font-size: 64px; }
  .sw-page .sw-main { margin-top: -80px; border-radius: 48px 48px 0 0; }
  .sw-page .sw-tabs { padding-top: 48px; gap: 24px; }
  .sw-page .sw-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-page .sw-scope__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-page .sw-intro__body { flex-direction: column; }
  .sw-page .sw-intro__lead { margin-top: 0 !important; }
  .sw-page .sw-strength, .sw-page .sw-strength--reverse { flex-direction: column-reverse; align-items: stretch; gap: 24px; }
  .sw-page .sw-strength__figure { width: 100%; }
  .sw-page .sw-flow__inner { flex-direction: column; gap: 32px; }
  .sw-page .sw-flow__side { position: static; }
  .sw-page .sw-flow__list { width: 100%; }
  .sw-page .sw-price__table { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .sw-page .sw-plan { flex: 0 0 calc((100% - 32px) / 3); }
  .sw-page .sw-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-page .sw-cta { flex-direction: column; align-items: stretch; gap: 32px; }
  .sw-page .sw-cta__btns { width: 100%; }
}

@media (max-width: 599px) {
  .sw-page .sw-container, .sw-page .sw-hero__inner { padding-left: 20px; padding-right: 20px; }
  .sw-page .sw-hero { height: 360px; }
  .sw-page .sw-hero__inner { padding-top: 130px; gap: 8px; }
  .sw-page .sw-hero__en { font-size: 44px; letter-spacing: 2.6px; }
  .sw-page .sw-hero__ja { font-size: 16px !important; }
  .sw-page .sw-main { margin-top: -56px; border-radius: 32px 32px 0 0; }
  .sw-page .sw-tabs { justify-content: flex-start; gap: 20px; padding: 32px 20px 12px; overflow-x: auto; scrollbar-width: none; font-size: 14px; }
  .sw-page .sw-tabs::-webkit-scrollbar { display: none; }

  .sw-page .sw-head__en { font-size: 32px; letter-spacing: 1.9px; }
  .sw-page .sw-head--lg .sw-head__en { font-size: 44px; letter-spacing: 2.6px; }
  .sw-page .sw-head--lg .sw-head__ja { font-size: 16px !important; }
  .sw-page .sw-head { margin-bottom: 24px; }

  .sw-page .sw-intro { padding-top: 48px; }
  .sw-page .sw-intro__visual { height: 220px; }
  .sw-page .sw-intro__body { margin-top: 24px; gap: 16px; }
  .sw-page .sw-intro__title { font-size: 26px !important; }
  .sw-page .sw-intro__lead { font-size: 15px; }
  .sw-page .sw-intro__btns { flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
  .sw-page .sw-btn { width: 100%; max-width: 335px; }
  .sw-page .sw-btn--auto { min-width: 0; }

  .sw-page .sw-problems { padding-top: 64px; }
  .sw-page .sw-problems__list { grid-template-columns: 1fr; padding: 24px !important; gap: 14px; }
  .sw-page .sw-problems__list li { font-size: 15px; align-items: flex-start; }
  .sw-page .sw-problems__icon { width: 28px; height: 28px; font-size: 20px; }

  .sw-page .sw-types { padding: 64px 0; }
  .sw-page .sw-types__grid { grid-template-columns: 1fr; }
  .sw-page .sw-card__img { height: 180px; }
  .sw-page .sw-card__title { font-size: 18px !important; }
  .sw-page .sw-card__text { font-size: 15px; }
  .sw-page .sw-scope__title { font-size: 22px !important; gap: 20px !important; margin-bottom: 20px !important; }
  .sw-page .sw-scope__list { grid-template-columns: 1fr; gap: 10px; }
  .sw-page .sw-scope__list li { font-size: 16px; }

  .sw-page .sw-strengths { padding: 64px 0; }
  .sw-page .sw-strength + .sw-strength { margin-top: 48px; }
  .sw-page .sw-strength__figure { padding-top: 26px; }
  .sw-page .sw-strength__num { font-size: 72px; }
  .sw-page .sw-strength__title { font-size: 24px !important; }
  .sw-page .sw-strength__text p { font-size: 15px; }

  .sw-page .sw-flow { padding: 64px 0; }
  .sw-page .sw-step { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .sw-page .sw-step__text, .sw-page .sw-step__img { width: 100%; }
  .sw-page .sw-step + .sw-step { margin-top: 88px; }
  .sw-page .sw-step + .sw-step::before { top: -64px; width: 100px; height: 28px; }

  .sw-page .sw-price { padding: 64px 0; }
  .sw-page .sw-plan { flex: 0 0 100%; }
  .sw-page .sw-price__note { flex-direction: column; gap: 12px; }
  .sw-page .sw-price__note a { white-space: normal; }

  .sw-page .sw-works { padding: 64px 0; }
  .sw-page .sw-works__grid { grid-template-columns: 1fr; }
  .sw-page .sw-works__btn { margin-top: 40px; }

  .sw-page .sw-faq { padding: 64px 0; }
  .sw-page .sw-faq__q { padding: 20px; gap: 12px; }
  .sw-page .sw-faq__text { font-size: 15px; }
  .sw-page .sw-faq__a-inner { padding: 0 20px 20px 47px; font-size: 15px; }

  .sw-page .sw-cta { margin-top: 56px; padding: 32px 24px; }
  .sw-page .sw-cta__title { font-size: 22px !important; }
  .sw-page .sw-cta__title br { display: none !important; }
  .sw-page .sw-cta__btn { padding: 20px; font-size: 15px; }

  .sw-page .sw-related { margin-top: 56px; }
  .sw-page .sw-related__title { font-size: 22px !important; margin-bottom: 20px !important; }
  .sw-page .sw-related__list { grid-template-columns: 1fr; gap: 16px; }
  .sw-page .sw-related__card { padding: 24px; }
  .sw-page .sw-related__name { font-size: 19px; }
}

/* お問い合わせ（共通パーツ）のボタン色：Figma指定 #43aec6 */
.sw-page .contact .btn-pill--teal { background: var(--sw-teal); }


/* page.php(汎用固定ページ)の見出し帯・本文枠をこのページでは使わない */
.sw-page .page-hero{ display:none; }
.sw-page .content-section{ padding:0; }
.sw-page .content-wrap{ max-width:none; }
.sw-page .entry-content{ font-size:inherit; line-height:normal; }


/* サイト共通CSS(p/ul/li の line-height:1.6em、.entry-content の ● 行頭記号・文字色)を打ち消す */
.sw-page :where(.sw-main) :where(p, ul, ol, li, dl, dt, dd){ line-height: inherit; }
.sw-page .sw-main ul li::before{ content: none; }
.sw-page :where(.sw-main, .sw-hero) p{ color: inherit; }


/* 事業案内：ホームページ制作 — 制作事例は制作事例一覧(.works__list/.work-card)と同じデザイン */
.sw-page .sw-works .work-card img{ border-radius:0; }
.sw-page .sw-work-placeholder{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:262/150; margin-bottom:16px; border:1px solid #dfdfdf; background:#e5e2dc; font-size:13px; color:#777; }


/* ==========================================================
   事業案内：ホームページ制作 — 2026-10-06 修正
   ========================================================== */
/* ヘッダーのパララックス: ページタイトルを画面に固定し、本文パネル(角丸)が迫り上がって覆う。
   works詳細/会社案内(.hero--work + .work-page-shell)と同じ見え方。
   固定heroの高さ - 本文パネルの重なり量 を本文パネルの上余白にして元の位置関係を保つ */
.sw-page .sw-hero { position: fixed; top: 0; left: 0; right: 0; z-index: 1; }
.sw-page .sw-main { margin-top: calc(649px - 163px); }
.sw-page .contact { z-index: 2; } /* CONTACT(page.phpで本文の後に出力)も固定heroより上に */
@media (max-width: 1024px) {
  .sw-page .sw-main { margin-top: calc(480px - 80px); }
}
@media (max-width: 599px) {
  .sw-page .sw-main { margin-top: calc(360px - 56px); }
}
/* body の overflow-x:hidden はスクロールコンテナを作り position:sticky(FLOWの見出し追従)を
   効かなくする場合があるため、このページはスクロールコンテナを作らない clip にする */
body.sw-page { overflow-x: clip; }

/* 事業タブ: シンプルなボタン(枠線つきピル、選択中はティール塗り) */
.sw-page .sw-tabs { gap: 16px; }
.sw-page .sw-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  padding: 0 28px;
  border: 1px solid var(--sw-border);
  border-radius: 999px;
  background: #fff;
  font-weight: 500;
  font-size: 15px;
  color: var(--sw-text) !important;
  transition: background-color .3s, border-color .3s, color .3s;
}
.sw-page .sw-tabs a:hover { border-color: var(--sw-teal); color: var(--sw-teal) !important; }
.sw-page .sw-tabs a.is-active { border-color: var(--sw-teal); background: var(--sw-teal); color: #fff !important; font-weight: 700; }
@media (max-width: 1024px) {
  .sw-page .sw-tabs { gap: 12px; }
  .sw-page .sw-tabs a { min-width: 0; }
}
@media (max-width: 599px) {
  .sw-page .sw-tabs { gap: 8px; }
  .sw-page .sw-tabs a { flex: none; height: 40px; padding: 0 18px; font-size: 13px; }
}

/* こんな課題はありませんか: 「！」のグリフが下寄りに見えるため、円の上下中央に来るよう持ち上げる */
.sw-page .sw-problems__icon { padding-bottom: .16em; }

/* FLOW: 見出しはヘッダー(固定)の下に追従 */
.sw-page .sw-flow__side { top: 140px; }

/* 料金の目安: プランタイトル下の余白を削除 */
.sw-page .sw-plan__name { padding-bottom: 0 !important; }

/* 制作事例: 制作事例一覧(archive.php の .works__list / .work-card)と同じ見た目にする
   (このページ独自のリセット(.sw-main の margin/line-height/color/font の継承)を打ち消す) */
.sw-page .sw-works .works__list { font-family: var(--font-jp); color: var(--navy); }
.sw-page .sw-works .work-card,
.sw-page .sw-works .work-card__tags span { font-family: var(--font-jp); color: var(--navy); }
.sw-page .sw-works .work-card__title { margin-bottom: 8px; font-family: var(--font-jp); font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.sw-page .sw-works .work-card__date { font-family: var(--font-en); font-weight: 300; font-size: 8px; line-height: 1.6; color: var(--gray); }
.sw-page .sw-work-placeholder { color: var(--gray); }

/* CTA: お問い合わせボタンはサイト共通のピルボタン(矢印つき)、電話は番号を大きく+電話アイコン */
.sw-page .sw-cta__btns { align-items: center; gap: 24px; }
.sw-page .sw-cta__btn {
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  height: 64px;
  padding: 12px 32px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, .25);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy) !important;
}
.sw-page .sw-cta__btn img { width: 24px; height: 24px; flex: none; }
.sw-page .sw-cta__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 2.4px;
  line-height: 1;
  color: #fff !important;
  white-space: nowrap;
  transition: opacity .3s;
}
.sw-page .sw-cta__tel:hover { opacity: .8; }
.sw-page .sw-cta__tel img { width: 28px; height: 28px; flex: none; }
@media (max-width: 599px) {
  .sw-page .sw-cta__btn { height: 56px; padding: 12px 24px; font-size: 14px; }
  .sw-page .sw-cta__tel { font-size: 32px; letter-spacing: 1.6px; }
  .sw-page .sw-cta__tel img { width: 24px; height: 24px; }
}

/* 事業案内：ホームページ制作 — 2026-10-07 修正 */
/* 一番上の画像(PC・スマホ) */
.sw-page .sw-intro__visual { overflow: hidden; background: none; }
.sw-page .sw-intro__visual img { width: 100%; height: 100%; object-fit: cover; }
/* 制作事例: 制作事例一覧と同じく左にカテゴリー(業種)。リンク先は一覧のホームページ制作×業種の絞り込み */
.sw-page .sw-works .works__filter { font-family: var(--font-jp); color: var(--navy); }
.sw-page .sw-works .works__filter li { padding: 8px 0 8px 16px; font-size: 15px; line-height: 24px; letter-spacing: normal; }
.sw-page .sw-main .sw-works .works__filter li::before { content: "▸" !important; display: block; position: absolute; top: 8px; left: 0; font-size: 10px; line-height: 24px; color: var(--navy); }
.sw-page .sw-works .works__industry-select { font-family: var(--font-jp); }
/* FLOW: サイト共通の ol li::before(番号「1.」)が1つ目の手順にだけ出ていたため消す(2つ目以降の ::before は矢印) */
.sw-page .sw-flow__list > .sw-step:first-child::before { content: none !important; }
/* 対応するサイトの種類: 写真の上・左右の余白をなくしてカード幅いっぱいに表示(下の本文は左右16pxのまま) */
.sw-page .sw-card { padding: 0 0 24px; }
.sw-page .sw-card__img { border-radius: 0; }
.sw-page .sw-card__body { padding: 0 16px; }
/* よくある質問: 質問文を18pxに。リストの gap(10px) が各項目の下に白い余白として付き、質問文が上寄りに見えていたため gap をなくして上下中央に */
.sw-page .sw-faq__list { gap: 0; }
.sw-page .sw-faq__text { font-size: 18px; line-height: 1.5; }
@media (max-width: 599px) {
  .sw-page .sw-faq__text { font-size: 16px; }
}
/* CONTACT: 電話番号の上に「お電話でお問い合わせ」 */
.sw-page .sw-cta__telbox { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sw-page .sw-cta__tel-label { font-weight: 500; font-size: 13px; line-height: normal; color: #fff; }
/* あわせて相談できること: 矢印をカードの右端に */
.sw-page .sw-related__name { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sw-page .sw-related__arrow { flex: none; }

/* ==========================================================
   事業案内ページ共通(.sw-page = 事業案内 25309 配下の固定ページ。functions.php で body に付与)
   2026-10-07 Webマーケティングページ追加に伴う追記
   ========================================================== */
/* 英字見出し(WEBSITE / MARKETING)と一番上の画像の間に余白 */
.sw-page .sw-head--lg { margin-bottom: 40px; }
@media (max-width: 599px) { .sw-page .sw-head--lg { margin-bottom: 24px; } }

/* 提供メニュー: 3列カード */
.sw-page .sw-types__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-page .sw-types__grid--3 .sw-card__img { height: 220px; }
@media (max-width: 1024px) { .sw-page .sw-types__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sw-page .sw-types__grid--3 { grid-template-columns: 1fr; } .sw-page .sw-types__grid--3 .sw-card__img { height: 180px; } }

/* ヒーローの実測値ボックス */
.sw-page .sw-stats { margin-top: 48px; padding: 32px 40px; background: #fff; border: 1px solid var(--sw-border); border-radius: 8px; }
.sw-page .sw-stats__caption { font-weight: 700; font-size: 16px; line-height: normal; color: var(--sw-text); }
.sw-page .sw-stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 20px !important; }
.sw-page .sw-stats__list li { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; border-left: 2px solid var(--sw-border); }
.sw-page .sw-stats__num { font-family: "Outfit", sans-serif; font-weight: 500; font-size: 48px; line-height: 1; color: var(--sw-navy); }
.sw-page .sw-stats__num small { margin-left: 4px; font-family: "Zen Kaku Gothic Antique", sans-serif; font-weight: 700; font-size: 16px; }
.sw-page .sw-stats__num--accent { color: var(--sw-teal); }
.sw-page .sw-stats__label { font-size: 14px; line-height: 1.6; color: var(--sw-sub); }
.sw-page .sw-stats__link { display: inline-block; margin-top: 24px; font-weight: 700; font-size: 14px; color: var(--sw-teal) !important; }
.sw-page .sw-stats__link:hover { opacity: .8; }
@media (max-width: 599px) {
  .sw-page .sw-stats { margin-top: 32px; padding: 24px 20px; }
  .sw-page .sw-stats__list { grid-template-columns: 1fr; gap: 16px; }
  .sw-page .sw-stats__num { font-size: 36px; }
}

/* 事例: 注目事例ボックス */
.sw-page .sw-case { display: flex; align-items: center; gap: 40px; margin-bottom: 48px; padding: 40px; background: var(--sw-cream); border: 1px solid var(--sw-border); border-radius: 8px; }
.sw-page .sw-case__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sw-page .sw-case__tag { align-self: flex-start; padding: 2px 10px; border: 1px solid var(--sw-navy); font-weight: 700; font-size: 12px; line-height: 1.6; color: var(--sw-navy); }
.sw-page .sw-case__title { font-weight: 700 !important; font-size: 24px !important; line-height: 1.5 !important; color: var(--sw-text) !important; }
.sw-page .sw-case__dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 15px; line-height: 1.8; }
.sw-page .sw-case__dl dt { font-weight: 700; color: var(--sw-teal); white-space: nowrap; }
.sw-page .sw-case__dl dd { color: var(--sw-sub); }
.sw-page .sw-case__stats { flex: none; display: grid; grid-template-columns: repeat(3, 150px); gap: 12px; }
.sw-page .sw-case__stats li { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px; background: #fff; border: 1px solid var(--sw-border); border-radius: 8px; }
.sw-page .sw-case__num { font-family: "Outfit", sans-serif; font-weight: 500; font-size: 32px; line-height: 1; color: var(--sw-navy); }
.sw-page .sw-case__num--accent { color: var(--sw-teal); }
.sw-page .sw-case__label { font-size: 13px; line-height: 1.6; color: var(--sw-sub); }
@media (max-width: 1024px) {
  .sw-page .sw-case { flex-direction: column; align-items: stretch; }
  .sw-page .sw-case__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .sw-page .sw-case { padding: 24px 20px; gap: 24px; }
  .sw-page .sw-case__title { font-size: 20px !important; }
  .sw-page .sw-case__dl { grid-template-columns: 1fr; gap: 4px; }
  .sw-page .sw-case__dl dd { margin-bottom: 8px !important; }
  .sw-page .sw-case__stats { grid-template-columns: 1fr; }
}
/* 料金: 金額が未定(【要記入】)でも1行に収まるように */
.sw-page .sw-plan__amount { white-space: nowrap; }
/* 料金: プラン名が2行になってもカードの高さをそろえる */
.sw-page .sw-plan { display: flex; flex-direction: column; }
.sw-page .sw-plan__period { flex: 1; }
/* Webマーケティング(25459)のCTA背景 */
.page-id-25459 .sw-cta {
  background:
    linear-gradient(rgba(30, 43, 58, .85), rgba(30, 43, 58, .85)),
    url(https://homely.link/wp-content/uploads/2026/10/mk-cta-stock-20261008.jpg) center / cover no-repeat;
}
/* Webマーケティング: 「計測の詳細（コラム）」は白いボックスの外(右下)に出す */
.sw-page .sw-stats + .sw-stats__link { display: block; width: fit-content; margin: 16px 0 0 auto; }
/* 事例: 制作事例一覧を外したので、注目事例ボックスの下余白は不要 */
.sw-page .sw-case:last-of-type { margin-bottom: 0; }
/* 事例: 注目事例のベージュ背景・枠・角丸をなくす(内側の数値カードはそのまま) */
.sw-page .sw-case { padding: 0; background: none; border: 0; border-radius: 0; }
@media (max-width: 599px) { .sw-page .sw-case { padding: 0; } }
/* 事例: 右カラムの数値は縦並び、各項目はテキスト(左)と数字(右)を横並び */
.sw-page .sw-case__stats { grid-template-columns: 1fr; width: 360px; gap: 12px; }
.sw-page .sw-case__stats li { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.sw-page .sw-case__label { order: 1; flex: 1; min-width: 0; }
.sw-page .sw-case__num { order: 2; flex: none; }
@media (max-width: 1024px) { .sw-page .sw-case__stats { width: 100%; grid-template-columns: 1fr; } }
/* 事例: 右カラムの説明テキストを大きく太字に */
.sw-page .sw-case__label { font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--sw-text); }
/* 事例: 右カラムを広げて数字を大きく、単位(%・日)は小さく */
.sw-page .sw-case__stats { width: 440px; }
.sw-page .sw-case__num { font-size: 48px; }
.sw-page .sw-case__num small { margin-left: 2px; font-size: 24px; }
.sw-page .sw-case__label { font-size: 16px; }
@media (max-width: 1024px) { .sw-page .sw-case__stats { width: 100%; } }
@media (max-width: 599px) { .sw-page .sw-case__num { font-size: 40px; } .sw-page .sw-case__num small { font-size: 20px; } .sw-page .sw-case__label { font-size: 15px; } }
/* Webマーケティング: 実測値の上のドーナツグラフ */
.sw-page .sw-stats__chart { position: relative; display: block; width: 140px; height: 140px; margin-bottom: 12px; }
.sw-page .sw-ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.sw-page .sw-ring circle { fill: none; stroke-width: 12; }
.sw-page .sw-ring__bg { stroke: #ecebe6; }
.sw-page .sw-ring__fg { stroke: var(--sw-navy); stroke-linecap: butt; transition: stroke-dasharray 1.2s ease; }
.sw-page .sw-ring--accent .sw-ring__fg { stroke: var(--sw-teal); }
.sw-page .sw-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--sw-navy); text-align: center; }
.sw-page .sw-ring__center small { font-family: "Zen Kaku Gothic Antique", sans-serif; font-weight: 700; font-size: 12px; }
.sw-page .sw-stats__note { margin-top: 20px !important; font-size: 12px; line-height: 1.6; color: var(--sw-mute); }
@media (max-width: 599px) {
  .sw-page .sw-stats__chart { width: 120px; height: 120px; }
  .sw-page .sw-ring__center { font-size: 26px; }
}
.sw-page .sw-ring__center small { margin: 0 1px; font-size: 14px; }
.sw-page .sw-ring__cap { margin-bottom: 4px; font-family: "Zen Kaku Gothic Antique", sans-serif; font-weight: 700; font-size: 12px; color: var(--sw-sub); }
/* 実測値: 外枠をなくし見出しは中央・大きく、3つのグラフはそれぞれ白いカードに(グレーの枠線なし) */
.sw-page .sw-stats { padding: 0; background: none; border: 0; border-radius: 0; }
.sw-page .sw-stats__caption { text-align: center; font-size: 24px; line-height: 1.5; }
.sw-page .sw-stats__list { gap: 24px; margin-top: 32px !important; }
.sw-page .sw-stats__list li { align-items: center; text-align: center; padding: 40px 24px 36px; border: 0; border-radius: 8px; background: #fff; }
.sw-page .sw-stats__chart { width: 200px; height: 200px; margin-bottom: 20px; }
.sw-page .sw-ring circle { stroke-width: 14; }
.sw-page .sw-ring__center { font-size: 40px; }
.sw-page .sw-ring__center small { font-size: 16px; }
.sw-page .sw-ring__cap { font-size: 14px; }
.sw-page .sw-stats__note { text-align: center; }
@media (max-width: 599px) {
  .sw-page .sw-stats__caption { font-size: 19px; }
  .sw-page .sw-stats__list { gap: 16px; }
  .sw-page .sw-stats__list li { padding: 32px 20px 28px; }
  .sw-page .sw-stats__chart { width: 170px; height: 170px; }
  .sw-page .sw-ring__center { font-size: 34px; }
}
/* 実測値: 見出しの上に薄い罫線(上のリード文との区切り) */
.sw-page .sw-stats { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--sw-border); }
@media (max-width: 599px) { .sw-page .sw-stats { margin-top: 40px; padding-top: 32px; } }
/* 実測値: 3つとも真ん中と同じ水色(グラフ)+グレー(残り)・水色の数字にそろえる */
.sw-page .sw-stats .sw-ring__fg { stroke: var(--sw-teal); }
.sw-page .sw-stats__num { color: var(--sw-teal); }
/* 数字は水色・単位(件・回・%・日)は紺(実測値・事例の右カラム共通) */
.sw-page .sw-case__num { color: var(--sw-teal); }
.sw-page .sw-stats__num small, .sw-page .sw-case__num small { color: var(--sw-navy); }
/* 実測値グラフ: 割合部分はサイト共通のグラデーション(本文内の #swRingGrad) */
.sw-page .sw-grad-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sw-page .sw-stats .sw-ring__fg { stroke: url(#swRingGrad); transition: none; }

/* ==========================================================
   事業案内：システム開発・AI導入ページ(2026-10-07 追加)
   ========================================================== */
/* ヒーロー下「業務を3つに切り分ける」 */
.sw-page .sw-split { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--sw-border); }
.sw-page .sw-split__caption { text-align: center; font-weight: 700; font-size: 24px; line-height: 1.5; color: var(--sw-text); }
.sw-page .sw-split__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px !important; counter-reset: none; }
.sw-page .sw-split__list li::before { content: none !important; }
.sw-page .sw-split__item { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 20px; border-radius: 8px; background: #fff; text-align: center; }
.sw-page .sw-split__label { font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--sw-text); }
.sw-page .sw-split__text { font-size: 15px; line-height: 1.7; color: var(--sw-sub); }
.sw-page .sw-split__item--ai { box-shadow: inset 0 0 0 2px var(--sw-teal); }
.sw-page .sw-split__item--ai .sw-split__label { color: var(--sw-teal); }
.sw-page .sw-split__item--dev { background: var(--sw-navy); }
.sw-page .sw-split__item--dev .sw-split__label, .sw-page .sw-split__item--dev .sw-split__text { color: #fff; }
@media (max-width: 1024px) { .sw-page .sw-split__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .sw-page .sw-split { margin-top: 40px; padding-top: 32px; }
  .sw-page .sw-split__caption { font-size: 19px; }
  .sw-page .sw-split__list { grid-template-columns: 1fr; gap: 12px; }
  .sw-page .sw-split__item { padding: 24px 20px; }
  .sw-page .sw-split__text br { display: none; }
}

/* 料金: 4プラン */
.sw-page .sw-price__table--4 { gap: 16px; }
.sw-page .sw-price__table--4 .sw-plan { width: auto; flex: 1; min-width: 0; }
@media (max-width: 1024px) { .sw-page .sw-price__table--4 .sw-plan { flex: 0 0 calc((100% - 16px) / 2); } }
@media (max-width: 599px) { .sw-page .sw-price__table--4 .sw-plan { flex: 0 0 100%; } }

/* 料金: 補助金 */
.sw-page .sw-subsidy { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 20px 28px; border-radius: 8px; background: #fff; }
.sw-page .sw-subsidy__badge { flex: none; padding: 6px 14px; border-radius: 4px; background: var(--sw-navy); font-weight: 700; font-size: 14px; line-height: 1.4; color: #fff; }
.sw-page .sw-subsidy__text { font-weight: 500; font-size: 15px; line-height: 1.7; color: var(--sw-text); }
@media (max-width: 599px) { .sw-page .sw-subsidy { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; } }

/* 開発事例: 画像+本文の横長カード 2列 */
.sw-page .sw-devcases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sw-page .sw-devcases li::before { content: none !important; }
.sw-page .sw-devcase { display: flex; gap: 24px; padding: 24px; background: var(--sw-cream); border-radius: 8px; }
.sw-page .sw-devcase__img { flex: none; width: 220px; height: 180px; object-fit: cover; border-radius: 6px; }
.sw-page .sw-devcase__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sw-page .sw-devcase__tag { align-self: flex-start; padding: 2px 10px; border: 1px solid var(--sw-navy); font-weight: 700; font-size: 12px; line-height: 1.6; color: var(--sw-navy); }
.sw-page .sw-devcase__title { font-weight: 700 !important; font-size: 19px !important; line-height: 1.5 !important; color: var(--sw-text) !important; }
.sw-page .sw-devcase__text { font-size: 14px; line-height: 1.8; color: var(--sw-sub); }
.sw-page .sw-devcase__more { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--sw-teal) !important; }
.sw-page .sw-devcase__more:hover { opacity: .8; }
@media (max-width: 1024px) { .sw-page .sw-devcases { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .sw-page .sw-devcase { flex-direction: column; padding: 20px; }
  .sw-page .sw-devcase__img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}
/* システム開発・AI導入(25504)のCTA背景 */
.page-id-25504 .sw-cta {
  background:
    linear-gradient(rgba(30, 43, 58, .85), rgba(30, 43, 58, .85)),
    url(https://homely.link/wp-content/uploads/2026/10/dv-cta-stock-20261008.jpg) center / cover no-repeat;
}

/* システム開発・AI導入 修正(2026-10-07) */
/* 業務を3つに切り分ける: 写真を入れ、カードの背景・枠をなくす */
.sw-page .sw-split__item, .sw-page .sw-split__item--ai, .sw-page .sw-split__item--dev { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.sw-page .sw-split__item--dev .sw-split__label { color: var(--sw-text); }
.sw-page .sw-split__item--dev .sw-split__text { color: var(--sw-sub); }
.sw-page .sw-split__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
@media (max-width: 599px) { .sw-page .sw-split__list { gap: 32px; } }

/* 補助金: 左にグラデーションの見出し、右に本文 */
.sw-page .sw-subsidy { align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.sw-page .sw-subsidy__head { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 260px; padding: 28px 32px; background-image: var(--sw-grad); color: #fff; }
.sw-page .sw-subsidy__en { font-family: "Outfit", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 2px; line-height: 1.4; }
.sw-page .sw-subsidy__title { font-weight: 700; font-size: 22px; line-height: 1.4; }
.sw-page .sw-subsidy__text { display: flex; align-items: center; padding: 28px 36px; font-size: 16px; }
@media (max-width: 599px) {
  .sw-page .sw-subsidy { padding: 0; gap: 0; }
  .sw-page .sw-subsidy__head { width: 100%; padding: 20px 24px; }
  .sw-page .sw-subsidy__text { padding: 20px 24px; font-size: 15px; }
}

/* 開発事例: ベージュ背景なし・1列(画像とテキストは横並びのまま)・「詳しく見る」はシンプルなボタン */
.sw-page .sw-devcases { grid-template-columns: 1fr; gap: 0; }
.sw-page .sw-devcase { gap: 40px; padding: 40px 0; background: none; border-radius: 0; border-top: 1px solid var(--sw-border); }
.sw-page .sw-devcase:last-child { border-bottom: 1px solid var(--sw-border); }
.sw-page .sw-devcase__img { width: 400px; height: 250px; border-radius: 8px; }
.sw-page .sw-devcase__title { font-size: 22px !important; }
.sw-page .sw-devcase__text { font-size: 15px; }
.sw-page .sw-devcase__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 16px; margin-top: auto; padding: 12px 28px; border: 1px solid var(--sw-navy); border-radius: 999px; font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--sw-navy) !important; transition: background-color .3s, color .3s; }
.sw-page .sw-devcase__btn:hover { background: var(--sw-navy); color: #fff !important; }
@media (max-width: 1024px) { .sw-page .sw-devcase__img { width: 300px; height: 200px; } }
@media (max-width: 599px) {
  .sw-page .sw-devcase { gap: 20px; padding: 28px 0; }
  .sw-page .sw-devcase__img { width: 100%; height: auto; }
  .sw-page .sw-devcase__title { font-size: 19px !important; }
}
.sw-page .sw-devcase__btn { margin-top: 8px; }
/* 業務を3つに切り分ける: 画像を低く、説明文の改行なし、「専用に開発する」だけ背景色で強調 */
.sw-page .sw-split__img { aspect-ratio: 16 / 10; }
.sw-page .sw-split__text br { display: none; }
.sw-page .sw-split__item, .sw-page .sw-split__item--ai { padding: 16px 16px 24px; }
.sw-page .sw-split__item--dev { padding: 16px 16px 24px; background: var(--sw-navy); border-radius: 8px; }
.sw-page .sw-split__item--dev .sw-split__label, .sw-page .sw-split__item--dev .sw-split__text { color: #fff; }
@media (max-width: 599px) { .sw-page .sw-split__list { gap: 16px; } }

/* 開発事例: テキストを画像に対して上下中央、ボタンは塗りのブロック、一番上と一番下の線なし */
.sw-page .sw-devcase { align-items: center; }
.sw-page .sw-devcase:first-child { border-top: 0; padding-top: 0; }
.sw-page .sw-devcase:last-child { border-bottom: 0; padding-bottom: 0; }
.sw-page .sw-devcase__body { justify-content: center; }
.sw-page .sw-devcase__btn { margin-top: 12px; border: 0; background: var(--sw-navy); color: #fff !important; padding: 14px 32px; transition: opacity .3s; }
.sw-page .sw-devcase__btn:hover { background: var(--sw-navy); opacity: .8; }
@media (max-width: 599px) { .sw-page .sw-devcase { align-items: stretch; } }
/* 業務を3つに切り分ける: 「AIに任せる」は#d78f7bの文字+枠、「専用に開発する」は#d78f7bの背景 */
.sw-page .sw-split__item--ai { box-shadow: inset 0 0 0 2px #d78f7b; border-radius: 8px; }
.sw-page .sw-split__item--ai .sw-split__label { color: #d78f7b; }
.sw-page .sw-split__item--dev { background: #d78f7b; }
/* 開発事例: 「詳しく見る」は事例一覧ボタン(紺)と区別するため水色 */
.sw-page .sw-devcase__btn, .sw-page .sw-devcase__btn:hover { background: var(--sw-teal); }

/* 事業案内ページ：TOPと同じ見出しアニメーション(英字は単語ごとに左から伸びる)・フェードイン(script.js 冒頭でクラス付与) */
.sw-page .sw-head__en.hml-anime-eyebrow { transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.sw-page .sw-head--center .sw-head__en.hml-anime-eyebrow { transform-origin: center; }
.sw-page .sw-head__en.hml-anime-eyebrow.is-revealed { transform: scaleX(1); }
.sw-page .fade-up-group > *:nth-child(6) { transition-delay: .5s; }

/* Adobe Stock licensed photo crop: 2026-10-08 */
.page-id-25459 .sw-stock-photo-crop { display: block; overflow: hidden; }
.page-id-25459 .sw-stock-photo-crop > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left bottom; transform: scale(1.65); transform-origin: left bottom; }

/* Service page navigation: 2026-10-08 */
.site-header__service-menu { position: relative; }
.site-header__service-menu > summary { list-style: none; cursor: pointer; font-family: var(--font-en); color: var(--navy); font-size: 16px; font-weight: 500; }
.site-header__service-menu > summary::-webkit-details-marker { display: none; }
.site-header__nav .site-header__service-links { position: absolute; top: calc(100% + 20px); left: -24px; display: flex; flex-direction: column; gap: 0; min-width: 260px; padding: 12px 0; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.site-header__nav .site-header__service-links a { display: block; padding: 12px 24px; font-family: var(--font-jp); font-size: 15px; color: var(--navy); white-space: nowrap; }
.site-header__nav .site-header__service-links a:hover, .site-header__nav .site-header__service-links a:focus-visible { background: #f1efea; }
.site-mobile-nav__link.site-mobile-nav__service-link { padding-left: 24px; font-family: var(--font-jp); font-size: 16px; letter-spacing: 0; }
.site-footer__services-title a { color: inherit; }
.site-footer__services-title a:hover, .site-footer__services-title a:focus-visible { text-decoration: underline; }

/* ==========================================================
   FV キャッチコピー: 手書き風アニメーション(2026-10-09)
   各文字の塗りを、文字の中心線(骨格)に沿った太い線のマスクで隠しておき、
   その線を書き順に近い順で1本ずつ伸ばして(script.js)、1文字ずつペンで書くように見せる。
   SVG: assets/svg/fv-catch-line1/2.svg(python で骨格線を生成。中心線は mask 内の .hero__headline-pen)
   ========================================================== */
.hero__headline{ display:block; width:1000px; max-width:100%; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; font-size:0 !important; line-height:0 !important; }
.hero__headline::before, .hero__headline::after{ content:none !important; display:none !important; }
.hero__headline-line{ display:block; height:auto; overflow:visible; }
.hero__headline-line:first-child{ width:83.57%; }  /* 1730 / 2070(2行目の幅) */
.hero__headline-line + .hero__headline-line{ width:100%; margin-top:1.6%; }
.hero__headline-line > path{ fill:#fff; }

/* ==========================================================
   表示速度対策(2026-10-09)
   こんなお悩みのビル写真は background-attachment:fixed だと、スクロールのたびに
   ページ全体の再描画が起きて重くなるため、同じ見え方のまま
   「clip-path で切り抜いた枠の中に position:fixed の背景を置く」方式に置き換える。
   (スマホは従来どおり通常スクロールの背景)
   ========================================================== */
.worries-visual, .worries-wrap__bg{ background-image:none !important; background-attachment:scroll !important; clip-path:inset(0); }
.worries-visual{ position:relative; }
.worries-visual::before, .worries-wrap__bg::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:#0a1a2e url("assets/images/worries-buildings.webp") center / cover no-repeat;
}
@media (max-width: 900px){
  .worries-visual::before, .worries-wrap__bg::before{ position:absolute; }
}

/* ==========================================================
   スマホ調整(2026-10-15) TOPページ
   ========================================================== */
@media (max-width: 900px){
  /* WORKS: タブの白背景・余白をなくし、ボタンを低く・文字を1.5px小さく */
  #works .works__tabs{ background:none; padding:0; }
  #works .works__tabs a{ height:34px; font-size:10.5px; }
  /* 見出し下の余白(13px)をなくす */
  .worries .section-heading, .kodawari .section-heading{ padding-bottom:0 !important; }
  /* こんなお悩み: 透過カードの余白を上下24px・左右16px、番号の英字は上下をトリミング */
  .worry-card{ padding:24px 16px; }
  .worry-card__num{ line-height:1; text-box:trim-both cap alphabetic; }
  /* HOMELYのこだわり: イメージの幅200px */
  .kodawari-card img{ width:200px; max-width:200px; }
}
@media (max-width: 900px){
  /* こんなお悩み: カード上下の余白は40pxに戻す(左右16px) */
  .worry-card{ padding:40px 16px; }
  /* 番号: text-box-trim では数字の上端がグラデーション(背景の切り抜き)ごと欠けたため、
     行の高さで上下の余白を詰める(40pxの数字の実寸 約29pxに対して32px) */
  .worry-card__num{ text-box:normal; line-height:32px; }
}

/* スマホ調整(2026-10-15 その2) */
@media (max-width: 900px){
  /* お問い合わせブロック: 背景の「CONTACT」の文字間隔を解除 */
  .contact__bg-text{ letter-spacing:normal; }
  /* WORKS一覧: タブをTOPページと同じデザインに(白背景・余白なし、高さ34px・文字10.5px) */
  .works__tabs{ background:none; padding:0; }
  .works__tabs a{ height:34px; font-size:10.5px; }
  /* カテゴリー(タグ)を小さく。WORKS詳細のタグ(.work-detail__tag)も一覧と同じデザインに */
  .work-card__tags span, .work-detail__tag{ font-size:10px; font-weight:700; padding:1px 6px; line-height:1.6; }
  .work-detail__tags{ gap:6px; }
  /* WORKS詳細: タイトル22px、見出し(h3)20px、「関連する制作事例」はタイトルと同じ22px */
  .work-detail__title{ font-size:22px !important; }
  .work-detail__section-heading{ font-size:20px !important; }
  .work-detail__related-title{ font-size:22px !important; }
}
@media (max-width: 900px){
  /* WORKS一覧はタブが4つあるため、文字を折り返さず文字幅に合わせる */
  .works--archive .works__tabs a{ flex:1 1 auto; width:auto; padding:0 6px; white-space:nowrap; }
}

/* WORKS詳細「使用カラー」: 色見本とカラーコードを1組にして、折り返しても各色の真下にコードが来るようにする(2026-10-15) */
.work-detail__swatches{ gap:14px; }
.work-detail__swatch{ display:flex; flex-direction:column; gap:8px; width:80px; }
.work-detail__swatch-code{ font-family:var(--font-jp); font-size:15px; line-height:1.4; color:var(--gray); }
@media (max-width: 900px){
  .work-detail__swatch-code{ font-size:12px; }
}

/* WORKS詳細「下層ページ」: スマホでは横スライド表示(スクロールスナップ+ドット)(2026-10-15) */
.work-detail__subpages-dots{ display:none; }
@media (max-width: 900px){
  .work-detail__subpages-grid{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .work-detail__subpages-grid::-webkit-scrollbar{ display:none; }
  .work-detail__subpages-item{ flex:0 0 86%; scroll-snap-align:center; }
  .work-detail__subpages-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
  .work-detail__subpages-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#cecece; cursor:pointer; }
  .work-detail__subpages-dots button.is-active{ background:var(--navy); }
}
/* WORKS詳細(スマホ): 「Design / Website(PC/SP)」「下層ページ」の見出し下の余白を20pxに(2026-10-15) */
@media (max-width: 900px){
  .work-detail__design-heading, .work-detail__subpages-heading{ margin-bottom:20px; }
}
/* WORKS詳細(スマホ): 余白の調整(2026-10-15) */
@media (max-width: 900px){
  .work-detail__specs{ margin-bottom:16px; }
  .work-detail__heading{ margin:0 !important; }
  .work-detail__divider{ margin-top:10px; }
}

/* ==========================================================
   事業案内ページ(3ページ共通) スマホ調整(2026-10-15)
   ========================================================== */
@media (max-width: 599px){
  /* タブ: 3つとも画面内に収まるように(WORKSのタブと同じ高さ34px・10.5px) */
  .sw-page .sw-tabs{ justify-content:center; gap:6px; padding-left:16px; padding-right:16px; overflow-x:visible; }
  .sw-page .sw-tabs a{ min-width:0; height:34px; padding:0 6px; font-size:10.5px; white-space:nowrap; }
  /* 英字タイトル(WEBSITE / MARKETING / DEVELOPMENT)36px、和文との間隔0 */
  .sw-page .sw-head--lg{ gap:0; }
  .sw-page .sw-head--lg .sw-head__en{ font-size:36px; }
  /* 見出し: 24px・改行なし */
  .sw-page .sw-intro__title{ font-size:24px !important; }
  .sw-page .sw-intro__title br{ display:none; }
  /* ボタン: WORKS詳細のボタン(.work-cta)と同じ高さ56px */
  .sw-page .sw-btn{ height:56px; padding:12px 24px; font-size:14px; }
  /* 対応するサイトの種類・提供メニュー: 画像を小さく左、テキストを右に横並び */
  .sw-page .sw-card{ flex-direction:row; align-items:center; gap:14px; padding:12px; }
  .sw-page .sw-card__img, .sw-page .sw-types__grid--3 .sw-card__img{ flex:none; width:112px; height:84px; border-radius:6px; }
  .sw-page .sw-card__body{ padding:0; gap:6px; }
  .sw-page .sw-card__title{ font-size:16px !important; }
  .sw-page .sw-card__text{ font-size:13px; line-height:1.6; }
  /* 選ばれる理由: 番号56pxで全て右側、見出し18px、テキストのgap 6px */
  .sw-page .sw-strength__num{ font-size:56px; }
  .sw-page .sw-strength--reverse .sw-strength__num{ right:0; left:auto; }
  .sw-page .sw-strength__figure{ padding-top:20px; }
  .sw-page .sw-strength__title{ font-size:18px !important; }
  .sw-page .sw-strength__text{ gap:6px; }
}

/* 事業案内: 料金まわりの調整(2026-10-15) */
/* 料金を3列で並べる指定(Webマーケティング・PC) */
.sw-page .sw-price__table--3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.sw-page .sw-price__table--3 .sw-plan{ width:auto; }
/* 「広告費の20%」と「(最低〜)」を2行に分ける */
.sw-page .sw-plan__price--stack{ flex-direction:column; align-items:center; gap:6px; }
.sw-page .sw-plan__price--stack .sw-plan__amount{ font-size:26px; }
@media (max-width: 1024px){ .sw-page .sw-price__table--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px){
  .sw-page .sw-price__table--3{ grid-template-columns:1fr; }
  /* 3ページ共通 */
  .sw-page .sw-types__grid{ gap:10px; }
  .sw-page .sw-strength__title br{ display:none; }
  .sw-page .sw-strength__num, .sw-page .sw-strength--reverse .sw-strength__num{ right:20px; left:auto; }
  .sw-page .sw-plan__spec dd br{ display:none; }
  /* 期間の目安・形態・想定: 項目名と内容を横並び */
  .sw-page .sw-plan__period{ flex-direction:row; justify-content:space-between; align-items:center; gap:12px; padding:16px; text-align:left; }
  .sw-page .sw-plan__period dd{ text-align:right; }
}

/* 事業案内(2026-10-15): 料金3列(PC)は最後の行も中央にそろえる / スマホのタブ位置を少し下に */
.sw-page .sw-price__table--3{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.sw-page .sw-price__table--3 .sw-plan{ flex:0 0 calc((100% - 32px) / 3); }
@media (max-width: 1024px){ .sw-page .sw-price__table--3 .sw-plan{ flex-basis:calc((100% - 16px) / 2); } }
@media (max-width: 599px){
  .sw-page .sw-price__table--3 .sw-plan{ flex-basis:100%; }
  .sw-page .sw-tabs{ padding-top:48px; }
}
/* ドロワー「SERVICE」はリンクなしの見出し(下に3事業のリンク)(2026-10-15) */
.site-mobile-nav__label{ cursor:default; }
/* フッターナビ: 全項目同じ書体・サイズ(2026-10-15) */
.site-footer__nav a{ font-size:16px; }
/* 事業案内(スマホ): タイトルセクションの高さを360→250px(WORKS等の下層ページと同じ)。
   英字の位置・本文パネルの重なり(30px)も下層ページ(.hero--work)にそろえる(2026-10-15) */
@media (max-width: 599px){
  .sw-page .sw-hero{ height:250px; }
  .sw-page .sw-hero__inner{ padding-top:102px; }
  .sw-page .sw-main{ margin-top:calc(250px - 30px); }
}
/* 事業案内(スマホ): タイトルセクションの英字「SERVICE」36px(2026-10-15) */
@media (max-width: 599px){
  .sw-page .sw-hero__en{ font-size:36px; }
}
/* 事業案内(スマホ): 本文パネルの角丸20px(2026-10-15) */
@media (max-width: 599px){
  .sw-page .sw-main{ border-radius:20px 20px 0 0; }
}
/* 下層ページ全体(スマホ): ページタイトルの英字を36pxにそろえる(事業案内の .sw-hero__en と同じ)(2026-10-15) */
@media (max-width: 900px){
  .work-hero__en{ font-size:36px; }
}
/* 下層ページ全体(スマホ): 本文パネルの角丸を20pxにそろえる(事業案内の .sw-main と同じ)(2026-10-15) */
@media (max-width: 900px){
  .work-detail{ border-radius:20px 20px 0 0; }
}

/* ==========================================================
   スマホ: 全ページのセクション上下余白を64pxに統一(2026-10-15、40px→64pxに変更)
   同じ背景のセクションが続いて余白が二重になる箇所は片方を0にする
   ========================================================== */
@media (max-width: 900px){
  /* TOP */
  .kodawari__grid{ gap:16px; }
  .about, .works, .worries, .kodawari, .column, .contact, .site-footer{ padding-top:64px; padding-bottom:64px; }
  .service__intro{ padding-top:64px; padding-bottom:64px; }
  /* コラム(#column)とお知らせ(#news)は同じ背景で続くため、お知らせ側の上余白をなくす */
  #column.column{ padding-bottom:64px; }
  #news.column{ padding-top:0; }
  #news .column__inner{ padding-top:64px; } /* 区切り線から見出しまで64px */
  /* 下層ページ(会社案内・お問い合わせ・WORKS・COLUMNなど)の本文パネル */
  .work-page-shell > .work-detail{ padding-top:64px; padding-bottom:64px; }
}
@media (max-width: 599px){
  /* 事業案内(3ページ共通) */
  .sw-page .sw-intro{ padding-top:64px; }
  .sw-page .sw-problems{ padding-top:64px; }
  .sw-page .sw-types, .sw-page .sw-strengths, .sw-page .sw-flow, .sw-page .sw-price,
  .sw-page .sw-works, .sw-page .sw-faq{ padding-top:64px; padding-bottom:64px; }
  .sw-page .sw-cta, .sw-page .sw-related{ margin-top:64px; }
}

/* 一覧へ・事業案内へ等のボタン(.btn-pill--teal / --white): テキストを中央、矢印を右端に(PC・スマホ共通)。
   スマホの角丸は100px(ピル型)に戻す(2026-10-15) */
.btn-pill--teal, .btn-pill--white{ position:relative; justify-content:center; padding-left:72px; padding-right:72px; } /* 右端24px＋矢印24px＋文字との間24px */
.btn-pill--teal .arrow, .btn-pill--white .arrow{ position:absolute; right:24px; top:50%; transform:translateY(-50%); }
@media (max-width: 900px){
  .btn-pill, .btn-outline{ border-radius:100px; }
}
/* ボタンの矢印をさらに右端へ(右24px→16px)(2026-10-15) */
.btn-pill--teal .arrow, .btn-pill--white .arrow{ right:16px; }
.btn-pill--teal, .btn-pill--white{ padding-left:64px; padding-right:64px; }

/* ==========================================================
   ボタンのデザイン統一(PC・スマホ共通、2026-10-15)
   高さ46px・テキスト左揃え・矢印は右端から16px
   対象: .btn-pill--teal/--white(一覧へ・お問い合わせフォームへ等)、.btn-outline、
         WORKS詳細 .work-cta、事業案内 .sw-btn / .sw-cta__btn / .sw-devcase__btn
   (ヘッダーのCONTACT .btn-pill--dark は対象外)
   ========================================================== */
.btn-pill--teal, .btn-pill--white, .btn-outline, .work-cta,
.sw-page .sw-btn, .sw-page .sw-cta__btn, .sw-page .sw-devcase__btn{
  position:relative !important;
  align-items:center !important; justify-content:flex-start !important; /* displayは各ボタンの表示切替(PC/スマホ)を壊さないよう指定しない */
  height:46px !important; min-height:46px; box-sizing:border-box;
  padding:0 56px 0 24px !important; /* 右: 矢印16px+矢印幅24px+余白16px */
  line-height:1.3 !important;
}
.btn-pill--teal .arrow, .btn-pill--white .arrow, .btn-outline .arrow, .work-cta .arrow,
.sw-page .sw-btn > img, .sw-page .sw-cta__btn > img, .sw-page .sw-devcase__arrow{
  position:absolute !important; right:16px !important; left:auto !important; top:50% !important;
  transform:translateY(-50%) !important; margin:0 !important;
}
/* 枠線(2px)付きのボタンは内側の位置を枠線分補正 */
.btn-outline{ padding-left:22px !important; }
.btn-outline .arrow{ right:14px !important; }
/* PCのボタン: 幅300px・高さ56pxにそろえる(スマホは高さ46px・全幅のまま)(2026-10-15) */
@media (min-width: 901px){
  .btn-pill--teal, .btn-pill--white, .btn-outline, .work-cta,
  .sw-page .sw-btn, .sw-page .sw-cta__btn, .sw-page .sw-devcase__btn{
    width:300px !important; min-width:0 !important; max-width:100%; height:56px !important; min-height:56px; flex:none;
  }
}

/* ==========================================================
   紺のボタンを「WORKS」「COLUMN」見出しと同じグラデーション(--grad-text)に(2026-10-16)
   対象: 一覧へ・お問い合わせフォームへ等(.btn-pill--teal)、WORKS詳細(.work-cta--navy)、
         事業案内(.sw-btn--navy / .sw-devcase__btn)
   (ヘッダーのCONTACT .btn-pill--dark・スマホメニューのボタンは対象外。
    事業案内ページのお問い合わせボタンはFigma指定の水色のまま)
   ========================================================== */
.btn-pill--teal, .work-cta--navy,
.sw-page .sw-btn--navy, .sw-page .sw-devcase__btn, .sw-page .sw-devcase__btn:hover{ background:var(--grad-text) !important; }
.sw-page .contact .btn-pill--teal{ background:var(--sw-teal) !important; }

/* 全ページ共通: スマホ下部の電話・LINE固定ボタン (2026-10-16) */
.contact-mobile-actions { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: 120px; }
  .contact-mobile-actions {
    position: fixed; right: 20px; bottom: 15px; left: 20px; z-index: 98;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px;
    padding: 8px 10px 10px; box-sizing: border-box;
    background: #fff; border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  }
  .contact-mobile-actions::before {
    content: "お問い合わせはこちらから"; grid-column: 1 / -1;
    color: var(--navy); font-family: var(--font-jp); font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center;
  }
  .contact-mobile-actions a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; min-height: 0; padding: 0 4px; box-sizing: border-box; color: #fff;
    border-radius: 8px; box-shadow: none;
    font-family: var(--font-jp); font-size: 15px; font-weight: 700; line-height: 1.4;
    text-decoration: none; white-space: nowrap;
  }
  .contact-mobile-actions__phone { background: var(--navy); }
  .contact-mobile-actions__line { background: #06c655; }
  .contact-mobile-actions img { width: 22px; height: 22px; flex: none; object-fit: contain; filter: brightness(0) invert(1); }
  .contact-mobile-actions a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
}


/* TOP 制作事例「詳しく見る」: 枠線なし・テキスト+矢印のみを右に小さく表示 (2026-10-16) */
.works__more-wrap{ display:flex; justify-content:flex-end; }
.works__more-wrap .btn-outline{
  width:auto !important; height:auto !important; min-height:0 !important;
  padding:4px 0 !important; gap:8px; border:0 !important; border-radius:0 !important; background:none !important;
  justify-content:flex-end !important; font-size:14px; color:var(--teal);
}
.works__more-wrap .btn-outline .arrow{ position:static !important; transform:none !important; display:inline-flex; }
.works__more-wrap .btn-outline .arrow img{ width:16px; height:16px; }

/* スマホ: 制作事例タブ(.works__tabs)と3事業タブ(.sw-tabs)のデザインを統一 (2026-10-16)
   角丸0・padding上下左右4px・横並びの間隔10px。色は3事業タブに合わせる */
@media (max-width: 900px) {
  .works__tabs, .sw-tabs { gap: 10px !important; }
  .works__tabs a, .sw-tabs a {
    height: auto !important; min-height: 0 !important; padding: 4px !important;
    border-radius: 0 !important; border: 1px solid #dddad3 !important;
    background: #fff !important; color: #1e2b3a !important; font-weight: 500 !important;
  }
  .works__tabs a.is-active, .sw-tabs a.is-active {
    border-color: #43aec6 !important; background: #43aec6 !important; color: #fff !important; font-weight: 700 !important;
  }
}

/* 制作事例タブ・3事業タブ: 未選択(白背景)タブのグレー枠線を削除 PC・スマホ共通 (2026-10-16) */
.works__tabs a:not(.is-active), .sw-tabs a:not(.is-active) { border-color: transparent !important; }

/* 事業案内3ページ「選ばれる理由」: 01・03(通常向き)の数字を right:40px に。02(反転)の left:40px と対称 (2026-10-16) */
@media (min-width: 600px) {
  .sw-page .sw-strength:not(.sw-strength--reverse) .sw-strength__num { right: 40px; }
}

/* システム開発・AI導入「詳しく見る」(.sw-devcase__btn): 矢印と文字サイズをTOPのボタン(.btn-pill)に合わせる (2026-10-16) */
.sw-page .sw-devcase__btn { font-size: 15px !important; }
.sw-page .sw-devcase__arrow { width: 24px; height: 24px; display: block; line-height: 0; }
.sw-page .sw-devcase__arrow img { width: 24px; height: 24px; display: block; }

/* システム開発・AI導入「詳しく見る」: 目立たない配色(白地・紺文字・薄いグレー枠・影なし) (2026-10-16) */
.sw-page .sw-devcase__btn, .sw-page .sw-devcase__btn:hover {
  background: #fff !important; color: var(--navy) !important;
  border: 1px solid #dddad3 !important; box-shadow: none !important; opacity: 1;
}
.sw-page .sw-devcase__btn:hover { background: #f1efea !important; }

/* ==========================================================
   タブのデザイン変更(2026-10-20)
   対象: 事業案内3ページ上部の事業タブ(.sw-tabs)、制作事例のタブ(.works__tabs: WORKS一覧・TOP)
   角丸の白い帯の中に、文字を左から並べて縦線で区切る。選択中は水色+下線
   ========================================================== */
.works__tabs, .sw-page .sw-tabs{
  display:flex !important; justify-content:flex-start !important; align-items:center !important; gap:0 !important;
  box-sizing:border-box; height:64px; padding:0 28px !important;
  background:#fff !important; border-radius:999px !important;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; white-space:nowrap;
}
.works__tabs::-webkit-scrollbar, .sw-page .sw-tabs::-webkit-scrollbar{ display:none; }
/* 事業タブはページ幅いっぱいの帯ではなく、本文幅に収める(上の余白は従来のpadding分をmarginで確保) */
.sw-page .sw-tabs{ width:calc(100% - 80px); max-width:1200px; margin:90px auto 16px !important; }
.works__tabs.works__tabs a, .sw-page .sw-tabs.sw-tabs a{
  display:block !important; flex:none !important; width:auto !important; min-width:0 !important; height:auto !important; min-height:0 !important;
  padding:0 22px !important; border:0 !important; border-left:1px solid var(--navy) !important; border-radius:0 !important;
  background:none !important; color:var(--navy) !important;
  font-family:var(--font-jp); font-size:16px !important; font-weight:700 !important; line-height:26px !important;
  text-decoration:none; transition:color .3s;
}
.works__tabs.works__tabs a:first-child, .sw-page .sw-tabs.sw-tabs a:first-child{ border-left:0 !important; padding-left:0 !important; }
.works__tabs.works__tabs a:hover, .sw-page .sw-tabs.sw-tabs a:hover{ color:var(--teal) !important; }
.works__tabs.works__tabs a.is-active, .sw-page .sw-tabs.sw-tabs a.is-active{
  color:var(--teal) !important; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px;
}
@media (max-width: 900px){
  .works__tabs, .sw-page .sw-tabs{ height:48px; padding:0 20px !important; }
  .works__tabs.works__tabs a, .sw-page .sw-tabs.sw-tabs a{ padding:0 14px !important; font-size:13px !important; line-height:20px !important; }
  .works__tabs.works__tabs a.is-active, .sw-page .sw-tabs.sw-tabs a.is-active{ text-underline-offset:4px; }
}
@media (max-width: 599px){
  .sw-page .sw-tabs{ width:calc(100% - 32px); margin:48px auto 12px !important; }
}
/* タブの文字を帯の中央に配置(2026-10-20)。スマホで横スクロールになっても左端が切れないよう、justify-contentではなく左右のauto余白で中央寄せ */
.works__tabs.works__tabs a:first-child, .sw-page .sw-tabs.sw-tabs a:first-child{ margin-left:auto !important; }
.works__tabs.works__tabs a:last-child, .sw-page .sw-tabs.sw-tabs a:last-child{ margin-right:auto !important; }
/* 事業タブの上下余白(2026-10-20): タブのmargin-topは親(.sw-main)のmarginと相殺されて0になっていたため、
   親のpaddingで上の余白を確保。下(次のセクションの見出しまで)は少し狭くする */
.sw-page .sw-main:has(> .sw-tabs){ padding-top:40px; }
.sw-page .sw-tabs{ margin-top:0 !important; margin-bottom:0 !important; }
.sw-page .sw-tabs + section{ padding-top:56px !important; }
@media (max-width: 599px){
  .sw-page .sw-main:has(> .sw-tabs){ padding-top:24px; }
  .sw-page .sw-tabs + section{ padding-top:40px !important; }
}

/* 会社案内 代表挨拶: スマホは見出し(リード文)・本文とも文節での改行調整を解除し、通常の折り返しにする(2026-10-20) */
@media (max-width: 900px){
  .company-message__lead, .company-message__body, .company-message__body p{ word-break:normal !important; text-wrap:wrap !important; }
  .company-message__lead .ph, .company-message__body .ph{ display:none !important; }
  .company-message__lead br, .company-message__body br{ display:none; }
}

/* スマホ: タブ(事業タブ・制作事例タブ)を横スクロールさせず、すべて帯の中に収める(2026-10-20)
   文字サイズは画面幅に合わせて縮める(最大13px)。帯の左右余白12px・区切りの左右余白6px */
@media (max-width: 599px){
  .works__tabs, .sw-page .sw-tabs{ padding:0 12px !important; }
  .works__tabs.works__tabs a, .sw-page .sw-tabs.sw-tabs a{ padding:0 6px !important; letter-spacing:0 !important; }
  .works__tabs.works__tabs a{ font-size:min(13px, calc((100vw - 126px) / 24.6)) !important; }
  .sw-page .sw-tabs.sw-tabs a{ font-size:min(13px, calc((100vw - 106px) / 27.3)) !important; }
}

/* スマホ TOP FV: 写真の高さを広げる(2026-10-20)。写真は画面下端まで表示されるため、
   写真だけ70px上へ(下へのずらし量 100px→30px)。写真の見える高さ +70px。
   キャッチコピー(.hero__fixed-content)の位置は元のまま(translateY(100px)) */
@media (max-width: 900px){
  .hero__image{ transform:translateY(30px); }
}
/* スマホ TOP FV: 写真の上端をキャッチコピー「AIとWebの力で、〜」の高さの半分(1行目と2行目の間)まで上げる(2026-10-20)
   キャッチの上端 = FVの15% + 100px、キャッチの高さ ≒ 画面幅の20% なので、その半分(10vw)の位置 */
@media (max-width: 900px){
  /* 「少し縮めて」で40px下げた(2026-10-20)。transform:none にするとiPhone(Safari)で固定背景の写真が表示されなくなったため、
     従来どおり translateY(30px) を残し、その分 top を30px減らして同じ位置にしている */
  .hero__image{ top:calc(15% + 110px + 10vw); transform:translateY(30px); }
}

/* ==========================================================
   グラデーション(Flow)(2026-10-20)
   メッシュグラデーション部分に script.js が .flow-field(canvasをぼかして拡大)と .flow-noise(ノイズ)を入れたら(.is-flow)、
   従来のCSSアニメーション・白いぼかし(glow)・ザラつき(grain)を止める。ノイズは .flow-noise の1層だけ
   ========================================================== */
.is-flow{ animation:none !important; background-image:none !important; overflow:hidden; isolation:isolate; }
.sw-page .sw-hero__mesh.is-flow{ animation:none !important; background-image:none !important; }
.flow-field{ position:absolute; inset:0; pointer-events:none; }
.flow-gradient{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.flow-noise{ position:absolute; inset:0; pointer-events:none; background-repeat:repeat; background-size:256px 256px; image-rendering:pixelated; mix-blend-mode:overlay; }
.is-flow ~ .hero__glow, .is-flow ~ .sw-hero__glow, .is-flow ~ .page-hero__glow, .is-flow ~ .service__glow,
.is-flow ~ .hero__grain, .is-flow ~ .page-hero__grain, .is-flow ~ .service__grain, .sw-page .is-flow ~ .sw-hero__grain{ display:none !important; }

/* お問い合わせ完了(サンクス)ページ page-thanks.php (2026-10-21) */
.thanks-page__section{ max-width:var(--container); margin:0 auto; }
.thanks-page__body{ font-family:var(--font-jp); font-size:16px; line-height:2; color:var(--navy); }
.thanks-page__body p{ margin:0 0 20px; }
.thanks-page__body p:last-child{ margin-bottom:0; }
.thanks-page__body a{ color:var(--teal); text-decoration:underline; white-space:nowrap; }
.thanks-page__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:48px; }
@media (max-width: 900px){
  .thanks-page__body{ font-size:15px; line-height:1.9; }
  .thanks-page__actions{ flex-direction:column; gap:12px; margin-top:32px; }
  .thanks-page__actions .btn-pill{ width:100%; }
}