/*
Theme Name: Editing Office Original
Description: Fusion Factory theme (alpha087-like)
Version: 2.2.0
Text Domain: editing-office
*/

/* ================================
  Base
================================ */
:root{
  --ff-max: 1120px;
  --ff-gutter: 28px;
  --ff-border: #e9e9e9;
  --ff-muted: #6b6b6b;
  --ff-text: #111;
  --ff-bg: #fff;
  --ff-yellow: #f2e84a;
  --ff-overlay-bg: rgba(255,255,255,.92);
  --ff-overlay-blur: blur(10px);
  --ff-header-bg: rgba(255,255,255,.92);
  --ff-header-blur: blur(10px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  color:var(--ff-text);
  background:var(--ff-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* 100vw 系のはみ出し保険 */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.65; }

.ff-container{
  max-width:var(--ff-max);
  margin:0 auto;
  padding:0 var(--ff-gutter);
}

/* 固定ヘッダー分の余白（高さに合わせて調整） */
body{ padding-top: 40px; }
@media (max-width: 640px){
  body{ padding-top: 56px; }
}

.ff-main{
  padding-top: 50px;
  padding-bottom: 0px;
}

/* ================================
  Header (fixed + logo + desktop nav + mobile overlay)
================================ */
.ff-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 9999;
  background: var(--ff-header-bg);
  backdrop-filter: var(--ff-header-blur);
  border-bottom: 1px solid #f1f1f1;
}

.ff-header__inner{
  max-width: var(--ff-max);
  margin: 0 auto;
  padding: 12px var(--ff-gutter);
  min-height: 64px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* Brand / Logo */
.ff-brand__link{
  display:flex;
  align-items:center;
  gap:10px;
}
.ff-logo{
  height: 30px; /* 好みで調整OK */
  width: auto;
  display:block;
}
.ff-brand a{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
}

/* Desktop Nav */
.ff-nav--desktop{ display:block; }
.ff-nav .menu{
  display:flex;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}
.ff-nav .menu a{
  font-size:12px;
  letter-spacing:.16em;
}

/* Burger (mobile only) */
.ff-burger{
  display:none; /* PCでは非表示 */
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  position:relative;
  z-index: 10001; /* overlay より上 */
}
.ff-burger span{
  position:absolute;
  left:10px; right:10px;
  height:2px;
  background:#111;
  border-radius:2px;
}
.ff-burger span:nth-child(1){ top:14px; }
.ff-burger span:nth-child(2){ top:21px; }
.ff-burger span:nth-child(3){ top:28px; }

/* Mobile Overlay */
.ff-overlay[hidden]{ display:none !important; }
.ff-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ff-overlay-bg);
  backdrop-filter: var(--ff-overlay-blur);

  /* 上が隠れないように上下にパディング */
  padding: 88px 24px 500px;

  display:flex;
  align-items:flex-start; /* 上から並べやすい */
  justify-content:center;

  /* 長いときはスクロールできるように */
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

/* overlayのクローズ */
.ff-overlay__close{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  color:#111;
}

/* overlay nav */
.ff-overlay__nav{
  width: 100%;
  max-width: 360px;

  display:flex;
  flex-direction:column;
  gap: 14px;
  text-align:center;

  /* 背景を入れて可読性UP（必要なら消してOK） */
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
}

.ff-overlay__nav a{
  font-size: 18px;
  letter-spacing: .08em;
  padding: 10px 0;
}

/* メニュー開いてる時に背面スクロール止める */
body.ff-menu-open{ overflow:hidden; }

@media (max-width: 980px){
  .ff-nav--desktop{ display:none; }
  .ff-burger{ display:block; }
}

/* ================================
  Typography
================================ */
.ff-h1{
  font-size:64px;
  line-height:1.06;
  letter-spacing:.04em;
  font-weight:600;
  margin:0 0 22px;
}
.ff-muted{ color:var(--ff-muted); }
.ff-section{ margin:50px 0; }

/* ================================
  Section Head (title + subtitle style)
  例：Service / サービス内容 の形
================================ */
.ff-sectionHead{
  text-align:center;
  margin: 0 0 34px;
}
.ff-sectionHead__en{
  margin:0 0 10px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: .18em;
  font-weight: 600;
  color: #0aa3ad; /* 黒にしたいなら #111 */
}
.ff-sectionHead__jp{
  margin:0;
  font-size: 14px;
  letter-spacing: .22em;
  color:#777;
}
.ff-sectionLead{
  text-align:center;
  max-width: 56em;
  margin: 0 auto 26px;
  color:#555;
  line-height:2.1;
  letter-spacing:.02em;
}

@media (max-width: 640px){
  .ff-sectionHead__en{
    font-size: 34px;
    letter-spacing: .14em;
  }
  .ff-sectionHead{
    margin-bottom: 26px;
  }
}

/* ================================
  Buttons
================================ */
.ff-btn{
  display:inline-block;
  padding:11px 15px;
  border:1px solid #111;
  background:transparent;
}
.ff-btn--ghost{ border-color:#e7e7e7; }

/* ================================
  TOP HERO (alpha087-like)
================================ */
.ff-top{
  min-height: calc(50vh - 0px);
  display:flex;
  align-items:center;
  padding: 5px 0 5px;
  margin: 0
}

.ff-top__grid{
  max-width: var(--ff-max);
  /* margin: 0 auto;*/
  padding: -1px var(--ff-gutter);

  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 250px;
  align-items:center;
}

/* 左：コピー */
.ff-top__copy{
  position: relative;
  z-index: 3;
  max-width: 620px;
  margin-right: 0px;
}

/* タイトル（画像） */
.ff-heroTitle.is-image{
  margin: 0 0 18px;
  line-height: 0;
}
.ff-heroTitle.is-image img{
  display:block;
  width: 200%;
  max-width: 550px;
  height:auto;
}

/* 導入文 */
.ff-top__sub{
  font-size: 14px;
  line-height: 2.05;
  letter-spacing: 0;
  color:#777;
  max-width: 36em;
}

/* 右：画像 */
.ff-top__visual-wrap{
  justify-self: end;
  width: calc(150% + 300px);
  margin-right: -300px;
}
.ff-top__visual{
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background:#f4f4f4;
  border:1px solid #f0f0f0;
  aspect-ratio: 16 / 10;
  isolation:isolate;
  transform: translateZ(0);
}

/* slides */
.ff-top-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 1.0s ease;
  pointer-events:none;
  backface-visibility:hidden;
  transform: translateZ(0);
}
.ff-top-slide.is-active{
  opacity:1;
  z-index:1;
}
.ff-top-slide img{
  width:100%;
  height:110%;
  object-fit:cover;
  transform: translateZ(0) scale(1.05);
  filter: saturate(.90) contrast(.98) brightness(1.00);
}

/* dots */
.ff-top-dots{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.ff-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.28);
  background: rgba(255,255,255,.95);
  padding:0;
  cursor:pointer;
}
.ff-dot.is-active{
  background:#111;
  border-color:#111;
}

