/* =====================================================
Animede Global CSS (Cleaned & Structured)
Author: Ranpo + Libra
Last Update: 2025-09-06
===================================================== */
/* =========================
0) Design Tokens (Global)
========================= */
:root {
/* Brand */
--accent: #2EC7B6;
--bg: #fffcfa;
/* Text / Body */
--page-style-background: #fffcfa; /* ← ページ地 */
--brand-teal: #2EC7B6; /* ← 面で塗る時はこっちを使う */
--page-style-text: #ffffff;
--page-style-font-family: "Noto Sans JP", sans-serif;
--page-style-line-height-text: 2.0;
/* Layout */
--form-fixed-width: 1040px;
--page-style-container-padding-inline: 20px;
--page-style-container-md-padding-inline: 20px;
--header-h: 120px;
/* Utility */
--page-style-theme: #ffffff;
}
.teal-band{
background-color: var(--brand-teal);
color: #fff;
}
/* =========================
1) Base
========================= */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body,
.page,
.section {
background-color: var(--page-style-background)
margin: 0;
padding: 0;
font-family: var(--page-style-font-family);
color: var(--page-style-text);
line-height: var(--page-style-line-height-text);
}
body.works-page { background: var(--bg) !important; }
input, textarea, select, button {
font: inherit; line-height: inherit; color: inherit;
}
.hr-light {
margin: 40px 0; border: none; border-top: 1px solid #fff;
}
.divider { display:block; width:100%; height:40px; }
/* scroll cue */
.scroll-cue{
position:absolute; left:50%; bottom:14px; translate:-50% 0;
width:10px; height:18px; border:2px solid rgba(255,255,255,.8);
border-left:0; border-top:0; transform:rotate(45deg);
animation:drop 1.6s infinite ease-in-out; opacity:.9;
}
@keyframes drop{
0%{ transform:translateY(0) rotate(45deg); opacity:.9; }
70%{ transform:translateY(8px) rotate(45deg); opacity:.2; }
100%{ transform:translateY(0) rotate(45deg); opacity:.9; }
}
/* breadcrumbs */
.breadcrumb{
max-width:1040px; margin:8px auto 16px; padding:0 16px;
font-size:12.5px; color:#6b7785;
}
.breadcrumb ol{
display:flex; flex-wrap:wrap; gap:0; list-style:none; padding:0; margin:0;
}
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li + li::before{
content:"›"; margin:0 8px; color:#c0c6d4;
}
.breadcrumb a{
color:#748094; text-decoration:none; font-weight:700;
}
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb [aria-current="page"]{ color:#222; font-weight:800; }
/* モバイル：中間を省略（ホーム … 現在地） */
@media (max-width:560px){
.breadcrumb ol{
overflow:hidden;
}
.breadcrumb li:nth-last-child(n+3){ display:none; } /* 中間を隠す */
.breadcrumb li:first-child{ display:flex; }
.breadcrumb li:nth-last-child(2)::before{ content:"…"; margin:0 8px; }
}
/* ホームアイコン */
.icon-home {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 4px;
background: currentColor; /* 文字色を継承 */
clip-path: polygon(
50% 0%, 100% 40%, 85% 40%,
85% 100%, 15% 100%, 15% 40%,
0% 40%
); /* 家っぽい形 */
}
/* どこか共通CSSに */
.highlight-red{ color:#e63946; font-weight:700; }
/* =========================
2) Header / Navigation
========================= */
.header {
position: sticky; top: 0; z-index: 1000;
background: var(--bg);
padding: 5px 64px;
box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.06);
}
.container { display:flex; align-items:center; gap:40px; }
.logo img { height:50px; display:block; }
.nav { flex: 1; }
.nav ul {
display:flex; flex-wrap:nowrap; justify-content:flex-end;
gap:16px; list-style:none; margin:0; padding:0;
}
.nav ul > li { display:flex; align-items:center; }
.nav a {
color: var(--accent); text-decoration:none; font-weight:700;
font-size:13px; letter-spacing:.02em;
}
.nav a:hover { opacity:.6; }
/* CTA (desktop) */
.nav .btn-cta,
.btn-cta{
display:inline-flex; align-items:center; justify-content:center;
background: var(--accent);
color:#fff !important;
border: 2px solid var(--accent);
border-radius: 9999px;
padding: 10px 16px;
line-height: 1; white-space: nowrap;
min-height: 36px; min-width: 120px; box-sizing: border-box;
transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{ transform: translateY(-1px); filter: brightness(.98); box-shadow:0 10px 24px rgba(46,199,182,.28); }
.btn-cta:active{ transform: translateY(0); filter: brightness(.95); }
.btn-cta:focus-visible{ outline: 3px solid rgba(46,199,182,.35); outline-offset: 2px; }
.nav-cta{ margin-left: 8px; }
/* Social Icons (desktop) */
.nav-social a,
.nav-youtube a{
display:inline-flex; align-items:center; justify-content:center;
width:34px; height:34px; border-radius:50%;
color: var(--accent);
border: 1.5px solid rgba(46,199,182,.35);
transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-social a:hover,
.nav-youtube a:hover{
background: rgba(46,199,182,.08);
transform: translateY(-1px);
border-color: rgba(46,199,182,.6);
}
/* Hamburger (tablet & down) */
.menu-toggle{
display:none; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer;
}
.menu-toggle .bar{
width:28px; height:2px; background:#8b96a2;
display:block; margin:6px 0;
transition: transform .3s ease, opacity .3s ease;
}
.menu-toggle[aria-expanded="true"]{
position: fixed; top:16px; right:16px; background:transparent; z-index:1101;
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
/* Mobile Menu */
.mobile-menu{
display:none;
position: fixed; inset: 0; z-index: 10010;
background: var(--bg);
padding: 96px 24px 40px;
align-items:center; justify-content:center;
}
.mobile-menu.open{ display:flex; }
.mobile-menu ul{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; align-items:center; gap:20px;
}
.mobile-menu a{
color: var(--accent); text-decoration:none; font-weight:700;
font-size:12px; letter-spacing:.02em;
}
/* Mobile actions */
#mobileMenu .mobile-actions{
margin-top:22px; display:flex; align-items:center; justify-content:center; gap:14px;
}
#mobileMenu .x-link, #mobileMenu .yt-link{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:50%;
color: var(--accent);
border: 1.5px solid rgba(46,199,182,.35);
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#mobileMenu .x-link:hover, #mobileMenu .yt-link:hover{
background: rgba(46,199,182,.08); transform: translateY(-1px);
}
#mobileMenu .mobile-cta{ font-size:14px; padding:12px 18px; }
.mobile-menu.open{ display:flex; }
.menu-scrim{
position:fixed; inset:0; background:rgba(0,0,0,.42);
opacity:0; pointer-events:none; transition:opacity .28s; z-index:10000;
}
.menu-scrim.open{ opacity:1; pointer-events:auto; }
body[data-menu-open="true"]{ overflow:hidden; }
/* Header Responsive */
@media (max-width:1100px){
.nav-social, .nav-youtube{ display:none; }
.nav ul{ flex-wrap: wrap; justify-content:flex-start; row-gap:2px; column-gap:20px; }
}
@media (max-width:768px){
:root { --header-h: 72px; }
body { padding-top: 72px; }
.header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px; box-sizing:border-box;
box-shadow:0 8px 18px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.08); }
.nav{ display:none; }
.menu-toggle{ display:block; }
.logo{ display:block; margin-right:auto; }
.logo img{ height:44px; width:auto; display:block; }
}
/* ロゴがフレックス収縮で横だけ潰れないようにする */
.logo { flex: 0 0 auto; }
/* 高さ固定をやめ、比率維持＋最大高さで制御 */
.logo img{
height: auto;
max-height: 50px;
width: auto; /* 念のため明示 */
}
/* モバイルの最大高さだけ切り替え */
@media (max-width: 768px){
.logo img{ max-height: 44px; }
}
.highlight-red {
color: #e63946; /* お好みの赤色に調整可能 */
font-weight: 700; /* 少し強調したい場合は太字に */
}
/* 資料請求DL（#fbb31a） */
.btn-dl{
background:#fbb31a;
border-color:#fbb31a;
color:#fff !important;
}
.btn-dl:hover{
transform: translateY(-1px);
filter: brightness(.98);
box-shadow: 0 10px 24px rgba(251,179,26,.28);
}
.btn-dl:active{ filter: brightness(.95); }
.btn-dl:focus-visible{
outline: 3px solid rgba(251,179,26,.35);
outline-offset: 2px;
}
/* 2つ並んだCTAの間隔（微調整・任意） */
.nav-cta + .nav-cta { margin-left: 10px; }
/* 資料請求DL（オレンジ #fbb31a）— PC/モバイル共通 */
.nav .btn-cta.btn-dl,
.btn-cta.btn-dl{
background:#fbb31a;
border-color:#fbb31a;
color:#fff !important;
}
.nav .btn-cta.btn-dl:hover,
.btn-cta.btn-dl:hover{
transform: translateY(-1px);
filter: brightness(.98);
box-shadow: 0 10px 24px rgba(251,179,26,.28);
}
.nav .btn-cta.btn-dl:active,
.btn-cta.btn-dl:active{ filter: brightness(.95); }
.nav .btn-cta.btn-dl:focus-visible,
.btn-cta.btn-dl:focus-visible{
outline: 3px solid rgba(251,179,26,.35);
outline-offset: 2px;
}
/* モバイルのアクション行を折り返し許可 */
#mobileMenu .mobile-actions{
flex-wrap: wrap;
gap: 12px 14px; /* 行/列の間隔 */
justify-content: center;
}
/* CTAは1列で縦積み・横幅いっぱいに */
#mobileMenu .mobile-cta{
flex: 1 1 100%;
width: 100%;
max-width: 440px; /* お好みで調整 */
font-size: 14px;
padding: 12px 18px;
order: 0; /* 上段 */
}
/* X / YouTube は2つ横並びで下段中央に */
#mobileMenu .x-link,
#mobileMenu .yt-link{
order: 1; /* 下段 */
flex: 0 0 auto;
}
/* もし幅がさらに厳しい端末がある場合の保険 */
@media (max-width: 360px){
#mobileMenu .mobile-cta{ max-width: 100%; }
}
/* 1) 開いたときのハンバーガーを最前面に（メニューより上へ） */
.menu-toggle[aria-expanded="true"]{
position: fixed; top:16px; right:16px; background:transparent;
z-index: 10020; /* ← mobileMenu=10010 より大きく */
}
/* 2) 全画面メニューでも余白タップをスクリーンへ通す */
.mobile-menu{
position: fixed; inset: 0; z-index: 10010;
display: none; background: var(--bg);
padding: 96px 24px 40px;
align-items: center; justify-content: center;
/* これが肝：メニューの“余白”はクリックを通す */
pointer-events: none;
}
.mobile-menu.open{ display: flex; }
/* ただし、実際に触りたい要素（ULやリンク・CTA）は普通に反応させる */
.mobile-menu ul,
.mobile-menu a,
#mobileMenu .mobile-actions{
pointer-events: auto;
}
/* スクリーンはメニューの下でOK（余白タップが通るようになる） */
.menu-scrim{
position: fixed; inset: 0; background: rgba(0,0,0,.42);
opacity: 0; pointer-events: none; transition: opacity .28s; z-index: 10000;
}
.menu-scrim.open{ opacity: 1; pointer-events: auto; }
/* メニュー全体は通す（背景タップを背面へ） */
.mobile-menu { pointer-events: none; }
/* クリックさせたい“本物の要素だけ”反応させる */
.mobile-menu a,
.mobile-menu button {
pointer-events: auto;
}
/* ← これが重要：コンテナは反応させない（中の a だけ反応） */
#mobileMenu .mobile-actions { pointer-events: none; }
#mobileMenu .mobile-actions a { pointer-events: auto; }
/* iOSの安全域を考慮して少し下げる＋視認性UP */
.menu-toggle[aria-expanded="true"]{
position: fixed;
top: calc(16px + env(safe-area-inset-top));
right: 16px;
z-index: 11020; /* さらに前面（他のフローティングUIより上） */
background: rgba(255,255,255,.7);
backdrop-filter: blur(6px);
border-radius: 9999px;
padding: 8px; /* 触りやすいタップ領域 */
}
/* ×のバーは濃色に（背景に溶けないように） */
.menu-toggle .bar { background: #2f3a45; } /* お好みで黒寄りに */
/* =========================
Topヒーロー（モバイル簡素化）
========================= */
@media (max-width: 768px){
/* 1) コピーを画面中央に残す */
.eyecatch .eyecatch-overlay{
display:flex;
align-items:center;
justify-content:center;
min-height: calc(100vh - var(--header-h,72px));
padding: 0 20px;
text-align:center;
}
.eyecatch .eyecatch-overlay .eyecatch-copy{
margin: 0;
font-size: clamp(18px, 5vw, 24px);
line-height: 1.6;
max-width: 22ch; /* 読みやすい行長に */
}
/* 2) 大きいCTAを非表示（ヒーロー内のみ） */
.eyecatch .eyecatch-overlay .eyecatch-btn,
.eyecatch .eyecatch-overlay .btn-cta,
.eyecatch .eyecatch-overlay .cta-primary,
.eyecatch .eyecatch-overlay .cta-secondary{
display: none !important;
}
/* 3) 右下の「資料ダウンロードバナー」は残す（必要なら保険で解除） */
/* .download-banner{ display:block !important; } */
}
/* モバイル：ヒーローのコピー（オーバーレイ）を非表示に */
@media (max-width: 768px){
.eyecatch .eyecatch-overlay{
display: none !important;
}
}
/* =========================
3) Forms
========================= */
.form-container{
width:100%; max-width:var(--form-fixed-width);
padding-left:var(--page-style-container-padding-inline);
padding-right:var(--page-style-container-padding-inline);
margin:0 auto;
background-color:var(--page-style-background);
box-sizing:border-box;
padding-top:40px; padding-bottom:60px;
}
.form-header{ text-align:left; margin-bottom:30px; }
.form-header h1{ font-size:60px; margin:0 0 5px; }
.form-header h2{ font-size:18px; font-weight:600; margin:0 0 5px; }
.form-header p{ font-size:13px; margin:0; }
@media (max-width:768px){ .form-header h1{ font-size:50px; } }
.form-group{ margin-bottom:24px; }
.forminput_label{
display:flex; align-items:center; gap:10px; margin-bottom:10px;
font-weight:400; font-size:16px;
}
.forminput_label .required{ color:red; font-size:14px; font-weight:normal; }
.forminput_input, .forminput_textarea{
width:100%; padding:10px; border:1px solid #ccc; border-radius:6px;
font-size:16px; font-family:var(--page-style-font-family);
color:#000; box-sizing:border-box; background:#fff;
}
.forminput_textarea{ height:160px; resize:vertical; }
.radio-group{ display:flex; flex-direction:column; gap:8px; }
.submit-button{
background: var(--page-style-theme); color: var(--accent);
font-size:16px; padding:12px 24px; border:none; border-radius:6px;
cursor:pointer; transition:background-color .3s ease;
width:100%; box-sizing:border-box; font-family:var(--page-style-font-family); font-weight:700;
}
.submit-button:hover{ background:#e0e0e0; }
::placeholder{ font-family:var(--page-style-font-family); color:#b3dad4; }
/* Custom Select */
.select-wrap{ position:relative; }
.select.forminput_input{
background:#fff; color:#000; border:1px solid rgba(46,199,182,.55);
border-radius:8px; height:48px; padding:10px 44px 10px 12px; box-sizing:border-box; cursor:pointer;
appearance:none; -webkit-appearance:none; -moz-appearance:none; background-repeat:no-repeat;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:18px 18px; background-position:right 14px center;
}
.select.forminput_input:hover{ border-color: var(--accent); }
.select.forminput_input:focus{ outline:0; border-color: var(--accent); box-shadow:0 0 0 3px rgba(46,199,182,.18); }
.select.forminput_input:invalid{ color:#b3dad4; }
.select.forminput_input::-ms-expand{ display:none; }
select option{ color:#000; background:#fff; }
/* =========================
Contact 背景フラット化パッチ
========================= */
/* ページ地はオフホワイトで統一 */
html, body{
background-color: #fffcfa;
background-image: none; /* 念のため */
}
/* フォーム一帯は“面色なし”にしてページ地をそのまま見せる */
.form-container,
.callout,
.privacy-policy{
background-color: transparent !important;
box-shadow: none; /* 影があれば消す */
}
/* 見出し下の罫線が白だと“ムラ”に見えるので薄グレーへ */
.form-header hr{
border: 0;
border-top: 1px solid rgba(15,23,42,.12) !important; /* slate系のごく薄い線 */
}
/* 入力欄などの白ボックスはそのまま（コントラスト確保） */
.forminput_input,
.forminput_textarea,
.select.forminput_input{
background-color:#fff;
}
/* もしヘッダーにドロップシャドウがあり色段差が気になる場合だけ： */
.header.is-solid{
box-shadow: 0 1px 0 rgba(15,23,42,.06); /* ごく薄く/不要なら none に */
}
/* =========================
お問い合わせ：可読性パッチ
- 背景は現状のまま（#fffcfa）
- 文字色だけ濃色に上書き
========================= */
/* フォーム全体の基本テキスト色を濃色へ */
.form-container{
color: #1f2a37; /* slate-800 相当 */
}
/* 見出しまわり */
.form-header h1{ color:#0f172a; } /* ぐっと濃く */
.form-header h2{ color:#1f2937; }
.form-header p { color:#475569; }
.form-header hr{ border-top-color: rgba(15,23,42,.15) !important; }
/* ラベル・注記 */
.forminput_label{ color:#0f172a; }
.forminput_label .required{ color:#e11d48; } /* 視認性の良い赤 */
/* 入力フィールド（既に黒だが念のため） */
.forminput_input, .forminput_textarea{
color:#0f172a; background:#fff; border-color:#cbd5e1;
}
.forminput_input:focus, .forminput_textarea:focus{
outline:0;
border-color: rgba(46,199,182,.75);
box-shadow: 0 0 0 3px rgba(46,199,182,.18);
}
/* セレクト（既存ベースを踏襲しつつ文字色を明示） */
.select.forminput_input{ color:#0f172a; }
.select.forminput_input:invalid{ color:#94a3b8; } /* プレースホルダ風 */
/* 送信ボタン：ブランド色でコントラスト確保 */
.submit-button{
background: #2EC7B6; /* brand teal */
color: #fff;
font-weight:700;
}
.submit-button:hover{ filter:brightness(.94); }
/* プレースホルダも薄いグレーへ（白地で見やすく） */
::placeholder{ color:#94a3b8; }
/* 電話案内（.callout）があれば読みやすく */
.callout{ color:#1f2a37; }
.callout-lead{ color:#475569; }
.callout-tel{ color:#0f172a; text-decoration:none; }
.callout-tel:focus-visible{ outline:3px solid rgba(46,199,182,.35); outline-offset:2px; }
/* プライバシーポリシー本文 */
.privacy-policy{ color:#1f2937; }
.privacy-policy h2{ color:#0f172a; }
.privacy-policy strong{ color:#0f172a; }
.privacy-policy a{ color:#0ea5e9; } /* リンクがある場合を想定 */
/* =========================
4) Callout (電話案内)
========================= */
.callout{
background:#fff; color:#2f2f2f; border-radius:16px;
padding:15px 0; line-height:1.4; text-align:center; margin:24px auto 0;
box-shadow:0 4px 16px rgba(0,0,0,0.08); max-width:640px; width:calc(100% - 32px);
}
.callout-lead{ font-size:18px; font-weight:400; margin:0 0 10px; color:#2f2f2f; }
.callout-sub{ font-size:16px; font-weight:400; margin:0 0 18px; color:#2f2f2f; }
.callout-tel{
display:inline-flex; align-items:center; gap:12px; text-decoration:none;
color:#2a6fb0; font-weight:800; font-size: clamp(28px, 6vw, 42px); line-height:1.2;
}
.callout-tel .tel-icon{ font-size:.8em; }
.tel-number{ font-size:26px; }
.callout-note{ margin-top:14px; font-size:14px; color:#566070; }
@media (max-width:690px){ .callout{ width:calc(100% - 32px); margin-inline:auto; } }
@media (max-width:480px){
.callout{ padding:24px 18px; border-radius:12px; }
.callout-lead{ font-size:16px; }
.callout-sub{ font-size:14px; }
}
/* =========================
5) Utilities / Misc
========================= */
.hp-wrap{ position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.privacy-policy{ font-size:12px; }
.privacy-policy h2{ font-size:16px; font-weight:bold; margin-top:0; }
/* コピーライト（共通） */
.copyright{ font-size:12px; text-align:center; color:#748094; margin: 10px 0 20px; }
/* =========================
6) Benefits (強み)
========================= */
.benefits-section{ background: var(--bg); color:#2f2f2f; padding:44px 0 52px; }
.benefits-wrap{ max-width:1040px; margin:0 auto; padding:0 16px; }
.benefits-title{
text-align:center; font-weight:800; color: var(--accent);
font-size: clamp(22px, 3.2vw, 34px); margin: 0 0 8px;
}
.benefits-lead{
text-align:center; margin:0 auto 22px; max-width:920px;
font-size:14px; line-height:1.8; color:#566070;
}
/* メリットのイメージ（サイズ固定＆中央寄せ） */
.merit-img{
display: flex;
justify-content: center;
margin: 5px 0 0;
}
.merit-img img{
width: 120px; /* お好みで調整可：例）clamp(96px, 18vw, 140px) */
max-width: 100%;
height: auto;
}
/* list + numbering (見出し上に丸番号) */
.benefit-list{ list-style:none; margin:0; padding:0; display:grid; gap:20px; counter-reset: step; }
.benefit-card{
position:relative; display:flex; align-items:center; gap:24px;
padding:0 0 22px; background:transparent; box-shadow:none; border-radius:0;
border-bottom:1px solid rgba(0,0,0,.10);
}
.benefit-card:last-child{ border-bottom:none; padding-bottom:0; }
.benefit-thumb{
flex:0 0 300px; width:300px; height:180px; overflow:hidden; border-radius:12px;
}
.benefit-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.benefit-body{ flex:1; min-width:0; position:relative; padding-top:36px; }
.benefit-body::before{
counter-increment: step;
content: counter(step, decimal-leading-zero);
position:absolute; top:0; left:0;
display:inline-grid; place-items:center;
width:34px; height:34px; border-radius:50%;
background:#fff; border:2px solid var(--accent); color:var(--accent);
font-weight:800; font-size:14px; line-height:1;
}
.benefit-head{ margin:12px 0 6px; font-size:18px; font-weight:800; color:#2f2f2f; display:flex; align-items:center; gap:8px; }
.benefit-text{ margin:0; font-size:12px; line-height:1.75; color:#566070; }
/* Mobile optimization */
@media (max-width:720px){
.benefit-card{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding-bottom:18px; }
.benefit-thumb{ width:100%; max-width:360px; height:auto; border-radius:10px; overflow:hidden; }
.benefit-body{ padding-top: 0; }
.benefit-head{ display:block; margin:12px 0 6px; text-align:center; }
.benefit-text{ font-size:14px; line-height:1.7; }
.benefit-body::before{
position: static; /* ← 絶対配置をやめて文書フローへ */
left: auto; top: auto;
transform: none;
display: grid; /* ブロック要素化（中央寄せに効く） */
place-items: center;
margin: 10px auto 8px; /* ← 中央寄せ */
/* 見た目は既存のスタイルをそのまま利用（幅/高さ/枠色など） */
}
}
/* Media mentions (if used) */
.benefits-media{ display:grid; gap:28px; max-width:960px; margin:0 auto; padding:0 16px; }
.media-card{
display:flex; gap:20px; align-items:flex-start; background:#f9fcfd;
border:1px solid rgba(0,0,0,.05); border-radius:12px; padding:16px;
box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.media-thumb{ flex:0 0 220px; }
.media-thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; }
.media-body h3{ margin:0 0 8px; font-size:18px; font-weight:800; color:#2f2f2f; }
.media-body p{ margin:0; font-size:14px; line-height:1.7; color:#566070; }
@media (max-width:720px){ .media-thumb{ width:100%; } }
.benefit-card {
position: relative;
background: #fff;
border-radius: 20px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
overflow: hidden;
transform: translateY(40px);
opacity: 0;
transition: all .6s ease;
}
.benefit-card.visible {
transform: translateY(0);
opacity: 1;
}
.benefit-thumb img {
transition: transform .6s ease;
}
.benefit-card:hover .benefit-thumb img {
transform: scale(1.05);
}
.benefit-head::after {
content:"";
display:block;
width:0;
height:3px;
background:var(--accent);
margin-top:6px;
transition: width .4s ease;
}
.benefit-card:hover .benefit-head::after {
width:40%;
}
/* =========================
7) Recommend (こんな方に)
========================= */
.recommend-section{ background:#fffcfa;
padding:24px 0;}
.recommend-wrap{
max-width:880px; margin:0 auto; padding:0 16px;
display:flex; align-items:center; justify-content:center; gap:24px;
}
.recommend-img{ flex:0 0 120px; width:120px; height:auto; }
.recommend-img img{ width:100% !important; height:auto !important; display:block; }
.recommend-content{
flex:0 1 auto; width:fit-content; max-width:62ch; display:grid; grid-template-columns:1fr; align-items:start;
}
.recommend-box{
width:100%; padding:6px 12px; background:#eef3f5; border-radius:8px;
font-weight:700; font-size:14px; margin-bottom:10px; color:#2f2f2f;
}
.recommend-list{
list-style:none; margin:0; padding:0; font-size:13.5px; line-height:1.65; color:#2f2f2f;
}
.recommend-list li{ margin:6px 0; display:flex; align-items:flex-start; gap:6px; }
.recommend-list li::before{ content:"●"; font-size:10px; color:var(--accent); margin-top:4px; }
@media (max-width:640px){
.recommend-wrap{ flex-direction:column-reverse; align-items:center; gap:12px; text-align:left; }
.recommend-content{ width:100%; }
.recommend-img{ width:110px; flex:0 0 auto; margin-top:4px; }
.recommend-box{ max-width:max-content; padding:6px 12px; margin:0 0 6px 0; }
.recommend-list{ font-size:13.5px; line-height:1.65; }
}
.benefit-card {
transform: translateY(60px) scale(0.96);
opacity: 0;
transition: all .8s cubic-bezier(.22,.68,0,.99);
}
.benefit-card.visible {
transform: translateY(0) scale(1);
opacity: 1;
}
/* =========================
Works（制作実績）— リセット & ベース
========================= */
/* セクション面は白系のサイト背景に戻す */
.section.works{ background: var(--bg) !important; color:#2f2f2f; }
/* 内側ラッパー */
.works{
max-width: 1040px;
margin: 0 auto;
padding: 64px 20px 20px;
color: #2f2f2f;
background: var(--bg);
}
/* 見出し & リード */
.works-title{
font-size: clamp(24px, 5vw, 36px);
text-align: center;
margin: 0 0 12px;
color: #2f2f2f;
font-weight: 800;
}
.works-lead{
text-align: center;
color: #566070;
margin: 0 auto 36px;
font-size: 16px;
max-width: 880px;
line-height: 1.9;
}
/* グリッド */
.works-grid{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 32px 28px;
grid-template-columns: 1fr;
}
@media (min-width: 720px){ .works-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .works-grid{ grid-template-columns: repeat(3, 1fr); } }
/* カード（フラット） */
.work-card{
background: transparent;
box-shadow: none;
border-radius: 0;
display: flex;
flex-direction: column;
padding-bottom: 28px;
border-bottom: 1px solid rgba(15,23,42,.08);
}
.work-card:last-child{ border-bottom: none; }
/* メディア（サムネ） */
.work-media{ position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-thumb{
position: relative;
display: block;
z-index: 2;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transform: translateZ(0);
}
.video-thumb img{
width: 100%;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
vertical-align: middle;
transition: transform .35s ease;
}
.video-thumb:hover img{ transform: scale(1.20); }
.video-thumb:focus-visible img{
transform: scale(1.20); /* お好みで 1.10〜1.20 に調整 */
}
.video-thumb .play-badge{
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 60px; height: 44px; background: #ff0000; color: #fff;
font-size: 28px; line-height: 44px; text-align: center;
border-radius: 12px; font-weight: bold;
box-shadow: 0 4px 12px rgba(0,0,0,.3);
transition: transform .2s ease, opacity .2s ease;
pointer-events: none;
}
/* ライトボックス */
.lightbox{
position: fixed; inset: 0; z-index: 10000;
display: none; align-items: center; justify-content: center;
background: rgba(15,23,42,.66); backdrop-filter: blur(2px);
pointer-events: none;
}
.lightbox.open{ display: flex !important; pointer-events: auto; }
.lightbox-body{ position: relative; width: min(90vw, 1040px); }
.video-wrap{
width: 100%; aspect-ratio: 16 / 9; background: #000;
border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden;
}
#lightboxPlayer{ width: 100%; height: 100%; border: 0; display: block; }
.lightbox-close{
position: absolute; top: -44px; right: -6px;
width: 36px; height: 36px; border-radius: 999px; border: 0;
background: #fff; color: #0f172a; font-size: 22px; line-height: 1;
cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
@media (max-width:640px){
.lightbox-close{ top: -52px; right: 0; }
.video-wrap{ border-radius: 6px; }
}
/* メタ情報 */
.work-meta{ padding: 10px 0 0; }
.work-client{ font-size: 13px; color: #748094; margin-bottom: 4px; }
.work-title{ font-size: 18px; font-weight: 800; margin: 0 0 6px; color: #2f2f2f; }
.work-desc{ font-size: 14px; color: #5a6678; line-height: 1.8; margin: 0 0 10px; }
/* タグ（ハッシュピル） */
.work-tags{ display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; }
.tag{
display: inline-block; padding: 4px 10px; border-radius: 999px;
background: rgba(46,199,182,.08); border: .5px solid rgba(46,199,182,.45);
color: #2f2f2f; font-weight: 700; font-size: 12px; letter-spacing: .02em; line-height: 1;
}
.tag::before{ content: "#"; margin-right: 2px; color: var(--accent); opacity: .9; }
/* CTA */
.work-cta{
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: 999px;
background: var(--accent); border: 2px solid var(--accent); color: #fff;
font-weight: 800; font-size: 13.5px; text-decoration: none;
box-shadow: 0 6px 16px rgba(46,199,182,.22);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
margin-top: 6px;
}
.work-cta::before{
content: ""; width: 18px; height: 18px; background-color: #fff;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / 18px 18px;
mask: url('data:image/svg+xml;utf8,') no-repeat center / 18px 18px;
}
.work-cta:hover{ transform: translateY(-1px); filter: brightness(.98); box-shadow: 0 10px 24px rgba(46,199,182,.28); }
.work-cta:active{ transform: translateY(0); filter: brightness(.95); }
/* 実績ギャラリー（詳細ページ用） */
.workdetail-gallery{
list-style: none;
margin: 16px 0 0;
padding: 0;
display: grid;
gap: 16px;
grid-template-columns: repeat(3, 1fr);
}
.workdetail-gallery li{ margin: 0; }
.workdetail-gallery img{
width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
border-radius: 12px; background: #f3f6f8; box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
@media (max-width: 980px){ .workdetail-gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .workdetail-gallery{ grid-template-columns: 1fr; } }
.section.works:not(.is-expanded) .works-grid .work-card:nth-child(n+4){
display: none;
}
.section.works.is-expanded .works-grid .work-card{
display: flex !important;
animation: worksFade .25s ease both;
}
@keyframes worksFade{
from{ opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================
9) Eyecatch (Hero band)
========================= */
//* ========== 共通ベース ========== */
.eyecatch {
position: relative;
width: 100%;
padding: 0;
background: var(--bg);
overflow: hidden; /* clip→hidden に */
}
/* フォールバック画像と動画を全面に敷く */
.eyecatch-fallback,
.eyecatch-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.eyecatch-fallback img { width:100%; height:100%; object-fit:cover; display:block; }
/* テキストオーバーレイ（共通） */
.eyecatch-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: inherit;
padding: 0 14vw;
z-index: 1;
}
/* 見出し・サブ（共通の初期値） */
.eyecatch-copy {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: clamp(34px, 6vw, 54px);
font-weight: 900;
font-style: italic;
color: var(--pt-feature, #2ec7b6);
opacity: 0.9;
letter-spacing: .05em;
text-transform: uppercase;
margin: 0 0 12px;
}
.eyecatch-sub {
margin: 0;
font-size: clamp(16px, 2.2vw, 24px);
font-weight: 500;
line-height: 1.45;
color: #555;
}
/* ========== 動画アイキャッチ ========== */
.eyecatch--video {
box-shadow: 0 1px 6px rgba(0,0,0,.03);
height: clamp(480px, 78vh, 860px); /* コンテナで高さ管理 */
}
/* 動画版の文言は白＋シャドウ（読みやすさ） */
.eyecatch--video .eyecatch-copy{
color:#fff !important;
font-style: normal;
text-transform: none;
letter-spacing: .01em;
font-weight: 800;
margin: 0 0 20px;
text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.eyecatch--video .eyecatch-overlay{
box-sizing: border-box; /* パディングで横に溢れない */
padding: 20px;
}
/* ボタン群 */
.eyecatch--video .eyecatch-actions{
display: flex; justify-content: center; align-items: center;
gap: 12px; flex-wrap: wrap;
}
.eyecatch--video .eyecatch-btn{
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
border-radius: 10px;
font-weight: 800;
background: var(--accent);
color: #fff; text-decoration: none;
box-shadow: 0 8px 24px rgba(46,199,182,.25);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.eyecatch--video .eyecatch-btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(46,199,182,.32);
filter: brightness(1.03);
}
.eyecatch--video .eyecatch-btn.light{
background: #fff; color: var(--accent);
border: 2px solid #fff;
box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.eyecatch--video .eyecatch-btn .badge{
display:inline-block; margin-left:4px; padding:2px 8px;
font-size:12px; font-weight:800; line-height:1.6;
border-radius:24px; background: var(--accent); color:#fff;
}
/* 1ボタン目だけ強調（または .is-contact を使う） */
.eyecatch--video .eyecatch-actions .eyecatch-btn:first-child,
.eyecatch--video .eyecatch-btn.is-contact{
background: linear-gradient(180deg, #2EC7B6, #16A89B);
border: 2px solid #16A89B;
color: #fff;
box-shadow: 0 10px 28px rgba(22,168,155,.28);
}
.eyecatch--video .eyecatch-btn.is-contact:hover,
.eyecatch--video .eyecatch-actions .eyecatch-btn:first-child:hover{
transform: translateY(-1px);
filter: brightness(.98);
box-shadow: 0 12px 32px rgba(22,168,155,.36);
}
/* アクセシビリティ */
.eyecatch--video .eyecatch-btn:focus-visible{
outline: 3px solid rgba(46,199,182,.35);
outline-offset: 2px;
}
/* モバイル最適化 */
@media (max-width: 560px){
.eyecatch--video { height: 700px; }
.eyecatch--video .eyecatch-overlay{
width: min(560px, 92vw);
padding: 16px;
}
.eyecatch--video .eyecatch-copy {
font-size: clamp(16px, 5.2vw, 22px);
line-height: 1.35;
}
.eyecatch--video .eyecatch-actions{
width:100%; flex-direction: column; align-items: stretch; gap:10px;
}
.eyecatch--video .eyecatch-btn{ width:100%; padding:14px 18px; }
}
/* --- 紙飛行機付きCTA --- */
.eyecatch--video .eyecatch-btn.has-plane{
display:inline-flex; align-items:center; gap:12px;
border-radius: 14px; /* ほんの少しだけコロッと */
padding: 8px 16px;
}
/* アイコン（紙飛行機） */
.eyecatch--video .eyecatch-btn .btn-icon{
display:grid; place-items:center;
width:25px; height:25px;
line-height:0;
}
/* 区切り線「｜」 */
.eyecatch--video .eyecatch-btn .btn-sep{
display:inline-block;
width:1px; height:1.4em;
background: currentColor; /* ボタン文字色に追随（=白） */
opacity:.50; /* 主張し過ぎない */
transform: translateY(1px); /* 微調整 */
}
/* ラベル */
.eyecatch--video .eyecatch-btn .btn-label{
font-weight: 600;
letter-spacing:.02em;
}
/* ホバー時：紙飛行機を少しだけ前へ */
.eyecatch--video .eyecatch-btn.has-plane:hover .btn-icon{
transform: translateX(5px);
transition: transform .18s ease;
}
/* 動き苦手な環境配慮 */
@media (prefers-reduced-motion: reduce){
.eyecatch--video .eyecatch-btn.has-plane:hover .btn-icon{ transform:none; }
}
/* ========== 静止画アイキャッチ ========== */
:root{ --ey-h: 180px; } /* 静止画の高さ */
.eyecatch--static{ box-shadow: 0 1px 6px rgba(0,0,0,.03); }
.eyecatch--static > .eyecatch-image{
position: relative;
height: var(--ey-h);
min-height: var(--ey-h);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-color: transparent;
}
.eyecatch--static > .eyecatch-image::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 55%);
pointer-events:none;
}
.eyecatch-image--left { background-position: left center; }
.eyecatch-image--right { background-position: right center; }
.eyecatch--static > .eyecatch-image.eyecatch-image--duo{
background-color: var(--pt-feature);
background-image: url('_images/test.png'), url('_images/test2.png');
background-repeat: no-repeat, no-repeat;
background-position: left center, right center;
background-size: auto 100%, auto 100%;
}
.eyecatch--static .eyecatch-overlay{
position:absolute; inset:0;
display:flex; flex-direction:column;
justify-content:center; align-items:center;
text-align:center;
padding:56px 20px 64px;
}
.eyecatch--static .eyecatch-copy{
font-size:clamp(28px,4vw,44px);
font-weight:800; line-height:1.2; margin:0 0 10px;
}
.eyecatch--static .eyecatch-sub{
font-size:clamp(16px,2vw,22px);
font-weight:500; line-height:1.5; margin:0;
}
.eyecatch--static .eyecatch-image--duo .eyecatch-copy,
.eyecatch--static .eyecatch-image--duo .eyecatch-sub{
color:#fff; text-shadow:0 3px 12px rgba(0,0,0,.35);
}
@media (max-width:768px){
:root{ --ey-h: 150px; }
.eyecatch--static > .eyecatch-image{ background-size: cover; }
.eyecatch--static .eyecatch-overlay{ padding:24px 16px; }
.eyecatch--static > .eyecatch-image.eyecatch-image--duo{ background-size: auto 80%, auto 80%; }
}
/* ===== Hero質感アップ（HTML改変なし）===== */
/* 1) 映像の色調＆ゆるいKen Burns（高級感のある“生っぽさ”） */
.eyecatch--video .eyecatch-video{
transform-origin: 50% 50%;
animation: heroKenburns 18s ease-in-out infinite alternate;
filter: brightness(.58) contrast(1.08) saturate(1.06) hue-rotate(-4deg);
will-change: transform, filter;
}
@keyframes heroKenburns{
0% { transform: scale(1.06) translate3d(0, 0, 0); }
100% { transform: scale(1.12) translate3d(0, 0, 0); }
}
/* 4) テキスト層は少し立体的に（シャドウを“細く深く”） */
.eyecatch--video .eyecatch-copy{
text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35);
}
/* 6) 低速回線・動きが苦手な環境配慮 */
@media (prefers-reduced-motion: reduce){
.eyecatch--video .eyecatch-video{ animation: none; }
.eyecatch--video::before{ animation: none; opacity:.5; }
}
/* 親でスタッキングコンテキストを作る */
.eyecatch--video{
position: relative;
isolation: isolate; /* ← 擬似要素のブレンドをこの中に閉じ込める */
}
/* 子レイヤーの順序を明示 */
.eyecatch--video .eyecatch-video{ position:absolute; inset:0; z-index:0; }
.eyecatch--video::before,
.eyecatch--video::after{ z-index:1; } /* ← 動画の“上”に来る */
.eyecatch--video .eyecatch-overlay{ z-index:2; }
/* Ken Burns を分かりやすく（後で弱め可） */
.eyecatch--video .eyecatch-video{
transform-origin: 50% 55%;
animation: heroKenburns 14s ease-in-out infinite alternate;
filter: brightness(.60) contrast(1.1) saturate(1.08);
}
@keyframes heroKenburns{
0% { transform: scale(1.00); }
100% { transform: scale(1.10); } /* ← まずは1.10まで上げて存在感を出す */
}
/* =========================
10) Plan (料金/ご案内)
========================= */
:root{
--plan-fg: #0e3f3c;
--plan-fg-weak: #165a56;
--plan-border: rgba(255,255,255,.65);
}
.plan-section{ background: var(--accent); color:#fff; padding:24px 0 36px; }
.plan-wrap{ max-width:1040px; margin:0 auto; padding:0 12px; }
.plan-title{ text-align:center; font-weight:800; font-size:clamp(20px, 2.8vw, 28px); margin:0 0 2px; color:#fff; }
.plan-sub{ text-align:center; margin:0 auto 30px; max-width:920px; font-size:15px; line-height:1.6; opacity:.95; color:#f6fffd; }
.plan-table{ border-top:1px solid var(--plan-border); }
.plan-row{
display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:center;
padding:12px 0; border-bottom:1px solid var(--plan-border);
}
.plan-row:last-child{ border-bottom:none; }
.plan-term{ font-weight:400; font-size:13px; letter-spacing:.02em; color:#eaffff; opacity:.95; }
.plan-desc{
color:var(--plan-fg); padding:6px 8px; border-radius:4px;
font-weight:700; font-size:15px; line-height:1.5;
}
.plan-row-notes .plan-desc{ padding:6px 8px; }
.plan-row-notes .notes-lead{ margin:0 0 4px; font-size:12px; font-weight:600; color:var(--plan-fg-weak); }
.notes-list{ margin:0; padding-left:1.2em; list-style:none; }
.notes-list li{
position:relative; margin:2px 0; padding-left:.5em; color:var(--plan-fg); font-size:13px; line-height:1.6;
}
.notes-list li::before{ content:"※"; position:absolute; left:-1.2em; color:var(--plan-fg-weak); font-weight:600; }
.plan-cta-wrap{ margin:18px auto 0; padding-top:8px; display:flex; justify-content:center; }
.plan-cta{
display:inline-flex; align-items:center; justify-content:center;
min-width:min(92vw, 600px); padding:12px 16px; border-radius:8px; background:#fff; color:var(--accent);
font-weight:600; font-size:clamp(14px, 1.7vw, 18px); text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.08);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.plan-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.plan-cta:active{ transform:translateY(0); }
@media (max-width:720px){
.plan-section{ padding:20px 0 28px; }
.plan-row{ grid-template-columns:1fr; gap:4px; padding:6px 0; }
.plan-term{ font-size:12px; }
.plan-desc{ font-size:14px; padding:6px 8px; }
.plan-cta{ min-width:92vw; font-size:16px; padding:12px 14px; }
}
/* ===== Eyecatch：GRID ===== */
.eyecatch--GRID{
--h: 300px;
--bg: #ffffff;
--line: rgba(31,42,55,.06); /* グリッド線色 */
--speed: 60s; /* 速度：長いほどゆっくり */
position:relative; height:var(--h); overflow:hidden; background: var(--bg);
}
/* 2枚のグリッドを重ねて微速で動かす */
.eyecatch--GRID::before,
.eyecatch--GRID::after{
content:""; position:absolute; inset:-10%;
background-image:
linear-gradient(0deg, var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 40px 40px, 40px 40px;
will-change: transform; pointer-events:none;
}
.eyecatch--GRID::before{ animation: gridA var(--speed) linear infinite; opacity:.7; }
.eyecatch--GRID::after { animation: gridB calc(var(--speed)*1.2) linear infinite; opacity:.45; mix-blend-mode:multiply; }
@keyframes gridA{ to{ transform: translate3d(6%, -6%, 0) rotate(-0.4deg); } }
@keyframes gridB{ to{ transform: translate3d(-5%, 5%, 0) rotate(0.4deg); } }
/* タイトル */
.eyecatch--GRID .eyecatch-inner{
position:relative; z-index:1; height:100%; max-width:1100px; margin:0 auto; padding:0 20px;
display:grid; place-content:center; text-align:center;
}
.eyecatch--GRID .eyecatch-copy{
margin:0 0 6px; font-weight:900; letter-spacing:.06em; font-size:clamp(28px,4vw,46px); color:#1f2a37;
}
.eyecatch--GRID .eyecatch-copy::after{
content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
width:clamp(120px,22vw,260px); height:1px; border-radius:999px;
background:linear-gradient(90deg,#2EC7B6,#8DE5DA); box-shadow:0 8px 22px rgba(46,199,182,.28);
}
.eyecatch--GRID .eyecatch-sub{
margin:16px 0 0; color:#475569; font-weight:700; font-size:clamp(14px,1.6vw,18px);
}
@media (max-width:768px){ .eyecatch--GRID{ --h: 220px; } }
@media (prefers-reduced-motion: reduce){
.eyecatch--GRID::before,.eyecatch--GRID::after{ animation:none !important; }
}
/* =========================
Eyecatch Copy / Tags（英字タグ拡大版）
========================= */
/* --- タグ群（EDUCATION / MEDICAL）--- */
.eyecatch-tags {
display: flex;
gap: 14px;
justify-content: center;
margin-bottom: 26px;
flex-wrap: wrap;
}
.eyecatch-tag {
display: inline-block;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
font-weight: 100;
font-size: clamp(13px, 1.2vw, 18px); /* ← サイズアップ */
letter-spacing: 0.1em;
color: #fff;
border: 1px solid rgba(255,255,255,0.9); /* 枠をやや太く */
padding: 0px 10px 0px; /* 文字サイズに合わせて余白調整 */
border-radius: 3px;
text-transform: uppercase;
background: transparent;
transition: border-color .25s ease, color .25s ease;
}
.eyecatch-tag:hover {
border-color: #fff;
color: #fff;
}
/* --- 日本語コピー（前回のまま）--- */
.eyecatch--video .eyecatch-copy {
font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
font-weight: 800;
font-size: clamp(30px, 4.6vw, 56px);
line-height: 1.28;
color: #fff;
letter-spacing: 0.02em;
margin: 0 0 26px; /* タグの拡大分に合わせて微調整 */
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
text-align: center;
text-transform: none;
}
/* --- CTAボタン群 --- */
.eyecatch--video .eyecatch-actions {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 10px;
}
/* --- モバイル調整 --- */
@media (max-width: 560px) {
.eyecatch-tags {
gap: 10px;
margin-bottom: 18px;
}
.eyecatch-tag {
font-size: 11px;
padding: 6px 12px;
border-width: 1.6px;
letter-spacing: 0.08em;
}
.eyecatch--video .eyecatch-copy {
font-size: clamp(18px, 5.5vw, 26px);
line-height: 1.35;
margin-bottom: 18px;
}
}
/* =========================
11) Flow (制作の流れ)
========================= */
.flow-section{ background: var(--bg); padding:48px 0 64px; color:#2f2f2f; }
.flow-wrap{ max-width:1040px; margin:0 auto; padding:0 16px; }
.flow-title{
text-align:center; font-weight:800; color: var(--accent);
font-size: clamp(22px, 3.2vw, 36px); margin: 0 0 28px;
}
.flow-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:820px){ .flow-grid{ grid-template-columns:1fr 1fr; } }
.flow-card{
background:#f3f6f8; border:1px solid rgba(0,0,0,.04);
border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06);
overflow:hidden; display:grid; grid-template-columns:128px 1fr; gap:16px;
align-items:center; padding:16px; transition: transform .18s ease, box-shadow .18s ease;
}
.flow-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.flow-visual{ width:100%; min-height:120px; display:grid; place-items:center; }
.flow-visual img{ width:100%; height:120px; object-fit:contain; display:block; }
.flow-body{ padding:6px 4px; }
.flow-step{
margin:0 0 6px; font-size:clamp(16px, 2.2vw, 20px); font-weight:800; color:#2f2f2f;
display:flex; align-items:center; gap:8px;
}
.flow-step .num{
display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 2px; border-radius:999px;
background:#fff; color: var(--accent); border:1.5px solid rgba(46,199,182,.35); font-size:14px; font-weight:800; line-height:1;
}
.flow-text{ margin:0; font-size:14px; line-height:1.85; color:#566070; }
@media (max-width:600px){
.flow-card{ grid-template-columns:84px 1fr; align-items:start; gap:12px; padding:14px; text-align:left; }
.flow-visual{ min-height:84px; }
.flow-visual img{ height:84px; }
.flow-step{ font-size:15px; }
.flow-step .num{ min-width:24px; height:24px; font-size:12px; }
.flow-text{ font-size:13px; line-height:1.7; }
}
/* =========================
12) Company
========================= */
.company-section{ background: var(--accent); color:#fff; padding:36px 0 48px; }
.company-head{ text-align:center; margin-bottom:24px; }
.company-logo{ height:64px; margin:0 auto 12px; }
.company-title{ font-size:clamp(24px, 3.2vw, 36px); font-weight:800; color:#fff; margin:0; }
.company-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.company-info .plan-term{ color:#fff; }
.company-info .plan-desc{ color:#fff; font-weight:400; }
.company-link{ color:#fff; text-decoration: underline; }
.company-map iframe{ border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.15); }
/* 会社案内ロゴの縦横比を保つ */
.company-logo {
height: auto; /* 高さは自動で */
max-height: 64px; /* 必要なら制御（デザインに合わせて変更OK） */
width: auto; /* 幅も自動で */
display: block; /* inline要素の隙間をなくす */
}
@media (max-width:820px){
.company-grid{ grid-template-columns:1fr; }
.company-map iframe{ height:300px; }
}
/* =========================
13) Footer (Compact)
========================= */
.footer{
background: var(--bg);
border-top:1px solid rgba(0,0,0,.06);
padding:24px 0 16px; color:#2f2f2f; font-size:12px; line-height:1.6;
}
.f-wrap{
max-width:1040px; margin:0 auto; padding:0 16px;
display:grid; grid-template-columns:1.1fr .9fr 1.2fr; gap:24px; align-items:start;
}
.f-logo img{ height:36px; display:block; }
.f-tag{ margin:8px 0 10px; font-size:12.5px; color:#566070; }
.f-sns a{ display:inline-flex; align-items:center; justify-content:center; }
.f-sns img{ width:20px; height:20px; margin-right:10px; opacity:.9; }
.f-sns img:hover{ opacity:1; }
.f-col h4{ margin:0 0 8px; font-size:12px; letter-spacing:.06em; color: var(--accent); font-weight:800; }
.f-links{
list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 12px;
}
.f-links a{ color:#748094; text-decoration:none; font-weight:700; font-size:12px; }
.f-links a:hover{ text-decoration:underline; }
.f-dl{ margin:0; display:grid; grid-template-columns: 62px 1fr; row-gap:0; column-gap:10px; }
.f-dl dt{ color:#748094; font-weight:700; font-size:12px; }
.f-dl dd{ margin:0; }
.f-company a{ color: var(--accent); text-decoration:none; }
.f-company a:hover{ text-decoration:underline; }
.f-bottom{
max-width:1040px; margin:10px auto 0; padding:8px 16px 0;
border-top:1px solid rgba(0,0,0,.06);
}
@media (max-width:820px){
.f-wrap{ grid-template-columns:1fr 1fr; gap:18px; }
.f-links{ grid-template-columns:1fr; }
}
@media (max-width:560px){
.footer{ padding:20px 0 14px; }
.f-wrap{ grid-template-columns:1fr; gap:14px; }
.f-logo img{ height:34px; }
.f-tag{ margin-top:6px; }
.f-bottom{ margin-top:12px; }
}
/* フッターのロゴ */
.footer .f-logo img {
width: auto; /* 幅は自動で */
height: auto; /* 高さも自動 */
max-width: 160px; /* 最大横幅を指定（デザインに合わせて調整可） */
max-height: 50px; /* 最大高さも指定しておくと安心 */
display: block; /* 行間の隙間をなくす */
}
/* フッターSNSアイコンを統一 */
.footer .f-sns img {
width: 24px; /* 横幅を揃える（例：24px） */
height: 24px; /* 縦も揃える */
object-fit: contain; /* アイコンが潰れないように比率維持 */
display: block;
}
/* =========================
14) Thanks Page (scoped)
========================= */
/* ここは thanks.html の で適用 */
.thanks{
margin:0; font-family:"Noto Sans JP", sans-serif; background: var(--accent); color:#fff;
min-height:100svh; display:grid; place-items:center; padding:24px;
}
.thanks .card{
width:100%; max-width:640px; background:#fff; color:#2f2f2f; border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.12); padding:32px 24px; text-align:center;
}
.thanks .icon{
width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
background: rgba(46,199,182,.12); display:grid; place-items:center;
}
.thanks .icon svg{ width:36px; height:36px; }
.thanks h1{ font-size:clamp(22px, 3.5vw, 28px); margin:8px 0 8px; line-height:1.4; }
.thanks p{ font-size:16px; line-height:1.9; margin:0 0 20px; }
.thanks .actions{ display:grid; gap:12px; margin-top:8px; }
.thanks .btn{ display:inline-block; padding:12px 20px; border-radius:8px; text-decoration:none; font-weight:700; text-align:center; }
.thanks .btn-primary{ background: var(--accent); color:#fff; }
.thanks .btn-primary:hover{ filter:brightness(.95); }
.thanks .btn-subtle{ background:#eef7f6; color:#2f2f2f; }
.thanks .tel-note{ margin-top:16px; font-size:14px; color:#566070; }
.thanks .tel-note a{ color:#2a6fb0; text-decoration:none; font-weight:700; }
.thanks .tel-note a:hover{ text-decoration:underline; }
@media (max-width:480px){ .thanks .card{ padding:24px 18px; border-radius:12px; } }
/* =========================
15) 修正箇所
========================= */
/* 制作実績 詳細ページのCTAボタン：モバイルはみ出し対策 */
.workdetail-cta {
text-align: center; /* 中央寄せ */
}
.workdetail-cta .btn-primary{
display: inline-flex;
align-items: center;
justify-content: center;
width: min(100%, 360px); /* 親幅に収める＋上限360px */
max-width: 100%;
box-sizing: border-box;
padding: 14px 22px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-weight: 800;
text-decoration: none;
box-shadow: 0 10px 28px rgba(46,199,182,.28);
transition: transform .15s ease, box-shadow .15s ease;
}
/* 小さめ端末では幅いっぱいにしたい場合 */
@media (max-width: 560px){
.workdetail-cta .btn-primary{
width: 100%;
}
}
.video-thumb{
display:block;
width:100%;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
font: inherit;
line-height: inherit;
}
.video-thumb:focus-visible{
outline: 3px solid rgba(46,199,182,.35);
outline-offset: 2px;
}
/* 視覚的に隠す */
.sr-only {
position:absolute!important;
width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* フォーカス時に表示 */
.sr-only-focusable:focus {
position:static!important;
width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;padding:.5rem 1rem;background:#fff;border:2px solid #000;z-index:10000;
}
/* =========================
料金プラン（整理版・統合）
- ヘッダは「中身だけ下げる方式」を統一
- リボンは据え置き（Z順も明示）
========================= */
/* ---------- Tokens ---------- */
:root{
/* Colors */
--pt-left:#5e79ad;
--pt-simple:#4f5d9a;
--pt-feature:#4ba398;
--pt-motion:#c09a1a;
--pt-full:#282626;
--pt-line:#e2e7f0;
--pt-cell:#ffffff;
--pt-alt:#f6f8fb;
--pt-shadow:0 10px 26px rgba(0,0,0,.10);
/* Feature badge */
--feature-fg:#ff6a5f;
--feature-accent:#ff5a57;
/* Head card layout */
--colhead-h:220px;
--colhead-h-sm:206px;
--slot-name:3.2em;
--slot-price:3.4rem;
--slot-cta:40px;
/* Offsets */
--colhead-shift-down:28px; /* 中身を下げる量 */
--feature-ribbon-top:18px; /* リボン縦位置 */
--feature-ribbon-left:-36px; /* リボン横位置 */
}
/* ---------- Page ---------- */
.pricing-page{ background:var(--bg)!important; color:#2f2f2f; }
.pricing-main{ max-width:1040px; margin:0 auto; padding:32px 16px 64px; }
/* ---------- Intro ---------- */
.pricing-intro{ max-width:1040px; margin:0 auto 28px; padding:0 16px; text-align:center; }
.pi-title{
font-size:clamp(30px,4vw,40px); font-weight:900; letter-spacing:-.01em; margin:0 0 8px;
}
.pricing-divider{
width:120px; height:4px; border-radius:2px;
background:linear-gradient(90deg,#2ec7b6,#8c79e0); margin:10px auto 18px;
}
.pi-copy{ margin:0 0 8px; }
.pi-copy p{
font-size:clamp(18px,2.4vw,22px); font-weight:800; line-height:1.6; color:#222; max-width:760px; margin:0 auto;
}
.pi-lead{
max-width:760px; color:#566070; line-height:1.85; margin:0 auto 20px; text-align:center;
}
.pi-badges{
display:inline-flex; gap:10px; padding:0; margin:8px auto 14px; list-style:none;
}
.pi-badges li{
font-size:12px; font-weight:800; color:#0e3f3c; background:#e8f7f4;
border:1px solid rgba(46,199,182,.35); padding:6px 10px; border-radius:999px;
}
/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.price-table{
width:100%; min-width:1024px;
border-collapse:separate; border-spacing:0;
background:transparent; /* ← 背景を透過（親の背景色を使う） */
border-radius: 0px;
box-shadow: none; /* ← シャドウを消す */
margin: 18px 0;
}
.price-table th, .price-table td{
padding:18px 14px; border-bottom:1px solid var(--pt-line);
font-size:14px; line-height:1.75; text-align:center; vertical-align:middle;
background:var(--pt-cell); color:#1f2d3a;
}
/* 行見出し（左端） */
.price-table thead .colhead-row th:first-child,
.price-table tbody .row-head{ width:160px; min-width:160px; max-width:160px; }
.row-head{
position:sticky; left:0; z-index:1; color:#fff; background:var(--pt-left);
font-weight:800; text-align:center; white-space:normal; padding-inline:12px;
}
.price-table tbody tr:first-child .row-head{ border-top-left-radius:16px; }
.price-table tbody tr:last-child .row-head{ border-bottom-left-radius:16px; }
/* ---------- Column Head (カード風) ---------- */
.price-table thead th{ position:sticky; top:0; background:#fff; z-index:2; box-shadow:0 2px 0 rgba(0,0,0,.03); }
.price-table thead .colhead-row th{
padding:0 0 12px !important; border-bottom:none !important; vertical-align:bottom; overflow:visible;
}
.colhead{
position:relative; margin:0 10px; padding:22px 14px 16px;
border-radius:28px 28px 12px 12px; color:#fff; text-align:center; box-shadow:var(--pt-shadow);
display:grid; grid-template-rows:var(--slot-name) var(--slot-price) var(--slot-cta);
align-items:center; justify-items:center; height:var(--colhead-h); min-height:160px; gap:10px;
}
.colhead--simple { background:linear-gradient(180deg,#7f9fdd,var(--pt-simple)); }
.colhead--feature{ background:linear-gradient(180deg,#43e1d1,var(--pt-feature)); position:relative; overflow:hidden; }
.colhead--motion { background:linear-gradient(180deg,#f4cd48,var(--pt-motion)); }
.colhead--full { background:linear-gradient(180deg,#666,var(--pt-full)); }
.colhead-name{ font-weight:800; font-size:18px; line-height:1.35; display:flex; align-items:center; justify-content:center; }
.colhead-price{ display:flex; align-items:flex-end; justify-content:center; gap:4px; line-height:1; }
.colhead-price .num{ font-size:clamp(40px,5.4vw,58px); font-weight:900; }
.colhead-price .unit{ font-size:16px; }
.colhead-price .note{ display:block; margin-top:8px; font-size:12px; opacity:.95; line-height:1; }
.colhead-link{
display:inline-flex; align-items:center; justify-content:center;
height:var(--slot-cta); padding:0 16px; border-radius:999px;
background:#fff; color:#0e3f3c; text-decoration:none; font-weight:800; font-size:13px;
box-shadow:0 8px 18px rgba(0,0,0,.12); margin-top:clamp(12px,1.8vw,18px);
}
.colhead--full .colhead-link{ color:#222; }
/* 中身だけ下げる（リボン据え置き） */
.price-table thead .colhead{ padding-top:40px; min-height:calc(var(--colhead-h) + var(--colhead-shift-down)); }
.price-table thead .colhead > *{ transform:translateY(var(--colhead-shift-down)); position:relative; z-index:1; }
/* Feature：斜めリボン + 価格2段 */
.colhead--feature::before{
content:"定額プラン";
position:absolute; top:var(--feature-ribbon-top); left:var(--feature-ribbon-left);
transform:rotate(-35deg); z-index:0;
background:var(--feature-fg); color:#fff; font-weight:800; font-size:12px; letter-spacing:.02em;
padding:6px 56px; box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.colhead--feature .colhead-price{
display:grid; grid-template-columns:auto auto; gap:0 6px; align-items:baseline; justify-content:center;
}
.colhead--feature .colhead-price .num{ grid-column:1; grid-row:1; }
.colhead--feature .colhead-price .unit{ grid-column:2; grid-row:1; }
.colhead--feature .colhead-price .note{ grid-column:1 / -1; grid-row:2; }
/* ○× 表示 */
.price-table td.is-yes::before,
.price-table td.is-no::before{
display:inline-block; font-size:18px; line-height:1; color:#6b7785; font-weight:700;
}
.price-table td.is-yes::before{ content:"○"; }
.price-table td.is-no::before { content:"×"; }
.price-table tbody td:nth-child(3).is-yes::before{ color:var(--feature-accent); }
/* 行ホバー／列ハイライト */
.price-table tr:hover td{ background:#fafafa; }
.price-table tbody td:nth-child(3){ background:#f7fffd; }
/* 注意書き */
.pricing-legend{ max-width:1040px; margin:10px auto 0; padding:0 16px; font-size:12px; color:#6b7785; text-align:right; }
/* ---------- Plan Detail（右カラム併設時の左ミニ表） ---------- */
.plan-detail{
grid-template-columns:minmax(340px,520px) 1fr;
}
.plan-detail .price-table{ min-width:0; width:100%; }
.plan-detail .table-wrap{ overflow:hidden; }
.plan-detail .price-table thead th{ position:static; box-shadow:none; } /* 重なり防止 */
.plan-detail .price-table th,
.plan-detail .price-table td{ padding:14px 10px; font-size:13px; }
/* 右端欠け対策：Gridの子を縮められるようにする */
.plan-detail > .pd-left,
.plan-detail > .pd-right { min-width: 0; }
/* table が少しでもはみ出しても切らずに横スクロールにする */
.plan-detail .table-wrap { overflow-x: auto; overflow-y: visible; }
/* 念のため：セル内の長文で横に広がらないように */
.plan-detail .price-table { min-width: 0; width: 100%; table-layout: fixed; }
.plan-detail .price-table th,
.plan-detail .price-table td { word-break: break-word; }
/* 表示列を簡易アニメのみ残す（1列目＝見出し、2列目＝簡易アニメ） */
.plan-detail .price-table thead th:nth-child(3),
.plan-detail .price-table thead th:nth-child(4),
.plan-detail .price-table thead th:nth-child(5),
.plan-detail .price-table tbody td:nth-child(3),
.plan-detail .price-table tbody td:nth-child(4),
.plan-detail .price-table tbody td:nth-child(5){ display:none; }
/* ヘッダカードの高さを任意で低めに */
.plan-detail .colhead{
height:auto; min-height:0; grid-template-rows:auto auto auto; padding:16px 12px;
}
/* thead セルの下余白微調整（切れ防止） */
.plan-detail .price-table thead .colhead-row th{ padding-bottom:8px !important; overflow:visible; }
/* ---------- Plan Mini（簡易アニメ用：ボタン無し・欠け防止） ---------- */
.plan-mini .colhead{
display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:6px;
padding:14px 12px !important; height:auto !important; min-height:0 !important;
border-radius:28px 28px 12px 12px; box-shadow:var(--pt-shadow); color:#fff; text-align:center;
}
.plan-mini .colhead > *{ transform:none !important; } /* 共通の下げを無効化 */
.plan-mini .colhead-name{ font-size:16px; font-weight:800; margin:0; }
.plan-mini .colhead-price{
display:inline-flex; align-items:baseline; justify-content:center; gap:6px;
margin:0; white-space:nowrap; line-height:1.25; overflow:visible;
}
.plan-mini .colhead-price .num{ font-size:clamp(40px,5vw,54px); font-weight:900; line-height:1.1; display:inline-block; }
.plan-mini .colhead-price .unit{ font-size:16px; font-weight:600; line-height:1.35; display:inline-block; vertical-align:baseline; overflow:visible; }
/* ---------- プラン切替カード ---------- */
.plan-switch { max-width:1040px; margin:20px auto 0; padding:0 16px; }
.plan-switch-title{
text-align:center; font-weight:800; color:#222;
font-size:clamp(18px,2.4vw,22px); margin:0 0 14px;
}
.plan-switch-grid{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;
}
@media (max-width:900px){ .plan-switch-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .plan-switch-grid{ grid-template-columns:1fr; } }
.ps-card{
border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.08);
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ps-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.ps-link{
display:grid; grid-template-rows:auto 1fr auto; gap:8px;
text-decoration:none; color:#fff; padding:16px 16px 14px; min-height:124px;
}
.ps-simple { background:linear-gradient(180deg,#7f9fdd,var(--pt-simple)); }
.ps-feature{ background:linear-gradient(180deg,#43e1d1,var(--pt-feature)); }
.ps-motion { background:linear-gradient(180deg,#f4cd48,var(--pt-motion)); }
.ps-full { background:linear-gradient(180deg,#666,var(--pt-full)); }
.ps-name{ font-weight:800; font-size:16px; line-height:1.35; }
.ps-price{ display:flex; align-items:flex-end; gap:6px; line-height:1; }
.ps-price .num{ font-weight:900; font-size:clamp(30px,4.4vw,40px); }
.ps-price .unit{ font-size:14px; opacity:.95; }
.ps-cta{
display:inline-block; align-self:end; background:#fff; color:#222; font-weight:800; font-size:13px;
padding:8px 12px; border-radius:999px; box-shadow:0 8px 18px rgba(0,0,0,.12);
}
/* ---------- CTA（共通） ---------- */
.cta-row{
max-width:1040px; margin:18px auto 8px; padding:0 16px;
display:flex; justify-content:center;
}
.cta-row--right{ justify-content:flex-start; padding:0; }
.cta-row--subtle{ margin:24px auto 0; }
.btn-estimate{
display:inline-flex; align-items:center; justify-content:center; gap:.5em;
padding:12px 20px; border-radius:999px; background:var(--accent); color:#fff; text-decoration:none;
font-weight:800; font-size:clamp(14px,1.8vw,16px);
box-shadow:0 10px 28px rgba(46,199,182,.28);
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-estimate:hover{ transform:translateY(-1px); filter:brightness(.98); }
.btn-estimate:active{ transform:translateY(0); }
.btn-estimate::after{ content:"→"; font-weight:900; }
.pd-body + .cta-row{ margin-top:8px; }
@media (max-width:560px){ .btn-estimate{ width:100%; } }
/* ---------- Responsive ---------- */
@media (max-width:768px){
.pricing-main{ padding:20px 12px 48px; }
.pi-copy, .pi-lead{ max-width:92vw; }
.table-wrap{ margin:0 -12px; padding:0 12px 8px; position:relative; }
.price-table thead .colhead-row th:first-child,
.price-table tbody .row-head{ width:108px; min-width:108px; max-width:108px; }
.price-table .row-head{ font-size:13px; }
:root{
--colhead-h:var(--colhead-h-sm);
--slot-name:3.0em;
--slot-price:2.6rem;
--slot-cta:38px;
--colhead-shift-down:20px; /* モバイルは控えめ */
}
.colhead{ min-height:152px; }
.colhead-price .num{ font-size:40px; }
}
/* アニメデプラン列（3列目）の背景を少し濃く */
.price-table tbody td:nth-child(3){ background:#e8f7f4; }
/* 行ホバー時も色が飛ばないように上書き */
.price-table tr:hover td:nth-child(3){ background:#def3ef; }
.pi-title{
font-size: clamp(30px, 4vw, 40px);
font-weight: 900;
color: var(--pt-feature, #2ec7b6); /* 本文タイトルもブランドカラーに */
margin: 0 0 40px;
position: relative;
display: inline-block;
}
.pi-title::after{
content: "";
position: absolute;
left: 0;
bottom: -6px; /* 文字との間隔 */
width: 100%;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg, #2ec7b6, #8c79e0); /* ブランドカラーのグラデーション */
}
/* 料金プランのカード：CTA(詳しくみる)の下を締める */
.pricing-page .colhead{
padding-bottom: 8px; /* 元: 16px 前後 → 下の余白を縮める */
}
.pricing-page .colhead-link{
margin-top: 20px; /* 元: clamp(12px,1.8vw,18px) → ボタン直上の間も少しだけ詰める */
height: 36px; /* お好みで（既定 40px 相当） */
}
/* さらに全体を少しだけ低くしてバランスを取る場合（任意） */
:root{
--colhead-h: 206px; /* 既定 220px → 206px など好みで */
}
@media (max-width: 768px){
.pricing-page .colhead{ padding-bottom: 6px; }
:root{ --slot-cta: 34px; }
}
.price-table thead .colhead-row th:first-child,
.price-table tbody .row-head{
width: clamp(140px, 22vw, 176px);
}
/* --- 横スクロールの見える化 ----------------------------------- */
.table-wrap{ position:relative; }
/* 左右フェード（横に続くことを示す） */
.table-wrap::before,
.table-wrap::after{
content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none;
transition:opacity .25s ease; opacity:.85;
}
.table-wrap::before{
left:0;
background:linear-gradient(to right, var(--bg, #fffcfa), rgba(255,255,255,0));
}
.table-wrap::after{
right:0;
background:linear-gradient(to left, var(--bg, #fffcfa), rgba(255,255,255,0));
}
/* 端まで来たらフェードを隠す（JSでclass付与） */
.table-wrap.at-start::before{ opacity:0; }
.table-wrap.at-end::after{ opacity:0; }
/* 初回だけ出す「横にスワイプ」チップ */
.scroll-hint{
position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
font-size:12px; font-weight:800; color:#0e3f3c;
background:#fff; border:1px solid rgba(0,0,0,.08);
border-radius:999px; padding:6px 10px; box-shadow:0 6px 14px rgba(0,0,0,.08);
display:inline-flex; align-items:center; gap:6px;
pointer-events:none; user-select:none; opacity:.95; transition:opacity .25s ease, transform .25s ease;
}
.scroll-hint span{ display:inline-block; animation:nudge 2s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 30%{ transform:translateX(-6px); } 60%{ transform:translateX(6px); } }
/* スクロールorタップで消す */
.scroll-hint.hide{ opacity:0; transform:translateX(-50%) translateY(4px); }
/* 視覚的に隠す（既存があればそれでOK） */
.sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* iOSの慣性スクロール強化（既に指定済みなら不要） */
.table-wrap{ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
/* --- 料金表ヘッダをフラット化（影を消して薄い枠だけ） --- */
/* thead のうっすら影をオフ */
.pricing-page .price-table thead th{
box-shadow: none !important;
}
/* 見出しカード（通常 & ミニ）の影をオフ＋薄いボーダーに */
.pricing-page .colhead,
.pricing-page .plan-mini .colhead{
box-shadow: none !important;
border: 1px solid rgba(0,0,0,.08); /* お好みで .06〜.12 で調整 */
border-radius: 12px !important; /* 角丸を控えめにするとよりフラット */
}
/* 見出し内のCTAボタンもフラットに（影を消す） */
.pricing-page .colhead-link{
box-shadow: none !important;
border: 1px solid rgba(0,0,0,.10);
background: #fff; /* ここは白のままでOK（グラデは見出し側で維持） */
}
/* （任意）ミニ表や詳細ページでも統一したい場合の予防線 */
.plan-detail .price-table thead th{
box-shadow: none !important;
}
.plan-detail .colhead{
box-shadow: none !important;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px !important;
}
/* プラン詳細（ミニ表）のフェードを完全に消す */
.plan-detail .table-wrap::before,
.plan-detail .table-wrap::after{
content: none !important;
}
:root{
--section-gap: 80px; /* デフォルト */
}
.pricing-main section{
margin-block: var(--section-gap);
}
@media (max-width:768px){
:root{ --section-gap: 56px; }
}
/* ===== Plan Cards NEW===== */
.plan-cards{ padding: 20px 0 8px; }
.cards-grid{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
}
.plan-card{
background:#fff; border:1px solid #e7edf3; border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
display:flex; flex-direction:column; min-height:100%;
overflow:hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.plan-card:hover{ transform: translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.08); }
.plan-card-head{
position:relative; padding:18px 16px 10px; text-align:center;
background: linear-gradient(180deg, rgba(246,250,255,.8), rgba(255,255,255,1));
}
.plan-name{
margin:0 0 8px; font-weight:800; font-size:16px; color:#0f172a;
}
.plan-price{
font-weight:900; color:#0f172a; line-height:1;
}
.plan-price .num{ font-size: clamp(36px, 3.6vw, 52px); }
.plan-price .unit{ margin-left:4px; font-size:14px; font-weight:800; color:#334155; }
.plan-price .note{ display:block; margin-top:6px; font-size:12px; color:#64748b; font-weight:700; }
/* 本文（箇条） */
.plan-bullets{ padding: 10px 16px 6px; }
.plan-bullets ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.plan-bullets li{
display:grid; grid-template-columns: 86px 1fr; align-items:start; gap:10px;
padding:10px 10px; border:1px solid #eef2f7; border-radius:10px; background:#fbfdff;
}
.plan-bullets .k{
font-size:12px; font-weight:700; color:#3f4d63; letter-spacing:.02em;
}
.plan-bullets .v{
font-size:14px; font-weight:700; color:#0f172a;
}
/* CTA */
.plan-cta-wrap{ margin: 8px 0 16px; padding-inline:16px; display:flex; justify-content:center; }
.btn-ghost, .btn-primary{
display:inline-flex; align-items:center; justify-content:center; gap:.5em;
padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:800; font-size:14px;
border:1px solid #cfd8e3; color:#0f172a; background:#fff;
}
.btn-primary{
border-color: transparent;
background: linear-gradient(90deg, #2EC7B6, #8DE5DA);
color:#04312d;
box-shadow: 0 10px 22px rgba(46,199,182,.25);
}
/* 色味（プラン別のヘッダートーン） */
.plan-card--simple .plan-card-head{ background: linear-gradient(180deg, #e8efff, #ffffff); }
.plan-card--feature .plan-card-head{ background: linear-gradient(180deg, #d9fff7, #ffffff); }
.plan-card--motion .plan-card-head{ background: linear-gradient(180deg, #fff0c7, #ffffff); }
.plan-card--full .plan-card-head{ background: linear-gradient(180deg, #efefef, #ffffff); }
/* レスポンシブ */
@media (max-width: 1024px){
.cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.cards-grid{ grid-template-columns: 1fr; gap:12px; }
.plan-bullets li{ grid-template-columns: 76px 1fr; padding:8px 10px; }
.plan-price .num{ font-size: clamp(32px, 9vw, 44px); }
}
/* アニメーション無効配慮 */
@media (prefers-reduced-motion: reduce){
.plan-card{ transition:none !important; }
}
/* アクセシビリティ用ユーティリティ */
.sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ===== ボタンをカード下端で揃える（パッチ） ===== */
.cards-grid{ align-items: stretch; } /* 各カードの高さを行内で揃える */
.plan-card{
display: flex;
flex-direction: column; /* ヘッダー → 本文 → フッター（CTA） */
height: 100%;
}
.plan-bullets{
flex: 1 1 auto; /* 本文が余白を食べて伸びる */
display: block; /* 念のため */
}
.plan-cta-wrap{
margin-top: auto; /* ← これで常に最下部へ */
padding: 12px 16px 16px;
display: flex;
justify-content: center;
}
/* 見た目の安定（任意） */
.plan-cta-wrap .btn-ghost,
.plan-cta-wrap .btn-primary{
width: min(100%, 220px); /* ボタン幅を揃える（お好みで） */
}
/* カード間のギャップを狭める */
.cards-grid{ gap:12px; } /* 18px → 12px */
@media (max-width:1024px){ .cards-grid{ gap:12px; } }
@media (max-width:640px){ .cards-grid{ gap:10px; } }
/* 箇条リストを“線区切り”に刷新 */
.plan-bullets{ padding: 10px 16px 6px; }
.plan-bullets ul{ display:block; }
.plan-bullets li{
display:grid;
grid-template-columns: 72px 1fr; /* ← k列を少し狭く */
gap:10px; align-items:start;
padding:10px 0; /* ← 余白だけ */
border:0; background:transparent; /* ← 枠/背景を外す */
border-bottom:1px solid #edf2f7; /* ← ライン区切り */
}
.plan-bullets li:last-child{ border-bottom: none; }
.plan-bullets .k{
font-size:12px; font-weight:700; color:#3f4d63; letter-spacing:.02em;
}
.plan-bullets .v{
font-size:14px; font-weight:700; color:#0f172a;
}
/* モバイルはさらにタイトに */
@media (max-width:640px){
.plan-bullets li{ grid-template-columns: 64px 1fr; padding:8px 0; }
}
/* 並び順：ヘッダー → CTA → 箇条 */
.plan-card{ display:flex; flex-direction:column; }
.plan-card-head{ order:0; }
.plan-cta-wrap{
order:1;
margin: 6px 0 6px; /* カード中段に合う余白 */
padding: 6px 16px 0;
justify-content:center;
}
.plan-bullets{
order:2;
flex: 1 1 auto; /* 箇条が可変で縦に伸びる */
}
/* 以前の“最下部固定”指定を打ち消し */
.plan-cta-wrap{ margin-top: 0 !important; }
/* ボタン幅はそのまま統一でOK（必要なら微調整） */
.plan-cta-wrap .btn-ghost{ width: min(100%, 220px); }
/* 価格数字の存在感をほんの少しUP（にじみを抑えた影） */
.plan-price .num{
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
/* ヘッダー下に極細の仕切りライン（全カード統一） */
.plan-card-head{ border-bottom: 1px solid rgba(15,23,42,.06); }
/* ================================
PLANS: 1) CTAをブランドカラー化＋ホバー演出
=================================== */
.plan-cards .plan-cta-wrap .btn-ghost{
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 10px 22px rgba(46,199,182,.25);
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.plan-cards .plan-cta-wrap .btn-ghost::after{
content:"";
position:absolute; inset:-2px;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
transform: translateX(-110%);
transition: transform .70s ease;
}
@media (hover:hover){
.plan-cards .plan-cta-wrap .btn-ghost:hover{
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(46,199,182,.32);
filter: brightness(1.02);
}
.plan-cards .plan-cta-wrap .btn-ghost:hover::after{
transform: translateX(110%);
}
}
.plan-cards .plan-cta-wrap .btn-ghost:focus-visible{
outline: 3px solid rgba(46,199,182,.35);
outline-offset: 2px;
}
/* ==========================================
PLANS: 2) ヘッダーのグラデーションをすべて撤去
（カードの上辺に極細ラインだけ残す）
========================================== */
.plan-cards .plan-card-head{
background: #fff !important;
border-bottom: 1px solid rgba(15,23,42,.06);
}
/* 既存の各プランのグラデ指定を打ち消し */
.plan-card--simple .plan-card-head,
.plan-card--feature .plan-card-head,
.plan-card--motion .plan-card-head,
.plan-card--full .plan-card-head{
background: #fff !important;
}
/* ================================
PLANS: 3) プラン名をブランド色に
=================================== */
.plan-cards .plan-name{
color: var(--accent);
font-weight: 800;
}
/* ===== Plans 見出しの上下バランス（少し下げて、下は詰める） ===== */
.pricing-intro{
padding-top: clamp(12px, 1.6vw, 24px); /* ヘッダーとの隙間を作る */
padding-bottom: 0; /* 余計な下余白は持たせない */
}
.pricing-intro .section-head.fancy{
margin-top: clamp(24px, 4vw, 48px); /* ← 見出しを少し下げる */
margin-bottom: clamp(8px, 1.2vw, 14px); /* ← カードとの距離を詰める */
}
/* モバイルはさらにタイトに */
@media (max-width: 640px){
.pricing-intro{ padding-top: 14px; }
.pricing-intro .section-head.fancy{
margin-top: 18px;
margin-bottom: 8px;
}
}
/* =========================
Materials Request (Look & Feel)
========================= */
.materials-hero{
background: linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.08) 100%);
padding: 48px 0 8px;
}
.materials-hero__inner{
width:100%; max-width:var(--form-fixed-width);
margin:0 auto; padding:0 var(--page-style-container-padding-inline);
}
.materials-hero h1{ font-size:52px; margin:0 0 8px; line-height:1.1; }
.materials-hero__lead{ margin:0; font-size:16px; opacity:.95; }
.materials-badges{
display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none;
}
.materials-badges li{
display:inline-flex; align-items:center; gap:8px;
padding:8px 12px; border-radius:999px;
background: rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
font-size:12.5px; letter-spacing:.02em;
}
/* Steps */
.materials-steps{ padding: 10px 0 20px; }
.steps{
width:100%; max-width:var(--form-fixed-width);
margin:0 auto; padding:0 var(--page-style-container-padding-inline);
list-style:none; display:flex; gap:18px; align-items:center;
color: rgba(255,255,255,.8);
}
.steps li{
display:flex; align-items:center; gap:10px; font-weight:700; font-size:13px; opacity:.7;
}
.steps li.is-active{ opacity:1; color:#fff; }
.steps li span{
display:inline-grid; place-items:center;
width:28px; height:28px; border-radius:50%;
background:#fff; color: var(--accent); font-weight:800;
}
/* =========================
資料請求：可読性＆背景フラット化パッチ
- 背景は #fffcfa のまま
- 文字を濃色へ、白前提のUIを置き換え
========================= */
/* ページ地の統一（念のため） */
html, body{
background-color:#fffcfa;
background-image:none;
}
/* ---- Hero ---- */
.materials-hero{
/* 白前提のグラデは外してムラ消し */
background: transparent;
color:#0f172a; /* 基本文字色 */
}
.materials-hero h1{ color:#0f172a; }
.materials-hero__lead{ color:#475569; }
/* バッジ：白前提→薄いグレー境界＋ごく淡い面色へ */
.materials-badges li{
background: rgba(15,23,42,.04);
border: 1px solid rgba(15,23,42,.12);
color:#0f172a;
}
/* ---- ステップ ---- */
.materials-steps{ color:#1f2937; }
.steps{ color:#1f2937; }
.steps li{ opacity:1; color:#1f2937; }
.steps li.is-active{ color:#0f172a; }
.steps li span{
background:#fff;
color: var(--accent); /* ティール数字はそのまま映える */
box-shadow: 0 0 0 1px rgba(15,23,42,.10); /* 輪郭をわずかに */
}
/* ---- 本文ブロック（左の説明/安心カード） ---- */
.materials-intro{ color:#1f2937; }
.materials-intro h2{ color:#0f172a; }
.trust-cards .trust-card h3{ color:#0f172a; }
.trust-cards .trust-card p{ color:#475569; }
/* ---- フォーム ---- */
.materials-form,
.form-card{ background: transparent; color:#1f2937; }
.form-group .forminput_label{ color:#0f172a; }
.forminput_input,
.forminput_textarea{
background:#fff;
color:#0f172a;
border:1px solid #cbd5e1;
}
.forminput_input:focus,
.forminput_textarea:focus{
outline:0;
border-color: rgba(46,199,182,.75);
box-shadow: 0 0 0 3px rgba(46,199,182,.18);
}
/* チップス（用途） */
.chips label{ color:#0f172a; }
.chips input[type="checkbox"]{
accent-color: var(--accent); /* 対応ブラウザでティール */
}
.chips label span{
display:inline-block;
padding:.35em .7em;
border:1px solid rgba(15,23,42,.18);
border-radius:999px;
background:#fff;
}
.chips input:checked + span{
border-color: rgba(46,199,182,.6);
box-shadow: 0 0 0 3px rgba(46,199,182,.18);
}
/* 同意行＆送信ボタン */
.agree-row{ color:#1f2937; }
.agree-row .agree-link{ color:#0ea5e9; text-decoration:underline; }
.submit-button{
background:#2EC7B6;
color:#fff;
font-weight:700;
}
.submit-button:hover{ filter:brightness(.94); }
/* 送信後注意書き */
.after-submit-note{ color:#64748b; }
/* ---- プライバシーセクション ---- */
.materials-privacy .form-container{
background: transparent !important;
color:#1f2937;
}
.materials-privacy h2{ color:#0f172a; }
.materials-privacy strong{ color:#0f172a; }
/* Heroや区切りの細線が白く見えるのを避ける */
.materials-hero hr,
.materials-privacy hr{
border:0;
border-top:1px solid rgba(15,23,42,.12) !important;
}
/* =========================
Layout
========================= */
.materials-wrap{
width:100%; max-width:var(--form-fixed-width);
margin: 0 auto 40px;
padding: 0 var(--page-style-container-padding-inline);
display:grid;
grid-template-columns: 1.2fr 1fr; /* 左：右 */
gap:24px;
grid-auto-rows: min-content; /* 行高は右側コンテンツ基準で自動 */
align-items:start; /* 各セルの上揃え */
}
/* 画像は左列で縦2行ぶち抜き、右は上=説明／下=フォーム */
.materials-visual{ grid-column:1; grid-row:1 / span 2; align-self:start; }
.materials-intro { grid-column:2; grid-row:1; }
.materials-form { grid-column:2; grid-row:2; align-self:start; }
/* Grid 子要素のはみ出し対策（モバイル右切れ防止） */
.materials-visual,
.materials-intro,
.materials-form { min-width: 0; }
/* モバイルは縦積み */
@media (max-width: 960px){
.materials-wrap{
grid-template-columns: 1fr;
grid-auto-rows: initial;
padding-left: 16px; padding-right: 16px; /* 余白を少し狭める */
}
.materials-visual{ grid-column:1; grid-row:auto; order:-2; }
.materials-intro { grid-column:1; grid-row:auto; order:-1; }
.materials-form { grid-column:1; grid-row:auto; order:0; }
}
/* =========================
Visual block
========================= */
.materials-visual{
margin:0; padding:0;
background: rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
border-radius:16px; overflow:hidden;
position: relative; /* ← これを追加（キャプションを中で絶対配置するため） */
}
.materials-visual img{
display:block; width:100%; height:auto;
aspect-ratio: 3 / 4; /* request.pngが縦長想定。横長なら 16/9 に変更 */
object-fit: cover;
filter: drop-shadow(0 10px 26px rgba(0,0,0,.06));
/* 縦が伸びすぎる場合の保険：
max-height: 78vh;
*/
}
.materials-visual figcaption{
position: absolute; /* ← 画像の上に重ねる */
left: 14px;
bottom: 14px;
margin: 0;
padding: 6px 10px;
font-size: 12px;
line-height: 1;
color: #fff;
/* ↓ ここで帯のグラデ背景をやめ、半透明バッジに変更 */
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,255,255,.28);
border-radius: 8px;
backdrop-filter: blur(3px); /* お好みで */
}
/* =========================
Intro / Trust
========================= */
.materials-intro h2{ margin:0 0 10px; font-size:24px; }
.materials-intro p{ margin:0 0 16px; font-size:14.5px; overflow-wrap:anywhere; }
.trust-cards{
display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:10px;
}
.trust-card{
background: rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
border-radius:14px; padding:14px;
}
.trust-card h3{ margin:0 0 6px; font-size:14px; font-weight:800; }
.trust-card p { margin:0; font-size:13px; opacity:.95; line-height:1.8; }
@media (max-width: 960px){ .trust-cards{ grid-template-columns: 1fr; } }
/* =========================
Form Card
========================= */
.materials-form .form-card{
background:#fff; color:#2f2f2f;
border-radius:16px; padding:20px;
box-shadow: var(--pt-shadow, 0 10px 26px rgba(0,0,0,.10));
border: 1px solid #e6ecf2;
max-width: 100%;
}
.materials-form .forminput_label{ color:#334155; }
.materials-form .forminput_input,
.materials-form .forminput_textarea{
border:1px solid rgba(46,199,182,.35);
max-width:100%;
}
.materials-form .forminput_input:focus,
.materials-form .forminput_textarea:focus{
outline:0; border-color: var(--accent); box-shadow:0 0 0 3px rgba(46,199,182,.16);
}
.materials-form .two-col{
display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
@media (max-width: 560px){
.materials-form .two-col{ grid-template-columns: 1fr; }
}
/* Optional detail */
.form-optional{ margin: 8px 0 4px; border-top:1px dashed #e6ecf2; padding-top:8px; }
.optional-summary{
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; gap:8px; color:#0f766e; font-weight:800; font-size:13.5px;
overflow-wrap:anywhere;
}
.optional-summary::-webkit-details-marker{ display:none; }
.form-optional[open] .optional-summary{ color:#0b5f58; }
.optional-summary::before{
content:"＋"; display:inline-grid; place-items:center;
width:18px; height:18px; border-radius:4px;
background: rgba(46,199,182,.15); color:#0b5f58; font-weight:900; font-size:12px;
}
.form-optional[open] .optional-summary::before{ content:"－"; }
/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }
.chips label{
display:inline-flex; align-items:center; gap:8px;
border:1px solid #e6ecf2; border-radius:999px; padding:8px 12px;
background:#fff; color:#334155; font-size:12.5px; cursor:pointer;
}
.chips input{ appearance:none; width:0; height:0; position:absolute; }
.chips input:checked + span{ color:#0b5f58; }
.chips input:checked + span::after{ content:" ✓"; font-weight:900; }
/* Agree row */
.agree-row{
margin:8px 0 14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
font-size:12.5px; color:#334155; overflow-wrap:anywhere;
}
.agree-row input[type="checkbox"]{ transform: translateY(1px); }
.agree-link{ color:#0b5f58; text-decoration:underline; text-underline-offset:2px; }
/* Submit */
.materials-form .submit-button{
background: var(--accent); color:#fff; border-radius:999px;
padding:14px 22px; font-weight:800; letter-spacing:.02em; font-size:15px;
border:2px solid var(--accent);
transition: transform .15s ease, box-shadow .15s ease;
}
.materials-form .submit-button:hover{
transform: translateY(-1px);
box-shadow:0 10px 24px rgba(46,199,182,.28);
}
.after-submit-note{ margin:10px 0 0; font-size:12.5px; color:#64748b; }
/* Privacy section anchor */
.materials-privacy{ scroll-margin-top: calc(var(--header-h) + 24px); }
/* （保険）グローバル横はみ出し防止。問題なければ外してOK */
html, body { overflow-x: hidden; }
/* ▼ materialsブロックだけ border-box に統一（はみ出し防止） */
.materials-hero__inner,
.steps,
.materials-wrap,
.materials-visual,
.materials-intro,
.materials-form,
.materials-form .form-card {
box-sizing: border-box;
}
/* 念のため：グリッド子要素のはみ出し抑制（既に入っているが再掲） */
.materials-visual,
.materials-intro,
.materials-form { min-width: 0; }
/* モバイルでは高さを切り替え（既存の実装を活かしつつ変数で揃える） */
@media (max-width: 768px){
:root { --header-h: 72px; }
/* body の padding-top は変数参照なので自動で 72px に */
}
/* === Header 最終ガード（sticky統一 & 帯なし） === */
.header{
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 2000;
}
/* 余計な帯を作らない */
body{ padding-top: 0 !important; }
main > :first-child,
.eyecatch:first-child{ margin-top: 0 !important; }
/* アンカーリンクのズレを補正（ヘッダーの実高に合わせて変更OK） */
:root{ --header-h: 88px; } /* ここはサイト実測に合わせて 72〜96px 程度で調整 */
html{ scroll-padding-top: var(--header-h); }
@media (max-width:768px){
html{ scroll-padding-top: 72px; } /* モバイル実測に合わせて */
}
/* 固定ヘッダー（高さを決め打ち） */
:root{ --header-h-pc: 72px; --header-h-sp: 72px; }
.header{
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 3000;
background: var(--bg);
height: var(--header-h-pc);
}
.header > .container{ height: 100%; display:flex; align-items:center; }
@media (max-width:768px){
.header{ height: var(--header-h-sp); }
}
/* コンテンツをヘッダー分だけ下げる */
body{ padding-top: var(--header-h-pc) !important; }
@media (max-width:768px){
body{ padding-top: var(--header-h-sp) !important; }
}
/* アンカー補正 & 帯防止 */
html{ scroll-padding-top: var(--header-h-pc); }
@media (max-width:768px){ html{ scroll-padding-top: var(--header-h-sp); } }
main > :first-child, .eyecatch:first-child{ margin-top:0 !important; }
/* ===== Eyecatch（動画）モバイルはみ出し最終パッチ ===== */
/* グローバル overlay の 14vw パディング＆ inset を動画だけ無効化 */
@media (max-width: 560px){
.eyecatch--video .eyecatch-overlay{
/* 位置は全面フィットで統一（中央寄せは flex で） */
inset: 0 !important;
top: auto !important; right: auto !important;
bottom: auto !important; left: auto !important;
transform: none !important;
/* 横は画面内で完結（14vw を打消し） */
padding: 16px !important;
box-sizing: border-box;
/* 中央寄せ */
display: flex; flex-direction: column;
justify-content: center; align-items: center;
}
/* ボタン行は親幅100%に（86vw を打消し） */
.eyecatch--video .eyecatch-actions{
width: 100% !important;
max-width: 480px; /* 任意の天井。不要なら消してOK */
margin: 0 auto;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
/* 各ボタンは親にフィット */
.eyecatch--video .eyecatch-btn{
width: 100% !important;
padding: 14px 18px;
box-sizing: border-box;
}
}
/* お問い合わせボタン（1つ目）カラー：そのまま継続 */
.eyecatch--video .eyecatch-actions .eyecatch-btn:first-child{
background: linear-gradient(180deg, #2EC7B6, #16A89B);
border: 2px solid #16A89B;
color: #fff;
box-shadow: 0 10px 28px rgba(22,168,155,.28);
}
.eyecatch--video .eyecatch-actions .eyecatch-btn:first-child:hover{
transform: translateY(-1px);
filter: brightness(.98);
box-shadow: 0 12px 32px rgba(22,168,155,.36);
}
/* Floating 資料請求 Banner */
.req-banner{
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
display: inline-block;
width: min(320px, 42vw);
max-width: 360px;
transform: translateY(16px);
opacity: 0;
pointer-events: none;
text-decoration: none;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.req-banner.is-show{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: transform .28s ease, opacity .28s ease;
}
.req-banner img{
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
.req-banner__close{
position:absolute; top:-10px; right:-10px;
width:40px; height:40px; /* タップしやすいサイズ */
border:none; padding:0; cursor:pointer;
border-radius:999px;
background: rgba(15,15,20,.35);
backdrop-filter: blur(6px); /* ガラス感 */
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(0,0,0,.25),
inset 0 0 0 1px rgba(255,255,255,.22);
color: transparent; /* テキストは使わない */
transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
opacity:.92;
}
/* × を疑似要素で描画 */
.req-banner__close::before,
.req-banner__close::after{
content:"";
position:absolute; inset:0; margin:auto;
width:18px; height:2px; border-radius:2px;
background:#fff; box-shadow: 0 0 1px rgba(0,0,0,.2);
}
.req-banner__close::before{ transform: rotate(45deg); }
.req-banner__close::after { transform: rotate(-45deg); }
/* ホバーでアクセント色ニュアンス */
.req-banner__close:hover{
background: rgba(46,199,182,.18); /* --accent を想定 */
box-shadow: 0 6px 18px rgba(0,0,0,.26),
inset 0 0 0 1px rgba(46,199,182,.55);
transform: translateY(-1px);
}
.req-banner__close:active{ transform: translateY(0); }
.req-banner__close:focus-visible{
outline: 3px solid rgba(46,199,182,.45);
outline-offset: 2px;
}
/* モバイル微調整（セーフエリア対応） */
@supports (padding: max(0px)) {
.req-banner{
right: max(20px, env(safe-area-inset-right));
bottom: max(20px, env(safe-area-inset-bottom));
}
}
@media (max-width: 480px){
.req-banner{ width: min(280px, 80vw); border-radius: 10px; }
.req-banner img{ border-radius: 10px; }
.req-banner__close{
top: -8px; right: -8px;
width: 28px; height: 28px;
}
.req-banner__close::before,
.req-banner__close::after{
width: 14px; height: 2px;
}
}
/* 動きを減らす設定のユーザーに配慮 */
@media (prefers-reduced-motion: reduce){
.req-banner, .req-banner.is-show{ transition: none; transform: none; }
.req-banner__close{ transition: none; }
}
/* ========== Transparent → Solid Header ========== */
:root{
--header-bg: #fffefb; /* ← 完全不透明な白寄りアイボリー */
--header-shadow: 0 6px 18px rgba(17,24,39,.08);
--header-blur: 10px;
}
/* 初期は透過でヒーローの上に重ねる */
.header{
position: fixed; left:0; right:0; top:0; z-index: 50;
background: transparent;
backdrop-filter: none; -webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
box-shadow: none;
transition: background-color .28s ease, backdrop-filter .28s ease,
-webkit-backdrop-filter .28s ease, box-shadow .28s ease,
border-color .28s ease, transform .32s ease;
will-change: background-color, backdrop-filter, box-shadow, transform;
}
/* スクロール後に“実体化” */
/* 実体化時（透過なし） */
.header.is-solid{
background: var(--header-bg) !important; /* 不透明 #fffefb */
backdrop-filter: none !important; /* ぼかしを無効化 */
-webkit-backdrop-filter: none !important; /* Safari対応 */
border-bottom-color: rgba(0,0,0,.06);
box-shadow: var(--header-shadow);
}
/* 固定ヘッダー分の押し下げ（JSで高さを反映） */
body{ padding-top: var(--header-h, 0px); }
/* 任意：スクロール方向の微アニメ */
.header.is-solid.scrolling-down{ transform: translateY(-8px); }
.header.is-solid.scrolling-up{ transform: translateY(0); }
/* （必要なら）実体化時の文字色を調整
.header.is-solid .nav a{ color:#1f2a37; }
*/
/* ヒーローを常に“画面いっぱい”に（アドレスバー差を吸収する svh を使用） */
.eyecatch--video{
height: 100svh;
}
.eyecatch--video .eyecatch-video{
width: 100%; height: 100%;
object-fit: cover;
animation: none !important; /* ← Ken Burnsを無効化（動かさない） */
transform: none !important;
}
/* ヘッダー分の押し下げを“ヒーローだけ”相殺して、全面に敷く */
.eyecatch--video.is-first{
margin-top: calc(var(--header-h, 0px) * -1);
height: calc(100svh + var(--header-h, 0px));
}
/* 透過時にロゴの見栄えが悪い場合の保険（暗い背景に馴染ませるなら微調整可）
.header:not(.is-solid) .site-logo{ filter: none; } */
.logo .site-logo{ display:block; height:auto; max-height:56px; }
.header .container{ display:flex; align-items:center; justify-content:space-between; }
/* ロゴの表示切替（CSSだけで制御） */
.logo{ position: relative; display:flex; align-items:center; }
.logo .site-logo{ display:block; height:auto; max-height:56px; }
.site-logo--pos{ opacity:0; visibility:hidden; position:absolute; inset:0 auto auto 0; }
.site-logo--nega{ opacity:1; visibility:visible; }
/* スクロール後（実体化）→ ポジを表示、ネガを隠す */
.header.is-solid .site-logo--pos{
opacity:1; visibility:visible; position:static;
}
.header.is-solid .site-logo--nega{
opacity:0; visibility:hidden; position:absolute; inset:0 auto auto 0;
}
/* 透過中：文字を白に（hoverは少しだけ弱め） */
.header:not(.is-solid) nav a,
.header:not(.is-solid) .nav a{
color: #fff !important;
}
.header:not(.is-solid) nav a:hover,
.header:not(.is-solid) .nav a:hover{
color: #fff !important;
opacity: .9;
text-decoration: none;
}
/* 実体化後：通常色に戻す（ブランド色に合わせて） */
.header.is-solid nav a,
.header.is-solid .nav a{
color: var(--accent, #16A89B) !important;
}
.header.is-solid nav a:hover,
.header.is-solid .nav a:hover{
opacity: .9;
}
/* 形とサイズ（ベース） */
.nav-social a,
.nav-youtube a{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:9999px;
line-height:1; transition: background-color .2s, border-color .2s, color .2s;
}
/* 透過中（ネガロゴ時）：白枠・白アイコン・透明背景に上書き */
.header:not(.is-solid) .nav-social a,
.header:not(.is-solid) .nav-youtube a{
color:#fff !important;
border:1.8px solid #fff !important;
background: transparent !important;
}
/* SVGもリンク色を使う（path に fill="currentColor" があるので色は継承されます） */
.header:not(.is-solid) .nav-social a svg,
.header:not(.is-solid) .nav-youtube a svg{
color:inherit; fill:currentColor;
}
/* 透過中ホバー：うっすら白ベール */
.header:not(.is-solid) .nav-social a:hover,
.header:not(.is-solid) .nav-youtube a:hover{
background: rgba(255,255,255,.14) !important;
}
/* 実体化後のヘッダー内ボタン文字は常に白 */
.header.is-solid nav a[class*="btn"],
.header.is-solid .nav a[class*="btn"],
.header.is-solid nav a.is-cta,
.header.is-solid .nav a.is-cta {
color:#fff !important;
}
/* アイコンも白に合わせる（currentColor継承） */
.header.is-solid nav a[class*="btn"] svg,
.header.is-solid .nav a[class*="btn"] svg,
.header.is-solid nav a.is-cta svg,
.header.is-solid .nav a.is-cta svg {
color:inherit; fill:currentColor;
}
/* ホバーでも白維持（明度だけ少し落とす） */
.header.is-solid nav a[class*="btn"]:hover,
.header.is-solid .nav a[class*="btn"]:hover,
.header.is-solid nav a.is-cta:hover,
.header.is-solid .nav a.is-cta:hover {
color:#fff !important;
opacity:.92;
}
/* =========================
Header Nav 下線アニメーション（限定適用）
対象：通常ナビ（サービス／料金プラン／制作実績／制作の流れ／会社情報）
除外：SNSアイコン／CTAボタン
========================= */
.header ul > li:not(.nav-social):not(.nav-youtube):not(.nav-cta) > a {
position: relative;
display: inline-block;
text-decoration: none;
}
.header ul > li:not(.nav-social):not(.nav-youtube):not(.nav-cta) > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background: linear-gradient(90deg, var(--accent, #2EC7B6), #8DE5DA);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.22s ease;
opacity: 0.9;
}
@media (hover:hover) {
.header ul > li:not(.nav-social):not(.nav-youtube):not(.nav-cta) > a:hover::after {
transform: scaleX(1);
}
}
@media (prefers-reduced-motion: reduce) {
.header ul > li:not(.nav-social):not(.nav-youtube):not(.nav-cta) > a::after {
transition: none;
}
}
/* =========================
Pricing Teaser（料金概要）
- 中央寄せ / 4→2→1 カード
- 見出し＋リードの背面にゴースト文字
- 影響範囲は .pricing-teaser 内に限定
========================= */
.pricing-teaser{
position: relative;
overflow: hidden;
padding: 56px 20px;
background: var(--bg);
}
.pricing-teaser .container{
max-width: 1060px;
margin: 0 auto;
display: flex; /* h2 → lead → cards → button を縦積み */
flex-direction: column;
align-items: center;
}
/* ---- 見出しブロック（h2 + lead） ---- */
.pricing-teaser .section-head.fancy{
position: relative;
display: grid;
justify-items: center;
gap: 8px;
margin-bottom: 26px;
isolation: isolate; /* 背面ゴーストのレイヤー管理 */
}
/* 背景の巨大アウトライン英字（例: PRICING） */
.pricing-teaser .section-head.fancy::before{
content: attr(data-ghost);
position: absolute; inset: 0;
margin: auto;
transform: translateY(6%);
font: 900 clamp(60px,16vw,180px)/1 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
letter-spacing: .08em;
color: transparent;
-webkit-text-stroke: 1px rgba(31,42,55,.20);
text-stroke: 1px rgba(31,42,55,.10);
opacity: .8;
pointer-events: none;
z-index: -1;
}
.pricing-teaser .section-title{
margin: 0;
font-size: clamp(22px, 2.2vw + 14px, 32px);
line-height: 1.3;
font-weight: 800;
letter-spacing: .02em;
text-align: center;
color: #1f2a37;
position: relative;
}
/* 見出し下のアクセントライン */
.pricing-teaser .section-title::after{
content: "";
position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
width: clamp(120px, 24vw, 260px); height: 1px; border-radius: 999px;
background: linear-gradient(90deg, #2EC7B6 0%, #8DE5DA 100%);
box-shadow: 0 10px 24px rgba(46,199,182,.30);
}
.pricing-teaser .section-lead{
margin: 8px 0 0;
text-align: center;
color: #475569;
font-size: 16px;
font-weight: 800;
line-height: 1.7;
max-width: 56ch;
}
/* ---- カード一覧 ---- */
.pricing-teaser .price-cards{
list-style: none; margin: 6px 0 14px; padding: 0; width: 100%;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.pricing-teaser .price-card{
background: #fff;
border: 1px solid #e7edf3;
border-radius: 14px;
padding: 18px;
box-shadow: 0 6px 18px rgba(0,0,0,.04);
text-align: center;
color: #1f2a37; /* 継承色の影響を遮断 */
}
.pricing-teaser .price-name{
margin: 0 0 6px; font-weight: 700; color: #1f2a37;
}
.pricing-teaser .price-val{
margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2;
color: #0f172a; font-variant-numeric: tabular-nums;
}
.pricing-teaser .price-note{
margin: 6px 0 0; font-size: 12px; color: #667085;
}
/* ---- 下部ボタン ---- */
.pricing-teaser .price-more{ margin-top: 18px; text-align: center; }
.pricing-teaser .btn-ghost{
display: inline-block; padding: 9px 14px;
border: 1px solid #cfd8e3; border-radius: 999px; text-decoration: none;
}
/* ---- レスポンシブ ---- */
@media (max-width: 1024px){
.pricing-teaser .price-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.pricing-teaser{ padding: 44px 16px; }
.pricing-teaser .section-head.fancy{ gap: 6px; margin-bottom: 22px; }
.pricing-teaser .section-head.fancy::before{
opacity: .36; -webkit-text-stroke: .8px rgba(31,42,55,.20); text-stroke: .8px rgba(31,42,55,.20);
font-size: clamp(48px, 20vw, 110px); transform: translateY(10%);
}
.pricing-teaser .section-lead{ font-size: 15px; padding: 0 8px; }
.pricing-teaser .price-cards{ grid-template-columns: 1fr; gap: 10px; }
.pricing-teaser .price-val{ font-size: 20px; }
}
/* 動きに敏感なユーザー配慮（将来アニメ付けても無効化） */
@media (prefers-reduced-motion: reduce){
.pricing-teaser .section-head.fancy,
.pricing-teaser .section-head.fancy::before,
.pricing-teaser .section-title::after{ animation: none !important; transition: none !important; }
}
/* =========================
PRICING ゴースト位置の微調整パッチ
- ほんの少し上へ＆少しだけ小さく
========================= */
.pricing-teaser .section-head.fancy::before{
top: 50%;
left: 50%;
transform: translate(-50%, -46%); /* ← 上に 4% 持ち上げる */
font-size: clamp(56px, 15vw, 170px); /* ← ほんの少し縮める */
}
/* モバイルはやや下げて視認性キープ */
@media (max-width: 640px){
.pricing-teaser .section-head.fancy::before{
transform: translate(-50%, -40%);
font-size: clamp(48px, 20vw, 110px);
}
}
/* ========== PRICING 背景テキストの位置を中央基準に固定 ========== */
.pricing-teaser .section-head.fancy::before{
/* 以前の inset:0; や margin:auto; を完全リセット */
inset: auto !important;
margin: 0 !important;
right: auto !important;
bottom: auto !important;
/* 中央基準で置く */
left: 50%;
top: 50%;
transform: translate(0%, -20%); /* 上方向へ 48% 分持ち上げる（好みで微調整） */
/* 大きさも少し調整（任意） */
font-size: clamp(56px, 15vw, 170px);
}
/* モバイル微調整（やや下げる） */
@media (max-width: 640px){
.pricing-teaser .section-head.fancy::before{
transform: translate(0%, -20%);
font-size: clamp(48px, 20vw, 110px);
}
}
@media (max-width: 640px){
.pricing-teaser{
--ghost-y: -12%;
--ghost-size: clamp(48px, 20vw, 110px);
}
}
/* =========================
共通：セクション見出し（Fancy）
- 「料金の目安」と同デザインを再利用
- data-ghost="WORKS" のように英字ゴースト文字を指定
========================= */
/* お好みで微調整できるトークン */
:root{
--section-title-color:#1f2a37;
--section-lead-color:#475569;
--section-accent-start:#2EC7B6;
--section-accent-end:#8DE5DA;
/* ゴースト文字の調整（必要ならセクション側で上書き） */
--ghost-stroke: rgba(31,42,55,.20);
--ghost-size: clamp(56px, 15vw, 170px);
--ghost-shift-y: -20%; /* 中央から上へ持ち上げる量（%） */
}
.section-head.fancy{
position: relative;
display: grid;
justify-items: center;
gap: 8px;
margin: 0 0 26px;
isolation: isolate;
}
/* 背景ゴースト文字 */
.section-head.fancy::before{
content: attr(data-ghost);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, var(--ghost-shift-y));
font: 900 clamp(60px,16vw,180px)/1 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
font-size: var(--ghost-size);
letter-spacing: .08em;
color: transparent;
-webkit-text-stroke: 1px var(--ghost-stroke);
text-stroke: 1px var(--ghost-stroke);
opacity: .8;
pointer-events: none;
z-index: -1;
}
.section-head .section-title{
margin: 0;
font-size: clamp(22px, 2.2vw + 14px, 32px);
line-height: 1.3;
font-weight: 800;
letter-spacing: .02em;
text-align: center;
color: var(--section-title-color);
position: relative;
}
/* 見出し下のアクセントライン */
.section-head .section-title::after{
content: "";
position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
width: clamp(120px, 24vw, 260px); height: 1px; border-radius: 999px;
background: linear-gradient(90deg, var(--section-accent-start) 0%, var(--section-accent-end) 100%);
box-shadow: 0 10px 24px rgba(46,199,182,.30);
}
.section-head .section-lead{
margin: 8px 0 0;
text-align: center;
color: var(--section-lead-color);
font-size: 16px;
font-weight: 800;
line-height: 1.7;
max-width: 56ch;
}
/* モバイル微調整 */
@media (max-width: 640px){
.section-head.fancy{ gap: 6px; margin-bottom: 22px; }
.section-head.fancy::before{
--ghost-size: clamp(48px, 20vw, 110px);
--ghost-shift-y: -20%;
-webkit-text-stroke: .8px var(--ghost-stroke);
text-stroke: .8px var(--ghost-stroke);
}
.section-head .section-lead{ font-size: 15px; padding: 0 8px; }
}
/* 動きに敏感なユーザー配慮（今後アニメ付けても無効化） */
@media (prefers-reduced-motion: reduce){
.section-head.fancy,
.section-head.fancy::before,
.section-head .section-title::after{
animation: none !important; transition: none !important;
}
}
/* デフォルト（控えめ）を少しだけ太さ薄めに */
.section-head.fancy{
--ghost-stroke: rgba(31,42,55,.16); /* 薄く */
--ghost-size: clamp(56px, 15vw, 170px); /* 既定 */
}
/* WORKS：でかく＆やや上に */
.works .section-head.fancy{
--ghost-size: min(46vw, 410px);
--ghost-shift-y: -40%;
--ghost-stroke: rgba(31,42,55,.14);
}
/* FLOW：さらに横幅を感じさせたい時はもっと大きく */
.flow-section .section-head.fancy{
--ghost-size: min(48vw, 440px);
--ghost-shift-y: -40%;
--ghost-stroke: rgba(31,42,55,.12);
}
/* “料金の目安（PRICING）”は現状キレイなので微調整だけするならこんな感じでもOK */
.pricing-teaser .section-head.fancy{
--ghost-size: min(86vw, 760px);
--ghost-shift-y: -18%;
}
/* モバイルはさらに控えめ＆位置少し上げ */
@media (max-width: 640px){
.works .section-head.fancy,
.flow-section .section-head.fancy{
--ghost-size: clamp(40px, 28vw, 220px);
--ghost-shift-y: -18%;
}
}
/* ===== PRICING を WORKS と同スケールに（強制上書き） ===== */
.pricing-teaser .section-head.fancy{
/* WORKSと同じくらいの“半分サイズ”に */
--ghost-size: min(48vw, 440px);
--ghost-shift-y: -16%;
--ghost-stroke: rgba(31,42,55,.14);
}
/* 以前のパッチより強い指定で中央寄せ＆サイズを固定 */
.pricing-teaser .section-head.fancy::before{
font-size: var(--ghost-size) !important;
transform: translate(0%, var(--ghost-shift-y)) !important;
}
/* モバイルは控えめ */
@media (max-width: 640px){
.pricing-teaser .section-head.fancy{
--ghost-size: clamp(40px, 28vw, 220px);
--ghost-shift-y: -18%;
}
}
/* 各プランの見出し（pricing-intro）のゴーストを上へ */
.pricing-intro .section-head.fancy{
--ghost-shift-y: -60%; /* 例：-20% → -26%（数値を大きくするほど上へ） */
}
/* 万一ほかの指定が勝っていた場合の強制上書き */
.pricing-intro .section-head.fancy::before{
transform: translate(-50%, var(--ghost-shift-y)) !important;
}
/* ==== アイコンの見た目 ==== */
.pricing-teaser .price-ico{
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
margin-bottom: 8px;
border-radius: 12px;
background: rgba(46,199,182,.10); /* ティント */
color: #2EC7B6; /* ブランド基調色 */
transition: transform .25s ease, background-color .25s ease;
}
.pricing-teaser .price-ico svg{
width: 26px; height: 26px; display: block;
}
/* ==== ホバー/フォーカス演出（浮遊 + 影 + 枠色） ==== */
@media (hover: hover){
.pricing-teaser .price-card:hover{
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(0,0,0,.10);
border-color: rgba(46,199,182,.45);
}
.pricing-teaser .price-card:hover .price-ico{
transform: translateY(-2px) scale(1.06);
background: rgba(46,199,182,.16);
}
}
/* すべての環境でスムーズに（キーボード操作にも反応） */
.pricing-teaser .price-card{
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pricing-teaser .price-card:focus-within,
.pricing-teaser .price-card:focus{
outline: none;
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(0,0,0,.12), 0 0 0 3px rgba(46,199,182,.18);
border-color: rgba(46,199,182,.6);
}
/* カードをキーボードフォーカス可能に（必要なら） */
.pricing-teaser .price-card{ position: relative; }
.pricing-teaser .price-card[tabindex="-1"]{ outline: none; } /* 使わない保険 */
/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce){
.pricing-teaser .price-card,
.pricing-teaser .price-ico{ transition: none !important; }
}
/* 既存の .btn-ghost を“テキストCTA”に上書き */
.pricing-teaser .btn-ghost{
border: 0; background: transparent; border-radius: 0;
color: #0f172a; font-weight: 800; letter-spacing: .02em;
text-decoration: none; padding: 4px 0;
position: relative; display: inline-block;
transform: translateX(0);
transition: transform .22s ease;
}
.pricing-teaser .btn-ghost::after{
content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
height: 2px; background: currentColor;
transform: scaleX(.2); transform-origin: left; opacity: .55;
transition: transform .22s ease, opacity .22s ease;
}
.pricing-teaser .btn-ghost::before{
content: "→"; margin-left: .5em; display: inline-block;
transform: translateX(0); opacity: .7; transition: transform .22s ease, opacity .22s ease;
}
@media (hover: hover){
.pricing-teaser .btn-ghost:hover{ transform: translateX(2px); }
.pricing-teaser .btn-ghost:hover::after{ transform: scaleX(1); opacity: .9; }
.pricing-teaser .btn-ghost:hover::before{ transform: translateX(4px); opacity: 1; }
}
.pricing-teaser .btn-ghost:focus-visible{
outline: none; box-shadow: 0 0 0 3px rgba(46,199,182,.25); border-radius: 6px;
}
.pricing-teaser .btn-ghost:focus-visible::after{ transform: scaleX(1); opacity: .95; }
.pricing-teaser .btn-ghost:focus-visible::before{ transform: translateX(4px); opacity: 1; }
@media (prefers-reduced-motion: reduce){
.pricing-teaser .btn-ghost,
.pricing-teaser .btn-ghost::after,
.pricing-teaser .btn-ghost::before{ transition: none !important; }
}
/* ▼ テキストCTAの微調整（重なり防止＋太い下線） */
.pricing-teaser .text-cta,
.pricing-teaser .btn-ghost{
position: relative;
padding: 4px 1.6em 4px 0; /* 右に矢印用スペースを確保（←これで重なり防止） */
}
/* 下線を太く＆少し離す */
.pricing-teaser .text-cta::after,
.pricing-teaser .btn-ghost::after{
bottom: -6px; /* テキストから少し離す */
height: 4px; /* ← 太くする（好みで 3〜5px） */
opacity: .7;
}
/* 矢印を“右端に固定配置”して少しだけスライド */
.pricing-teaser .text-cta::before,
.pricing-teaser .btn-ghost::before{
content: "→";
position: absolute;
right: 0; /* 右端に常に寄せる */
top: 50%;
transform: translateY(-50%) translateX(0);
transition: transform .22s ease, opacity .22s ease;
opacity: .75;
}
/* Hover / Focus で矢印だけ 2px 右に動く（被らない） */
@media (hover: hover){
.pricing-teaser .text-cta:hover::before,
.pricing-teaser .btn-ghost:hover::before{
transform: translateY(-50%) translateX(2px);
opacity: 1;
}
}
/* キーボード操作でも同様の見え方 */
.pricing-teaser .text-cta:focus-visible::before,
.pricing-teaser .btn-ghost:focus-visible::before{
transform: translateY(-50%) translateX(2px);
opacity: 1;
}
/* ====== 資料請求ページ専用オーバーライド（最後に置く） ====== */
.page-request .materials-visual{
background:#fff !important;
border:1px solid rgba(15,23,42,.12) !important;
border-radius:16px !important;
box-shadow:0 10px 28px rgba(0,0,0,.06) !important;
overflow:hidden;
}
.page-request .materials-visual img{
filter:none !important;
}
.page-request .materials-intro .trust-card{
background:#fff !important;
border:1px solid rgba(15,23,42,.10) !important;
border-radius:16px !important;
padding:16px 18px !important;
box-shadow:0 8px 22px rgba(0,0,0,.05) !important;
}
/* 展開時は 親もULも一切クリップしない（contain系も無効化） */
.section.works.is-expanded,
.section.works.is-expanded .works,
.section.works.is-expanded .works-grid{
overflow: visible !important;
max-height: none !important;
height: auto !important;
contain: none !important; /* content-visibility / contain の影響を無効化 */
}
/* 子は必ず表示されるように（相手が > :nth-child を使っていても上書き） */
.section.works.is-expanded .works-grid > :nth-child(n+4){
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
transform: none !important;
}
/* ========= Fancy animation for works toggle ========= */
/* ボタンの矢印を回転（あなたの .btn-ghost に合わせて微調整OK） */
.works-more .btn-ghost{
position: relative;
padding-right: 1.6em;
}
.works-more .btn-ghost::before{
content: "▾";
position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(0deg);
transition: transform .25s ease;
font-weight: 900; opacity: .8;
}
.section.works.is-expanded .works-more .btn-ghost::before{
transform: translateY(-50%) rotate(180deg);
}
/* 4件目以降：展開時はスライドイン＋フェード＋微スケール */
.section.works.is-expanded .works-grid > :nth-child(n+4){
animation: worksCardIn .32s cubic-bezier(.2,.6,.2,1) both;
}
/* 段階的ディレイ（8件まで想定：必要なら増やしてOK） */
.section.works.is-expanded .works-grid > :nth-child(4){ animation-delay: 0ms; }
.section.works.is-expanded .works-grid > :nth-child(5){ animation-delay: 40ms; }
.section.works.is-expanded .works-grid > :nth-child(6){ animation-delay: 80ms; }
.section.works.is-expanded .works-grid > :nth-child(7){ animation-delay: 120ms; }
.section.works.is-expanded .works-grid > :nth-child(8){ animation-delay: 160ms; }
.section.works.is-expanded .works-grid > :nth-child(9){ animation-delay: 200ms; }
.section.works.is-expanded .works-grid > :nth-child(10){ animation-delay: 240ms; }
.section.works.is-expanded .works-grid > :nth-child(11){ animation-delay: 280ms; }
.section.works.is-expanded .works-grid > :nth-child(12){ animation-delay: 320ms; }
/* 折りたたみのときはスライドアウト（JSが .is-collapsing を一瞬付与） */
.section.works.is-collapsing .works-grid > :nth-child(n+4){
animation: worksCardOut .22s ease both;
}
.section.works.is-collapsing .works-grid > :nth-child(4){ animation-delay: 120ms; }
.section.works.is-collapsing .works-grid > :nth-child(5){ animation-delay: 90ms; }
.section.works.is-collapsing .works-grid > :nth-child(6){ animation-delay: 60ms; }
.section.works.is-collapsing .works-grid > :nth-child(7){ animation-delay: 30ms; }
.section.works.is-collapsing .works-grid > :nth-child(8){ animation-delay: 0ms; }
/* Keyframes */
@keyframes worksCardIn{
from{ opacity: 0; transform: translateY(10px) scale(.985); }
to { opacity: 1; transform: none; }
}
@keyframes worksCardOut{
from{ opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(8px) scale(.985); }
}
/* 低モーション設定の人には静かに */
@media (prefers-reduced-motion: reduce){
.works-more .btn-ghost::before{ transition: none !important; }
.section.works.is-expanded .works-grid > :nth-child(n+4),
.section.works.is-collapsing .works-grid > :nth-child(n+4){ animation: none !important; }
}
/* ===== Works の “実績をもっと見る” ボタン ===== */
.works-more{
text-align: center; /* 中央寄せ */
margin-top: 16px;
}
.works-more .btn-ghost{
display: inline-block;
background: transparent;
border: 0;
padding: 6px 1.6em 6px 0; /* 右に矢印ぶんの余白 */
color: #0f172a;
font-weight: 800; /* 太め */
letter-spacing: .02em;
text-decoration: none;
position: relative;
transform: translateX(0);
transition: transform .22s ease;
}
/* 下線（太め）がホバーで伸びる */
.works-more .btn-ghost::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 4px; /* 太い下線 */
background: currentColor;
opacity: .6;
transform-origin: left;
transform: scaleX(.2);
transition: transform .22s ease, opacity .22s ease;
}
/* 右の矢印は常に右端に固定して少しだけスライド */
.works-more .btn-ghost::before{
content: "→";
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%) translateX(0);
opacity: .75;
transition: transform .22s ease, opacity .22s ease;
}
/* Hover（マウス環境） */
@media (hover:hover){
.works-more .btn-ghost:hover{ transform: translateX(2px); }
.works-more .btn-ghost:hover::after{ transform: scaleX(1); opacity: .95; }
.works-more .btn-ghost:hover::before{ transform: translateY(-50%) translateX(4px); opacity: 1; }
}
/* キーボードフォーカス時の見え方（アクセシビリティ） */
.works-more .btn-ghost:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(46,199,182,.25);
border-radius: 6px;
}
.works-more .btn-ghost:focus-visible::after{ transform: scaleX(1); opacity: .95; }
.works-more .btn-ghost:focus-visible::before{ transform: translateY(-50%) translateX(4px); opacity: 1; }
/* 1) ブラウザ既定の余白を殺す */
html, body { margin: 0 !important; }
/* 2) ヘッダー分の余白は「上だけ」にする（左右・下を0に強制） */
body{
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
/* 既に header-state.js 等で padding が一括指定されても、上以外を0で打ち消す */
}
/* ===== price-more のゴーストボタンを“ひと回り大きく” ===== */
.pricing-teaser .price-more{
text-align:center; /* 念のため中央寄せ */
margin-top: 18px;
}
.pricing-teaser .price-more .btn-ghost{
display: inline-block;
font-size: clamp(16px, 2.4vw, 24px); /* ← 文字サイズUP（PCで~24px） */
font-weight: 800;
letter-spacing: .02em;
padding: 10px 2.2em 10px 0; /* 右に矢印ぶんの余白を確保 */
line-height: 1.2;
border-radius: 8px; /* ヒットエリア感を少しだけ向上 */
}
/* 下線を太く・少し離す／横幅に合わせて伸びる */
.pricing-teaser .price-more .btn-ghost::after{
height: 4px; /* ← 太めの下線 */
bottom: -8px; /* テキストから距離をとる */
transform: scaleX(.4); /* 初期長め（存在感UP） */
}
/* 右端の矢印も少し大きく＆スライド幅微増 */
.pricing-teaser .price-more .btn-ghost::before{
right: 0;
font-size: 1.15em; /* ← 矢印を相対拡大 */
}
@media (hover:hover){
.pricing-teaser .price-more .btn-ghost:hover::before{
transform: translateY(-50%) translateX(4px); /* ← スライド幅を+2px */
}
}
/* モバイル：押しやすさ優先（サイズはやや抑える） */
@media (max-width: 640px){
.pricing-teaser .price-more .btn-ghost{
font-size: clamp(15px, 4.4vw, 18px);
padding: 10px 2em 10px 0;
border-radius: 6px;
}
.pricing-teaser .price-more .btn-ghost::after{
bottom: -6px; height: 3px; transform: scaleX(.35);
}
}
/* ===== price-more の下線アニメを復活（左→右に伸びる） ===== */
.pricing-teaser .price-more .btn-ghost::after{
transform-origin: left; /* ← これが肝 */
transform: scaleX(.4); /* 初期は短く */
opacity: .7;
transition: transform .22s ease, opacity .22s ease;
}
@media (hover:hover){
.pricing-teaser .price-more .btn-ghost:hover::after{
transform: scaleX(1); /* ← 伸びる */
opacity: .95;
}
}
/* キーボード操作でも同じ見え方に */
.pricing-teaser .price-more .btn-ghost:focus-visible::after{
transform: scaleX(1);
opacity: .95;
}
/* ===== ゴーストCTAの見た目を price / works で統一 ===== */
.pricing-teaser .price-more .btn-ghost,
.works-more .btn-ghost{
display:inline-block;
font-size: clamp(16px, 2.4vw, 24px);
font-weight: 800;
letter-spacing: .02em;
line-height: 1.2;
color:#0f172a;
text-decoration:none;
position:relative;
padding: 10px 2.2em 10px 0; /* 右端の矢印ぶんスペース */
border-radius: 8px;
transform: translateX(0);
transition: transform .22s ease;
}
/* 下線：左→右に伸びる */
.pricing-teaser .price-more .btn-ghost::after,
.works-more .btn-ghost::after{
content:"";
position:absolute; left:0; right:0; bottom:-8px;
height:4px; background: currentColor;
opacity:.7;
transform-origin:left;
transform: scaleX(.4);
transition: transform .22s ease, opacity .22s ease;
}
/* 右端の矢印：共通 */
.pricing-teaser .price-more .btn-ghost::before,
.works-more .btn-ghost::before{
content:"→";
position:absolute; right:0; top:50%;
transform: translateY(-50%) translateX(0);
opacity:.75;
font-size:1.15em;
transition: transform .22s ease, opacity .22s ease;
}
/* Hover / Focus で統一挙動 */
@media (hover:hover){
.pricing-teaser .price-more .btn-ghost:hover,
.works-more .btn-ghost:hover{ transform: translateX(2px); }
.pricing-teaser .price-more .btn-ghost:hover::after,
.works-more .btn-ghost:hover::after{ transform: scaleX(1); opacity:.95; }
.pricing-teaser .price-more .btn-ghost:hover::before,
.works-more .btn-ghost:hover::before{
transform: translateY(-50%) translateX(4px); opacity:1;
}
}
.pricing-teaser .price-more .btn-ghost:focus-visible,
.works-more .btn-ghost:focus-visible{
outline:none; box-shadow:0 0 0 3px rgba(46,199,182,.25);
}
.pricing-teaser .price-more .btn-ghost:focus-visible::after,
.works-more .btn-ghost:focus-visible::after{
transform: scaleX(1); opacity:.95;
}
.pricing-teaser .price-more .btn-ghost:focus-visible::before,
.works-more .btn-ghost:focus-visible::before{
transform: translateY(-50%) translateX(4px); opacity:1;
}
/* ===== works トグル用の見た目だけ上書き（任意） ===== */
/* 展開中は矢印を×にして「閉じる」っぽく見せる（JSで aria-expanded を付けている想定） */
.works-more .btn-ghost[aria-expanded="true"]::before{
content:"×";
transform: translateY(-50%); /* スライドはしない */
}