/*レスポンシブ*/@media screen and (min-width: 769px) {.fieldset-vertical .form-control {padding-left: 12px;}/** フリーページ **/.pane-header + .pane-globalnav + .block-faq,.pane-header + .pane-globalnav + .block-guide,.pane-header + .pane-globalnav + .block-privacy {max-width: var(--responsive-sys-container-width);margin: 24px auto 80px;padding-top: 162px;}.block-faq h1,.block-guide h1,.block-privacy h1 {margin-bottom: 9px;padding: 16px 0;}.block-faq-intro,.block-guide-intro {margin-bottom: 68px;}.block-faq-intro--text,.block-guide-intro--text {margin-bottom: 30px;}.block-faq-intro--nav,.block-guide-intro--nav {display: flex;flex-wrap: wrap;column-gap: 20px;row-gap: 12px;}.block-faq-intro--nav li,.block-guide-intro--nav li {width: 275px;}.block-faq-intro--nav li a,.block-guide-intro--nav li a {padding: 27px 0;border-radius: 5px;text-align: center;}.block-guide-intro--nav li:not(:last-child) {margin-bottom: 0;}.block-faq-intro--nav li span,.block-guide-intro--nav li span {position: relative;padding-right: 17px;font-size: 16px;}.block-faq-intro--nav li span:after,.block-guide-intro--nav span:after {content: "";position: absolute;top: 6px;right: 0;width: 8px;height: 8px;transform: rotate(45deg);border-right: 1px solid #111;border-bottom: 1px solid #111;}.block-faq-intro--nav a:after,.block-guide-intro--nav a:after {content: none;}.block-faq-section:not(:last-child),.block-guide-section:not(:last-child) {margin-bottom: 68px;}.block-faq h2,.block-guide h2 {padding: 12px 0;}.block-privacy h2 {padding-bottom: 12px;}.block-faq-section,.block-guide-section {scroll-margin-top: 162px;}.block-faq-section dt {padding: 10px 24px;background: #f0f0f0;cursor: pointer;}.block-faq-section dt:before,.block-faq-section dt:after {right: 24px;}.block-faq-section dt span {padding-left: 40px;font-size: 18px;}.block-privacy-section:not(:last-child) {margin-bottom: 68px;}.block-guide-section--box:not(:last-child) {margin-bottom: 28px;}.block-guide-section--text {margin-bottom: 0;font-size: 14px;}.block-guide h3 {margin-bottom: 16px;padding: 12px 0;font-size: 18px;}/* ランディングページ */.block-landingpage h2[class^="block-landingpage"] {margin: 60px 0 20px 0;font-size: 24px;font-weight: 500;}.block-landingpage .block-landingpage-login--member > h2[class^="block-landingpage"],.block-landingpage-form > h2[class^="block-landingpage"],.block-landingpage-order--host > h2[class^="block-landingpage"] {margin: 0 0 20px 0;}.block-landingpage .block-landingpage-login--member > h2.block-landingpage-login--first-time-header {margin: 60px 0 20px 0;}#lp_clear_skin .item-frame .desc-box .pop {font-size: 40px;font-weight: bold;}#lp_clear_skin #sec_main .desc-box .text {font-size: 16px;line-height: 1.6;}#lp_clear_skin #sec_main .button.days10 a {width: 240px;height: 40px;border-radius: 40px;font-size: 18px;line-height: 38px;}#lp_clear_skin #sec_story .pop {font-size: 26px;}#lp_clear_skin #sec_story .button.days10 a {width: 320px;}#lp_clear_skin #sec_story .kome-list li {font-size: 12px;}#lp_clear_skin .item-frame .desc-box .text,#lp_clear_skin #sec_offer .notice-list li,.pane-landingpage-contents .detail-box .dl-table dt,.pane-landingpage-contents .detail-box .dl-table dd {font-size: 14px;}#lp_clear_skin .item-frame .desc-box .text {margin: 0 0 20px;font-weight: bold;}#lp_clear_skin .item-frame .item-desc {font-size: 16px;font-weight: normal;}#lp_clear_skin #sec_nayami .line01 {font-size: 22px;}#lp_clear_skin #sec_nayami h2 {margin: 0 0 50px 0;font-size: 50px;}#lp_clear_skin #sec_nayami .nayami-list {margin: 0 0 50px 0;}#lp_clear_skin #sec_nayami .nayami-list li {width: 280px;height: 280px;margin: 0 20px;font-size: 48px;}#lp_clear_skin #sec_nayami .line01 {margin: 0 0 50px 0;}#lp_clear_skin #sec_offer .details {padding: 80px 100px;}#lp_clear_skin #sec_offer .ttl-point {margin: 0 0 45px 0;font-size: 32px;}#lp_clear_skin #sec_offer .point-list {margin: 0 0 40px 0;}#lp_clear_skin #sec_offer .point-list li {width: 17.5%;}#lp_clear_skin #sec_offer .middle-text {font-size: 19px;}#lp_clear_skin #sec_offer .trial-button {margin: 60px 0;}#lp_clear_skin #sec_offer .trial-button a {height: 120px;background: linear-gradient(90deg, rgba(213, 8, 8, 1) 0%, rgba(237, 9, 141, 1) 100%);font-size: 35px;line-height: 120px;}.pane-landingpage-contents .detail-box .detail-ttl,.pane-landingpage-contents #frmLP .action-buttons .btn.btn-primary {font-size: 20px;}.pane-landingpage-contents .detail-box .dl-table dt {width: 25%;padding: 20px;}.pane-landingpage-contents .detail-box .dl-table dd {width: 75%;padding: 20px;}.pane-landingpage-contents .detail-box .notice-list li,.pane-landingpage-contents .detail-box p {font-size: unset;}.block-landingpage-login--member .block-landingpage-login--member-body {margin: 0;}.pane-landingpage-contents #frmLP .action-buttons .btn.btn-primary[name="order"] {width: 520px;padding: 20px 0;}}/* ====================================================================ここから新規追加==================================================================== *//* --- ヘッダー --- */.block-header-info-frame {background: #0084B9;}.block-header-info-frame .block-header-info {color: #ffffff;}/* --- 右側メニューの基準点を設定 --- */.block-headernav--item-list.right-list {position: relative;}/* ヘッダーロゴの表示サイズ拡大（レスポンシブ対応）*//* BEM規則によるロゴ画像クラスの基本定義補正（念のための記述） */.block-header-logo img,.block-header-logo--img {width: 100%;height: auto;}/* PC表示（769px以上）でのロゴサイズ拡張 */@media screen and (min-width: 769px) {.pane-header .block-header-logo {width: 180px;/* PC用：標準は132px */}}/* スマートフォン表示（768px以下）でのロゴサイズ拡張 */@media screen and (max-width: 768px) {.pane-header .block-header-nav .block-header-logo {width: 180px;/* スマホ用：標準は90px */}}/* --新規会員登録のアイコン制御@@@アイコン画像変えたい場合はコチラから、ログイン,買い物かごは別途@@@-- */.block-headernav--item-entry a {display: block;width: 40px;height: 40px;background: url(../../img/usr/common/ico_bookmark.png) center center / auto auto no-repeat;font-size: 0;}/* ② PC表示時（769px以上）：文字サイズの復元と余白・位置の調整 */@media screen and (min-width: 769px) {.block-header-nav .block-headernav--item-list > li.block-headernav--item-entry a {display: flex;align-items: center;width: auto;outline: 0;background-position: left;font-size: 12px;}.block-header-nav .block-headernav--item-list > li.block-headernav--item-entry a > span.block-headernav--item-text {margin-left: 30px;vertical-align: middle;}}@media screen and (min-width: 769px) {/* 1. 検索ブロック全体が他のヘッダー要素（ウェルカムメッセージ等）に潰されるのを防ぐ */.block-global-search {flex-shrink: 0;}/* 2. ボタン要素枠の縮小を防止 */.block-global-search .block-global-search--searchdetail {flex-shrink: 0;}/* 3. 「商品検索」のテキストが文字の途中で2行に折れ曲がるのを絶対防止 */.block-global-search .block-global-search--searchdetail a {white-space: nowrap;/* ★文字の折り返しを禁止 */word-break: keep-all;/* 単語途中での改行を防止 */}}/* --- ようこそ文言 --- */.header-welcome-message {position: absolute;right: 0;/* 右端にピタッと合わせる */top: -15px;/* アイコンの上に浮かせる（※位置がずれる場合はこの数値を調整してください） */font-size: 12px;color: #333;white-space: nowrap;/* 文字の折り返し防止 */list-style: none;}/* ====================================================================PC用・SP用画像の汎用切り替え設定（ページ全体共通）==================================================================== *//* 1. 通常時（PC表示）：PC用を「表示」、スマホ用を「非表示」に */.for-pc-img {display: block !important;}.for-sp-img {display: none !important;}/* 2. スマホ表示時（768px以下）：PC用を「非表示」、スマホ用を「表示」に */@media screen and (max-width: 768px) {.for-pc-img {display: none !important;}.for-sp-img {display: block !important;}}/* --- フッター全体（コピーライト含む）背景色・文字色の統一 --- */#footer,.pane-footer,.block-footernav-top,.block-footernav,.block-footer-sns,.block-copyright {background-color: #f0f0f0;}.block-footernav-top a,.block-footernav a,.block-copyright {color: #666;}.block-copyright {padding: 15px 0;text-align: center;}/* ==============---- トップページ：関連サイト（横並び・間隔調整） ---=============================== *//* リスト全体を横並びにする設定 */ul.block-top-related-site--list {display: flex;/* 要素を横並びにする */flex-wrap: wrap;/* 画面幅が狭い場合は自動で折り返す */justify-content: center;/* バナー全体を中央寄せにする */gap: 20px;/* バナー同士の間隔を20px空ける */padding: 0;margin: 0;list-style: none;}/* 各バナーのサイズ設定 */ul.block-top-related-site--list > li {width: calc(50% - 10px);/* スマホ閲覧時は2列になるように計算 */max-width: 240px;/* PC閲覧時に画像が大きくなりすぎないよう最大幅を固定 */margin: 0;}/* 【統合調整】リンクと画像・文字の配置調整 */ul.block-top-related-site--list > li a {display: block;text-align: center;/* ★追加：中のバナー画像とテキストを縦並びで完全に中央揃えにします */text-decoration: none;/* ★追加：文字の下線を非表示にします */transition: opacity 0.3s;/* ホバー時のアニメーション */}/* バナーホバー時の見た目調整（画像と文字が連動してスマートに透けます） */ul.block-top-related-site--list > li a:hover {opacity: 0.7;/* マウスを乗せた時に少し透かす */}ul.block-top-related-site--list > li img {width: 100%;height: auto;vertical-align: top;}/* バナー画像下部テキストのスタイリング */ul.block-top-related-site--list .block-top-related-site--text {display: block;margin-top: 10px;/* バナー画像とのすき間（10px） */font-size: 14px;/* テキストのフォントサイズ */color: #111;/* ブランドデザインに馴染む落ち着いたダークグレー */font-weight: normal;}/* ページ内リンク（アンカー）移動を滑らかにする設定 */html {scroll-behavior: smooth;}/* ============== NEW ITEM（新作商品バナー）専用サイズ設定 ============== */.block-top-new-item ul.block-top-related-site--list > li {width: 100%;max-width: 600px;}/* ==============フリーページ共通（サイトご利用規約・ご利用にあたって など）のデザインと左右余白追加=================== *//* --- フリーページ全体コンテナ（画面端の密着防止余白設定） --- */.freepage_.temp01_ {padding-left: 20px;padding-right: 20px;box-sizing: border-box;}/* スマホ表示（768px以下）での左右余白微調整 */@media screen and (max-width: 768px) {.freepage_.temp01_ {padding-left: 15px;padding-right: 15px;}}/* --- 見出し（H1・H2・H3）の共通デザイン --- *//* 大見出し (H1) */.freepage_.temp01_ h1,.freepage_.temp01_ .common_headline1_,.block-faq h1,.block-guide h1,.block-privacy h1 {background-color: #f0f7fc;/* 薄い水色の背景 */border-left: 6px solid #0084B9;/* 左側の青い太線 */padding: 15px 20px;margin-top: 0;margin-bottom: 30px;font-size: 22px;font-weight: bold;color: #333;}/* 中見出し (H2) */.freepage_.temp01_ h2,.freepage_.temp01_ .common_headline2_,.block-faq h2,.block-guide h2,.block-privacy h2 {border-bottom: 2px solid #0084B9;/* 下部の青い実線 */padding-bottom: 10px;margin-top: 40px;margin-bottom: 20px;font-size: 18px;font-weight: bold;color: #333;}/* 小見出し (H3) */.freepage_.temp01_ h3,.freepage_.temp01_ .common_headline3_ {font-size: 16px;font-weight: bold;color: #333;margin-top: 25px;margin-bottom: 12px;}/* --- 文章（段落）のレイアウト --- */.freepage_.temp01_ p,.freepage_.temp01_ .text_ {line-height: 1.8;margin-bottom: 15px;}/* --- リスト（UL / LI）のレイアウト整列 --- */.freepage_.temp01_ ul,.freepage_.temp01_ ul.list01_ {margin-bottom: 20px;padding-left: 0;}/* 1階層目のリストアイテム */.freepage_.temp01_ ul > li,.freepage_.temp01_ ul.list01_ > li {line-height: 1.8;margin-bottom: 8px;}/* 1階層目：番号・記号付きぶら下がりインデント */.freepage_.temp01_ ul.list01_ > li,.freepage_.temp01_ ul:not(.list01_) > li {text-indent: -1.5em;padding-left: 1.5em;}/* 2階層目（入れ子）のリスト設定（インデント崩れを正常化） */.freepage_.temp01_ ul ul {margin-top: 6px;margin-bottom: 6px;padding-left: 0;}.freepage_.temp01_ ul ul > li {text-indent: 0;/* 1階層目のマイナスインデントをリセット */padding-left: 1.2em;/* 2階層目の字下げ位置 */position: relative;}/* --- リンクの装飾（YKK APブルーを適用） --- */.freepage_.temp01_ a:not(.btn) {text-decoration: underline;color: #0084B9;padding: 0 3px;}.freepage_.temp01_ a:hover {text-decoration: none;opacity: 0.8;}/* ====================================================================「戻る」ボタン共通デザイン（全ページ汎用設定）==================================================================== */.back_button_,.freepage_.temp01_ .back_button_ {margin-top: 30px;}.back_button_ a,.freepage_.temp01_ .back_button_ a {display: block;width: 250px;margin: 0 auto;border: 1px solid #e6e6e6;padding: 1px;text-decoration: none;text-align: center;color: #565656;font-weight: bold;font-size: 15px;position: relative;background: #fff;}.back_button_ a span,.freepage_.temp01_ .back_button_ a span {background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 100%);padding: 15px 10px;display: block;}/* ボタン右下の青い三角アイコン */.back_button_ a:before,.freepage_.temp01_ .back_button_ a:before {content: "";position: absolute;bottom: 2px;right: 2px;width: 0;height: 0;border: 4px solid transparent;border-right-color: #0084B9;border-bottom-color: #0084B9;}.back_button_ a:hover,.freepage_.temp01_ .back_button_ a:hover {opacity: 0.7;}/* --- 表（テーブル）のレイアウト --- */.freepage_.temp01_ table {width: 100%;margin-top: 10px;margin-bottom: 30px;border-collapse: collapse;/* 枠線を綺麗に1本にまとめる */}.freepage_.temp01_ table th,.freepage_.temp01_ table td {border: 1px solid #e6e6e6;/* 薄いグレーの枠線 */padding: 15px 10px;/* 上下15px、左右10pxのゆったりした余白 */line-height: 1.6;}.freepage_.temp01_ table th {width: 30%;background-color: #fafafa;/* 旧サイト準拠：薄いグレーの背景 */font-weight: bold;text-align: center;/* 旧サイト準拠：文字を中央揃え */vertical-align: middle;}.freepage_.temp01_ table td {width: 70%;text-align: left;background-color: #fff;}/* スマホ閲覧時（画面幅768px以下）は表を縦積みにする */@media screen and (max-width: 768px) {.freepage_.temp01_ table th,.freepage_.temp01_ table td {display: block;width: 100%;/* 横幅を100%にして縦に並べる */}.freepage_.temp01_ table th {text-align: left;/* スマホでは中央揃えより左揃えの方が見やすいため変更 */background-color: #f0f7fc;/* スマホの時はYKK APブルー系の薄い水色で分かりやすく */}}/* --- フリーページ内のアクションボタンを大きく目立たせる（他ページには影響しません） --- */.freepage_.temp01_ .action-buttons .action .btn {font-size: 18px;/* 文字を大きく */font-weight: bold;/* 文字を太く */padding: 18px 40px;/* 上下・左右の余白を増やしてボタンの面積を拡大 */min-width: 360px;/* ボタンの横幅を広めに確保 */border-radius: 4px;/* 角に少しだけ丸みをつけてクリックしやすく（お好みで） */}/* スマホ閲覧時（画面幅768px以下）のボタンサイズ調整 */@media screen and (max-width: 768px) {.freepage_.temp01_ .action-buttons .action .btn {width: 100%;/* スマホでは画面横幅いっぱいに広げる */min-width: auto;padding: 15px 10px;font-size: 16px;}}/* --- ご利用ガイド：ステップ見出し（H3）と数字のデザイン --- */.block-guide .block-guide-step h3 {font-size: 20px;font-weight: bold;color: #333;border-bottom: 2px solid #0084B9;padding-bottom: 10px;margin-top: 40px;margin-bottom: 20px;display: flex;align-items: baseline;}/* 数字部分の装飾 */.block-guide .block-guide-step h3 .step-num {color: #0084B9;/* YKK APブルー */font-size: 24px;/* 数字を少し大きめに強調 */font-weight: bold;margin-right: 15px;/* 文章とのスペースをしっかり空ける */}/* 数字の後に自動で「.（ピリオド）」をつける */.block-guide .block-guide-step h3 .step-num::after {content: ".";}/* ====================================================================会員規約ページ==================================================================== *//* ---- 会員規約（同意画面）スクロール枠のレスポンシブ調整 ---- */form[name="agreebody"] {display: block;width: 100%;height: 250px;overflow-y: scroll;border: 1px solid #ccc;padding: 15px;background-color: #fff;box-sizing: border-box;font-size: 14px;line-height: 1.6;text-align: left;}@media screen and (max-width: 768px) {form[name="agreebody"] {height: 180px;/* スマートフォンではスクロール枠を少し低くし、同意ボタンを押しやすく調整 */padding: 10px;font-size: 12px;/* スマホ画面で可読性の高い文字サイズに微調整 */line-height: 1.5;}}/* ========================================TOPスライダー初期表示の縦積み防止======================================== */#top-slider-warp {overflow: hidden;}#top-slider-warp:not(.swiper-initialized) #top-slider > li:not(:first-child) {display: none;}/* ========================================カテゴリーページ======================================== *//* カテゴリサムネイル画像の表示枠サイズの変更 */.block-category-style-g--image {width: 120px;/* お好みの横幅を指定 */height: 120px;/* お好みの高さを指定 */margin: 0 auto 10px;/* 中央寄せと下の余白 */}.block-category-style-g--image figure.img-center {width: 100%;height: 100%;}.block-category-style-g--image figure.img-center img {width: 100%;height: 100%;object-fit: contain;/* 正方形枠内で画像を潰さず綺麗に収める指定 */}