@media (max-width: 980px){
  .ff-h1{ font-size:46px; }
  .ff-section{ margin:86px 0; }

  .ff-top{ min-height:auto; padding: 18px 0 20px; }
  .ff-top__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .ff-top__copy{ margin-right: 0; max-width: 680px; }
  .ff-heroTitle.is-image img{ max-width: 560px; width: 100%; }
  .ff-top__visual-wrap{ width: 100%; margin-right: 0; }
  .ff-top__sub{ font-size: 14px; }
}

@media (max-width: 640px){
  .ff-heroTitle.is-image img{ max-width: 370px; }
}

/* ================================
  Works (grid + pills)
================================ */
#works .ff-muted{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.ff-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 20px;
  justify-content:center;
}
.ff-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border:1px solid #e8e8e8;
  border-radius:999px;
  font-size:12px;
  background:#fff;
}
.ff-pill.is-active{ border-color:#111; }

.ff-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.ff-card{
  border:1px solid #f0f0f0;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.ff-card a{ display:block; }
.ff-card__thumb{ aspect-ratio:4/3; background:#f2f2f2; }
.ff-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(.98) brightness(1.02);
}
.ff-card__body{ padding:13px 13px 15px; }
.ff-card__title{
  margin:0 0 8px;
  font-size:14.5px;
  line-height:1.55;
  letter-spacing:.015em;
}
.ff-card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:var(--ff-muted);
  font-size:11px;
  letter-spacing:.02em;
}
.ff-card a:hover{ opacity:1; }
.ff-card a:hover .ff-card__title{ opacity:.75; }

@media (max-width: 980px){
  .ff-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ff-grid{ grid-template-columns: 1fr; }
}

/* ================================
  Guide (3 cards)
================================ */
#guide .ff-muted{
  max-width: fit-content;
  margin: 0 auto 22px;
}

.ff-guidegrid{
  max-width: var(--ff-max);
  margin: 18px auto 0;
  padding: 0 var(--ff-gutter);

  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.ff-guidecard{
  display:block;
  border:1px solid #f0f0f0;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ff-guidecard__media{
  aspect-ratio: 16 / 9;
  background:#f2f2f2;
}
.ff-guidecard__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ff-guidecard__body{
  padding: 16px 18px 18px;
  text-align:left;
}
.ff-guidecard__label{
  font-size:12px;
  letter-spacing:.14em;
  color:#777;
  margin-bottom:10px;
}
.ff-guidecard__title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:10px;
}
.ff-guidecard__text{
  font-size:13px;
  line-height:2.0;
  letter-spacing:.03em;
  color:#6f6f6f;
}
.ff-guidecard:hover{
  transform: translateY(-2px);
  border-color:#e6e6e6;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.ff-guide__cta{
  text-align:center;
  margin-top:22px;
}

@media (max-width: 980px){
  .ff-guidegrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ff-guidegrid{ grid-template-columns: 1fr; }
}

/* ===============================
   Contact (minimal safe)
================================ */
#contact{ padding: 30px 0 0; text-align:center; }

#contact .ff-muted{
  max-width: 44em;
  margin: 0 auto 22px;
  text-align:center;
}

#contact .ff-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin: 0 auto;
}

/* フォーム外枠は触らない（崩れ防止） */
#contact form,
#contact .wpcf7,
#contact .wpforms-container{
  max-width: 820px;
  margin: 34px auto 0;
}

@media (max-width: 640px){
  #contact{ padding-top: 90px; }
}

