/* ============================================================
旧サイトコンテンツの新テーマ調和オーバーレイ (refs #430 PoC)
— WP構成・コンテンツは不変。旧チロームを新シェルへ差し替え、
暗色基調を「寄り添う」ライトテーマへ揃える。
============================================================ */
/* ---- 旧チロームの非表示(新シェルで置換済み) ---- */
body.rn-legacy .header_nav_common,
body.rn-legacy #header_nav_common,
body.rn-legacy #menu_pc_trigger,
body.rn-legacy #menu_sp_trigger,
body.rn-legacy .video-backgroundWrap,
body.rn-legacy #video-background,
body.rn-legacy #video-overlay,
body.rn-legacy .footer_sns,
body.rn-legacy .footer_pagetop,
body.rn-legacy .guideNav,
body.rn-legacy #footer_nav_pc,
body.rn-legacy .sp_banner,
body.rn-legacy #footer_nav_sp { display: none !important; }
/* ---- 地: 暗色写真背景を生成りに ---- */
body.rn-legacy {
background: var(--paper) !important;
background-image: none !important;
color: var(--ink);
font-family: var(--font-body);
padding-top: var(--nav-h);
letter-spacing: .04em;
}
body.rn-legacy #PAGEWIDE,
body.rn-legacy .bg,
body.rn-legacy .wrapper,
body.rn-legacy main {
background: transparent !important;
background-image: none !important;
}
/* ---- 文字: 白文字前提の旧スタイルを墨へ(素の要素は広く、装飾は例外) ---- */
body.rn-legacy h1, body.rn-legacy h2, body.rn-legacy h3,
body.rn-legacy h4, body.rn-legacy h5,
body.rn-legacy p, body.rn-legacy li, body.rn-legacy dt, body.rn-legacy dd,
body.rn-legacy th, body.rn-legacy td, body.rn-legacy span, body.rn-legacy a,
body.rn-legacy figcaption, body.rn-legacy label {
color: var(--ink);
}
/* 共通ヘッダは紫地に白文字のため、上の墨色指定から除外する refs #617 */
body.rn-legacy .rn-nav,
body.rn-legacy .rn-nav a,
body.rn-legacy .rn-nav span,
body.rn-legacy .rn-nav p,
body.rn-legacy .rn-nav strong,
body.rn-legacy .rn-nav em { color: #fff; }
body.rn-legacy h1, body.rn-legacy h2, body.rn-legacy h3 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: .08em;
}
/* 例外: 紫地・暗地のボタン/帯の上は白のまま
（チャット申込 .chat-app-wrapper 内は白地ボタンが多く styles.css が配色を持つため
対象外にする。090等の白地アシストボタンが白×白で不可視だった refs #729） */
body.rn-legacy [class*="btn"]:not(.item-tabs__btn, .chat-app-wrapper *), body.rn-legacy [class*="btn"]:not(.item-tabs__btn, .chat-app-wrapper *) *,
body.rn-legacy [class*="button"]:not(.chat-app-wrapper *), body.rn-legacy [class*="button"]:not(.chat-app-wrapper *) *,
body.rn-legacy .movie, body.rn-legacy .movie *,
body.rn-legacy .rn-closing .rn-cta,
body.rn-legacy .rn-fab { color: #fff; }
/* #612ライト化: ナビ/フッタは白地になったため白文字強制を解除し、renewal.css の配色に委ねる */
body.rn-legacy .rn-logo-eyebrow { color: var(--grey) !important; }
/* refs #656: 締めCTA帯はトープ地(renewal.css)のため灰・墨上書きを撤去し白文字に戻す
（#612ライト化時の名残がトープ地×灰文字(1.6:1)の判読不能を生んでいた） */
/* リンクのアクセント(本文内テキストリンク) */
body.rn-legacy main a:not([class]), body.rn-legacy article a:not([class]) {
color: var(--murasaki);
text-underline-offset: 3px;
}
/* ---- パンくず・小要素の調整 ---- */
body.rn-legacy .breadcrumb, body.rn-legacy .breadcrumb a { color: var(--grey); }
/* ---- 画像の角丸で新テーマと呼応(コンテンツ画像のみ・アイコン除外) ---- */
body.rn-legacy main img:not([class*="icon"]):not([width="1"]) { border-radius: 8px; }
/* ---- テーブルの調和 ---- */
body.rn-legacy table { background: #fff; }
body.rn-legacy th { background: var(--lavender) !important; color: var(--ink) !important; }
body.rn-legacy td { border-color: var(--line) !important; }
/* ---- コンテンツ余白(旧ヘッダ分の隙間詰め) ---- */
body.rn-legacy #PAGEWIDE > .container:first-child { padding-top: 20px; }
/* フレームワーク側の旧チローム */
body.rn-legacy .footer_nav { display: none !important; }
/* 旧テーマの body::before 固定背景写真(セクション別)を中和 */
body.rn-legacy::before, body.rn-legacy::after {
background-image: none !important;
background-color: transparent !important;
content: none !important;
}
/* ============================================================
マイページ配下(一覧・詳細・カルテ)の新テーマ化オーバーレイ
対象: ordered / history / wardrobe / registration 等の共通パターン
============================================================ */
/* 旧タブナビをピル型に */
body.rn-legacy #mypage_nav { display: block; background: transparent; padding: 26px 0 0; }
body.rn-legacy #mypage_nav .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
body.rn-legacy #mypage_nav ul { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; }
body.rn-legacy #mypage_nav li { margin: 0; }
body.rn-legacy #mypage_nav li a {
display: inline-block; padding: 9px 20px;
font-family: var(--font-body); font-size: 13px; letter-spacing: .06em;
background: #fff; color: var(--murasaki) !important;
border: 1px solid var(--fuji-2); border-radius: 999px;
transition: background .25s, border-color .25s;
}
body.rn-legacy #mypage_nav li a:hover,
body.rn-legacy #mypage_nav li.active a { background: var(--lavender); border-color: var(--fuji); }
body.rn-legacy #mypage_nav img { display: none; }
/* 見出し: 旧アイコンを外し明朝へ
つなぐ（body.sns_top / .sns_community）は現行サイトの見出し（中央揃え＋下の黒線）のままにする refs #920 */
body.rn-legacy .mainContents { max-width: 1160px; margin: 0 auto; padding: 30px 24px 70px; }
body.rn-legacy:not(.sns_top):not(.sns_community) .mainContents h2 {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(24px, 3vw, 30px); letter-spacing: .1em; color: var(--ink);
border: 0; background: transparent; padding: 14px 0 6px;
}
body.rn-legacy .mainContents h2 img { display: none; }
body.rn-legacy:not(.sns_top):not(.sns_community) .mainContents h2::before {
content: ""; display: block; width: 34px; height: 2px; border-radius: 2px;
background: var(--kin); margin-bottom: 12px;
}
/* 検索ボックスをカードに */
body.rn-legacy .mainContents form,
body.rn-legacy .searchBox {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 22px 24px; margin: 18px 0 26px;
box-shadow: 0 5px 16px rgba(59,51,64,.05);
}
body.rn-legacy .mainContents select,
body.rn-legacy .mainContents input[type="text"] {
border: 1px solid var(--fuji-2); border-radius: 10px;
padding: 8px 12px; background: #fff; color: var(--ink);
font-family: var(--font-body);
}
body.rn-legacy .mainContents input[type="submit"],
body.rn-legacy .mainContents button {
font-family: var(--font-body); font-weight: 700;
background: var(--murasaki); color: #fff !important;
border: 0; border-radius: 999px; padding: 10px 28px; cursor: pointer;
transition: background .25s;
}
body.rn-legacy .mainContents input[type="submit"]:hover { background: #7d49ad; }
/* 一覧テーブルをカード型に */
body.rn-legacy .historyTable {
width: 100%; background: #fff;
border: 1px solid var(--line); border-radius: var(--radius);
border-collapse: separate; border-spacing: 0; overflow: hidden;
box-shadow: 0 6px 18px rgba(59,51,64,.06);
}
body.rn-legacy .historyTable th {
background: var(--lavender) !important;
font-family: var(--font-body); font-size: 12.5px; letter-spacing: .1em;
color: var(--ink) !important; border: 0 !important; padding: 13px 14px;
}
body.rn-legacy .historyTable td {
border: 0 !important; border-top: 1px solid var(--line) !important;
padding: 14px; font-size: 13.5px; background: #fff;
}
body.rn-legacy .historyTable tr:hover td { background: #faf7fd; }
body.rn-legacy .historyTable a { color: var(--murasaki) !important; text-decoration: underline; text-underline-offset: 3px; }
/* ページング */
body.rn-legacy .mainContents .pagination a,
body.rn-legacy .mainContents .pageng a,
body.rn-legacy .mainContents [class*="paging"] a {
display: inline-block; min-width: 34px; text-align: center;
padding: 6px 10px; margin: 0 3px;
background: #fff; border: 1px solid var(--fuji-2); border-radius: 10px;
color: var(--murasaki) !important;
}
/* マイページ配下: 高詳細度の旧ルールへの対抗 */
body#mypage.rn-legacy .mypageMain .footer_sns { display: none !important; }
body.rn-legacy #mypage_nav li a::before,
body.rn-legacy #mypage_nav li a::after,
body.rn-legacy #mypage_nav li::before,
body.rn-legacy #mypage_nav li::after { content: none !important; }
body#mypage.rn-legacy .bg.mypageMain,
body.rn-legacy .historyArea,
body.rn-legacy .karteWrap,
body.rn-legacy .tab_contents { background: transparent !important; }
/* タブメニューをピルに */
body.rn-legacy .tab_menu { display: flex; gap: 10px; list-style: none; border: 0; margin: 26px 0 14px; }
body.rn-legacy .tab_menu li {
background: #fff !important; color: var(--grey) !important;
border: 1px solid var(--line) !important; border-radius: 999px !important;
padding: 9px 22px !important; cursor: pointer;
font-family: var(--font-body); font-size: 13px;
transition: border-color .25s, color .25s, background .25s;
}
body.rn-legacy .tab_menu li.active {
background: var(--lavender) !important; color: var(--murasaki) !important;
border-color: var(--fuji) !important;
}
body.rn-legacy .tab_menu li * { color: inherit !important; }
/* ============================================================
マイページタブ v2: 水彩アイコン付きカードタブ
============================================================ */
body.rn-legacy #mypage_nav ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* 旧CSSの li{width:50%}(SP) がグリッドセル内で残りカードが半幅に潰れるのを矯正 (refs #518) */
body.rn-legacy #mypage_nav ul li { width: auto !important; }
body.rn-legacy #mypage_nav ul li:last-child a span { text-indent: 0; }
body.rn-legacy #mypage_nav li a {
display: flex; flex-direction: column; align-items: center; gap: 8px;
width: 100%; padding: 16px 8px 13px;
background: #fff; border: 1px solid var(--line); border-radius: 14px;
font-family: var(--font-body); font-size: 12px; line-height: 1.5;
letter-spacing: .04em; text-align: center; color: var(--ink) !important;
box-shadow: 0 4px 12px rgba(59,51,64,.05);
transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s;
position: relative;
}
body.rn-legacy #mypage_nav li a::before {
content: "" !important; width: 40px; height: 40px; border-radius: 10px;
background: #fff center / cover no-repeat;
mix-blend-mode: multiply;
transition: transform .3s ease;
}
body.rn-legacy #mypage_nav li:nth-of-type(1) a::before { background-image: url(../img/renewal/icon-home.jpg); }
body.rn-legacy #mypage_nav li:nth-of-type(2) a::before { background-image: url(../img/renewal/icon-azukari.jpg); }
body.rn-legacy #mypage_nav li:nth-of-type(3) a::before { background-image: url(../img/renewal/icon-rireki.jpg); }
body.rn-legacy #mypage_nav li:nth-of-type(4) a::before { background-image: url(../img/renewal/icon-wardrobe.jpg); }
body.rn-legacy #mypage_nav li a:hover {
transform: translateY(-4px);
border-color: var(--fuji);
box-shadow: 0 12px 24px rgba(102,45,145,.15);
background: #fff;
}
body.rn-legacy #mypage_nav li a:hover::before { transform: scale(1.1); }
/* 現在地: 淡藤 + 金の下線 */
body.rn-legacy #mypage_nav li a.on {
background: var(--lavender); border-color: var(--fuji);
}
body.rn-legacy #mypage_nav li a.on::after {
content: ""; position: absolute; left: 26%; right: 26%; bottom: 7px;
height: 2px; border-radius: 2px;
background: var(--kin);
}
/* 準備中(linkoff) */
body.rn-legacy #mypage_nav li.linkoff a { opacity: .42; cursor: default; }
body.rn-legacy #mypage_nav li.linkoff a:hover { transform: none; border-color: var(--line); box-shadow: 0 4px 12px rgba(59,51,64,.05); }
/* 旧アイコンimgは非表示のまま(共通ルール踏襲) */
body.rn-legacy #mypage_nav img { display: none !important; }
/* 検索開始ボタンもv2質感 */
body.rn-legacy .mainContents input[type="submit"], body.rn-legacy .mainContents .btnarea .btn {
background: linear-gradient(135deg, #7a3aad, #662d91) !important;
box-shadow: 0 4px 14px rgba(102,45,145,.28);
transition: transform .25s, box-shadow .25s;
}
body.rn-legacy .mainContents input[type="submit"]:hover, body.rn-legacy .mainContents .btnarea .btn:hover {
transform: translateY(-2px); box-shadow: 0 9px 22px rgba(102,45,145,.35);
}
@media (max-width: 960px) {
/* 4項目(カウンセリング・セール削除後): SPは2列×2行の横並びコンパクト表示 (橋本様メール9/18) */
body.rn-legacy #mypage_nav { padding-top: 16px; }
body.rn-legacy #mypage_nav ul { grid-template-columns: repeat(2, 1fr); gap: 8px; }
body.rn-legacy #mypage_nav li a { font-size: 12px; padding: 8px 6px !important; }
body.rn-legacy #mypage_nav li a { flex-direction: row !important; gap: 6px !important; text-align: left; justify-content: flex-start; }
body.rn-legacy #mypage_nav li a::before { width: 30px !important; height: 30px !important; flex: 0 0 30px; }
body.rn-legacy #mypage_nav li a.on::after { left: 12%; right: 12%; bottom: 3px; }
}
/* タブ細部: 準備中も縦積み統一・アクティブ金下線の復活 */
body.rn-legacy #mypage_nav li.linkoff a { flex-direction: column !important; padding: 16px 8px 13px !important; }
body.rn-legacy #mypage_nav li a.on::after { content: "" !important; }
body#mypage.rn-legacy #mypage_nav li.linkoff a,
body.rn-legacy #mypage_nav li.linkoff a {
display: flex !important; flex-direction: column !important;
align-items: center !important; gap: 8px !important;
padding: 16px 8px 13px !important; height: auto !important; width: 100% !important;
}
/* linkoff の旧・黒幕(absolute ::before)を静的アイコンへ矯正 */
body.rn-legacy #mypage_nav li a::before { position: static !important; }
body.rn-legacy #mypage_nav li.linkoff a::before {
position: static !important; top: auto !important; bottom: auto !important; left: auto !important;
width: 40px !important; height: 40px !important; z-index: auto !important;
background: #fff url(../img/renewal/icon-karute.jpg) center / cover no-repeat !important;
opacity: .9;
}
/* ============================================================
セクション見出し(mainvisual__section)を実写ヒーローバンドへ
— 旧フラットアイコンを廃し、セクション別の実写+スクリムで格上げ
============================================================ */
/* ご指摘#51(260818): ヒーローバンドは画面横幅いっぱい。ヘッダー紫帯との余白も無くす。
第3階層以降で同じ体裁のページすべてに効くよう、ここ(共通定義)で全幅化する refs #681 */
body.rn-legacy .mainvisual__section {
max-width: none; margin: 0 auto 6px; padding: 0;
height: auto !important; background: none !important;
/* 親の .bg > #Contents が width:80vw で幅を絞っているため、自分の max-width を
外すだけでは画面幅まで届かない。左右にマイナスマージンを掛けて親を突き抜ける。
「さがす」のフィルムストリップ(.ba-strips refs #631)と同じ手法 refs #681 */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
/* #Contents .mainvisual__section { padding-top:55px } がIDセレクタで勝つため
紫帯直下の余白が残っていた。打ち消して密着させる ご指摘#51 */
padding-top: 0 !important;
}
/* body の padding-top(--nav-h) と固定ナビの実高が一致せず、その差が紫帯直下の
隙間として露出する。実測して差分だけ引き上げる ご指摘#51
PC: padding-top 150px / .rn-nav-main 実測93px + 案内帯32px + 罫線2px = 127px → 差23px
ただし実際の見えは -32px で合ったためこの値を採用
SP: padding-top 60px / .rn-nav-main 実測47.56px（案内帯はSP非表示）→ 差12px */
@media (min-width: 961px) {
body.rn-legacy .mainvisual__section { margin-top: -32px; }
}
@media (max-width: 960px) {
body.rn-legacy .mainvisual__section { margin-top: -12px; }
}
/* 会社情報のみ transitional.css に #corporate #Contents { padding-top: 40px } があり、
ヒーローバンドが40px押し下げられて紫帯直下に隙間が出ていた。全幅化に伴い不要 ご指摘#51 */
body#corporate.rn-legacy #Contents { padding-top: 0 !important; }
/* 会社情報のSDGsロゴは position:absolute + top:0/right:0 だが、親に position 指定が
無く基準がページ全体になっていた。基準をバンド自身へ移す ご指摘#51 */
body#corporate.rn-legacy .mainvisual__section { position: relative; }
/* 全幅化でバンドの右端＝画面の右端になったため、ロゴが画面の角に張り付いて
窮屈に見える。内側へ寄せる ご指摘#51 */
@media (min-width: 992px) {
body#corporate.rn-legacy .SDGs-logo {
top: 20px !important;
right: 24px !important;
}
}
body.rn-legacy .mainvisual__section > div {
position: relative; overflow: hidden;
/* レガシー側はこの div を「見出しの絶対配置レイヤ」として使い top を効かせていた
(sns_dummy.css PC:135px / SP:40px, review.css:150px)。
ここでバンド本体へ用途変更し position:relative にするため inset を打ち消さないと、
ボックスはそのままで描画だけ下へずれてタブナビ・パンくずへかぶさる refs #657 */
top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
/* 全幅化に伴い角丸・枠・影は落とす（画面端で切れて見えるため） ご指摘#51 */
border-radius: 0;
min-height: clamp(250px, 18vw, 340px);
display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
padding: 26px 36px 24px;
background:
linear-gradient(180deg, rgba(38,24,52,.04) 35%, rgba(38,24,52,.62) 100%),
var(--rn-mv, url(../img/renewal/hero-atelier.jpg)) var(--rn-mv-pos, center) / cover no-repeat !important;
border: 0;
box-shadow: none;
/* 英字ラベル部分 */
font-family: var(--font-num) !important;
font-size: 15px !important; letter-spacing: .34em;
color: rgba(255,255,255,.85) !important;
text-shadow: 0 1px 10px rgba(30,20,40,.6);
width: auto !important;
}
body.rn-legacy .mainvisual__section > div::before,
body.rn-legacy .mainvisual__section > div::after { content: none !important; }
body.rn-legacy .mainvisual__section > div img { display: none !important; }
/* ご指摘#51(3回目 260819)/#54: /review/ と同じ体裁に統一。
transitional.css の .mainvisual__section p:before/:after がタイトルへ ［ ］ を付けるが、
review(静的ページ)は transitional.css を読み込まず括弧なし。WP側も消して揃える refs #698 */
body.rn-legacy .mainvisual__section p::before,
body.rn-legacy .mainvisual__section p::after { content: none !important; }
/* 同上: バンド下の余白も review(6px) に揃える（WP側はIDセレクタ等で55px前後に広がる） */
body.rn-legacy .mainvisual__section { margin-bottom: 6px !important; }
body.rn-legacy .mainvisual__section > div p {
font-family: var(--font-display) !important;
font-weight: 600;
font-size: clamp(24px, 3.2vw, 34px) !important;
letter-spacing: .14em; line-height: 1.5;
color: #fff !important;
margin-top: 2px;
text-shadow: 0 2px 14px rgba(30,20,40,.65);
}
/* セクション別の実写 */
body#technology.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/craft-totonoeru.jpg); }
body#knowledge.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/craft-miru.jpg); }
body#carementeh.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/card-jirei.jpg); }
body#faq.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/staff-counsel.jpg); }
/* ご指摘#54(260818): 会社情報は当社社屋の写真に差し替え（現行サイトの会社案内バナーと同じ原版） refs #681 */
body#corporate.rn-legacy .mainvisual__section > div {
--rn-mv: url(../img/renewal/corporate-shaoku.jpg);
--rn-mv-pos: 72% center; /* 社名サインが切れないよう、SP幅でもサインが入る位置に寄せる */
}
body#shop.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/lp-b2b.jpg); }
body#news.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/hero-2.jpg); }
/* ご指摘#55(260818): レビューはご提供画像「スマホを持った女性」へ差し替え refs #698 */
body#review_top.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/review-sumaho-josei.jpg); }
body#use.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/craft-tsutsumu.jpg); }
body.id448.rn-legacy .mainvisual__section > div { --rn-mv: url(../img/renewal/hero-2.jpg); } /* セール(優待) */
@media (max-width: 960px) {
body.rn-legacy .mainvisual__section > div {
min-height: 180px; padding: 18px 22px 16px;
margin: 0 !important; /* レガシーの margin:0 5% を打ち消して全幅に ご指摘#51 */
width: auto !important;
}
}
/* SP: バンド本体はレガシーの margin:0 5% が残るためセクション枠よりさらに内側へ寄る。
隣接する .logoutArea は width:100% のままなのでログアウトボタンが
バンド右端から22pxはみ出していた。基準枠をバンドへ揃える refs #658 */
@media screen and (max-width: 640px) {
body.rn-legacy .logoutArea { padding: 0 24px; box-sizing: border-box; }
body.rn-legacy .logoutBtn { right: calc(5% + 6px); }
}
/* 旧固定ヘッダ用の余白(.bg padding-top:140px)を撤去(新ナビ分はbodyが確保) */
body.rn-legacy .bg { padding-top: 0 !important; }
/* 検索の開閉ボタン(.accordionBtn): はみ出し矯正しピル+アイコンに */
body.rn-legacy .accordionBtn {
display: inline-flex !important; align-items: center; gap: 8px;
width: auto !important; height: auto !important;
padding: 9px 20px !important; border-radius: 999px !important;
background: linear-gradient(135deg, #7a3aad, #662d91) !important;
box-shadow: 0 4px 12px rgba(102,45,145,.25);
cursor: pointer; position: static !important; overflow: visible !important;
}
body.rn-legacy .accordionBtn .accordionTxt {
position: static !important; width: auto !important; margin: 0 !important;
color: #fff !important; font-family: var(--font-body);
font-size: 13px !important; letter-spacing: .08em; line-height: 1 !important;
order: 2;
}
body.rn-legacy .accordionBtn .accordionIcon {
position: relative !important; width: 14px !important; height: 14px !important;
margin: 0 !important; order: 1; flex-shrink: 0;
}
body.rn-legacy .accordionBtn .accordionIcon span {
position: absolute; background: #fff !important; border-radius: 1px;
}
body.rn-legacy .accordionBtn .accordionIcon span:nth-child(1) { left: 0; right: 0; top: 6px; height: 2px; width: auto; }
body.rn-legacy .accordionBtn .accordionIcon span:nth-child(2) { top: 0; bottom: 0; left: 6px; width: 2px; height: auto; }
/* accordionIcon: 旧の回転式(+⇄−)を維持しつつ寸法をピル内に矯正 */
body#mypage.rn-legacy .mainContents .karteSearch .accordionBtn .accordionIcon {
position: relative !important; width: 14px !important; height: 14px !important;
top: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important;
}
body#mypage.rn-legacy .mainContents .karteSearch .accordionBtn .accordionIcon span {
left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
width: 100% !important; height: 2px !important; margin: auto !important;
background: #fff !important;
}
/* ============================================================
SPモバイル最適化 (refs #508)
旧サイトの .pc / .sp 出し分け残骸と、SPで崩れる旧部品への対応
============================================================ */
/* 旧スマホ用固定フッターメニュー: class版・id版とも全廃（rn-nav と FAB が導線を担う） */
body.rn-legacy .footer_nav_sp,
body.rn-legacy #footer_nav_sp { display: none !important; }
@media (max-width: 991px) {
/* 旧 .pc クラスで丸ごと消えていたページ内メニュー（footerguide）をSPでも表示し、
PC用背景スプライト前提のバナーをテキストカードに再構成する */
body.rn-legacy .footerguide.pc { display: block; }
body.rn-legacy .footerguide ul { padding-left: 0; margin: 18px 0; }
body.rn-legacy .footerguide li.fnavi-banner {
height: auto !important;
background: #fff !important;
border: 1px solid rgba(196,169,113,.5);
border-radius: 12px;
margin: 0 0 12px;
list-style: none;
box-shadow: 0 6px 18px rgba(59,51,64,.08);
}
body.rn-legacy .footerguide li.fnavi-banner > a {
display: block; position: relative; padding: 16px 18px; text-decoration: none;
}
body.rn-legacy .footerguide li.fnavi-banner > a::before { content: none !important; }
body.rn-legacy .footerguide li .fnaviwrap {
color: #3b3340 !important; margin: 0 !important; width: auto !important;
position: static !important; top: 0 !important; transform: none !important;
}
body.rn-legacy .footerguide .fnaviTtl { color: #6a3b93; font-size: 15px; }
body.rn-legacy .footerguide .fnaviwrap p { font-size: 12.5px; color: #6f6673; margin: 4px 0 0; }
/* 見出しの不自然な折返し対策: SPは級数を落とし、折返す場合も釣り合いを取る */
body.rn-legacy .mainvisual__section > div p {
font-size: 19px !important;
letter-spacing: .08em;
text-wrap: balance;
}
body.rn-legacy .pagettl h1, body.rn-legacy .pagettl h2 { text-wrap: balance; }
body.rn-legacy .pagettl-sub, body.rn-legacy .pagettl-lead {
text-wrap: balance; padding-inline: 14px;
}
}
/* ============================================================
さがす(carementeh_search)の表示改善 (refs #509)
============================================================ */
/* ③ その他のアイテム: 2行ラベルが枠(固定高81%)から下へはみ出す → 枠を内容に追随させる */
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory02 .Category02other .Category02other_box .itemL label input + span.itemL_frame {
height: auto !important;
min-height: 118px;
padding: 12px 6px 10px !important;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory02 .Category02other .Category02other_box .itemL label span span {
height: auto !important;
}
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory02 .Category02other .Category02other_box .itemL label span.itemL_name {
line-height: 1.5 !important;
}
/* ④ 色・柄サンプル: 中の円がinline-blockのベースラインに乗り選択枠とずれる → blockで枠中央に */
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory05 dd label input + span,
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory06 dd label input + span {
display: flex !important; align-items: center; justify-content: center;
line-height: 1 !important;
overflow: hidden;
}
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory05 dd label input + span span,
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory06 dd label input + span span,
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory06 dd label input + span img {
display: block !important;
}
/* ⑤ 選択した検索条件: 旧固定フッター前提のbottomオフセットを撤去し画面底辺へ */
body#careSearch.rn-legacy #case.careBrand .searchFilter,
body#careSearch.rn-legacy #case.careBrand .searchFilter.non-first {
bottom: 0 !important;
}
/* 底辺バーと重ならないよう、このページのみFABを持ち上げる */
body#careSearch.rn-legacy .rn-fab { bottom: 110px !important; }
/* SPのfnaviカードも和紙の紙肌に (refs #507) */
@media (max-width: 991px) {
body.rn-legacy .footerguide li.fnavi-banner {
background: #ffffff !important;
}
}
/* ============================================================
App Storeリンクの復活 (refs #519)
common.cssの「アプリセクション非表示(サービス停止中)」の a[href*="/app/"] が
現行のApp Store URL(apps.apple.com/jp/app/...)にも誤マッチして隠すため、
ストアへのリンクのみ狭く解除する（旧#app/.contents_appセクションの扱いは業務判断待ち）
============================================================ */
body.rn-legacy a[href*="apps.apple.com"] { display: inline-block !important; }
/* ============================================================
旧LP系ボタン(link_button / inner_button-*)の可視化 (refs #520)
旧設計は暗色地に白文字だが、生成り地では [class*="button"]→白文字の
例外規則と重なって不可視になるため、新テーマのピル型に矯正
============================================================ */
body.rn-legacy .link_button a,
body.rn-legacy [class^="inner_button"] a {
display: inline-block; padding: 12px 30px; margin: 6px 0;
border-radius: 999px;
background: var(--murasaki); color: #fff !important;
font-family: var(--font-body); font-size: 14px; letter-spacing: .06em;
text-decoration: none;
box-shadow: 0 4px 14px rgba(102,45,145,.22);
transition: background .25s;
}
body.rn-legacy .link_button a:hover { background: #7d49ad; }
body.rn-legacy [class^="inner_button"] a {
background: transparent; color: var(--murasaki) !important;
border: 1px solid var(--fuji); box-shadow: none;
}
body.rn-legacy [class^="inner_button"] a:hover { background: rgba(138,104,180,.09); }
/* 白抜き前提の矢印画像はピル内で不整合のため非表示 */
body.rn-legacy .link_button a img,
body.rn-legacy [class^="inner_button"] a img { display: none !important; }
/* refs #656: アイテムタブは白地ボタンのため白文字強制の対象外（非選択が白×白で不可視だった） */
body.rn-legacy .item-tabs__btn { color: #6a3b93; }
body.rn-legacy .item-tabs__btn.active { color: #fff; }
/* refs #656: 締めCTA帯はトープ地のため、レガシー既定の墨色化から除外して白文字に */
body.rn-legacy .rn-closing-title { color: #fff; }
body.rn-legacy .rn-closing .rn-wrap > p { color: #fff; }
/* refs #656: 旧・暗色背景ページ用の白系透過PNGはライト化した地色で不可視になるため補正
（全118ページ×312画像を機械判定し、目視で18枚を確定） */
/* 純白の線画イラスト・アイコンは暗色化して可読に */
body.rn-legacy img[src*="reform_illust"],
body.rn-legacy img[src*="howtoorder_mail0"],
body.rn-legacy img[src*="howtoorder_packing"],
body.rn-legacy img[src*="howtoorder_pickup"],
body.rn-legacy img[src*="icon_fax"],
body.rn-legacy img[src*="icon_shop"],
body.rn-legacy img[src*="icon_tel"],
body.rn-legacy img[src*="step01_03"] { filter: brightness(.38); }
/* 白文字を含むカラー図版は旧背景相当の濃色チップを敷いて白文字を活かす */
body.rn-legacy img[src*="etymology_img1"],
body.rn-legacy img[src*="style_img4"],
body.rn-legacy img[src*="aquadry_img2"],
body.rn-legacy img[src*="lecirian_img1"] {
background: #4a4038; padding: 18px; border-radius: 8px; box-sizing: border-box;
}
/* ============================================================
ご指摘#52/#53(260818): レガシーの白抜き前提だった文字が
ライト化した紙肌(#f7f4ee)の上で読めない。視認性を上げる refs #681
============================================================ */
/* #52 検証データの見出しナビ(.head-lnavi): 白文字・白枠・白矢印で消えていた */
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item {
background: #fff;
border: 1px solid var(--fuji-2);
border-radius: var(--radius);
transition: border-color .25s, box-shadow .25s;
}
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item:hover {
border-color: var(--murasaki);
box-shadow: 0 6px 16px rgba(66,45,80,.12);
}
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item a {
color: var(--murasaki);
padding-right: 28px; /* 矢印と文字が重ならないように */
}
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item a small { color: var(--grey); }
/* 白矢印のPNGは見えないので、CSSのシェブロンに置き換える */
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item::after {
background: none !important;
width: 8px; height: 8px;
border-right: 2px solid var(--fuji);
border-top: 2px solid var(--fuji);
transform: rotate(45deg);
top: 50%; margin-top: -4px; right: 12px;
}
body.rn-legacy .head-lnavi .lnavi-heading { color: var(--ink); }
/* #53 パンくず: リンクが白のままで読めない */
body.rn-legacy #pankuzu-wrapp p.pankuzu a { color: var(--murasaki); }
body.rn-legacy #pankuzu-wrapp p.pankuzu a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.rn-legacy #pankuzu-wrapp p.pankuzu { color: var(--grey); }
body.rn-legacy #pankuzu-wrapp p.no-arrow { color: var(--ink); }
/* ============================================================
ご指摘#46(260818): ブランド選択(form_brand2)の「確定」が、SPだと
一覧の一番下までスクロールしないと見えない。
→ SPではボタン列を画面下部に固定し、常に押せる状態にする。
sticky は .btnarea がフォーム末尾の要素で動く余地が無く効かないため fixed を使う refs #681
============================================================ */
@media (max-width: 991px) {
body#careSearch.rn-legacy #case.careBrand .btnarea.searchBrand2 {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
margin: 0;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.96);
backdrop-filter: blur(6px);
border-top: 1px solid var(--line);
box-shadow: 0 -3px 14px rgba(66,45,80,.14);
display: flex; gap: 10px; justify-content: center;
}
body#careSearch.rn-legacy #case.careBrand .btnarea.searchBrand2 input {
width: 50%; max-width: 220px; margin: 0 !important;
padding: 12px 0; font-size: 15px; border-radius: 999px;
}
/* 固定バーの高さ分の余白。最後のブランドがバーに隠れないようにする */
body#careSearch.rn-legacy #case.careBrand form { padding-bottom: 84px; }
/* このページはFABが固定バーと重なるため、バーの上へ逃がす */
body#careSearch.rn-legacy .rn-fab { bottom: 96px !important; }
}
/* ============================================================
ご指摘#47(260818): アイテム選択のアイコンPNGは白い下地が焼き込まれており、
ライト化した紙肌(#f7f4ee)の上だと「背景とアイコン背景が同系色」で
境目が分からない。白い下地が意図的に見えるよう受け皿を与える refs #681
============================================================ */
/* ① その他のアイテム: 選択カードの地を白にして、アイコンの白下地を溶け込ませる */
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory02 .Category02other .Category02other_box .itemL label input + span.itemL_frame {
background: #fff;
border-color: var(--fuji-2) !important;
border-radius: 10px;
}
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory02 .Category02other .Category02other_box .itemL label input:checked + span.itemL_frame {
border-color: var(--murasaki) !important;
box-shadow: 0 0 0 3px rgba(102,45,145,.12);
}
/* ② アイテム（商品種別）の行見出し: アイコンを白タイルとして明示する */
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory02 .Category02main .Category02main_box .search_subtitle img {
background: #fff;
border: 1px solid var(--fuji-2);
border-radius: 8px;
padding: 3px;
box-sizing: content-box;
}
/* ③ 文字だけのボタンも同じ体裁に揃える。レガシー側は border しか当てておらず
地色は紙肌が透ける。①②で白地にしたアイコン系だけが浮いて見えるため、
こちらも白地＋藤色の枠にする。クラスは欄によって異なり
.itemL=アイテム(商品種別) / .itemS=シミ汚れの種類・素材 refs #681 */
body#careSearch.rn-legacy #case.careBrand #search_form .itemL label input + span,
body#careSearch.rn-legacy #case.careBrand #search_form .itemS label input + span {
background: #fff;
border-color: var(--fuji-2) !important;
}
body#careSearch.rn-legacy #case.careBrand #search_form .itemL label input:checked + span,
body#careSearch.rn-legacy #case.careBrand #search_form .itemS label input:checked + span {
border-color: var(--murasaki) !important;
box-shadow: 0 0 0 3px rgba(102,45,145,.12);
}
/* ============================================================
PinRemark open指摘一括対応(260820) refs #698
============================================================ */
/* 行頭禁則(ー・小書き仮名・句読点が行頭に来ない)をレガシー全ページ共通に */
body.rn-legacy { line-break: strict; }
/* ご指摘#61: さがすのアイテム行見出しでアイコンと文字が詰まり過ぎ。余白を入れる */
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory02 .Category02main .Category02main_box .search_subtitle { gap: 10px; word-break: keep-all; }
body#careSearch.rn-legacy #case.careBrand #search_form .formCategory02 .Category02other .search_subtitle { gap: 10px; word-break: keep-all; }
/* ご指摘#63: 検証データナビで現在ページ(選択中)のボタンを紫地＋白文字にして判別できるようにする */
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item.is-current {
background: var(--murasaki);
border-color: var(--murasaki);
}
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item.is-current a { color: #fff; }
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item.is-current a small { color: rgba(255,255,255,.82); }
body.rn-legacy .head-lnavi .lnavi-body .lnavi-item.is-current::after { border-color: #fff; }
/* ご指摘#66: 会社情報系(白ボックス体裁)の白地を画面横幅いっぱいへ広げ、
会社概要などの表は表形式をやめて第2階層のテイスト(ラベル+本文の縦積み)に寄せる。
レガシー各ページは fixed幅でレイアウトビューポートが約1280pxに広がるため、
メディアクエリではなく全幅ブリード(負マージン)で PC/SP 共通に効かせる */
body#corporate.rn-legacy .bg_w {
margin-left: calc((100vw - 1000px) / -2) !important;
margin-right: calc((100vw - 1000px) / -2) !important;
padding-left: calc((100vw - 1000px) / 2) !important;
padding-right: calc((100vw - 1000px) / 2) !important;
width: auto !important;
}
body#corporate.rn-legacy .bg_w table,
body#corporate.rn-legacy .bg_w tbody,
body#corporate.rn-legacy .bg_w tr,
body#corporate.rn-legacy .bg_w th,
body#corporate.rn-legacy .bg_w td {
display: block; width: auto !important; max-width: none !important;
background: transparent !important; border: 0 !important; text-align: left !important;
}
body#corporate.rn-legacy .bg_w tr { border-top: 1px solid var(--line) !important; padding: 16px 0 18px; }
body#corporate.rn-legacy .bg_w tr:first-child { border-top: 0 !important; padding-top: 0; }
body#corporate.rn-legacy .bg_w th {
font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--grey);
padding: 0 0 6px;
}
body#corporate.rn-legacy .bg_w td { font-size: 14.5px; line-height: 2; color: var(--ink); padding: 0; }
/* #66(追加指摘260824): DB本文の改行は
ではなく素の改行文字のため、
縦積み表示では1段落に潰れて現行サイトと改行位置が変わっていた。
pre-line で素改行を改行として描画し、現行の企業情報と同じ配置にする refs #723 */
body#corporate.rn-legacy .bg_w td { white-space: pre-line; }
/* レビュー一覧のAA未達(既存): 星評価(#e9c24d)と「いいね」(#999)が紙肌の上で薄い。
金系トークン・グレートークンへ置き換えて4.5:1を確保 refs #698 */
body#review_top.rn-legacy span.star { color: var(--kin-text) !important; }
body#review_top.rn-legacy .postingLike a { color: var(--grey) !important; }
/* ============ ハッピーポイント新制度: 加算例ブロック refs #704 ============
/use/howtoorder/point/ の post_content(rn-update-point-page-704.php)で追加した
「ポイント加算の例」。レガシーpointBox系に合わせつつ、紙肌の上の白カードで見せる */
body#use.rn-legacy .pointExample {
max-width: 560px; margin: 0 auto 90px;
background: #fff; border: 1px solid var(--line); border-radius: 4px;
padding: 30px 34px; box-shadow: 0 3px 12px rgba(66,55,50,.05);
}
body#use.rn-legacy .pointBox02--example h2 { margin-bottom: .8em; }
body#use.rn-legacy .pointExample_calc { margin: 0 0 18px; }
body#use.rn-legacy .pointExample_calc > div {
display: flex; justify-content: space-between; align-items: baseline;
padding: 8px 2px; border-bottom: 1px dashed var(--line);
}
body#use.rn-legacy .pointExample_calc dt { font-size: 14px; color: var(--ink); }
body#use.rn-legacy .pointExample_calc dd { font-size: 16px; color: var(--ink); }
body#use.rn-legacy .pointExample_calc .pointExample_total { border-bottom: 2px solid var(--kin); }
body#use.rn-legacy .pointExample_calc .pointExample_total dt { font-weight: 700; }
body#use.rn-legacy .pointExample_calc .pointExample_total dd { font-size: 19px; font-weight: 700; }
body#use.rn-legacy .pointExample_result {
text-align: center; font-size: 14.5px; line-height: 2; color: var(--ink); margin: 0;
}
body#use.rn-legacy .pointExample_result strong { font-size: 18px; color: var(--murasaki); }
body#use.rn-legacy .pointExample_result span { font-size: 13px; color: var(--grey); }
@media (max-width: 700px) {
body#use.rn-legacy .pointExample { padding: 22px 18px; margin-bottom: 60px; }
}
/* ============ PinRemark #72/#70/#74/#66 レガシーページ補修 refs #705 ============ */
/* #72: 第三階層フッタの「LINE友だち登録」アイコンが白化して白ピルの上で見えない
(path の fill=currentColor の解決色が白になる)。fill を直接LINEブランド緑にする */
body.rn-legacy .rn-footer .rn-line-btn svg { color: #06c755 !important; }
body.rn-legacy .rn-footer .rn-line-btn svg path { fill: #06c755 !important; }
/* #70: レガシー下層のパンくず(#pankuzu-wrapp)はスクロール時にヘッダー下へ固定されるが、
暗色帯の上で文字がほぼ見えない。固定時も視認できるよう白系の地に統一する */
body.rn-legacy #pankuzu-wrapp {
background: var(--paper) !important;
border-bottom: 1px solid var(--line);
}
body.rn-legacy #pankuzu-wrapp .pankuzu,
body.rn-legacy #pankuzu-wrapp .pankuzu a { color: var(--ink) !important; }
body.rn-legacy #pankuzu-wrapp .pankuzu a:hover { color: var(--murasaki) !important; }
/* #74: /sachi/ の「バックナンバーはこちら」が暗地に暗文字で読めない。
白地ピル+墨文字にして視認性を確保する */
body.rn-legacy .backnumberLink a {
display: inline-block;
background: #fff !important;
color: var(--ink) !important;
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 18px;
}
body.rn-legacy .backnumberLink a:hover { background: var(--lavender) !important; }
body.rn-legacy .backnumberLink a .fa { color: var(--kin-text); margin-right: 6px; }
/* #66: 会社概要系の白地全幅ブリード(refs #698)が、狭幅ビューポート(スマホ実機)では
(100vw - 1000px) が負になり「正のマージン」となって本文が画面外へ押し出されていた。
min()/max() で狭幅時は 0 に丸め、内側余白は5%を確保する */
/* 全ページ検査(refs #861): 親が1000px固定でない会社情報系(profile/ip/winning/csr/recruit等は親が幅1104px)では
1000px前提の計算がずれ、白地が左へ52px・右へ52pxはみ出して PC の横スクロールが出ていた。
「親の中央 → 画面全幅」を親幅(%)基準で計算して、親幅に依らず全幅ブリードにする */
body#corporate.rn-legacy .bg_w {
margin-left: min(0px, calc(50% - 50vw)) !important;
margin-right: min(0px, calc(50% - 50vw)) !important;
padding-left: max(5%, calc(50vw - 50%)) !important;
padding-right: max(5%, calc(50vw - 50%)) !important;
}
/* ============ PinRemark 7回目バッチ refs #721 ============ */
/* #66(追加指摘): スマホも白地を「背景枠なし」で画面横幅いっぱいに */
@media (max-width: 1000px) {
body#corporate.rn-legacy .bg_w {
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 5% !important;
padding-right: 5% !important;
}
}
/* #71(追加指摘): ポイントページのアイコン・矢印・数字図版が薄いので濃く */
body#use.rn-legacy .icon_pointImg,
body#use.rn-legacy .pointWrap_innerImg img,
body#use.rn-legacy .pointBox01_inner02 img {
filter: brightness(0.45) saturate(1.4);
}
/* #71(追加指摘260824): 「ケアメンテ代金1円値引き」の枠線と、
「ハッピーポイントのため方」3列の区切りライン(PC=縦/SP=横)は白1pxで
ほぼ見えないため、濃い色へ refs #723 */
body#use.rn-legacy .pointBox01 .pointBox01_inner02 p:last-child {
border-color: var(--ink);
}
body#use.rn-legacy .pointBox02 .pointWrap .pointWrap_inner {
border-color: var(--ink);
}
/* ============================================================
ピン#130: ポイントページ注記(※1/※2)の行頭を左揃えに (refs #731)
PCの .pointNote は text-align:right のため行頭が不揃いだった。
ブロックの位置は変えず、内側 inline-block の行頭だけ揃える
（span.pointNote-inner は tools/rn-update-point-page-731.php で付与）
============================================================ */
body.rn-legacy .pointNote .pointNote-inner { display: inline-block; text-align: left; }
/* ============================================================
PinRemark #164/#165/#166/#172/#175 (260828) refs #770
旧・暗色テーマ前提の装飾が生成り地で不可視／判別しづらくなっていた箇所の補正。
いずれも「白い文字・白い罫」がライト化した地色に溶けているのが原因。
※注意: レガシーページは のようにIDがbody自身に付く。
そのため `body.rn-legacy #corporate .foo` は一致しない（#corporateはbodyの子孫ではない）。
元ルールがID付きセレクタの場合は !important で打ち消すこと。
============================================================ */
/* #175: SPの .linkBtnCommon は紫地のボタンなのに、レガシー既定の墨色化で文字が沈んでいた */
body.rn-legacy a.linkBtnCommon,
body.rn-legacy a.linkButtonCommon { color: #fff; }
/* #164: SDGs宣言 Q&A の「A」枠が白文字＋白の二重罫で消えていた */
body.rn-legacy .sdgsdx-A {
color: var(--ink); border-color: var(--taupe); padding: 10px 14px;
}
body.rn-legacy ul.sdgsdx-ul { border-color: var(--line); }
/* #165: 「MA値 ○」の強調が白地×黒文字のため、強調に見えていなかった */
body.rn-legacy .txtBGC {
display: inline-block; font-weight: 700; border-radius: 4px;
background: var(--murasaki) !important; color: #fff !important;
line-height: 1.7 !important; padding: 3px 12px !important;
}
/* #166: 解説枠（.serviceBorderBox 系）の白罫が地色に溶けて枠に見えていなかった。
藤色の罫に変えて「枠」として認識できるようにする */
body.rn-legacy .serviceBorderBox,
body.rn-legacy .knowledgeBorderBox,
body.rn-legacy .europeIndex,
body.rn-legacy .valueonDetail,
body.rn-legacy .wardrobeDetailBorder {
border-color: var(--fuji-2) !important;
}
/* #172: SPでは「詳しくはこちら」(.PCpart)が非表示になるため、遷移できることが分かる矢印を出す */
@media only screen and (max-width: 991px) {
body.rn-legacy .footerguide-bicolor li > a { position: relative; display: block; }
body.rn-legacy .footerguide-bicolor li > a::after {
content: '→'; position: absolute; right: 18px; bottom: 14px;
font-size: 18px; line-height: 1; color: var(--murasaki);
}
}
/* ============================================================
PinRemark #141: お支払い方法ページのデポジット詳細ポップアップ
原因: renewal.css の `.rn img { display: block; }` が common.css の
`.sp { display: none; }` を詳細度で上回るため、レガシーページでは
PC用画像(.pc)とスマホ用画像(.sp)が両方表示されていた。
結果、ポップアップの中身が縦12,900px積み上がり、固定高の箱には
末尾しか見えず「内容が見にくい」状態になっていた。
対処: レガシーページに限り PC/SP 画像の出し分けを復活させ、
あわせて箱の寸法と閉じるボタンの位置を整える。 refs #744
============================================================ */
body.rn-legacy img.sp { display: none; }
@media (max-width: 991px) {
body.rn-legacy img.pc { display: none; }
body.rn-legacy img.sp { display: block; }
}
/* ポップアップの箱: 画像幅に合わせ、画面に収まらない分は中でスクロール。
#use は body 自身のIDのため body#use.rn-legacy で詳細度を確保する。
スクロールは内側(.section-imgCenter)に持たせ、箱自体は位置の基準に留める。
こうすると閉じる「×」を absolute で箱の右上に固定でき、中身と一緒に流れない */
body#use.rn-legacy .payment_deposit {
/* 既定の z-index:11 では追従ヘッダーの下に潜り、箱の上端と閉じる「×」が隠れる */
z-index: 10001;
/* common.js の centeringModalSyncer() は「画面高 - 箱の高さ」で top/left を
インラインstyleに書き込むが、箱がまだ display:none の時点で高さを測るうえ、
iOS はアドレスバーの伸縮で画面高が変わるため位置が画面外へ飛ぶ。
JSの計算に頼らず CSS で中央に固定する（インラインstyleを上書きするため !important）*/
/* iOS では position:fixed + transform + overflow:hidden の組み合わせで
中身が描画されないことがあるため、transform を使わず inset:0 + margin:auto で中央寄せ */
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: auto;
/* 画像850px + 左右の余白24pxずつ。余白が無いと中のカードが箱の縁に接する */
width: min(898px, 92vw);
height: auto;
max-height: 80vh;
max-height: 80dvh;
padding: 0;
overflow: visible;
border-radius: 10px;
box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}
body#use.rn-legacy .payment_deposit .section-imgCenter {
position: static;
width: 100%;
max-width: none;
max-height: 80vh;
max-height: 80dvh;
overflow-y: auto;
margin: 0;
padding: 0 24px 24px;
box-sizing: border-box;
}
@media (max-width: 991px) {
body#use.rn-legacy .payment_deposit .section-imgCenter { padding: 0 14px 14px; }
}
/* display は指定しない。ここで display:block を書くと詳細度で img.sp/.pc の
出し分けを打ち消してしまう */
body#use.rn-legacy .payment_deposit img { width: 100%; height: auto; border-radius: 0; }
/* 閉じる「×」を箱の右上へ（従来は position:fixed で画面基準だった） */
body#use.rn-legacy .payment_deposit #modal-close {
position: absolute;
top: 10px;
right: 10px;
left: auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
cursor: pointer;
z-index: 2;
}
body#use.rn-legacy .payment_deposit #modal-close:before { font-size: 26px; line-height: 1; }
body.rn-legacy #modal-overlay { z-index: 10000; }
/* ------------------------------------------------------------
PinRemark #141: iPhone実機でポップアップを開くと画面が真っ白になる件
common.js は背面スクロールを止めるため body に .fixed を付け、
`position:fixed; top:-スクロール位置` でページ全体を上へずらす。
スクロールが深い位置（今回は約1700px）で開くとページが画面外へ出るため、
何らかの理由でポップアップ／オーバーレイもbody基準で配置される環境では
それらも一緒に画面外へ出て、背景色だけの真っ白な画面になる。
ずらす方式をやめ、overflow:hidden で背面スクロールを抑える方式に変更。
JS側は触らず、CSSだけで打ち消す。 refs #744
------------------------------------------------------------ */
body#use.rn-legacy.fixed {
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
height: auto !important;
overflow: hidden;
}
/* ------------------------------------------------------------
PinRemark #146: ご注文方法ページの白い線画・白矢印が見えない
旧サイトの暗い背景用に作られた白(255,255,255)の線画がそのまま残っており、
リニューアルのアイボリー背景(247,244,238)に対してコントラスト比 1.10:1 で
ほぼ見えない状態だった（WCAG の図版基準は 3:1）。
画像は差し替えず、既存の step01_03 と同じ手法で表示上の明度を落とす。
白 → 濃いグレー(97,97,97) 相当、背景比 5.66:1。 refs #744
------------------------------------------------------------ */
body.rn-legacy img[src*="arrow_point"],
body.rn-legacy img[src*="howtoorder_mail01"],
body.rn-legacy img[src*="howtoorder_mail02"],
body.rn-legacy img[src*="howtoorder_mail03"],
body.rn-legacy img[src*="howtoorder_mail04"],
body.rn-legacy img[src*="howtoorder_packing"],
body.rn-legacy img[src*="howtoorder_pickup"] { filter: brightness(.38); }
/* 送り先ボックスの白い枠線も背景に埋もれるため、リニューアルのカードと同じ
「白地＋ベージュ罫線」に揃えてブロックとして見えるようにする */
body.rn-legacy #Contents .section-imgCenter.tal {
background: #fff;
border-color: var(--line) !important;
border-radius: var(--radius);
}
/* 見出しの下線も白のままで背景に埋もれていたため、リニューアルの見出し装飾と
同じ金色へ（ピン#146 で指摘された「この白線」そのもの） refs #744 */
body.rn-legacy #Contents h1 { border-bottom-color: var(--kin) !important; }
/* 図の下のキャプションが「受け取／る」「ゆうパッ／ク」のように語中で折り返して
いたため、文節を保って折り返す。WordPress側の本文には手を入れない refs #744 */
body.rn-legacy .howtoorder_mail_step li p { word-break: keep-all; overflow-wrap: break-word; }
/* 図と矢印が左端に寄る。text-align:center は効いているが .rn img { display:block }
により画像がブロック要素になっており中央寄せの対象外になるため refs #744 */
body.rn-legacy .howtoorder_mail_step li img { margin-left: auto; margin-right: auto; }
/* 送り先カードのPC時の内側余白が左右非対称（左24px / 右100px）で、
中央寄せの基準がずれて住所が左に寄って見えるため揃える refs #744 */
@media (min-width: 992px) {
body#use.rn-legacy .howtoorder_mail_2101 .howtoorder_mail_address .section-imgCenter {
padding: 20px 32px;
}
}
/* ============================================================
ピン#152: こだわりのディテール(/detail/)をリニューアルの見え方へ寄せる。
HTMLは変更せず、既存構造にリニューアルの配色・余白・カード表現を当てる。
============================================================ */
/* 虫眼鏡アイコンが左端に寄る（.rn img の display:block により
text-align:center の対象外になるため） */
body.rn-legacy .case_title img { margin-left: auto; margin-right: auto; }
/* ブランド一覧をカードに。リニューアルの .rn-linkcard に合わせて
白地＋ベージュ罫線、ホバーで浮かせる */
body.rn-legacy ul.section { list-style: none; padding-left: 0; }
body.rn-legacy ul.section li {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0;
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease;
}
/* 画像はカード幅いっぱい、ブランド名にだけ内側余白 */
body.rn-legacy ul.section li > a { display: block; line-height: 0; }
body.rn-legacy ul.section li p.midashi {
margin: 0;
padding: 12px 16px 14px;
line-height: 1.5;
}
body.rn-legacy ul.section li p.midashi a { color: var(--ink); }
/* /knowledge/ のカードには説明文があるため、見出しと同じ内側余白を当てる */
/* 既存の #knowledge .section p.text（width:100% / line-clamp:5）がID指定で
強いため、同じ詳細度で上書きする。width:100% に左右marginが加わって
右へはみ出していたので box-sizing と幅の指定を見直す */
body#knowledge.rn-legacy .section p.text,
body.rn-legacy ul.section li p.text {
width: calc(100% - 32px);
margin: 10px 16px 16px;
padding: 0;
font-size: 13px;
line-height: 1.9;
color: var(--grey);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
/* 4行に満たない本文でも高さを揃える。5行目がのぞかないよう
コンテンツ高は4行ぶん、下余白は padding で持たせる */
height: calc(13px * 1.9 * 4);
box-sizing: content-box;
}
body.rn-legacy ul.section li:hover p.midashi a { color: var(--murasaki); }
body.rn-legacy ul.section li:hover {
box-shadow: 0 8px 22px rgba(66, 55, 50, .12);
transform: translateY(-2px);
}
/* 画像はカード幅いっぱい。li の padding は文字側だけに効かせたいので
画像には負のマージンで打ち消しをかけず、li 側を padding 0 にして
テキストにだけ内側余白を持たせる */
body.rn-legacy ul.section li img {
display: block; width: 100%; height: auto; border-radius: 0; margin: 0;
}
/* リード文をリニューアルの本文組みへ */
body.rn-legacy .content p.index_txt {
line-height: 2;
color: var(--grey);
}
/* 「さがす」の虫眼鏡が白アイコン(header01_w.png)で背景に埋もれる */
body.rn-legacy .case_title img { filter: brightness(.38); }
/* 実例集見出しの下線が白(::after の背景色)で見えない */
body.rn-legacy h2.head_underline::after { background: var(--kin) !important; }
/* ボタンの紫をリニューアルのCTA色へ。詳細度を確保するため body#... を使う */
body.rn-legacy a.linkBtnCommon,
body.rn-legacy .btn a.linkBtnCommon {
background: #662d91 !important;
border-radius: 999px;
padding: 13px 34px;
}
body.rn-legacy a.linkBtnCommon:hover,
body.rn-legacy .btn a.linkBtnCommon:hover { background: #7a3aad !important; }
/* 本文幅をリニューアルの .rn-wrap（max-width:1160px / padding:0 24px）に揃える */
@media (min-width: 992px) {
body.rn-legacy #Contents .content {
max-width: 1160px;
width: auto;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
}
/* ------------------------------------------------------------
ピン#151: サービス・技術コンテンツ一覧(/service-technology/)を
リンクの羅列からカード表示へ。説明文を持たない項目のみのため、
アイコン＋リンク文の2要素構成にする。
------------------------------------------------------------ */
/* セクションが4つ連続するため、上下72pxずつでは分類間が144px空いて広すぎる。
/service/ と同じ見え方になるよう、2つ目以降の上余白を詰める */
body.rn-legacy #Contents .rn-section { padding: 0 0 56px; }
body.rn-legacy #Contents .rn-section:first-of-type { padding-top: 48px; }
/* .rn-wrap 相当の内側余白（1160px - 左右24px = 1112px）に合わせる */
body.rn-legacy .rn-svc-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1112px;
margin-left: auto;
margin-right: auto;
}
body.rn-legacy #Contents .rn-section-head { max-width: 1112px; margin: 0 auto 36px; }
/* 旧CSS側の文字色指定に負けるため、分類名の金茶を明示 */
body.rn-legacy #Contents .rn-section-head .rn-eyebrow { color: var(--kin-text); }
/* 見出しは の位置で折り返す（keep-all 併用が前提の実装パターン） */
body.rn-legacy #Contents .rn-section-head .rn-h2 { word-break: keep-all; line-break: strict; }
@media (max-width: 991px) { body.rn-legacy .rn-svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { body.rn-legacy .rn-svc-cards { grid-template-columns: 1fr; } }
body.rn-legacy .rn-svc-cards .rn-linkcard {
display: flex;
flex-direction: column;
gap: 12px;
padding: 26px 26px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink);
text-decoration: none;
transition: box-shadow .2s ease, transform .2s ease;
}
body.rn-legacy .rn-svc-cards .rn-linkcard:hover {
box-shadow: 0 8px 22px rgba(66, 55, 50, .12);
transform: translateY(-2px);
}
body.rn-legacy .rn-svc-cards .rn-linkcard h3 {
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.7;
word-break: keep-all;
}
/* リンクである手がかりとして右下に矢印 */
body.rn-legacy .rn-svc-cards .rn-linkcard h3::after {
content: "→";
margin-left: .5em;
color: var(--murasaki);
font-family: var(--font-num);
}
/* ------------------------------------------------------------
ピン#149: ホームページからのご注文(/use/howtoorder/web/)の
文字とボタンをリニューアル側の値へ揃える。
画面サンプルの差し替えと申込導線(/order/)は別途。
------------------------------------------------------------ */
/* ボタン: 14px 太さ700。旧サイトの「＞」（::after を45度回転させた枠線）は
リニューアル側で使っていないため消し、リニューアルと同じ「→」を末尾に置く */
body.rn-legacy a.linkBtnCommon { font-size: 14px; font-weight: 700; }
body.rn-legacy a.linkBtnCommon::after {
content: "→";
position: static; /* 既存は absolute で右端に浮かせている */
display: inline;
width: auto;
height: auto;
border: 0;
transform: none;
margin: 0 0 0 .6em;
font-weight: 400;
}
/* H2 にも H1 と同じ金の下線を付ける。H1 は見出しの文字幅いっぱいに
border-bottom 3px を引いているので、同じ引き方に揃える */
body.rn-legacy .LColumn.web h2 {
display: table;
margin-left: auto;
margin-right: auto;
padding-bottom: 14px;
border-bottom: 3px solid var(--kin);
}
/* ページ見出し・サブ・セクション見出しをリニューアルの値へ */
body.rn-legacy .LColumn.web .pagettl h1 {
font-size: 38px;
line-height: 1.5;
letter-spacing: .04em;
}
body.rn-legacy .LColumn.web .pagettl-sub {
font-size: 14.5px;
line-height: 1.95;
color: var(--grey);
}
body.rn-legacy .LColumn.web h2 {
font-size: 32px;
line-height: 1.65;
letter-spacing: .04em;
}
/* H3 の全周1pxの白枠が背景に埋もれるため、リニューアルのカードと同じ
白地＋ベージュ罫線にして見出しの帯として見えるようにする */
/* H3: 全周1pxの白枠が背景に埋もれるため白地＋ベージュ罫線に。
枠がコンテンツ幅いっぱい(1104px)まで伸びて細長い帯になっていたので、
文字幅に合わせたラベルにする */
body#use.rn-legacy .LColumn.web h3.tac,
body#use.rn-legacy .howtoorder_web h3,
body#use.rn-legacy .howtoorder_pickup h3,
body#use.rn-legacy .howtoorder_packing h3 {
display: table;
margin-left: auto;
margin-right: auto;
padding: 12px 32px;
background: #fff;
border-color: var(--line) !important;
border-radius: var(--radius);
}
/* マイページ案内: 背景が rgba(255,255,255,.2) の半透明で
アイボリー地との差がほとんど出ていないため、白いカードにする */
body#use.rn-legacy .howtoorder_mypage {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
}
/* ------------------------------------------------------------
ピン#157: 実例検索ツールの見出しの下線が ::after の白(255,255,255)で
背景に埋もれていた。他ページと同じ金の線一本に揃える。
ピン#156: 「検索画面に戻る」を「← 選択ページに戻る」に変更（view側）。
------------------------------------------------------------ */
/* 見出し下の装飾線は ::after で中央に短く置く作り。位置と形はそのままに、
白から金へ変えて他ページと同じ色にする */
/* 他ページの見出しは「文字幅いっぱい・3px・金・文字から20px下」で統一されている。
旧サイトの72px固定の白い装飾線は消し、同じ形の border-bottom へ置き換える */
body.rn-legacy #case h2::after,
body.rn-legacy #search h2::after { content: none !important; }
body.rn-legacy #case h2,
body.rn-legacy #search h2 {
display: table !important;
width: auto !important;
margin-left: auto !important;
margin-right: auto !important;
padding-bottom: 12px !important; /* line-height 分を差し引き、文字下20pxに揃える */
border-bottom: 3px solid var(--kin);
}
/* h3 側にも同じ形の黒い線(::before)があり、金線とすぐ下で二重に見えていた。
見出しの線は h2 の金線一本に統一する */
body.rn-legacy #case h3::before,
body.rn-legacy #search h3::before { content: none !important; }
/* 「← 選択ページに戻る」は文頭に矢印があるため、ボタン既定の右向き矢印は消す */
body.rn-legacy a.rn-back-link::after { content: none !important; }
/* 実例検索の結果・検索画面は padding が vw 指定で画面幅に比例して膨らみ、
見出しから一覧までの空きが過大になっていたため詰める */
body.rn-legacy #case { padding-bottom: 80px !important; }
/* 金線の直下に本文が来るため、他ページと同じ 23px 相当を空ける */
body.rn-legacy #case h3,
body.rn-legacy #search h3 { padding-top: 18px !important; }
body.rn-legacy #case .btn { margin-top: 28px !important; }
body.rn-legacy #case ul.case_list { margin-top: 40px !important; }
/* ピン#160: メディア一覧のロゴが縦1列になっていた。renewal.css の
.rn img { display:block } により画像が1つずつ改行されていたため、
この一覧だけインライン配置に戻して横に並べる refs #748 */
body.rn-legacy .listImg img { display: inline-block; vertical-align: top; }
/* ページ内リンクの飛び先が追従ヘッダーの下に隠れるため、
他ページと同じく scroll-margin-top でヘッダーぶんを空ける refs #748 */
body.rn-legacy [id^="list"] { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* ハッピーポイントの説明文で「100|円」のように数値と単位が分断されるため文節折返しにする refs #770 */
body#use.rn-legacy .pointWrap_inner p.mgB20 { word-break: keep-all; line-break: strict; }
/* 2026-09-15 refs #829: 本文(DB)に が無いため keep-all だと日本語が折り返せず、SP(390px)で説明文が最大284pxはみ出し、
外枠 [class*="section-img"] の overflow:hidden で右端が切れていた。対応ブラウザ(Chrome等)は文節で折り返し(auto-phrase)、
非対応(Safari等)は keep-all のまま、はみ出す場合だけ折り返す(overflow-wrap:anywhere)。 */
body#use.rn-legacy .pointWrap_inner p.mgB20 { word-break: auto-phrase; overflow-wrap: anywhere; text-align: left; text-justify: auto; }
/* ↑ 両端揃え（justify）のままだと、文節で折り返した行の字間が「納 品 時」のように大きく開くため左揃えにする */
/* ============================================================
PinRemark #148(260902): 『幸』Vol.24 の抜粋ページ（/sachi/vol24.html）の冒頭・末尾 refs #770
メインビジュアルを持たないため、見出しだけで頁の顔をつくる。
幅は本文カラム(.mainTxt)に揃える。sachi.css の h1 装飾（左罫線）は打ち消す
============================================================ */
body.rn-legacy .sachi-excerpt-head { max-width: 1100px; margin: 44px auto 8px; padding: 0 20px; box-sizing: border-box; }
body.rn-legacy .sachi-excerpt-head .eyebrow {
margin: 0 0 12px; font-size: 12px; letter-spacing: .18em; color: var(--kin-text);
}
body.rn-legacy .sachi-excerpt-head h1 {
margin: 0; padding: 0 0 16px; border: 0; border-bottom: 3px solid var(--kin);
font-family: var(--font-display); font-weight: 600;
font-size: clamp(22px, 2.6vw, 32px); line-height: 1.6; letter-spacing: .06em; color: var(--ink);
background: none; text-align: left;
}
body.rn-legacy .sachi-excerpt-head .lead { margin: 14px 0 0; font-size: 14.5px; color: var(--grey); }
body.rn-legacy .sachi-excerpt-src {
max-width: 1100px; margin: 40px auto 20px; padding: 0 20px; box-sizing: border-box; font-size: 13px; color: var(--grey);
}
body.rn-legacy .sachi-excerpt-src a { color: var(--murasaki); margin-left: .6em; }
/* 縦長の図版（掛軸など）がカラム幅いっぱいに拡大されて巨大化するのを抑える */
body.rn-legacy .sachi .sectionBox .imgBox img { max-height: 560px; width: auto; max-width: 100%; }
@media (max-width: 991px) {
body.rn-legacy .sachi-excerpt-head { margin-top: 20px; padding: 0 16px; }
body.rn-legacy .sachi-excerpt-head h1 { font-size: 22px; }
body.rn-legacy .sachi .sectionBox .imgBox img { max-height: 420px; }
}
/* ============================================================
「ケアメンテの仕事の流れ」の再構成 (single-carementeh-flow.php) refs #788
14工程を番号付きの章として、見出し→リード→本文→写真の順に。
参考 kileina.jp/concept/ の余白と静けさをリニューアルのトークンで再現する。
============================================================ */
body.rn-legacy .rn-flowpage .content { padding-bottom: 20px; }
body.rn-legacy .rn-flowpage .LColumn.flow { max-width: 1100px; margin: 0 auto; float: none; width: auto; }
/* 冒頭 */
body.rn-legacy .rn-flow-intro { max-width: 820px; margin: 48px 0 64px; }
body.rn-legacy .rn-flow-intro h1 {
margin: 14px 0 22px; font-family: var(--font-display); font-weight: 600;
font-size: clamp(26px, 3vw, 38px); line-height: 1.55; letter-spacing: .06em; color: var(--ink);
border: 0; background: none; text-align: left; padding: 0;
}
body.rn-legacy .rn-flow-intro-lead { font-size: 15.5px; line-height: 2.1; color: var(--ink); margin: 0 0 12px; }
body.rn-legacy .rn-flow-intro-sub { font-size: 14px; line-height: 2; color: var(--grey); margin: 0; }
/* 章 */
body.rn-legacy .rn-flow-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
body.rn-legacy .rn-flow-step { padding: 56px 0 64px; border-top: 1px solid var(--line); }
body.rn-legacy .rn-flow-step:first-child { border-top: 0; padding-top: 0; }
body.rn-legacy .rn-flow-step-head { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; }
body.rn-legacy .rn-flow-no {
font-family: var(--font-num); font-size: 15px; letter-spacing: .12em; color: var(--kin-text);
flex: 0 0 auto;
}
body.rn-legacy .rn-flow-ico {
flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
background: var(--murasaki); display: inline-flex; align-items: center; justify-content: center;
}
body.rn-legacy .rn-flow-ico img { width: 32px; height: 32px; display: block; }
body.rn-legacy .rn-flow-name {
margin: 0; font-family: var(--font-display); font-weight: 600;
font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .06em; line-height: 1.5; color: var(--ink);
border: 0; padding: 0; background: none;
}
body.rn-legacy .rn-flow-step-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px 56px; align-items: start; }
body.rn-legacy .rn-flow-lead {
margin: 0 0 18px; font-family: var(--font-body); font-weight: 700;
font-size: 16px; line-height: 1.8; letter-spacing: .04em; color: var(--murasaki);
border: 0; padding: 0; background: none;
}
body.rn-legacy .rn-flow-text p { font-size: 14.5px; line-height: 2.1; color: var(--ink); margin: 0 0 14px; }
body.rn-legacy .rn-flow-text p b { font-weight: 700; color: var(--ink); }
body.rn-legacy .rn-flow-note { font-size: 12.5px !important; color: var(--grey) !important; line-height: 1.9 !important; }
body.rn-legacy .rn-flow-links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
body.rn-legacy .rn-flow-links li { margin: 0; }
body.rn-legacy .rn-flow-links .rn-tlink { font-size: 14px; }
/* 写真: PinRemark #313(260923 橋本様)再指摘 refs #861: 複数枚は「優しい包装」と同じく
横並び・同じ大きさで揃える（従来はgapのみでgrid-template-columns未指定のため縦積みになっていた） */
body.rn-legacy .rn-flow-photos { display: grid; grid-template-columns: 1fr; gap: 14px; }
body.rn-legacy .rn-flow-photos--2,
body.rn-legacy .rn-flow-photos--3 { grid-template-columns: repeat(var(--rn-flow-photo-count, 2), 1fr); }
body.rn-legacy .rn-flow-photos--2 { --rn-flow-photo-count: 2; }
body.rn-legacy .rn-flow-photos--3 { --rn-flow-photo-count: 3; }
body.rn-legacy .rn-flow-photos img {
width: 100%; height: auto; display: block; border-radius: 6px;
box-shadow: 0 8px 24px rgba(59, 51, 64, .08);
}
@media (max-width: 991px) {
body.rn-legacy .rn-flow-intro { margin: 28px 0 44px; }
body.rn-legacy .rn-flow-step { padding: 40px 0 44px; }
body.rn-legacy .rn-flow-step-body { grid-template-columns: 1fr; gap: 22px; }
/* SPでも「#02 ○ 見出し」を1行に。見出しは残り幅で折り返し、左揃えに */
body.rn-legacy .rn-flow-step-head { gap: 12px; align-items: center; }
body.rn-legacy .rn-flow-ico { width: 44px; height: 44px; }
body.rn-legacy .rn-flow-ico img { width: 26px; height: 26px; }
body.rn-legacy .rn-flow-no { font-size: 13px; }
body.rn-legacy .rn-flow-name { flex: 1 1 0; min-width: 0; font-size: 19px; text-align: left; }
}
/* ============================================================
PinRemark #173 / #201〜#204 (260903) refs #791
============================================================ */
/* #173: /sachi/（幸トップ・各号共通）のメイン画像を現行サイトと同じ画面横幅いっぱいへ。
renewalシェルでは .content が max-width:1160px のため、100vw で breakout する。
100vw はスクロールバー分はみ出すため、#Contents 側で clip して横スクロールを出さない */
body.rn-legacy #Contents.sachi { overflow-x: clip; }
body.rn-legacy .sachi .mainCover {
width: 100vw; margin-left: calc(50% - 50vw);
}
body.rn-legacy .sachi .mainCover .cover img { width: 100%; height: auto; }
/* #201: ポイント「ため方」3列が内容幅なり（283/318/511px）で不揃いに見えるズレを均等割へ。
PC(≥992px)のみ。SPは縦積みのため対象外 */
@media (min-width: 992px) {
body#use.rn-legacy .pointBox02 .pointWrap .pointWrap_inner { flex: 1 1 0; min-width: 0; }
}
/* #202: 語源ページ「3つのe」の白線アイコンが生成り地に溶けて見えないため、
紫(--murasaki)へ再着色した画像（img/renewal/）に差し替える */
body#carementeh.rn-legacy .content #etymology-topic-1 .etymology-icon { background-image: url("../img/renewal/icon_etymology1-murasaki.png"); }
body#carementeh.rn-legacy .content #etymology-topic-2 .etymology-icon { background-image: url("../img/renewal/icon_etymology2-murasaki.png"); }
body#carementeh.rn-legacy .content #etymology-topic-3 .etymology-icon { background-image: url("../img/renewal/icon_etymology3-murasaki.png"); }
/* #203: ワードローブ「ここがちがう！」の下線が白(3px solid #fff)で見えないため、
他ページの見出し下線と同じ金茶(--kin)へ */
body#carementeh.rn-legacy .service .content .wardrobe h3 span { border-bottom-color: var(--kin); }
/* #204: 同ページ3列の白線アイコン（背景画像）も紫へ再着色した画像に差し替える */
body#carementeh.rn-legacy .service .content .wardrobe #wardrobeDetail1 { background-image: url("../img/renewal/wardrobe_icon_1-murasaki.png"); }
body#carementeh.rn-legacy .service .content .wardrobe #wardrobeDetail2 { background-image: url("../img/renewal/wardrobe_icon_2-murasaki.png"); }
body#carementeh.rn-legacy .service .content .wardrobe #wardrobeDetail3 { background-image: url("../img/renewal/wardrobe_icon_3-murasaki.png"); }
/* ============================================================
PinRemark #225 (260905/260909) refs #828
============================================================ */
/* #225: 京染悉皆とリプロン（/technology/data/tradition/ripron-2/）冒頭の広告画像（元画像 720px）が
本文幅いっぱい（1112px）に引き伸ばされて大きすぎるため、本文幅の70%・最大500px相当へ縮小し中央寄せ。
堤様が当社推奨案（本文幅の70%程度・中央寄せ）を承諾。SP(<768px)は画面が狭いので幅いっぱいのまま */
body#technology.rn-legacy .LColumn.ripron-2 .section-imgCenter > img.mgB10 {
display: block;
width: 70%;
max-width: 500px;
height: auto;
margin: 0 auto 10px;
}
@media (max-width: 767px) {
body#technology.rn-legacy .LColumn.ripron-2 .section-imgCenter > img.mgB10 { width: 100%; max-width: none; }
}
/* PinRemark #216 (260905/260909) refs #828
ワードローブ詳細ページの旧料金表を削除し、価格表ページの保管料金(#hokan)へ飛ぶボタンに置換
（本文は tools/rn-update-wardrobe-216.php で更新）。見出し直下に置くボタンなので中央寄せにする */
body#carementeh.rn-legacy .service .content .rn-wardrobe-price-link {
text-align: left; /* #255(260910) refs #846: ID・パスワード申込ボタンの直下へ移したので左揃えに */
margin: 4px 0 36px;
}
/* refs #840 QAゲート: /use/howtoorder/web/ 「「送り状伝票」のご準備の必要はありません」(h4) が
金(#c4a971)×生成り地で 2.07:1 だったため、文字用の濃い金(--kin-text, refs #656 と同じ対処)へ */
body#use.rn-legacy .howtoorder_pickupImg .howtoorder_pickupImgR h4 { color: var(--kin-text); }
/* ============================================================
PinRemark 260909〜260910 分 refs #846
============================================================ */
/* #250: 『幸』バックナンバーの並びが float の高さ差で崩れる（2段目が3列目から始まる）ため grid で整列 */
body.rn-legacy #backnumber ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 2%; }
body.rn-legacy #backnumber li { float: none; width: auto; margin: 0; }
@media (max-width: 767px) {
body.rn-legacy #backnumber ul { grid-template-columns: repeat(4, 1fr); gap: 30px 2%; }
}
/* #261: /use/howtoorder/web/ KV 見出しの下に添える集荷時間の一文（本文は DB。tools/rn-update-howtoorder-web-846.php） */
body#use.rn-legacy .howtoorder_web_tit .rn-kv-note {
display: block; margin-top: 10px; max-width: 30em;
font-size: 13.5px; font-weight: 400; line-height: 1.8; letter-spacing: 0;
word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
@media (max-width: 767px) {
body#use.rn-legacy .howtoorder_web_tit .rn-kv-note { font-size: 12px; max-width: none; }
}
/* #264: 提携SHOP 持込特典（3点）をカード状に。バッジ「特典 N」は既存 h6 span の体裁を継ぐ */
body#shop.rn-legacy .rn-shop-benefits { margin: 10px 0 30px; }
body#shop.rn-legacy .rn-shop-benefit {
background: #fff; border: 1px solid var(--fuji-2); border-radius: 12px;
padding: 18px 22px; margin: 0 0 14px;
}
body#shop.rn-legacy .rn-shop-benefit h6 {
display: block; margin: 0 0 8px; padding: 0; font-size: 17px; font-weight: 700; line-height: 1.7; color: var(--ink);
}
body#shop.rn-legacy .rn-shop-benefit h6 span { display: inline-block; vertical-align: middle; margin-right: 12px; }
body#shop.rn-legacy .rn-shop-benefit h6 strong { color: var(--murasaki); }
body#shop.rn-legacy .rn-shop-benefit p { margin: 0; line-height: 1.9; font-size: 14px; }
@media (max-width: 767px) {
body#shop.rn-legacy .rn-shop-benefit { padding: 14px 16px; }
body#shop.rn-legacy .rn-shop-benefit h6 { font-size: 15.5px; }
}
/* #264 QAゲート: SPで「特典 N」バッジ（紫地）の文字が body.rn-legacy span{color:var(--ink)} に負けて沈む（1.46:1）→ 白へ */
body#shop.rn-legacy .rn-shop-benefit h6 span { color: #fff !important; }
/* vol23 QAゲート: 副題（赤 #ce1724 × 灰地 #cacad4 = 3.42:1）を濃い赤へ。フッタ差替えで触ったページのため */
body.rn-legacy .subtitle_vol23 { color: #8f0d16; }
/* ============================================================
ご利用履歴一覧テーブル SP: 横はみ出し・列崩れをカード型に組み替え
(橋本様メール9/18 スクショ② / PinRemark #303) refs #861
- 旧CSSは5列を%指定+inline styleで押し込んでおり、SPで「カルテNo」等が縦割れ・右端切れしていた
- 1件=1カード: 上段に項目ラベル付き2列、下段にカルテ詳細/PDFボタン
============================================================ */
@media (max-width: 960px) {
body#mypage.rn-legacy .mainContents .historyTable:not(.detail),
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) > tbody { display: block; width: 100%; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) { border-radius: 14px; overflow: visible; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:first-child { display: none; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr {
margin: 0 !important; padding: 0; border-bottom: 0;
}
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line {
display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 8px;
padding: 14px 14px 0; border-top: 1px solid var(--line);
}
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line:nth-child(2) { border-top: 0; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
width: auto !important; padding: 4px 0 !important; border: 0 !important;
font-size: 14px; line-height: 1.35; text-align: left !important; background: transparent;
grid-column: span 2; min-width: 0;
}
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td:nth-child(1),
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td:nth-child(2) { grid-column: span 3; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td::before {
float: none; font-size: 11px; font-weight: normal; color: #6b6070; letter-spacing: .04em;
}
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td:nth-child(1)::before { content: "カルテNo"; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td:nth-child(2)::before { content: "カウンセリング日"; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td:nth-child(3)::before { content: "入金状況"; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td:nth-child(4)::before { content: "合計金額"; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr.remove-upper-line td:nth-child(5)::before { content: "利用点数"; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 14px 14px;
}
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) td:empty { display: none; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) button:not(.dropbtn) {
display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; padding: 7px 14px !important; line-height: 1.2;
}
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) button:not(.dropbtn) img { float: none !important; width: 16px !important; height: auto; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) .dropdown { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px !important; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) .dropbtn { padding: 4px 12px !important; height: auto; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) td {
display: block; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent;
}
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) td > * { float: none !important; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) td .dropdown { font-size: 12px !important; }
body#mypage.rn-legacy .mainContents .historyTable:not(.detail) tr:not(.remove-upper-line):not(:first-child) td button { font-size: 12px; }
/* PinRemark #312(260920 橋本様・SP390px) refs #861: 「ただいまのお預かり品」一覧(ordered/index.html)は
tr に remove-upper-line が付いておらずカード化・見出し表示が効いていなかった。列構成もhistoryTable
(入金状況あり)と異なる(合計金額・ご利用点数・詳細ボタン)ため、ラベルと詳細ボタンの並びを個別に定義する */
/* td内が 数値単位 の2ノードのため、column方向のflexだと数値と単位が別行に割れる。
行方向+wrapにしてラベル(::before)だけ幅100%で改行させ、数値+単位は同じ行に収める */
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(3),
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(4) {
flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 2px;
grid-column: span 3; /* PinRemark #312(260923再指摘): ご利用点数の頭をカウンセリング日(右半分)に揃える */
}
/* PinRemark #312(260923再指摘): 詳細ボタン列に共通ルール(5列目=「利用点数」)のラベルが出ていたため消す */
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(5)::before { content: none; }
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(3)::before,
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(4)::before {
width: 100%;
}
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(3)::before { content: "合計金額"; }
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(4)::before { content: "ご利用点数"; }
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(5) {
grid-column: span 6; align-items: stretch;
}
body#mypage.rn-legacy .mainContents.ordered .historyTable:not(.detail) tr.remove-upper-line td:nth-child(5) input[type="button"] {
width: 100%; margin-top: 4px; padding: 10px 0 !important;
}
}
/* マイページ: 生成り背景に白の線・白枠が溶けて見えない/見出し文字が右にズレる問題 (PinRemark #303, 橋本様メール9/18) refs #861
旧 #mypage .mainContents h2 {background:#fff; padding-left:75px} がリニューアル見出し定義に詳細度で勝っていた */
body#mypage.rn-legacy #mypage_nav { border-bottom: 0; }
body#mypage.rn-legacy .mainContents #mypagetab .tab_contents { border-top: 0; }
body#mypage.rn-legacy:not(.sns_top) .mainContents h2 {
background: transparent; border-radius: 0; margin-top: 0; padding: 14px 0 6px;
font-size: clamp(22px, 3vw, 30px);
}
/* つなぐ（フレンド一覧・メッセージ・参加コミュニティ一覧）: リニューアルの見出し定義（金線・余白）が旧 sns.css の下線と重なり、
見出しの文字に線が掛かって見えた。つなぐは上の :not() で見出し定義から外し、現行サイトと同じ見た目に戻す。
旧 mypage.css の白地（生成り背景で白い板に見える）だけ消す refs #920 */
body#mypage.rn-legacy.sns_top .mainContents h2,
body.rn-legacy.sns_community .mainContents h2 { background: transparent; }
/* つなぐ: 右カラム（Happy 掲示板）は PC では旧 sns.css で非表示だが SP では本文の下に出ていた。
現行サイトの SNS トップと同じく SP でも出さない（PC の左カラムの掲示板は .mainSide 側で別物） refs #920 */
body.rn-legacy.sns_top .mypageArea .mypageSub,
body.rn-legacy.sns_community .mypageArea .mypageSub { display: none; }
/* つなぐ: メッセージ一覧の日付(#999)・コミュニティ一覧の「フォロー済」(白 on #ccc)を WCAG AA に refs #920 */
body.rn-legacy .messageTime { color: var(--grey); }
body.rn-legacy .top_community .followset a { background-color: var(--grey); }
body.rn-legacy .top_community .followset a:hover { background-color: var(--ink); }
/* つなぐ SP タブ: 選択中（紫地）のラベルがリニューアルの墨色(span)で読めなかった。旧 sns_dummy.css と同じ白に戻す refs #920 */
body.rn-legacy .mypageHead li.current a span { color: #fff; }
/* コミュニティ一覧 SP: トップコミュニティのアイコン(img, display:block)が左詰めで、名前・ボタンより左に寄っていた refs #920 */
body.rn-legacy .top_community ul li > a > img { margin-left: auto; margin-right: auto; }
/* ==== PinRemark #328〜#338（260926 つなぐトップ）refs #921 ==== */
/* #334: SP 下部メニューが旧ページだけ墨色（上の a/span 一括指定）になっていた。他ページと同じ紫に */
body.rn-legacy .rn-spbar a,
body.rn-legacy .rn-spbar span { color: var(--murasaki); }
/* #330: つなぐは背景を白に（現行サイトと同じ）。body.rn-legacy / #pankuzu-wrapp の生成り指定が !important のため同じく !important */
body.rn-legacy.sns_top,
body.rn-legacy.sns_community,
body.rn-legacy.sns_top #pankuzu-wrapp,
body.rn-legacy.sns_community #pankuzu-wrapp { background: #fff !important; }
/* #329: 左メニューの矢印が右端に貼り付き、アイコンも大きかった。「きづく」(.happyOrder2) と同じ位置・大きさに */
body.rn-legacy .mypageArea .mainSide .happyOrder a,
body.rn-legacy .mypageArea .mainSide .happyOrder a:hover { background-position: calc(100% - 25px) 25px; }
body.rn-legacy .mypageArea .mainSide .happyOrder img { width: 24px; }
/* #332: 「さがす」を「きづく」と同じ 2 行の実例集ハブ導線に（renewal.css の .happyOrder2.rn-review-sagasu と同じ組み方） */
body.rn-legacy .mypageArea .happyOrder.rn-review-sagasu a {
display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: center; line-height: 1.5;
padding-right: 40px;
}
body.rn-legacy .mypageArea .happyOrder.rn-review-sagasu img { grid-row: 1 / span 2; width: 22px; margin: 0; padding: 0; }
/* #331: 「参加コミュニティ一覧」「コミュニティを探す」を横並びに（左右 float の合計幅が枠を超えて 2 つ目が下に落ちていた） */
body.rn-legacy .mainSide .userCommunity .userCommunityBtn1,
body.rn-legacy .mainSide .userCommunity .userCommunityBtn2 { float: left; width: calc(50% - 3px); box-sizing: border-box; margin-left: 0; margin-right: 0; }
body.rn-legacy .mainSide .userCommunity .userCommunityBtn2 { margin-left: 6px; }
body.rn-legacy .mainSide .userCommunity .userCommunityBtn1 a,
body.rn-legacy .mainSide .userCommunity .userCommunityBtn2 a { box-sizing: border-box; width: 100%; padding-left: 4px; padding-right: 4px; text-align: center; white-space: nowrap; }
body.rn-legacy .mainSide .userCommunity .userCommunityAdd { clear: both; }
/* 旧 /_assets テンプレート（body#pTop: フレンドを探す・他会員のフレンド/参加コミュニティ）の見出し: 旧 mypage.css の縦棒(h2::after)が
リニューアルの金線・余白と重なって先頭の文字に掛かっていた。リニューアルの見出しに揃え縦棒は消す */
body#pTop.rn-legacy .mainContents h2::after { content: none; }
@media screen and (max-width: 640px) {
/* #333: SP で外側 19.5px＋本文 24px＋フォーム 24px の余白が重なり、投稿枠が 390px 中 303px しかなかった。現行サイトのように広げる */
body.rn-legacy.sns_top .mypageArea,
body.rn-legacy.sns_community .mypageArea { margin-left: 12px; margin-right: 12px; }
body.rn-legacy.sns_top .mypageArea .mainContents,
body.rn-legacy.sns_community .mypageArea .mainContents { padding-left: 0; padding-right: 0; }
body.rn-legacy.sns_top .mainContents #form_1 { padding: 16px; }
/* #336: SP はファイル選択(65%)と公開範囲＋投稿ボタン(30%)の左右 2 段で、右側が狭く「∨」と文言が重なり「投稿する」が見切れていた。
ファイル選択を全幅にし、その下に公開範囲と投稿ボタンを横並びにする */
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .postingBottom { float: none; width: 100%; }
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .postingImgBtn input[type="file"] { width: 100%; box-sizing: border-box; }
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .postingBottom + .postingBottom { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .postingBottom + .postingBottom .privacy { flex: 1 1 auto; float: none; width: auto; margin: 0; }
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .privacy label,
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .privacy select { display: block; width: 100%; box-sizing: border-box; }
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .privacy select { padding-right: 32px; }
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .postingBottom + .postingBottom .postingBtnArea { flex: 0 0 auto; float: none; width: auto; margin: 0; }
body.rn-legacy.sns_top .mypageArea .postingForm .SPpart .postingBtnArea button { width: auto; padding: 0 22px; white-space: nowrap; }
/* #337: コメント欄。フォーム全体の白カード（入力欄とボタンが同じ枠の中）をやめ、現行サイトと同じく
「コメントを入力」は枠内左上・薄いグレー、「コメントする」は紫文字で枠の外の右下に */
body.rn-legacy.sns_top .postingReplay form,
body.rn-legacy.sns_community .postingReplay form { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
body.rn-legacy.sns_top .postingReplay form::after,
body.rn-legacy.sns_community .postingReplay form::after { content: ""; display: block; clear: both; }
body.rn-legacy.sns_top .postingReplay textarea,
body.rn-legacy.sns_community .postingReplay textarea {
display: block; width: 100%; box-sizing: border-box; min-height: 64px; margin: 0;
padding: 8px 10px; border: 1px solid var(--line); background: #fff;
font-size: 13px; line-height: 1.6; text-align: left; color: var(--ink);
}
body.rn-legacy.sns_top .postingReplay textarea::placeholder,
body.rn-legacy.sns_community .postingReplay textarea::placeholder { color: #767676; } /* 薄いグレー（白地で AA を満たす最も薄い灰） */
body.rn-legacy.sns_top .postingReplay button.response_submit,
body.rn-legacy.sns_community .postingReplay button.response_submit { float: right; width: auto; height: auto; margin: 6px 0 0; padding: 4px 0; background: transparent; }
body.rn-legacy.sns_top .postingReplay button.response_submit span,
body.rn-legacy.sns_community .postingReplay button.response_submit span { color: var(--murasaki); font-size: 13px; font-weight: 700; }
}
/* 旧 /_assets テンプレート（body#pTop: フレンドを探す・他会員のフレンド/参加コミュニティ・ワードローブ検索・お預かり品一覧）の
コントラスト不足を WCAG AA に（旧ヘッダーの二重表示を直してリニューアル側で見えるようになったため） refs #920 */
body#pTop.rn-legacy .userFriendsName a,
body#pTop.rn-legacy .userCommunityName a,
body#pTop.rn-legacy .postingArea .userName a { color: var(--kin-text); }
body#pTop.rn-legacy .userProfile .userNumber,
body#pTop.rn-legacy .userProfile .userPoint,
body#pTop.rn-legacy .userProfile .userNumber .rn-nb { color: var(--grey); }
body#pTop.rn-legacy .karteItem .itemStatus span { background-color: var(--grey); }
@media screen and (max-width: 640px) {
body#pTop.rn-legacy .karteItem .itemStatus { background-color: var(--grey); }
}
body#pTop.rn-legacy .pickupMessage .messageBox { background-color: var(--kin-text); border-color: var(--kin-text); }
body#pTop.rn-legacy .pickupMessage .messageBox,
body#pTop.rn-legacy .pickupMessage .messageBox p,
body#pTop.rn-legacy .pickupMessage .messageBox a { color: #fff; }
body#pTop.rn-legacy .pickupMessage::after { border-left-color: var(--kin-text); }
/* PinRemark #301(260917) refs #861: 事例詳細の汚れ・状態図(白背景のJPG)が生成り背景の上で白い板に見える。
写真自体は触らず、図(.status_img / .status_img_figure)だけ multiply で白を背景色に溶かす
（今田様: 白背景の余白が目立たない方でご希望。透過PNG化なしで実現） */
body#careSearch.rn-legacy #case_detail .status_img img,
body#careSearch.rn-legacy #case_detail .status_img_figure img { mix-blend-mode: multiply; }
/* PinRemark #303(260919 今田様再指摘) refs #861: 過去のご利用履歴一覧 PC の表
旧CSS(mypage_editing.css)の tr{display:flex; border-bottom:1px #eee} tr:first-child{border-bottom:2px solid #050505}
がPC幅で刷新側に漏れ、ヘッダ下に黒い太線・colspan行だけ短くズレた細線が出ていた。
SP(≤960px)は上のカード型組み替えに任せ、PC幅だけ通常の表(table-row/cell)に戻す */
@media (min-width: 961px) {
body#mypage.rn-legacy .mainContents .historyTable { margin: 30px 0; }
body#mypage.rn-legacy .mainContents .historyTable tr {
display: table-row; padding: 0; margin: 0 !important; border: 0;
}
body#mypage.rn-legacy .mainContents .historyTable th,
body#mypage.rn-legacy .mainContents .historyTable td { display: table-cell; width: auto; }
body#mypage.rn-legacy .mainContents .historyTable td { padding: 14px; font-size: 13.5px; }
body#mypage.rn-legacy .mainContents .historyTable td::before { content: none; }
}
/* 履歴なしメッセージの inline color:red (#f00 × 白 = 4.0:1) をAA(4.5:1)以上へ */
body#mypage.rn-legacy .mainContents .historyTable td div[style*="color:red"] { color: #c62828 !important; }
/* ============================================================
ご利用履歴ページの体裁整理 (小山ログイン確認 260919 / PinRemark #308・#303) refs #861
・検索の「開く」を「お預かり品別の検索」の右横へ (PC/SP)
・SP: 旧 .container の margin-right:-16px による右寄り、ナビ「ケアメン|テ」、見出し/タブの孤立行
・PC: 表の「6,325|円」「合計|金額」「PDF…請求|書」折返しとボタン行の崩れ
============================================================ */
body#mypage.rn-legacy .mainContents .karteSearch {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
/* PinRemark #303(今田様) refs #861: 「お預かり品別の検索」の枠が白の1px枠(旧CSS: 1px solid #FFF)で
生成り背景に溶けて見えなかった。下の表(1px solid #e2d8cf)と同じ色・白背景のカードにして輪郭を出す */
border: 1px solid #e2d8cf; background: #fff; border-radius: 10px;
}
/* PinRemark #303(今田様) refs #861: 「検索ボックスをカードに」(body.rn-legacy .mainContents form)が検索枠の中の