@charset "UTF-8";
/* =========================================================
   Apricot Design 2026 Renewal — このサイト固有の上書き
   土台は base.css（白×黒×薄グレー／Outfit＋Noto Sans JP）。
   ここでは「本文16px・最小12px・字間」と、アプリコット独自の型だけを足す。
   ========================================================= */

/* ---------- 文字の基準：本文16px・最小12px・字間を少し広く ---------- */
body{font-size:16px;letter-spacing:.04em;line-height:1.9;}
.prose{font-size:16px;}
.card__meta,.crumb,.index-no,.hero__scroll,.menu__no,.footer__bottom,.gate-card__no,.feature-card__label,
.store__tag,.event-card__cat,.event-card__date,.hero__news-label,.hero__news-date,.hero__news-all,
.form__req,.form__opt,.cat,.tag,.article__meta,.post-nav__label,.promise-card__label,.flow__no,.chip-row__label{font-size:12px;}
.card__meta{letter-spacing:.1em;}
.nav a{font-size:13px;}
.btn,.btn-outline,.arrow-link{font-size:13px;}
.menu__meta{font-size:14px;}
.footer__addr{font-size:14px;}
.footer__note{font-size:13px;}
.footer__nav a,.footer__sns a,.footer__h{font-size:14px;}
.card__text{font-size:14px;}
.concept__lead{font-size:15px;}
.hero__sub{font-size:15px;}
@media (max-width:680px){
  body{font-size:15px;}
  .prose{font-size:15px;line-height:2;}
  .article__body p{font-size:15px;line-height:1.95;}
  .page-sec-head .h-display{font-size:15px;}
}

/* ---------- ヘッダー：ロゴの高さ（横長ロゴ） ---------- */
.brand img{height:clamp(22px,2.2vw,30px);}
.header.is-scrolled .brand img{height:clamp(20px,1.9vw,26px);}
.menu__brand img,.footer__logo img{height:auto;width:180px;}

/* ---------- トップ：サービス（3:4の写真カード横スクロール） ---------- */
.service .shop-carousel{margin-top:clamp(24px,3vw,40px);}
.service .event__vtitle{top:-320px;}
.svc-card__jp{display:block;font-size:15px;font-weight:600;letter-spacing:.06em;margin-bottom:.4em;text-shadow:0 1px 8px rgba(0,0,0,.5);}
.svc-card .shop-card__catch{font-weight:400;font-size:14px;}
.svc-card .shop-card__overlay::before{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 55%);}

/* ---------- トップ：制作実績（16:9のサムネ） ---------- */
.card__media--works img{aspect-ratio:16/9;object-fit:cover;}
.works .card__text{margin-top:.4em;}

/* ---------- 下層：見出し（英字大・和文小）の小さい版 ---------- */
.page-sec-head .lead-eyebrow--sm{font-size:clamp(1.4rem,3vw,32px);}
.page-sec-head .h-display--strong{font-size:clamp(1.2rem,2vw,26px);color:var(--ink);font-weight:600;line-height:1.6;}
.media-split .page-sec-head{margin-bottom:clamp(18px,2vw,28px);}
.media-split .prose{max-width:none;}

/* ---------- 会社概要・アクセス ---------- */
.outline{padding-top:0;}
.outline__table{max-width:900px;margin-inline:auto;}
.outline__table td:first-child{width:28%;}
.office-grid{align-items:start;}
.access-how h3{font-family:var(--font-en);font-size:14px;letter-spacing:.12em;margin-top:1.2em;}

/* ---------- 汎用ページ：写真なしの見出し ---------- */
.page-hero__copy--plain .page-hero__title{margin:0;font-size:clamp(1.8rem,4vw,52px);}
.article--wide{max-width:900px;}
.article__body img{max-width:100%;height:auto;}
.article__body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px;}
.article__body th,.article__body td{border-bottom:1px solid var(--line);padding:.8em .6em;text-align:left;vertical-align:top;}

/* ---------- 一覧 ---------- */
.mag-pgr .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:100px;font-family:var(--font-en);font-size:14px;color:var(--ink);}
.mag-pgr .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ---------- 時計は初期テキストを持たないので、JSが動くまで非表示 ---------- */
.hero__time:empty{visibility:hidden;}

/* ---------- トップ：コンセプトの見出し（7文字が1行に収まる大きさ） ---------- */
.concept__catch{font-size:clamp(1.8rem,3.1vw,2.7rem);letter-spacing:.06em;line-height:1.4;}
@media (max-width:860px){ #concept .concept__catch{font-size:34px;line-height:1.5;} }

/* ---------- SP：縦書きの SERVICE はカードに重なるので、横書きで上に置く ---------- */
@media (max-width:680px){
  .service{padding-top:120px;}
  .service .event__vtitle{position:static;writing-mode:horizontal-tb;display:block;font-size:48px;margin-bottom:24px;}
  .service .event__note{margin-bottom:28px;}
}

/* =========================================================
   サービス（一覧・詳細）
   ========================================================= */
.page-hero__en{display:block;font-family:var(--font-en);font-size:clamp(1rem,1.6vw,20px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .4em -30px;}
.page-service .page-hero__title,.page-service-index .page-hero__title{font-size:clamp(2rem,4.6vw,64px);}
.page-service .page-hero__sub{font-size:clamp(1rem,1.5vw,20px);color:var(--ink);font-weight:500;}
.prose--center{max-width:64ch;margin-inline:auto;text-align:center;margin-bottom:clamp(32px,4vw,56px);}
.band{background:var(--paper-2);}
.note-text{max-width:64ch;margin:clamp(20px,2.4vw,32px) auto 0;font-size:14px;color:var(--ink-2);line-height:1.9;}

/* 箇条書き（2列・丸い点） */
.list-dots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px;max-width:980px;margin-inline:auto;}
.list-dots li{position:relative;padding:.55em 0 .55em 1.5em;border-bottom:1px solid var(--line);font-size:16px;line-height:1.8;}
.list-dots li::before{content:"";position:absolute;left:.2em;top:1.25em;width:7px;height:7px;border-radius:50%;background:var(--ink);}
@media (max-width:680px){ .list-dots{grid-template-columns:1fr;gap:4px;} .list-dots li{font-size:15px;} }

/* 考え方・進め方の物語（写真＋文の交互） */
.story-list .store__media{aspect-ratio:3/2;}
.story-list .store__catch{font-size:clamp(1.15rem,1.8vw,24px);}
.store__text{font-size:16px;}
.store__body .price-table{margin-top:1.4em;max-width:420px;}

/* 特徴カード */
.feature-grid .feature-card{text-align:left;}
.feature-card__label{font-family:var(--font-en);font-size:14px;letter-spacing:.14em;color:var(--ink-2);}
.feature-card__title{font-size:clamp(1rem,1.3vw,18px);}
.feature-card__text{font-size:15px;line-height:1.9;}
.feature-card__text.is-lead{font-weight:700;color:var(--ink);}
/* STEP の札：黒い丸を、箱の左上から少しはみ出させる（全ページ共通・2026-11-13） */
.has-step{position:relative;overflow:visible;}
.step-badge{position:absolute;top:-22px;left:-14px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:var(--ink);font-family:var(--font-en);line-height:1;color:#fff;}
.step-badge__en{font-size:10px;letter-spacing:.14em;}
.step-badge__no{margin-top:4px;font-size:22px;font-weight:500;letter-spacing:.02em;}
.feature-card.has-step{padding-top:clamp(52px,4.6vw,64px);}
@media (max-width:680px){.step-badge{left:-8px;width:60px;height:60px;}.step-badge__no{font-size:19px;}}
/* 流れの段：線の上の「STEP 01」をやめ、箱にして左上に丸の札（番号は CSS の counter） */
.flow{gap:clamp(36px,3vw,44px) clamp(24px,2.4vw,32px);padding-top:22px;}
.flow__step{position:relative;border:1px solid var(--line);border-radius:12px;padding:clamp(48px,4vw,56px) clamp(18px,1.6vw,24px) clamp(22px,2vw,28px);background:var(--paper);}
.band .flow__step{border-color:var(--paper);}
.flow__no{position:absolute;top:-22px;left:-14px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:var(--ink);font-family:var(--font-en);line-height:1;color:#fff;}
.flow__no::before{counter-increment:none;content:"STEP";font-size:10px;letter-spacing:.14em;}
.flow__no::after{counter-increment:flow;content:counter(flow,decimal-leading-zero);margin-top:4px;font-size:22px;font-weight:500;letter-spacing:.02em;}
.flow__en{margin-top:0;}
/* STEP の箱の見出しに3pxの下線（2026-11-13） */
.feature-card.has-step .feature-card__title,.flow__label{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.4em;text-decoration-skip-ink:none;}
.feature-card.has-step .feature-card__title{margin-bottom:.9em;line-height:1.7;}
@media (max-width:680px){.flow__no{left:-8px;width:60px;height:60px;}.flow__no::after{font-size:19px;}}
/* 運用支援のマイページ：上に箱がないので、丸の札を見出しの上に置く */
.op-mp__step .op-mp__pill{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:0;line-height:1;letter-spacing:0;}
.op-mp__step .op-mp__pill::before{content:"STEP";font-size:10px;font-weight:400;letter-spacing:.14em;}
.op-mp__step .op-mp__pill b{margin-top:4px;font-size:21px;font-weight:500;letter-spacing:.02em;}
.band .feature-card{background:var(--paper);border-color:var(--paper);}
.band .feature-card:hover{background:var(--paper);}

/* 流れ */
.flow{gap:clamp(18px,2vw,28px);}
.flow__en{display:block;font-family:var(--font-en);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:.5em;}
.flow__label{font-size:clamp(1rem,1.2vw,18px);}
.flow__text{font-size:14px;color:var(--ink-2);line-height:1.85;margin-top:.6em;}

/* 料金 */
.plan-grid{align-items:stretch;}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;}
.plan__label{font-family:var(--font-en);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);}
.plan__name{font-size:clamp(1.1rem,1.4vw,20px);font-weight:600;margin:.5em 0 .3em;}
.plan__price{font-family:var(--font-en);font-size:clamp(1.6rem,2.4vw,34px);font-weight:600;letter-spacing:.01em;line-height:1.2;}
.plan__for{font-size:14px;color:var(--ink);margin-top:.9em;}
.plan__period{font-size:13px;color:var(--ink-2);margin-top:.3em;}
.plan__items{margin-top:1.2em;padding-top:1.2em;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.4em;}
.plan__items li{position:relative;padding-left:1.2em;font-size:15px;line-height:1.7;}
.plan__items li::before{content:"";position:absolute;left:0;top:.95em;width:.6em;height:1px;background:var(--ink);}
.price-table{max-width:900px;margin-inline:auto;background:var(--paper);}
.price-table td{font-family:var(--font);font-size:15px;text-transform:none;letter-spacing:.02em;color:var(--ink);padding:1em 1.2em;}
.price-table td:first-child{font-weight:500;width:64%;}
.price-table td:last-child{font-family:var(--font-en);font-weight:600;color:var(--ink);white-space:nowrap;}
.price-block{max-width:900px;margin:clamp(40px,5vw,64px) auto 0;}
.price-block__h{font-size:clamp(1.05rem,1.4vw,20px);font-weight:600;margin:.2em 0 .9em;}
.price-block .lead-eyebrow--sm{font-size:12px;letter-spacing:.2em;margin-bottom:.2em;}
.plan-feed{max-width:900px;margin:clamp(24px,3vw,40px) auto 0;}
.plan-feed table{width:100%;border-collapse:collapse;background:var(--paper);font-size:15px;}
.plan-feed th,.plan-feed td{border-bottom:1px solid var(--line);padding:.9em 1em;text-align:left;vertical-align:top;}
.plan-feed th{font-weight:600;background:var(--paper-2);}
.faq-wrap{max-width:900px;margin-inline:auto;}
.faq__q{font-size:16px;}
.faq__a{font-size:15px;}
@media (max-width:680px){
  .page-hero__en{margin-left:0;}
  .page-service .page-hero__sub{font-size:15px;}
  .price-table td:first-child{width:auto;}
  .price-table td:last-child{white-space:normal;}
}

/* ---------- 下層ヒーロー：英字ラベルは見出しの下 ---------- */
.page-hero__en{margin:.5em 0 0 -30px;}
.page-service .page-hero__sub{margin-top:.6em;}

/* ---------- FAQ：折りたたみ（summary を質問に） ---------- */
details.faq__item summary{cursor:pointer;list-style:none;position:relative;padding-right:2.2em;}
details.faq__item summary::-webkit-details-marker{display:none;}
details.faq__item summary::after{content:"+";position:absolute;right:.2em;top:50%;transform:translateY(-50%);font-family:var(--font-en);font-weight:400;font-size:1.4em;color:var(--ink-2);transition:transform .3s var(--ease);}
details.faq__item[open] summary::after{content:"−";}

/* =========================================================
   実績・ジャーナル
   ========================================================= */
.filter{max-width:1100px;margin:0 auto clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:14px;}
.chip-row--center{justify-content:center;}
.chip{font-size:14px;padding:.5em 1.1em;}
.chip--sm{font-size:13px;padding:.4em .95em;}
.chip__n{font-family:var(--font-en);font-size:12px;margin-left:.5em;opacity:.6;}
.filter__count{font-family:var(--font-en);font-size:13px;letter-spacing:.1em;color:var(--ink-2);text-align:right;}
.cat--jp{font-family:var(--font);text-transform:none;letter-spacing:.04em;}
.card__meta .cat--jp{color:var(--ink-2);}
.works-video{width:100%;height:100%;object-fit:cover;display:block;}

/* 実績 詳細 */
.page-hero__media--wide{aspect-ratio:16/9;}
.page-hero__title--work{font-size:clamp(1.8rem,3.6vw,48px);margin-top:-60px;}
.page-work .page-hero__sub{font-size:14px;letter-spacing:.06em;}
.work-concept{max-width:900px;margin-inline:auto;}
.work-concept__h{font-size:clamp(1.25rem,2.2vw,30px);font-weight:600;line-height:1.6;letter-spacing:.04em;margin-bottom:1.2em;}
.work-concept__body{max-width:none;}
.work-data{max-width:900px;margin-inline:auto;}
.work-data td{font-family:var(--font);font-size:15px;text-transform:none;letter-spacing:.02em;color:var(--ink);}
.work-data td:first-child{width:26%;font-weight:500;color:var(--ink-2);}
.work-data a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.work-data a.store__link{text-decoration:none;}
.work-mockups{display:grid;grid-template-columns:3fr 1fr;gap:clamp(20px,2.4vw,32px);align-items:start;margin-bottom:clamp(20px,2.4vw,32px);}
.work-mockups figure{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper-2);}
.work-mockups img{width:100%;height:auto;display:block;}
.work-images{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);max-width:1100px;margin-inline:auto;}
.work-images__item img{width:100%;height:auto;display:block;border-radius:4px;}
@media (max-width:680px){ .work-mockups{grid-template-columns:1fr;} .page-hero__title--work{margin-top:-30px;} }

/* ジャーナル 記事 */
.article__meta .cat{color:var(--ink);}
.article__credit{font-size:14px;}
.mag-writer__avatar--sm{width:32px;height:32px;}
.toc{border:1px solid var(--line);border-radius:12px;padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);margin:0 0 clamp(32px,4vw,48px);}
.toc__h{display:block;font-family:var(--font-en);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.8em;}
.toc__list{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:.45em;}
.toc__item{counter-increment:toc;font-size:15px;line-height:1.6;display:flex;gap:.7em;}
.toc__item::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-en);font-size:12px;letter-spacing:.08em;color:var(--ink-2);flex:none;padding-top:.25em;}
.toc__item--h3{padding-left:1.6em;font-size:14px;color:var(--ink-2);}
.toc__item--h3::before{content:"–";}
.toc a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s var(--ease);}
.toc a:hover{border-color:var(--ink);}
.article__body{font-size:16px;line-height:2;}
.article__body p{font-size:16px;}
.article__body h2{scroll-margin-top:100px;}
.article__body h3{scroll-margin-top:100px;}
.article__body img{height:auto;border-radius:4px;margin:1.6em 0;}
.article__body iframe{max-width:100%;}
.article__author-link{margin-top:.8em;font-size:12px;}
.related-sec .card__title{font-size:16px;}

/* ランキング（土台の rank-card を使う。スタンプ画像は無いので数字だけ） */
.rank-card__badge{background:var(--paper);border:1px solid var(--line);border-radius:50%;--badge:clamp(56px,4.6vw,72px);}
.rank-card__num{font-size:clamp(20px,1.8vw,28px);}
.rank-card__title{font-size:16px;}
.rank-card__meta{font-size:12px;}
.rank-card__media img{width:100%;height:100%;object-fit:cover;}
.band.ranking{padding-top:var(--sec-pad);}

/* ---------- サムネは16:9（アイキャッチに文字が入っているので切らない） ---------- */
.card__media img{aspect-ratio:16/9;object-fit:cover;}
.rank-card{flex-basis:clamp(280px,26vw,360px);}
.rank-card__media{aspect-ratio:16/9;}
/* 実績のモックアップは枠の中でスクロール（縦長の全画面キャプチャのため） */
.work-mockups figure{max-height:640px;overflow:auto;scrollbar-width:thin;}

/* =========================================================
   お問い合わせ・資料請求（Contact Form 7）・代表メッセージ
   ========================================================= */
.ct-hero{padding-bottom:0;}
.contact-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);max-width:900px;margin:clamp(32px,4vw,48px) auto clamp(48px,6vw,80px);}
.contact-way{display:flex;flex-direction:column;gap:.3em;border:1px solid var(--line);border-radius:14px;padding:clamp(20px,2.4vw,30px);transition:background .3s var(--ease);}
.contact-way:hover{background:var(--paper-2);}
.contact-way__label{font-family:var(--font-en);font-size:12px;letter-spacing:.16em;color:var(--ink-2);}
.contact-way__value{font-size:clamp(1.1rem,1.6vw,22px);font-weight:600;}
.contact-way__note{font-size:13px;color:var(--ink-2);}
.form{max-width:760px;}
.cf7-field{margin-bottom:clamp(22px,2.4vw,32px);}
.cf7-field > label{display:flex;align-items:center;gap:.7em;font-weight:600;font-size:15px;margin-bottom:.7em;}
.cf7-field .req,.cf7-field .opt{font-family:var(--font-en);font-size:12px;letter-spacing:.06em;border-radius:3px;padding:.3em .6em;font-weight:500;}
.cf7-field .req{color:var(--paper);background:var(--ink);}
.cf7-field .opt{color:var(--ink-2);border:1px solid var(--line);}
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 select,.wpcf7 textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.9em 1em;transition:border-color .3s var(--ease);}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{outline:none;border-color:var(--ink);}
.wpcf7 textarea{min-height:180px;resize:vertical;}
.wpcf7-list-item{display:inline-flex;align-items:center;margin:.3em 1.4em .3em 0;}
.wpcf7-list-item label{display:inline-flex;align-items:center;gap:.5em;font-size:15px;}
.cf7-submit{display:flex;justify-content:center;margin-top:clamp(28px,3vw,40px);}
.wpcf7 input[type="submit"]{font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:.08em;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:100px;padding:1.1em 3.4em;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease);}
.wpcf7 input[type="submit"]:hover{background:var(--paper);color:var(--ink);}
.wpcf7 .wpcf7-spinner{display:block;margin:12px auto 0;}
.wpcf7 .wpcf7-not-valid-tip{font-size:13px;color:#9a3b3b;margin-top:.4em;}
.wpcf7 .wpcf7-response-output{margin:1.6em 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:8px;font-size:15px;line-height:1.8;}
.list-dots--1col{grid-template-columns:1fr;}
.dl-split{max-width:1000px;margin:clamp(32px,4vw,48px) auto clamp(48px,6vw,80px);}
.message-body p{font-size:16px;line-height:2.1;color:var(--ink);}
.message-sign{display:flex;flex-direction:column;align-items:flex-end;gap:.2em;margin-top:2.5em;}
.message-sign__role{font-size:13px;color:var(--ink-2);}
.message-sign__name{font-size:18px;font-weight:600;letter-spacing:.1em;}
@media (max-width:680px){ .contact-ways{grid-template-columns:1fr;} }

/* =========================================================
   料金案内 /price/（旧テーマの型 price.css への橋渡し）
   ========================================================= */
.page-price{--c-black:#1a1a1a;--c-text:#1a1a1a;--c-sub:#6e6e6e;--c-line:#dddddd;--c-bg:#ffffff;--c-bg-soft:#f2f2f2;}
.page-price .post-hero{padding:clamp(96px,11vw,150px) 0 clamp(24px,3vw,40px);}
.page-price .post-hero .breadcrumb{font-family:var(--font-en);font-size:12px;letter-spacing:.08em;color:var(--ink-2);margin-bottom:1.2em;}
.page-price .post-hero .breadcrumb a{color:var(--ink-2);}
.page-price .post-hero .breadcrumb span{margin:0 .6em;}
.page-price .post-hero .meta{display:none;}
.page-price .post-hero h1{font-family:var(--font-en);font-size:clamp(2.6rem,7vw,90px);font-weight:600;line-height:1;letter-spacing:.02em;text-align:center;}
.page-price .post-hero h1 .ja,.page-price .post-hero .lead{display:block;font-family:var(--font);font-size:15px;font-weight:500;color:var(--ink-2);letter-spacing:.03em;margin-top:.6em;text-align:center;}
.page-price .container-narrow{max-width:960px;margin-inline:auto;padding-inline:var(--gutter);}
.page-price .pr-intro{padding-block:clamp(32px,4vw,56px) 0;}
.page-price .pr-section{padding-block:var(--sec-pad);}
.page-price .pr-section-alt{background:var(--paper-2);}
.page-price .section-head{margin-bottom:clamp(28px,3.5vw,48px);}
.page-price .section-head.center{text-align:center;}
.page-price .section-head .en-label{display:block;font-family:var(--font-en);font-size:clamp(2rem,5vw,56px);font-weight:600;line-height:1;letter-spacing:.02em;}
.page-price .section-head .jp{display:block;font-size:15px;font-weight:500;color:var(--ink-2);margin-top:.5em;}
.page-price .section-head .sub,.page-price .sub{font-size:15px;color:var(--ink-2);line-height:1.9;margin-top:1em;}
.page-price .btn-ghost{display:inline-flex;align-items:center;gap:.6em;font-size:14px;font-weight:500;letter-spacing:.06em;border:1px solid var(--ink);border-radius:100px;padding:.9em 1.8em;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease);}
.page-price .btn-ghost:hover{background:var(--ink);color:var(--paper);}
.page-price .pr-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.6em;}
.page-price .pr-table th,.page-price .pr-table td{font-size:15px;}

/* =========================================================
   トップ：動画（SERVICE と WORKS の間。16:9・自動再生・小さな見出しを中央に重ねる）
   ========================================================= */
.movie{padding-top:0;}
.movie__inner{position:relative;display:block;color:#fff;}
.movie__media{aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);}
.movie__video{width:100%;height:100%;object-fit:cover;display:block;}
.movie__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2em;text-align:center;padding:24px;}
.movie__overlay::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(26,26,26,.18);transition:background .5s var(--ease);}
.movie__inner:hover .movie__overlay::before{background:rgba(26,26,26,.28);}
.movie__title{font-family:var(--font-en);font-size:clamp(1rem,1.6vw,22px);font-weight:500;line-height:1.6;letter-spacing:.08em;text-shadow:0 1px 14px rgba(0,0,0,.35);}
.movie__link{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-en);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.85);padding-bottom:.4em;text-shadow:0 1px 10px rgba(0,0,0,.35);}
.movie__link .arrow{transition:transform .4s var(--ease);}
.movie__inner:hover .movie__link .arrow{transform:translateX(.4em);}
@media (max-width:767px){
  .movie__media{aspect-ratio:9/16;max-height:78vh;}
  .movie__title{font-size:16px;}
}

/* =========================================================
   マウスを追いかける「わたぼう」（PCのみ・JS が位置を動かす）
   ========================================================= */
.watabo-cursor{position:fixed;inset:0 auto auto 0;z-index:9000;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);}
.watabo-cursor.is-on{opacity:1;}
.watabo-cursor.is-hidden{opacity:0;}
.watabo-cursor__inner{position:absolute;left:0;top:0;width:56px;will-change:transform;}
.watabo-cursor__img{display:block;width:56px;max-width:none;height:auto;transform:translate(14px,-78px) rotate(-6deg);transform-origin:50% 90%;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.12));animation:watabo-float 2.8s ease-in-out infinite;}
.watabo-cursor.is-grow .watabo-cursor__img{transform:translate(14px,-92px) rotate(4deg) scale(1.22);}
.watabo-cursor.is-down .watabo-cursor__img{transform:translate(14px,-70px) rotate(-10deg) scale(.92);}
@keyframes watabo-float{0%,100%{margin-top:0}50%{margin-top:-5px}}
@media (hover:none),(pointer:coarse),(max-width:767px){.watabo-cursor{display:none;}}
@media (prefers-reduced-motion:reduce){.watabo-cursor{display:none;}}

/* =========================================================
   トップのヒーロー：図形と文字（ba-and の組み替え × daytolife の色と文字出し）
   ========================================================= */
.hero--shapes{background:var(--paper);min-height:100svh;overflow:hidden;}
.hero__stage{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;transition:opacity .9s var(--ease);}   /* 画面に留まり、文章が上を流れる（daytolife） */
.hero__stage.is-dim{opacity:.22;}
.hero__stage.is-off{opacity:0;}
.hero--shapes{position:relative;z-index:1;background:transparent;}
.hero--shapes .hero__copy--shapes{z-index:3;}
/* 言葉の欄は透明＝図形が薄く透ける。その先のセクションは白で覆う */
.statement{position:relative;z-index:1;background:transparent;}
.home main > section:not(.hero):not(.statement){position:relative;z-index:2;background:var(--paper);}
.home main > .cta{background:#f7f7f7;}
/* 図形の共通：位置・回転・大きさ・色は変数で。構図（data-scene）ごとに値を変え、transition で動かす */
.shape{position:absolute;left:0;top:0;width:var(--u);height:var(--u);background:var(--ink);
  --u:clamp(110px,15vw,230px);--x:50vw;--y:50vh;--r:0deg;--s:1;--c:var(--ink);
  transform:translate3d(calc(var(--x) - 50%),calc(var(--y) - 50% + var(--shift-y,50px)),0) rotate(var(--r)) scale(var(--s));   /* --shift-y＝図形全体を50px下へ（2026-11-05） */
  transition:transform 1.6s cubic-bezier(.65,0,.3,1),background-color 1.2s cubic-bezier(.4,0,.2,1),border-radius 1.6s cubic-bezier(.65,0,.3,1);
  will-change:transform;}
.shape--circle{border-radius:50%;}
.shape--half{border-radius:999px 999px 0 0;height:calc(var(--u) / 2);}
.shape--tri{clip-path:polygon(50% 0,100% 100%,0 100%);}
.shape--quarter{border-radius:100% 0 0 0;}
.shape--squircle{border-radius:30%;}
.shape.is-color{background:var(--c);}
.shape{pointer-events:auto;}
.shape.is-hover{background:var(--hc);transition-duration:1.6s,.35s,1.6s;}
/* 視差（マウスに少し寄る）は内側の transform を汚さないよう stage ごと動かす */


/* 構図0：横一列（daytolife の並び）。可動域は画面の上半分（16〜52vh）＝見出しに重ねない */
.hero--shapes[data-scene="0"] .shape--circle  {--x:16vw;--y:36vh;--r:0deg;--s:1;}
.hero--shapes[data-scene="0"] .shape--half    {--x:33vw;--y:39vh;--r:0deg;--s:1;}
.hero--shapes[data-scene="0"] .shape--tri     {--x:50vw;--y:36vh;--r:0deg;--s:1;}
.hero--shapes[data-scene="0"] .shape--quarter {--x:67vw;--y:36vh;--r:0deg;--s:1;}
.hero--shapes[data-scene="0"] .shape--squircle{--x:84vw;--y:36vh;--r:0deg;--s:.9;}
/* 構図1：右に寄せて積む（ba-and の塊） */
.hero--shapes[data-scene="1"] .shape--circle  {--x:53vw;--y:30vh;--r:0deg;--s:1.15;}
.hero--shapes[data-scene="1"] .shape--half    {--x:43vw;--y:47vh;--r:-18deg;--s:1.05;}
.hero--shapes[data-scene="1"] .shape--tri     {--x:35vw;--y:30vh;--r:-30deg;--s:1.05;}
.hero--shapes[data-scene="1"] .shape--quarter {--x:65vw;--y:46vh;--r:90deg;--s:1;}
.hero--shapes[data-scene="1"] .shape--squircle{--x:63vw;--y:16vh;--r:20deg;--s:.7;}
/* 構図2：散らばる */
.hero--shapes[data-scene="2"] .shape--circle  {--x:73vw;--y:22vh;--r:0deg;--s:.8;}
.hero--shapes[data-scene="2"] .shape--half    {--x:21vw;--y:30vh;--r:180deg;--s:1.15;}
.hero--shapes[data-scene="2"] .shape--tri     {--x:51vw;--y:46vh;--r:15deg;--s:.9;}
.hero--shapes[data-scene="2"] .shape--quarter {--x:37vw;--y:20vh;--r:-90deg;--s:1.05;}
.hero--shapes[data-scene="2"] .shape--squircle{--x:79vw;--y:48vh;--r:45deg;--s:.9;}
/* 構図3：ひとつの輪のように */
.hero--shapes[data-scene="3"] .shape--circle  {--x:51vw;--y:34vh;--r:0deg;--s:1;}
.hero--shapes[data-scene="3"] .shape--half    {--x:51vw;--y:19vh;--r:0deg;--s:1;}
.hero--shapes[data-scene="3"] .shape--tri     {--x:36vw;--y:42vh;--r:-90deg;--s:.9;}
.hero--shapes[data-scene="3"] .shape--quarter {--x:66vw;--y:42vh;--r:0deg;--s:.9;}
.hero--shapes[data-scene="3"] .shape--squircle{--x:51vw;--y:51vh;--r:0deg;--s:.65;}

/* 文字：左下に大きく（daytolife）。英字は1文字ずつ、和文は少し遅れて */
.hero__copy--shapes{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:auto;bottom:clamp(96px,16vh,170px);transform:none;max-width:none;pointer-events:none;}
.hero__title--en{font-family:var(--font-en);font-weight:600;font-size:clamp(2.2rem,5.6vw,84px);line-height:1.02;letter-spacing:-.01em;color:var(--ink);text-shadow:none;}
.hero__title--en .ch{display:inline-block;opacity:0;transform:translateY(.5em);animation:ch-up .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.35s + var(--i) * .035s);}
.hero__title--en .w{display:inline-block;white-space:nowrap;}
.hero__title--en .ch--sp{width:.28em;}
.hero__sub--jp{margin-top:clamp(14px,1.8vw,24px);font-size:clamp(1rem,1.5vw,22px);font-weight:500;letter-spacing:.1em;color:var(--ink);text-shadow:none;opacity:0;transform:translateY(12px);animation:ch-up 1s cubic-bezier(.2,.7,.2,1) 1.25s forwards;}
@keyframes ch-up{to{opacity:1;transform:none;}}
.hero--shapes .hero__news{left:var(--gutter);}
@media (max-width:860px){
  .shape{--u:clamp(64px,22vw,110px);}
  .hero--shapes[data-scene="0"] .shape--circle  {--x:16vw;--y:34vh;}
  .hero--shapes[data-scene="0"] .shape--half    {--x:36vw;--y:36vh;}
  .hero--shapes[data-scene="0"] .shape--tri     {--x:56vw;--y:34vh;}
  .hero--shapes[data-scene="0"] .shape--quarter {--x:76vw;--y:34vh;}
  .hero--shapes[data-scene="0"] .shape--squircle{--x:92vw;--y:34vh;--s:.9;}
  .hero--shapes[data-scene="1"] .shape--circle  {--x:51vw;--y:30vh;}
  .hero--shapes[data-scene="1"] .shape--half    {--x:31vw;--y:42vh;}
  .hero--shapes[data-scene="1"] .shape--tri     {--x:21vw;--y:30vh;}
  .hero--shapes[data-scene="1"] .shape--quarter {--x:69vw;--y:44vh;}
  .hero--shapes[data-scene="1"] .shape--squircle{--x:63vw;--y:18vh;}
  .hero--shapes[data-scene="2"] .shape--circle  {--x:71vw;--y:22vh;}
  .hero--shapes[data-scene="2"] .shape--half    {--x:15vw;--y:28vh;}
  .hero--shapes[data-scene="2"] .shape--tri     {--x:53vw;--y:46vh;}
  .hero--shapes[data-scene="2"] .shape--quarter {--x:31vw;--y:20vh;}
  .hero--shapes[data-scene="2"] .shape--squircle{--x:77vw;--y:42vh;}
  .hero--shapes[data-scene="3"] .shape--circle  {--x:41vw;--y:34vh;}
  .hero--shapes[data-scene="3"] .shape--half    {--x:41vw;--y:22vh;}
  .hero--shapes[data-scene="3"] .shape--tri     {--x:23vw;--y:42vh;}
  .hero--shapes[data-scene="3"] .shape--quarter {--x:59vw;--y:42vh;}
  .hero--shapes[data-scene="3"] .shape--squircle{--x:41vw;--y:46vh;}
  .hero__copy--shapes{left:30px;right:30px;bottom:clamp(90px,14vh,140px);}
  .hero__title--en{font-size:clamp(2rem,9.6vw,46px);line-height:1.1;}
  .hero__sub--jp{font-size:15px;}
}
@media (prefers-reduced-motion:reduce){
  .shape{transition:none;}
  .hero__title--en .ch,.hero__sub--jp{animation:none;opacity:1;transform:none;}
}

/* =========================================================
   トップ：スクロール後に出る言葉（1行ずつ浮かぶ）
   ========================================================= */
.statement{background:transparent;padding-block:calc(var(--sec-pad) * 1.1) var(--sec-pad);}   /* 透明＝固定の図形が薄く透ける */
.statement__body{max-width:760px;margin-inline:auto;text-align:center;}
.statement__p{font-size:clamp(1rem,1.4vw,19px);font-weight:500;line-height:2.3;letter-spacing:.08em;color:var(--ink);}
.statement__p + .statement__p{margin-top:clamp(28px,3.6vw,52px);}
.statement__line{display:block;}
html.js .statement__line.reveal{opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i) * .16s);}
html.js .statement__line.reveal.is-visible{opacity:1;transform:none;}
.statement__links{display:flex;justify-content:center;gap:clamp(28px,4vw,56px);margin-top:clamp(40px,5vw,72px);}
@media (max-width:680px){
  .statement__p{font-size:15px;line-height:2.2;text-align:left;}
  .statement__links{flex-wrap:wrap;gap:18px 28px;}
}