/* =========================
   Company (alpha087-like)
========================= */
.ff-company{ padding-top: 30px; }

.ff-company__lead{
  text-align:center;
  font-size:13px;
  letter-spacing:.18em;
  color:#777;
  margin-bottom:48px;
}

.ff-company__wrap{
  max-width: 900px;
  margin: 0 auto;
}

.ff-company__list{
  border-top: 1px solid #eaeaea;
  margin-bottom:48px;
}

.ff-company__row{
  display:grid;
  grid-template-columns: 120px 1fr;
  padding: 18px 0;
  border-bottom:1px solid #eaeaea;
}
.ff-company__row dt{
  font-size:12px;
  letter-spacing:.12em;
  color:#777;
}
.ff-company__row dd{
  font-size:14px;
  line-height:1.9;
  margin:0;
}

.ff-company__map{
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  border-radius:4px;
}
.ff-company__map iframe{
  width:100%;
  height:100%;
  border:0;
}

@media (max-width: 640px){
  .ff-company__row{
    grid-template-columns: 1fr;
    gap:6px;
  }
  .ff-company__row dt{ font-size:11px; }
}
/* =========================================
   ABOUT layout (image-like)
   - Left: copy + small headline + button
   - Right: big rounded visual card
========================================= */

#about{
  position: relative;
  overflow: hidden;
}

/* うっすら背景（波/ドットっぽい雰囲気） */
#about::before{
  content:"";
  position:absolute;
  inset:-120px -120px -120px -120px;
  background:
    radial-gradient(circle at 20% 60%, rgba(0,0,0,.03) 0 2px, transparent 3px) 0 0 / 34px 34px,
    radial-gradient(circle at 70% 30%, rgba(0,0,0,.02) 0 2px, transparent 3px) 0 0 / 44px 44px;
  pointer-events:none;
  z-index:0;
}

/* about中身の2カラム */
#about .ff-aboutgrid{
  position: relative;
  z-index: 1;
  max-width: var(--ff-max);
  margin: 10px auto;
  padding: -1px var(--ff-gutter);

  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

/* 左テキスト */
#about .ff-aboutcopy{
  max-width: 46em;
}

/* 段落は読みやすく */
#about .ff-aboutcopy p{
  margin: 0 0 16px;
  line-height: 2.1;
  color: #555;
  letter-spacing: .02em;
}

/* 小見出し（「あなたのWeb集客を〜」の所） */
#about .ff-aboutlead{
  margin-top: 28px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #111;
}

/* ボタン配置 */
#about .ff-aboutcta{
  margin-top: 22px;
}

/* 右のイラスト：角丸カード */
#about .ff-aboutvisual{
  justify-self: end;
}

#about .ff-aboutvisual .ff-visualcard{
  width: min(560px, 100%);
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #f3f3f3;
  border: 1px solid #efefef;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
}

#about .ff-aboutvisual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* About内の「詳しく見る」ボタンを画像の雰囲気に寄せる（任意） */
#about .ff-btn{
  padding: 14px 18px;
  border-radius: 10px;
  border-color: #cfcfcf;
}
#about .ff-btn:hover{
  opacity: 1;
  border-color: #111;
}

/* responsive */
@media (max-width: 980px){
  #about .ff-aboutgrid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  #about .ff-aboutvisual{
    justify-self: start;
  }
  #about .ff-aboutvisual .ff-visualcard{
    width: min(680px, 100%);
  }
}
/* ===============================
   CONTACT (alpha087-like)
   「デザイン会社にも人柄があります」以降の雰囲気
=============================== */

#contact{
  padding: 30px 0 0;
}

#contact .ff-contact{
  max-width: 820px;               /* alphaっぽい“細め” */
  margin: 0 auto;
  padding: -1px var(--ff-gutter);
}

/* キャッチ（画像でもテキストでもOK） */
#contact .ff-contact__catch{
  margin: 18px 0 24px;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: .06em;
  font-weight: 600;
}

/* キャッチを画像で置く場合 */
#contact .ff-contact__catch.is-image{
  line-height: 0;
}
#contact .ff-contact__catch.is-image img{
  display: block;
  width: 100%;
  max-width: 520px;               /* ここで“らしさ”が決まる */
  height: auto;
}

/* 説明文：alphaの“薄め・行間広め” */
#contact .ff-contact__text{
  font-size: 13.5px;
  line-height: 2.15;
  letter-spacing: .00em;
  color: #777;
  margin: 0 0 22px;
}

/* tel行：少し強め */
#contact .ff-contact__tel{
  display: inline-block;
  font-size: 18px;
  letter-spacing: .08em;
  font-weight: 600;
  margin: 8px 0 18px;
}

/* ボタン：alphaの“控えめ” */
#contact .ff-contact__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: .06em;
}
#contact .ff-contact__btn:hover{
  opacity: 1;
  border-color: #dcdcdc;
}

/* フォームも“細め”で揃える（WPフォーム想定） */
#contact form,
#contact .wpcf7,
#contact .wpforms-container{
  max-width: 820px;
  margin: 34px auto 0;
}

