/* ==========================================================================
STAYLIA RESORT 共通スタイル（FontAwesome より後ろで読む必要があるもの）
2026-09-06: index.html 直書きから外出し。読み込み位置を変えると崩れる。
========================================================================== */
/* ===== FontAwesomeより後: 元 index.html の直書きブロック（id=無し） ===== */
/* =========================================
PCサイズでは非表示
========================================= */
.mobile-fixed-footer-wrapper,
.header-line-btn {
display: none;
}
/* =========================================
スマホサイズ（768px以下）でのみ表示
========================================= */
@media screen and (max-width: 768px) {
/* --- ヘッダー用 LINEボタン --- */
.header-line-btn {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #333333;
padding: 0 10px;
height: 36px;
text-decoration: none;
color: #333333;
font-size: 11px;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
background-color: #ffffff;
position: absolute;
right: 65px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.header-line-btn i {
color: #06C755;
font-size: 16px;
margin-right: 4px;
}
/* --- フッター固定コンテナ --- */
.mobile-fixed-footer-wrapper {
display: flex;
flex-direction: column;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
/* box-shadow はここに書かない */
z-index: 9999;
}
/* トップページ以外は常時シャドウあり */
body:not(.home):not(.front-page) .mobile-fixed-footer-wrapper {
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
/* --- 上段：リンクメニュー（対象4ページのみ表示） --- */
.mobile-fixed-footer-links {
display: flex;
justify-content: space-around;
align-items: center;
height: 45px;
border-bottom: 1px solid #f0f0f0;
}
.mobile-fixed-footer-links .footer-item {
text-decoration: none;
color: #333333;
font-size: 12px;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
flex: 1;
text-align: center;
line-height: 45px;
border-right: 1px solid #f0f0f0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.3s ease;
}
.mobile-fixed-footer-links .footer-item:last-child {
border-right: none;
}
.mobile-fixed-footer-links .footer-item:active {
background-color: #f5f5f5;
}
/* -----------------------------------------------
下段：2列ボタン（全ページ共通）
左：お問い合わせ ／ 右：お電話で相談する
----------------------------------------------- */
.mobile-fixed-footer-bottom {
display: flex;
height: 60px;
border-top: 1px solid #f0f0f0;
}
/* 左：お問い合わせ */
.mobile-fixed-footer-estimate {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #333333;
font-size: 13px;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
border-right: 1px solid #f0f0f0;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.3s ease;
gap: 5px;
}
.mobile-fixed-footer-estimate i {
color: #b8975a;
font-size: 18px;
}
.mobile-fixed-footer-estimate:active {
background-color: #f5f5f5;
}
/* 右：お電話で相談する */
.mobile-fixed-footer-line {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #333333;
font-size: 13px;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.3s ease;
gap: 5px;
}
.mobile-fixed-footer-line i {
color: #a07a4a;
font-size: 20px;
}
.mobile-fixed-footer-line:active {
background-color: #f5f5f5;
}
/* =========================================
元テーマとの被り調整
========================================= */
/* その他全ページ：下段のみ 60px */
body { padding-bottom: 60px !important; }
#return_top { bottom: 80px !important; }
/* 🔴2026-09-08 修正: 上のbottom:80px!importantが原因で「非表示」状態が壊れていた。
元CSSの非表示は #return_top{bottom:0; transform:translate3d(0,100%,0)} 前提＝
自分の高さぶん下にずらせば画面外に消える設計。bottom:80pxに上書きした結果、
50px(=100%)ずらしても画面下端から30px上に残ったまま＝スクロール0でもボタンが
常時本文に重なって見えていた（company.html等で実測・SP390）。
transform同士の綱引きをやめ、非表示はopacity/visibilityで確実に消す。
.activeの見た目(bottom:80pxの丸ボタン)は変更しない。 */
#return_top { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility .35s; }
#return_top.active { opacity: 1; visibility: visible; pointer-events: auto; }
/* =========================================
トップページ：固定フッターを300pxスクロールでフェードイン
========================================= */
body.home .mobile-fixed-footer-wrapper,
body.front-page .mobile-fixed-footer-wrapper {
opacity: 0;
pointer-events: none;
transform: translateY(10px);
box-shadow: none;
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}
body.home .mobile-fixed-footer-wrapper.is-visible,
body.front-page .mobile-fixed-footer-wrapper.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
}
/* ===== FontAwesomeより後: 元 index.html の直書きブロック（id=無し） ===== */
/* 元テンプレートはコピー防止で :root に user-select:none を掛けていたが、
電話番号・住所・サービス名までコピーできず実害があるため本文は選択可能に戻す。
UI部品（ナビ/ボタン/ヒーローの文字バラし）だけは誤選択防止のため none のまま残す。 */
:root {
-webkit-user-select: text;
-webkit-touch-callout: default;
-ms-user-select: text;
-moz-user-select: text;
user-select: text;
}
#header, #drawer_menu_wrap, .side_menu_button, .mobile-fixed-footer-wrapper,
#footer_sns, #return_top, #site_loader_overlay, #header_slider_content .catch {
-webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none;
}
/* ---- STAYLIA RESORT 追加セクション（NEWS / FLOW） ---- */
.sr_sec_sub { margin-top:26px; font-size:14px; line-height:33.6px; letter-spacing:.05em; color:#333; text-align:center; }
.sr_empty { max-width:1100px; margin:0 auto; padding:60px 25px 100px; text-align:center; color:#545454; font-size:15px; }
.sr_flow_wrap { max-width:900px; margin:0 auto; padding:50px 25px 110px; }
.sr_flow_lead { margin-bottom:50px; text-align:center; font-size:14px; line-height:33.6px; letter-spacing:.05em; color:#333; }
.sr_flow_list { list-style:none; margin:0; padding:0; }
.sr_flow_item { display:flex; gap:28px; padding:30px 0; border-top:1px solid #e4e4e4; }
.sr_flow_item:last-child { border-bottom:1px solid #e4e4e4; }
.sr_flow_num { flex:0 0 auto; width:56px; font-family:var(--log_font_family); font-size:30px; line-height:1; color:#909090; }
.sr_flow_body { flex:1 1 auto; }
.sr_flow_ttl { margin:0 0 10px; font-size:20px; line-height:32px; letter-spacing:.08em; font-weight:300; color:#0a0a0a; }
.sr_flow_desc { margin:0; font-size:14px; line-height:19.6px; color:#555; word-break:auto-phrase; text-wrap:pretty; }
@media screen and (max-width:767px) {
.sr_flow_wrap { padding:34px 20px 70px; }
.sr_flow_lead { margin-bottom:32px; font-size:14px; }
.sr_flow_item { gap:16px; padding:22px 0; }
.sr_flow_num { width:40px; font-size:23px; }
.sr_flow_ttl { font-size:17px; line-height:28px; }
.sr_flow_desc { font-size:14px; line-height:19.6px; }
.sr_empty { padding:40px 20px 70px; font-size:14px; }
}
.sr_nav_ja { display:block; margin-top:6px; font-size:11px; letter-spacing:.14em; opacity:.6; }
/* ---- PRICING ---- */
#cb_content_pricing { background:#f4efe9; }
.sr_price_wrap { max-width:820px; margin:0 auto; padding:50px 25px 110px; text-align:center; }
.sr_price_lead { font-size:16px; line-height:38.4px; letter-spacing:.05em; color:#333; }
.sr_price_rate { margin:14px 0 6px; line-height:1; font-family:var(--log_font_family); }
.sr_price_num { font-size:150px; letter-spacing:.02em; color:#222; }
.sr_price_pct { margin-left:6px; font-size:52px; color:#222; }
.sr_price_note { margin:0 0 44px; font-size:16px; line-height:38.4px; color:#000; }
.sr_price_desc { margin:0 auto 40px; max-width:640px; font-size:14px; line-height:19.6px; color:#555; text-align:left; }
@media screen and (max-width:767px) {
.sr_svc_wrap { padding:34px 20px 70px; }
.sr_price_wrap { padding:34px 20px 70px; }
.sr_price_num { font-size:96px; }
.sr_price_pct { font-size:36px; }
.sr_price_note { margin-bottom:32px; font-size:14px; }
.sr_price_desc { font-size:13.5px; }
}
/* ================= STAYLIA RESORT パレット（ターコイズ） =================
実測根拠: ロゴ site/images/logo_transparent.png の主要色
--sr-navy #0c3054 波（濃紺）
--sr-ink #182430 SRモノグラム
--sr-gold #b49060 アーチ/ヤシ
追加色（ロゴに無いため新規）:
--sr-blue #0e8fa8 ターコイズ（主アクセント）
--sr-blue-l #12a7c2 ホバー・明部
========================================================================= */
:root{
--sr-navy:#0c3054; --sr-ink:#182430; --sr-gold:#b49060;
--sr-blue:#0c7a90; --sr-blue-l:#0e8fa8; --sr-blue-pale:#eef7fa;
}
/* --- 右端の縦帯CTA（お問い合わせ）: 黒 → ターコイズ --- */
.side_menu_button .item2 { background:var(--sr-blue) !important; }
.side_menu_button .item2:hover { background:var(--sr-blue-l) !important; }
/* --- SP下部固定バー --- */
.mobile-fixed-footer-estimate { background:var(--sr-navy) !important; color:#fff !important; }
.mobile-fixed-footer-line { background:var(--sr-blue) !important; color:#fff !important; }
/* アイコンも文字と同色に（元テーマのゴールドは濃色背景で沈むため） */
.mobile-fixed-footer-estimate i, .mobile-fixed-footer-line i { color:#fff !important; }
.mobile-fixed-footer-estimate svg, .mobile-fixed-footer-line svg { color:#fff !important; }
.mobile-fixed-footer-estimate { border-right:1px solid rgba(255,255,255,.25) !important; }
/* --- 本文リンク --- */
:root{ --content_link_color:var(--sr-blue); --content_link_color_light:var(--sr-blue-l); }
/* --- MOREボタン（枠線タイプ）: 黒枠 → ネイビー枠＋ブルー塗り --- */
/* --- セクション見出しの日本語サブ: グレー → ネイビー、上に細いブルーの罫 --- */
.sr_sec_sub { position:relative; padding-top:10px; }
.sr_sec_sub:before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:28px; height:1px; background:var(--sr-blue); }
/* --- SERVICE / FLOW の通し番号: グレー → ブルー --- */
/* --- FLOW: 現在地が分かるようブルーの縦罫を足す --- */
.sr_flow_num { position:relative; }
/* --- PRICING: ベージュ地 → ごく淡いブルー地。数字をネイビーに --- */
#cb_content_pricing { background:var(--sr-blue-pale); }
/* --- ABOUT のリード見出し --- */
.about_lead { font-size:20px; line-height:32px; color:#0a0a0a; letter-spacing:.1em; margin-bottom:24px; }
/* --- BUSINESS カードの見出しにブルーの下線 --- */
@media screen and (max-width:767px){
.about_lead{ font-size:18px; line-height:28px; margin-bottom:20px; }
}
/* ヒーローのロゴタイプ（旧キャッチの1文字バラし構造を流用） */
.sr_hero_logotype { letter-spacing:.14em; font-size:52px; line-height:1.2; }
@media screen and (max-width:767px){ .sr_hero_logotype { font-size:31px; letter-spacing:.1em; } }
/* ---- SERVICE（指示書④・参考画像 IMG_0369 の形） ---- */
#cb_content_3 { background:#efe8dc; }
.sr_svc_wrap { max-width:980px; margin:0 auto; padding:46px 22px 100px; }
.sr_svc_card { background:transparent; padding:34px 0 30px; margin-bottom:0; border-top:1px solid #e4e4e4; }
.sr_svc_card:last-child { border-bottom:1px solid #e4e4e4; }
.sr_svc_group { margin:0 0 24px; font-size:20px; font-weight:300; color:#0a0a0a; line-height:32px;
letter-spacing:.08em; display:flex; align-items:baseline; gap:12px;
padding:0 0 12px; border-bottom:1px solid #ddd; }
.sr_svc_note { font-size:12px; letter-spacing:.04em; color:#8a8a8a; font-weight:400; }
.sr_svc_grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 30px; }
.sr_svc_grid li { display:flex; align-items:center; gap:14px; }
.sr_svc_ico { flex:0 0 auto; width:34px; height:34px; color:#8a8a8a; }
.sr_svc_ico svg { width:100%; height:100%; display:block; stroke-width:1; }
.sr_svc_label { font-size:14px; line-height:1.5; color:#555; }
.sr_svc_option { margin:34px 0 0; }
.sr_svc_option_tag { display:inline-block; padding:0 0 2px; color:var(--sr-navy);
border-bottom:1px solid var(--sr-navy); font-size:12px; letter-spacing:.12em; }
.sr_svc_option_grid { list-style:none; margin:18px 0 0; padding:0;
display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; }
.sr_svc_option_grid li { display:flex; align-items:center; gap:14px; }
.sr_svc_option_grid .sr_svc_ico { width:26px; height:26px; color:#a6a6a6; }
.sr_svc_option_grid .sr_svc_label { font-size:13px; color:#6b6b6b; }
.sr_svc_option_note { margin:12px 0 0; font-size:12px; color:#8a8a8a; }
@media screen and (max-width:767px){
/* SP: オプションもSERVICE本体と同じ共通幅271px・中央寄せにして左端を揃える。
揃えないとアイコン左端が SERVICE=60px / オプション=16px で44pxずれる（実測）。 */
.sr_svc_option { width:271px; max-width:100%; margin-inline:auto; }
.sr_svc_option_grid { grid-template-columns:1fr; gap:12px;
width:100%; margin-inline:0; }
.sr_svc_option_grid .sr_svc_ico { width:22px; height:22px; }
.sr_svc_option_grid .sr_svc_label { font-size:12.5px; }
}
@media screen and (max-width:767px){
.sr_svc_wrap { padding:30px 16px 66px; }
.sr_svc_card { padding:24px 0 22px; margin-bottom:0; }
.sr_svc_group { font-size:17px; margin-bottom:18px; flex-wrap:wrap; gap:4px 10px; }
/* SP: 1カラム。
fit-content にするとカードごとに一番長い項目で幅が決まり、
左端が 60/67/89/96px の4種類にバラつく（ユーザー指摘・実測済み）。
最長項目「予約サイト掲載・セットアップ代行」233px + アイコン28 + gap10 = 271px を
全カード共通の幅として固定し、4グループの左端を1点に揃える。 */
.sr_svc_grid { grid-template-columns:1fr; column-gap:0; row-gap:18px;
width:271px; max-width:100%; margin-inline:auto; }
.sr_svc_grid li { gap:10px; }
.sr_svc_ico { width:28px; height:28px; }
.sr_svc_ico svg { stroke-width:1.15; }
.sr_svc_label { font-size:14px; line-height:1.5; letter-spacing:.04em; }
}
.about_sub { margin:-10px 0 26px; font-size:14px; line-height:33.6px; letter-spacing:.05em; color:#727272; }
@media screen and (max-width:767px){ .about_sub { font-size:14px; margin:-6px 0 20px; } }
.sr_svc_label { text-wrap:pretty; line-break:strict; word-break:auto-phrase; }
/* ===== デザイナーパネル改修 rank4: 新規セクションの見出し規格を流用部分に揃える =====
実測: セクション上端→h2上端 が ABOUT240px/BUSINESS80px/FLOW80px に対し
SERVICE・PRICING・NEWS は 0px（cb_white_bg クラスを持たずテーマの80pxルールが当たらない）
さらに見出しクラスが .styled_h2(30px/42px) と .headline(28px/28px) で不統一だった */
body.home section#cb_content_3,
body.home section#cb_content_pricing,
body.home section#cb_content_4 { padding-top:80px !important; padding-bottom:80px !important; }
#cb_content_3 .headline, #cb_content_pricing .headline,
#cb_content_5 .headline, #cb_content_4 .headline { font-size:30px !important; line-height:42px; }
/* ===== rank5: PRICING CTA が .post_content 外でスコープを外し、白文字/白枠のまま
淡い水色地に載っていた（コントラスト比1.09:1＝実質不可視）。MOREボタンと同一マテリアルに ===== */
.sr_price_wrap a.q_custom_button1 { color:#0a0a0a !important; border-color:#0a0a0a !important;
min-width:280px; height:60px; }
.sr_price_wrap a.q_custom_button1:before { background-color:#898989 !important; left:-100%; }
.sr_price_wrap a.q_custom_button1:hover { color:#fff !important; border-color:#898989 !important; }
/* SERVICE末尾のMOREも同じ理由（.post_content の外で白文字のまま淡い地に沈む）。
PRICINGのMOREと同一の黒ボタンに揃える（2026-09-14 ユーザー指示） */
.sr_svc_wrap a.q_custom_button1 { color:#0a0a0a !important; border-color:#0a0a0a !important; }
.sr_svc_wrap a.q_custom_button1:before { background-color:#898989 !important; left:-100%; }
.sr_svc_wrap a.q_custom_button1:hover { color:#fff !important; border-color:#898989 !important; }
/* BUSINESS 4カード（index.html/business.html共通）の各MOREも同じ理由（.post_content の外で白文字のまま沈む）。
PRICING/SERVICEのMOREと同一の黒ボタンに揃える（2026-09-14 ユーザー指示） */
.plan-detail a.q_custom_button1 { color:#0a0a0a !important; border-color:#0a0a0a !important; }
.plan-detail a.q_custom_button1:before { background-color:#898989 !important; left:-100%; }
.plan-detail a.q_custom_button1:hover { color:#fff !important; border-color:#898989 !important; }
/* ===== rank12: 和文の分かち書き・禁則（熟語の泣き別れと孤立行の解消） ===== */
#cb_content_1 div[align="center"] p { word-break:auto-phrase; text-wrap:pretty; line-break:strict; }
@media screen and (max-width:767px){
#cb_content_1 div[align="center"] p { max-width:20em; margin-left:auto; margin-right:auto; }
}
/* ===== 写真挿入スロット（素材未着のため枠のみ・届いたら![]()
のコメントを外す） ===== */
.sr_ph { position:relative; width:100%; background:#e8e4dd; overflow:hidden; }
.sr_ph--16x9 { aspect-ratio:16/9; }
/* 横長ストリップ写真（service_main.jpg 1983x793）。16/9の枠に入れると
object-fit:cover で左右28.9%が切られ、パネルが途中で切れて見えるため
画像そのものの比率を枠に持たせる（2026-09-07） */
.sr_ph--strip { aspect-ratio:1983/793; }
.sr_ph img { width:100%; height:100%; object-fit:cover; display:block; }
.sr_ph__note { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:12px; letter-spacing:.08em; color:#a09a90; }
.sr_ph:has(img) .sr_ph__note { display:none; }
/* SERVICE / PRICING の見開き写真 */
.sr_sec_photo { max-width:980px; margin:0 auto 54px; }
#cb_content_pricing .sr_sec_photo { max-width:820px; margin:54px auto 0; }
/* FLOW: 各ステップの右にアイコン */
.sr_flow_item { align-items:flex-start; }
@media screen and (max-width:767px){
.sr_sec_photo { margin:0 auto 30px; }
#cb_content_pricing .sr_sec_photo { margin:32px auto 0; }
.sr_flow_item { flex-wrap:nowrap; }
.sr_ph__note { font-size:11px; }
}
/* ===== 採用案C: 料金台帳（PRICE LEDGER）／PRICINGの構造化 ===== */
/* ================================================================
PRICING 改善案：料金台帳（PRICE LEDGER）／方向＝情報の構造化
----------------------------------------------------------------
中央寄せの縦一列を「左＝数字の軸 / 右＝言葉の軸」の2カラムに組み替える。
20% と 01〜04 の番号が同一の左端に揃うことで、
「この20%にこの4つが含まれる」がレイアウトとして読める。
面・カード・影・2px以上の罫・有彩色の文字は一切追加しない。
使うのは 1px solid のヘアラインと配置のみ。
================================================================ */
/* ヘアライン2段（淡いブルー地の上で #909090 相当の中性グレーに見える濃度） */
#cb_content_pricing { --sr-rule:rgba(12,48,84,.16); --sr-rule-key:rgba(12,48,84,.30); }
/* ---------- 参考画像(カードボックス様式)どおり、縦積み・中央寄せ ---------- */
.sr_price_wrap { max-width:760px; margin:0 auto; padding:50px 25px 100px; text-align:center; }
.sr_price_lead {
margin:0 0 26px;
font-size:15px; line-height:1.7; letter-spacing:.16em; color:#0a0a0a;
}
/* ---------- 20%ボックス：参考画像の灰色カード＋中央の縦罫 ---------- */
.sr_price_box {
display:flex; align-items:center; justify-content:center; gap:34px;
margin:0 0 34px; padding:38px 44px;
background:#eef0f2; text-align:left;
}
.sr_price_rate { margin:0; padding:0; line-height:1; white-space:nowrap; }
.sr_price_note {
position:relative; margin:0; padding-left:34px;
font-size:15px; line-height:1.9; letter-spacing:.05em; color:#0a0a0a;
}
.sr_price_note::before {
content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:#c7cbd0;
}
.sr_price_desc {
margin:0 0 40px; max-width:560px; margin-left:auto; margin-right:auto;
font-size:13.5px; line-height:2.05; letter-spacing:.03em; color:#55636e; text-align:left;
}
/* ---------- 料金に含まれるサービス：見出し＋SERVICEと同じ2カラムアイコン一覧 ---------- */
.sr_price_included { margin:0 0 46px; }
.sr_price_included_ttl {
position:relative; margin:0 0 32px;
font-size:14px; letter-spacing:.14em; color:#0c3054;
}
.sr_price_included_ttl::before, .sr_price_included_ttl::after {
content:""; position:absolute; top:50%; width:60px; height:1px; background:var(--sr-rule-key,#ddd);
}
.sr_price_included_ttl::before { left:0; }
.sr_price_included_ttl::after { right:0; }
.sr_price_included_grid {
max-width:600px; margin:0 auto; text-align:left;
grid-template-columns:1fr 1fr; gap:22px 30px;
}
.sr_price_wrap .q_button_wrap { margin:0; text-align:center; }
#cb_content_pricing .sr_sec_photo { grid-column:1 / -1; grid-row:6; max-width:none; margin:54px 0 0; }
/* ================================================================
SP（max-width:767px）
================================================================ */
@media screen and (max-width:767px) {
.sr_price_wrap { padding:34px 20px 44px; }
.sr_price_lead { margin-bottom:20px; font-size:13.5px; letter-spacing:.14em; }
/* SPでも参考画像どおり「20% | 注記」の横並びを維持する。
縦積みにすると幅350pxの箱に中身が103〜142pxしか無く、右に200px以上空いて破綻する。 */
.sr_price_box {
justify-content:center; gap:18px;
padding:26px 16px; margin-bottom:26px;
}
.sr_price_num { font-size:76px; }
.sr_price_pct { font-size:30px; }
.sr_price_note { padding-left:18px; font-size:12.5px; line-height:1.85; letter-spacing:.02em; }
.sr_price_desc { margin-bottom:26px; font-size:13px; line-height:1.95; }
.sr_price_included { margin-bottom:30px; }
.sr_price_included_ttl { font-size:12.5px; margin-bottom:22px; }
.sr_price_included_ttl::before, .sr_price_included_ttl::after { width:30px; }
.sr_price_included_grid { grid-template-columns:1fr; gap:16px; }
#cb_content_pricing .sr_sec_photo { grid-row:6; margin:34px 0 0; }
}
/* 下部固定バーのアイコン。サイト内の他37個と同じ線画仕様に揃える
（FontAwesomeの塗りつぶしアイコンだけ描き方が違い浮いていた） */
.sr_bar_ico { display:inline-block; width:19px; height:19px; flex:0 0 auto; }
.sr_bar_ico svg { width:100%; height:100%; display:block; stroke-width:1.4; }
/* ---- FLOW: 写真枠をやめ、サイト共通の線画アイコンに揃える ---- */
.sr_flow_ico { flex:0 0 auto; width:64px; height:64px; margin-left:28px; color:#a6a6a6; }
.sr_flow_ico svg { width:100%; height:100%; display:block; stroke-width:1; }
@media screen and (max-width:767px){
/* SPは横幅が限られるためアイコンを小さくし、番号列も詰めて本文幅を確保する。
46px+16pxのままだと本文が216px幅で5行に折り返され窮屈になる（実測）。 */
.sr_flow_ico { width:34px; height:34px; margin:0 0 0 10px; }
.sr_flow_ico svg { stroke-width:1.15; }
.sr_flow_num { width:28px; }
.sr_flow_item { gap:10px; }
}
/* ==========================================================================
スクロールアニメーション
.sr-anim を付けた要素が画面に入ったら .is-in が付く（JSが制御）。
動きは up / fade / stagger の3種類だけに絞り、既存の .inview と語彙を揃える。
========================================================================== */
.sr-anim { opacity:0; transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); will-change:opacity, transform; }
.sr-anim[data-anim="scale"] { transform-origin:center; }
/* 🔴 2026-09-06 修正: 詳細度の取りこぼしで演出が「戻らない」不具合を直した。
旧: .sr-anim.is-in = クラス2つ → 詳細度(0,2,0)
.sr-anim[data-anim="up"] = クラス1+属性1 → 詳細度(0,2,0)
同点なので後に書かれた [data-anim="up"] が勝ち、is-in が付いても
transform が translate3d(0,28px,0) のまま固定されていた。
実測: トップページで104要素が開始位置のまま（up=28px下／right=14px下にズレ）。
属性セレクタを1つ足して(0,3,0)にし、確実に打ち消す。
※ [data-anim="img"].is-in も(0,3,0)だが後方にあるので従来通りそちらが勝つ。 */
.sr-anim.is-in,
.sr-anim[data-anim].is-in { opacity:1; transform:none; }
.sr-anim[data-anim="up"] { transform:translate3d(0,28px,0); }
.sr-anim[data-anim="fade"] { transform:none; }
/* 横移動は左余白の狭い要素が画面外にはみ出して切れるため使わない。
代わりに下から小さく持ち上げる（実測: rightだとleft=-2〜-8pxで見切れていた） */
.sr-anim[data-anim="right"] { transform:translate3d(0,14px,0); }
.sr-anim[data-anim="scale"] { transform:scale(.96); }
/* 画像は少し長めにゆっくり出す */
.sr-anim[data-anim="img"] { transform:scale(1.04); transition-duration:1.3s; }
.sr-anim[data-anim="img"].is-in { transform:scale(1); }
/* 動きを嫌う設定の端末では即表示 */
@media (prefers-reduced-motion: reduce) {
.sr-anim, .sr-anim[data-anim] { opacity:1 !important; transform:none !important; transition:none !important; }
}
/* ヒーロー動画の明るい場面でも白文字が読めるようにする。
実測: 8秒地点で文字が乗る中央エリアの輝度が218.5（ほぼ白）になり判読不能だった。
画面全体に暗幕を掛けると映像が濁るため、文字側に影だけを付けて解決する。 */
#header_slider_content .catch,
#header_slider_content .desc {
text-shadow: 0 1px 3px rgba(0,0,0,.42), 0 2px 14px rgba(0,0,0,.30);
}
body.switch_logo #header_logo a .logo_text {
text-shadow: 0 1px 3px rgba(0,0,0,.40), 0 2px 12px rgba(0,0,0,.26);
}
/* ==========================================================================
下層ページ（2026-09-06 追加）
トップの語彙だけで組む：新色ゼロ・新書体ゼロ。
使うのは既存の .cb_design_header / .sr_sec_sub / --headline_font_size のみ。
========================================================================== */
/* ヘッダーは position:sticky・高さ100px。トップはヒーローへ潜り込ませるため
body.home #container{margin-top:-100px} を当てているが、下層は潜り込ませない。
代わりにヘッダー直下から見出し帯までの余白をここで作る。 */
#sr_page_head {
padding: 90px 20px 0;
background: #fff;
position: relative;
z-index: 2;
}
#sr_page_head .cb_design_header {
margin-bottom: 0;
}
/* 下層の見出しはトップのセクション見出しより一段大きく置く（ページの主語なので） */
#sr_page_head .cb_design_header .headline {
font-size: calc(var(--headline_font_size) * 1.35);
letter-spacing: .08em;
}
/* パンくず。文字だけで、罫も面も足さない */
#sr_breadcrumb {
margin-top: 46px;
text-align: center;
}
#sr_breadcrumb ol {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0 10px;
font-size: 12px;
letter-spacing: .05em;
color: #333;
}
#sr_breadcrumb li + li::before {
content: "／";
margin-right: 10px;
color: #aaa;
}
#sr_breadcrumb a { color: #333; }
@media (hover: hover) {
#sr_breadcrumb a:hover { color: #000; }
}
#sr_breadcrumb [aria-current="page"] { color: #888; }
/* 見出し帯の直後の本文セクション。
.cb_white_bg は padding:150px 0 だが、見出し帯で既に間を取っているので詰める */
#sr_page_head + #content_builder > .cb_white_bg:first-child {
padding-top: 100px;
}
@media screen and (max-width: 1160px) {
#sr_page_head { padding-top: 70px; }
#sr_breadcrumb { margin-top: 36px; }
}
@media screen and (max-width: 800px) {
#sr_page_head { padding-top: 50px; }
#sr_page_head .cb_design_header .headline {
font-size: calc(var(--headline_font_size_sp) * 1.35);
}
#sr_breadcrumb { margin-top: 26px; }
#sr_page_head + #content_builder > .cb_white_bg:first-child {
padding-top: 60px;
}
}
/* --- 会社概要テーブル -------------------------------------------------
デザイナーパネル指摘（2026-09-04）の通り、白いカード面・有色罫・
ベタ塗りバッジは使わない。1pxヘアラインと余白だけで階層を作る。 */
.sr_cmp_table {
max-width: 760px;
margin: 0 auto;
border-top: 1px solid #e2ddd6;
}
.sr_cmp_row {
display: flex;
align-items: flex-start;
gap: 0 40px;
padding: 26px 4px;
border-bottom: 1px solid #e2ddd6;
}
.sr_cmp_row dt {
flex: 0 0 170px;
font-size: 14px;
line-height: 2;
letter-spacing: .08em;
color: #333;
}
.sr_cmp_row dd {
flex: 1 1 auto;
font-size: 15px;
line-height: 2;
color: #000;
}
.sr_cmp_row dd a { color: #000; text-decoration: underline; text-underline-offset: 4px; }
@media screen and (max-width: 800px) {
.sr_cmp_row {
display: block;
padding: 20px 2px;
}
.sr_cmp_row dt { font-size: 12px; margin-bottom: 6px; }
.sr_cmp_row dd { font-size: 14px; }
}
/* --- 下層ページ同士の行き来 ------------------------------------------- */
.sr_other_nav {
max-width: 760px;
margin: 0 auto;
border-top: 1px solid #e2ddd6;
}
.sr_other_nav li { border-bottom: 1px solid #e2ddd6; }
.sr_other_nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 4px;
font-size: 15px;
letter-spacing: .05em;
color: #000;
}
.sr_other_nav a::after {
content: "";
width: 26px;
height: 1px;
background: #000;
transition: width .25s;
}
@media (hover: hover) {
.sr_other_nav a:hover::after { width: 40px; }
}
@media screen and (max-width: 800px) {
.sr_other_nav a { padding: 18px 2px; font-size: 14px; }
}
/* ==========================================================================
お問い合わせフォーム（2026-09-06 追加）
既存の語彙のみ：1pxヘアライン／余白／游明朝の見出し／黒のボタン。
カード面・有色罫・ベタ塗りバッジは使わない（デザイナーパネル指摘に従う）。
========================================================================== */
.sr_form_lead {
max-width: 760px;
margin: 0 auto;
text-align: center;
font-size: 15px;
line-height: 2;
}
.sr_form_tel { margin: 40px auto 0; text-align: center; }
.sr_form_tel_num {
font-size: 32px;
letter-spacing: .06em;
color: #000;
font-family: var(--sr-font-type2);
}
.sr_form_tel a { color: #000; }
.sr_form {
max-width: 760px;
margin: 80px auto 0;
border-top: 1px solid #e2ddd6;
}
.sr_form_row {
display: flex;
align-items: flex-start;
gap: 0 40px;
padding: 24px 4px;
border-bottom: 1px solid #e2ddd6;
}
.sr_form_label {
flex: 0 0 200px;
padding-top: 12px;
font-size: 14px;
line-height: 1.8;
letter-spacing: .06em;
color: #333;
}
.sr_req {
display: inline-block;
margin-left: 10px;
font-size: 11px;
letter-spacing: .08em;
color: #8a3b1e;
}
.sr_form_input { flex: 1 1 auto; min-width: 0; }
.sr_form_input input[type="text"],
.sr_form_input input[type="tel"],
.sr_form_input input[type="email"],
.sr_form_input textarea,
.sr_form_input select {
width: 100%;
padding: 12px 14px;
border: 1px solid #d8d2ca;
border-radius: 2px;
background: #fff;
font-size: 15px;
line-height: 1.8;
font-family: inherit;
color: #000;
}
.sr_form_input textarea { resize: vertical; }
.sr_form_input input::placeholder,
.sr_form_input textarea::placeholder { color: #b3aca3; }
.sr_form_input input:focus,
.sr_form_input textarea:focus,
.sr_form_input select:focus {
outline: none;
border-color: #000;
}
/* セレクトの矢印は画像を足さず、擬似要素の三角だけで作る */
.sr_select_wrap { position: relative; }
.sr_select_wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.sr_select_wrap::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 7px;
height: 7px;
margin-top: -5px;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
transform: rotate(45deg);
pointer-events: none;
}
/* ハニーポット。表示せず、読み上げ・タブ移動からも外す */
.sr_hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.sr_form_agree { margin-top: 36px; text-align: center; }
.sr_form_agree label {
display: inline-flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.9;
text-align: left;
cursor: pointer;
}
.sr_form_agree input { margin-top: 5px; flex: 0 0 auto; }
.sr_form_submit { margin-top: 40px; text-align: center; }
.sr_form_btn {
min-width: 280px;
padding: 20px 40px;
border: none;
border-radius: 40px;
background: #545454;
color: #fff;
font-size: 15px;
letter-spacing: .12em;
font-family: inherit;
cursor: pointer;
transition: background .25s;
}
@media (hover: hover) {
.sr_form_btn:hover { background: #333; }
}
/* 入力エラーは色だけに頼らず、文言も出す */
.sr_form_input .sr_form_err {
display: block;
margin-top: 8px;
font-size: 12px;
color: #8a3b1e;
}
.sr_form_input input[aria-invalid="true"],
.sr_form_input textarea[aria-invalid="true"],
.sr_form_input select[aria-invalid="true"] { border-color: #8a3b1e; }
@media screen and (max-width: 800px) {
.sr_form { margin-top: 50px; }
.sr_form_row { display: block; padding: 18px 2px; }
.sr_form_label { padding-top: 0; margin-bottom: 8px; font-size: 13px; }
.sr_form_tel_num { font-size: 26px; }
.sr_form_lead { font-size: 14px; }
.sr_form_btn { min-width: 0; width: 100%; padding: 18px 20px; }
}
/* --- FAQ（2026-09-06 追加）--------------------------------------------
開閉は / のみでJSなし。既存語彙どおり罫線と余白だけ。 */
.sr_faq_list {
max-width: 860px;
margin: 0 auto;
border-top: 1px solid #e2ddd6;
}
.sr_faq_item { border-bottom: 1px solid #e2ddd6; }
.sr_faq_q {
display: flex;
align-items: flex-start;
gap: 0 18px;
padding: 26px 44px 26px 4px;
position: relative;
cursor: pointer;
list-style: none;
font-size: 16px;
line-height: 1.9;
letter-spacing: .04em;
color: #000;
}
.sr_faq_q::-webkit-details-marker { display: none; }
/* 開閉マークは＋／−を線2本で描く（アイコン画像を足さない） */
.sr_faq_q::before,
.sr_faq_q::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
width: 15px;
height: 1px;
background: #333;
transition: transform .25s;
}
.sr_faq_q::after { transform: rotate(90deg); }
.sr_faq_item[open] .sr_faq_q::after { transform: rotate(0deg); }
.sr_faq_mark {
flex: 0 0 auto;
width: 22px;
font-family: var(--sr-font-type2);
font-size: 17px;
line-height: 1.8;
color: #8a6a4a;
}
.sr_faq_qt { flex: 1 1 auto; }
.sr_faq_a {
display: flex;
align-items: flex-start;
gap: 0 18px;
padding: 0 44px 30px 4px;
}
.sr_faq_a p {
flex: 1 1 auto;
margin: 0;
font-size: 15px;
line-height: 2;
color: #333;
}
@media (hover: hover) {
.sr_faq_q:hover { color: #545454; }
}
@media screen and (max-width: 800px) {
.sr_faq_q { padding: 20px 34px 20px 2px; font-size: 15px; gap: 0 12px; }
.sr_faq_a { padding: 0 34px 24px 2px; gap: 0 12px; }
.sr_faq_a p { font-size: 14px; }
.sr_faq_mark { width: 18px; font-size: 15px; }
}
/* FAQ一覧の最終行の罫線に、直後のボタンが接してしまうので間を取る */
#cb_faq .q_button_wrap { margin-top: 70px; }
@media screen and (max-width: 800px) {
#cb_faq .q_button_wrap { margin-top: 46px; }
}
/* ---- 指示書 _____.pdf の本文用（2026-09-07） ---- */
.sr_cmp_pledge{ list-style:none; margin:34px auto; padding:0; }
.sr_cmp_pledge li{ font-size:18px; line-height:2.2; letter-spacing:.04em; }
.sr_form_head{ font-size:24px; line-height:1.8; letter-spacing:.04em; margin:0 0 18px; }
@media screen and (max-width:767px){
.sr_cmp_pledge li{ font-size:15px; line-height:2.1; }
.sr_cmp_pledge{ margin:24px auto; }
.sr_form_head{ font-size:19px; margin-bottom:14px; }
}
/* ---- OUR STRENGTHS（2026-09-07 / FLOW の体裁を流用） ---- */
.sr_str_en{ display:block; font-size:15px; letter-spacing:.12em; margin-bottom:6px; opacity:.65; }
.sr_flow_wrap .sr_str_close{ margin:48px auto 0; max-width:820px; font-size:15px; line-height:2; text-align:left; }
@media screen and (max-width:767px){
.sr_str_en{ font-size:13px; letter-spacing:.08em; }
.sr_flow_wrap .sr_str_close{ margin-top:32px; font-size:14px; line-height:1.95; }
}
/* ---- 4項目それぞれに写真を1枚（2026-09-10 ユーザー指示）。既存の .sr_ph 写真枠(4.5節)を4:3で流用 ---- */
.sr_ph--4x3{ aspect-ratio:4/3; }
.sr_str_ph{ width:220px; flex-shrink:0; }
@media screen and (max-width:767px){
.sr_str_item{ flex-wrap:wrap; }
.sr_str_ph{ width:100%; margin-top:18px; }
}
/* ---- OUR STRENGTHS: SPのみ横スワイプカードに変更（2026-09-16 ユーザー指示）
.sr_flow_* は FLOW ページ(flow.html)と共用のため、ここでは必ず .sr_str_wrap 配下に
スコープしたセレクタだけで上書きする（.sr_flow_item 等を裸で触らない＝FLOW側は無改修）。
🔴同じ .sr_str_wrap/.sr_str_list/.sr_str_item 一式は index.html にも「強みプレビュー」として
埋め込まれている。祖先の余白構成が違うため打消しマージンをページごとに分ける必要がある：
strengths.html は .post_content(左右40px)+.sr_flow_wrap(左右20px)=60pxの打消しが必要、
index.html は .post_content が無く .sr_flow_wrap(左右20px)のみ=20pxの打消しでよい
（実測: index.htmlの.sr_flow_wrapはborder-box左端がviewport左端と一致=0px、
その内側padding-leftが20pxなので打消しは-20pxが正）。
2026-09-17 ユーザー指示で index.html（body.home）側にも同じ横スワイプを適用。
PC(768px以上)は無変更。既存の写真・テキスト・JS・class構成はそのまま流用。 */
@media screen and (max-width:767px){
/* 祖先の余白を打ち消し、リストだけ画面幅いっぱいに広げてから、
リスト自身の padding で「次カードが少し見える」余白を作る */
body.sub_page .sr_str_wrap .sr_str_list,
body.home .sr_str_wrap .sr_str_list{
display:flex;
flex-wrap:nowrap;
padding:2px 22px 6px;
gap:14px;
overflow-x:auto;
overflow-y:hidden;
scroll-padding-left:22px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
}
/* 2026-09-17 ユーザー指示「ずっとゆっくり流れる感じ」で常時オートスクロール(JS)に変更。
scroll-snap-type は既定では付けず、手動スワイプ中(.is-manual-swipeをJSが付与)だけ
カード単位のスナップを効かせる。常時mandatoryのままJSでscrollLeftを毎フレーム
動かすと、ブラウザによってはスナップがオート送りの位置を巻き戻すため分離した。 */
body.sub_page .sr_str_wrap .sr_str_list.is-manual-swipe,
body.home .sr_str_wrap .sr_str_list.is-manual-swipe{
scroll-snap-type:x mandatory;
}
body.sub_page .sr_str_wrap .sr_str_list{ margin:0 -60px; }
body.home .sr_str_wrap .sr_str_list{ margin:0 -20px; }
body.sub_page .sr_str_wrap .sr_str_list::-webkit-scrollbar,
body.home .sr_str_wrap .sr_str_list::-webkit-scrollbar{ display:none; }
body.sub_page .sr_str_wrap .sr_str_item,
body.home .sr_str_wrap .sr_str_item{
flex:0 0 86vw;
width:86vw;
max-width:86vw;
flex-wrap:nowrap;
flex-direction:column;
align-items:stretch;
scroll-snap-align:start;
gap:0;
margin:0;
padding:0;
border:none;
border-radius:14px;
background:#f4efe9;
overflow:hidden;
}
body.sub_page .sr_str_wrap .sr_str_item:last-child,
body.home .sr_str_wrap .sr_str_item:last-child{ border-bottom:none; }
body.sub_page .sr_str_wrap .sr_str_ph,
body.home .sr_str_wrap .sr_str_ph{
order:-1;
width:100%;
max-width:none;
flex-shrink:0;
margin:0;
}
body.sub_page .sr_str_wrap .sr_str_item .sr_flow_num,
body.home .sr_str_wrap .sr_str_item .sr_flow_num{
width:auto;
padding:16px 18px 0;
}
body.sub_page .sr_str_wrap .sr_str_item .sr_flow_body,
body.home .sr_str_wrap .sr_str_item .sr_flow_body{
padding:4px 18px 20px;
}
body.sub_page .sr_str_wrap .sr_str_item .sr_flow_ttl,
body.home .sr_str_wrap .sr_str_item .sr_flow_ttl{ margin:0 0 8px; }
}
/* JSが「ずっとゆっくり流れる」ループ用に先頭カードの複製(aria-hidden="true")を末尾へ追加する。
SP専用の演出のためPC(768px以上)では非表示にする（複製が普通の縦積み行として
5枚目に見えてしまう不具合を防止）。 */
@media screen and (min-width:768px){
.sr_str_wrap .sr_str_item[aria-hidden="true"]{ display:none; }
}
/* ---- ドロワーメニューが下部固定バーに隠れる問題の修正（2026-09-07） ----
ナビ9項目でSP390の最終項目(CONTACT)が固定バー(高さ60px)と画面外に隠れていた。
バーぶんの下余白を足し、内容が容器より高いときに中央寄せで端が切れないようにする。 */
@media screen and (max-width:767px){
#drawer_menu_wrap{
align-items: safe center;
padding-bottom: calc(70px + 60px + env(safe-area-inset-bottom, 0px));
}
/* 9項目がバーの上にスクロールせず収まるよう項目高を詰める（80px→70px）。
タップ領域は70pxあり、iOSの推奨44pxを十分に上回る。
SP390: 上余白70 + 9×71 = 709 < バー上端784 */
#drawer_menu > ul > li > a{ height:70px; }
/* メニューを開いている間は下部固定バーを出さない。
画面の低い端末(SP402短=663px等)でバーがメニュー項目の上に重なるため。
メニュー自体に CONTACT があるので導線は失われない。 */
html.open_menu .mobile-fixed-footer-wrapper{ display:none !important; }
}
/* 閉じているドロワーは opacity:0 / pointer-events:none だが visibility は visible のままで、
キーボードのタブ移動で「見えないメニュー」に入れてしまう状態だった。
visibility を落として、閉じている間は支援技術・タブ順からも外す。 */
#drawer_menu_wrap{ visibility:hidden; transition: opacity .25s, visibility .25s; }
html.open_menu #drawer_menu_wrap{ visibility:visible; }
/* ---- ヒーロー B案（2026-09-07 ユーザー選択）----
指示書 _____.pdf の「左上屋号／TOPはキャッチ＋サブ」をそのまま実装したもの。
巨大ロゴタイプ(.sr_hero_logotype)は使わなくなった。 */
#header_slider_content .sr_hero_catchcopy{
letter-spacing:.06em; font-size:38px; line-height:1.7; font-weight:600;
}
@media screen and (max-width:767px){
/* SP390で右端に当たっていたので字送りを詰めて内側に収める */
#header_slider_content .sr_hero_catchcopy{
font-size:19px; line-height:1.9; letter-spacing:.01em; padding-right:8px;
}
}
/* キャッチは節の途中で折り返さない（「オーナーと宿をつ／なぐ。」を防ぐ）。
実機フォントの字幅差で折り返し位置がずれる事故も併せて防ぐ。 */
.sr_hero_catchcopy .sr_nb{ display:inline-block; }
/* ===== ローディングの一筆書き（STAYLIA RESORT）2026-09-07 =====
生成元: _assets_src/loader_sign/ (Great Vibes / SIL OFL 1.1 のアウトラインを
静的パス化したもの。フォントファイルは配信しない)
.sr_sign_pen は「ペンの軌跡」で、mask の中だけに存在する。これを伸ばすと
下の塗り(.sr_sign_ink)が書き順どおりに現れる。 */
#loader_logo_image .sr_sign { display:block; width:480px; height:auto; margin:0 auto; }
.sr_sign_ink { fill:var(--sr-navy,#0c3054); }
.sr_sign_pen { fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round;
/* dasharray/dashoffset は各パスの実長を属性で直書きしてある（stage50） */ }
#site_loader_overlay.start_loading .sr_sign_pen {
animation:sr_sign_draw var(--d,1s) linear var(--b,0s) forwards; }
@keyframes sr_sign_draw { to { stroke-dashoffset:0; } }
@media screen and (max-width:800px) {
#loader_logo_image .sr_sign { width:290px; }
}
@media (prefers-reduced-motion:reduce) {
.sr_sign_pen { stroke-dashoffset:0; animation:none; }
}
/* ===== 2026-09-07 手書き指示(2): 20% の上に「月額売上の」 ===== */
.sr_price_of { display:block; margin:0 0 6px; font-size:15px; line-height:1.6;
letter-spacing:.12em; color:#0a0a0a; }
@media screen and (max-width:767px) {
.sr_price_of { margin-bottom:4px; font-size:12.5px; letter-spacing:.08em; }
}