/* =========================================================
   トップ：右下のお知らせカード（3枚フェード・qando.co.jp の型）
   ========================================================= */
.news-card{position:absolute;z-index:4;right:var(--gutter);bottom:clamp(24px,4vh,48px);width:300px;background:var(--paper);overflow:hidden;}
.news-card__track{position:relative;height:124px;}
.news-card__item{position:absolute;inset:0;display:flex;gap:16px;align-items:center;padding:16px;color:var(--ink);opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 1s;}
.news-card__item.is-active{opacity:1;visibility:visible;}
.news-card__thumb{flex:none;width:120px;height:90px;overflow:hidden;background:var(--paper-2);}
.news-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.news-card__thumb--label{display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--ink-2);}
.news-card__body{min-width:0;display:flex;flex-direction:column;gap:.35em;}
.news-card__date{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.news-card__title{font-size:13px;font-weight:500;line-height:1.55;letter-spacing:.02em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.news-card__item:hover .news-card__title{text-decoration:underline;text-underline-offset:3px;}
.hero--shapes .hero__scroll{left:50%;}
@media (max-width:860px){
  .news-card{left:30px;right:30px;width:auto;bottom:18px;}
  .news-card__track{height:112px;}
  .news-card__thumb{width:108px;height:80px;}
  .hero__copy--shapes{bottom:clamp(170px,24vh,220px);}
}

/* サービス上の流れる写真：1.5倍（200×150 → 300×225） */
.vg-track img{width:300px;height:225px;border-radius:8px;}
@media (max-width:680px){ .vg-track img{width:210px;height:158px;} }

/* =========================================================
   トップ WORKS：横幅いっぱいの4列格子（左右20px・間20px）
   ========================================================= */
.works--wide{padding-inline:20px;}
.works__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-inline:calc(var(--gutter) - 20px);margin-bottom:clamp(32px,4vw,56px);}
.works__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px;}
.works__grid .card__media--works img{aspect-ratio:1.39;}
.works__grid .card__title{font-size:15px;margin-top:.6em;}
.works__grid .card__meta{margin-top:0;}
.works__grid .card__text{font-size:13px;margin-top:.25em;}
.works__grid .card__meta .cat{display:none;}            /* 種別は題名の下に1行（disport と同じ並び） */
.works__grid .card__media--works{margin-bottom:12px;}
@media (max-width:1000px){ .works__grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:680px){ .works__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px;} .works--wide{padding-inline:12px;} .works__head{padding-inline:18px;} }

/* 見出しを 80px 下へ（2026-11-05） */
.hero__copy--shapes{bottom:calc(clamp(96px,16vh,170px) - 50px);}   /* 80px下げ → 30px戻す（2026-11-05） */
@media (max-width:860px){ .hero__copy--shapes{bottom:clamp(170px,24vh,220px);} }

/* Lenis（慣性スクロール）の作法 */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}

/* トップ WORKS：見出しを少し小さく・カードは16:9・間を広く（2026-11-05） */
.works--wide .mag-bigtitle{font-size:clamp(2.2rem,5.6vw,64px);}
.works__grid{gap:48px 32px;}
.works__grid .card__media--works img{aspect-ratio:16/9;}
@media (max-width:680px){ .works__grid{gap:32px 16px;} }

/* トップ WORKS：両サイドの余白を広く 20 → 48px（SP 12 → 20px）（2026-11-05） */
.works--wide{padding-inline:48px;}
.works__head{padding-inline:calc(var(--gutter) - 48px);}
@media (max-width:680px){ .works--wide{padding-inline:20px;} .works__head{padding-inline:10px;} }

/* =========================================================
   トップ SERVICE：kinto の Featured の型（正方形の写真カード・暗幕に白文字・中央揃え）
   ========================================================= */
.service--featured{padding-top:var(--sec-pad);}
.service--featured .container{max-width:none;padding-inline:72px;}
.svc-head{text-align:center;margin-bottom:clamp(40px,5vw,72px);}
.svc-head__en{font-family:var(--font-en);font-size:clamp(1.3rem,2vw,28px);font-weight:500;letter-spacing:.08em;color:var(--ink);}
.svc-head__jp{margin-top:.6em;font-size:14px;letter-spacing:.1em;color:var(--ink-2);}
.svc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);list-style:none;margin:0;padding:0;}
.svc-card__link{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;color:#fff;background:var(--paper-2);}
.svc-card__media{position:absolute;inset:0;}
.svc-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.svc-card__media::after{content:"";position:absolute;inset:0;background:rgba(26,26,26,.38);transition:background .6s var(--ease);}
.svc-card__link:hover .svc-card__media img{transform:scale(1.04);}
.svc-card__link:hover .svc-card__media::after{background:rgba(26,26,26,.48);}
.svc-card__text{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;text-align:center;padding:16px;}
.svc-card__en{font-family:var(--font-en);font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;opacity:.9;}
.svc-card__jp{font-size:clamp(14px,1.2vw,17px);font-weight:500;letter-spacing:.2em;line-height:1.7;}
.svc-card__more{font-family:var(--font-en);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:.35em;border-bottom:1px solid rgba(255,255,255,.85);margin-top:.6em;}
@media (max-width:1100px){ .svc-card__jp{letter-spacing:.1em;} }
@media (max-width:1000px){ .service--featured .container{padding-inline:30px;} .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .svc-card:last-child{grid-column:1 / -1;} .svc-card:last-child .svc-card__link{aspect-ratio:2/1;} }
@media (max-width:680px){ .svc-grid{grid-template-columns:1fr;gap:14px;} .svc-card__link,.svc-card:last-child .svc-card__link{aspect-ratio:4/3;} }

/* =========================================================
   qando の Topics 型（トップ YouTube）：左に大見出し・右に行の一覧
   ========================================================= */
.topics-type{padding-block:clamp(80px,9vw,120px);}
.topics-type__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,4vw,64px);align-items:start;}
.topics-type__head{font-family:var(--font-en);font-size:clamp(2.2rem,4vw,56px);font-weight:700;line-height:1;letter-spacing:.01em;}
.trows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.trow__link{display:flex;align-items:center;gap:24px;padding:24px 80px 24px 32px;border-radius:16px;position:relative;color:var(--ink);transition:background .35s var(--ease);}
.trow__link:hover{background:var(--paper-2);}
.trow__thumb{flex:none;width:117px;height:78px;overflow:hidden;background:var(--paper-2);}
.trow__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.trow__body{min-width:0;display:flex;flex-direction:column;gap:.6em;}
.trow__meta{display:flex;align-items:center;gap:10px;font-family:var(--font-en);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink);}
.trow__pill{display:inline-block;border:1px solid var(--ink);border-radius:9999px;padding:1px 8px;font-size:12px;line-height:1.5;}
.trow__title{font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.04em;}
.trow__arrow{position:absolute;right:32px;top:50%;transform:translateY(-50%);font-size:20px;line-height:1;transition:transform .4s var(--ease);}
.trow__link:hover .trow__arrow{transform:translate(.3em,-50%);}
.trow--empty{padding:24px 32px;color:var(--ink-2);}
.topics-type__more{display:flex;justify-content:flex-end;margin-top:clamp(24px,3vw,40px);}
.more-pill{display:inline-flex;align-items:center;gap:16px;color:var(--ink);}
.more-pill__label{font-family:var(--font-en);font-size:14px;font-weight:700;letter-spacing:.02em;}
.more-pill__arrow{display:inline-flex;align-items:center;justify-content:center;width:50px;height:30px;border-radius:9999px;background:var(--ink);color:#fff;font-size:16px;line-height:1;transition:transform .4s var(--ease);}
.more-pill:hover .more-pill__arrow{transform:translateX(.25em);}
@media (max-width:900px){
  .topics-type__grid{grid-template-columns:1fr;gap:28px;}
  .trow__link{padding:18px 56px 18px 12px;gap:16px;border-radius:12px;}
  .trow__thumb{width:96px;height:64px;}
  .trow__arrow{right:16px;}
  .trow__title{font-size:15px;}
}

/* トップ SERVICE：採用支援を足して 3列×2行（2026-11-05） */
.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3.2vw,46px);}
.svc-card__jp{font-size:17px;letter-spacing:.2em;}
@media (max-width:1000px){ .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .svc-card:last-child{grid-column:auto;} .svc-card:last-child .svc-card__link{aspect-ratio:1/1;} }
@media (max-width:680px){ .svc-grid{grid-template-columns:1fr;} }

/* =========================================================
   フッター（inclusivecamp.com の型）：薄い面に白いカード2枚・黒い CONTACT の帯・ロゴとボタン・SNSピル・巨大な社名
   ========================================================= */
.ft{position:relative;z-index:2;background:var(--paper-2);border-top-left-radius:80px;margin-top:clamp(64px,8vw,120px);padding:100px 60px 0;overflow:hidden;}
.ft__inner{max-width:1320px;margin-inline:auto;}
.ft__cards{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.ft-card{display:flex;align-items:center;gap:40px;background:var(--paper);min-height:200px;padding:40px 50px;color:var(--ink);transition:background .35s var(--ease);}
.ft-card:first-child{border-top-left-radius:40px;}
.ft-card:last-child{border-top-right-radius:40px;justify-content:flex-end;text-align:right;}
.ft-card:hover{background:#fafafa;}
.ft-card__icon{flex:none;width:64px;height:64px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.ft-card__body{display:flex;flex-direction:column;gap:.5em;}
.ft-card__en{font-family:var(--font-en);font-size:28px;font-weight:700;letter-spacing:.05em;line-height:1.3;}
.ft-card__jp{font-size:12px;letter-spacing:.05em;color:var(--ink);}
.ft-contact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:300px;margin-top:4px;background:var(--ink);color:#fff;border-bottom-right-radius:40px;text-align:center;padding:48px 24px;transition:background .35s var(--ease);}
.ft-contact:hover{background:#2a2a2a;}
.ft-contact__en{font-family:var(--font-en);font-size:40px;font-weight:700;letter-spacing:.05em;line-height:1.4;}
.ft-contact__line{display:block;width:40px;height:1px;background:rgba(255,255,255,.7);margin:14px auto 22px;}
.ft-contact__jp{font-size:12px;letter-spacing:.15em;line-height:1.9;color:#fff;}
.ft__row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.ft__row--brand{margin-top:80px;}
.ft__brand{display:flex;align-items:center;gap:32px;}
.ft__brand img{width:180px;height:auto;}
.ft__addr{font-size:12px;line-height:1.9;letter-spacing:.04em;color:var(--ink-2);}
.ft-pill{display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);border-radius:9999px;padding:0 24px;height:50px;font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.02em;transition:background .3s var(--ease),color .3s var(--ease);}
.ft-pill:hover{background:var(--ink);color:#fff;}
.ft-pill--big{height:80px;padding:0 40px 0 48px;gap:18px;font-size:18px;min-width:320px;justify-content:center;border:1px solid var(--ink);}
.ft-pill__note{font-family:var(--font);font-size:12px;font-weight:400;color:var(--ink-2);letter-spacing:.04em;}
.ft-pill--big:hover .ft-pill__note{color:#fff;}
.ft-pill__arrow{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;line-height:1;}
.ft-pill--big:hover .ft-pill__arrow{background:#fff;color:var(--ink);}
.ft__row--sns{margin-top:80px;}
.ft__sns{display:flex;gap:20px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.ft__sns .ft-pill{min-width:160px;justify-content:center;}
.ft__top{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-en);font-size:14px;font-weight:700;letter-spacing:.05em;color:var(--ink);}
.ft__top-arrow{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;line-height:1;transition:transform .3s var(--ease);}
.ft__top:hover .ft__top-arrow{transform:translateY(-2px);}
.ft__nav{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:56px;}
.ft__nav a{font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink);transition:opacity .3s var(--ease);}
.ft__nav a:hover{opacity:.5;}
.ft__row--copy{margin-top:40px;font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--ink);}
.ft__legal{display:flex;gap:24px;}
.ft__legal a{color:var(--ink);transition:opacity .3s var(--ease);}
.ft__legal a:hover{opacity:.5;}
.ft__mark{margin:48px -60px 0;font-family:var(--font-en);font-weight:700;font-size:clamp(4rem,16vw,230px);line-height:.8;letter-spacing:-.01em;white-space:nowrap;color:var(--ink);text-align:center;height:.52em;overflow:hidden;}
@media (max-width:900px){
  .ft{padding:72px 30px 0;border-top-left-radius:48px;}
  .ft__cards{grid-template-columns:1fr;}
  .ft-card{min-height:0;padding:28px 28px;gap:24px;}
  .ft-card:first-child{border-top-left-radius:28px;border-top-right-radius:28px;}
  .ft-card:last-child{border-radius:0;justify-content:flex-start;text-align:left;flex-direction:row-reverse;}
  .ft-card__en{font-size:22px;}
  .ft-contact{min-height:220px;border-bottom-right-radius:28px;}
  .ft-contact__en{font-size:28px;}
  .ft__row--brand{margin-top:56px;flex-direction:column;align-items:flex-start;}
  .ft__brand{flex-direction:column;align-items:flex-start;gap:16px;}
  .ft-pill--big{width:100%;min-width:0;}
  .ft__row--sns{margin-top:48px;}
  .ft__sns .ft-pill{min-width:0;padding:0 18px;height:44px;}
  .ft__row--copy{flex-direction:column;align-items:flex-start;gap:12px;}
  .ft__mark{margin:36px -30px 0;}
}

/* =========================================================
   トップ RANKING（shop.vermicular.jp の型）：左見出し・丸い前後ボタン・右端で切れる横スライダー・丸い順位バッジ
   ========================================================= */
.rankv{padding-top:0;}
.rankv__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,3.5vw,48px);}
.rankv__en{font-family:var(--font-en);font-size:clamp(2.2rem,3.8vw,54px);font-weight:400;line-height:1;letter-spacing:-.02em;}
.rankv__jp{margin-top:14px;font-size:14px;font-weight:500;letter-spacing:.05em;color:var(--ink);}
.rankv__nav{display:flex;gap:18px;}
.rankv__arrow{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-family:var(--font-en);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}
.rankv__arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.rankv__viewport{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));}
.rankv__track{display:flex;gap:27px;list-style:none;margin:0;padding:0 var(--gutter) 4px 0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
.rankv__track::-webkit-scrollbar{display:none;}
.rankv__item{flex:0 0 288px;scroll-snap-align:start;}
.rankv__link{display:block;color:var(--ink);}
.rankv__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);}
.rankv__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease);}
.rankv__link:hover .rankv__thumb img{transform:scale(1.03);}
.rankv__no{position:absolute;left:10px;top:10px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-size:14px;font-weight:500;color:#fff;background:var(--ink);}
.rankv__no--2{background:#6e6e6e;}
.rankv__no--3{background:#9a9a9a;}
.rankv__no--4{background:#bdbdbd;}
.rankv__name{display:block;margin-top:10px;font-size:16px;line-height:1.6;letter-spacing:.05em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rankv__meta{display:flex;align-items:center;gap:12px;margin-top:8px;font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:var(--ink-2);}
.rankv__cat{font-family:var(--font);letter-spacing:.04em;}
@media (max-width:680px){
  .rankv__head{align-items:flex-start;flex-direction:column;}
  .rankv__arrow{width:44px;height:44px;font-size:16px;}
  .rankv__viewport{padding-left:30px;}
  .rankv__item{flex-basis:240px;}
  .rankv__track{gap:16px;padding-right:30px;}
}

/* =========================================================
   トップ NEWS（shop.vermicular.jp の News の型）：左見出し・3列・上下の細い罫線・New のピル・左下の矢印
   ========================================================= */
.newsv{padding-top:0;padding-bottom:108px;}
.newsv__head{margin-bottom:48px;}
.newsv__en{font-family:var(--font-en);font-size:clamp(2.2rem,3.8vw,54px);font-weight:400;line-height:1;letter-spacing:-.02em;}
.newsv__jp{margin-top:14px;font-size:14px;font-weight:500;letter-spacing:.05em;color:var(--ink);}
.newsv__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(32px,6vw,90px);row-gap:0;list-style:none;margin:0;padding:0;}
.newsv__link{display:flex;flex-direction:column;gap:18px;min-height:180px;padding:20px 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);}
.newsv__date{display:flex;align-items:center;gap:10px;font-family:var(--font-en);font-size:13px;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.newsv__new{display:inline-block;background:var(--ink);color:#fff;font-size:12px;line-height:1;padding:4px 8px;border-radius:9999px;}
.newsv__text{font-size:14px;line-height:1.75;letter-spacing:.01em;flex:1 1 auto;}
.newsv__arrow{font-size:18px;line-height:1;transition:transform .4s var(--ease);}
.newsv__link:hover .newsv__arrow{transform:translateX(.3em);}
@media (max-width:900px){ .newsv__list{grid-template-columns:1fr;} .newsv__link{min-height:0;border-bottom:0;} .newsv__item:last-child .newsv__link{border-bottom:1px solid var(--line);} .newsv{padding-bottom:72px;} }

/* =========================================================
   メガメニュー（shop.vermicular.jp の型）：SERVICE に乗ると全幅の白いパネル
   ========================================================= */
.header.is-mega{background:var(--paper);border-bottom-color:var(--line);}
.header.is-mega::before{opacity:0;}
.mega{position:absolute;left:0;right:0;top:100%;z-index:90;background:var(--paper);border-bottom-left-radius:24px;border-bottom-right-radius:24px;box-shadow:0 24px 40px -24px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;}
.mega.is-open{opacity:1;visibility:visible;transform:none;}
.mega__inner{display:grid;grid-template-columns:186px minmax(0,1fr);gap:24px;padding:28px 36px 44px;}
.mega__all{display:flex;flex-direction:column;gap:6px;color:var(--ink);}
.mega__all-en{font-family:var(--font-en);font-size:18px;font-weight:300;letter-spacing:.01em;}
.mega__all-jp{font-size:12px;letter-spacing:.04em;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s var(--ease);}
.mega__all:hover .mega__all-jp{border-color:var(--ink);}
.mega__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px;list-style:none;margin:0;padding:0;}
.mega__link{display:flex;flex-direction:column;color:var(--ink);}
.mega__img{display:block;aspect-ratio:270/162;overflow:hidden;background:var(--paper-2);}
.mega__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease);}
.mega__link:hover .mega__img img{transform:scale(1.03);}
.mega__en{margin-top:22px;font-family:var(--font-en);font-size:23px;font-weight:300;line-height:1;letter-spacing:.01em;}
.mega__jp{margin-top:8px;font-size:12px;letter-spacing:.04em;color:var(--ink);}
@media (max-width:1000px){ .mega{display:none;} }

/* ランキングのサムネを vermicular と同じ縦長（288×324＝8:9）に（2026-11-05） */
.rankv__thumb{aspect-ratio:8/9;}

/* =========================================================
   トップ JOURNAL（qando.co.jp の Our Projects の型）：太い見出し・1枚だけ大きいカード・ドラッグで動く
   ========================================================= */
.jcar{padding-top:var(--sec-pad);}
.jcar__head{font-family:var(--font-en);font-size:clamp(2.4rem,4vw,56px);font-weight:700;line-height:1;letter-spacing:.01em;margin-bottom:clamp(32px,4vw,56px);}
.jcar__head .ch{display:inline-block;overflow:hidden;vertical-align:bottom;}
.jcar__head .ch > span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * .04s);}
.jcar__head.is-visible .ch > span{transform:none;}
.jcar__viewport{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));cursor:grab;}
.jcar__viewport.is-dragging{cursor:grabbing;}
.jcar__track{display:flex;align-items:flex-start;gap:40px;list-style:none;margin:0;padding:0 var(--gutter) 8px 0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;}
.jcar__track::-webkit-scrollbar{display:none;}
.jcar__slide{flex:0 0 420px;scroll-snap-align:start;transition:flex-basis .6s cubic-bezier(.65,0,.35,1);}
.jcar__slide.is-active{flex-basis:530px;}
.jcar__link{display:flex;flex-direction:column;color:var(--ink);user-select:none;-webkit-user-drag:none;}
.jcar__thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);}
.jcar__thumb img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;}
.jcar__title{margin-top:20px;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.02em;}
.jcar__detail{margin-top:6px;font-size:12px;line-height:1.5;letter-spacing:.01em;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.jcar__meta{display:flex;gap:12px;margin-top:10px;font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:var(--ink-2);}
.jcar__meta span{font-family:var(--font);letter-spacing:.04em;}
.jcar__foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(24px,3vw,40px);}
.jcar__nav{display:flex;gap:24px;}
.jcar__nav button{background:none;border:0;cursor:pointer;font-family:var(--font-en);font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink);padding:.4em 0;border-bottom:1px solid transparent;transition:border-color .3s var(--ease);}
.jcar__nav button:hover{border-color:var(--ink);}
@media (max-width:680px){
  .jcar__viewport{padding-left:30px;}
  .jcar__track{gap:20px;padding-right:30px;}
  .jcar__slide{flex-basis:260px;}
  .jcar__slide.is-active{flex-basis:300px;}
  .jcar__foot{flex-direction:column;align-items:flex-start;}
}

/* =========================================================
   見出しの統一（Works／Journal／YouTube ＝ Service と同じ）と、セクション間の余白の統一（2026-11-05）
   同じ白地が続くので各75px（＝境界150px）。最後のセクションだけフッターとの色境界で150px。
   ========================================================= */
:root{--sec-gap:clamp(48px,5.2vw,75px);}
.home main > section:not(.hero){padding-block:var(--sec-gap);}
.home main > section:not(.hero):last-of-type{padding-bottom:clamp(100px,10.4vw,150px);}
.home .ft{margin-top:0;}
.svc-head{margin-bottom:clamp(32px,4vw,56px);}
.svc-head--left{text-align:left;margin-bottom:0;}
.svc-head--left .svc-head__jp{margin-top:.8em;}
.works--wide .svc-head{padding-inline:0;}
.jcar .svc-head{margin-bottom:clamp(32px,4vw,56px);}
.topics-type__grid{align-items:start;}
@media (max-width:680px){ :root{--sec-gap:clamp(40px,10vw,56px);} .home main > section:not(.hero):last-of-type{padding-bottom:100px;} }

/* 土台の #ranking{padding-bottom:0} より強く */
.home main > section#ranking{padding-bottom:var(--sec-gap);}

/* =========================================================
   メニューのボタン（inclusivecamp.com の型）：右上に固定の黒い正方形・左下だけ角丸・3本線＋MENU
   ========================================================= */
.burger{display:none !important;}
.mbtn{position:fixed;top:0;right:0;z-index:300;width:120px;height:120px;background:var(--ink);color:#fff;border:0;border-radius:0 0 0 30px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:background .3s var(--ease);}
.mbtn:hover{background:#2a2a2a;}
.mbtn__lines{display:flex;flex-direction:column;gap:6px;width:30px;}
.mbtn__lines i{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease);}
.mbtn__label{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.1em;}
.header__inner{padding-right:calc(120px + 24px);}
.hero__time{right:clamp(14px,1.8vw,32px);}
@media (max-width:767px){ .mbtn{width:84px;height:84px;border-radius:0 0 0 22px;gap:8px;} .mbtn__lines{width:24px;gap:5px;} .mbtn__label{font-size:12px;} .header__inner{padding-right:calc(84px + 16px);} }

/* =========================================================
   全画面メニュー（think-for-design.co.jp の型）：右上の角から円形に広がる濃いグレーの面
   ========================================================= */
.gm{position:fixed;inset:0;z-index:400;background:rgba(47,47,47,.94);color:#fff;visibility:hidden;clip-path:circle(0px at calc(100% - 60px) 60px);transition:clip-path .9s cubic-bezier(.65,0,.3,1),visibility 0s linear .9s;}
.gm.is-open{visibility:visible;clip-path:circle(160% at calc(100% - 60px) 60px);transition:clip-path .9s cubic-bezier(.65,0,.3,1),visibility 0s;}
.gm__brand{position:absolute;left:clamp(30px,7.4vw,107px);top:21px;z-index:2;}
.gm__brand img{width:160px;height:auto;display:block;}
.gm__close{position:absolute;top:0;right:0;width:120px;height:120px;background:none;border:0;cursor:pointer;z-index:3;}
.gm__close span{position:absolute;left:50%;top:50%;width:44px;height:1.5px;background:#fff;transform:translate(-50%,-50%) rotate(45deg);}
.gm__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}
.gm__scroll{position:absolute;inset:0;overflow-y:auto;padding:140px clamp(30px,8vw,110px) 80px;}
.gm__inner{max-width:1000px;margin-inline:auto;}
.gm__nav{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,8vw,180px);}
.gm__col{list-style:none;margin:0;padding:0;}
.gm__item{border-bottom:0;padding:14px 0 16px;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.gm.is-open .gm__item{opacity:1;transform:none;}
.gm.is-open .gm__col:nth-child(1) .gm__item:nth-child(1){transition-delay:.45s}.gm.is-open .gm__col:nth-child(1) .gm__item:nth-child(2){transition-delay:.52s}.gm.is-open .gm__col:nth-child(1) .gm__item:nth-child(3){transition-delay:.59s}.gm.is-open .gm__col:nth-child(1) .gm__item:nth-child(4){transition-delay:.66s}
.gm.is-open .gm__col:nth-child(2) .gm__item:nth-child(1){transition-delay:.5s}.gm.is-open .gm__col:nth-child(2) .gm__item:nth-child(2){transition-delay:.57s}.gm.is-open .gm__col:nth-child(2) .gm__item:nth-child(3){transition-delay:.64s}.gm.is-open .gm__col:nth-child(2) .gm__item:nth-child(4){transition-delay:.71s}.gm.is-open .gm__col:nth-child(2) .gm__item:nth-child(5){transition-delay:.78s}
.gm__head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.gm__link{display:flex;flex-direction:column;color:#fff;}
.gm__ja{font-size:15px;letter-spacing:.04em;line-height:1.4;}
.gm__en{font-family:var(--font-en);font-size:clamp(2rem,3.4vw,48px);font-weight:500;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;margin-top:2px;transition:opacity .3s var(--ease);}
.gm__link:hover .gm__en{opacity:.6;}
.gm__item > .gm__link{position:relative;padding-right:48px;}
.gm__item:not(.gm__item--acc) > .gm__link::after{content:"";position:absolute;right:16px;bottom:18px;width:9px;height:9px;border-right:1.5px solid #fff;border-top:1.5px solid #fff;transform:rotate(45deg);}
.gm__acc{position:relative;flex:none;width:40px;height:40px;background:none;border:0;cursor:pointer;}
.gm__acc::before,.gm__acc::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:#fff;transform:translate(-50%,-50%);transition:transform .3s var(--ease);}
.gm__acc::after{transform:translate(-50%,-50%) rotate(90deg);}
.gm__acc[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(0);}
.gm__sub{list-style:none;margin:0;padding:0 0 0 2px;max-height:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .4s var(--ease);opacity:0;}
.gm__item.is-open .gm__sub{max-height:600px;opacity:1;margin-top:12px;}
.gm__sub li a{display:block;padding:6px 0;font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.85);}
.gm__sub li a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.gm__foot{display:grid;grid-template-columns:400px 1fr;gap:40px 80px;align-items:center;margin-top:clamp(48px,6vw,80px);opacity:0;transition:opacity .6s var(--ease) .85s;}
.gm.is-open .gm__foot{opacity:1;}
.gm__cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;height:69px;background:#fff;color:var(--ink);border-radius:9999px;font-size:15px;font-weight:700;letter-spacing:.08em;transition:opacity .3s var(--ease);}
.gm__cta:hover{opacity:.85;}
.gm__social{display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:13px;letter-spacing:.06em;}
.gm__social-label{font-family:var(--font-en);font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.6);}
.gm__social a{color:#fff;border-bottom:1px solid transparent;transition:border-color .3s var(--ease);}
.gm__social a:hover{border-color:#fff;}
.gm__legal{grid-column:1 / -1;font-family:var(--font-en);font-size:13px;letter-spacing:.06em;}
.gm__legal a{color:#fff;}
@media (max-width:767px){
  .gm{clip-path:circle(0px at calc(100% - 42px) 42px);}
  .gm.is-open{clip-path:circle(170% at calc(100% - 42px) 42px);}
  .gm__close{width:84px;height:84px;}
  .gm__close span{width:32px;}
  .gm__scroll{padding:110px 30px 60px;}
  .gm__nav{grid-template-columns:1fr;}
  .gm__en{font-size:32px;}
  .gm__foot{grid-template-columns:1fr;gap:28px;}
  .gm__cta{width:100%;height:60px;}
}

/* =========================================================
   トップ JOURNAL：右から左へ流れ続ける（乗ると止まり、その1枚が大きくなる）
   ========================================================= */
.jcar__viewport--flow{padding-left:0;overflow:hidden;cursor:default;}
.jcar__track--flow{overflow:visible;width:max-content;padding:0;animation:jcar-flow 70s linear infinite;scroll-snap-type:none;}
.jcar__viewport--flow:hover .jcar__track--flow{animation-play-state:paused;}
.jcar__track--flow .jcar__slide{flex:0 0 420px;margin-right:40px;transition:none;}
.jcar__track--flow .jcar__slide.is-active{flex-basis:420px;}
.jcar__track--flow .jcar__link{transform-origin:50% 100%;transition:transform .6s cubic-bezier(.65,0,.35,1);}
.jcar__track--flow .jcar__slide.is-active .jcar__link{transform:scale(1.12);}
@keyframes jcar-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.jcar__track--flow{animation:none;}}
@media (max-width:680px){ .jcar__track--flow .jcar__slide{flex-basis:260px;margin-right:20px;} .jcar__track--flow .jcar__slide.is-active{flex-basis:260px;} }

/* =========================================================
   下層ページ：トップと同じ型に統一（2026-11-05）
   見出し2種（ページ＝英字54px細字＋和文14px・左／節＝.svc-head 英字28px＋和文14px・中央）、
   余白＝--sec-gap、カード＝トップと同じ markup（works__grid・jl-grid・newsv・rankv・svc-grid）
   ========================================================= */
/* 余白 */
body:not(.home) main > .section{padding-block:var(--sec-gap);}
body:not(.home) main > .section--flush-top{padding-top:0;}
body:not(.home) main > .section:first-of-type{padding-top:clamp(20px,2.4vw,32px);}
body:not(.home) main > .section:last-of-type{padding-bottom:clamp(100px,10.4vw,150px);}
body:not(.home) main > .ct-hero{padding-bottom:0;}
body:not(.home) main > .rankv{padding-top:var(--sec-gap);}
body:not(.home) .crumb{padding-top:clamp(96px,11vw,130px);}
.ft{margin-top:0;}

/* ページの大見出し（トップの News／Ranking／YouTube と同じ字） */
.ph{margin-bottom:clamp(36px,4.5vw,64px);}
.ph__en{font-family:var(--font-en);font-size:clamp(2.2rem,3.8vw,54px);font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--ink);}
.ph__jp{margin-top:14px;font-size:14px;font-weight:500;letter-spacing:.05em;color:var(--ink);}
.ph__catch{margin-top:clamp(24px,2.8vw,40px);font-size:clamp(1.5rem,2.8vw,40px);font-weight:600;line-height:1.5;letter-spacing:.04em;color:var(--ink);}
.ph__lead{margin-top:clamp(14px,1.6vw,22px);font-size:16px;line-height:2;color:var(--ink-2);max-width:64ch;}
.ph__media{margin-top:clamp(28px,3.5vw,48px);aspect-ratio:21/9;overflow:hidden;background:var(--paper-2);}
.ph__media--wide{aspect-ratio:16/9;}
.ph__media img,.ph__media video{width:100%;height:100%;object-fit:cover;display:block;}
.ph + .filter,.ph + .article,.ph + .contact-ways,.ph + .dl-split{margin-top:0;}

/* 節の見出し（.svc-head）の下層での補助 */
.svc-head--left{margin-bottom:clamp(20px,2.4vw,32px);}
.svc-head__catch{margin-top:.8em;font-size:clamp(1.25rem,2vw,28px);font-weight:600;line-height:1.6;letter-spacing:.04em;color:var(--ink);}
.media-split .svc-head{margin-bottom:clamp(18px,2vw,28px);}
.intro-h{max-width:64ch;margin:0 auto clamp(20px,2.4vw,32px);text-align:center;font-size:clamp(1.2rem,2vw,26px);font-weight:600;line-height:1.6;letter-spacing:.04em;}
.topics-type .newsv__head{margin-bottom:0;}

/* 制作実績一覧：トップの WORKS と同じ横幅いっぱいの4列 */
.works--archive .container{max-width:none;padding-inline:0;}
.works--archive .filter{max-width:none;margin:0 0 clamp(32px,4vw,56px);}
.works--archive .works__grid + .container{margin-top:clamp(40px,5vw,72px);}
.works--wide .svc-head{padding-inline:0;}

/* ジャーナル一覧・関連：トップの流れるカードと同じ文字の並び（題名 → 抜粋 → 日付・分類） */
.page-journal .filter{max-width:none;margin:0 0 clamp(32px,4vw,56px);}
.jl-grid{gap:48px 32px;}
.jl-grid .card__link{display:flex;flex-direction:column;}
.jl-grid .card__media{margin-bottom:14px;}
.jl-grid .card__title{font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.04em;}
.jl-grid .card__text{font-size:14px;line-height:1.75;color:var(--ink-2);margin-top:.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.jl-grid .card__meta{margin-top:.8em;letter-spacing:.06em;}
.jl-grid + .mag-pgr{margin-top:clamp(40px,5vw,72px);}

/* お知らせ・検索の一覧：トップの News と同じ行（上に1本・各行の下に1本） */
.newsv__list--archive{border-top:1px solid var(--line);margin-bottom:clamp(32px,4vw,56px);}
.newsv__list--archive .newsv__link{border-top:0;min-height:160px;}
.newsv__type{font-family:var(--font);font-size:12px;letter-spacing:.04em;color:var(--ink-2);}

/* スタッフ紹介 */
.staff-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;list-style:none;margin:0;padding:0;}
.staff-card__link{display:flex;flex-direction:column;color:var(--ink);}
.staff-card__media{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);margin-bottom:14px;}
.staff-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease);}
.staff-card__link:hover .staff-card__media img{transform:scale(1.03);}
.staff-card__role{font-size:12px;letter-spacing:.1em;color:var(--ink-2);}
.staff-card__name{font-family:var(--font-en);font-size:18px;font-weight:500;letter-spacing:.02em;margin-top:.2em;}
.staff-card__bio{font-size:13px;line-height:1.7;color:var(--ink-2);margin-top:.5em;}

/* よくある質問 */
.faq-cats{margin-bottom:clamp(32px,4vw,56px);}
.faq-groups{display:flex;flex-direction:column;gap:clamp(48px,5.2vw,75px);max-width:900px;}
.faq-group{scroll-margin-top:120px;}
.faq-group__h{display:flex;align-items:baseline;gap:.6em;font-size:clamp(1.1rem,1.5vw,20px);font-weight:600;letter-spacing:.06em;margin-bottom:1em;}
.faq-group__n{font-family:var(--font-en);font-size:13px;font-weight:400;color:var(--ink-2);}