/* スマホ */
@media (max-width: 640px){
  #contact{ padding-top: 50px; }
  #contact .ff-contact__catch{ font-size: 26px; }
  #contact .ff-contact__text{ font-size: 13px; line-height: 2.05; }
}
/* ===============================
   CONTACT 最小安全版（崩れない）
   見出し・本文・ボタンだけ中央
   ※フォームの内部レイアウトは触らない
=============================== */

#contact { text-align:center; }

/* 見出し */
#contact .ff-h2{
  margin-left:auto;
  margin-right:auto;
}

/* 本文（p全体には当てず、ff-mutedのみに限定） */
#contact .ff-muted{
  max-width: 44em;
  margin: 0 auto 22px;
  text-align:center;
}

/* ボタン（テーマのff-btnだけ） */
#contact .ff-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin: 0 auto;
}
/* =========================================
   CONTACT 見出しのズレ修正（中央寄せを統一）
   - 見出し文字：text-align で中央
   - ライン：100vwをviewport中央に
========================================= */

#contact{ text-align:center; }

/* 既存の「left:50% + transform」系を無効化して、ズレを止める */
#contact .ff-h2{
  left: auto !important;
  transform: none !important;

  display: inline-block !important;  /* 親のtext-alignで中央に乗る */
  margin: 0 auto 28px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ライン（文字の上下中央にくる） */
#contact .ff-h2::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 100vw !important;
  height: 2em !important;           /* ここは今の太さのまま */
  background: var#e7e7e7; !important;
  z-index: -1 !important;
}

/* 念のため ::after が残ってたら無効化 */
#contact .ff-h2::after{
  content: none !important;
}
/* ================================
   Footer (alpha087-like minimal)
================================ */
.ff-footer{
  margin-top: 120px;
  border-top: 1px solid #f1f1f1;
  background: transparent;
}

.ff-footer__inner{
  max-width: var(--ff-max);
  margin: 0 auto;
  padding: 26px var(--ff-gutter);
  text-align: center;
}

.ff-footer__copy{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  color: #777;
}

/* モバイルは少し詰める */
@media (max-width: 640px){
  .ff-footer{ margin-top: 90px; }
  .ff-footer__inner{ padding: 20px var(--ff-gutter); }
  .ff-footer__copy{ font-size: 11px; letter-spacing: .10em; }
}
/* =========================================================
   ABOUT PAGE — RESPONSIVE FINAL
========================================================= */

/* ---------- Hero Wrapper ---------- */
.ff-about-hero{
  max-width: var(--ff-max);
  margin: 0 auto;
  padding: -1px var(--ff-gutter) 28px;
}

/* ABOUT eyebrow */
.ff-eyebrow{
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .32em;
  color: #8a8a8a;
}

/* ---------- Layout ---------- */
.ff-about-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: start;
}

/* ---------- Left copy ---------- */
.ff-about-hero__copy{
  max-width: 56ch;
}

/* Main title（優しい印象） */
.ff-about-hero__title{
  margin: 0 0 28px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: .17em;
  color: #222;
  font-family: "Noto Serif JP","Hiragino Mincho ProN",serif;
}

.ff-about-hero__title br{
  display: block;
  margin-bottom: 6px;
}

/* Prose */
.ff-about-hero__prose p{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 2.25;
  letter-spacing: .02em;
  color: #666;
}

/* ---------- Right Image ---------- */
.ff-about-hero__slider-wrap{
  justify-self: end;
  width: 100%;
}

.ff-about-hero__slider{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #f3f3f3;
  border: 1px solid #eee;
  overflow: hidden;
}

/* Slides */
.ff-about-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.ff-about-slide.is-active{
  opacity: 1;
  z-index: 1;
}
.ff-about-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.06);
  filter: saturate(.92) contrast(.98) brightness(1.01);
}

/* Dots */
.ff-slider-dots{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* =========================================================
   Tablet (≤980px)
========================================================= */
@media (max-width: 980px){
  .ff-about-hero__grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ff-about-hero__slider{
    aspect-ratio: 16 / 10; /* 横長で安定 */
  }

  .ff-about-hero__title{
    font-size: 34px;
  }
}

/* =========================================================
   Mobile (≤640px)
========================================================= */
@media (max-width: 640px){
  .ff-about-hero{
    padding: -1px var(--ff-gutter) 18px;
  }

  .ff-about-hero__copy{
    max-width: 100%;
  }

  .ff-about-hero__title{
    font-size: 26px;
    line-height: 1.45;
    letter-spacing: .03em;
    margin-bottom: 22px;
  }

  .ff-about-hero__prose p{
    font-size: 13.5px;
    line-height: 2.1;
  }

  /* スマホでは高さを縛らない */
  .ff-about-hero__slider{
    aspect-ratio: 4 / 5;
  }
}
/* =========================================================
   ABOUT HERO：スマホだけ画像を先に
========================================================= */
@media (max-width: 980px){
  /* 1カラムになった時の並び順を制御 */
  .ff-about-hero__copy{ order: 2; }
  .ff-about-hero__slider-wrap{ order: 1; }
}

/* もし「スマホ(<=640px)だけ」に限定したいなら下に変更
@media (max-width: 640px){
  .ff-about-hero__copy{ order: 2; }
  .ff-about-hero__slider-wrap{ order: 1; }
}
*/
/* =========================================================
   TOP HERO：スマホだけメインビジュアル（画像）を先に
========================================================= */
@media (max-width: 980px){
  /* 1カラムになった時の並び順を制御 */
  .ff-top__visual-wrap{ order: 1; }
  .ff-top__copy{ order: 2; }

  /* 念のため：スマホで画像と文章の間に余白 */
  .ff-top__visual-wrap{ margin-bottom: 18px; }
}
/* =========================================================
   TOP About：スマホだけ
   About → 私たちについて → 画像 → 本文
========================================================= */
@media (max-width: 980px){

  /* About セクション全体を縦積みに */
  #about .ff-aboutgrid{
    display: flex;
    flex-direction: column;
  }

  /* 画像を本文より先に */
  #about .ff-aboutvisual{
    order: 1;
    margin-bottom: 20px;
  }

  /* 本文を後ろに */
  #about .ff-aboutcopy{
    order: 2;
  }
}
/* =========================================
   GUIDE page (mitone-like readability)
   paste at END of style.css
========================================= */

.ff-guide{
  max-width: var(--ff-max);
  margin: 0 auto;
  padding: 20px var(--ff-gutter) 0;
}

.ff-guide-hero{
  padding: 28px 0 8px;
}
.ff-guide-lead{
  margin: 10px auto 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 2.15;
  color: #666;
  letter-spacing: .02em;
  text-align: center;
}

/* 2-col layout */
.ff-guide-grid{
  margin-top: 34px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

/* TOC */
.ff-guide-toc__inner{
  position: sticky;
  top: 88px; /* fixed header + 余白 */
  border: 1px solid #eee;
  background: #fff;
  padding: 16px 14px;
}
.ff-guide-toc__title{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .16em;
  color: #888;
}
.ff-guide-toc__nav{
  display: grid;
  gap: 8px;
}
.ff-guide-toc__nav a{
  display: block;
  padding: 10px 10px;
  border: 1px solid #eee;
  background: #fff;
  font-size: 13px;
  letter-spacing: .06em;
}
.ff-guide-toc__nav a:hover{ opacity: 1; border-color: #ddd; }
.ff-guide-toc__cta{
  margin-top: 6px;
  border-color: #111 !important;
}

/* sections */
.ff-guide-sec{
  margin: 0 0 56px;
}
.ff-guide-sec__head{
  margin: 0 0 16px;
}
.ff-guide-sec__eyebrow{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .28em;
  color: #8a8a8a;
}
.ff-guide-sec__title{
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .10em;
  color: #111;
}
.ff-guide-sec__sub{
  margin: 0;
  font-size: 14px;
  line-height: 2.1;
  color: #666;
}

/* cards */
.ff-guide-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.ff-guide-card{
  border: 1px solid #eee;
  background: #fff;
  padding: 18px 18px 20px;
}

.ff-guide-card__title{
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: .10em;
  color: #111;
}

.ff-guide-list{
  margin: 0;
  padding-left: 1.2em;
  color: #666;
  line-height: 1;
  font-size: 14px;
}
.ff-guide-list li{ margin: 0 0 6px; }

/* price */
.ff-price{
  margin: 0;
}
.ff-price__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}
.ff-price__row:last-child{ border-bottom: 0; }
.ff-price__row dt{
  margin: 0;
  color: #666;
  line-height: 1.8;
}
.ff-price__row dd{
  margin: 0;
  color: #111;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ff-guide-note{
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 2.0;
  color: #888;
}

/* flow */
.ff-flow{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  border-top: 1px solid #eee;
}
.ff-flow__item{
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #eee;
}
.ff-flow__num{
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  color: #888;
}
.ff-flow__body h4{
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: .08em;
  color: #111;
}
.ff-flow__body p{
  margin: 0;
  font-size: 14px;
  line-height: 2.05;
  color: #666;
}
.ff-guide-cta{
  margin-top: 18px;
}

/* faq */
.ff-faq{
  margin-top: 16px;
  border-top: 1px solid #eee;
}
.ff-faq__item{
  border-bottom: 1px solid #eee;
  padding: 14px 0;
}
.ff-faq__item summary{
  cursor: pointer;
  font-size: 14px;
  letter-spacing: .06em;
  color: #111;
  list-style: none;
}
.ff-faq__item summary::-webkit-details-marker{ display: none; }
.ff-faq__body{
  margin-top: 10px;
  color: #666;
  line-height: 2.05;
  font-size: 14px;
}

/* =========================
   Responsive
   - mobile: image-first とは違い、Guideは "TOC → body" じゃなく
     TOCを上にして読みやすく（もしくは非表示でもOK）
========================= */
@media (max-width: 980px){
  .ff-guide-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ff-guide-toc__inner{
    position: relative;
    top: auto;
  }
  .ff-guide-cards{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ff-guide-lead{
    text-align: left;
    margin-top: 8px;
  }
  .ff-guide-sec__title{
    font-size: 22px;
    letter-spacing: .08em;
  }
  .ff-flow__item{
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }
}
/* =========================================
   WORKS PAGE — list style (redcloudworks-like)
   ※既存 works_grid (.ff-grid/.ff-card) を“縦羅列”へ
========================================= */

/* Worksページ全体の余白 */
.ff-worksPage{ 
	padding-bottom: 80px;
    padding-top: 20px;
}
.ff-worksHead{ margin: 18px 0 26px; }

/* 3列グリッド → 1列の縦リストへ */
.ff-worksList .ff-grid{
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* カードを「横並び」(左:画像 / 右:本文) に */
.ff-worksList .ff-card{
  border-radius: 0;
  border-color: #eee;
}

.ff-worksList .ff-card a{
  display: flex;
  gap: 18px;
  align-items: stretch;
  padding: 14px;
}

/* サムネ：固定幅＋比率 */
.ff-worksList .ff-card__thumb{
  flex: 0 0 260px;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f2f2f2;
}

/* 本文 */
.ff-worksList .ff-card__body{
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ff-worksList .ff-card__title{
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .04em;
  margin: 0 0 10px;
}

/* meta（タグ/カテゴリ/年など）を“軽め”に */
.ff-worksList .ff-card__meta{
  font-size: 12px;
  color: #888;
  letter-spacing: .08em;
  gap: 10px;
}

/* hover：薄く持ち上げる（好みで消してOK） */
.ff-worksList .ff-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ff-worksList .ff-card:hover{
  transform: translateY(-1px);
  border-color: #e6e6e6;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.ff-worksList .ff-card a:hover{ opacity: 1; }

/* -----------------------------------------
   Responsive
----------------------------------------- */
@media (max-width: 980px){
  .ff-worksList .ff-card a{
    padding: 12px;
    gap: 14px;
  }
  .ff-worksList .ff-card__thumb{
    flex-basis: 42%;
  }
}

@media (max-width: 640px){
  /* スマホは“画像が先 → 本文”に縦積み */
  .ff-worksList .ff-card a{
    flex-direction: column;
    gap: 12px;
  }
  .ff-worksList .ff-card__thumb{
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .ff-worksList .ff-card__title{
    font-size: 15px;
  }
}
/* =========================================
   CONTACT PAGE — CF7 styling (safe)
========================================= */

.ff-contactPage{ padding-bottom: 90px; }
.ff-formWrap{
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid #eee;
  padding: 22px;
  background: #fff;
}

/* CF7 basic */
.ff-formWrap .wpcf7 form{ margin: 0; }
.ff-formWrap .wpcf7 p{ margin: 0 0 14px; }

.ff-formWrap label{
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  color: #777;
  margin: 0 0 8px;
}

.ff-formWrap input[type="text"],
.ff-formWrap input[type="email"],
.ff-formWrap input[type="tel"],
.ff-formWrap select,
.ff-formWrap textarea{
  width: 100%;
  border: 1px solid #e7e7e7;
  padding: 12px 12px;
  font-size: 14px;
  line-height: 1.7;
  background: #fff;
  outline: none;
}

.ff-formWrap textarea{ min-height: 160px; resize: vertical; }

.ff-formWrap input:focus,
.ff-formWrap select:focus,
.ff-formWrap textarea:focus{
  border-color: #cfcfcf;
}

/* submit button */
.ff-formWrap input[type="submit"]{
  width: 100%;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  padding: 14px 16px;
  font-size: 13px;
  letter-spacing: .12em;
  cursor: pointer;
}
.ff-formWrap input[type="submit"]:hover{ opacity: .85; }

/* message */
.ff-formWrap .wpcf7-response-output{
  margin: 16px 0 0;
  padding: 12px;
  border: 1px solid #eee;
  color: #666;
}
.ff-formWrap .wpcf7-not-valid-tip{
  font-size: 12px;
  margin-top: 6px;
}

/* responsive */
@media (max-width: 640px){
  .ff-formWrap{ padding: 16px; }
}
/* 固定ページ共通（contact含む） */
.ff-page{
  padding: 36px 0 80px;
}

.ff-page__head{
  margin: 24px 0 22px;
}

.ff-page__title{
  margin: 0;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: .02em;
}

.ff-page__content{
  font-size: 14px;
  line-height: 2.1;
  color: #555;
}

/* スマホ */
@media (max-width: 640px){
  .ff-page{ padding: 22px 0 70px; }
  .ff-page__title{ font-size: 30px; }
}
/* ================================
   WORK single 
================================ */
.ff-work{
  padding: 26px 0 0;
}

.ff-work__head{
  max-width: 760px;
  margin: 0 auto 26px;
}

.ff-work__eyebrow{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .32em;
  color: #8a8a8a;
}

.ff-work__title{
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.32;
  font-weight: 400;
  letter-spacing: .02em;
  color: #222;
  font-family: "Noto Serif JP","Hiragino Mincho ProN",serif;
}

.ff-work__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  font-size: 13px;
  letter-spacing: .04em;
  color:#777;
  line-height: 1.8;
}

.ff-work__tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border: 1px solid #eee;
  color:#666;
  background:#fff;
}

.ff-work__link{
  border-bottom: 1px solid rgba(0,0,0,.18);
}

.ff-work__mv{
  max-width: 760px;   /* ← 本文と同じ */
  margin: 34px auto 0;
  background:#f3f3f3;
  border: 1px solid #eee;
  overflow:hidden;
}


.ff-work__mv img{
  width:100%;
  height:auto;
  display:block;
}

.ff-work__body{
  max-width: 760px;
  margin: 34px auto 0;
}

.ff-work__content{
  font-size: 14px;
  line-height: 2.25;
  color:#666;
  letter-spacing: .02em;
}

.ff-work__content p{
  margin: 0 0 18px;
}

.ff-work__content h2{
  margin: 44px 0 14px;
  font-size: 18px;
  letter-spacing: .12em;
  color:#222;
}

.ff-work__content h3{
  margin: 34px 0 12px;
  font-size: 15px;
  letter-spacing: .10em;
  color:#222;
}

.ff-work__nav{
  margin-top: 42px;
}

@media (max-width: 640px){
  .ff-work__title{
    font-size: 30px;
    line-height: 1.38;
  }
  .ff-work__mv{
    margin-top: 22px;
  }
  .ff-work__body{
    margin-top: 24px;
  }
  .ff-work__content{
    font-size: 13.5px;
    line-height: 2.15;
  }
}
/* ===============================
   Work single: Client Card 
=============================== */
.ff-clientCard{
  max-width: 760px;          /* 本文幅に合わせる */
  margin: 44px auto 0;
}

.ff-clientCard__inner{
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  padding: 26px 26px 24px;
}

.ff-clientCard__mark{
  position: absolute;
  left: 18px;
  top: 14px;
  font-size: 44px;
  line-height: 1;
  color: rgba(0,0,0,.18);
  font-family: ui-serif, "Noto Serif JP", serif;
}

.ff-clientCard__body{
  padding-left: 44px; /* “ の分 */
}

.ff-clientCard__label{
  font-size: 12px;
  letter-spacing: .14em;
  color: #8a8a8a;
  margin-bottom: 10px;
}

.ff-clientCard__link{
  display: inline-block;
  font-size: 14px;
  letter-spacing: .04em;
  color: #444;
  border-bottom: 1px solid rgba(0,0,0,.18);
  padding-bottom: 2px;
}
.ff-clientCard__link:hover{
  opacity: .7;
}

/* mobile */
@media (max-width: 640px){
  .ff-clientCard{ margin-top: 34px; }
  .ff-clientCard__inner{ padding: 22px 18px; }
  .ff-clientCard__body{ padding-left: 40px; }
}
/* =========================================
   About: 編集方針 → 2カラム本文 → 画像
========================================= */

.ff-about-essay{
  margin-top: 34px;
  padding-top: 6px;
}

/* 見出し（スクショみたいに余白がある一行） */
.ff-about-essay__lead{
  font-family: "Noto Serif JP","Hiragino Mincho ProN",serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.55;
  letter-spacing: .12em;
  color: #222;
  margin: 0 0 22px;
}

/* 2カラム本文 */
.ff-about-essay__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
  max-width: 980px; /* ちょい細めでmitone感 */
}

.ff-about-essay__col p{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 2.35;   /* 余白感の肝 */
  letter-spacing: .04em;
  color: #666;
}

/* 画像（本文幅に合わせて揃える） */
.ff-about-shot{
  margin: 42px 0 0;
  max-width: 980px; /* 上の2カラムと同じ幅 */
}

.ff-about-shot img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;         /* mitone寄せ：角はシャープ */
  border: 1px solid #eee;
  background: #f3f3f3;
}

/* レスポンシブ：スマホは1カラム＋余白調整 */
@media (max-width: 980px){
  .ff-about-essay__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ff-about-essay__lead{
    font-size: 22px;
    margin-bottom: 16px;
  }
  .ff-about-shot{
    margin-top: 26px;
  }
}
/* =========================================
   About / 編集方針（1カラム・幅揃え・mitone寄せ）
   ※ .ff-about-block 内だけに適用
========================================= */

/* セクション全体の“本文幅”を揃える */
.ff-about-block{
  --about-w: 980px;                /* ← ここで幅を揃える（900〜1040で調整可） */
}

.ff-about-block .ff-about-h,
.ff-about-block .ff-about-kicker,
.ff-about-block .ff-about-prose{
  max-width: var(--about-w);
  margin-left: 0px;
  margin-right: auto;
}

/* 見出し：字間を少し広め＋軽め（mitoneっぽく） */
.ff-about-block .ff-about-h{
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans",
    "Noto Sans JP","Yu Gothic","YuGothic","Meiryo", sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .24em;
  line-height: 1.35;
  margin: 0 0 10px;
  color: #111;
}

/* キッカー：小さめ・薄め・余白多め */
.ff-about-block .ff-about-kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans",
    "Noto Sans JP","Yu Gothic","YuGothic","Meiryo", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .18em;
  color: #7a7a7a;
  margin: 0 0 22px;               /* ← 余白感 */
}

/* 本文：行間を広く・文字をやわらかく */
.ff-about-block .ff-about-prose p{
  margin: 0 0 18px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans",
    "Noto Sans JP","Yu Gothic","YuGothic","Meiryo", sans-serif;
  font-size: 14px;
  line-height: 2.35;              /* ← “余白感の肝” */
  letter-spacing: .04em;
  color: #666;
}

/* 文章の最後だけ余白を詰める（だらっとならない） */
.ff-about-block .ff-about-prose p:last-child{
  margin-bottom: 0;
}

/* スマホ：幅はそのまま、文字だけ少し調整 */
@media (max-width: 640px){
  .ff-about-block .ff-about-h{
    font-size: 20px;
    letter-spacing: .20em;
  }
  .ff-about-block .ff-about-kicker{
    font-size: 12.5px;
    margin-bottom: 18px;
  }
  .ff-about-block .ff-about-prose p{
    font-size: 13.5px;
    line-height: 2.2;
  }
}
/* =========================================
   About / 思想フレーム（枠で囲う）
========================================= */

.ff-about-frame{
  max-width: 980px;
  margin-top: 20px;
  /*margin: 0 auto 120px;*/
  padding: 56px 64px;

  border: 1px solid #e9e9e9;
  background: rgba(255,255,255,.85);

  /* 角を立てすぎない */
  border-radius: 4px;
}

/* タイトル */
.ff-about-frame__title{
  margin: 0 0 28px;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.4;
  color: #111;

  font-family: "Noto Serif JP","Hiragino Mincho ProN",serif;
}

/* 本文 */
.ff-about-frame__body p{
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 2.35;
  letter-spacing: .04em;
  color: #666;

  font-family: ui-sans-serif, system-ui, -apple-system,
    "Hiragino Sans","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",sans-serif;
}

.ff-about-frame__body p:last-child{
  margin-bottom: 0;
}

/* スマホ */
@media (max-width: 640px){
  .ff-about-frame{
    padding: 36px 22px;
    margin-bottom: 30px;
  }

  .ff-about-frame__title{
    font-size: 22px;
    letter-spacing: .10em;
    margin-bottom: 22px;
  }

  .ff-about-frame__body p{
    font-size: 13.5px;
    line-height: 2.2;
  }
}
/* =========================================
   About / 思想フレーム 中身2カラム
========================================= */

.ff-about-frame__columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 48px;
}