/* サービス一覧：写真カード（トップと同じ）＋ 1行ずつの説明 */
.svc-detail{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line);}
.svc-detail__row{display:grid;grid-template-columns:48px 280px minmax(0,1fr) 40px;gap:24px;align-items:center;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);color:var(--ink);scroll-margin-top:120px;}
.svc-detail__no{font-family:var(--font-en);font-size:13px;color:var(--ink-2);}
.svc-detail__en{display:block;font-family:var(--font-en);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);}
.svc-detail__jp{display:block;font-size:18px;font-weight:600;letter-spacing:.04em;margin-top:.2em;}
.svc-detail__text{font-size:14px;line-height:1.8;color:var(--ink-2);}
.svc-detail__arrow{font-size:18px;line-height:1;text-align:right;transition:transform .4s var(--ease);}
.svc-detail__row:hover .svc-detail__arrow{transform:translateX(.3em);}
.page-service-index .sec-foot{text-align:center;}

/* お問い合わせ・資料請求・汎用ページ：見出しが左寄せなので中身も左から */
.contact-ways{margin:clamp(32px,4vw,48px) 0 0;}
.page-contact .form,.page-download .form{margin-inline:0;}
.dl-split{margin:clamp(32px,4vw,48px) 0 0;}
.page-generic .article,.page-message .article{margin-inline:0;}
.page-404 .arrow-link{margin-top:clamp(20px,2.4vw,32px);}

/* 料金案内：見出しだけトップの型に（本体は price.css） */
.page-price .post-hero{padding-top:clamp(96px,11vw,130px);}
.page-price .post-hero h1{font-size:clamp(2.2rem,3.8vw,54px);font-weight:400;letter-spacing:-.02em;text-align:left;}
.page-price .post-hero h1 .ja,.page-price .post-hero .lead{text-align:left;font-size:14px;color:var(--ink);margin-top:14px;}
.page-price .post-hero .lead{font-size:16px;color:var(--ink-2);line-height:2;max-width:64ch;}
.page-price .section-head .en-label{font-size:clamp(1.3rem,2vw,28px);font-weight:500;letter-spacing:.08em;}
.page-price .section-head .jp{font-size:14px;letter-spacing:.1em;color:var(--ink-2);margin-top:.6em;}
.page-price .pr-section{padding-block:var(--sec-gap);}

@media (max-width:1000px){ .staff-grid{grid-template-columns:repeat(3,minmax(0,1fr));} .svc-detail__row{grid-template-columns:40px 200px minmax(0,1fr) 32px;} }
@media (max-width:680px){
  .ph__en{font-size:32px;}
  .ph__catch{font-size:22px;}
  .ph__lead{font-size:15px;}
  .ph__media{aspect-ratio:4/3;}
  .staff-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;}
  .svc-detail__row{grid-template-columns:32px minmax(0,1fr);gap:8px 16px;}
  .svc-detail__text{grid-column:2;}
  .svc-detail__arrow{display:none;}
  .newsv__list--archive{grid-template-columns:1fr;}
  .jl-grid{gap:32px 16px;}
  .page-price .post-hero h1{font-size:32px;}
}

/* 汎用ページ（ポリシー・個人情報保護方針）：本文の中の旧テーマの枠と見出しをトップの型に */
.page-generic .article .container{max-width:none;padding-inline:0;}
.page-generic .article__body section{padding:0;margin:0 0 clamp(48px,5.2vw,75px);}
.page-generic .article__body .section-head{text-align:center;margin-bottom:clamp(28px,3.5vw,48px);}
.page-generic .article__body .section-head .en-label{display:block;font-family:var(--font-en);font-size:clamp(1.3rem,2vw,28px);font-weight:500;letter-spacing:.08em;text-transform:none;color:var(--ink);}
.page-generic .article__body .section-head h2{margin:.6em 0 0;padding:0;border:0;font-size:14px;font-weight:500;letter-spacing:.1em;color:var(--ink-2);}
.page-generic .article__body .policy-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);}
.page-generic .article__body .policy-item:first-child{border-top:1px solid var(--line);}
.page-generic .article__body .policy-item .no{font-family:var(--font-en);font-size:13px;color:var(--ink-2);padding-top:.3em;}
.page-generic .article__body .policy-item h3{margin:0 0 .5em;font-size:17px;}
.page-generic .article__body .policy-item p{margin:0;font-size:15px;}
.page-generic .article__body h2 .no{font-family:var(--font-en);font-weight:500;color:var(--ink-2);margin-right:.6em;}

/* =========================================================
   コンセプト /concept/（2026-11-05）
   冒頭＝トップの STATEMENT と同じ組み。各節＝左に番号・和文の見出し・写真、右に本文
   ========================================================= */
.ph--concept .ph__en{font-weight:600;letter-spacing:-.01em;}
.statement--page{padding-block:var(--sec-gap);}
.cstory__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start;}
.cstory--rev .cstory__head{order:2;}
.cstory__no{display:block;font-family:var(--font-en);font-size:13px;letter-spacing:.16em;color:var(--ink-2);}
.cstory__h{margin-top:.5em;font-size:clamp(1.4rem,2.2vw,30px);font-weight:600;line-height:1.5;letter-spacing:.06em;color:var(--ink);}
.cstory__media{margin-top:clamp(24px,3vw,40px);aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);}
.cstory__media img{width:100%;height:100%;object-fit:cover;display:block;}
.cstory__body{padding-top:clamp(28px,4vw,64px);}
.cstory__body p{font-size:16px;line-height:2.2;letter-spacing:.06em;color:var(--ink);}
.cstory__body p + p{margin-top:1.8em;}
.cstory__title{margin-bottom:clamp(32px,4vw,56px);}
.cstory__title--center{text-align:center;}
/* 想いを届ける仕事：3つの段 */
.cwork__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vw,46px);list-style:none;margin:0;padding:0;}
.cwork__media{aspect-ratio:4/3;overflow:hidden;background:var(--paper);margin-bottom:20px;}
.cwork__media img{width:100%;height:100%;object-fit:cover;display:block;}
.cwork__step{font-family:var(--font-en);font-size:12px;letter-spacing:.16em;color:var(--ink-2);}
.cwork__h{margin-top:.4em;font-size:clamp(1.1rem,1.5vw,20px);font-weight:600;letter-spacing:.06em;}
.cwork__text{margin-top:1em;}
.cwork__text p{font-size:14px;line-height:2;color:var(--ink);}
.cwork__text p + p{margin-top:1.2em;}
/* 目指すこと */
.cgoal__phil{text-align:center;font-size:clamp(1.8rem,3.6vw,52px);font-weight:600;letter-spacing:.12em;line-height:1.4;}
.cgoal__lead{max-width:40em;margin:clamp(28px,3.5vw,48px) auto 0;text-align:center;}
.cgoal__lead p{font-size:16px;line-height:2.2;letter-spacing:.06em;}
.cgoal__lead p + p{margin-top:1.4em;}
.cgoal__vm{max-width:900px;margin:clamp(48px,5.2vw,75px) auto 0;border-top:1px solid var(--line);}
.cgoal__row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:baseline;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);}
.cgoal__row dt{font-family:var(--font-en);font-size:clamp(1.3rem,2vw,28px);font-weight:500;letter-spacing:.04em;}
.cgoal__row dd{font-size:clamp(1rem,1.5vw,20px);font-weight:600;letter-spacing:.06em;line-height:1.7;}
/* 最後の呼びかけ */
.cstart__inner{border-top:1px solid var(--ink);padding-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,96px);}
.cstart__h{font-size:clamp(1.4rem,2.2vw,30px);font-weight:600;letter-spacing:.06em;line-height:1.5;}
.cstart__text p{font-size:16px;line-height:2.2;letter-spacing:.06em;}
.cstart__text p + p{margin-top:1.4em;}
.cstart__links{grid-column:2;display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
@media (max-width:900px){
  .cstory__grid,.cstart__inner{grid-template-columns:1fr;}
  .cstory--rev .cstory__head{order:0;}
  .cstory__body{padding-top:0;}
  .cstart__links{grid-column:1;}
  .cwork__list{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:680px){
  .cstory__body p,.cgoal__lead p,.cstart__text p{font-size:15px;}
  .cgoal__lead{text-align:left;}
  .cgoal__row{grid-template-columns:1fr;gap:6px;}
  .ph--concept .ph__en{font-size:30px;}
}

/* =========================================================
   サービス詳細の共通部品の追加（2026-11-05）
   原稿の改行を活かす中央の本文・一節のボタン・表。コンセプト /concept/ も同じ部品で組む
   ========================================================= */
.prose--lines{max-width:none;text-align:center;}
.prose--lines p + p{margin-top:1.6em;}
.prose--after{margin-top:clamp(28px,3.2vw,44px);}
.page-service .list-dots + .prose--after{text-align:center;}
.store__text + .store__text,.feature-card__text + .feature-card__text{margin-top:1em;}
.intro-h--big{font-size:clamp(1.8rem,3.6vw,48px);letter-spacing:.12em;margin-bottom:clamp(28px,3.4vw,48px);}
.intro-table{max-width:900px;margin:clamp(40px,4.8vw,64px) auto 0;}
.intro-links{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px);}
@media (max-width:680px){
  .prose--lines br{display:none;}
}
.intro-table .price-table td:first-child{width:180px;font-family:var(--font-en);font-weight:500;}
.intro-table .price-table td:last-child{font-weight:600;}
/* プランが2枚のときは中央に2列・関連サービスが4枚のときは4列（2026-11-05） */
.plan-grid:has(> .plan:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto;}
@media (min-width:901px){ .svc-grid--sub:has(> .svc-card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:680px){ .plan-grid:has(> .plan:nth-child(2):last-child){grid-template-columns:1fr;} }
/* 制作できるもの：カード4列＋詳細ページへのリンク（2026-11-05） */
.feature-grid--4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:1040px;margin-inline:auto;}
.feature-grid--4 .feature-card{display:flex;flex-direction:column;}
.feature-card__links{list-style:none;margin:auto 0 0;padding:1.4em 0 0;display:flex;flex-direction:column;gap:.7em;}
.feature-card__links .arrow-link{font-size:13px;}
@media (max-width:680px){ .feature-grid--4{grid-template-columns:1fr;} }
.feature-grid--4 .feature-card__links{flex-direction:row;flex-wrap:wrap;gap:.7em 1.6em;}
/* カード3列（写真撮影・動画制作の「写真で伝える」「映像で伝える」）（2026-11-05） */
.feature-grid--3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
@media (max-width:900px){ .feature-grid--3{grid-template-columns:1fr;} }
/* =========================================================
   サービス詳細の統一（2026-11-05）
   帯は導入のあとから自動で交互／写真つきカード（制作できるもの）は写真を上に裁ち落とし／グラフィックは4列
   ========================================================= */
.feature-card--media{overflow:hidden;}
.feature-card__media{margin:calc(-1 * clamp(22px,2.4vw,34px)) calc(-1 * clamp(22px,2.4vw,34px)) clamp(18px,2vw,24px);aspect-ratio:3/2;overflow:hidden;background:var(--paper-2);}
.feature-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);}
.feature-card--media:hover .feature-card__media img{transform:scale(1.03);}
.feature-card--media .feature-card__title{margin-top:0;}
.feature-grid--c4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.feature-grid--c4 .feature-card{display:flex;flex-direction:column;}
.feature-grid--c4 .feature-card__title{font-size:17px;}
.feature-grid--c4 .feature-card__text{font-size:14px;}
@media (max-width:1100px){ .feature-grid--c4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:680px){ .feature-grid--c4{grid-template-columns:1fr;} }
.feature-card__title .ib{display:inline-block;}
/* =========================================================
   サービス下層35ページ（2026-11-05）：同じ分野のメニュー（題名＋キャッチ＋→）
   ========================================================= */
.sub-menu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);}
.sub-menu__item{border-bottom:1px solid var(--line);}
.sub-menu__item a{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 44px 22px 4px;height:100%;color:var(--ink);text-decoration:none;transition:background .3s var(--ease);}
.sub-menu__item a:hover{background:var(--paper-2);}
.band .sub-menu__item a:hover{background:var(--paper);}
.sub-menu__en{font-family:var(--font-en);font-size:12px;letter-spacing:.14em;color:var(--ink-2);}
.sub-menu__title{font-size:16px;font-weight:600;letter-spacing:.04em;}
.sub-menu__catch{font-size:13px;line-height:1.7;color:var(--ink-2);}
.sub-menu__arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;}
.sub-menu__item.is-current .sub-menu__title{text-decoration:underline;text-underline-offset:5px;}
.sub-menu__item.is-current a{pointer-events:none;}
@media (min-width:901px){ .sub-menu__item:not(:nth-child(3n)) a{border-right:1px solid var(--line);} .sub-menu__item a{padding-left:20px;} }
@media (max-width:900px){ .sub-menu{grid-template-columns:1fr;} }

/* =========================================================
   コンテンツの横幅をヘッダー（.header__inner）にそろえる（2026-11-05）
   左右は --gutter だけ。1360px の上限をやめる（--max を使う .container・流れるカードの起点も同じ線に）。
   全画面の指定がある節（トップ WORKS・SERVICE）はそれぞれの指定のまま
   ========================================================= */
:root{--max:100vw;}
.works--archive{padding-inline:var(--gutter);}
@media (max-width:680px){ .works--archive{padding-inline:30px;} }

/* =========================================================
   コンセプト：冒頭をトップと同じに（template-parts/top-hero.php・2026-11-07）
   図形の層は fixed＝言葉の節だけ透明にし、その先の節は面で覆う（トップの .home の指定と同じ）
   ========================================================= */
.has-top-hero > section:not(.hero):not(.statement){position:relative;z-index:2;}
.has-top-hero > section:not(.hero):not(.statement):not(.band){background:var(--paper);}
body main.has-top-hero > .section.statement{padding-block:calc(var(--sec-pad) * 1.1) var(--sec-pad);}

/* 料金のカード：外線なし（2026-11-07）。帯（薄いグレー）の上に白い面で置く */
.plan{border:0;}

/* コンセプト：Your Color の見出しの上に、ヒーローの図形5つを5色で（2026-11-07）。1つずつ下から浮かぶ */
.yc-shapes{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,1.6vw,22px);margin-bottom:clamp(24px,3vw,40px);}
.yc-shape{display:block;width:clamp(26px,2.6vw,38px);height:clamp(26px,2.6vw,38px);background:var(--ink);}
.yc-shape--circle{background:#E8734A;border-radius:50%;}
.yc-shape--half{background:#E9C46A;border-radius:999px 999px 0 0;height:calc(clamp(26px,2.6vw,38px) / 2);}
.yc-shape--tri{background:#7FB69E;clip-path:polygon(50% 0,100% 100%,0 100%);}
.yc-shape--quarter{background:#5B8DB8;border-radius:100% 0 0 0;}
.yc-shape--squircle{background:#D98FA5;border-radius:30%;}
html.js .yc-shapes.reveal{opacity:1;transform:none;}
html.js .yc-shapes .yc-shape{opacity:0;transform:translateY(-28px) rotate(-20deg);transition:opacity .9s var(--ease),transform 1.2s cubic-bezier(.65,0,.3,1);transition-delay:calc(var(--i) * .12s);}
html.js .yc-shapes.is-visible .yc-shape{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ html.js .yc-shapes .yc-shape{opacity:1;transform:none;transition:none;} }

/* =========================================================
   kinto（markit / tumblers-and-bottles）の要素の組み方を各所に（2026-11-07）。フォント・色・余白の値は今のまま
   ========================================================= */
/* 濃い横長ボタン（比較表／アクセサリー・パーツ の組み）。2つ並び・4つは2×2 */
.bar-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:800px;margin:clamp(32px,4vw,48px) auto 0;}
.bar-btn{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:16px 56px 16px 24px;background:var(--ink);color:#fff;text-decoration:none;transition:background .3s var(--ease);}
.bar-btn:hover{background:#2a2a2a;}
.bar-btn__en{font-family:var(--font-en);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;}
.bar-btn__label{font-size:14px;font-weight:500;letter-spacing:.06em;}
.bar-btn__arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:14px;transition:transform .3s var(--ease);}
.bar-btn:hover .bar-btn__arrow{transform:translate(.25em,-50%);}
.bar-btns--4{max-width:none;margin-top:0;}
@media (max-width:680px){ .bar-btns{grid-template-columns:1fr;} .bar-btn{min-height:56px;} }

/* /about/ の導入（markit ABOUT）：英字＋大見出し＋本文を左、右端まで抜ける写真、背景に薄い大きな英字 */
.kabout .container{position:relative;}
.kabout__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:start;position:relative;z-index:1;}
.kabout__eyebrow{font-family:var(--font-en);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);}
.kabout__eyebrow span{font-family:var(--font);font-size:12px;letter-spacing:.1em;margin-left:1em;}
.kabout__title{margin-top:clamp(16px,2vw,28px);font-size:clamp(1.8rem,3.6vw,52px);font-weight:600;line-height:1.4;letter-spacing:.03em;color:var(--ink);}
.kabout__sub{margin-top:clamp(20px,2.4vw,36px);font-size:18px;font-weight:500;line-height:1.9;letter-spacing:.06em;color:var(--ink);}
.kabout__body{margin-top:clamp(18px,2vw,28px);max-width:none;font-size:15px;}
.kabout__media{margin-right:calc(-1 * var(--gutter));aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);}
.kabout__media img{width:100%;height:100%;object-fit:cover;display:block;}
.kabout__wm{position:absolute;left:0;bottom:-.3em;z-index:0;margin:0;font-family:var(--font-en);font-weight:600;font-size:clamp(56px,11vw,160px);line-height:1;letter-spacing:-.02em;white-space:nowrap;color:var(--paper-2);pointer-events:none;user-select:none;}
.kabout{overflow:hidden;}
@media (max-width:900px){
  .kabout__grid{grid-template-columns:1fr;}
  .kabout__media{margin-right:calc(-1 * 30px);margin-left:0;}
  .kabout__title{font-size:clamp(1.6rem,6.4vw,32px);}
  .kabout__sub{font-size:16px;}
  .kabout__wm{font-size:clamp(48px,15vw,90px);bottom:-.2em;}
}

/* /about/ のアクセス（tumblers 下部）：写真に白文字｜地図、左右いっぱいの 50/50。2拠点で互い違い */
.ksplit{display:grid;grid-template-columns:1fr 1fr;}
.ksplit + .ksplit{margin-top:0;}
.ksplit__photo{position:relative;min-height:clamp(320px,36vw,520px);overflow:hidden;background:var(--ink);}
.ksplit__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;}
.ksplit__text{position:absolute;left:0;bottom:0;padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px);color:#fff;max-width:560px;}
.ksplit__en{font-family:var(--font-en);font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
.ksplit__en span{font-family:var(--font);font-size:13px;letter-spacing:.08em;margin-left:1em;}
.ksplit__addr{margin-top:16px;font-size:15px;font-weight:500;letter-spacing:.04em;line-height:1.8;}
.ksplit__note{margin-top:8px;font-size:13px;line-height:1.9;opacity:.85;}
.ksplit__map{background:var(--paper-2);min-height:clamp(320px,36vw,520px);}
.ksplit__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1);}
.ksplit--rev .ksplit__photo{order:2;}
.ksplit--rev .ksplit__map{order:1;}
@media (max-width:900px){
  .ksplit{grid-template-columns:1fr;}
  .ksplit__photo,.ksplit__map{min-height:0;}
  .ksplit__photo{aspect-ratio:4/3;}
  .ksplit__map{aspect-ratio:4/3;}
  .ksplit--rev .ksplit__photo{order:1;}
  .ksplit--rev .ksplit__map{order:2;}
  .ksplit + .ksplit{margin-top:16px;}
}

/* /service/ の冒頭（tumblers 冒頭）：角丸の写真に白い題、その下は大見出し左｜本文右 */
.khero{position:relative;aspect-ratio:21/9;border-radius:16px;overflow:hidden;background:var(--paper-2);}
.khero img{width:100%;height:100%;object-fit:cover;display:block;}
.khero::after{content:"";position:absolute;inset:0;background:rgba(26,26,26,.28);}
.khero__text{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;}
.khero__en{font-family:var(--font-en);font-size:clamp(2.4rem,5.2vw,74px);font-weight:400;line-height:1;letter-spacing:.02em;}
.khero__jp{margin-top:16px;font-size:14px;font-weight:500;letter-spacing:.14em;}
.ktwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:start;margin-top:clamp(40px,5.2vw,80px);}
.ktwo__title{font-size:clamp(1.4rem,2.5vw,36px);font-weight:600;line-height:1.6;letter-spacing:.04em;color:var(--ink);}
.ktwo__body{max-width:none;font-size:15px;}
@media (max-width:900px){
  .khero{aspect-ratio:4/3;border-radius:12px;}
  .ktwo{grid-template-columns:1fr;gap:20px;margin-top:32px;}
}

/* /works/・/journal/ の冒頭（tumblers COLLECTIONS）：見出し左＋絞り込みチップ右を同じ行に */
.khead{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start;margin-bottom:clamp(32px,4vw,56px);}
.khead .ph{margin-bottom:0;}
.khead .filter{margin:0;max-width:none;padding-top:clamp(6px,.8vw,12px);}
@media (max-width:900px){ .khead{grid-template-columns:1fr;gap:20px;} }