/* 各カラム */
.ff-about-frame__col p{
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 2.35;
  letter-spacing: .04em;
  color: #666;
}

.ff-about-frame__col p:last-child{
  margin-bottom: 0;
}

/* スマホ：1カラムに戻す */
@media (max-width: 640px){
  .ff-about-frame__columns{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ff-about-frame__col p{
    font-size: 13.5px;
    line-height: 2.2;
  }
}
.ff-price {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 12px;
}

.ff-price__group {
  display: contents;
}

/* 見出し（2カラム貫通） */
.ff-price__heading {
  grid-column: 1 / -1;
  font-weight: 600;
  padding-top: 24px;
  border-top: 1px solid #eee;
}

/* 注釈（見出し直下・2カラム） */
.ff-price__note {
  grid-column: 1 / -1;
  font-size: 0.85em;
  color: #777;
  margin-bottom: 8px;
}

/* 左：項目名 */
.ff-price dt {
  margin: 0;
}

/* 右：価格 */
.ff-price dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
/* ===== スマホだけ：TOP（Aboutより上）をセンター＆縦積みにする ===== */
@media (max-width: 768px) {

  /* TOPセクション内のはみ出し対策 */
  .ff-top { overflow-x: hidden; }
  .ff-top img { max-width: 100%; height: auto; display: block; }

  /* 2カラム → 1カラム（縦積み） */
  .ff-top__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;  /* これで中身がセンター寄せ */
  }

  /* コピー側（テキストセンター） */
  .ff-top__copy{
    text-align: center;
    width: 100%;
    max-width: 36rem; /* 好みで調整/削除OK */
    margin: 0 auto;
  }

  /* タイトル画像（h1のSVG）をセンター */
  .ff-heroTitle{
    display: flex;
    justify-content: center;
  }
  .ff-heroTitle img{
    width: min(520px, 92vw);  /* 大き過ぎ防止 */
    margin: 0 auto;
  }

  /* スライダー側もセンターに寄せて幅を制御 */
  .ff-top__visual-wrap{
    width: 100%;
    max-width: 560px;  /* 好みで調整OK */
    margin: 0 auto;
  }
  .ff-top__visual{
    width: 100%;
  }
  .ff-top-slide img{
    width: 100%;
    height: auto;
  }

  /* ドットも中央 */
  .ff-top-dots{
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}
/* ===== FIX: スマホだけ TOP を崩さずセンターにする（決定版） ===== */
@media (max-width: 768px){

  /* PC用の“はみ出し演出”をスマホで無効化 */
  .ff-top__grid{
    gap: 16px !important;          /* 250px を潰す */
    padding: 0 var(--ff-gutter) !important; /* -1px を潰す */
  }

  .ff-heroTitle.is-image img{
    width: 100% !important;        /* 200% を潰す */
    max-width: 370px !important;   /* 640pxルールと整合 */
    margin: 0 auto !important;
  }

  .ff-top__visual-wrap{
    width: 100% !important;        /* calc(150% + 300px) を潰す */
    margin-right: 0 !important;    /* -300px を潰す */
    justify-self: center !important;
  }

  /* 画像の高さ指定が強すぎると崩れることがあるのでスマホは自然に */
  .ff-top-slide img{
    height: auto !important;       /* 110% を潰す */
    object-fit: cover;
  }

  /* センター寄せ（見た目の目的） */
  .ff-top__copy{ text-align: center; margin: 0 auto; }
  .ff-top__sub{ margin-left: auto; margin-right: auto; }
}