/* トップの動画の節（markit FULL CUSTOM）：濃い面に 文章左｜動画右、背景に薄い大きな英字 */
.home main > section.movie--dark{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding-block:clamp(72px,8vw,120px);}
.kdark{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;}
.kdark__eyebrow{font-family:var(--font-en);font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;}
.kdark__title{margin-top:clamp(14px,1.6vw,22px);font-family:var(--font-en);font-size:clamp(1.6rem,2.8vw,40px);font-weight:500;line-height:1.3;letter-spacing:.02em;}
.kdark__sub{margin-top:clamp(18px,2vw,28px);font-size:18px;font-weight:500;letter-spacing:.06em;}
.kdark__body{margin-top:14px;font-size:14px;line-height:2;opacity:.85;max-width:44ch;}
.kdark__text .btn-outline{margin-top:clamp(24px,2.6vw,36px);}
.btn-outline--w{color:#fff;border-color:rgba(255,255,255,.8);gap:.8em;}
.btn-outline--w:hover{background:#fff;color:var(--ink);}
.kdark__wm{position:absolute;left:-.04em;bottom:-.18em;z-index:0;margin:0;font-family:var(--font-en);font-weight:600;font-size:clamp(64px,13vw,200px);line-height:1;letter-spacing:-.02em;white-space:nowrap;color:rgba(255,255,255,.05);pointer-events:none;user-select:none;}
.movie--dark .movie__inner{display:block;}
.movie--dark .movie__media{aspect-ratio:16/9;background:#000;}
@media (max-width:900px){
  .kdark{grid-template-columns:1fr;gap:28px;}
  .kdark__title{font-size:clamp(1.4rem,6vw,28px);}
  .kdark__sub{font-size:16px;}
  .movie--dark .movie__media{aspect-ratio:9/16;max-height:70vh;}
}

/* トップの濃い面：.home の白背景の指定（section:not(.hero):not(.statement)）より強く */
.home main > section.section.movie.movie--dark{background:var(--ink);}

/* ヒーローの文字（What Color Is Yours.／あなたの色は何色ですか？）は中央寄せ（2026-11-07） */
.hero__copy--shapes{text-align:center;}

/* 節の見出し（.svc-head）を kinto markit の組みに：小さな和文を上、大きな英字を下（2026-11-07） */
.svc-head{display:flex;flex-direction:column;align-items:center;}
.svc-head--left{align-items:flex-start;}
.svc-head__jp{order:-1;margin:0 0 .9em;font-size:13px;letter-spacing:.16em;}
.svc-head__en{font-size:clamp(1.8rem,3.2vw,44px);font-weight:400;letter-spacing:.02em;line-height:1.1;}
.svc-head .prose--center{order:1;}
@media (max-width:680px){ .svc-head__en{font-size:clamp(1.6rem,8vw,32px);} }

/* 中央の一節の濃いボタンは中央に */
.concept-intro .bar-btns{margin-top:clamp(28px,3.2vw,44px);}
.ph--k{margin-bottom:0;}
.ph--k .ktwo{margin-bottom:0;}

/* =========================================================
   セクション間の余白（2026-11-07）：色が変わる境界は各150px、同じ色が続く境界は各75px（合計150px）
   白＝.band でも濃い面でもない section／薄いグレー＝.band／濃い面＝.movie--dark。ヒーローと言葉の節（.statement）は独自の値のまま
   ========================================================= */
:root{--rh:150px;--rh-same:75px;}
main > section:not(.hero):not(.statement):not(.village-gallery){padding-top:var(--rh);padding-bottom:var(--rh);}
main > section.village-gallery{padding-top:0;padding-bottom:0;}
main > section:not(.band):not(.movie--dark):not(.hero):not(.statement) + section:not(.band):not(.movie--dark){padding-top:var(--rh-same);}
main > section:not(.band):not(.movie--dark):not(.hero):not(.statement):has(+ section:not(.band):not(.movie--dark)){padding-bottom:var(--rh-same);}
main > section.band + section.band{padding-top:var(--rh-same);}
main > section.band:has(+ section.band){padding-bottom:var(--rh-same);}
/* 流れる写真の帯（白）は前後の白と1つの面：前後とも75 */
main > section.statement + section.village-gallery + section{padding-top:var(--rh-same);}
/* 最初の節（パンくずの下）・お問い合わせの冒頭・flush の指定は残す */
body:not(.home) main > section.section:first-of-type{padding-top:clamp(20px,2.4vw,32px);}
body:not(.home) main > section.section.section--flush-top{padding-top:0;}
body:not(.home) main > section.section.ct-hero{padding-bottom:0;}
main > section.section.pr-section{padding-top:var(--rh-same);padding-bottom:var(--rh-same);}
@media (max-width:680px){ :root{--rh:100px;--rh-same:50px;} }
/* サービスの下層ページ：見出しの下は、次が色の帯でもサービスのトップ（次が svc-about）と同じ余白にする（2026-11-13） */
main.page-sub > section.section:has(> .container > .ph){padding-bottom:var(--rh-same);}
/* 写真の面（Such as）：写真の上に白の半透明の幕、その上に中身。前後とは色が変わる境目として 150px（2026-11-13） */
.sec-photo{position:relative;background:#eee var(--bg) center / cover no-repeat;}
@media (max-width:680px){ .sec-photo{background-image:var(--bg-sp,var(--bg));} }
.sec-photo::before{content:"";position:absolute;inset:0;background:rgba(34,34,34,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.sec-photo > .container{position:relative;}
/* 濃いグレーの幕の上は白い文字（2026-11-14） */
.sec-photo{color:#fff;}
html body .sec-photo:not(#_) :is(.svc-head__en,.svc-head__jp,.list-dots li,.prose){color:#fff;}
html body .sec-photo:not(#_) .svc-head__jp,html body .sec-photo:not(#_) .prose{color:rgba(255,255,255,.85);}
html body .sec-photo:not(#_) .list-dots li{border-bottom-color:rgba(255,255,255,.3);}
html body .sec-photo:not(#_) .list-dots li::before{background:#fff;}
html body main > section.sec-photo:not(#_){padding-top:var(--rh);padding-bottom:var(--rh);}
html body main > section:has(+ section.sec-photo):not(#_){padding-bottom:var(--rh);}
html body main > section.sec-photo + section:not(#_){padding-top:var(--rh);}
.ktwo__title .ib{display:inline-block;}

/* =========================================================
   トップ Journal＝分野ごとに大1＋小4、Ranking＝PICK UP の組み（journal.botanistofficial.com）、
   YouTube＝流れるカード。見出しの英字は太字で共通（2026-11-07）
   ========================================================= */
/* 見出しの英字：太字で共通 */
.svc-head__en,.ph__en,.ph--concept .ph__en,.newsv__en,.rankv__en,.khero__en,.bcat__en,.page-hero__en,.hero__title--en{font-weight:700;}
.svc-head__en,.ph__en,.newsv__en,.rankv__en{letter-spacing:0;}

/* Journal：分野ブロック */
.bcat + .bcat{margin-top:clamp(72px,8vw,120px);}
.bcat__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(20px,2.4vw,32px);}
.bcat__title{display:flex;align-items:baseline;gap:18px;margin:0;}
.bcat__en{font-family:var(--font-en);font-size:clamp(1.6rem,2.6vw,36px);line-height:1;letter-spacing:.02em;color:var(--ink);}
.bcat__jp{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--ink-2);}
.bcat__all{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--ink);font-family:var(--font-en);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.bcat__all .arrow{transition:transform .3s var(--ease);}
.bcat__all:hover .arrow{transform:translateX(4px);}
.bcat__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.4vw,32px) clamp(16px,1.6vw,24px);}
.bcard--lg{grid-column:1 / 3;grid-row:1 / 3;}
.bcat--rev .bcard--lg{grid-column:3 / 5;}
.bcat--rev .bcard:not(.bcard--lg):nth-child(2),.bcat--rev .bcard:not(.bcard--lg):nth-child(4){grid-column:1;}
.bcat--rev .bcard:not(.bcard--lg):nth-child(3),.bcat--rev .bcard:not(.bcard--lg):nth-child(5){grid-column:2;}
.bcard__link{display:block;color:var(--ink);}
.bcard__thumb{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);}
.bcard__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease);}
.bcard__link:hover .bcard__thumb img{transform:scale(1.04);}
.bcard__body{display:block;margin-top:10px;}
.bcard__date{display:block;font-family:var(--font-en);font-size:12px;letter-spacing:.08em;color:var(--ink-2);}
.bcard__title{display:-webkit-box;margin-top:6px;font-size:14px;line-height:1.7;letter-spacing:.04em;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* 大きい1枚：写真いっぱい、日付と題を写真の上に白で */
.bcard--lg .bcard__link{position:relative;height:100%;min-height:360px;overflow:hidden;}
.bcard--lg .bcard__thumb{position:absolute;inset:0;aspect-ratio:auto;}
.bcard--lg .bcard__thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none;}
.bcard--lg .bcard__body{position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);margin:0;color:#fff;}
.bcard--lg .bcard__date{color:rgba(255,255,255,.85);}
.bcard--lg .bcard__title{font-size:16px;font-weight:500;-webkit-line-clamp:2;}
.bjournal__foot{display:flex;justify-content:center;margin-top:clamp(56px,6vw,88px);}
@media (max-width:900px){
  .bcat__cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bcard--lg,.bcat--rev .bcard--lg{grid-column:1 / 3;grid-row:auto;}
  .bcat--rev .bcard:not(.bcard--lg):nth-child(n){grid-column:auto;}
  .bcard--lg .bcard__link{min-height:0;aspect-ratio:4/3;height:auto;}
  .bcard:nth-child(n+4){display:none;}
}
@media (max-width:680px){
  .bcat__title{flex-direction:column;gap:8px;}
  .bcard__title{font-size:13px;}
  .bcard--lg .bcard__title{font-size:15px;}
}

/* Ranking：PICK UP の組み（見出し｜和文・正方形の写真・左上に順位と分野の札・下に矢印と進み具合の線） */
.rankv__head--pick{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:0;}
.rankv__head--pick .rankv__jp{margin:0 0 0 22px;padding-left:22px;border-left:1px solid var(--ink);line-height:1.2;}
.rankv__track{align-items:flex-start;gap:clamp(20px,2vw,28px);}
.rankv__item{flex:0 0 240px;}
.rankv__item:first-child{flex-basis:300px;}
.rankv__thumb{aspect-ratio:1/1;}
.rankv__tab{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 0;background:var(--paper);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink);}
.rankv__tab b{font-family:var(--font-en);font-size:14px;font-weight:700;letter-spacing:.04em;}
.band .rankv__tab{background:var(--paper-2);}
.rankv__meta{margin-top:12px;}
.rankv__name{margin-top:6px;font-size:14px;line-height:1.7;-webkit-line-clamp:3;}
.rankv__ctrl{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(28px,3vw,40px);}
.rankv__ctrl .rankv__arrow{width:44px;height:44px;font-size:15px;}
.rankv__progress{position:relative;display:block;width:min(240px,40%);height:2px;background:var(--line);overflow:hidden;}
.rankv__bar{position:absolute;left:0;top:0;height:100%;width:30%;background:var(--ink);transition:transform .2s linear;}
@media (max-width:680px){
  .rankv__head--pick{flex-direction:row;align-items:center;}
  .rankv__head--pick .rankv__jp{margin-left:14px;padding-left:14px;font-size:13px;}
  .rankv__item{flex-basis:200px;}
  .rankv__item:first-child{flex-basis:240px;}
}

/* YouTube：流れるカード（Journal で使っていた型）。本数が少ないぶん速さを合わせる */
.jcar--yt .jcar__track--flow{animation-duration:52s;}
.jcar__thumb--yt{position:relative;}
.jcar__play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(26,26,26,.72);}
.jcar__play::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;}
/* ジャーナルのアイキャッチは文字入りの16:9＝正方形に切ると文字が欠け、写真の上の白文字も読めない。
   写真は16:9のまま見せ、大きい1枚も題は写真の下に置く（2026-11-07） */
.bcard__thumb,.rankv__thumb{aspect-ratio:16/9;}
.bcard--lg .bcard__link{position:static;height:auto;min-height:0;overflow:visible;}
.bcard--lg .bcard__thumb{position:relative;inset:auto;aspect-ratio:16/9;}
.bcard--lg .bcard__thumb::after{content:none;}
.bcard--lg .bcard__body{position:static;margin-top:16px;color:var(--ink);}
.bcard--lg .bcard__date{color:var(--ink-2);}
.bcard--lg .bcard__title{margin-top:8px;font-size:clamp(16px,1.4vw,20px);font-weight:600;line-height:1.6;}
.bcat__cards{align-items:start;}
.rankv__item{flex-basis:280px;}
.rankv__item:first-child{flex-basis:360px;}
@media (max-width:900px){ .bcard--lg .bcard__link{aspect-ratio:auto;} }
@media (max-width:680px){ .rankv__item{flex-basis:240px;} .rankv__item:first-child{flex-basis:280px;} }
/* YouTube の再生の印：サムネイルの文字にかからないよう右下に小さく */
.jcar__play{left:auto;top:auto;right:12px;bottom:12px;width:40px;height:40px;margin:0;}
.jcar__play::after{left:16px;top:12px;border-width:8px 0 8px 12px;}
/* ジャーナル本文の「メモ帳」の吹き出し（本番の記事が class="jp-memo" で書いている。旧テーマ post-detail.css と同じ見た目・2026-11-07） */
.jp-memo{position:relative;background:var(--paper-2);border-radius:12px;padding:28px 36px;line-height:2;color:var(--ink);font-size:16px;margin:32px 0 46px;}
.jp-memo::after{content:"";position:absolute;left:48px;bottom:-13px;width:0;height:0;border:14px solid transparent;border-bottom:0;border-top-color:var(--paper-2);}
@media (max-width:680px){ .jp-memo{padding:22px 20px;} }
/* トップ Journal：アイキャッチは文字入りの16:9。左の1枚も切らずに16:9で見せ、題は画像の下に置く（2026-11-11）。
   画像に白文字を重ねる組みは、文字入りの画像では題が欠けるので使わない */
/* 右の4枚のサムネイルは16:9（2026-11-07） */
.bjournal .bcard:not(.bcard--lg) .bcard__thumb{aspect-ratio:16/9;}
/* 右の4枚：写真と日付の間は25px（2026-11-07） */
.bjournal .bcard:not(.bcard--lg) .bcard__body{margin-top:25px;}
/* トップ Journal：題の下に書いた人（丸く切り抜いた顔写真＋名前）（2026-11-07） */
.bcard__author{display:flex;align-items:center;gap:10px;margin-top:14px;}
.bcard__avatar{flex:0 0 32px;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--paper-2);}
.bcard__avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.bcard__author-name{font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:var(--ink-2);}
/* ヘッダーとメインの幅を左右20pxずつ内側に（全ページ共通・PC。スマホは今のまま）（2026-11-07） */
@media (min-width:681px){ :root{--gutter:calc(clamp(20px,4.5vw,96px) + 20px);} }
/* /works/ の事例カードは3列（2026-11-07） */
.works--archive .works__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px;}
@media (max-width:900px){ .works--archive .works__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px;} }
@media (max-width:680px){ .works--archive .works__grid{gap:32px 16px;} }
/* 制作実績の詳細：メインイメージの下の余白を 214px → 120px に（ph の下64px をなくし、節の下を45pxに）（2026-11-07） */
html body.single-works main > section.section:has(.ph__media--wide):not(#_){padding-bottom:45px;}
body.single-works .ph:has(.ph__media--wide){margin-bottom:0;}
/* =========================================================
   開閉式の絞り込み（www.clasishome.jp/works/ の組み）（2026-11-07）
   濃いグレーの横長ボタン（アイコン＋見出し＋＋）→ 窓：濃い帯の見出し、左に縦のタブ、右に選択肢
   ========================================================= */
.khead .fsel{padding-top:clamp(6px,.8vw,12px);}
.fsel__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.fsel__btn{position:relative;display:flex;align-items:center;gap:16px;min-height:72px;padding:0 64px 0 28px;border:0;background:#4D4D4F;color:#fff;font-family:inherit;font-size:15px;font-weight:500;letter-spacing:.08em;text-align:left;cursor:pointer;transition:background .3s var(--ease);}
.fsel__btn:hover{background:var(--ink);}
.fsel__btn svg,.fsel__head svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.fsel__plus{position:absolute;right:28px;top:50%;width:16px;height:16px;margin-top:-8px;}
.fsel__plus::before,.fsel__plus::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;}
.fsel__plus::after{transform:rotate(90deg);}
.fsel__now{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;font-size:13px;color:var(--ink-2);}
.fsel__now-label{font-size:12px;letter-spacing:.1em;}
.fsel__now-item{padding:.25em .9em;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;}
.fsel__reset{font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;}
.fsel__count{margin-left:auto;font-family:var(--font-en);letter-spacing:.1em;}
/* 窓 */
.fsel__modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s var(--ease);}
.fsel__modal.is-open{opacity:1;}
.fsel__bg{position:absolute;inset:0;background:rgba(26,26,26,.55);}
.fsel__box{position:relative;width:min(880px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--paper-2);overflow:hidden;transform:translateY(12px);transition:transform .3s var(--ease);}
.fsel__modal.is-open .fsel__box{transform:none;}
.fsel__head{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:76px;padding:0 72px;background:#4D4D4F;color:#fff;}
.fsel__title{margin:0;font-size:17px;font-weight:600;letter-spacing:.1em;}
.fsel__close{position:absolute;right:24px;top:50%;width:40px;height:40px;margin-top:-20px;border:0;background:none;cursor:pointer;}
.fsel__close::before,.fsel__close::after{content:"";position:absolute;left:9px;top:50%;width:22px;height:1.5px;background:#fff;transform:rotate(45deg);}
.fsel__close::after{transform:rotate(-45deg);}
.fsel__body{display:grid;grid-template-columns:64px minmax(0,1fr);min-height:360px;overflow:hidden;}
.fsel__tabs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.fsel__tabs li{flex:1;}
.fsel__tabs button{width:100%;height:100%;min-height:120px;border:0;border-bottom:1px solid var(--paper);background:#D9D9D9;color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.2em;writing-mode:vertical-rl;cursor:pointer;transition:background .2s var(--ease);}
.fsel__tabs button.is-active{background:var(--paper-2);}
.fsel__panes{overflow-y:auto;padding:clamp(28px,3.4vw,48px) clamp(24px,4vw,64px);}
.fsel__pane{display:none;list-style:none;margin:0;padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px;}
.fsel__pane.is-active{display:grid;}
.fsel__item{display:flex;align-items:center;gap:12px;padding:10px 4px;font-size:15px;color:var(--ink);text-decoration:none;}
.fsel__item:hover{text-decoration:underline;text-underline-offset:4px;}
.fsel__check{position:relative;flex:0 0 18px;width:18px;height:18px;border:1px solid #BDBDBD;background:var(--paper);}
.fsel__item.is-active .fsel__check{background:var(--ink);border-color:var(--ink);}
.fsel__item.is-active .fsel__check::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.fsel__item.is-active{font-weight:600;}
.fsel__n{margin-left:2px;font-family:var(--font-en);font-size:12px;color:var(--ink-2);}
@media (max-width:900px){ .fsel__btns{grid-template-columns:1fr;} }
@media (max-width:680px){
  .fsel__btn{min-height:60px;padding:0 52px 0 20px;font-size:14px;}
  .fsel__plus{right:20px;}
  .fsel__modal{padding:12px;}
  .fsel__head{min-height:60px;}
  .fsel__body{grid-template-columns:48px minmax(0,1fr);}
  .fsel__tabs button{min-height:96px;font-size:14px;}
  .fsel__pane{grid-template-columns:1fr;}
  .fsel__item{font-size:14px;}
}
.fsel__modal[hidden]{display:none;}   /* 閉じている間は場所も取らない（display:flex が hidden を上書きして、透明な窓がページ全体のクリックを吸っていた） */
/* タブは上から決まった高さで積む（残りは灰色の地）。窓は中身の高さに */
.fsel__box{height:auto;}
.fsel__body{min-height:0;align-items:stretch;}
.fsel__tabs{background:#D9D9D9;}
.fsel__tabs li{flex:none;}
.fsel__tabs button{height:auto;min-height:130px;}
.fsel__panes{max-height:calc(100vh - 48px - 76px);}
@media (max-width:680px){ .fsel__tabs button{min-height:110px;} .fsel__panes{max-height:calc(100vh - 24px - 60px);} }
/* khead の下の余白を広く（PC 56→88px・SP 32→48px）（2026-11-07） */
.khead{margin-bottom:clamp(48px,6.1vw,88px);}
/* 絞り込みの掛け合わせ（チェックボックス＋「クリア」「検索する」）（2026-11-07） */
.fsel__pane li{position:relative;}
.fsel__cb{position:absolute;opacity:0;width:1px;height:1px;}
.fsel__item{cursor:pointer;}
.fsel__cb:checked + .fsel__item{font-weight:600;}
.fsel__cb:checked + .fsel__item .fsel__check{background:var(--ink);border-color:var(--ink);}
.fsel__cb:checked + .fsel__item .fsel__check::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.fsel__cb:focus-visible + .fsel__item{outline:2px solid var(--ink);outline-offset:2px;}
.fsel__foot{display:flex;justify-content:center;align-items:center;gap:16px;padding:20px 24px 28px;background:var(--paper-2);border-top:1px solid #DADADA;}
.fsel__clear{border:0;background:none;padding:12px 16px;font-family:inherit;font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;cursor:pointer;}
.fsel__submit{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:min(320px,70%);min-height:56px;padding:0 32px;border:0;border-radius:6px;background:#4D4D4F;color:#fff;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.12em;cursor:pointer;transition:background .3s var(--ease);}
.fsel__submit:hover{background:var(--ink);}
.fsel__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fff;color:var(--ink);font-family:var(--font-en);font-size:12px;font-weight:600;}
.fsel__panes{max-height:calc(100vh - 48px - 76px - 105px);}
@media (max-width:680px){ .fsel__panes{max-height:calc(100vh - 24px - 60px - 100px);} .fsel__submit{min-height:50px;} }
/* =========================================================
   スタッフ紹介（一覧・詳細）：smilebaton.co.jp/member/ の組み（2026-11-07）
   ========================================================= */
/* 一覧：大きな英字＋右を丸く切った写真＋右下に一言とリンク */
.page-staff main > .mb-hero, main.page-staff > .mb-hero{padding-top:clamp(20px,2.4vw,32px);}
.mb-hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-rows:auto auto;align-items:end;padding-left:var(--gutter);}
.mb-hero__title{grid-column:1;grid-row:1;position:relative;z-index:2;}
.mb-hero__en{margin:0;font-family:var(--font-en);font-size:clamp(4rem,10vw,150px);font-weight:700;line-height:.9;letter-spacing:-.02em;color:var(--ink);}
.mb-hero__jp{margin:.6em 0 0;font-size:14px;font-weight:600;letter-spacing:.1em;}
.mb-hero__pict{grid-column:1;grid-row:2;margin:-.35em 0 0 calc(var(--gutter) * -1);aspect-ratio:16/9;overflow:hidden;border-radius:0 999px 999px 0;}
.mb-hero__pict img{width:100%;height:100%;object-fit:cover;display:block;}
.mb-hero__intro{grid-column:2;grid-row:2;align-self:center;padding:0 var(--gutter) 0 clamp(24px,4vw,64px);}
.mb-hero__lead{margin:0;font-size:15px;line-height:2;letter-spacing:.06em;text-align:right;}
.mb-hero__nav{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.mb-hero__nav a{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;}
/* 一覧：縦の透かし文字＋3列のカード */
.mb-list{position:relative;overflow:hidden;}
.mb-list__wm{position:absolute;left:clamp(0px,1.5vw,24px);top:clamp(80px,9vw,140px);margin:0;writing-mode:vertical-rl;font-family:var(--font-en);font-size:clamp(5rem,9vw,140px);font-weight:400;line-height:1;letter-spacing:.04em;color:var(--paper-2);pointer-events:none;user-select:none;}
.mb-list .container{position:relative;}
.mb-list__label{margin:0 0 clamp(24px,3vw,40px);font-size:14px;font-weight:600;letter-spacing:.1em;}
.mb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,6vw,88px) clamp(24px,3vw,48px);}
.mb-card__link{display:block;color:var(--ink);}
.mb-card__thumb{position:relative;display:block;aspect-ratio:1/1;border-radius:12px;background:var(--paper-2);}
.mb-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;transition:transform .8s var(--ease);}
.mb-card__link:hover .mb-card__thumb img{transform:scale(1.02);}
.mb-tag{position:absolute;left:-6px;bottom:-12px;display:inline-block;padding:.35em .9em;background:var(--tag,#E8734A);color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.4;}
.mb-card__body{display:block;margin-top:28px;}
.mb-card__name{display:block;font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.5;}
.mb-card__name small{font-size:13px;font-weight:500;}
.mb-card__romaji{display:block;margin-top:2px;font-family:var(--font-en);font-size:12px;letter-spacing:.1em;color:var(--ink-2);}
.mb-card__job{display:block;margin-top:4px;font-size:14px;font-weight:600;letter-spacing:.04em;}
.mb-card__txt{display:block;margin-top:14px;font-size:14px;line-height:1.9;color:var(--ink-2);}
.mb-card__dl{display:block;margin-top:16px;}
.mb-card__dt{display:block;margin-top:10px;font-size:13px;font-weight:700;}
.mb-card__dd{display:block;margin-top:2px;padding-left:1em;font-size:13px;line-height:1.8;color:var(--ink-2);}
.mb-card__more{display:flex;justify-content:flex-end;}
.mb-card__more{margin-top:20px;}
.mb-card__more{font-family:var(--font-en);font-size:15px;font-weight:600;letter-spacing:.04em;}
.mb-card__more .arrow{margin-left:10px;transition:transform .3s var(--ease);}
.mb-card__link:hover .mb-card__more .arrow{transform:translateX(4px);}
.mb-card__more{border-bottom:0;}
.mb-card--you{display:flex;align-items:flex-start;justify-content:center;}
.mb-you{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(40px,8vw,120px);color:var(--ink);text-align:center;}
.mb-you__circle{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:#E8734A;color:#fff;font-size:40px;line-height:1;transition:transform .4s var(--ease);}
.mb-you:hover .mb-you__circle{transform:rotate(90deg);}
.mb-you__label{font-family:var(--font-en);font-size:16px;font-weight:700;letter-spacing:.1em;}
.mb-you__txt{font-size:13px;color:var(--ink-2);}
@media (max-width:900px){ .mb-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:680px){
  .mb-hero__inner{grid-template-columns:1fr;padding-left:var(--gutter);}
  .mb-hero__intro{grid-column:1;grid-row:3;padding:24px var(--gutter) 0 0;}
  .mb-hero__lead{text-align:left;font-size:14px;}
  .mb-hero__nav{flex-direction:row;align-items:center;justify-content:flex-start;gap:24px;}
  .mb-grid{grid-template-columns:1fr;}
  .mb-list__wm{left:auto;right:0;}
}
/* 詳細：大きなローマ字の名前・丸い地に写真・右端に縦書き */
main.page-staff-single > .md-hero{padding-top:clamp(20px,2.4vw,32px);}
.md-hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) auto;align-items:center;min-height:clamp(420px,42vw,620px);padding-left:var(--gutter);}
.md-hero__inner::before{content:"";position:absolute;z-index:0;left:22%;right:0;top:0;bottom:0;background:var(--paper-2);border-radius:999px 0 0 999px;}
.md-hero__text{position:relative;z-index:2;}
.md-hero__back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:14px;letter-spacing:.04em;color:var(--ink);}
.md-hero__name{position:relative;margin:clamp(16px,2vw,28px) 0 0;font-family:var(--font-en);font-size:clamp(3.2rem,8vw,120px);font-weight:600;line-height:.95;letter-spacing:-.01em;}
.md-hero__name > span:not(.mb-tag){display:block;}
.md-hero__tag{position:absolute;left:auto;right:auto;bottom:auto;top:46%;margin-left:12px;font-family:var(--font);font-size:13px;}
.md-hero__ja{margin:clamp(20px,2.4vw,32px) 0 0;font-size:15px;font-weight:700;letter-spacing:.08em;}
.md-hero__ja small{font-size:12px;font-weight:500;}
.md-hero__role{margin:4px 0 0;font-size:14px;font-weight:600;}
.md-hero__bio{margin:12px 0 0;max-width:30em;font-size:14px;line-height:1.9;color:var(--ink-2);}
.md-hero__pict{position:relative;z-index:1;margin:0;align-self:end;justify-self:center;width:min(100%,460px);aspect-ratio:4/5;overflow:hidden;border-radius:12px 12px 0 0;}
.md-hero__pict img{width:100%;height:100%;object-fit:cover;display:block;}
.md-hero__catch{position:relative;z-index:2;margin:0;padding:clamp(24px,3vw,48px) var(--gutter) 0 clamp(16px,2vw,32px);align-self:start;writing-mode:vertical-rl;font-size:clamp(18px,1.8vw,24px);font-weight:700;line-height:1.9;letter-spacing:.12em;}
/* 詳細：左に止まる写真＋右に本文 */
.md-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,80px);}
.md-body__pict{position:sticky;top:0;margin:0;height:100vh;overflow:hidden;border-radius:0 24px 24px 0;}
.md-body__pict img{width:100%;height:100%;object-fit:cover;display:block;}
.md-body__main{padding:clamp(24px,4vw,64px) var(--gutter) 0 0;max-width:680px;}
.md-body__h{margin:0 0 clamp(24px,3vw,40px);font-size:clamp(1.4rem,2.2vw,28px);font-weight:700;line-height:1.6;letter-spacing:.06em;}
.md-qa + .md-qa{margin-top:clamp(36px,4vw,56px);}
.md-qa__q{position:relative;margin:0 0 16px;padding-left:2em;font-size:15px;font-weight:700;line-height:1.8;}
.md-qa__q::before{content:"";position:absolute;left:0;top:.9em;width:1.3em;height:1px;background:var(--ink);}
.md-qa__a{font-size:15px;line-height:2;color:var(--ink);}
.md-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:clamp(32px,4vw,48px) 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:14px;}
.md-dl dt{font-weight:700;}
.md-dl dd{margin:0;color:var(--ink-2);}
.md-sns{display:flex;gap:24px;margin:24px 0 0;}
.md-sns a{font-family:var(--font-en);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--ink);border-bottom:1px solid var(--ink);}
.md-others__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.md-others__list a{display:block;color:var(--ink);}
.md-others__thumb{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:var(--paper-2);}
.md-others__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.md-others__name{display:block;margin-top:14px;font-size:15px;font-weight:700;}
.md-others__role{display:block;margin-top:2px;font-size:13px;color:var(--ink-2);}
.md-others__back{margin-top:clamp(32px,4vw,56px);text-align:center;}
@media (max-width:900px){
  .md-hero__inner{grid-template-columns:1fr auto;min-height:0;padding-right:0;}
  .md-hero__inner::before{left:30%;top:auto;height:60%;}
  .md-hero__text{grid-column:1 / -1;padding-right:var(--gutter);}
  .md-hero__pict{grid-column:1;margin-top:32px;width:min(80%,420px);}
  .md-hero__catch{grid-column:2;font-size:17px;}
  .md-body{grid-template-columns:1fr;}
  .md-body__pict{position:relative;height:auto;aspect-ratio:4/3;border-radius:0 16px 16px 0;margin-right:var(--gutter);}
  .md-body__main{padding:0 var(--gutter);}
  .md-others__list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* スタッフ紹介の詳細＝recruit.owndays.com の社員インタビューの組みに変更（2026-11-07。上の md-* は使っていない） */
main.page-staff-single > .od-head{padding-top:clamp(20px,2.4vw,32px);padding-bottom:clamp(32px,4vw,48px);}
.od-head__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px;align-items:start;}
.od-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--ink);text-decoration:underline;text-underline-offset:4px;}
.od-back span{font-size:18px;line-height:1;text-decoration:none;}
.od-cat{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.1em;}
.od-cat__dot{width:9px;height:9px;border-radius:50%;background:#7FB69E;}
.od-cat__sep{color:var(--ink-2);font-weight:400;}
.od-title{margin:16px 0 0;font-size:clamp(1.4rem,2.2vw,28px);font-weight:700;line-height:1.6;letter-spacing:.04em;}
.od-tags{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.od-tags li{padding:.25em .9em;border:1px solid var(--ink);border-radius:999px;font-size:12px;letter-spacing:.04em;}
.od-main{margin:0;aspect-ratio:24/7;overflow:hidden;}
.od-main img{width:100%;height:100%;object-fit:cover;display:block;}
main.page-staff-single > .od-body{padding-top:clamp(64px,7vw,110px);}
.od-flex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(32px,5vw,80px);align-items:start;}
.od-side__sticky{position:sticky;top:120px;}
.od-side__title{margin:14px 0 0;font-size:16px;font-weight:600;line-height:1.9;letter-spacing:.04em;}
.od-share{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:28px 0 0;font-family:var(--font-en);font-size:12px;letter-spacing:.06em;}
.od-share span{color:var(--ink-2);}
.od-share a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.od-share--sp{display:none;}
.od-profile{display:grid;grid-template-columns:auto 1fr;gap:16px 24px;align-items:center;padding:clamp(24px,3vw,36px);background:var(--paper-2);border-radius:8px;}
.od-profile__img{width:72px;height:72px;border-radius:50%;overflow:hidden;}
.od-profile__img img{width:100%;height:100%;object-fit:cover;display:block;}
.od-profile__name{margin:0;font-size:16px;font-weight:700;letter-spacing:.06em;}
.od-profile__name span{margin-left:10px;font-family:var(--font-en);font-size:12px;font-weight:500;color:var(--ink-2);}
.od-profile__post{margin:6px 0 0;font-size:13px;color:var(--ink-2);}
.od-profile__intro{grid-column:1 / -1;margin:0;font-size:14px;line-height:1.9;}
.od-article{margin-top:clamp(56px,6vw,88px);}
.od-article__h2{margin:0 0 clamp(24px,3vw,40px);font-size:clamp(1.3rem,2vw,24px);font-weight:700;line-height:1.6;}
.od-article h3{margin:clamp(40px,4.4vw,64px) 0 20px;font-size:17px;font-weight:700;line-height:1.7;letter-spacing:.04em;}
.od-article h3:first-child,.od-article__h2 + h3{margin-top:0;}
.od-article p{margin:0;font-size:15px;line-height:2.1;letter-spacing:.04em;}
.od-article p + p{margin-top:1.6em;}
.od-links{display:flex;gap:20px;margin-top:32px !important;}
.od-links a{font-family:var(--font-en);font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;}
/* はみだし：四隅にかぎ括弧の囲み */
.od-hami{position:relative;margin-top:clamp(56px,6vw,88px);padding:clamp(32px,4vw,56px) clamp(24px,4vw,56px);}
.od-hami::before,.od-hami::after{content:"";position:absolute;left:0;right:0;height:30px;pointer-events:none;
  background:linear-gradient(var(--ink),var(--ink)) left top/30px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) left top/2px 30px no-repeat,
             linear-gradient(var(--ink),var(--ink)) right top/30px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) right top/2px 30px no-repeat;}
.od-hami::before{top:0;}
.od-hami::after{bottom:0;transform:scaleY(-1);}
.od-hami + .od-hami{margin-top:32px;}
.od-hami__label{display:inline-block;margin:0;padding:.45em 1.2em;border-radius:999px 999px 999px 0;background:var(--ink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;}
.od-hami__title{margin:16px 0 0;font-size:18px;font-weight:700;letter-spacing:.06em;}
.od-hami__text{margin-top:16px;font-size:15px;line-height:2;}
.od-hami__text p{margin:0;}
.od-backc{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:clamp(64px,7vw,110px);}
/* ほかのスタッフ */
.od-rec__title{margin:0 0 clamp(28px,3vw,44px);font-family:var(--font-en);font-size:clamp(1.6rem,2.6vw,36px);font-weight:700;letter-spacing:.06em;text-align:center;}
.od-rec__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.od-rec__card{display:block;height:100%;padding:24px;background:var(--paper);border-radius:8px;color:var(--ink);}
.od-rec__wrap{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;margin-top:16px;}
.od-rec__thumb{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:6px;background:var(--paper-2);}
.od-rec__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.od-rec__name{font-size:14px;font-weight:600;line-height:1.8;}
.od-rec__more{display:block;margin-top:16px;font-family:var(--font-en);font-size:12px;letter-spacing:.08em;text-align:right;color:var(--ink-2);}
.od-rec__card:hover .od-rec__more{color:var(--ink);}
@media (max-width:900px){
  .od-head__inner{grid-template-columns:1fr;}
  .od-main{aspect-ratio:16/9;}
  .od-flex{grid-template-columns:1fr;}
  .od-side{display:none;}
  .od-share--sp{display:flex;margin:0;}
  .od-rec__list{grid-template-columns:1fr;}
}
/* =========================================================
   ABOUT：botanistofficial.com/about/ の組み（2026-11-07）
   ========================================================= */
.ba-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 14px;margin:0 0 clamp(32px,4vw,56px);padding-left:clamp(0px,3vw,48px);}
.ba-title--center{justify-content:center;padding-left:0;}
.ba-title__en{font-family:var(--font-en);font-size:clamp(1.6rem,2.4vw,32px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.ba-title__sep{font-size:18px;color:var(--ink-2);}
.ba-title__jp{font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--ink-2);}
/* 見出し＋一言 */
main.page-about--ba > .ba-head{padding-top:clamp(20px,2.4vw,32px);}
.ba-head__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,5vw,96px);align-items:end;}
.ba-head__title{margin:0;}
.ba-head__en{display:block;font-family:var(--font-en);font-size:clamp(3rem,6vw,88px);font-weight:700;line-height:1;letter-spacing:.02em;text-transform:uppercase;}
.ba-head__jp{display:block;margin-top:14px;font-size:14px;font-weight:600;letter-spacing:.1em;}
.ba-head__lead{font-size:15px;line-height:2.1;letter-spacing:.06em;}
.ba-head__lead p{margin:0;}
.ba-head__catch{margin-bottom:12px !important;font-size:clamp(1.3rem,2vw,24px);font-weight:700;letter-spacing:.08em;}
/* STORY：横いっぱいの写真に白文字 */
.ba-band{position:relative;min-height:clamp(520px,52vw,760px);display:flex;align-items:center;background:var(--bg) center/cover no-repeat;background-attachment:fixed;color:#fff;}
.ba-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.62),rgba(20,20,20,.2) 70%);}
.ba-band .container{position:relative;width:100%;}
.ba-band__text{max-width:30em;padding-left:clamp(0px,6vw,96px);font-size:15px;line-height:2.2;letter-spacing:.08em;}
.ba-band__text p{margin:0;}
.ba-band__text p + p{margin-top:1.6em;}
@media (hover:none),(max-width:900px){ .ba-band{background-attachment:scroll;} }
/* STORY：文｜写真＋小さな写真 */
.ba-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:center;margin-top:clamp(80px,9vw,140px);}
.ba-row__text{padding-left:clamp(0px,6vw,96px);font-size:15px;line-height:2.1;letter-spacing:.04em;}
.ba-row__text p{margin:0;}
.ba-row__text p + p{margin-top:1.4em;}
.ba-row__head{margin-bottom:28px !important;font-size:clamp(1.15rem,1.7vw,22px);font-weight:700;line-height:1.8;letter-spacing:.06em;}
.ba-row__media,.ba-concept__media{position:relative;}
.ba-row__main,.ba-concept__main{margin:0;overflow:hidden;}
.ba-row__main img,.ba-concept__main img{width:100%;height:100%;object-fit:cover;display:block;}
.ba-row__main{aspect-ratio:4/3;}
.ba-card{position:absolute;margin:0;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);}
.ba-card img{width:100%;height:100%;object-fit:cover;display:block;}
.ba-card--1{width:30%;aspect-ratio:1/1;left:-14%;bottom:-12%;}
.ba-card--2{width:22%;aspect-ratio:3/4;right:-4%;top:-14%;}
.ba-card--3{width:34%;aspect-ratio:1/1;left:-22%;top:12%;}
/* PHILOSOPHY */
.ba-concept__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,6vw,110px);align-items:center;}
.ba-concept__text{padding-left:clamp(0px,6vw,96px);}
.ba-concept__head{margin:0 0 clamp(24px,3vw,40px);font-size:clamp(1.6rem,2.8vw,40px);font-weight:700;line-height:1.6;letter-spacing:.08em;}
.ba-concept__lead{font-size:15px;line-height:2.2;letter-spacing:.06em;}
.ba-concept__lead p{margin:0;}
.ba-concept__lead p + p{margin-top:1.6em;}
.ba-concept__main{aspect-ratio:3/4;max-width:460px;margin-left:auto;}
/* VISION & MISSION */
.ba-mrow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center;}
.ba-mrow + .ba-mrow{margin-top:clamp(64px,8vw,120px);}
.ba-mrow--rev .ba-mrow__media{order:2;}
.ba-mrow__media{margin:0;aspect-ratio:1/1;overflow:hidden;}
.ba-mrow__media img{width:100%;height:100%;object-fit:cover;display:block;}
.ba-mrow__label{display:flex;align-items:baseline;gap:12px;margin:0;font-family:var(--font-en);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.ba-mrow__label span{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--ink-2);text-transform:none;}
.ba-mrow__head{margin:18px 0 0;font-size:clamp(1.3rem,2.2vw,30px);font-weight:700;line-height:1.7;letter-spacing:.06em;}
.ba-mrow__body{margin:22px 0 0;font-size:15px;line-height:2.1;letter-spacing:.04em;}
/* VIEW MORE */
.ba-more__h{margin:0 0 24px;font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.ba-more__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;}
.ba-link{position:relative;display:block;aspect-ratio:16/7;overflow:hidden;color:#fff;}
.ba-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease);}
.ba-link::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.38);transition:background .4s var(--ease);}
.ba-link:hover img{transform:scale(1.04);}
.ba-link:hover::after{background:rgba(20,20,20,.5);}
.ba-link__text{position:absolute;z-index:2;left:clamp(20px,2.6vw,40px);bottom:clamp(20px,2.6vw,36px);}
.ba-link__en{display:block;font-family:var(--font-en);font-size:clamp(1.3rem,2.2vw,30px);font-weight:700;letter-spacing:.08em;}
.ba-link__jp{display:block;margin-top:4px;font-size:13px;letter-spacing:.08em;}
.ba-link__arrow{position:absolute;z-index:2;right:clamp(20px,2.6vw,40px);bottom:clamp(24px,2.8vw,40px);font-size:18px;}
@media (max-width:900px){
  .ba-head__inner,.ba-row,.ba-concept__body,.ba-mrow{grid-template-columns:1fr;}
  .ba-mrow--rev .ba-mrow__media{order:0;}
  .ba-row__text,.ba-concept__text,.ba-band__text{padding-left:0;}
  .ba-card--1{left:-4%;bottom:-8%;}
  .ba-card--2{right:0;}
  .ba-card--3{left:auto;right:58%;top:auto;bottom:-6%;width:30%;}
  .ba-concept__main{margin:0 auto;max-width:none;width:72%;}
  .ba-more__grid{grid-template-columns:1fr;}
  .ba-link{aspect-ratio:16/8;}
}
@media (max-width:680px){ .br-pc{display:none;} .ba-band__text{font-size:14px;} }

/* =========================================================
   メインの横幅を botanistofficial.com/about/ に近づける（2026-11-07）
   PC（1001px以上）は main の中だけ左右の余白を 10.25vw に（1766px 幅で 181px・本文 1404px）。
   ヘッダー・フッター・トップのヒーローは今の線（ロゴの位置）のまま
   ========================================================= */
@media (min-width:1001px){
  main{--gutter:max(calc(clamp(20px,4.5vw,96px) + 20px),10.25vw);}
  main .hero{--gutter:calc(clamp(20px,4.5vw,96px) + 20px);}
}

/* ページの大見出し（英字）を下層ページ共通の .ph__en にそろえる（ABOUT・スタッフ紹介） */
.ba-head__en,.mb-hero__en{font-size:clamp(2.2rem,3.8vw,54px);font-weight:700;line-height:1;letter-spacing:0;text-transform:none;}
.mb-hero__pict{margin-top:clamp(24px,3vw,40px);}
@media (max-width:680px){ .ba-head__en,.mb-hero__en{font-size:32px;} }
@media (min-width:681px){ .mb-hero__inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr);} .mb-hero__intro{padding-left:clamp(16px,2vw,32px);} }

/* =========================================================
   コンセプト Vision の節：理念・ミッション・ビジョンの図（inc/page-parts.php apx_mv_figure()・2026-11-07）
   土台（黒）＝理念／その上の6段＝ミッションの2巡（右へ行くほど高く・濃く）／右上＝ビジョン
   ========================================================= */
.mvfig{--h0:64px;--dh:40px;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto auto;max-width:1000px;margin:clamp(48px,6vw,88px) auto 0;}
.mvfig__label{display:block;font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.12em;}
.mvfig__vision{grid-column:4 / 7;grid-row:1;justify-self:end;text-align:right;padding-bottom:clamp(16px,2vw,24px);}
.mvfig__vtext{margin:8px 0 0;font-size:clamp(1.2rem,1.9vw,24px);font-weight:700;line-height:1.6;letter-spacing:.08em;}
.mvfig__mission{grid-column:1 / 4;grid-row:2;align-self:start;position:relative;z-index:2;padding-top:4px;}
.mvfig__mtext{margin:8px 0 0;font-size:16px;font-weight:700;line-height:1.9;letter-spacing:.06em;}
.mvfig__note{margin:12px 0 0;font-size:14px;line-height:1.9;color:var(--ink-2);}
.mvfig__path{grid-column:1 / 7;grid-row:2;width:100%;height:calc(100% - var(--h0) / 2);align-self:start;overflow:visible;pointer-events:none;}
.mvfig__path line{stroke:var(--ink);stroke-width:1;stroke-dasharray:4 6;}
.mvfig__steps{grid-column:1 / 7;grid-row:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;list-style:none;margin:0;padding:0;}
.mvfig__step{--lv:calc(.08 + var(--i) * .16);position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;height:calc(var(--h0) + var(--i) * var(--dh));min-height:0;padding:14px 12px;border-left:1px solid var(--paper-2);background:color-mix(in srgb,var(--ink) calc(var(--lv) * 100%),#fff);color:var(--ink);transform-origin:bottom;}
.mvfig__step:nth-child(n+4){color:#fff;}
.mvfig__round{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.1em;opacity:.6;}
.mvfig__round::before{content:"Round ";}
.mvfig__word{font-size:15px;font-weight:700;letter-spacing:.06em;line-height:1.4;}
.mvfig__base{grid-column:1 / 7;grid-row:3;display:flex;align-items:center;justify-content:center;gap:24px;padding:clamp(20px,2.4vw,30px) 24px;background:var(--ink);color:#fff;}
.mvfig__btext{margin:0;font-size:clamp(1.1rem,1.8vw,22px);font-weight:700;letter-spacing:.16em;}
html.js .mvfig.reveal{opacity:1;transform:none;}
html.js .mvfig.reveal .mvfig__step{transform:scaleY(0);transition:transform .9s var(--ease);transition-delay:calc(var(--i) * .12s);}
html.js .mvfig.reveal.is-visible .mvfig__step{transform:none;}
html.js .mvfig.reveal .mvfig__path,html.js .mvfig.reveal .mvfig__vision{opacity:0;transition:opacity .8s var(--ease) .8s;}
html.js .mvfig.reveal.is-visible .mvfig__path,html.js .mvfig.reveal.is-visible .mvfig__vision{opacity:1;}
@media (prefers-reduced-motion:reduce){ html.js .mvfig.reveal .mvfig__step{transform:none;transition:none;} html.js .mvfig.reveal .mvfig__path,html.js .mvfig.reveal .mvfig__vision{opacity:1;transition:none;} }
@media (max-width:680px){
  .mvfig{--h0:96px;--dh:26px;}
  .mvfig__vision{grid-column:1 / 7;}
  .mvfig__mission{grid-column:1 / 7;grid-row:2;align-self:start;}
  .mvfig__steps,.mvfig__path{grid-row:3;}
  .mvfig__mission{padding-bottom:28px;}
  .mvfig__base{grid-row:4;flex-direction:column;gap:6px;}
  .mvfig__step{padding:10px 0;align-items:center;}
  .mvfig__round::before{content:"R";}
  .mvfig__word{writing-mode:vertical-rl;font-size:13px;letter-spacing:.12em;}
}
/* 点線は 1段目の上 → 最上段の上（ビジョンの手前）の範囲に絶対配置（SVG の縦横比で行が伸びないように） */
.mvfig{--dh:48px;}
.mvfig__path{position:absolute;left:calc(100% / 12);right:calc(100% / 12);bottom:calc(var(--h0) + 10px);top:auto;width:auto;height:calc(var(--dh) * 5 + 28px);align-self:auto;}
.mvfig__mission{max-width:340px;}
@media (max-width:680px){ .mvfig{--dh:26px;} .mvfig__mission{max-width:none;} }
/* 斜めの点線は段の角と重なって見えない＝やめて、最上段からビジョンへ短い矢印。1段目も背景と分かる濃さから */
.mvfig__step{--lv:calc(.2 + var(--i) * .14);}
.mvfig__vision{padding-bottom:64px;}
.mvfig__step:last-child::after{content:"";position:absolute;left:50%;bottom:calc(100% + 10px);height:40px;border-left:1px dashed var(--ink);}
.mvfig__step:last-child::before{content:"";position:absolute;left:calc(50% - 5px);bottom:calc(100% + 46px);border:5px solid transparent;border-top:0;border-bottom:8px solid var(--ink);}
html.js .mvfig.reveal .mvfig__step:last-child::after,html.js .mvfig.reveal .mvfig__step:last-child::before{opacity:0;transition:opacity .6s var(--ease) 1.2s;}
html.js .mvfig.reveal.is-visible .mvfig__step:last-child::after,html.js .mvfig.reveal.is-visible .mvfig__step:last-child::before{opacity:1;}
@media (max-width:680px){
  .mvfig{--h0:124px;--dh:20px;}
  .mvfig__step:nth-child(-n+3){color:var(--ink);}
  .mvfig__mission{padding-bottom:72px;}
  .intro-h--big{font-size:clamp(1.3rem,6.2vw,26px);letter-spacing:.06em;}
}

/* メガメニュー：クリックで開く・下に CLOSE（2026-11-07） */
.mega__close{grid-column:1 / -1;justify-self:center;display:inline-flex;align-items:center;gap:12px;margin-top:8px;padding:12px 28px;border:1px solid var(--ink);border-radius:999px;background:none;color:var(--ink);font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.14em;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease);}
.mega__close:hover,.mega__close:focus-visible{background:var(--ink);color:#fff;}
.mega__close-x{position:relative;width:12px;height:12px;}
.mega__close-x::before,.mega__close-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg);}
.mega__close-x::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* =========================================================
   他ページへの動線を ABOUT の VIEW MORE の組みに統一（apx_more_cards()・2026-11-07）
   関連する実績・関連する記事・関連サービス・コンセプトのサービス・OTHER STAFF
   ========================================================= */
.ba-more__grid > .ba-link:last-child:nth-child(odd){grid-column:1 / -1;aspect-ratio:32/7;}
.ba-link--ja .ba-link__en{font-family:var(--font);font-size:clamp(1rem,1.5vw,20px);line-height:1.6;letter-spacing:.04em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ba-link--ja .ba-link__text{right:clamp(56px,6vw,96px);}
.ba-link--ja .ba-link__jp{margin-top:8px;font-size:12px;opacity:.9;}
.ba-link--staff img{object-position:50% 25%;}
@media (max-width:680px){ .ba-more__grid > .ba-link:last-child:nth-child(odd){aspect-ratio:16/8;} }
/* OTHER STAFF：写真が正方形の顔写真なので、同じ組みのまま縦長のカード4列（SPは2列） */
.ba-more__grid--staff{grid-template-columns:repeat(4,minmax(0,1fr));}
.ba-more__grid--staff > .ba-link,.ba-more__grid--staff > .ba-link:last-child:nth-child(odd){grid-column:auto;aspect-ratio:3/4;}
.ba-more__grid--staff .ba-link::after{background:linear-gradient(to top,rgba(20,20,20,.55),rgba(20,20,20,0) 55%);}
.ba-more__grid--staff .ba-link:hover::after{background:linear-gradient(to top,rgba(20,20,20,.7),rgba(20,20,20,.1) 60%);}
.ba-more__grid--staff .ba-link__en{font-size:clamp(1rem,1.5vw,20px);letter-spacing:.04em;}
.ba-more__grid--staff .ba-link__jp{font-size:12px;}
.ba-more__grid--staff .ba-link__text{left:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,22px);right:44px;}
.ba-more__grid--staff .ba-link__arrow{right:clamp(14px,1.6vw,22px);bottom:clamp(16px,1.8vw,24px);}
@media (max-width:900px){ .ba-more__grid--staff{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* メガメニューの CLOSE：パネル下部いっぱいに濃いグレーの帯（高さ60px）・中央に×と CLOSE（2026-11-07） */
.mega__inner{padding-bottom:0;}
.mega__close{grid-column:1 / -1;justify-self:stretch;justify-content:center;height:60px;margin:20px -36px 0;padding:0;border:0;border-radius:0 0 24px 24px;background:#3A3A3A;color:#fff;}
.mega__close:hover,.mega__close:focus-visible{background:#1A1A1A;color:#fff;}

/* スタッフ一覧の ＋YOU! の丸は黒（2026-11-07） */
.mb-you__circle{background:var(--ink);}

/* =========================================================
   コンセプト Vision の節：WHY / HOW / WHAT の円の図（apx_golden_circle()・2026-11-07）
   ========================================================= */
.gc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center;max-width:1000px;margin:clamp(80px,9vw,140px) auto 0;}
.gc__rings{position:relative;aspect-ratio:1;width:100%;max-width:440px;justify-self:center;}
.gc__ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;}
.gc__ring i{font-style:normal;font-family:var(--font-en);font-weight:700;letter-spacing:.1em;}
.gc__ring--what{width:100%;height:100%;background:#D6D6D6;color:var(--ink);}
.gc__ring--what i{margin-top:9%;font-size:clamp(14px,1.4vw,18px);}
.gc__ring--how{width:66%;height:66%;background:#8C8C8C;color:#fff;}
.gc__ring--how i{margin-top:11%;font-size:clamp(14px,1.4vw,18px);}
.gc__ring--why{width:34%;height:34%;background:var(--ink);color:#fff;align-items:center;}
.gc__ring--why i{font-size:clamp(16px,1.7vw,22px);}
.gc__list{margin:0;display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);}
.gc__row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line);}
.gc__row dt{display:flex;flex-direction:column;gap:6px;}
.gc__row dt::before{content:"";width:14px;height:14px;border-radius:50%;margin-bottom:6px;}
.gc__row--why dt::before{background:var(--ink);}
.gc__row--how dt::before{background:#8C8C8C;}
.gc__row--what dt::before{background:#D6D6D6;}
.gc__en{font-family:var(--font-en);font-size:20px;font-weight:700;letter-spacing:.08em;}
.gc__jp{font-size:12px;color:var(--ink-2);letter-spacing:.08em;}
.gc__row dd{margin:0;}
.gc__h{margin:0;font-size:16px;font-weight:700;line-height:1.8;letter-spacing:.04em;}
.gc__t{margin:8px 0 0;font-size:14px;line-height:2;color:var(--ink-2);}
html.js .gc.reveal{opacity:1;transform:none;}
html.js .gc.reveal .gc__ring{transform:translate(-50%,-50%) scale(0);transition:transform 1s var(--ease);}
html.js .gc.reveal .gc__ring--why{transition-delay:0s;}
html.js .gc.reveal .gc__ring--how{transition-delay:.2s;}
html.js .gc.reveal .gc__ring--what{transition-delay:.4s;}
html.js .gc.reveal.is-visible .gc__ring{transform:translate(-50%,-50%) scale(1);}
html.js .gc.reveal .gc__row{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(.5s + var(--i) * .15s);}
html.js .gc.reveal.is-visible .gc__row{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ html.js .gc.reveal .gc__ring,html.js .gc.reveal .gc__row{transition:none;transform:translate(-50%,-50%);opacity:1;} html.js .gc.reveal .gc__row{transform:none;} }
@media (max-width:900px){
  .gc{grid-template-columns:1fr;}
  .gc__rings{max-width:320px;}
  .gc__row{grid-template-columns:84px minmax(0,1fr);gap:14px;}
}

/* =========================================================
   サービス詳細の「制作できるもの」を shop.vermicular.jp の Line Up の組みに（cards の style=lineup・2026-11-07）
   縦長カード3列。列ごとに下へずれ、スクロールでそろう（--lu-off を js/apx.js が 0 に近づける）。
   乗る・選ぶと写真が上へずれ、下から白い面（名前・説明・下層ページ）がせり上がる
   ========================================================= */
.lu{--lu-off:0px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;align-items:start;padding-bottom:calc(var(--lu-max,180px));}
.lu-card{position:relative;aspect-ratio:6/7;overflow:hidden;border-radius:4px;background:var(--paper-2);transform:translate3d(0,calc(var(--k) * var(--lu-off)),0);outline:none;}
.lu-card__media{position:absolute;inset:0;margin:0;transition:transform .8s var(--ease);}
.lu-card__media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 1.2s var(--ease);}
.lu-card__name{position:absolute;left:20px;right:20px;bottom:18px;margin:0;padding:6px 10px;width:max-content;max-width:calc(100% - 40px);background:rgba(255,255,255,.9);color:var(--ink);font-size:15px;font-weight:700;letter-spacing:.06em;line-height:1.5;transition:opacity .4s var(--ease);}
.lu-card__panel{position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow:auto;padding:clamp(22px,2.4vw,32px);background:var(--paper);transform:translate3d(0,101%,0);transition:transform .7s var(--ease);}
.lu-card__title{margin:0 0 12px;font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:.06em;line-height:1.5;}
.lu-card__text{margin:0;font-size:14px;line-height:1.9;color:var(--ink-2);}
.lu-card__links{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;}
.lu-card__links a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s var(--ease);}
.lu-card__links a:hover{border-color:var(--ink);}
.lu-card__links a .arrow{font-size:12px;transition:transform .3s var(--ease);}
.lu-card__links a:hover .arrow{transform:translateX(3px);}
.lu-in{opacity:0;transform:translate3d(0,100%,0);transition:opacity .5s var(--ease),transform .5s var(--ease);}
@media (hover:hover){
  .lu-card:hover .lu-card__media,.lu-card:focus-within .lu-card__media{transform:translate3d(0,-22%,0);}
  .lu-card:hover .lu-card__panel,.lu-card:focus-within .lu-card__panel{transform:none;}
  .lu-card:hover .lu-card__name,.lu-card:focus-within .lu-card__name{opacity:0;}
  .lu-card:hover .lu-in,.lu-card:focus-within .lu-in{opacity:1;transform:none;transition-delay:calc(.25s + var(--j) * .05s);}
}
/* マウスの無い端末と SP：白い面を写真の下に出しておく */
@media (hover:none),(max-width:680px){
  .lu{padding-bottom:0;}
  .lu-card{aspect-ratio:auto;overflow:visible;transform:none;background:none;}
  .lu-card__media{position:relative;aspect-ratio:6/5;overflow:hidden;border-radius:4px;}
  .lu-card__name{display:none;}
  .lu-card__panel{position:static;transform:none;padding:16px 0 0;background:none;max-height:none;}
  .lu-in{opacity:1;transform:none;}
}
@media (max-width:1000px){ .lu{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;} .lu-card{--k:0 !important;} }
@media (max-width:680px){ .lu{grid-template-columns:1fr;gap:40px;} }
@media (prefers-reduced-motion:reduce){ .lu-card{transform:none;} .lu-card__media,.lu-card__panel,.lu-in{transition:none;} }
/* 節の下端が画面に入るころにはずれは 0＝下の余白は要らない */
.lu{padding-bottom:0;}

/* =========================================================
   トップ WORKS：正方形3列・暗幕に白文字（題・キャッチコピー・VIEW MORE）（apx_works_tiles()・2026-11-07）
   ========================================================= */
.wk3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);}
.wk3-card{position:relative;display:block;aspect-ratio:1;overflow:hidden;color:#fff;background:#222;}
.wk3-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.wk3-card::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.42);transition:background .5s var(--ease);}
.wk3-card:hover img{transform:scale(1.05);}
.wk3-card:hover::after{background:rgba(20,20,20,.55);}
.wk3-card__body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;}
.wk3-card__title{font-size:clamp(18px,1.9vw,26px);font-weight:700;letter-spacing:.1em;line-height:1.5;}
.wk3-card__catch{font-size:clamp(13px,1.15vw,16px);letter-spacing:.22em;line-height:1.8;}
.wk3-card__more{margin-top:clamp(18px,2.4vw,40px);padding-bottom:6px;border-bottom:1px solid currentColor;font-family:var(--font-en);font-size:13px;letter-spacing:.12em;}
@media (max-width:900px){ .wk3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:680px){ .wk3{grid-template-columns:1fr;} }

/* =========================================================
   トップ SERVICE：kinto.co.jp の Product の組み（apx_service_slider()・2026-11-07）
   ========================================================= */
.service--kp{padding-left:var(--gutter);overflow:hidden;}
.kp{display:grid;grid-template-columns:clamp(200px,18vw,300px) minmax(0,1fr);gap:clamp(24px,4vw,64px);}
.kp__side{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,8vw,200px) 0 0;}
.kp__en{margin:0;font-family:var(--font-en);font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:0;line-height:1;}
.kp__jp{margin:14px 0 0;font-size:13px;letter-spacing:.06em;line-height:1.8;}
.kp__more{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(32px,4vw,60px);padding-bottom:6px;border-bottom:1px solid var(--ink);font-family:var(--font-en);font-size:13px;letter-spacing:.1em;color:var(--ink);}
.kp__more .arrow{transition:transform .3s var(--ease);}
.kp__more:hover .arrow{transform:translateX(4px);}
.kp__nav{display:flex;margin-top:40px;}
.kp__btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease);}
.kp__btn + .kp__btn{border-left:0;}
.kp__btn:hover:not(:disabled){background:var(--ink);color:#fff;}
.kp__btn:disabled{opacity:.35;cursor:default;}
.kp__track{display:flex;gap:20px;list-style:none;margin:0;padding:0 var(--gutter) 0 0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
.kp__track::-webkit-scrollbar{display:none;}
.kp-card{flex:0 0 auto;width:clamp(240px,26vw,380px);scroll-snap-align:start;}
.kp-card--wide{width:clamp(260px,28.6vw,414px);}
.kp-card a{display:block;color:var(--ink);}
.kp-card__media{display:block;height:clamp(320px,34.4vw,495px);overflow:hidden;background:var(--paper-2);}
.kp-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.kp-card a:hover .kp-card__media img{transform:scale(1.04);}
.kp-card__en{display:block;margin-top:18px;font-family:var(--font-en);font-size:18px;font-weight:700;letter-spacing:.04em;}
.kp-card__jp{display:block;margin-top:4px;font-size:12px;letter-spacing:.06em;color:var(--ink-2);}
@media (max-width:900px){
  .kp{grid-template-columns:1fr;}
  .kp__side{padding:0 var(--gutter) 0 0;flex-direction:row;align-items:flex-end;justify-content:space-between;}
  .kp__nav{margin-top:0;}
  .kp-card{width:68vw;} .kp-card--wide{width:74vw;}
  .kp-card__media{height:86vw;max-height:495px;}
}

/* =========================================================
   トップ STORY：お客様の声（apx_story_section()・2026-11-07）
   写真のカードが続く節の間で調子を変える＝黒の帯・文字が主役の一覧・左の写真は行に乗ると切り替わる
   ========================================================= */
.story{background:var(--ink);color:#fff;}
.story__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start;}
.story__side{position:sticky;top:clamp(90px,10vh,130px);}
.story__en{margin:0;font-family:var(--font-en);font-size:clamp(2.2rem,3.8vw,54px);font-weight:700;line-height:1;color:#fff;}
.story__jp{margin:14px 0 0;font-size:14px;font-weight:500;letter-spacing:.05em;color:rgba(255,255,255,.75);}
.story__media{position:relative;margin-top:clamp(32px,4vw,56px);aspect-ratio:4/5;overflow:hidden;background:#2a2a2a;}
.story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s var(--ease),transform 1.2s var(--ease);}
.story__img.is-on{opacity:1;transform:none;}
.story__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.2);}
.story__row{border-bottom:1px solid rgba(255,255,255,.2);}
.story__link{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;gap:20px;align-items:center;padding:clamp(22px,2.6vw,36px) 0;color:#fff;transition:padding .5s var(--ease);}
.story__no{font-family:var(--font-en);font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.55);}
.story__thumb{display:none;}
.story__text{display:flex;flex-direction:column;gap:8px;}
.story__name{font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.story__title{font-size:clamp(16px,1.6vw,21px);font-weight:700;letter-spacing:.04em;line-height:1.6;}
.story__arrow{font-size:18px;transition:transform .4s var(--ease);}
.story__link:hover,.story__link:focus-visible{padding-left:14px;}
.story__link:hover .story__arrow,.story__link:focus-visible .story__arrow{transform:translateX(6px);}
.story__link:hover .story__name,.story__link:focus-visible .story__name{color:#fff;}
.story .story__foot .arrow-link{color:#fff;border-color:#fff;}
@media (max-width:900px){
  .story__grid{grid-template-columns:1fr;}
  .story__side{position:static;}
  .story__media{display:none;}
  .story__link{grid-template-columns:96px minmax(0,1fr) 20px;gap:16px;}
  .story__no{display:none;}
  .story__thumb{display:block;aspect-ratio:1;overflow:hidden;background:#2a2a2a;}
  .story__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .story__link:hover{padding-left:0;}
}

/* トップの Ranking は #f7f7f7 の箱に（下層は今のまま） */
.home main > .rankv{margin:0 calc(var(--gutter) - clamp(20px,3vw,48px));padding:clamp(56px,6vw,96px) 0;background:#f7f7f7;overflow:hidden;}
.home main > .rankv .container{padding-inline:clamp(20px,3vw,48px);}
.home main > .rankv .rankv__viewport{padding-left:clamp(20px,3vw,48px);}
@media (max-width:680px){ .home main > .rankv{margin:0 10px;} .home main > .rankv .rankv__viewport{padding-left:20px;} }

/* トップ WORKS：アイキャッチに焼き込まれた文字と白文字がぶつからないよう、写真をぼかし幕を濃く */
.wk3-card img{filter:blur(3px);transform:scale(1.06);}
.wk3-card:hover img{transform:scale(1.1);}
.wk3-card::after{background:rgba(20,20,20,.55);}
.wk3-card:hover::after{background:rgba(20,20,20,.65);}

/* トップの節に白い面を敷く指定（.home main > section:not(.hero):not(.statement)）より強く当てる */
.home main > section.section.story{background:var(--ink);color:#fff;}
.home main > section.section.rankv{background:#f7f7f7;}
/* WORKS の題・キャッチは語の途中で折り返さない（「住宅部／門」を防ぐ） */
.wk3-card__title,.wk3-card__catch{word-break:keep-all;overflow-wrap:anywhere;}
.story__title{word-break:keep-all;overflow-wrap:anywhere;}
/* トップの Ranking：背景は横幅いっぱい（箱の左右の余白をやめる・2026-11-07） */
.home main > section.section.rankv{margin:0;}
.home main > .rankv .container{padding-inline:var(--gutter);}
.home main > .rankv .rankv__viewport{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));}
@media (max-width:680px){ .home main > .rankv .rankv__viewport{padding-left:30px;} }

/* =========================================================
   お客様の声（Story）の詳細：willstyle.co.jp/cases/ の組み（single-voice.php・2026-11-07）。色は白黒グレー
   ========================================================= */
.vs-head{padding-bottom:clamp(40px,5vw,72px);}
.vs-head__en{margin:0 0 18px;font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.12em;}
.vs-head__en span{margin-left:14px;padding-left:14px;border-left:1px solid var(--ink);font-family:var(--font);font-weight:500;letter-spacing:.06em;}
.vs-head__title{margin:0;font-size:clamp(22px,2.4vw,34px);font-weight:700;line-height:1.6;letter-spacing:.04em;max-width:960px;}
.vs-head__details{display:flex;flex-wrap:wrap;gap:16px clamp(32px,5vw,72px);margin:clamp(32px,4vw,56px) 0 0;}
.vs-head__details div{display:flex;flex-direction:column;gap:8px;}
.vs-head__details dt{font-family:var(--font-en);font-size:12px;letter-spacing:.1em;color:var(--ink-2);}
.vs-head__details dd{margin:0;font-size:14px;font-weight:600;}
.vs-hero{margin:0;aspect-ratio:3/2;max-height:88vh;width:100%;overflow:hidden;background:var(--paper-2);}
.vs-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.vs-col{max-width:960px;margin:0 auto;padding-inline:var(--gutter);box-sizing:content-box;}
.vs-members{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;margin-bottom:clamp(48px,6vw,88px);padding:clamp(24px,3vw,36px);background:var(--paper-2);}
.vs-members__h{margin:0;font-family:var(--font-en);font-size:13px;color:var(--ink-2);}
.vs-members__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px 32px;}
.vs-members__list li{display:flex;align-items:center;gap:14px;}
.vs-members__name{font-size:14px;font-weight:600;}
.vs-av{--n:0;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;font-size:18px;font-weight:700;color:#fff;background:color-mix(in srgb,var(--ink) calc(100% - var(--n) * 22%),#fff);}
.vs-prose{font-size:15px;line-height:2.1;letter-spacing:.04em;}
.vs-prose > p{margin:0 0 1.6em;}
.vs-prose .vs-h{margin:clamp(64px,7vw,104px) 0 28px;font-size:clamp(20px,1.9vw,26px);font-weight:700;line-height:1.6;letter-spacing:.04em;}
.vs-prose > .vs-h:first-child{margin-top:0;}
.vs-prose .vs-q{display:flex;gap:16px;align-items:baseline;margin:clamp(40px,4vw,56px) 0 24px;font-weight:700;font-size:16px;line-height:1.9;}
.vs-q__mark{flex:0 0 auto;font-family:var(--font-en);font-size:20px;font-weight:700;}
.vs-talk{display:grid;grid-template-columns:52px minmax(0,1fr);gap:22px;margin:0 0 28px;}
.vs-talk__body p{margin:0;}
.vs-talk__body .vs-talk__name{margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);}
.vs-prose img{display:block;width:100%;height:auto;margin:clamp(40px,4vw,64px) 0;}
.vs-prose img.prose-img-narrow-300{width:300px;max-width:100%;}
.vs-prose .prose-marker{background:linear-gradient(transparent 62%,rgba(0,0,0,.08) 62%);font-weight:700;}
.vs-nav{margin-top:clamp(64px,7vw,104px);}
@media (max-width:680px){
  .vs-members{grid-template-columns:1fr;gap:14px;}
  .vs-talk{grid-template-columns:40px minmax(0,1fr);gap:14px;}
  .vs-av{width:40px;height:40px;font-size:15px;}
  .vs-prose{font-size:15px;}
}

/* =========================================================
   トップ STORY：shop.vermicular.jp の Sustainability の組み（apx_story_scroll()・2026-11-07）。色は白黒グレー
   ========================================================= */
.home main > section.section.st2{background:var(--paper);padding-top:0;}
.st2__panel{position:relative;margin:0 clamp(10px,1.6vw,24px);padding:clamp(80px,9vw,140px) 0 clamp(64px,7vw,110px);background:#ECECEC;border-radius:clamp(24px,4vw,56px) clamp(24px,4vw,56px) 0 0;}
.st2__intro{position:relative;text-align:center;padding:0 var(--gutter);}
.st2__label{margin:0 0 24px;font-family:var(--font-en);font-size:13px;letter-spacing:.12em;}
.st2__title{margin:0;font-family:var(--font-en);font-size:clamp(44px,6vw,92px);font-weight:500;line-height:1.05;letter-spacing:-.01em;}
.st2__lead{margin:clamp(28px,3vw,44px) 0 0;font-size:14px;line-height:2;letter-spacing:.06em;}
.st2__vert{position:absolute;top:0;right:var(--gutter);margin:0;writing-mode:vertical-rl;font-size:15px;letter-spacing:.3em;}
.st2__scroller{position:relative;height:calc(var(--steps) * 70vh + 100vh);margin-top:clamp(40px,5vw,80px);}
.st2__sticky{position:sticky;top:0;height:100vh;overflow:hidden;}
.st2__ring{position:absolute;left:50%;top:50%;width:min(82vh,760px);height:min(82vh,760px);margin:calc(min(82vh,760px) / -2) 0 0 calc(min(82vh,760px) / -2);font-family:var(--font-en);font-size:46px;font-weight:600;letter-spacing:.18em;fill:rgba(0,0,0,.06);pointer-events:none;}
.st2__nums{position:absolute;left:var(--gutter);top:22%;font-family:var(--font-en);font-size:clamp(56px,6vw,96px);font-weight:500;line-height:1;}
.st2__num{position:absolute;left:0;top:0;opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.st2__num.is-on{opacity:1;transform:none;}
.st2__slides{list-style:none;margin:0;padding:0;}
.st2__slide{position:absolute;left:50%;top:50%;width:min(640px,46vw);transform:translate(-50%,-44%);opacity:0;visibility:hidden;transition:opacity .7s var(--ease),transform .7s var(--ease),visibility .7s;}
.st2__slide.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%);}
.st2__card{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);}
.st2__no{display:none;}
.st2__media{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:8px;background:#ddd;}
.st2__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.st2__card:hover .st2__media img{transform:scale(1.04);}
.st2__body{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px;}
.st2__name{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--ink-2);}
.st2__h{font-size:clamp(18px,1.7vw,24px);font-weight:700;line-height:1.6;letter-spacing:.04em;word-break:keep-all;overflow-wrap:anywhere;}
.st2__more{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:10px 24px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--font-en);font-size:12px;letter-spacing:.12em;}
.st2__more .arrow{transition:transform .3s var(--ease);}
.st2__card:hover .st2__more .arrow{transform:translateX(4px);}
.st2__nav{position:absolute;left:var(--gutter);bottom:clamp(40px,8vh,80px);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.st2__navbtn{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:var(--ink-2);cursor:pointer;}
.st2__navbtn::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .3s;}
.st2__navbtn.is-on{color:var(--ink);}
.st2__navbtn.is-on::before{opacity:1;}
.st2__foot{margin-top:0;}
/* SP・動きを減らす設定：切り替えずに縦に並べる */
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .st2__vert{position:static;writing-mode:horizontal-tb;margin-top:16px;font-size:13px;letter-spacing:.1em;}
  .st2__scroller{height:auto;}
  .st2__sticky{position:static;height:auto;overflow:visible;padding:0 var(--gutter);}
  .st2__ring,.st2__nums,.st2__nav{display:none;}
  .st2__slides{display:grid;gap:48px;}
  .st2__slide{position:static;width:auto;transform:none;opacity:1;visibility:visible;}
  .st2__no{display:block;margin-bottom:12px;font-family:var(--font-en);font-size:32px;font-weight:500;}
}

/* グラフィックの「制作できるもの」を1アイテム1枚に（per_item・2026-11-07）：カード全体が下層ページへのリンク */
.lu-card--link{display:block;color:var(--ink);}
.lu-card__en{margin:0 0 6px;font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink-2);}
.lu-card__more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-bottom:4px;border-bottom:1px solid var(--ink);font-size:13px;font-weight:600;letter-spacing:.06em;}
.lu-card__more .arrow{transition:transform .3s var(--ease);}
.lu-card--link:hover .lu-card__more .arrow{transform:translateX(4px);}

/* トップ STORY：スクロールに縛らない形に（2026-11-07）。節は普通の高さ・目次／矢印／スワイプ／自動で切り替え・円形の文字はゆっくり回す */
.st2__scroller{height:auto;}
.st2__sticky{position:relative;height:clamp(620px,78vh,780px);}
.st2__ring{animation:st2spin 80s linear infinite;}
@keyframes st2spin{to{transform:rotate(360deg);}}
.st2__arrows{position:absolute;left:50%;top:50%;width:min(800px,62vw);transform:translate(-50%,-50%);display:flex;justify-content:space-between;pointer-events:none;z-index:3;}
.st2__arrow{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--ink);border-radius:50%;background:rgba(236,236,236,.85);color:var(--ink);font-size:18px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease);}
.st2__arrow:hover{background:var(--ink);color:#fff;}
.st2__nav{bottom:clamp(24px,5vh,56px);}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .st2__sticky{height:auto;}
  .st2__arrows{display:none;}
  .st2__ring{animation:none;}
}
/* VOICE を足してヘッダーのメニューが1つ増えた＝狭い幅ではロゴに接するので間隔と字間を詰める（2026-11-07） */
@media (min-width:1001px) and (max-width:1180px){ .header .nav{gap:16px;} .header .nav a{letter-spacing:.06em;font-size:13px;} .header .nav .nav__cta{padding-inline:16px;} }
/* トップ STORY の縦書き「お客様の声」：太字・右に縦線（2026-11-07） */
.st2__vert{font-weight:700;padding-right:16px;border-right:1px solid var(--ink);}
@media (max-width:900px),(prefers-reduced-motion:reduce){ .st2__vert{padding-right:0;border-right:0;} }

/* トップ SERVICE：流し続けるので吸着とスムーズスクロールを止める（2026-11-07） */
.service--kp .kp__track{scroll-snap-type:none;scroll-behavior:auto;}

/* トップ Journal・Ranking・News の上下の余白をそろえる（2026-11-07）：
   白→グレー→白と色が変わる境目は各 2×--sec-gap（PC 150／SP 約100）、白が続く News→YouTube は --sec-gap（75） */
body.home main > section#journal.section{padding-bottom:calc(var(--sec-gap) * 2);}
body.home main > section#ranking.section{padding-top:calc(var(--sec-gap) * 2);padding-bottom:calc(var(--sec-gap) * 2);}
body.home main > section#news.section{padding-top:calc(var(--sec-gap) * 2);padding-bottom:var(--sec-gap);}
body.home main > section#news.section .sec-foot{margin-bottom:0;}
body.home main > section#news.section .container > :last-child{margin-bottom:0;}

/* 下層の Ranking・関連記事：下に余白（「ランキングの下に余白が欲しい」・2026-11-07）。
   ジャーナル一覧では Ranking の下に一覧が続く＝Ranking の下を 2×--sec-gap、記事ページは関連記事・Ranking とも上下 --sec-gap／下 2×--sec-gap */
body:not(.home) main > section.rankv{padding-top:var(--sec-gap);padding-bottom:calc(var(--sec-gap) * 2);}
body:not(.home) main > section.rankv + section.rankv{padding-top:0;}
.page-journal > section.rankv + .jl-list-sec{padding-top:0;}

/* トップ：Ranking の背景は白に戻し、News を #f7f7f7（横幅いっぱい）に（2026-11-07）。
   余白＝白が続く Journal→Ranking は各 --sec-gap、色が変わる Ranking→News→YouTube の境目は各 2×--sec-gap */
body.home main > section#ranking.section{background:var(--paper);padding-top:var(--sec-gap);padding-bottom:calc(var(--sec-gap) * 2);}
body.home main > section#journal.section{padding-bottom:var(--sec-gap);}
body.home main > section#news.section{background:#f7f7f7;padding-top:calc(var(--sec-gap) * 2);padding-bottom:calc(var(--sec-gap) * 2);}
body.home main > section#youtube.section{padding-top:calc(var(--sec-gap) * 2);}

/* トップの YouTube を削除（2026-11-07）＝News（#f7f7f7）の次は village-gallery（白）＝境目は 2×--sec-gap */
body.home main > section.village-gallery{padding-top:calc(var(--sec-gap) * 2);}
/* 下層の Ranking・関連記事の余白（id で当てる＝既存の .rankv の指定より強く）。
   記事ページ：関連記事 上下 --sec-gap → Ranking 上 0・下 2×--sec-gap（次はフッターのグレー）／ジャーナル一覧：Ranking 上下 --sec-gap → 一覧 上 --sec-gap */
body:not(.home) main > section#related.section{padding-top:var(--sec-gap);padding-bottom:var(--sec-gap);}
body:not(.home) main > section#ranking.section{padding-top:var(--sec-gap);padding-bottom:calc(var(--sec-gap) * 2);}
body:not(.home) main > section#related.section + section#ranking.section{padding-top:var(--sec-gap);}
body:not(.home) main.page-journal > section#ranking.section{padding-bottom:var(--sec-gap);}
body.home main > section.village-gallery:not(#_){padding-top:calc(var(--sec-gap) * 2);}

/* トップ SERVICE：transform で流す（ネイティブの横スクロールはやめる・2026-11-07） */
.service--kp .kp__track.is-marquee{overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;}
.service--kp .kp__track.is-marquee .kp-card{transform:translate3d(var(--kp-x,0px),0,0);will-change:transform;}
.service--kp .kp__track.is-marquee img{-webkit-user-drag:none;pointer-events:none;}
/* トップ SERVICE のカード：写真を全面に敷き、暗い幕の上に白い文字。上＝アイコン／英字と日本語、下＝説明と白い丸の矢印（2026-11-14） */
.service--kp .kp-card,.service--kp .kp-card--wide{width:clamp(280px,29.8vw,430px);}
.service--kp .kp-card a{position:relative;display:grid;grid-template-rows:auto auto 1fr;aspect-ratio:430/660;padding:clamp(24px,2.8vw,40px);overflow:hidden;color:#fff;}
.service--kp .kp-card__media{position:absolute;inset:0;height:auto;}
.service--kp .kp-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.18) 45%,rgba(0,0,0,.5));}
.service--kp .kp-card__icon,.service--kp .kp-card__head,.service--kp .kp-card__bottom{position:relative;}
.service--kp .kp-card__icon{display:block;height:40px;}
.service--kp .kp-card__head{display:block;margin-top:clamp(36px,4.5vw,64px);}
.service--kp .kp-card__en{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.01em;line-height:1;}
.service--kp .kp-card__jp{margin-top:14px;font-size:16px;letter-spacing:.04em;color:#fff;}
.service--kp .kp-card__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;align-self:end;}
.service--kp .kp-card__text{font-size:13px;line-height:1.75;letter-spacing:.02em;}
.service--kp .kp-card__circle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--ink);transition:transform .4s var(--ease);}
.service--kp .kp-card a:hover .kp-card__circle{transform:scale(1.1);}
@media (max-width:820px){
  .service--kp .kp-card,.service--kp .kp-card--wide{width:78vw;}
  .service--kp .kp-card a{aspect-ratio:350/420;padding:20px;}
  .service--kp .kp-card__media{height:auto;max-height:none;}
  .service--kp .kp-card__head{margin-top:28px;}
  .service--kp .kp-card__jp{margin-top:10px;font-size:14px;}
}

/* トップ Journal と Ranking の間を少し狭く（各 --sec-gap の 2/3＝PC 50／計100・2026-11-07） */
body.home main > section#journal.section{padding-bottom:calc(var(--sec-gap) * .667);}
body.home main > section#ranking.section{padding-top:calc(var(--sec-gap) * .667);}

/* トップ：News（#f7f7f7）の面の下端に、写真の帯（village-gallery）を60px重ねる（2026-11-07）。
   帯は背景を透明にして60px引き上げ、手前に出す。News の下の余白は +60px＝中身から写真の上端までは 2×--sec-gap のまま */
body.home main > section#news.section{padding-bottom:calc(var(--sec-gap) * 2 + 60px);}
body.home main > section.village-gallery:not(#_){margin-top:-60px;padding-top:0;background:transparent;position:relative;z-index:3;}

/* フッターの幅をメインの本文の幅にそろえる（2026-11-07）：中身の最大1320pxをやめ、左右の余白を main と同じ計算に（PC は 10.25vw） */
.ft__inner{max-width:none;}
@media (min-width:1001px){ .ft{padding-left:max(calc(clamp(20px,4.5vw,96px) + 20px),10.25vw);padding-right:max(calc(clamp(20px,4.5vw,96px) + 20px),10.25vw);} }
/* 写真の帯を News に重ねるため前に出したら、画面の左右の縦書き（Instagram・YouTube・日時）が隠れた＝それより前に */
.hero__sns,.hero-clock{z-index:60;}
/* 写真の帯は z-index 2（ほかの節と同じ）。News より後ろに並ぶので同じ 2 でも上に重なる。3 にすると左右の縦書き（ヒーローの中）より前に出て隠してしまう */
body.home main > section.village-gallery:not(#_){z-index:2;}

/* コンセプトのヒーロー（top-hero の center）：まず「What Color Is Yours. ／ あなたの色は何色ですか？」が中央に、
   文字が出そろったあと（約2.4秒）に、その下へ図形5つが1つずつ並ぶ。動き回る図形の層は出さない（2026-11-07） */
.hero--center .hero__stage{display:none;}
.hero--center .hero__copy--shapes{top:0;bottom:0;left:var(--gutter);right:var(--gutter);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.hero--center .hero__row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vh,72px);}
.hero--center .hero__row .yc-shape{width:clamp(30px,3.2vw,48px);height:clamp(30px,3.2vw,48px);opacity:0;transform:translateY(-24px) rotate(-20deg);animation:hero-row-in 1.1s cubic-bezier(.65,0,.3,1) forwards;animation-delay:calc(2.4s + var(--i) * .15s);}
.hero--center .hero__row .yc-shape--half{height:calc(clamp(30px,3.2vw,48px) / 2);}
@keyframes hero-row-in{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .hero--center .hero__row .yc-shape{animation:none;opacity:1;transform:none;} }

/* コンセプトのヒーロー：図形が言葉の節まで降りていくので、ヒーローのはみ出しを見せ、言葉の節（透明）より前に（2026-11-07） */
.hero--shapes.hero--center{overflow:visible;z-index:3;}
.hero--center .hero__rowitem{display:block;will-change:transform;}

/* 図形を6つに（2026-11-07）：6つ目は菱形・淡い紫。コンセプトの「Your Color」の列は、ヒーローから飛んでくる図形の着地点（元の図形は見せない） */
.yc-shape--diamond{background:#9C8BC9;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
html.js .yc-shapes.is-target .yc-shape{opacity:0 !important;transform:none !important;transition:none !important;}

/* =========================================================
   サービス詳細の組みの見直し（「下層ページが納得いっていない」・2026-11-07）
   冒頭の一節＝横幅いっぱいの写真に暗幕・白文字／途中の一節＝写真と文章を左右に／Pricing＝料金のページと同じ表
   ========================================================= */
.svc-about{position:relative;padding-block:calc(var(--sec-gap) * 2.2) !important;background:#222 var(--bg) center / cover no-repeat;color:#fff;}
@media (hover:hover) and (min-width:1001px){ .svc-about{background-attachment:fixed;} }
.svc-about::before{content:"";position:absolute;inset:0;background:rgba(20,20,20,.55);}
.svc-about__inner{position:relative;text-align:center;}
.svc-about__h{margin:0 0 clamp(28px,3.4vw,48px);font-size:clamp(1.5rem,2.6vw,36px);font-weight:700;letter-spacing:.12em;line-height:1.6;color:#fff;}
.svc-about__body{font-size:16px;line-height:2.2;letter-spacing:.06em;}
.svc-about__body p{margin:0;}
.svc-about__body p + p{margin-top:1.6em;}
.msplit__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;}
.msplit--rev .msplit__media{order:2;}
.msplit__media{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--paper-2);}
.msplit__media img{width:100%;height:100%;object-fit:cover;display:block;}
.msplit__body .svc-head{margin-bottom:clamp(24px,3vw,36px);}
.msplit__h{margin:0 0 20px;font-size:clamp(1.2rem,1.8vw,24px);font-weight:700;line-height:1.7;letter-spacing:.06em;}
.msplit__p{margin:0;font-size:16px;line-height:2.1;letter-spacing:.04em;color:var(--ink);}
.msplit__p + .msplit__p{margin-top:1.4em;}
.msplit__body .intro-links{justify-content:flex-start;margin-top:28px;}
.svc-price .pr-tables{max-width:960px;margin-inline:auto;}
@media (max-width:900px){
  .msplit__inner{grid-template-columns:1fr;gap:28px;}
  .msplit--rev .msplit__media{order:0;}
  .svc-about__body{font-size:15px;text-align:left;}
  .svc-about__body br{display:none;}
  .msplit__p{font-size:15px;}
  .msplit__p br{display:none;}
}
/* 左右の一節：文の欄を広げ（写真5：文7）、語の途中で折り返さない＝読点で折り返す（2026-11-07） */
.msplit__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
.msplit__p,.svc-about__body p{word-break:keep-all;overflow-wrap:anywhere;}
@media (max-width:900px){ .msplit__inner{grid-template-columns:1fr;} }

/* =========================================================
   途中の一節（.msplit）の写真：画面の端から伸ばし、反対の端を大きな半円に。後ろに淡い面（添付の見本どおり・2026-11-07）
   ========================================================= */
.msplit{position:relative;overflow:hidden;}
.msplit::before{content:"";position:absolute;top:0;right:0;width:58%;height:42%;background:var(--paper-2);z-index:0;}
.msplit.band::before{background:var(--paper);}
.msplit--rev::before{right:auto;left:0;}
.msplit__inner{position:relative;z-index:1;grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.msplit--rev .msplit__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
.msplit__media{aspect-ratio:16/10;margin-left:calc(var(--gutter) * -1);border-radius:0 999px 999px 0;}
.msplit--rev .msplit__media{margin-left:0;margin-right:calc(var(--gutter) * -1);border-radius:999px 0 0 999px;}
@media (max-width:900px){
  .msplit__inner,.msplit--rev .msplit__inner{grid-template-columns:1fr;}
  .msplit__media,.msplit--rev .msplit__media{order:0;margin-left:calc(var(--gutter) * -1);margin-right:0;border-radius:0 999px 999px 0;width:calc(100% + var(--gutter) - 20px);}
  .msplit::before,.msplit--rev::before{left:auto;right:0;width:70%;height:30%;}
}
@media (max-width:900px){ .msplit__media,.msplit--rev .msplit__media{margin-left:calc((100% - 100vw) / 2);width:calc(100% + (100vw - 100%) / 2 - 20px);} }

/* =========================================================
   サービス詳細の「費用の目安」：左に見出しと説明・右に罫線なしの表（添付の見本どおり・2026-11-07）
   ========================================================= */
.svc-price__inner{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,6.8fr);gap:clamp(40px,6vw,104px);align-items:start;}
.svc-price__side{position:sticky;top:clamp(100px,12vh,140px);}
.svc-price__en{display:flex;align-items:center;gap:16px;margin:0 0 20px;font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.06em;}
.svc-price__en::after{content:"";width:80px;height:1px;background:var(--ink);}
.svc-price__h{margin:0 0 24px;font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:.08em;line-height:1.4;}
.svc-price__lead{margin:0 0 28px;font-size:14px;line-height:2.1;letter-spacing:.04em;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;}
.svc-price .pr-tables{max-width:none;margin:0;display:block;}
.svc-price .pr-table-block{margin:0 0 clamp(40px,5vw,64px);}
.svc-price .pr-table-head{margin:0 0 8px;padding:0;border:0;font-size:15px;font-weight:700;letter-spacing:.06em;}
.svc-price .pr-table{width:100%;border:0;border-collapse:collapse;background:none;}
.svc-price .pr-table tr{border:0;background:none;}
.svc-price .pr-table th,.svc-price .pr-table td{border:0;background:none;padding:16px 0;vertical-align:middle;}
.svc-price .pr-table th{width:auto;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1.7;text-align:left;color:var(--ink);}
.svc-price .pr-table th small{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--ink-2);}
.svc-price .pr-table td{width:9em;text-align:right;white-space:nowrap;font-family:var(--font-en);font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:.02em;color:var(--ink);}
.svc-price .pr-table td small{margin-left:4px;font-family:var(--font);font-size:11px;font-weight:400;color:var(--ink-2);}
.svc-price .pr-table tr.is-sub th{padding-left:1.2em;font-weight:500;color:var(--ink-2);}
.svc-price .pr-table tr.is-sub td{font-size:clamp(15px,1.3vw,18px);}
.svc-price .pr-table .sub-mark{display:none;}
.svc-price .pr-notes{margin:clamp(24px,3vw,40px) 0 0;padding:0;list-style:none;font-size:11px;line-height:1.9;color:var(--ink-2);}
.svc-price .pr-notes li::before{content:"※";margin-right:4px;}
.svc-price sup{font-size:10px;color:var(--ink-2);}
@media (max-width:900px){
  .svc-price__inner{grid-template-columns:1fr;gap:32px;}
  .svc-price__side{position:static;}
  .svc-price .pr-table td{width:auto;}
}
/* 費用の目安の手直し：説明は語の途中でも折り返す（「。」だけ落ちるのを防ぐ）・注記の ※ は元のまま・行の間を詰める */
.svc-price__lead{word-break:normal;}
.svc-price .pr-notes li::before{content:none;}
.svc-price .pr-table th,.svc-price .pr-table td{padding:12px 0;}
/* Scene など左右に並べた節は帯のグレーをやめて白の地に（写真の後ろの淡い面はグレー）（2026-11-07） */
.msplit.band{background:var(--paper);}
.msplit.band::before{background:var(--paper-2);}
/* 費用の目安の注記：※ を文の頭に1つ */
.svc-price .pr-notes li{position:relative;padding-left:1.3em;}
.svc-price .pr-notes li::before{content:"※";position:absolute;left:0;top:0;}
/* 他ページへの動線の見出し（Related Services・View More など）：大きく・中央に（2026-11-07） */
.ba-more__h{margin:0 0 clamp(28px,3.4vw,48px);text-align:center;font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:.12em;}
/* 費用の目安：表のグループの見出しを見出しらしく（大きく・左に黒い縦線・下に細い線）／料金案内はボタンに（2026-11-07） */
.svc-price .pr-table-head{position:relative;margin:0 0 6px;padding:0 0 12px 16px;border-bottom:1px solid var(--line);font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.4;}
.svc-price .pr-table-head::before{content:"";position:absolute;left:0;top:2px;width:4px;height:22px;background:var(--ink);}
.svc-price .pr-table-block + .pr-table-block{margin-top:clamp(48px,5vw,72px);}
.svc-price__btn{display:flex;width:100%;max-width:320px;margin-top:8px;}
/* カード（.feature-card）はリンクではない＝マウスを乗せても地の色を変えない（2026-11-07） */
.feature-card:hover{background:transparent;}
.band .feature-card:hover{background:var(--paper);}
/* カードの下の「〜について詳しく見る」はボタンに（1つのときは中央に・最大360px） */
.bar-btns--one{display:flex;justify-content:center;margin-top:clamp(32px,4vw,56px);}
.bar-btns--one .bar-btn{width:100%;max-width:360px;}
/* Scene など左右の節：写真の後ろの淡い面もなし（2026-11-07） */
.msplit::before,.msplit.band::before,.msplit--rev::before{content:none;}

/* ブランディング・WEB・運用支援の料金：プランを罫線なしの行に（左に名前と説明・右に金額）（2026-11-07） */
.plan-rows{display:flex;flex-direction:column;}
.plan-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line);}
.plan-row:first-child{padding-top:0;}
.plan-row__label{display:block;margin-bottom:6px;font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);}
.plan-row__name{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:.04em;line-height:1.6;}
.plan-row__for{margin:0;font-size:13px;line-height:1.9;color:var(--ink-2);}
.plan-row__items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-2);}
.plan-row__items li::before{content:"・";}
.plan-row__price{text-align:right;}
.plan-row__yen{margin:0;white-space:nowrap;font-family:var(--font-en);font-size:clamp(20px,1.9vw,26px);font-weight:700;letter-spacing:.02em;}
.plan-row__period{margin:6px 0 0;font-size:12px;color:var(--ink-2);white-space:nowrap;}
.svc-price__note{margin:clamp(20px,2.4vw,32px) 0 0;font-size:11px;line-height:1.9;color:var(--ink-2);}
.svc-price__btn + .svc-price__btn{margin-top:10px;}
.svc-price .price-table td{border:0;padding:12px 0;font-size:13px;font-weight:700;}
.svc-price .price-table td:last-child{text-align:right;font-family:var(--font-en);font-size:clamp(18px,1.6vw,22px);}
@media (max-width:680px){ .plan-row{grid-template-columns:1fr;gap:10px;} .plan-row__price{text-align:left;} }

/* =========================================================
   お客様の声 一覧（archive-voice.php・ba-and.co/projects-featured の組み・2026-11-07）
   ========================================================= */
.vlist{position:relative;overflow:hidden;}
.vlist .container{position:relative;z-index:1;}
.vlist__deco{position:absolute;inset:0;pointer-events:none;z-index:0;}
.vlist__shape{position:absolute;display:block;background:#E4E7EA;}
.vlist__shape--circle{width:clamp(220px,26vw,420px);height:clamp(220px,26vw,420px);border-radius:50%;left:calc(clamp(220px,26vw,420px) * -.45);top:420px;}
.vlist__shape--tri{width:clamp(200px,22vw,360px);height:clamp(200px,22vw,360px);clip-path:polygon(50% 0,100% 100%,0 100%);right:calc(clamp(200px,22vw,360px) * -.35);top:900px;transform:rotate(18deg);}
.vlist__shape--quarter{width:clamp(220px,24vw,380px);height:clamp(220px,24vw,380px);border-radius:100% 0 0 0;left:calc(clamp(220px,24vw,380px) * -.4);top:2100px;}
.vlist__shape--half{width:clamp(260px,28vw,440px);height:calc(clamp(260px,28vw,440px) / 2);border-radius:999px 999px 0 0;right:calc(clamp(260px,28vw,440px) * -.3);top:3200px;transform:rotate(-24deg);}
.vlist__list{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(64px,7vw,104px);}
.vlist__link{display:block;color:var(--ink);}
.vlist__media{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:var(--paper-2);}
.vlist__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.vlist__link:hover .vlist__media img{transform:scale(1.03);}
.vlist__title{display:block;margin-top:clamp(18px,2vw,26px);font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:.04em;line-height:1.5;}
.vlist__date{display:block;margin-top:6px;font-family:var(--font-en);font-size:14px;color:var(--ink-2);}
.vlist__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.vlist__tag{display:inline-block;padding:3px 8px;border:1px solid var(--ink);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.4;}
@media (max-width:680px){ .vlist__shape{opacity:.7;} .vlist__media{border-radius:6px;} }

/* サービス詳細の Pricing に並べる料金案内の表（price_parts）（2026-11-07） */
.svc-price__part{margin-top:clamp(56px,6vw,88px);}
.svc-price__part .sub{margin:0 0 16px;font-size:13px;line-height:2;color:var(--ink-2);text-align:left;}
.svc-price__part .pr-part-head{font-size:20px;}
.svc-price .pr-table-spot td{padding:12px 0;font-size:13px;}
.svc-price .pr-table-spot td:last-child{text-align:right;white-space:nowrap;font-family:var(--font-en);font-size:clamp(16px,1.4vw,20px);font-weight:700;}
.svc-price .pr-table-spot td:nth-child(2){width:5em;text-align:right;color:var(--ink-2);}
.svc-price .pr-web-case,.svc-price .pr-case-list{margin-top:32px;}

/* 料金の表の手直し（2026-11-07）：WEB修正の作業項目は左寄せ・サポートプランの見出しと説明・制作事例の費用の表 */
.svc-price .pr-table-spot td:first-child{text-align:left;white-space:normal;width:auto;font-family:var(--font);font-size:13px;font-weight:700;}
.svc-price .pr-table-spot thead th{padding:0 0 8px;font-size:11px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line);}
.svc-price .pr-table-spot thead th:nth-child(2),.svc-price .pr-table-spot thead th:last-child{text-align:right;}
.svc-price .apd-support .pr-block-head{position:relative;margin:clamp(40px,4vw,56px) 0 6px;padding:0 0 12px 16px;border-bottom:1px solid var(--line);font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.4;}
.svc-price .apd-support .pr-block-head::before{content:"";position:absolute;left:0;top:2px;width:4px;height:22px;background:var(--ink);}
.svc-price .apd-support > .pr-block-head:first-child{margin-top:0;}
.svc-price .apd-support p{margin:10px 0;font-size:13px;line-height:2;color:var(--ink-2);}
.svc-price .apd-support td{white-space:normal;font-size:clamp(15px,1.3vw,18px);}
.svc-price .pr-case-head{margin-top:clamp(40px,4vw,56px);}
.svc-price .pr-case-table{width:100%;border-collapse:collapse;}
.svc-price .pr-case-table th,.svc-price .pr-case-table td{padding:8px 0;border:0;border-bottom:1px solid var(--line);font-size:13px;text-align:left;}
.svc-price .pr-case-table td:last-child{text-align:right;font-family:var(--font-en);font-weight:700;}
/* Consultation（下層）：写真の上の小さな英字 */
.svc-about__en{margin:0 0 12px;font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.85);}
/* グラフィックのメニュー：各項目の上に写真 */
.sub-menu--img .sub-menu__item a{display:flex;flex-direction:column;align-items:flex-start;}
.sub-menu__img{display:block;width:100%;aspect-ratio:3/2;margin-bottom:16px;overflow:hidden;border-radius:4px;background:var(--paper-2);}
.sub-menu__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease);}
.sub-menu--img a:hover .sub-menu__img img{transform:scale(1.04);}
/* Point の番号の後ろに「／」の飾り（2026-11-07） */
.feature-card__label--no::after{content:"／";margin-left:.35em;font-weight:400;opacity:.5;}
/* サービス詳細の料金表：金額を1行に（2026-11-07） */
.svc-price .pr-table td{white-space:nowrap;}
@media (max-width:767px){.svc-price .pr-table td{white-space:normal;}}

/* ===== 2026-11-07 スマホの見直し ===== */
/* グラフィックのメニュー：小さな写真を左に、右に英字・題・説明（PC・SP共通） */
.sub-menu--img .sub-menu__item a{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:18px;row-gap:4px;align-content:center;align-items:start;}
.sub-menu--img .sub-menu__img{grid-column:1;grid-row:1 / 4;align-self:center;width:96px;aspect-ratio:1;margin:0;border-radius:4px;}
.sub-menu--img .sub-menu__en,.sub-menu--img .sub-menu__title,.sub-menu--img .sub-menu__catch{grid-column:2;}
.sub-menu--img .sub-menu__catch{font-size:12px;line-height:1.6;}
/* フッターの電話番号を折り返さない */
.ft-pill__label{white-space:nowrap;}
@media (max-width:900px){
  /* お客様の声：SP は横にスワイプ（表示中の札の位置ずらしを打ち消す） */
  .st2__sticky{padding:0;}
  .st2__slides{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .st2__slides::-webkit-scrollbar{display:none;}
  .st2__slide,.st2__slide.is-on{flex:0 0 82%;transform:none;scroll-snap-align:center;}
  .st2__h{word-break:normal;line-break:strict;}
  /* フッター RECRUIT：DOWNLOAD と同じく左から */
  .ft-card:last-child{justify-content:flex-end;}
  .ft-pill--big{padding:0 22px 0 26px;gap:12px;font-size:16px;}
}
@media (max-width:767px){
  .sub-menu--img .sub-menu__item a{grid-template-columns:80px minmax(0,1fr);column-gap:14px;}
  .sub-menu--img .sub-menu__img{width:80px;}
  /* 言葉の節のあとの白どうしの空きを詰める */
  body main > section.statement{padding-bottom:48px;}
  body.home main > section.movie{padding-top:40px;}
  /* WHY/HOW/WHAT の円：What の文字が How の円にかからないように */
  .gc__ring--what i{margin-top:4%;}
  /* 中央寄せの文章の幅を画面いっぱいに */
  .concept-intro .prose--lines{width:auto;max-width:none;margin-left:0;margin-right:0;}
  /* 本文は14pxを基準に */
  body{font-size:14px;}
  body .prose,body .prose p,body .prose li,body p.feature-card__text,body p.card__text,body p.store__text,body .statement__line,
  body .svc-about__body p,body .ba-row__text,body .ba-row__text p,body p.msplit__p,body .ktwo__body p,body p.ba-mrow__body,
  body .ba-concept__lead,body .ba-concept__lead p,body .ba-head__lead,body .ba-head__lead p,body .list-dots li,body p.ksplit__addr,
  body p.hero__sub,body p.ph__lead,body .mvfig__mtext,body .mb-card__txt,body p.gc__t,body .ba-band__text,body .ba-band__text p{font-size:14px;}
  /* 見出しも本文に合わせて一段ずつ */
  body .ph__en{font-size:30px;}
  body .ph__catch,body .ktwo__title{font-size:20px;}
  body h2.svc-head__en{font-size:28px;}
  body h2.svc-about__h,body .msplit__h,body h2.intro-h{font-size:20px;}
  body h3.card__title,body h3.feature-card__title,body p.gc__h,body span.sub-menu__title{font-size:15px;}
  body .st2__h{font-size:16px;}
  body h2.st2__title{font-size:36px;}
  body h2.rankv__en{font-size:30px;}
  body .ba-title__en{font-size:24px;}
  body p.ba-mrow__head,body p.ba-row__head,body span.mb-card__name{font-size:17px;}
  body .ba-link__en{font-size:19px;}
}
/* スマホの見直し 2（2026-11-07） */
.sub-menu--img .sub-menu__catch{word-break:keep-all;overflow-wrap:anywhere;}
.ft-pill__note{white-space:nowrap;}
@media (max-width:767px){
  body main .concept-intro .prose.prose--lines{width:auto;}
  .ktwo__title .br-sp{display:none;}
  .ft-pill--big{padding:0 18px 0 22px;gap:10px;font-size:15px;}
  .ft-pill--big .ft-pill__note{font-size:11px;}
}

/* Pricing を写真撮影・動画制作の組みに統一（サービス5ページ・下層35ページ・2026-11-07） */
.svc-price__main > * + *{margin-top:clamp(48px,5vw,72px);}
.svc-price__main > .pr-tables + .pr-notes{margin-top:clamp(24px,3vw,40px);}
.svc-price .pr-table-sub{margin:8px 0 4px;font-size:12px;line-height:1.9;color:var(--ink-2);}
.svc-price .pr-table-block .sub{margin:12px 0 0;font-size:12px !important;line-height:1.9;color:var(--ink-2);text-align:left;}
.svc-price .pr-table tr.is-total th,.svc-price .pr-table tr.is-total td{border-top:1px solid var(--ink);padding-top:18px;}
.svc-price .pr-table tr.is-total th{font-size:15px;}
.svc-price .pr-table tr.is-total td{font-size:clamp(20px,1.9vw,26px);}
.svc-price .pr-spot-svc .pr-table-spot thead,.svc-price .pr-spot-svc .pr-table-spot td:nth-child(2){display:none;}
.svc-price .pr-spot-svc .pr-table-spot td{padding:16px 0;}
.svc-price .pr-spot-svc .pr-table-spot td:last-child{font-size:clamp(18px,1.6vw,22px);}
/* スポット料金：保守あり／保守なしの2列の金額（2026-11-11） */
.svc-price .pr-table-spot.is-2p thead,.svc-price .pr-spot-svc .pr-table-spot.is-2p thead{display:table-header-group;}
.svc-price .pr-table-spot.is-2p td:nth-child(2),.svc-price .pr-spot-svc .pr-table-spot.is-2p td:nth-child(2){display:table-cell;width:auto;padding-left:16px;text-align:right;white-space:nowrap;font-family:var(--font-en);font-size:clamp(16px,1.4vw,20px);font-weight:700;color:var(--ink);}
.svc-price .pr-table-spot.is-2p td:last-child{padding-left:16px;}
.svc-price .pr-table-spot.is-2p thead th:nth-child(2){padding-left:16px;}
.svc-price .pr-spot-notes{margin-top:clamp(20px,2.4vw,32px);}
.svc-price .pr-spot-notes .sub{margin:0 0 8px;font-size:11px;line-height:1.9;color:var(--ink-2);text-align:left;}
.svc-price .pr-spot-notes strong{font-weight:700;color:var(--ink);}
.svc-price .pr-table th small br + *{display:inline;}
@media (max-width:767px){
  .svc-price .pr-table th{padding-right:16px;}
  .svc-price .pr-table td{font-size:17px;}
}
.svc-price .svc-price__main > * + *{margin-top:clamp(48px,5vw,72px);}
.svc-price .svc-price__main > .pr-tables + .pr-notes{margin-top:clamp(24px,3vw,40px);}
.svc-price .pr-notes li:has(> sup:first-child)::before{content:none;}
.svc-price .pr-notes li:has(> sup:first-child){padding-left:0;}
@media (max-width:767px){
  .svc-price .pr-table tr:has(th small){display:flex;flex-direction:column;align-items:stretch;padding:14px 0;}
  .svc-price .pr-table tr:has(th small) th{padding:0 0 6px;}
  .svc-price .pr-table tr:has(th small) td{padding:0;text-align:left;width:auto;}
}

/* お客様の声の一覧：背景のグレーの円（円・四分円・半円）は出さない（2026-11-07） */
.vlist__shape--circle,.vlist__shape--quarter,.vlist__shape--half{display:none;}

/* 料金案内 /price/：サービス詳細の Pricing と同じ組みで節を並べる（2026-11-07） */
.svc-price .pr-notes li::before{width:auto;height:auto;background:none;top:0;}   /* price.css の短い線と「※」が重なっていた */
.page-price .svc-price__h{font-size:clamp(22px,2vw,26px);}
.page-price .pr-anchors{margin-top:clamp(48px,5vw,72px);}
.page-price .pr-legend{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px;line-height:1.9;color:var(--ink-2);}
.page-price .pr-legend li{position:relative;padding-left:2.6em;}
.page-price .pr-legend li sup{position:absolute;left:0;top:.55em;font-size:10px;line-height:1;color:var(--ink);}
.page-price .pr-legend li:not(:has(sup))::before{content:"※";position:absolute;left:0;color:var(--ink-2);}
.page-price .pr-legend-pay{margin:clamp(24px,3vw,32px) 0 0;padding:20px 24px;border:1px solid var(--line);font-size:13px;line-height:1.9;}

/* お問い合わせのフォームと、パートナーシップポリシーなど一般ページの本文は中央に置く（2026-11-07） */
.page-contact .form,.page-download .form{margin-inline:auto;}
.page-generic .article{margin-inline:auto;}
.page-contact .ct-hero{padding-bottom:0;}   /* カードを外したので、説明文とフォームの間を詰める */

/* 代表メッセージ：縦書きの英字・写真に重なるキャッチ・細い列の本文（2026-11-07） */
.msg2__hero{position:relative;display:grid;grid-template-columns:clamp(80px,9vw,150px) 1fr;align-items:start;}
.msg2__vert{margin:0;writing-mode:vertical-rl;font-family:var(--font-en);font-size:clamp(80px,9vw,140px);font-weight:500;line-height:1;letter-spacing:.02em;color:#E9ECEF;user-select:none;}
.msg2__visual{position:relative;}
.msg2__label{margin:0 0 clamp(32px,4vw,56px);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);}
.msg2__photo{margin:0;width:min(560px,56%);aspect-ratio:4/5;border-radius:12px;overflow:hidden;}
.msg2__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;}
.msg2__catch{position:absolute;left:calc(min(560px,56%) - clamp(40px,5vw,90px));top:50%;transform:translateY(-30%);}
.msg2__catch-text{margin:0;font-size:clamp(28px,3.3vw,50px);font-weight:700;line-height:1.55;letter-spacing:.04em;color:var(--ink);}
.msg2__name{margin:clamp(20px,2.4vw,32px) 0 0;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink);}
.msg2__name span{margin-left:1em;}
.msg2__body{max-width:600px;margin:clamp(72px,8vw,120px) auto 0;}
.msg2__profile p{margin:0;font-size:14px;font-weight:500;line-height:2;letter-spacing:.04em;color:var(--ink);}
.msg2__profile .msg2__profile-h{font-size:13px;font-weight:700;}
.msg2__profile .msg2__quals{margin-top:12px;font-size:12px;color:var(--ink-2);}
.msg2__img{margin:clamp(56px,6vw,88px) 0;border-radius:12px;overflow:hidden;aspect-ratio:3/2;}
.msg2__img img{width:100%;height:100%;object-fit:cover;display:block;}
.msg2__sec + .msg2__sec{margin-top:clamp(56px,6vw,80px);}
.msg2__sec h2{margin:0 0 20px;font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.6;letter-spacing:.04em;}
.msg2__sec p{margin:0 0 1.4em;font-size:15px;line-height:2.05;letter-spacing:.04em;color:var(--ink-2);}
.msg2__sec p:last-child{margin-bottom:0;}
.msg2__body .message-sign{margin-top:clamp(56px,6vw,80px);}
@media (max-width:820px){
  .msg2__hero{display:block;}
  .msg2__vert{position:absolute;right:-6px;top:56px;z-index:1;font-size:64px;color:rgba(233,236,239,.85);}
  .msg2__label{margin-bottom:20px;}
  .msg2__photo{width:100%;aspect-ratio:1/1;}
  .msg2__catch{position:static;transform:none;margin-top:32px;}
  .msg2__catch-text{font-size:26px;}
  .msg2__name span{display:block;margin:4px 0 0;}
  .msg2__body{margin-top:56px;}
  .msg2__img{margin:48px 0;}
}
.msg2__sec h2,.msg2__catch-text{word-break:auto-phrase;}   /* 小見出しとキャッチを文節で折り返す */

/* フッター：CTA の上に tone village・信州ファームデザイン・信州ファームマーケットのロゴ（中央・2026-11-07） */
.ft-group{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(32px,5vw,72px);margin:0 0 clamp(48px,5vw,72px);padding:0;list-style:none;}
.ft-group__item a{display:block;transition:opacity .3s;}
.ft-group__item a:hover{opacity:.6;}
.ft-group__item img{display:block;height:72px;width:auto;}
.ft-group__item.is-wide img{height:44px;}
@media (max-width:680px){
  .ft-group{gap:28px 36px;}
  .ft-group__item img{height:56px;}
  .ft-group__item.is-wide{flex-basis:100%;display:flex;justify-content:center;}
  .ft-group__item.is-wide img{height:36px;}
}
/* 代表メッセージ：縦書きの英字が写真の下にもぐっていた（列の幅＜文字の大きさ）→ 列の幅と文字の大きさをそろえる */
.msg2__hero{--vw:clamp(72px,7.5vw,128px);grid-template-columns:var(--vw) 1fr;column-gap:clamp(16px,2vw,32px);}
.msg2__vert{font-size:var(--vw);width:var(--vw);overflow:visible;}
.msg2__photo{width:min(600px,58%);}
.msg2__catch{left:calc(min(600px,58%) - clamp(40px,5vw,90px));}
@media (max-width:1100px) and (min-width:821px){
  .msg2__photo{width:62%;}
  .msg2__catch{left:auto;right:0;width:46%;}
  .msg2__catch-text{font-size:clamp(24px,3vw,34px);}
  .msg2__name span{display:block;margin:4px 0 0;}
}
/* フッター上のロゴに一言の説明（2026-11-07）。ロゴは高さをそろえて、説明は下に中央で */
.ft-group{align-items:flex-start;}
.ft-group__item a{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--ink);text-decoration:none;}
.ft-group__item img{height:72px;}
.ft-group__item.is-wide img{height:44px;margin-block:14px;}
.ft-group__desc{font-size:12px;font-weight:500;letter-spacing:.06em;line-height:1.6;color:var(--ink-2);white-space:nowrap;}
@media (max-width:680px){
  .ft-group__item img{height:56px;}
  .ft-group__item.is-wide img{height:36px;margin-block:10px;}
  .ft-group__desc{font-size:12px;}
}

/* ABOUT の View More：上だけ角丸・フッターより薄い面・フッターの下へ80px潜らせる（フッターが上に乗る・2026-11-07） */
.page-about .ba-more{position:relative;z-index:1;background:#F8F8F8;border-radius:80px 80px 0 0;margin-bottom:-80px;padding-bottom:calc(clamp(80px,9vw,150px) + 80px);}
@media (max-width:680px){ .page-about .ba-more{border-radius:48px 48px 0 0;} }

/* Pricing の右の表：文字が左の説明・本文より小さかった → 2列の本文（15〜16px）にそろえる。最小は12px（2026-11-07） */
.svc-price__lead{font-size:15px;}
.svc-price .pr-table-head,.svc-price .apd-support .pr-block-head{font-size:20px;}
.svc-price .pr-table-head::before,.svc-price .apd-support .pr-block-head::before{height:24px;}
.svc-price .pr-table th,.svc-price .pr-table-spot td:first-child,.svc-price .price-table td,.svc-price .pr-case-table th,.svc-price .pr-case-table td{font-size:16px;}
.svc-price .pr-table th small{margin-top:6px;font-size:13px;line-height:1.85;}
.svc-price .pr-table td{font-size:clamp(20px,1.8vw,26px);}
.svc-price .pr-table td small{font-size:12px;}
.svc-price .pr-table tr.is-sub th{font-size:15px;}
.svc-price .pr-table tr.is-sub td,.svc-price .apd-support td{font-size:clamp(17px,1.5vw,20px);}
.svc-price .pr-table tr.is-total th{font-size:17px;}
.svc-price .pr-table tr.is-total td{font-size:clamp(22px,2vw,28px);}
.svc-price .pr-table-spot td,.svc-price .price-table td:last-child{font-size:16px;}
.svc-price .pr-table-spot td:last-child,.svc-price .pr-spot-svc .pr-table-spot td:last-child,.svc-price .price-table td:last-child{font-size:clamp(20px,1.8vw,24px);}
.svc-price .pr-table-spot thead th{font-size:12px;}
.svc-price .pr-table-sub,.svc-price .pr-table-block .sub,.svc-price .pr-spot-notes .sub,.svc-price__part .sub,.svc-price .apd-support p{font-size:13px !important;}
.svc-price .pr-notes,.svc-price__note{font-size:12px;}
.svc-price sup{font-size:11px;}
.page-price .pr-legend{font-size:14px;}
.page-price .pr-legend-pay{font-size:14px;}
@media (max-width:680px){
  .svc-price .pr-table th,.svc-price .pr-table-spot td:first-child{font-size:15px;}
  .svc-price .pr-table td,.svc-price .pr-table-spot td:last-child{font-size:19px;}
}

/* 料金案内の目次（2026-11-07）：白い枠・短い縦線で区切り・下線の文字・いまの節は上に黒い太線 */
.page-price .pr-toc{display:flex;margin-top:clamp(48px,5vw,72px);background:#fff;border:1px solid #E6E6E6;}
.pr-toc__item{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;padding:clamp(26px,2.6vw,36px) 12px;font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1.5;color:var(--ink);text-align:center;text-decoration:none;white-space:nowrap;}
.pr-toc__item span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:opacity .25s;}
.pr-toc__item:hover span{opacity:.6;}
.pr-toc__item + .pr-toc__item::before{content:"";position:absolute;left:0;top:50%;width:1px;height:32px;margin-top:-16px;background:#E6E6E6;}
.pr-toc__item::after{content:"";position:absolute;left:20px;right:20px;top:-1px;height:5px;background:var(--ink);transform:scaleX(0);transition:transform .3s;}
.pr-toc__item.is-current span{text-decoration:none;}
.pr-toc__item.is-current::after{transform:scaleX(1);}
@media (max-width:900px){
  .page-price .pr-toc{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .page-price .pr-toc::-webkit-scrollbar{display:none;}
  .pr-toc__item{flex:0 0 auto;padding:22px 20px;font-size:14px;}
  .pr-toc__item::after{top:0;left:12px;right:12px;}
}
/* 運用支援の Support：項目ごとに該当する下層ページへのボタン（2026-11-07） */
.store__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,28px);}
.store__btns .bar-btn{width:100%;max-width:320px;}

/* 白抜きのボタン（黒のボタンと並べる二つ目・2026-11-07） */
.bar-btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.bar-btn--ghost:hover{background:var(--paper-2);color:var(--ink);}

/* 運用支援：マイページから修正を頼める（2026-11-07） */
.op-mypage__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin:0;padding:0;list-style:none;counter-reset:none;}
.op-mypage__item{padding:clamp(28px,3vw,40px) clamp(24px,2.4vw,32px);background:#fff;border:1px solid #E6E6E6;}
.band .op-mypage__item{border-color:transparent;}
.op-mypage__no{display:block;font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--ink-2);}
.op-mypage__h{margin:14px 0 12px;font-size:18px;font-weight:700;line-height:1.6;letter-spacing:.04em;}
.op-mypage__text{margin:0;font-size:14px;line-height:2;color:var(--ink-2);}
.op-mypage__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(32px,4vw,48px);}
.op-mypage__btns .bar-btn{width:100%;max-width:320px;}
@media (max-width:820px){ .op-mypage__list{grid-template-columns:1fr;} }

/* プラン診断のポップアップ（2026-11-07） */
html.pf-lock{overflow:hidden;}
.pf{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;}
.pf[hidden]{display:none;}
.pf__overlay{position:absolute;inset:0;background:rgba(20,20,20,.45);opacity:0;transition:opacity .25s;}
.pf__dialog{position:relative;width:min(640px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(32px,4vw,48px) clamp(22px,4vw,48px);background:#fff;border-radius:16px;opacity:0;transform:translateY(16px);transition:opacity .25s,transform .25s;}
.pf.is-open .pf__overlay,.pf.is-open .pf__dialog{opacity:1;transform:none;}
.pf__close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;background:none;font-size:24px;line-height:1;color:var(--ink);cursor:pointer;}
.pf__en{margin:0;font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--ink-2);}
.pf__title{margin:8px 0 10px;font-size:clamp(20px,2.2vw,26px);font-weight:700;line-height:1.5;letter-spacing:.04em;word-break:auto-phrase;}
.pf__lead{margin:0 0 24px;font-size:14px;line-height:1.9;color:var(--ink-2);}
.pf__steps{margin:0;padding:0;list-style:none;}
.pf__count{margin:0 0 6px;font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);}
.pf__q{margin:0 0 16px;font-size:17px;font-weight:700;line-height:1.7;}
.pf__choices{display:grid;gap:10px;}
.pf__choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:16px 20px;border:1px solid #DADADA;border-radius:10px;background:#fff;font:inherit;font-size:15px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,background .2s;}
.pf__choice small{font-size:12px;font-weight:400;color:var(--ink-2);}
.pf__choice:hover,.pf__choice:focus-visible{border-color:var(--ink);background:var(--paper-2);outline:none;}
.pf__back{margin-top:16px;padding:6px 0;border:0;background:none;font:inherit;font-size:13px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;cursor:pointer;}
.pf__table{width:100%;border-collapse:collapse;}
.pf__table th,.pf__table td{padding:12px 0;border-bottom:1px solid #E6E6E6;vertical-align:middle;}
.pf__table th{font-size:15px;font-weight:700;line-height:1.6;text-align:left;}
.pf__table th small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--ink-2);}
.pf__table td{padding-left:12px;font-family:var(--font-en);font-size:18px;font-weight:700;text-align:right;white-space:nowrap;}
.pf__table td small{margin-left:2px;font-family:var(--font);font-size:12px;font-weight:400;color:var(--ink-2);}
.pf__total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:4px 10px;margin:16px 0 0;}
.pf__total span{margin-right:auto;font-size:14px;font-weight:700;}
.pf__total strong{font-family:var(--font-en);font-size:clamp(26px,3vw,32px);font-weight:700;}
.pf__total small{font-size:12px;color:var(--ink-2);}
.pf__notes{margin:16px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.9;color:var(--ink-2);}
.pf__notes li{position:relative;padding-left:1.2em;}
.pf__notes li::before{content:"※";position:absolute;left:0;}
.pf__actions{display:grid;gap:10px;margin-top:24px;}
.pf-open{position:fixed;left:16px;bottom:16px;z-index:900;display:flex;align-items:center;gap:8px;padding:14px 20px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;box-shadow:0 6px 20px rgba(0,0,0,.18);cursor:pointer;}
.pf-open[hidden]{display:none;}
.pf-open::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;}
.pf{z-index:100000;}   /* ヘッダーとわたぼうより上に */
.page-apply .apply-retry{margin-top:24px;font-size:14px;}
.page-apply .cf7-accept{font-size:14px;}
.page-apply .cf7-note{margin:8px 0 24px;font-size:13px;line-height:1.9;color:var(--ink-2);}
/* 利用規約（申し込みのページの枠と、規約のページ・2026-11-11） */
.apply-terms{margin-bottom:40px;}
.apply-terms__h{margin:0 0 12px;font-size:18px;font-weight:700;}
.apply-terms__box{max-height:420px;overflow:auto;padding:24px 26px;border:1px solid #DADADA;border-radius:10px;background:#fff;}
.apply-terms__box:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.apply-terms__link{margin:10px 0 0;font-size:13px;}
.apply-terms__link a{text-decoration:underline;text-underline-offset:4px;}
.terms-body{font-size:14px;line-height:1.9;color:var(--ink);}
.terms-body h2{margin:32px 0 10px;font-size:16px;font-weight:700;}
.terms-body h2:first-of-type{margin-top:20px;}
.terms-body p{margin:0 0 10px;}
.terms-body hr{margin:32px 0;border:0;border-top:1px solid #DADADA;}
.terms-body table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px;}
.terms-body th,.terms-body td{padding:10px 12px;border:1px solid #DADADA;text-align:left;vertical-align:top;}
.terms-body th{background:var(--paper-2);white-space:nowrap;}
.terms-body td:first-child{white-space:nowrap;font-weight:700;}
.terms-body--page{max-width:820px;margin-inline:auto;font-size:15px;}
.terms-body--page h2{font-size:18px;margin-top:48px;}
@media (max-width:640px){
  .apply-terms__box{padding:18px 16px;max-height:360px;}
  .terms-body td:first-child,.terms-body th{white-space:normal;}
  .terms-body--page{font-size:14px;}
}

/* 申し込みのフォームの URL 欄も、ほかの入力欄と同じ見た目に（2026-11-07） */
.wpcf7 input[type="url"]{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.9em 1em;transition:border-color .3s var(--ease);}
.wpcf7 input[type="url"]:focus{outline:none;border-color:var(--ink);}

/* プラン診断：owndays の価格シミュレーターの組み（2026-11-07）。白黒のみ・強調は塗り */
.pf__dialog{width:min(1040px,100%);padding:clamp(40px,4.4vw,56px) clamp(20px,4vw,56px) clamp(32px,4vw,48px);}
.pf__head{text-align:center;}
.pf__en{font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--ink);}
.pf__title{margin:10px 0 14px;font-size:clamp(24px,2.6vw,32px);}
.pf__lead{margin:0 0 28px;font-size:15px;}
.pf__seg{display:flex;width:min(420px,100%);margin:0 auto clamp(28px,3vw,40px);padding:5px;background:var(--paper-2);border-radius:8px;}
.pf__seg-btn{flex:1;padding:12px 8px;border:0;border-radius:6px;background:none;font:inherit;font-size:14px;font-weight:700;color:#9A9A9A;cursor:pointer;transition:background .2s,color .2s;}
.pf__seg-btn.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pf__cards{display:flex;align-items:stretch;justify-content:center;gap:12px;}
.pf__op{display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:22px;font-weight:300;color:#8A8A8A;}
.pf__op--eq{margin:14px 0;transform:rotate(90deg);}
.pf-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:22px 20px 20px;background:#fff;border:1px solid #DADADA;border-radius:10px;}
.pf-card__name{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:18px;font-weight:700;letter-spacing:.04em;}
.pf-card__row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding-bottom:14px;border-bottom:1px dashed #BDBDBD;}
.pf-card__badge{padding:4px 12px;border-radius:999px;background:#8A8A8A;color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;}
.pf-card__badge.is-strong{background:var(--ink);}
.pf-card__price{font-family:var(--font-en);font-size:22px;font-weight:700;white-space:nowrap;}
.pf-card__price small{margin-left:2px;font-family:var(--font);font-size:12px;font-weight:400;color:var(--ink-2);}
.pf-card__sel{flex:1;margin:12px 0 16px;font-size:14px;line-height:1.7;color:var(--ink-2);}
.pf-card__btn{width:100%;padding:13px 10px;border:0;border-radius:6px;background:#4A4A4A;color:#fff;font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background .2s;}
.pf-card__btn:hover,.pf-card__btn:focus-visible{background:var(--ink);outline:none;}
.pf__sum{width:min(640px,100%);margin:0 auto;padding:clamp(24px,3vw,36px) clamp(20px,3.4vw,44px);background:var(--paper-2);border-radius:12px;}
.pf__sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding-bottom:14px;border-bottom:1.5px dashed var(--ink);}
.pf__sum-total span{font-size:20px;font-weight:700;}
.pf__sum-total strong{font-family:var(--font-en);font-size:clamp(30px,3.4vw,40px);font-weight:700;line-height:1;}
.pf__sum-rows{margin:12px 0 0;}
.pf__sum-rows div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14px;}
.pf__sum-rows dt{color:var(--ink-2);}
.pf__sum-rows dd{margin:0;font-family:var(--font-en);font-weight:700;}
.pf__sum-tax{margin:8px 0 0;text-align:right;font-size:13px;color:var(--ink-2);}
.pf__sum .pf__notes{margin-top:14px;}
.pf__sum .pf__actions{margin-top:20px;}
.pf__sum .bar-btn--ghost{background:#fff;}
/* 選択肢の画面 */
.pf-sheet{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,20,20,.35);}
.pf-sheet[hidden]{display:none;}
.pf-sheet__box{width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:28px 24px 20px;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);}
.pf-sheet__title{margin:0 0 16px;font-size:17px;font-weight:700;}
.pf-sheet__list{display:grid;gap:10px;}
.pf-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 18px;border:1px solid #DADADA;border-radius:10px;background:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s;}
.pf-opt__t{display:flex;flex-direction:column;gap:2px;font-size:15px;font-weight:700;color:var(--ink);}
.pf-opt__t small{font-size:12px;font-weight:400;color:var(--ink-2);}
.pf-opt__p{font-family:var(--font-en);font-size:16px;font-weight:700;white-space:nowrap;}
.pf-opt:hover,.pf-opt:focus-visible{border-color:var(--ink);outline:none;}
.pf-opt.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper-2);}
/* 修正「それより多い」の回数（2026-11-10） */
.pf-count__input::-webkit-inner-spin-button,.pf-count__input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}
.pf-count__input{-moz-appearance:textfield;appearance:textfield;}
.pf-count{margin-top:14px;padding:16px 18px;border-radius:10px;background:var(--paper-2);}
.pf-count[hidden]{display:none;}
.pf-count__label{display:block;font-size:14px;font-weight:700;}
.pf-count__ctrl{display:flex;align-items:center;gap:8px;margin-top:10px;}
.pf-count__btn{width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;background:#fff;font:inherit;font-size:18px;line-height:1;color:var(--ink);cursor:pointer;}
.pf-count__btn:disabled{border-color:#DADADA;color:#BDBDBD;cursor:default;}
.pf-count__input{width:72px;height:40px;padding:0 8px;border:1px solid #DADADA;border-radius:8px;background:#fff;font-family:var(--font-en);font-size:18px;font-weight:700;text-align:center;}
.pf-count__unit{font-size:14px;}
.pf-count__note{margin:10px 0 0;font-size:12px;line-height:1.7;color:var(--ink-2);}
@media (max-width:820px){
  .pf__cards{flex-direction:column;gap:6px;}
  .pf__op{margin:0 auto;}
  .pf-card__sel{margin-bottom:14px;}
}
.pf__op--eq{display:block;width:max-content;margin:14px auto;line-height:1;}   /* 回した「＝」が横幅いっぱいの帯になり、真ん中のカードのボタンを覆っていた */
.pf__op{pointer-events:none;}

/* 運用支援：マイページの HOW TO USE（owndays の組み・2026-11-07）。スマホの枠の画面は HTML のモック */
.op-mp__head{position:relative;width:max-content;max-width:100%;margin:0 auto;padding:22px clamp(28px,4vw,56px);text-align:center;}
.op-mp__head::before,.op-mp__head::after{content:"";position:absolute;top:0;bottom:0;width:18px;border:3px solid var(--ink);}
.op-mp__head::before{left:0;border-right:0;}
.op-mp__head::after{right:0;border-left:0;}
.op-mp__en{margin:0;font-family:var(--font-en);font-size:clamp(16px,1.6vw,20px);font-weight:700;letter-spacing:.06em;}
.op-mp__h{margin:6px 0 0;font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:.06em;line-height:1.5;}
.op-mp__lead{margin:clamp(28px,3vw,40px) auto 0;max-width:760px;font-size:15px;line-height:2;text-align:center;color:var(--ink-2);}
.op-mp__br{display:none;}
@media (min-width:821px){ .op-mp__br{display:inline;} }
.op-mp__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin:clamp(48px,5vw,72px) 0 0;padding:0;list-style:none;}
.op-mp__step{display:flex;flex-direction:column;align-items:center;}
.op-mp__pill{display:inline-block;padding:3px 18px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.06em;}
.op-mp__step-h{margin:12px 0 20px;font-size:clamp(17px,1.6vw,20px);font-weight:700;line-height:1.55;letter-spacing:.06em;text-align:center;}
.op-mp__text{margin:22px 0 0;font-size:14px;line-height:2;color:var(--ink-2);}
.op-mp__fine{margin:24px 0 0;font-size:12px;color:var(--ink-2);text-align:center;}
.op-mp__point{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;max-width:720px;margin:clamp(40px,4vw,56px) auto 0;padding:22px 28px;background:#fff;border-radius:12px;}
.op-mp__point p{margin:0;font-size:15px;line-height:1.9;}
.band .op-mp__point{background:#fff;}
.op-mp:not(.band) .op-mp__point{background:var(--paper-2);}
.op-mp__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(32px,4vw,48px);}
.op-mp__btns .bar-btn{width:100%;max-width:320px;}

/* スマホの枠 */
.op-phone{width:min(250px,100%);aspect-ratio:9/18.5;padding:9px;background:#1E1E1E;border-radius:36px;box-shadow:0 18px 40px rgba(0,0,0,.14);}
.op-phone__screen{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;border-radius:28px;font-size:11px;line-height:1.6;color:var(--ink);}
.op-phone__screen::before{content:"";position:absolute;left:50%;top:8px;width:64px;height:18px;margin-left:-32px;background:#1E1E1E;border-radius:999px;z-index:3;}
.op-scr{padding:38px 14px 14px;}
.op-scr__title{margin:0 0 10px;font-size:13px;font-weight:700;}
/* STEP 1：サイトの上にピンとコメント */
.op-scr--review{padding:34px 0 0;background:#F4F4F4;}
.op-scr__site{margin:0 10px;background:#fff;border-radius:8px;overflow:hidden;}
.op-scr__nav{display:flex;align-items:center;gap:6px;padding:8px 10px;}
.op-scr__nav span{width:38px;height:7px;margin-right:auto;background:var(--ink);border-radius:2px;}
.op-scr__nav i{width:14px;height:4px;background:#CFCFCF;border-radius:2px;}
.op-scr__hero{position:relative;height:118px;background:linear-gradient(135deg,#D9D9D9,#BDBDBD);}
.op-scr__pinmark{position:absolute;left:58%;top:34%;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:2px solid #fff;border-radius:50% 50% 50% 0;background:var(--ink);color:#fff;font-family:var(--font-en);font-size:11px;font-weight:700;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.25);}
.op-scr__lines{display:grid;gap:6px;padding:12px 10px 4px;}
.op-scr__lines i{display:block;height:5px;background:#E3E3E3;border-radius:3px;}
.op-scr__bubble{position:absolute;left:12px;right:12px;bottom:14px;padding:12px;background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.16);font-size:11px;}
.op-scr__bubble b{display:block;margin-bottom:4px;font-size:10px;color:var(--ink-2);}
.op-scr__bubble em{display:block;margin-top:10px;padding:7px 0;background:var(--ink);border-radius:6px;color:#fff;font-style:normal;font-weight:700;text-align:center;}
.op-scr__file{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 8px;background:var(--paper-2);border-radius:999px;font-size:10px;color:var(--ink-2);}
/* STEP 2：依頼を確定する */
.op-scr__card{display:flex;align-items:baseline;justify-content:space-between;padding:10px 12px;border:1px solid #E3E3E3;border-radius:8px;}
.op-scr__card strong{font-family:var(--font-en);font-size:16px;}
.op-scr__label{font-size:10px;color:var(--ink-2);}
.op-scr__sub{margin:14px 0 4px;font-size:10px;font-weight:700;color:var(--ink-2);}
.op-scr__rows{margin:0;}
.op-scr__rows div{display:flex;justify-content:space-between;gap:6px;padding:7px 0;border-bottom:1px solid #EEE;}
.op-scr__rows dt{font-size:10.5px;}
.op-scr__rows dd{margin:0;font-family:var(--font-en);font-weight:700;text-align:right;white-space:nowrap;}
.op-scr__rows dd small{display:block;font-family:var(--font);font-size:9px;font-weight:400;color:var(--ink-2);}
.op-scr__total{margin:8px 0 12px;text-align:right;font-family:var(--font-en);font-size:15px;font-weight:700;}
.op-scr__btn{display:block;padding:10px 0;background:var(--ink);border-radius:8px;color:#fff;font-weight:700;text-align:center;}
.op-scr__fine{margin:8px 0 0;font-size:9.5px;line-height:1.6;color:var(--ink-2);}
/* STEP 3：メッセージ */
.op-scr--message{display:flex;flex-direction:column;}
.op-scr__msgs{flex:1;display:flex;flex-direction:column;gap:10px;}
.op-scr__msg{max-width:84%;padding:9px 11px;background:var(--paper-2);border-radius:12px 12px 12px 3px;font-size:10.5px;}
.op-scr__msg.is-me{align-self:flex-end;background:var(--ink);color:#fff;border-radius:12px 12px 3px 12px;}
.op-scr__msg.is-me .op-scr__file{background:rgba(255,255,255,.16);color:#fff;}
.op-scr__who{display:block;margin-top:4px;font-size:9px;color:var(--ink-2);}
.op-scr__input{display:flex;align-items:center;gap:8px;margin-top:10px;padding:6px 6px 6px 10px;border:1px solid #DADADA;border-radius:999px;}
.op-scr__input span{flex:1;color:#AAA;}
.op-scr__input em{padding:5px 10px;background:var(--ink);border-radius:999px;color:#fff;font-style:normal;font-size:10px;font-weight:700;}
@media (max-width:820px){
  .op-mp__steps{display:flex;gap:16px;margin-inline:-16px;padding:0 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
  .op-mp__steps::-webkit-scrollbar{display:none;}
  .op-mp__step{flex:0 0 78%;scroll-snap-align:center;}
  .op-mp__head{padding:18px 28px;}
  .op-mp__lead{text-align:left;}
}
.op-scr__pinmark{font-size:0;}
.op-scr__pinmark::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;}
.op-mp__h,.op-mp__step-h{word-break:auto-phrase;}

/* マイページの HOW TO USE：スマホが縦の軸でくるっと回って正面を向く（owndays の flip-left と同じ＝-100度から1秒・2026-11-07）。
   札と見出しは回り終わるころに出る。画面に入ったとき（.reveal → .is-visible）に始まる */
html.js .op-mp__step.reveal{opacity:1;transform:none;}
html.js .op-mp__step .op-phone{transform:perspective(2500px) rotateY(-100deg);backface-visibility:hidden;transition:transform 1s cubic-bezier(.25,.46,.45,.94);transition-delay:calc(.15s + var(--k,0) * .15s);}
html.js .op-mp__step.is-visible .op-phone{transform:perspective(2500px) rotateY(0);}
html.js .op-mp__step .op-mp__pill,html.js .op-mp__step .op-mp__step-h,html.js .op-mp__step .op-mp__text{opacity:0;transition:opacity .8s ease;transition-delay:calc(.6s + var(--k,0) * .15s);}
html.js .op-mp__step.is-visible .op-mp__pill,html.js .op-mp__step.is-visible .op-mp__step-h,html.js .op-mp__step.is-visible .op-mp__text{opacity:1;}
.op-mp__step:nth-child(2){--k:1;}
.op-mp__step:nth-child(3){--k:2;}
@media (max-width:820px){ .op-mp__step{--k:0 !important;} }   /* スマホは1台ずつ画面に入るので、ずらさない */
@media (prefers-reduced-motion:reduce){
  html.js .op-mp__step .op-phone{transform:none;transition:none;}
  html.js .op-mp__step .op-mp__pill,html.js .op-mp__step .op-mp__step-h,html.js .op-mp__step .op-mp__text{opacity:1;transition:none;}
}

/* シミュレーター：下が見切れる → 縦を詰め、合計の箱を左右2列に（左＝合計と内訳・右＝注記とボタン）。中は data-lenis-prevent でスクロールできる（2026-11-07） */
.pf__dialog{overscroll-behavior:contain;padding-top:clamp(32px,3.4vw,44px);padding-bottom:clamp(24px,3vw,36px);}
.pf__title{margin:6px 0 8px;}
.pf__lead{margin-bottom:20px;}
.pf__seg{margin-bottom:clamp(20px,2.4vw,28px);}
.pf-card{padding:18px 18px 16px;}
.pf-card__name{margin-bottom:12px;}
.pf-card__sel{margin:10px 0 12px;}
.pf-card__btn{padding:11px 10px;}
.pf__op--eq{margin:8px auto;}
.pf__sum{width:100%;max-width:none;padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,36px);}
@media (min-width:821px){
  .pf__sum{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 clamp(24px,3vw,40px);align-items:start;}
  .pf__sum .pf__notes{margin-top:0;}
  .pf__sum .pf__actions{margin-top:16px;}
}

/* WEB制作の料金シミュレーター：カード5枚（2026-11-07） */
.pf--web .pf__dialog{width:min(1240px,100%);}
.pf__cards--5 .pf-card{padding:16px 14px 14px;}
.pf__cards--5 .pf-card__name{font-size:16px;}
.pf__cards--5 .pf-card__price{font-size:17px;}
.pf__cards--5 .pf-card__sel{font-size:13px;}
.pf__cards--5 .pf__op{font-size:18px;}
.pf-card.is-off{opacity:.45;}
.pf-card.is-off .pf-card__btn{cursor:not-allowed;}
.pf-sheet__title small{margin-left:6px;font-size:12px;font-weight:400;color:var(--ink-2);}
.pf-opt--check{position:relative;padding-left:46px;}
.pf-opt--check::before{content:"";position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;border:1.5px solid #BDBDBD;border-radius:4px;background:#fff;}
.pf-opt--check.is-on::before{border-color:var(--ink);background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;}
.pf-sheet__done{display:block;width:100%;margin-top:16px;padding:13px;border:0;border-radius:8px;background:var(--ink);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
@media (max-width:1100px) and (min-width:821px){
  .pf__cards--5{flex-wrap:wrap;}
  .pf__cards--5 .pf-card{flex:1 1 calc(33% - 40px);}
  .pf__cards--5 .pf__op:nth-of-type(3){display:none;}
}

/* シミュレーター：閉じるボタンを分かりやすく（黒い丸のボタンに「× 閉じる」。中をスクロールしても右上に残る・2026-11-07） */
.pf__close{position:sticky;top:0;z-index:5;float:right;display:flex;align-items:center;gap:6px;width:auto;height:auto;margin:calc(-1 * clamp(16px,2vw,24px)) calc(-1 * clamp(8px,2.4vw,32px)) 0 0;padding:10px 16px 10px 14px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:background .2s;}
.pf__close:hover,.pf__close:focus-visible{background:#4A4A4A;outline:none;}
.pf__head{clear:none;}
.pf-card.is-empty .pf-card__sel{color:#9A9A9A;}
.pf__dialog:focus{outline:none;}
.pf__seg-btn:focus:not(:focus-visible){outline:none;}
@media (max-width:820px){ .pf__head{padding-top:40px;} }

/* 一覧の見出しの下に絞り込み（制作実績・ジャーナル・ブランディング事例・2026-11-07）。以前は見出しの右に並べていた */
.khead{grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,28px);}
.khead .filter,.khead .fsel{padding-top:0;}

/* ブランディング事例 詳細：左にコンセプトとデータ（止まる）・右に本文（2026-11-07） */
.pj-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start;}
.pj-body__side{position:sticky;top:clamp(100px,12vh,140px);}
.pj-body__concept{margin:0 0 28px;font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.6;letter-spacing:.04em;word-break:auto-phrase;}
.pj-data td{font-size:13px;}
.pj-body__main{max-width:none;font-size:15px;line-height:2.1;}
.pj-body__main br.pc{display:none;}
.pj-body__main h2,.pj-body__main .add_ttl{margin:2.6em 0 .9em;padding:0 0 12px 16px;position:relative;border-bottom:1px solid var(--line);font-size:clamp(19px,1.7vw,22px);font-weight:700;line-height:1.5;letter-spacing:.04em;}
.pj-body__main h2::before,.pj-body__main .add_ttl::before{content:"";position:absolute;left:0;top:3px;width:4px;height:22px;background:var(--ink);}
.pj-body__main > h2:first-child{margin-top:0;}
.pj-body__main h3,.pj-body__main .add_ttl_02{margin:2em 0 .6em;font-size:17px;font-weight:700;line-height:1.6;}
.pj-body__main .marker-y{background:linear-gradient(transparent 62%,#E4E4E4 62%);font-weight:700;}
.pj-body__main .prose-bold{font-weight:700;color:var(--ink);}
.pj-body__main .prose-quote-box{display:block;margin:1em 0;padding:20px 24px;background:var(--paper-2);border-radius:8px;}
.pj-body__main a,.pj-body__main .add_link,.pj-body__main .txt_link_02{color:var(--ink);text-decoration:underline;text-underline-offset:4px;word-break:break-all;}
.pj-body__main img{max-width:100%;height:auto;margin:1.2em 0;border-radius:6px;}
.pj-body__main .wp-video{max-width:100%!important;}
@media (max-width:900px){
  .pj-body{grid-template-columns:1fr;}
  .pj-body__side{position:static;}
}

/* ジャーナルの記事：パンくずを本文の下へ。上の余白（ヘッダーの分）は本文の節に持たせる（2026-11-07） */
.page-journal-single .jn-first{padding-top:clamp(120px,13vw,170px);}
body:not(.home) .crumb-after .crumb{padding-top:0;}
.crumb-after{margin:0 0 clamp(40px,5vw,64px);}

/* FAQ の質問の文字を大きく（16px → 18px 前後・2026-11-07） */
.faq__q{font-size:clamp(17px,1.4vw,19px);line-height:1.6;}
body:not(.home) main.page-journal-single > section.section.jn-first{padding-top:clamp(120px,13vw,170px);}   /* 共通の「最初の節は詰める」より強く */

/* 見出しの全角スペース（改行の目印）を消したので、見出しは文節で折り返す（2026-11-07） */
main h1,main h2,main h3,.sec-head__jp,.ph__catch,.ktwo__title{word-break:auto-phrase;}

/* フッターの横幅をヘッダーにそろえる（左右の余白＝ヘッダーと同じ --gutter。以前は本文と同じ 10.25vw・2026-11-07） */
@media (min-width:681px){ .ft{padding-left:calc(clamp(20px,4.5vw,96px) + 20px);padding-right:calc(clamp(20px,4.5vw,96px) + 20px);} }
@media (max-width:680px){ .ft{padding-left:20px;padding-right:20px;} }

/* スマホのヒーロー：図形が見出しにかぶらないよう縦の動く範囲を8割に・言葉の節では図形を消す・言葉は中央寄せ（2026-11-07） */
@media (max-width:680px){
  .shape{transform:translate3d(calc(var(--x) - 50%),calc(var(--y) * .8 - 50% + 10px),0) rotate(var(--r)) scale(var(--s));}
  .hero__stage.is-dim{opacity:0;}
  .statement__p{text-align:center;}
}
@media (max-width:680px){ .statement__line{word-break:auto-phrase;} }

/* ジャーナル一覧：ランキングの上の余白が広い（見出しの節の下75px＋ランキングの上75px）→ 詰める（2026-11-07） */
body:not(.home) main.page-journal > section.section:first-of-type{padding-bottom:0;}
main.page-journal > .rankv--ranking{padding-top:clamp(28px,3.4vw,48px);}
/* 全体の節の間隔（main > section:not()… の連なり）が強いので、この2か所だけ !important */
main.page-journal > section.section:first-of-type{padding-bottom:0 !important;}
main.page-journal > section.rankv--ranking{padding-top:clamp(28px,3.4vw,48px) !important;}

/* =========================================================
   スマホのセクション間の余白をそろえる（2026-11-08）
   実測（390幅）で節と節の間が 53〜386px とばらついていた。原因は3つ。
   ① base.css の旧コンセプトページ用の指定（.page-concept > section:nth-of-type(n)）が、同じ main.page-concept を持つ
      下層ページ全部に漏れていた＝5番目の節の上に −50px、2番目の節の内側（.container）に +100px、5番目の節の本文が幅80%・左寄せ
   ② 言葉の節（.statement）の下が独自値（150px＋100px）で、次の白い節との間だけ広い
   ③ 濃い写真の面（.svc-about）が 88px、トップの Ranking→News が 80px と、色が変わる境目の 100px からずれていた
   スマホの決まり＝色が変わる境目は各 100px（--rh）、同じ色が続く境目は各 50px（--rh-same）
   ========================================================= */
@media (max-width:680px){
  /* ① 旧コンセプトページ用の指定を打ち消す */
  main.page-concept > section:nth-of-type(5){margin-top:0;}
  main.page-concept > section:nth-of-type(2) > .container{padding-bottom:0;}
  main.page-concept > section:nth-of-type(5) .page-sec-head{margin:0 0 clamp(32px,4vw,56px);}
  main.page-concept > section:nth-of-type(5) .prose{width:auto;max-width:64ch;margin-inline:0;text-align:inherit;}
  main.page-concept > section:nth-of-type(5) .prose--center{margin-inline:auto;text-align:center;}
  main.page-concept > section:nth-of-type(5) .prose--full,main.page-concept > section:nth-of-type(5) .prose--lines{max-width:none;}
  main.page-concept > section:nth-of-type(5) .prose--lines{text-align:center;}
  /* ② 言葉の節：上 64px、下は次の白い節と1つの面＝50px ずつ（base.css に id で #concept{padding-bottom:150px} があるので id で） */
  body main > section#concept.section.statement{padding-top:64px;padding-bottom:var(--rh-same);}
  main > section.statement + section:not(.band):not(.movie--dark){padding-top:var(--rh-same);}
  /* ③ 色が変わる境目を 100px にそろえる（.svc-about は元の指定が !important なのでここも） */
  main > section.svc-about{padding-block:var(--rh) !important;}
  body.home main > section#ranking.section{padding-bottom:var(--rh);}
  body.home main > section#news.section{padding-top:var(--rh);}
  /* 料金の節：最後の表の下マージン（40px）が節の下の余白に足されていた＝最後の要素は 0 に */
  .svc-price__main > :last-child,.pr-tables > :last-child,.pr-case-svc > :last-child{margin-bottom:0;}
}

/* =========================================================
   制作実績の詳細（/works/<slug>/）：見出しがどの本文のものか分かるように（2026-11-08）
   コンセプトの一文（h2）のすぐ下に長い本文が続き、h2 が本文の見出しに見えていた。
   ブロックごとに小さな札（英字＋和文）を付け、PC は左にコンセプトとデータ表（止まる）・右に本文の2列、スマホは1列（コンセプト→制作の背景→データ）。
   同じ札をブランディング事例（/project/）のコンセプトとデータ表にも
   ========================================================= */
.wk-label{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;font-size:12px;letter-spacing:.14em;line-height:1;color:var(--ink-2);}
.wk-label::before{content:"";align-self:center;width:18px;height:1px;background:var(--ink);}
.wk-label__en{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
.wk-label--gallery{margin-bottom:clamp(20px,2.4vw,32px);max-width:1100px;margin-inline:auto;}
.work-concept.wk2{max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"concept story" "data story";gap:clamp(40px,5vw,72px) clamp(32px,5vw,88px);align-items:start;}
.wk2__concept{grid-area:concept;}
.wk2__story{grid-area:story;}
.wk2__data{grid-area:data;}
.wk2 .work-concept__h{margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.6;word-break:auto-phrase;}
.wk2 .work-concept__body{font-size:15px;line-height:2.1;}
.wk2 .work-concept__body p + p{margin-top:1.6em;}
.wk2 .work-data{max-width:none;margin:0;}
.wk2 .work-data td{font-size:14px;}
.wk2 .work-data td:first-child{width:34%;}
@media (max-width:900px){
  .work-concept.wk2{grid-template-columns:1fr;grid-template-areas:"concept" "story" "data";gap:clamp(40px,8vw,56px);}
}
.pj-body__side .wk-label + .pj-body__concept{margin-top:0;}
.pj-body__side .pj-body__concept + .wk-label{margin-top:36px;}

/* =========================================================
   スマホの表：見出し（th／1列目）と中身（td）を上下の2段に（2026-11-08）
   対象＝会社概要・制作データ・事例データ・料金表（.pr-table／.pr-case-table／支援プラン）。
   3列の作業一覧（.pr-table-spot／.op-spot-table）は 項目名を上段、目安時間と料金を下段に並べる
   ========================================================= */
@media (max-width:680px){
  main .access-table tr,main .pr-table tr,main .pr-case-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line);}
  main .access-table tr:last-child,main .pr-table tr:last-child,main .pr-case-table tbody tr:last-child{border-bottom:1px solid var(--line);}
  main .access-table th,main .access-table td,main .pr-table th,main .pr-table td,main .pr-case-table th,main .pr-case-table td{display:block;width:auto;padding:0;border:0;text-align:left;white-space:normal;}
  main .access-table td:first-child,main .access-table th,.svc-price .pr-table th,.page-price .pr-table th,.svc-price .pr-case-table th{margin:0 0 6px;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:none;color:var(--ink-2);}
  main .access-table td:last-child{color:var(--ink);font-size:15px;}
  .svc-price .pr-table th small{display:inline;margin:0 0 0 .6em;font-size:11px;}
  .svc-price .pr-table td,.page-price .pr-table td{width:auto;text-align:left;font-size:20px;}
  .svc-price .pr-case-table td:last-child{text-align:left;}
  /* 3列：項目名／目安時間＋料金 */
  .svc-price .pr-table-spot tr:has(> th),.op-spot-table thead{display:none;}
  .svc-price .pr-table-spot tr,.op-spot-table tr{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline;}
  .svc-price .pr-table-spot td:first-child,.op-spot-table td:first-child{grid-column:1 / -1;margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ink);}
  .svc-price .pr-table-spot td:nth-child(2),.op-spot-table td:nth-child(2){width:auto;text-align:left;font-size:12px;color:var(--ink-2);}
  .svc-price .pr-table-spot td:nth-child(2):empty::before,.op-spot-table td:nth-child(2):empty::before{content:"";}
  .svc-price .pr-table-spot td:last-child,.op-spot-table td:last-child{text-align:right;}
}
/* スマホの表：1列目の幅指定（.outline__table 28%・.work-data 26%・34%）が上の「2段」の指定より強く、見出しの段だけ幅が狭く折り返していた（2026-11-08） */
@media (max-width:680px){
  main .access-table.outline__table td:first-child,main .access-table.work-data td:first-child,main .access-table.pj-data td:first-child,main .access-table.price-table td:first-child,main .wk2 .access-table.work-data td:first-child{width:auto;}
}

/* =========================================================
   サービスページの制作実績スライド（.rankv--works・2026-11-08）：トップの Ranking の横送りを実績のカード（16:9）で。
   札は分類名、下に業種／クライアント、題。右端に「すべての制作実績を見る」
   ========================================================= */
.rankv--works .rankv__item,.rankv--works .rankv__item:first-child{flex-basis:320px;}
.rankv--works .rankv__thumb{aspect-ratio:16/9;background:var(--paper-2);}
.rankv--works .rankv__thumb img,.rankv--works .rankv__thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.rankv--works .rankv__meta{margin-top:12px;font-family:var(--font);font-size:12px;letter-spacing:.04em;color:var(--ink-2);}
.rankv--works .rankv__name{margin-top:4px;font-size:15px;font-weight:500;-webkit-line-clamp:2;}
.rankv--works .rankv__ctrl{flex-wrap:wrap;}
.rankv--works .rankv__more{margin-left:auto;}
@media (max-width:680px){
  .rankv--works .rankv__item,.rankv--works .rankv__item:first-child{flex-basis:260px;}
  .rankv--works .rankv__ctrl{gap:16px 20px;}
  .rankv--works .rankv__more{margin-left:0;flex-basis:100%;}
}

/* シミュレーター：新しく作る／リニューアルの切り替えが「押せる」と分かるように（2026-11-08）。
   灰色の箱に薄い文字の2つ並びは、選ぶ前だと飾りに見えた → 問いかけの一文＋枠線と丸印のラジオ（選択肢 .pf-opt と同じ見た目） */
.pf__seg-q{margin:0 0 12px;text-align:center;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink);}
.pf__seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(520px,100%);padding:0;background:none;border-radius:0;}
.pf__seg-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #DADADA;border-radius:10px;background:#fff;color:var(--ink);text-align:left;box-shadow:none;transition:border-color .2s,background .2s;}
.pf__seg-btn:hover{border-color:var(--ink);}
.pf__seg-btn.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper-2);color:var(--ink);}
.pf__seg-dot{flex:0 0 18px;width:18px;height:18px;border:1.5px solid #BDBDBD;border-radius:50%;background:#fff;position:relative;}
.pf__seg-btn.is-on .pf__seg-dot{border-color:var(--ink);}
.pf__seg-btn.is-on .pf__seg-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink);}
.pf__seg-t{display:flex;flex-direction:column;gap:2px;font-size:15px;font-weight:700;line-height:1.4;}
.pf__seg-t small{font-size:12px;font-weight:400;color:var(--ink-2);}
@media (max-width:680px){ .pf__seg-btn{padding:12px;gap:10px;} .pf__seg-t{font-size:14px;} .pf__seg-t small{font-size:12px;} }
/* 料金表（スマホ）：見出しと金額のあいだが約30px（th・td それぞれの上下12px＋6px）空いて、1行が146pxあった（2026-11-08）。
   見出しと金額はくっつけ（4px）、行と行の区切りで間を取る */
@media (max-width:680px){
  main .svc-price .pr-table tr,main .svc-price .pr-table tr:has(th small){display:block;padding:14px 0;}
  main .svc-price .pr-table th,main .svc-price .pr-table tr:has(th small) th{margin:0 0 4px;padding:0;font-size:14px;font-weight:700;line-height:1.6;color:var(--ink);}
  main .svc-price .pr-table th small{display:inline;margin-left:.5em;font-size:12px;font-weight:400;color:var(--ink-2);}
  main .svc-price .pr-table td,main .svc-price .pr-table tr:has(th small) td{padding:0;font-size:18px;line-height:1.4;}
  main .svc-price .pr-table tr.is-sub th{padding-left:0;font-weight:500;color:var(--ink-2);}
  main .svc-price .pr-table tr.is-sub td{font-size:16px;}
  main .svc-price .pr-table tr.is-total th,main .svc-price .pr-table tr.is-total td{padding-top:0;border-top:0;}
  main .svc-price .pr-table tr.is-total{border-top:1px solid var(--ink);}
  main .svc-price .pr-table-spot td:first-child{margin:0 0 4px;font-size:14px;}
}
/* 3列の作業一覧（スマホ）：上の料金表の指定が .pr-table-spot にも効いて行が block になり、各セルに16pxの上下余白が残っていた（2026-11-08） */
@media (max-width:680px){
  main .svc-price .pr-table.pr-table-spot tr,main .op-spot-table tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;padding:14px 0;}
  main .svc-price .pr-table.pr-table-spot td,main .op-spot-table td{padding:0;line-height:1.5;}
  main .svc-price .pr-table.pr-table-spot td:first-child,main .op-spot-table td:first-child{grid-column:1 / -1;margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink);}
  main .svc-price .pr-table.pr-table-spot td:nth-child(2),main .op-spot-table td:nth-child(2){display:block;font-size:12px;color:var(--ink-2);}
  main .svc-price .pr-table.pr-table-spot td:last-child,main .op-spot-table td:last-child{grid-column:2;text-align:right;font-size:18px;}
}
/* 料金ページ（スマホ）が左に寄る：price.css が金額の欄を「幅110px・折り返しなし」に固定していて、
   「¥40,000〜¥100,000」の行だけ欄から約40pxはみ出し、ページ全体が430pxに広がっていた（2026-11-08）。
   金額の欄は中身の幅に合わせ、長いときは「〜」の後で折り返す */
@media (max-width:680px){
  main .svc-price .pr-table.pr-table-spot td:last-child,main .op-spot-table td:last-child,main .svc-price .pr-table td{width:auto;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;}
  main .svc-price .pr-table.pr-table-spot tr,main .op-spot-table tr{grid-template-columns:minmax(0,1fr) auto;}
}

/* 制作実績 詳細（2026-11-08）
   ・PC：本文（右）が2行ぶんにまたがり、行の高さが等分されて「制作データ」がコンセプトから大きく離れていた → 1行目をコンセプトの高さに、データはその直下
   ・本文の見出しが本文と同じグレー（--ink-2）だった → ジャーナル・お知らせと同じ墨色（--ink）・太さ600
   ・見出しの上を広げ、スマホは見出しの行間を詰める
   ・スマホのメイン画像を 4:3 で切り抜いていた（画像の文字が見切れる）→ 画像の元の比率で全体を見せる
   ・スマホの「関連する事例」とトップの「制作実績」は1列で縦積み */
@media (min-width:901px){
  .work-concept.wk2{grid-template-rows:auto 1fr;}
}
main .wk2 .work-concept__body h2,main .wk2 .work-concept__body h3,main .wk2 .work-concept__body h4{color:var(--ink);font-weight:600;line-height:1.6;letter-spacing:.04em;margin:clamp(48px,4.4vw,64px) 0 .7em;}
main .wk2 .work-concept__body h2{font-size:clamp(19px,1.6vw,22px);}
main .wk2 .work-concept__body h3{font-size:clamp(17px,1.3vw,18px);}
main .wk2 .work-concept__body h4{font-size:16px;}
main .wk2 .work-concept__body > :is(h2,h3,h4):first-child{margin-top:0;}
main .wk2 .work-concept__body p,main .wk2 .work-concept__body li{color:var(--ink-2);}
main .wk2 .work-concept__body strong{color:var(--ink);}
@media (max-width:680px){
  main .wk2 .work-concept__body h2,main .wk2 .work-concept__body h3,main .wk2 .work-concept__body h4{line-height:1.45;margin-top:44px;margin-bottom:.6em;}
  main .wk2 .work-concept__body h2{font-size:18px;}
  main .wk2 .work-concept__body h3{font-size:16px;}
  body.single-works .ph__media,body.single-works .ph__media--wide{aspect-ratio:auto;}
  body.single-works .ph__media img{height:auto;}
  #works .works__grid,.works--related .works__grid{grid-template-columns:minmax(0,1fr);gap:40px;}
}

/* ブランディング事例 詳細（/project/〜）を制作実績の詳細にそろえる（2026-11-08）
   ・本文の見出し：グレー・700・左の縦棒と下線 → 墨色・600・飾りなし（制作実績と同じ大きさ・余白）
   ・コンセプト：700 → 600
   ・本文の節の上の余白を0（ヒーローの下の余白だけにする）
   ・スマホのメイン画像は元の比率で全体を見せる */
main .pj-body__main h2,main .pj-body__main .add_ttl{color:var(--ink);font-weight:600;line-height:1.6;letter-spacing:.04em;padding:0;border-bottom:0;margin:clamp(48px,4.4vw,64px) 0 .7em;font-size:clamp(19px,1.6vw,22px);}
main .pj-body__main h2::before,main .pj-body__main .add_ttl::before{content:none;}
main .pj-body__main > h2:first-child{margin-top:0;}
main .pj-body__main h3,main .pj-body__main .add_ttl_02{color:var(--ink);font-weight:600;line-height:1.6;margin:2.4em 0 .6em;font-size:clamp(17px,1.3vw,18px);}
main .pj-body__main .prose-bold,main .pj-body__main .marker-y{font-weight:600;}
.page-project-single .pj-body__concept{font-weight:600;}
.page-project-single > section.section--flush-top{padding-top:0;}
@media (max-width:680px){
  main .pj-body__main h2,main .pj-body__main .add_ttl{font-size:18px;line-height:1.45;margin-top:44px;margin-bottom:.6em;}
  main .pj-body__main h3,main .pj-body__main .add_ttl_02{font-size:16px;line-height:1.45;}
  body.single-project .ph__media,body.single-project .ph__media--wide{aspect-ratio:auto;}
  body.single-project .ph__media img{height:auto;}
}

/* お客様の声 詳細（/voice/〜）：見出しの節の下の余白 150→80（スマホ 100→53）、「(Talk member)」をメンバーの列の上下中央に（2026-11-08） */
main > section.vs-head{padding-bottom:80px;}
.vs-members{align-items:center;}
@media (max-width:680px){ main > section.vs-head{padding-bottom:53px;} }
/* ↑の余白2つは、節のリズムの指定（main > section:not(…)…＋section）の詳細度に負けるので :not(#_) で上げる（2026-11-08） */
html body main.page-project-single > section.section--flush-top:not(#_){padding-top:0;}
html body main > section.vs-head:not(#_){padding-bottom:80px;}
@media (max-width:680px){ html body main > section.vs-head:not(#_){padding-bottom:53px;} }

/* トップの制作実績・ジャーナルの見出し：日本語（制作実績／ジャーナル）を英字の下に（2026-11-08。ほかのページの svc-head は日本語が上のまま） */
.home #works .svc-head__jp,.home #journal .svc-head__jp{order:1;margin:.9em 0 0;}

/* ジャーナル・お知らせの詳細の文字を、制作実績・ブランディング事例の詳細と同じ大きさに（2026-11-08。本文16→15px・中見出し26.4→22px など一回り大きかった）。固定ページ（.page-generic）の .article__body は対象外 */
html body:is(.single-journal,.single-post) .article__title{font-size:clamp(28px,2.8vw,40px);}
html body:is(.single-journal,.single-post) .article__body{font-size:15px;line-height:2.1;}
html body:is(.single-journal,.single-post) .article__body :is(p,li){font-size:15px;line-height:2.1;}
html body:is(.single-journal,.single-post) .article__body h2{font-size:clamp(19px,1.6vw,22px);line-height:1.6;}
html body:is(.single-journal,.single-post) .article__body h3{font-size:clamp(17px,1.3vw,18px);line-height:1.6;}
@media (max-width:680px){
  html body:is(.single-journal,.single-post) .article__title{font-size:20px;line-height:1.5;}
  html body:is(.single-journal,.single-post) .article__body,html body:is(.single-journal,.single-post) .article__body :is(p,li){font-size:14px;}
  html body:is(.single-journal,.single-post) .article__body h2{font-size:18px;line-height:1.45;}
  html body:is(.single-journal,.single-post) .article__body h3{font-size:16px;line-height:1.45;}
}

/* 料金について（料金表の代わりに資料ダウンロードへ案内する節。ブランディング・グラフィック・写真動画とグラフィックの下層・2026-11-08） */
.price-dl__inner{text-align:center;}
.price-dl__h{margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.5;letter-spacing:.12em;color:var(--ink);}
.price-dl__lead{margin:1.2em 0 0;font-size:15px;line-height:2.1;letter-spacing:.04em;color:var(--ink);}
.price-dl__btn{display:inline-flex;align-items:center;justify-content:center;min-width:264px;height:58px;margin-top:clamp(28px,3vw,40px);padding:0 40px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;letter-spacing:.08em;transition:opacity .3s;}
.price-dl__btn:hover{opacity:.75;}
@media (max-width:680px){
  .price-dl__h{font-size:22px;}
  .price-dl__lead{font-size:14px;text-align:left;}
  .price-dl__lead br{display:none;}
  .price-dl__btn{width:100%;min-width:0;}
}

/* 左右の一節（.msplit.band）の余白：2026-11-07 に背景を白にしたが、節のリズムの決まりは .band＝グレーの帯として「色が変わる境目（各150px）」で数えていた。
   前後も白の節だと白どうしの境目が約300px空いていた（Practice など）→ 実際の色で数え直す（2026-11-08）
   白どうし＝各 --rh-same（75px／スマホ50px）・白とグレーの帯＝各 --rh（150px／スマホ100px） */
html body main > section:not(.band):not(.movie--dark):not(.hero):not(.statement):not(.svc-about) + section.msplit.band:not(#_){padding-top:var(--rh-same);}
html body main > section:not(.band):not(.movie--dark):not(.hero):not(.statement):not(.svc-about):has(+ section.msplit.band):not(#_){padding-bottom:var(--rh-same);}
html body main > section.msplit.band + section:not(.band):not(.movie--dark):not(.svc-about):not(#_){padding-top:var(--rh-same);}
html body main > section.msplit.band:has(+ section:not(.band):not(.movie--dark):not(.svc-about)):not(#_){padding-bottom:var(--rh-same);}
html body main > section.msplit.band + section.band:not(.msplit):not(#_){padding-top:var(--rh);}
html body main > section.msplit.band:has(+ section.band:not(.msplit)):not(#_){padding-bottom:var(--rh);}
html body main > section.band:not(.msplit) + section.msplit.band:not(#_){padding-top:var(--rh);}
html body main > section.band:not(.msplit):has(+ section.msplit.band):not(#_){padding-bottom:var(--rh);}

/* about のビジョンとミッション（スマホ）：一文が17pxで、ほかの見出し（24px）より小さかった → 24px。札（VISION／MISSION）も一回り大きく（2026-11-08） */
@media (max-width:680px){
  html body p.ba-mrow__head{font-size:24px;line-height:1.6;letter-spacing:.04em;margin-top:16px;}
  html body p.ba-mrow__label{font-size:16px;}
  html body p.ba-mrow__label span{font-size:13px;}
}

/* 表の文字（th・td）は本文と同じ大きさに（2026-11-08）
   本文＝PC：サービス詳細と下層（main.page-service）16px・ほかのページ 15px／スマホ：14px
   例外＝料金表（.pr-table）の右の欄の金額は強調のため大きいまま。欄の中の小さな補足（small・注記・リンクの札）はそのまま */
html body main table:not(.pr-table):not(#_) :is(th,td),
html body main .pr-table:not(#_) th,
html body main .pr-table.pr-table-spot:not(#_) td{font-size:15px;}
html body main.page-service table:not(.pr-table):not(#_) :is(th,td),
html body main.page-service .pr-table:not(#_) th,
html body main.page-service .pr-table.pr-table-spot:not(#_) td{font-size:16px;}
@media (max-width:680px){
  html body main table:not(.pr-table):not(#_) :is(th,td),
  html body main .pr-table:not(#_) th,
  html body main .pr-table.pr-table-spot:not(#_) td,
  html body main.page-service table:not(.pr-table):not(#_) :is(th,td),
  html body main.page-service .pr-table:not(#_) th,
  html body main.page-service .pr-table.pr-table-spot:not(#_) td{font-size:14px;}
}

/* 2026-11-08
   ・トップとコンセプトの冒頭の文：スマホだけ読点の後で改行（top-hero.php の \n → br.br-sp）
   ・コンセプト Vision の節：2つの段落の間 25.6→20px（スマホ 22.4→18px）。段落の上下の余白が重なるので、下を指定して次の段落の上は0
   ・コンセプトの図のミッションの一文（.mvfig__mtext）16→22px（スマホ 14→19px）
   ・ゴールデンサークルの見出し（.gc__h・全ページ）16→20px（スマホ 15→19px） */
.statement__line .br-sp{display:none;}
.page-concept .concept-intro:has(.mvfig) .prose--lines > p:first-child{margin-bottom:20px;}
.page-concept .concept-intro:has(.mvfig) .prose--lines > p + p{margin-top:0;}
html body .mvfig .mvfig__mtext:not(#_){font-size:22px;line-height:38px;}
html body p.gc__h:not(#_){font-size:20px;line-height:36px;}
@media (max-width:680px){
  .statement__line .br-sp{display:inline;}
  .page-concept .concept-intro:has(.mvfig) .prose--lines > p:first-child{margin-bottom:18px;}
  html body .mvfig .mvfig__mtext:not(#_){font-size:19px;line-height:33px;}
  html body p.gc__h:not(#_){font-size:19px;line-height:34px;}
}

/* 背景に敷いた写真：スマホは幅800pxの -sp.jpg に切り替える（--bg-sp は apx_bg_vars() が出す。無ければ --bg のまま）。サイトスピード対策（2026-11-09） */
@media (max-width:680px){ .svc-about,.ba-band{background-image:var(--bg-sp,var(--bg));} }

/* ===== 2026-11-09 修正（WEB制作の料金はシミュレーションへ） ===== */
/* 料金表の金額欄にある日本語（「制作費合計の」）は金額より小さく（料金案内・サービス詳細とも） */
.pr-table td .pr-table__txt{font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:.02em;margin-right:2px;color:var(--ink);}
@media (max-width:767px){.pr-table td .pr-table__txt{font-size:12px;}}
/* 料金の節の「制作費をシミュレーション」はボタン要素＝リンクのボタンと同じ見た目に */
button.bar-btn{appearance:none;-webkit-appearance:none;border:0;border-radius:0;font:inherit;cursor:pointer;text-align:left;width:100%;margin:0;}   /* 背景と文字色は .bar-btn のまま（ここで上書きしない） */
/* 資料ダウンロード：制作費のシミュレーターをここで開く（左下の丸いボタンは出さない・2026-11-09） */
/* 資料ダウンロードでは、送信が済むまで左下の制作費のボタンを出さない（ボタンは main の外にある） */
body:has(.page-download):not(.dl-sent) .pf-open{display:none;}
.dl-split{align-items:start;}
.dl-done{max-width:720px;}
.dl-done[hidden],.page-download .form[hidden]{display:none;}
.dl-done__h{margin:0 0 14px;font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:.04em;}
.dl-done__lead{margin:0;font-size:16px;line-height:2;}
.dl-sim{margin-top:clamp(24px,3vw,36px);}
.dl-sim__lead{margin:0 0 14px;font-size:14px;line-height:1.9;color:var(--ink-2);}
.dl-sim__btn{max-width:360px;}
/* 資料ダウンロード：2冊の見出し（2026-11-11） */
.dl-doc + .dl-doc{margin-top:clamp(20px,2.4vw,28px);}
.dl-doc__h{margin:0 0 10px;font-size:18px;font-weight:700;letter-spacing:.04em;}
.dl-doc__h span{margin-left:12px;font-size:13px;font-weight:400;color:var(--ink-2);}
/* About：節の見出し（Story／Philosophy…）の左端を「About 私たちについて」の左端にそろえる（2026-11-09） */
.ba-title{padding-left:0;}
/* 下層の「仕組み」の節（AIO）：流れの段の下の締めの文は少し狭く（2026-11-10） */
.sub-mech{margin-top:clamp(28px,3.2vw,44px);}
.sub-mech__after{max-width:760px;margin-inline:auto;}
.sub-mech__after p{font-size:15px;line-height:2;}
.sub-mech__after p + p{margin-top:1.2em;}
/* スポット料金（保守あり／保守なし）：スマホは項目名の下に2つの金額を並べ、それぞれにラベルを付ける（2026-11-11） */
.op-spot-table th:nth-child(n+2),.op-spot-table td:nth-child(n+2){text-align:right;white-space:nowrap;}
@media (max-width:680px){
  main .svc-price .pr-table.pr-table-spot.is-2p tr,main .op-spot-table tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  main .svc-price .pr-table.pr-table-spot.is-2p thead,main .op-spot-table thead{display:none;}
  main .svc-price .pr-table.pr-table-spot.is-2p td:nth-child(n+2),main .op-spot-table td:nth-child(n+2){padding-left:0;}
  main .svc-price .pr-table.pr-table-spot.is-2p td:nth-child(2),main .op-spot-table td:nth-child(2),
  main .svc-price .pr-table.pr-table-spot.is-2p td:last-child,main .op-spot-table td:last-child{display:block;grid-column:auto;text-align:left;font-family:var(--font-en);font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap;}
  main .svc-price .pr-table.pr-table-spot.is-2p td:nth-child(2)::before,main .op-spot-table td:nth-child(2)::before{content:"保守あり";display:block;font-family:var(--font);font-size:12px;font-weight:400;color:var(--ink-2);}
  main .svc-price .pr-table.pr-table-spot.is-2p td:last-child::before,main .op-spot-table td:last-child::before{content:"保守なし";display:block;font-family:var(--font);font-size:12px;font-weight:400;color:var(--ink-2);}
}
/* SEO・AIOジャーナル：一覧の分野の切り替え（2026-11-11） */
.seoj-cats{display:flex;flex-wrap:wrap;gap:10px 12px;margin:clamp(24px,3vw,40px) 0 0;padding:0;list-style:none;}
.seoj-cats__link{display:inline-block;padding:8px 18px;border:1px solid var(--line,#ddd);border-radius:999px;font-size:13px;letter-spacing:.06em;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease);}
.seoj-cats__link:hover,.seoj-cats__link.is-current{background:var(--ink);border-color:var(--ink);color:#fff;}
/* SEO・AIOジャーナル：記事の終わりのサービス案内（2026-11-11） */
.seoj-cta{margin:clamp(48px,6vw,80px) 0 0;padding:clamp(24px,3vw,40px);background:var(--paper-2);border-radius:12px;}
.seoj-cta p{margin:0;}
.seoj-cta__lead{font-size:15px;line-height:1.9;}
.seoj-cta .arrow-link{display:inline-flex;margin-top:16px;}
/* コラムの記事本文：見出しとリストの見た目（2026-11-12）。
   見出しは太字＋塗り・罫で段を分け、リストは左に印（箇条書き＝チェック、手順＝番号）を出す */
.page-seoj-single .article__body :is(p,li){font-size:15px;line-height:2.1;}
.page-seoj-single .article__body h2{margin:3em 0 1.2em;padding:.7em 1em;border-left:4px solid var(--ink);background:var(--paper-2);font-size:clamp(19px,1.6vw,22px);font-weight:700;line-height:1.6;color:var(--ink);}
.page-seoj-single .article__body h3{margin:2.4em 0 1em;padding-bottom:.6em;border-bottom:1px solid var(--line);font-size:clamp(17px,1.3vw,18px);font-weight:700;line-height:1.6;color:var(--ink);}
.page-seoj-single .article__body h2:last-of-type ~ h3{display:flex;gap:.7em;align-items:baseline;}
.page-seoj-single .article__body h2:last-of-type ~ h3::before{content:"Q";flex:0 0 auto;font-family:var(--font-en);font-size:1.15em;font-weight:700;}
.page-seoj-single .article__body .seoj-step{display:flex;gap:.8em;align-items:flex-start;margin:2.2em 0 .8em;font-size:17px;font-weight:700;line-height:1.6;color:var(--ink);}
.page-seoj-single .article__body .seoj-step__no{flex:0 0 1.9em;width:1.9em;height:1.9em;margin-top:-.1em;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--font-en);font-size:14px;font-weight:600;line-height:1.9em;text-align:center;}
.page-seoj-single .article__body ul,.page-seoj-single .article__body ol{margin:0 0 1.8em;padding:1.2em 1.4em;list-style:none;border:1px solid var(--line);border-radius:10px;color:var(--ink);}
.page-seoj-single .article__body li{position:relative;padding-left:2em;}
.page-seoj-single .article__body li + li{margin-top:.3em;}
.page-seoj-single .article__body ul > li::before{content:"";position:absolute;left:.35em;top:.72em;width:.55em;height:.95em;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-25%);}
.page-seoj-single .article__body ol{counter-reset:seoj;}
.page-seoj-single .article__body ol > li{counter-increment:seoj;}
.page-seoj-single .article__body ol > li::before{content:counter(seoj);position:absolute;left:0;top:.5em;width:1.5em;height:1.5em;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--font-en);font-size:12px;font-weight:600;line-height:1.5em;text-align:center;}
@media (max-width:680px){
  .page-seoj-single .article__body :is(p,li){font-size:14px;}
  .page-seoj-single .article__body h2{font-size:18px;line-height:1.45;padding:.6em .8em;}
  .page-seoj-single .article__body h3{font-size:16px;line-height:1.45;}
  .page-seoj-single .article__body .seoj-step{font-size:16px;}
  .page-seoj-single .article__body ul,.page-seoj-single .article__body ol{padding:1em;}
}

/* =========================================================
   会社概要・制作データ・事例データの表（2026-11-14）：外枠なし。項目名の下は濃い線、内容の下は薄い線。
   スマホも上下2段にせず、左に項目名・右に内容の2列のまま
   ========================================================= */
html body main :is(.outline__table,.work-data,.pj-data):not(#_){border-top:0;border-collapse:separate;border-spacing:0;}
html body main :is(.outline__table,.work-data,.pj-data):not(#_) tr{display:table-row;padding:0;border:0;}
html body main :is(.outline__table,.work-data,.pj-data):not(#_) td{display:table-cell;padding:20px 10px;border:0;font-family:var(--font);font-size:15px;font-weight:400;line-height:1.6;letter-spacing:.06em;color:var(--ink);vertical-align:top;margin:0;}
html body main :is(.outline__table,.work-data,.pj-data):not(#_) td:first-child{width:clamp(130px,24%,200px);border-bottom:1px solid var(--ink);white-space:nowrap;}
html body main :is(.outline__table,.work-data,.pj-data):not(#_) td:last-child{border-bottom:1px solid rgba(34,34,34,.2);}
@media (max-width:680px){
  html body main :is(.outline__table,.work-data,.pj-data):not(#_) td{padding:14px 6px;font-size:14px;}
  html body main :is(.outline__table,.work-data,.pj-data):not(#_) td:first-child{width:96px;white-space:normal;}
}

/* トップの Journal（Ranking と同じ横送り）：著者の丸い写真と名前、右下に一覧へのリンク（2026-11-14） */
.rankv__author{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:12px;letter-spacing:.04em;color:var(--ink-2);}
.rankv__author img{width:24px;height:24px;border-radius:50%;object-fit:cover;}
.rankv--journal .rankv__ctrl{flex-wrap:wrap;}
.rankv--journal .rankv__more{margin-left:auto;}
html body.home main > section#journal.rankv:not(#_){padding-top:var(--rh);padding-bottom:var(--rh-same);}
/* ジャーナルとニュースは同じ薄いグレーの面が続く：間は各 75px（スマホ 50px） */
html body.home main > section#journal.rankv + section#news:not(#_){padding-top:var(--rh-same);}
@media (max-width:680px){ .rankv--journal .rankv__ctrl{gap:16px 20px;} .rankv--journal .rankv__more{margin-left:0;flex-basis:100%;} }

/* フッターのCTA：角丸なし。右に外線の丸＋斜めの細い矢印。乗ると矢印が右上へ抜けて、左下から入り直す（2026-11-14） */
html body .ft .ft-card:not(#_){border-radius:0;justify-content:space-between;text-align:left;flex-direction:row;}
html body .ft .ft-contact:not(#_){border-radius:0;}
.ft-card__arrow{position:relative;flex:none;width:76px;height:76px;border:1px solid var(--line);border-radius:50%;overflow:hidden;color:var(--ink);transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);}
.ft-card__arrow svg{position:absolute;left:50%;top:50%;margin:-12px 0 0 -12px;transition:transform .5s cubic-bezier(.65,0,.35,1);}
.ft-card__arrow svg:last-child{transform:translate(-44px,44px);}
.ft-card:hover .ft-card__arrow{border-color:var(--ink);background:var(--ink);color:#fff;}
.ft-card:hover .ft-card__arrow svg:first-child{transform:translate(44px,-44px);}
.ft-card:hover .ft-card__arrow svg:last-child{transform:none;}
@media (max-width:820px){ .ft-card__arrow{width:56px;height:56px;} }
@media (prefers-reduced-motion:reduce){ .ft-card__arrow svg{transition:none;} }

/* 見出しの節の下は、次が何でもサービスのトップと同じ 75px（スマホ 50px）。
   後から足した Such as（写真の面）の前後 150px の指定に負けていたので、強くして最後に置く（2026-11-14）。スタッフの詳細（.od-head）も同じ */
html body main.page-sub > section.section:has(> .container > .ph):not(#_):not(#__),
html body main.page-staff-single > section.od-head:not(#_):not(#__){padding-bottom:var(--rh-same);}
/* フッターの大きな社名は白（2026-11-14） */
html body .ft .ft__mark:not(#_){color:#fff;}
/* 見出しだけの節のすぐ下が白い節のときは、下の節の上の余白をなくして、見出しの下を 75px（スマホ 50px）だけにする（2026-11-14）
   対象＝お問い合わせ・利用規約（ct-hero）、About（ba-head）。色の面・写真の面が続くページは今までどおり */
html body main > section.ct-hero:has(> .container > .ph:only-child):not(#_) + section.section:not(.band):not(.sec-photo):not(.svc-about):not(#_),
html body main > section.ba-head:not(#_) + section.section:not(.band):not(.sec-photo):not(.svc-about):not(#_){padding-top:0;}
html body main > section.ct-hero > .container > .ph:only-child:not(#_){margin-bottom:0;}

/* =========================================================
   改行と折り返し（2026-11-14）
   ・パソコン：本文は文節で折り返し、最後の行が「す。」だけにならないようにする。見出しは行の長さをそろえる
   ・スマホ：文章の中の改行（<br>）は外して、画面の幅で自然に折り返す。
     残すのは、スマホだけの改行（.br-sp）・フォーム・料金の表・図の中の文字・住所
   ========================================================= */
main :is(p,li,dd,blockquote,figcaption){text-wrap:pretty;word-break:auto-phrase;line-break:strict;}
main :is(h1,h2,h3,h4){text-wrap:balance;}
@media (max-width:680px){
  html body main br:not(.br-sp):not(.br-keep):not(form *):not(table *):not(.mvfig *):not(address *):not(.op-scr *):not(#_){display:none;}
}
/* 本文の段落に残っていた keep-all（文全体を1語として扱い、はみ出した所で1文字ずつ折る＝「す。」が1行に残る）を、文節の折り返しに上書きする。
   auto-phrase の無いブラウザは normal（ふつうの日本語の折り返し）になる */
html body main :is(p,li,dd):not(#_){word-break:normal;word-break:auto-phrase;overflow-wrap:normal;}
html body main .rankv__name:not(#_){word-break:normal;word-break:auto-phrase;text-wrap:pretty;}
/* 幅の狭い列は、決めた改行が列の幅に収まらず「折り返し＋改行」でがたつくので、パソコンでも改行を外して文節で折り返す（2026-11-14） */
html body main :is(.msplit__p,.ba-row__head,.svc-price__lead) br:not(#_){display:none;}
html body main .sub-menu__catch:not(#_){word-break:normal;word-break:auto-phrase;text-wrap:pretty;overflow-wrap:normal;}