@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
/* CSS Document */

/********************************************************************/

/* HTMLタグ要素 */

/********************************************************************/

/* 2026-10-25 整理: 本文の書体はおちゃのこのテンプレート設定(Noto Serif JP)で決まる。
   ここにあった游明朝の指定はテンプレートに負けて効いていなかったため削除 */
body {
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF;
}

A,
A:link,
A:visited,
A:hover,
A:active {
    color: #000000;
    text-decoration: none;
    outline: none;
}

.use_hover A:hover {
    color: #666666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    margin-bottom: 5px;
}

h1 {
    font-size: 161.6%;
}

h2 {
    font-size: 133.5%;
}

h3 {
    font-size: 124%;
}

h4 {
    font-size: 111.1%;
}

h5 {
    font-size: 106%;
}

h6 {
    font-size: 108%;
}


/********************************************************************/

/* 大外 */

/********************************************************************/

#container {
    font-size: 108%;
}


/********************************************************************/

/* トップページコンテンツ間余白 */

/********************************************************************/

.main_box,
.side_box {
    margin-bottom: 12px;
}


/********************************************************************/

/* キャッチフレーズ欄 */

/********************************************************************/

/* キャッチフレーズ上部スペースをスッキリさせるため非表示にしている(display: none)。
   (2026-10-25 整理: 以前のコメントは「visibility: hidden を追加」だったが、実際のコードは display: none) */
.copy {
    min-height: 18px;
    padding: 5px 5px 0px;
    font-size: 85%;
    display: none;
}


/********************************************************************/

/* ヘッダー */

/********************************************************************/

#header {
    position: relative;
    background-color: #FFFFFF;
    border-bottom: 1px solid #D6D6D6;
}


/********************************************************************/

/* ショップ名 */

/********************************************************************/

/* ショップ名ロゴ */
.shoplogo {
    padding: 0px;
}

/* ロゴのpaddingを5→0に変更2022.03.07 */

.use_hover .shoplogo A:hover img {
    opacity: 0.8;
}

/* ショップ名テキスト */
.shoptext {
    padding: 3px 0px;
    min-height: 40px;
    margin-right: auto;
}

.shoptext A {
    font-size: 116%;
    margin: 0px;
}


/********************************************************************/

/* 文字サイズ */

/********************************************************************/

.font_setting {
    padding: 5px 5px 10px;
    text-align: center;
}

.header_font_setting .set_font_title {
    color: #000000;
}

/* 文字サイズ画像 */
.set_font_normal,
.set_font_large {
    width: 45px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: left top;
    -webkit-background-size: 45px 60px;
    background-size: 45px 60px;
}

/* 普通画像 */
.set_font_normal {
    background-image: url(img/font_default.gif);
}

/* 大画像 */
.set_font_large {
    margin-left: 5px;
    background-image: url(img/font_large.gif);
}

/* 文字サイズ画像マウスオーバー、選択中 */
.use_hover .font_setting .set_font_normal:hover,
.use_hover .font_setting .set_font_large:hover,
.font_setting .nav_on {
    background-position: left bottom;
}


/********************************************************************/

/* ヘッダーナビ */

/********************************************************************/

/* 各ナビゲーション */
.inner_header_nav .nav_btn {
    background-color: #eee;
    border: 0px solid #FF0000;
    color: #000000;
}

.use_hover .inner_header_nav .nav_btn:hover {
    background-color: #FFECEC;
    color: #000000;
}


/*************************************************************/

/* 検索 */

/*************************************************************/

/* 2026-10-25 整理: .search_bar .search の背景色(黒)はテンプレートに負けて効いていなかったため削除 */


/*************************************************************/

/* グローバルナビゲーション */

/*************************************************************/

.global_nav {
    background-color: #FFFFFF;
    border-bottom: 1px solid #D6D6D6;
}

/* 各ナビゲーション */
.inner_global_nav .nav_btn {
    border-right: 1px solid #D6D6D6;
    border-bottom: 3px solid #FFFFFF;
    background-color: #FFFFFF;
    color: #333333;
    font-weight: normal;
    text-align: center;
}

.use_hover .inner_global_nav .nav_btn:hover {
    border-bottom: 3px solid #FF0000;
    color: #333333;
}

.global_nav_item:first-child .nav_btn {
    border-left: 1px solid #D6D6D6;
}


/********************************************************************/

/* 開閉ナビゲーション */

/********************************************************************/

.inner_popup_nav_area,
.inner_popup_menu_area {
    background-color: #F9F9F9;
    color: #000000;
}

/* 各ナビゲーション */
.inner_popup_nav .nav_btn {
    background-color: #F9F9F9;
    border-top: 1px dotted #CCCCCC;
    font-weight: normal;
    color: #000000;
}

.use_hover .inner_popup_nav .nav_btn:hover {
    background-color: #E0E0E0;
    color: #333333;
}

/* 開閉ナビゲーション閉じるボタン */
.nav_close_box .nav_close {
    background-color: #222222;
}

.use_hover .nav_close_box .nav_close:hover {
    background-color: #333333;
}


/********************************************************************/

/* メインナビゲーション */

/********************************************************************/

/* 各ナビゲーション */
.inner_side_nav .nav_btn,
.inner_main_nav .nav_btn {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    color: #000000;
}

.use_hover .inner_side_nav .nav_btn:hover ,
.use_hover .inner_main_nav .nav_btn:hover {
    background-color: #EDEDED;
    color: #000000;
}

/* フリーページナビゲーション背景 */
.freepage_nav .inner_freepage_nav .nav_btn {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
}

.use_hover .freepage_nav .inner_freepage_nav .nav_btn:hover {
    background-color: #EDEDED;
}


/********************************************************************/

/* カテゴリ、特集ナビゲーション */

/********************************************************************/

.itemlist_nav {
    margin-top: 15px;
}

/* 各ナビゲーション */
.inner_itemlist_nav .nav_btn {
    background-color: #FFFFFF;
    border-bottom: 1px solid #D6D6D6;
    font-weight: normal;
    color: #000000;
}

.use_hover .inner_itemlist_nav .nav_btn:hover {
    background-color: #EDEDED;
    color: #000000;
}

/********************************************************************/

/* サイドメニュー */

/********************************************************************/

/* サイドメニュー枠 */
.open_side_col .side_container {
    background-color: #FFFFFF;
}

/* サイドカテゴリ一覧 */
.side_itemlist_nav {
    padding: 0px 1px;
}

/* サブカテゴリ　第二階層 */
.side_itemlist_nav .sub_menu_link {
    padding: 10px 24px 10px 10px;
}

/* サブカテゴリ背景 */
.side_itemlist_nav .sub_menu_link {
    background-color: #F9F9F9;
    border-top: none;
    border-left: 1px solid #D6D6D6;
    border-right: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

/* マウスオーバー */
.use_hover .side_itemlist_nav .side_itemlist_nav_link:hover {
    background-color: #EDEDED;
    color: #000000;
}


/********************************************************************/

/* フッターナビゲーション */

/********************************************************************/

.footer_nav {
    background-color: #EDEDED;
}

/* 各ナビゲーション */
.footer_nav_item {
    color: #333333;
}

.footer_nav_item .nav_btn {
    border-bottom: 1px dotted #CCCCCC;
    color: #333333;
}

.use_hover .footer_nav_item .nav_btn:hover {
    background-color: #FFFFFF;
}


/********************************************************************/

/* タイトル */

/********************************************************************/

.side_box h2,
.main_box h2 {
    padding: 12px 10px;
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 5px;
    color: #000000;
}

.category_nav_box h2,
.pickupcategory_nav_box h2 {
    background-color: #F5F5F5;
}


/********************************************************************/

/* 第二階層タイトル */

/********************************************************************/

/* 第二階層各ページタイトル */
.page_box .page_title h1,
.page_box .page_title h2,
.page_box .recently .section_title h2,
.page_box .use_emphasis_title .section_title h2 {
    background-color: #F5F5F5;
    border: 0px solid #D6D6D6;
    border-radius: 5px;
    padding: 12px 10px;
    color: #000000;
}

.shoppingcart_page_body .page_box .page_title h2 {
    margin-bottom: 10px;
}


/********************************************************************/

/* 第二階層サブタイトル */

/********************************************************************/

/* 各ページサブタイトル */
.page_box .section_title h2,
.page_box .section_title h3 {
    background-color: #FFFFFF;
    border-bottom: 1px solid #D6D6D6;
    border-radius: 3px;
    padding: 10px;
    color: #000000;
}

.page_box #cart_preview .section_title h3 {
    margin-bottom: 10px;
}

.page_box .help_contents .section_title h4 {
    margin-top: 10px;
}

.page_box .section_title h4 {
    border-bottom: 1px solid #D6D6D6;
    padding: 10px 5px;
}

.page_box .page_contents .search_result_title h3 {
    margin-top: 10px;
}


/********************************************************************/

/* 第二階層小項目タイトル */

/********************************************************************/

.contents_title {
    border-bottom: 1px solid #D6D6D6;
    padding: 8px 5px;
    font-weight: normal;
    font-size: 116%;
    color: #000000;
}

.rules_title {
    font-weight: bold;
}


/********************************************************************/

/* フォームタイトル */

/********************************************************************/

.form_title {
    border-bottom: 1px solid #D6D6D6;
    padding: 8px 5px;
    font-weight: normal;
    font-size: 116%;
    color: #000000;
}

.form_inner_title {
    border-bottom: 1px dotted #CCCCCC;
    font-weight: bold;
    color: #000000;
}


/********************************************************************/

/* タイトル文字サイズ */

/********************************************************************/

.page_title h1,
.page_title h2,
.section_title h1,
.section_title h2 {
    margin: 0px 2px;
    font-size: 123.1%;
    font-weight: normal;
}

.page_title h3,
.section_title h3 {
    margin: 0px 2px;
    font-size: 116%;
    font-weight: normal;
}

.page_title h4,
.page_title h5,
.page_title h6,
.section_title h4,
.section_title h5,
.section_title h6 {
    margin: 0px;
    font-size: 100%;
    font-weight: bold;
}

.shoppingcart_page_body .section_title h4 {
    margin: 0px;
    font-size: 116%;
    font-weight: normal;
}


/********************************************************************/

/* メインコンテンツ */

/********************************************************************/

/********************************************************************/

/* 一覧
・写真のみ表示
・説明付き表示
・商品一覧ページ(写真のみ、説明付き)
・最新情報、店長日記
・ソート
*/

/********************************************************************/


/*--------------------------------------*/

/* 写真のみ表示  */

/*--------------------------------------*/

/* 説明付き背景リセット */
.layout_photo .item_data {
    background-image: none;
    border-bottom: none;
}

/* サムネイル写真 */
.layout_photo .list_item_photo {
    /* 2026-10-25 整理: 上下余白 5px はテンプレートに負けて効いていなかったため削除 */
    text-align: center;
}

/* 一覧枠 */
.layout_photo .list_item_data {
    padding: 5px 1px;
}

/* もっと見る */
.more_item {
    padding: 10px 5px 0px 5px;
    display: block;
    border-top: 1px solid #D6D6D6;
    text-align: right;
}

.more_item .general_btn {
    padding: 5px;
    font-size: 85%;
}

/* 写真のみ文字サイズ */
.layout_photo .item_data_link {
    font-size: 85%;
}

.layout_photo .col2 .item_data_link {
    font-size: 93%;
}


/*--------------------------------------*/

/* 説明付き */

/*--------------------------------------*/

/* リンク */
.layout_column_text .list_item_box,
.layout_text .not_link {
    border-bottom: 1px solid #D6D6D6;
}

.list_item_data p.item_desc {
    color: #000000;
}


/*--------------------------------------*/

/* 商品一覧  */

/*--------------------------------------*/

/* 商品、記事一覧マウスオーバー */
.use_hover .item_list .item_data_link:hover,
.use_hover .item_list .list_item_link:hover {
    opacity: 0.7;
}

/* 商品名 */
.item_name {
    font-weight: bold;
}

.list_item_data p.item_name {
    margin-bottom: 3px;
}

/* 販売価格 */
.price {
    padding: 2px 0px;
    color: #000000;
    font-weight: bold;
}

.price .selling_price,
.price .regular_price {
    padding: 2px 0px;
}

/* 通常販売価格 */
.price .regular_price {
    color: #000000;
    font-weight: normal;
    display: block;
}

.item_box .text_layout .regular_price {
    display: inline;
}

/* 希望小売価格、税込価格 */
.item_box .retail_price,
.item_box .tax_incl_price {
    color: #666666;
    font-weight: normal;
    word-break: normal;
}

/* 在庫あり */
.stock {
    color: #666666;
    font-size: 93%;
}

/* 在庫僅か */
.lowstock {
    color: #990000;
}

/* 在庫なし */
.soldout,
.variation_stock_list .data_table .soldout {
    color: #0000FF;
}

/* レビュー件数 */
.item_info .review_number {
    color: #000000;
}

/* 商品一覧ランキングNo. */
.rankno {
    color: #FFFFFF;
    background-color: #FFA64D;
}

.item_data .rankno1 {
    background-color: #FF0000;
}


/*--------------------------------------*/

/* 記事一覧  */

/*--------------------------------------*/

/* タイトル */
.list_subject {
    padding: 5px 0px;
}

/* 日付 */
.date {
    color: #000000;
    font-size: 93%;
    font-weight: normal;
}


/*--------------------------------------*/

/* ソート */

/*--------------------------------------*/


/* ソート項目枠 */


.sort_box {
display: inline-block;
    padding: 3px;
    margin: 3px;
}

.sort_item .global_btn {
display: inline-block;
    padding: 3px;
    text-align: center;
}

/* 件数 */
.item_count {
    font-size: 93%;
}




/********************************************************************/

/* スライド */

/********************************************************************/

/* スライド送りボタン */
.slider_box .swiper-pagination-bullet,
.swipe_list .pointer span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid #D6D6D6;
    /* 2026-10-25 整理: 正円(border-radius: 50%)はテンプレートに負けて効いていなかったため削除 */
    cursor: pointer;
}

/* 現スライド */
.slider_box .swiper-pagination-bullet-active,
.swipe_list .pointer span.current {
    /* 2026-10-25 整理: 背景色 #777 はテンプレートに負けて効いていなかったため削除 */
    border: 1px solid #777;
}

#photo .slider_box .swiper-pagination-bullet,
#photo .swipe_list .pointer span,
#photo .slider_box .swiper-pagination-bullet-active,
#photo .swipe_list .pointer span.current {
    border: none;
}

/* 前へ、次へアイコン */
.swipe_list .pointer_box span.pointer_prev,
.swipe_list .pointer_box span.pointer_next,
.swiper-button-prev,
.swiper-button-next {
    width: 25px;
    height: 25px;
    background-color: #F5F5F5;
    border: 0px solid #D6D6D6;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.use_hover .swiper-button-prev:hover,
.use_hover .swiper-button-next:hover {
    background-color: #D6D6D6;
}

.use_hover .slider_box .swiper-button-disabled:hover {
    background-color: #F5F5F5;
}

/* 前へアイコン画像 */
.swipe_list .pointer_box span.pointer_prev,
.swiper-button-prev {
    background-image: url(img/icon_prev.gif);
    -webkit-background-size: 25px 25px;
    background-size: 25px 25px;
}

/* 次へアイコン画像 */
.swipe_list .pointer_box span.pointer_next,
.swiper-button-next {
    background-image: url(img/icon_next.gif);
    -webkit-background-size: 25px 25px;
    background-size: 25px 25px;
}


/********************************************************************/

/* 第二階層 */

/********************************************************************/

.page_box {
    color: #000000;
}

/* 共通説明 */
.page_desc {
    padding: 10px;
}

/* 共通ボックス */
.global_info {
    background-color: #FFFFEE;
    border: 1px solid #D6D6D6;
    /* 2026-10-25 整理: 内側余白 10px はテンプレートに負けて効いていなかったため削除 */
}


/********************************************************************/

/* 商品詳細 */

/********************************************************************/

/* 商品情報　各ブロック */
.detail_section {
    border-bottom: 1px solid #D6D6D6;
}

/* 商品情報　商品名 */
.detail_item_data h1,
.detail_item_data .item_name {
    font-size: 123.1%;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 商品詳細　価格エリアdivタグ間余白 */
.detail_item_data .section_box {
    margin-bottom: 10px;
}

/* 商品詳細　価格エリア項目間余白 */
.detail_item_data .section_box p {
    margin-bottom: 5px;
}

/* 商品詳細　販売価格 */
.detail_item_data .selling_price {
    font-size: 123.1%;
    word-break: normal;
}

/* 商品詳細　販売価格金額 */
.detail_item_data .selling_price .figure {
    font-weight: bold;
}

/* 商品詳細　通常販売価格 */
.detail_item_data .regular_price {
    font-size: 85%;
}

/* 商品詳細　希望小売価格、税込価格 */
.detail_item_data .retail_price,
.detail_item_data .tax_incl_price {
    display: none;
}

/* ↑もともとあった希望小売価格の色のコードを、上の display: none にして希望小売価格を出ないようにしている。
   (2026-10-25 整理: もとのコードはコメントアウトしたつもりが失敗して生きていたため削除。あわせて、
    残っていたコメントの閉じ記号に壊されて捨てられていた「販売価格ラベル font-weight: normal」も削除。
    販売価格の見た目は今までどおり) */

/* 商品詳細　在庫 */
.detail_item_data .stock {
    font-size: 108%;
    font-weight: bold;
}

/* 商品情報　商品説明 */
.item_desc {
    margin: 0px;
}

/* 価格変動注意書き */
.price_desc {
    font-size: 77%;
}

/* 商品仕様 */
.detail_spec_data {
    margin: 0px;
}

/* 他の写真枠 */
.other_item_data {
    margin: 0px;
}

.other_item_data .global_photo {
    text-align: center;
}

/* 他の写真説明 */
.other_photo_desc {
    margin: 0px;
}

/* ソーシャルツール */
.social_tool {
    padding-bottom: 5px;
}

/* バリエーション在庫表 */
.variation_stock_list {
    margin-bottom: 5px;
    max-width: 540px;
}

/* バリエーション、オーダーメイド項目間余白 */
.variation_item,
.order_item {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* オーダーメイド項目 */
.order_item {
    border-bottom: 1px dotted #CCCCCC;
}

.ordermade .bottompos {
    border-bottom: none;
}

/* 在庫数のラベルなし */
.hidden_stock .stocklist_data {
    text-align: center;
}

/* バリエーション在庫選択中背景 */
.variation_stock_list .data_table .selected_item {
    background-color: #FFFFEE;
    color: #FF0000;
}

.variation_stock_list .data_table .selected_data {
    background-color: #FFFFEE;
}


/*--------------------------------------*/
/* バリエーション選択のポップアップ */

/* ポップアップ枠 */
.popup_variation,
.popup_area {
    background-color: #FFFFFF;
    /* 2026-10-25 整理: 「border: 1p solid #D6D6D6」(px の x 抜け)はブラウザが読めず効いていなかったため削除 */
    text-align: left;
}

.popup_variation_selection,
.popup_section {
    border-bottom: 1px solid #D6D6D6;
}

/* バリエーション項目ボタン */
.popup_variation_button,
.item_selection_button {
    background-color: #F5F5F5;
    border: 2px solid #CCCCCC;
}

/* 選択中 */
.selected_option .popup_variation_button,
.selected_option .item_selection_button {
    background-color: #FFFFEE;
    border: 2px solid #333333;
    color: #CC0000;
}

/* 変更、選択してくださいボタン */
.popup_variation_edit_button,
.popup_variation_select_button,
.item_select_operation_button {
    background-image: url(img/btn_main.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: #F9F9F9;
    color: #333333;
}

.popup_variation_value,
.variation_selection_value,
.item_selection_value {
    color: #000000;
    font-weight: bold;
}

/* 選択済み枠 */
.variation_selection_box .validation_selection_selected_all,
.use_hover .variation_selection_box .validation_selection_selected_all:hover {
    background-color: #FFFFEE;
    border: 2px solid #333333;
    color: #000000;
}

.validation_selection_selected_all .variation_selection_msg_text {
    background-image: url(img/btn_main.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: #F9F9F9;
    color: #333333;
}


/*--------------------------------------*/
/* サムネイル写真 */

.thumbnail {
    margin-top: 5px;
}

/* サムネイル写真 */
.thumbnail .thumbnail_btn {
    border: 2px solid #FFFFFF;
}

.thumbnail .current .thumbnail_btn {
    border: 2px solid #FF0000;
}

/* サムネイル写真枠サイズ */
.thumbnail_listbox {
    width: 60px;
}


/*************************************************************/

/* レビュー */

/*************************************************************/

.large_rating_icon .rating_point {
    font-size: 153.9%;
}

.medium_rating_icon .rating_point {
    font-size: 123.1%;
}

/* 星ポイント */
.rating_point {
    margin-left: 10px;
    color: #EF9D35;
}

/* レビュー数 */
.review_number {
    margin-left: 10px;
}

/* グラフ */
.bar_graph {
    background-color: #EF9D35;
}

/* 年代 */
.rating_age {
    font-size: 93%;
}

/* 分析レポート内レビュー数 */
.rating_number A {
    font-size: 93%;
}

/* レビュー一覧 */
.review_data {
    border-bottom: 1px dotted #000000;
}

.mypagereview_contents .review_data {
    border-bottom: none;
}

/* レビュータイトル */
.review_title {
    font-size: 123.9%;
    font-weight: bold;
}

.itemdetail .review_data .review_title,
.mypagereview_contents .review_data .review_title {
    font-size: 108%;
}

/* 登録日 */
.review_postdate {
    background-image: url(img/h2_bg.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: #444444;
    color: #FFFFFF;
}

/* メモ */
.review_note {
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

.detail_page_body .review_note {
    border-top: 1px solid #D6D6D6;
    border-bottom: none;
}

/* ショップオーナー返信 */
.owner_note {
    border-bottom: 1px solid #D6D6D6;
}

/* ショップオーナーヘッダー */
.owner_header {
    font-size: 93%;
    color: #CC0000;
}

/* ショップオーナー登録日 */
.owner_postdate {
    display: inline-block;
    margin-left: 5px;
}

/* 参考質問数字 */
.user_number {
    font-size: 123.9%;
    font-weight: bold;
    color: #EF9D35;
}

/* 参考質問ボタン */
.review_vote_btn {
    display: block;
    margin-top: 5px;
}

/* 商品一覧レビュー数 */
.itemlist .review_number {
    font-size: 85%;
    margin-left: 5px;
}

/* 商品詳細レビュー数 */
.review_list .review_number {
    font-size: 93%;
}

/* 商品詳細ヘッダー */
.detail_review_header {
    padding-top: 10px;
}

/* 商品詳細、マイページレビュー管理ボタン */
.review_admin .global_btn {
    border-top: 1px solid #D6D6D6;
    text-align: center;
}

.detail_review_header .global_btn {
    text-align: center;
}


/********************************************************************/

/* ログイン */

/********************************************************************/

/* ID、PW枠 */
.signin_box .id_box,
.signin_box .pass_box {
    margin: 0px;
}

/* ID、PWタイトル */
.signin_box .id_title,
.signin_box .pass_title {
    margin-bottom: 10px;
    border-bottom: 1px solid #D6D6D6;
    font-size: 116%;
    font-weight: bold;
}

.signin_box .password .global_link {
    font-size: 85%;
}

/* 新規登録枠 */
#register_form {
    padding-top: 20px;
    border-top: 1px solid #D6D6D6;
}


/********************************************************************/

/* カート */

/********************************************************************/

/* カートの中身各枠 */
.inner_cart_data {
    margin-bottom: 10px;
    border: 1px solid #D6D6D6;
    background-color: #FFFFFF;
    border-radius: 5px;
}

/* 各項目枠 */
.cart_section {
    border-top: 1px solid #D6D6D6;
}

/* 区切り線 */
.top_separator {
    border-top: 1px solid #D6D6D6;
}

.bottom_separator {
    border-bottom: 1px solid #D6D6D6;
}

/* 各項目ラベル */
.cart_label {
    font-weight: normal;
}

/* ボタン中央寄せ */
.cart_inner_btn {
    text-align: center;
}

/* 小計、送料 */
.cart_sub_total_price,
.cart_shipping_charge {
    text-align: right;
}

/* 合計 */
.cart_footer {
    text-align: right;
}

.grand_total {
    display: inline-block;
    border-bottom: 2px solid #D6D6D6;
    margin-bottom: 5px;
}

.grandtotal_price {
    font-size: 153.9%;
    color: #990000;
}

/* 買い物を続ける */
.continue_shopping {
    text-align: right;
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

/* 送り主、お届け先追加変更ボタン */
.cart_recipient .global_btn {
    text-align: center;
}

/* お届け先名 */
.cart_recipient_title {
    border-left: 5px solid #FF0000;
}

/* ラジオボタン選択の強調表示 */
.checked_row {
    background-color: #FFFFCC;
}

.form_area .checked_row > .form_title,
.form_inner_area .checked_row > .form_inner_title {
    color: #CC0000;
}

/* リピータ向け決済機能用 */
.inner_global_info {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
}

/* クーポン/ポイント枠 */
.toggle_box .cart_point,
.toggle_box .box_padding,
.toggle_box .cart_point_notice {
    margin: 1px;
}


/* クーポン/ポイント変更時の金額を更新ボタン欄、強調表示背景 */
.notice_box .form_btn_spad {
    background-color: #FFFFCC;
}


/*************************************************************/

/* ステップ表 */

/*************************************************************/

.step_list {
    margin: 10px 0px;
    padding: 0px 2px;
}

/* ステップ表 各枠背景 */
.step_data {
    background-color: #F5F5F5;
    border-bottom: 1px solid #F1F1F1;
    border-right: 1px solid #FFFFFF;
    text-align: center;
}

/* ステップ表 右端 */
.step_list .posright .step_data {
    border-right: none;
}

/* ステップ表 各枠　現ページ */
.step_check .step_data {
    background-color: #FF0000;
}

/* ステップ表 文字 */
.step_data span {
    color: #666666;
}

/* ステップ表 ステップ数 */
.step_data .step_number {
    /* 2026-10-25 整理: 書体の指定は単語が途中で改行されて割れていて(font-fami / ly)効いていなかったため削除 */
    font-weight: bold;
}

/* ステップ表 現ページ文字 */
.step_check .step_data span {
    color: #FFFFFF;
}


/********************************************************************/

/* 最新情報、店長日記 */

/********************************************************************/

/* 日付 */
.article_date {
    border-bottom: 1px solid #D6D6D6;
    margin-bottom: 10px;
}

.format {
    font-size: 77%;
}

/* 記事 */
.ph_article {
    font-size: 108%;
}

/* バックナンバー */
.count_number {
    font-size: 93%;
}


/********************************************************************/

/* ご利用案内 */

/********************************************************************/

/* 上部ページ内リンクのナビゲーション */
.anchor_nav_area .nav_btn {
    border: 1px solid #D6D6D6;
    background-color: #F5F5F5;
}

.use_hover .anchor_nav_area .nav_btn:hover {
    border: 1px solid #D6D6D6;
    background-color: #EDEDED;
}

/* 各ブロック */
.help_contents .inner_contents_box {
    margin-bottom: 10px;
}

.help_step,
.help_payment {
    padding-bottom: 5px;
}

/* 説明各ブロック */
.help_data {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 93%;
}

/* 推奨環境 */
#spec_contents dt {
    font-weight: bold;
    padding-bottom: 5px;
}

#spec_contents dd {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
}


/********************************************************************/

/* 特定商取引法 */

/********************************************************************/

/* 各欄枠 */
.contents_desc {
    padding: 10px 5px;
}


/********************************************************************/

/* メールマガジン */

/********************************************************************/

/* 登録、解除タイトル */
.mailmagazine_box .mailmagazine_subscribe_title,
.mailmagazine_box .mailmagazine_unsubscribe_title {
    border-bottom: 1px solid #D6D6D6;
    margin-bottom: 10px;
    font-size: 116%;
    font-weight: bold;
}


/********************************************************************/

/* マイページ */

/********************************************************************/

/* ポイント */
.member_contents .point_number {
    font-size: 138.5%;
    font-weight: bold;
    color: #990000;
}

/* リンク枠 */
.link_box .global_iconleft {
    display: block;
    margin-bottom: 10px;
}

/* 注意書き */
.mypage_note {
    font-size: 93%;
    line-height: 140%;
}

/* マイページ共通　送り主　お届け先 */
.mypage_recipient {
    padding: 5px 0px;
    font-size: 108%;
}


/*************************************************************/

/* 購入履歴 */

/*************************************************************/

/* 商品名 */
.history_data_list .item_name {
    font-weight: normal;
    color: #000000;
}


/*************************************************************/

/* 送り主、お届け先 */

/*************************************************************/

/* 住所 */
.recipient_data_list .user_address {
    font-weight: normal;
    color: #000000;
}


/*************************************************************/

/* お気に入り */

/*************************************************************/

/* 登録日、メモ */
.item_registration_date,
.item_memo {
    font-size: 93%;
}

/* 商品説明 */
.favorite_contents .item_desc {
    padding: 5px 0px;
    margin: 5px 0px;
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

/* メモ */
.item_memo_text {
    background-color: #F5F5F5;
    border: 1px solid #D6D6D6;
    color: #000000;
}


/*************************************************************/

/* 複数選択 */

/*************************************************************/

/* 複数削除 */
.bulk_btn {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* 複数選択 */
.inner_bulk_check_box {
    background-color: #F5F5F5;
}

.layout_column_text .inner_bulk_check_box,
.layout_text .inner_bulk_check_box {
    background-color: #F5F5F5;
}

.bulk_mode .layout_column_text .list_item_box,
.bulk_mode .layout_column_text .not_link,
.bulk_mode .layout_text .not_link {
    border-bottom: none;
}

/* 一括削除時の下部ボタン枠 */
.bulk_mode .fixed_bottom {
    background-color: #F5F5F5;
    border-top: 1px solid #D6D6D6;
}

/* 数量表示バッジ */
.badge {
    background-color: #FF0000;
    /* 2026-10-25 整理: 書体の指定は引用符が 1 つ欠けていて、次の行の文字色(#FFFFFF)まで巻き込んで
       ブラウザに捨てられていた。どちらも効いていなかったため削除 */
}


/*************************************************************/

/* 掲示板 */

/*************************************************************/

/* 記事枠 */
.post_box {
    margin-bottom: 5px;
    border: 1px solid #F1F1F1;
    background-color: #F5F5F5;
}

/* 記事枠レス */
.post_box_res {
    padding-left: 20px;
}

/* 記事ヘッダー */
.post_box .data_table .cell_header,
.post_box .data_table .cell_data {
    background-color: #D6D6D6;
    font-weight: normal;
}

/* 記事ヘッダー下部余白 */
.post_box .data_table {
    margin-bottom: 5px;
}

/* 記事ヘッダー中央寄せ */
.post_box .res_cell,
.post_box .toggle_cell,
.post_box .replay_cell {
    text-align: center;
}

.post_title,
.post_user,
.post_day,
.post_number {
    padding: 2px 0px;
}

/* 記事タイトル */
.post_title {
    font-weight: bold;
    font-size: 14px;
}

/* 記事ユーザー */
.post_user {
    font-size: 11px;
}

/* 記事投稿日 */
.post_day {
    font-size: 11px;
}

/* 記事No */
.post_number {
    font-size: 13px;
}

/* URL */
.post_url {
    font-size: 13px;
}

/* 記事コメント */
.bbs_comments {
    background-color: #FFFFFF;
    border: 1px solid #D1D1D1;
}

/* 記事検索 */
.bbs_search {
    background-color: #F5F5F5;
}

/* 検索文字強調 */
.result_emphasis {
    background-color: #FFFF73;
}

/* 検索前に戻る */
.bbs_search .global_link {
    margin-left: 10px;
}

/* 記事開閉 */
#bbs_toggle {
    border-top: 1px solid #F1F1F1;
    border-bottom: 1px solid #F1F1F1;
}

/* 記事投稿欄 */
.bbs_post_form {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
}


/*************************************************************/

/* 関連ページ */

/*************************************************************/

/* 内容 */
.link_desc_box {
    border-top: 1px solid #D6D6D6;
}


/*************************************************************/

/* 私が店長です */

/*************************************************************/

/* スタッフ画像 */
.staff_photo,
.pstaff_photo {
    text-align: center;
    margin-top: 10px;
}

/* プロフィール項目 */
.staff_contents dt,
.pstaff_contents dt {
    border-top: 1px solid #000000;
    font-weight: bold;
}

/* プロフィール内容 */
.staff_contents dd,
.pstaff_contents dd {
    border-top: 1px dotted #000000;
}

.staff_profile_desc {
    background-color: #F5F5F5;
    border: 1px solid #D6D6D6;
}


/********************************************************************/

/* カレンダー */

/********************************************************************/

/* カレンダーヘッダー */
.calendar_data {
    padding: 15px 0px;
}

.cal_month {
    padding-bottom: 15px;
    text-align: center;
}

.cal_month .prev_month,
.cal_month .next_month,
.cal_month .this_month {
    padding: 0px 10px;
}

.cal_month span.prev_month,
.cal_month span.next_month {
    padding: 0px 5px;
    font-weight: bold;
    cursor: pointer;
}

/* 今月 */
.this_month {
    font-size: 123.1%;
    font-weight: bold;
}

.side_col .this_month {
    font-size: 14px;
    padding: 0px;
}

.side_col .next_month,
.side_col .prev_month {
    font-size: 13px;
    padding: 0px;
}

/* カレンダー枠線 */
.calendar_data .data_table th.cell_header,
.calendar_data .data_table td.cell_data {
    border: 1px solid #D6D6D6;
}

/* カレンダー曜日セル */
.calendar_data .cal_day_header {
    font-size: 85%;
}

/* カレンダー各セル */
.calendar_data .data_table .cal_day_cell {
    width: 14%;
    height: 60px;
    vertical-align: top;
}

/* 日曜日 */
.sun .cal_day {
    color: #CC0000;
}

/* 土曜日 */
.sat .cal_day {
    color: #3399CC;
}

/* 今日 */
.calendar_data .today {
    font-weight: bold;
}

/* イベント一覧 */
.event_list li {
    border-bottom: 1px solid #D6D6D6;
}

/* イベント内容 */
/* 2026-10-25 整理: .event_data の上下余白 10px はテンプレートに負けて効いていなかったため削除 */

/* イベント名 */
.event_name {
    font-weight: bold;
    line-height: normal;
}

/* アイコン画像 */
div.event_icon {
    text-align: center;
}

div.event_icon img {
    margin: 0px 1px;
}

span.event_icon {
    margin-right: 5px;
}

/* 定休日 */
.calendar_data .holiday,
.holiday_icon {
    background-color: #FFD9B3;
}

.holiday_icon {
    border: 1px solid #D6D6D6;
    display: inline-block;
    width: 15px;
    height: 15px;
}

/* イベント説明 */
.event_desc {
    font-size: 93%;
    padding: 5px;
}

/* 左右カラム */
.side_col .cal_day {
    font-size: 85%;
}

.side_col .data_table th.cell_header,
.side_col .data_table td.cell_data {
   padding: 2px;
}

.side_col .calendar_data .data_table .cal_day_cell {
    height: auto;
}


/********************************************************************/

/* table */

/********************************************************************/

/* thタグ、tdタグ */
.data_table .cell_header,
.data_table_header,
.data_table .cell_data {
    padding: 5px;
    border: 1px solid #D6D6D6;
}

/* thタグ */
.data_table .cell_header,
.data_table_header {
    background-color: #F5F5F5;
    color: #333333;
}

/* tdタグ */
.data_table .cell_data {
    background-color: #FFFFFF;
    color: #333333;
}


/********************************************************************/

/* フォーム */

/********************************************************************/

/* フォーム上部説明 */
.global_note li {
    border-bottom: 1px solid #D6D6D6;
}

.list_icon_circle {
    color: #000000;
}

/* フォーム項目 */
.form_element,
.form_inner_element {
    padding: 10px;
}

/* 必須項目 */
.require {
    color: #CC0000;
    font-weight: bold;
}

abbr.require {
    border: none;
    cursor: default;
}

/* 注意書き */
span.cell_note {
    font-size: 85%;
    font-weight: normal;
}

/* メールアドレス欄 */
.confirm_email {
    border-color: #E0DFE3;
    background-color: #FFFFEE;
}


/********************************************************************/

/* 入力エリア */

/********************************************************************/

/* 標準 */
.form_data .defaultsize {
    width: 170px;
}

/* 特小 */
.form_data .xsmallsize {
    width: 60px;
}

/* 小 */
.form_data .smallsize {
    width: 80px;
}

/* 大 */
.form_data .largesize {
    max-width: 500px;
    width: 97%;
}


/********************************************************************/

/* フォームエラー */

/********************************************************************/

/* 個別エラー表示 */
.form_error {
    border: 5px solid #FF0000;
    border-radius: 5px;
}

/* フォーム上部エラー表示 */
.error_box {
    border: 1px solid #FF0000;
    border-radius: 5px;
}

/* 商品詳細エラー表示 */
.detail_page_body .error_box {
    margin: 10px;
}

/* エラー表示　※赤枠内文字 */
.error_status {
    color: #FF0000;
    font-size: 93%;
    padding-left: 5px;
}

/* エラー時入力エリア背景色 */
.page_box .edit_form .error_row input,
.page_box .edit_form .error_row select,
.page_box .edit_form .error_row textarea {
    background-color: #FFF0F0;
}

/* エラーアイコン */
.error_icon .fa {
    background-color: #FF0000;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 0px 1px #FF0000;
    color: #FFFFFF;
}

/* フォーム上部OK表示 */
.ok_box {
    border: 1px solid #00B200;
    border-radius: 5px;
}

/* OK表示 ※緑枠内文字 */
.ok_status {
    color: #00B200;
    font-size: 93%;
    padding-left: 5px;
}

/* OK表示アイコン位置調整 */
.ok_status img {
    padding-right: 3px;
}

/* OK時入力エリア背景色 */
.page_box .edit_form .ok_row input,
.page_box .edit_form .ok_row select,
.page_box .edit_form .ok_row textarea,
.page_box .edit_form .error_row .ok_input {
    background-color: #EEFFEE;
}

/* OKアイコン */
.ok_icon .fa {
    background-color: #00B200;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 0px 1px #00B200;
    color: #FFFFFF;
}

/* 重要な注意書き色 */
.note_color {
    color: #CC0000;
}

/********************************************************************/

/* アイコン */

/********************************************************************/

/* ヘッダーナビボタン */
.inner_header_nav .header_nav_item .fa {
    color: #000000;
}

/* グローバルナビ */
.inner_global_nav .fa {
    color: #000000;
}

.global_iconleft .fa {
    padding-right: 5px;
}

.global_iconright .fa {
    padding-left: 5px;
}

/* 閉じる、削除ボタン */
.close_btn_box .fa,
.delete_btn_box .fa {
    color: #000000;
}

.nav_close_btn .fa {
    color: #FFFFFF;
}

/* フッター下部ボタン */
.fixed_corner_button .fa {
    font-size: 40px;
    color: #555555;
}

.use_hover .fixed_corner_button:hover .fa {
    color: #333333;
}

/* +-開閉ボタン */
.open_icon .fa,
.close_icon .fa {
    color: #000000;
}

/* 説明付き一覧表示調整 */
.right_side_list_icon {
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -11px;
    font-size: 22px;
}


/********************************************************************/

/* ボタン */

/********************************************************************/

/* アイコンボタン枠 */
.icon_btn {
    padding: 0px 3px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    border-radius: 5px;
}

.use_hover .icon_btn:hover {
    border: 1px solid #CCCCCC;
    background-color: #D1D1D1;
}

/* +-開閉ボタン枠 */
.open_icon,
.close_icon {
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

.use_hover .open_icon:hover,
.use_hover .close_icon:hover,
.use_hover abbr .open_icon:hover,
.use_hover abbr .close_icon:hover {
    background-color: #F5F5F5;
}

/* 汎用ボタン */
.general_btn {
    padding: 2px 3px;
    border: solid 1px #CCCCCC;
    border-radius: 5px;
    display: inline-block;
}

.use_hover .general_btn:hover {
    border: 1px solid #CCCCCC;
    background-color: #F5F5F5;
}

.standard_btn {
    padding: 10px 20px;
    border: solid 1px #CCCCCC;
    border-radius: 5px;
    display: inline-block;
}

.use_hover .standard_btn:hover {
    border: 1px solid #CCCCCC;
    background-color: #F5F5F5;
}

.page_title_right_edge .general_btn,
.section_title_right_edge .general_btn {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 5px;
    color: #666666;
}

.use_hover .page_title_right_edge .general_btn:hover,
.use_hover .section_title_right_edge .general_btn:hover {
    background-color: #F5F5F5;
    color: #666666;
}

/* 画像リンク */
.use_hover .photo_link:hover {
    opacity: 0.7;
}


/*************************************************************/

/* フォームボタン */

/*************************************************************/

/* フォームボタンマウスオーバー */
.use_hover .global_btn input:hover,
.use_hover button:hover,
.use_hover .global_btn A:hover {
    opacity: 0.8;
}

/* ボタンサイズXXS */
.global_btn .btn_size_xxsmall {
    width: 30px;
    height: 30px;
}

/* ボタンサイズXS */
.global_btn .btn_size_xsmall {
    width: 50px;
    height: 30px;
}

/* ボタンサイズS */
.global_btn .btn_size_small {
    /* 2026-10-25 整理: 幅 70px はテンプレートに負けて効いていなかったため削除 */
    height: 30px;
}

/* ボタンサイズM */
.global_btn .btn_size_medium {
    width: 90px;
    height: 30px;
}

.global_btn A.btn_size_xxsmall,
.global_btn A.btn_size_xsmall,
.global_btn A.btn_size_small,
.global_btn A.btn_size_medium,
.global_btn A.btn_size_auto {
    line-height: 30px;
}

/* ボタンサイズL */
.global_btn .btn_size_large {
    width: 130px;
    height: 35px;
}

.global_btn A.btn_size_large {
    line-height: 35px;
}

/* ボタンサイズXL */
.global_btn .btn_size_xlarge {
    width: 180px;
    height: 40px;
    font-size: 116%;
}

.global_btn A.btn_size_xlarge {
    line-height: 40px;
}

/* ボタンサイズXXL */
.global_btn .btn_size_xxlarge {
    width: 281px;
    height: 50px;
    font-size: 123%;
}

.global_btn A.btn_size_xxlarge {
    line-height: 50px;
}

/* ボタンサイズ横幅auto */
.global_btn .btn_size_auto {
    height: 30px;
    width: auto;
    padding: 0px 20px;
}

/* ボタンサイズ小文字 */
.font_size_small {
    font-size: 77%;
}

/* 縦2段積みボタン */
.under_global_btn {
    display: block;
    margin-top: 30px;
}

/* 商品詳細 */
.detail_item_data .add_cart .global_btn {
    display: block;
    text-align: center;
    /* 2026-10-25 整理: 上下余白 10px はテンプレートに負けて効いていなかったため削除 */
}

/* 下部配置ボタン */
.form_btn {
    text-align: center;
    margin: auto;
    padding: 20px 0;
}

/* 下部ボタン上部注意書き */
.global_bottom_info {
    border-bottom: 1px dotted #000000;
}

/* ログインページ新規登録余白調整 */
#register_form .form_btn {
    padding: 0px;
}

/* Aタグボタン */
.global_btn A {
    font-weight: normal;
}

/* 外部決済ボタン */
.outside_btn_box {
    background-color: #FFFFEE;
    border: 1px solid #D6D6D6;
}

/* 楽天決済用 */
.payment_method_desc {
    margin-bottom:10px;
}


/*--------------------------------------*/

/* ボタン色 */

/*--------------------------------------*/
/* 色通常 */
/* フォームボタン全般 */
.btn_color_common {
    background-image: url(img/btn_main.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: #F9F9F9;
    color: #333333;
}

.btn_color_common,
A.btn_color_common:link,
A.btn_color_common:visited,
A.btn_color_common:hover,
A.btn_color_common:active {
    color: #333333;
}

.use_hover .btn_color_common:hover {
    color: #333333;
}

/* 色強調 */
.btn_color_emphasis {
    background-image: url(img/btn_main_b.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: #FF4D4D;
    color: #FFFFFF;
}

.btn_color_emphasis,
A.btn_color_emphasis:link,
A.btn_color_emphasis:visited,
A.btn_color_emphasis:hover,
A.btn_color_emphasis:active {
    color: #FFFFFF;
}

.use_hover .btn_color_emphasis:hover {
    color: #FFFFFF;
}


/*************************************************************/

/* パンくずリスト */

/*************************************************************/

/* パンくずリスト */
.breadcrumb_list {
    font-size: 85%;
}


/********************************************************************/

/* ポップアップ */

/********************************************************************/

/* ポップアップの背景 */
.overlay_area .modal_skin {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}


/********************************************************************/

/* ロード、ページャー */

/********************************************************************/

/* 読み込み中アイコン画像 */
.loading,
.initial_loading {
    background: url(img/load_icon.gif);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 25px 25px;
    background-size: 25px 25px;
}

.entry_box .loading {
    background-image: url(img/load_entry_icon.gif);
    -webkit-background-size: 25px 25px;
    background-size: 25px 25px;
}

/* 一覧ページャー */
.pager {
    margin: 5px 0px;
    text-align: center;
}

/* 現ページ */
.pager strong {
    min-width: 20px;
    min-height: 20px;
    padding: 3px;
    margin: 0px 1px;
    border: 1px solid #FF0000;
    background-color: #FF0000;
    color:#FFFFFF;
}

/* 各ページ */
.pager .pager_btn {
    min-width: 20px;
    min-height: 20px;
    margin: 0px 1px;
    padding: 3px;
    border: 1px solid #D6D6D6;
    background-color: #FFFFFF;
    text-decoration: none;
}

.use_hover .pager .pager_btn:hover {
    border: 1px solid #FF0000;
    background-color: #FF0000;
    color: #FFFFFF;
}


/********************************************************************/

/* グローバルサイトリンク */

/********************************************************************/

/* リンク一覧 */
.site_list_dropdown {
    background-color: #FFFFFF;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.4),-5px 5px 10px rgba(0,0,0,0.4);
}

/* 各リンク先 */
.layout_dropdown .site_list_data {
    border-bottom: 1px solid #D6D6D6;
}

/* 各リンク文字 */
.global_site .site_list_dropdown .nav_btn,
#inner_footer .layout_dropdown .site_list_data .nav_btn {
    color: #000000;
}

.use_hover .global_site .site_list_dropdown .nav_btn:hover,
.use_hover #inner_footer .layout_dropdown .site_list_data .nav_btn:hover {
    color: #666666;
    background-color: #F5F5F5;
}

/* リスト表示タイトル */
#inner_footer .layout_dropdown .site_list_title .nav_btn {
    background-image: none;
    background-color: #FFFFFF;
    color: #000000;
}


/********************************************************************/

/* フッター */

/********************************************************************/

/* PCサイトボタン */
.footer_pc_site_box {
    height: 30px;
    padding: 15px 0px 15px 0px;
    position: relative;
    background-color: #EDEDED;
    box-sizing: content-box;
    text-align: center;
}

.pc_site_btn .pc_site_link {
    width: 80px;
    margin: auto;
    padding: 8px 8px 8px 30px;
    display: inline-block;
    background-image: url(img/icon_pc.png);
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    box-sizing: content-box;
    font-size: 12px;
    text-align: center;
    color: #000000;
}

.use_hover .pc_site_btn .pc_site_link:hover {
    color: #000000;
    opacity: 0.8;
}

/* フッター */
.footer_area {
    background-color: #EDEDED;
}

#footer {
    text-align: center;
}

.footer_area A {
    color: #333333;
}

.use_hover .footer_area A:hover {
    color: #333333;
}

.footer_upper_link_box .continued_link_box {
    border-left: 1px solid #666666;
}

/* ページトップへ戻るボタン */
.fixed_corner_button {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background-color: #CCCCCC;
    text-align: center;
}

.move_to_add_cart .corner_covering_item,
.use_hover .move_to_add_cart:hover .corner_covering_item {
    color: #CCCCCC;
}

/* フッター下部バナー */
.footer_banner {
    text-align: center;
}

.use_hover .footer_banner .banner_box A:hover {
    opacity: 0.8;
}


/********************************************************************/

/* Powered by おちゃのこネット
※上記の文言は共用ドメインコースをご利用の場合に表示されます。
必須項目ですので、下記の編集は許可されていません。
・文言の削除
・文字色を薄くする
・文字サイズを小さくする */

#ochanoko {
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

#ochanoko A {
    font-size: 12px;
}

.accessory_color {
    background-color: #EDEDED;
}

.accessory_color A {
    color: #333333;
}

.accessory_color A:hover {
    color: #666666;
}

/********************************************************************/

/* 2026-10-25 整理: ここにあった「メニュー/カテゴリのグループを 4 列表示」(21 ルール)は、
   旧テンプレートのメニュー(#globalnavi ul.dropdown)用で、今のテンプレートには部品が無く効いていなかったため削除 */
/* youtube 全画面対応 */
.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

ul .second
{list-style : none;
}

/* 画像センタリング対応 */
#img_center {
	margin: auto;
	overflow: hidden;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}


/* 価格変動注意書き・オプションにより価格が変わる場合がございます */

.price_desc {
    display: none;
}

/* ［型番/品番］の非表示 */
.model_number {
display: none;
}

.item_sort_form .custom_toggle_button {
pointer-events: none;
cursor: default;
}

.item_sort_form .custom_toggle_area {
height: auto;
overflow: visible;
pointer-events: auto;
}

.item_sort_form .sort_item {
border-bottom-width: 1px;
}

.item_sort_form .link_close_toggle_box {
pointer-events: none;
}

.item_sort_form .close_link_box {
display: none;
}

/* 検索バーを常に表示 */

/* 
.header .hidden_search_bar {
opacity: 1;
}
.hidden_search_bar .inner_search_bar {
display: block;
}
.search_close {
display: none;
}
 */

/* 商品詳細ページ縦tableの装飾 */
.tate-table {
  border-collapse: collapse;
  width: 100%;
  border: 0.5px solid #ccc;
margin-top: 24px;
}

.tate-table th, .tate-table td {
  padding: 8px 12px;
  border: 0.5px solid #ccc;
  vertical-align: top;
}

.tate-table th {
  background-color: #f5f5f5;
  text-align: left;
/*  font-weight: bold; */
  width: 25%;
}

.tate-table td {
  background-color: #fff;
}

/* ▼ここから▼ */
/* 商品詳細ページ横tableの装飾 */

.yoko-table {
  border-collapse: collapse;
  width: 100%;
  border: 0.5px solid #ccc;
  margin-top: 24px;
}

.yoko-table th,
.yoko-table td {
  padding: 8px 12px;
  border: 0.5px solid #ccc;
  vertical-align: top;
  font-weight: normal; /* ← すべてのセルで太字をリセット */
}

.yoko-table th {
  background-color: #fff;
  text-align: left;
}

/* 最上段の背景色と太字を指定 */
.yoko-table tr:first-child th,
.yoko-table tr:first-child td {
  background-color: #f5f5f5;
  font-weight: bold; /* ← 最上段の行のみ太字に */
}

.yoko-table td {
  background-color: #fff;
}
/* ▲ここまで▲ */


/********************************************************************/
/* 案内の枠（6 種類共通）                                             */
/*                                                                    */
/* 2026-08-15 統一。もともと 6 種類がばらばらの余白を持っていたため、  */
/* 見出しの帯と本文が重なる／間隔が揃わない、という状態でした。       */
/* プロフェッショナル会員の枠（本文の上 28px・下 18px）を基準に、      */
/* 全部を同じ規格にしています。                                       */
/*                                                                    */
/* ⚠ 枠の中身（p や ul）は余白を持ちません。間隔はこの枠だけで        */
/*   決まるので、説明文の中に書くときは                               */
/*     <div class="student-notice-textBox"><p class="product-notice">…</p></div>  */
/*   のように「枠 + 段落 1 つ」だけを書いてください。                 */
/*   <div style="margin:-5px;">&nbsp;</div> のような詰めは不要です。   */
/********************************************************************/

.product-notice-textBox,
.pro-product-notice-textBox,
.pre-notice-textBox,
.blue-notice-textBox,
.student-notice-textBox,
.invoice-notice-textBox {
    position: relative;
    margin: 30px 0 20px 0;
    padding: 28px 14px 18px 14px;
    border: 1px solid;
    border-radius: 5px;
}

/* 見出しの帯。狭い画面でも 2 行に折り返さないよう 12px + nowrap にしています */
.product-notice-textBox:before,
.pro-product-notice-textBox:before,
.pre-notice-textBox:before,
.blue-notice-textBox:before,
.student-notice-textBox:before,
.invoice-notice-textBox:before {
    position: absolute;
    top: -13px;
    left: 14px;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

/* 枠の中身は上下の余白を持たない */
.product-notice-textBox > *:first-child,
.pro-product-notice-textBox > *:first-child,
.pre-notice-textBox > *:first-child,
.blue-notice-textBox > *:first-child,
.student-notice-textBox > *:first-child,
.invoice-notice-textBox > *:first-child {
    margin-top: 0;
}

.product-notice-textBox > *:last-child,
.pro-product-notice-textBox > *:last-child,
.pre-notice-textBox > *:last-child,
.blue-notice-textBox > *:last-child,
.student-notice-textBox > *:last-child,
.invoice-notice-textBox > *:last-child {
    margin-bottom: 0;
}

.product-notice {
    padding-top: 0;
    margin: 0;
}

/* 枠ごとの色と見出しの文言 */
.product-notice-textBox {
    border-color: #f1c40f;
}

.product-notice-textBox:before {
    background-color: #f1c40f;
    color: #000;
    content: "製品説明が必要な商品です";
}

.pro-product-notice-textBox {
    border-color: #ff0000;
}

.pro-product-notice-textBox:before {
    background-color: #ff0000;
    color: #fff;
    content: "プロフェッショナル会員は最大10%OFF";
}

.pre-notice-textBox {
    border-color: #ffa500;
}

.pre-notice-textBox:before {
    background-color: #ffa500;
    color: #fff;
    content: "在庫・発送について";
}

.blue-notice-textBox {
    border-color: #00a3af;
}

.blue-notice-textBox:before {
    background-color: #00a3af;
    color: #fff;
    content: "使用上のご注意";
}

.student-notice-textBox {
    border-color: #00a3af;
}

.student-notice-textBox:before {
    background-color: #00a3af;
    color: #fff;
    content: "学生クラブ10％割引サービスのご案内";
}

.invoice-notice-textBox {
    border-color: #208000;
}

.invoice-notice-textBox:before {
    background-color: #208000;
    color: #fff;
    content: "請求書払い/お見積り作成について";
}

/********************************************************************/
/* ===== 商品説明の中の Bootstrap 系クラス(2026-10-25 復元)=========== */
/*                                                                    */
/* おちゃのこ共通の ocnk.min.css が v79 → v83 に上がって、Bootstrap 系の */
/* クラスの指定が外れた。メーカーのサイトから写した商品説明で使っている */
/* 10 種が効かなくなり、19 商品で注意書きの赤字が黒字になる・余白が    */
/* 詰まる・導入文や見出し風の文字が小さくなる、が起きていた。         */
/* 旧版と同じ値を、商品説明の枠(.item_desc_text)の中に限って戻す。     */
/* (ちかおさん 2026-10-25「案1」。対象の商品は design_project の         */
/*  現状確認/おちゃのこ共通CSS更新の影響_2026-10-25.md)                */
/********************************************************************/

/* 赤字(注意書き)… #1513・#1514・#6403 */
.item_desc_text .text-danger {
    color: #dc3545 !important;
}

/* 余白 … #289 ほかペツル系 8 商品(mb-5)・#1282(mb-2)・#6403(mb-0)・#1513・#1514(mt-3) */
.item_desc_text .mb-5 {
    margin-bottom: 3rem !important;
}

.item_desc_text .mb-2 {
    margin-bottom: .5rem !important;
}

.item_desc_text .mb-0 {
    margin-bottom: 0 !important;
}

.item_desc_text .mt-3 {
    margin-top: 1rem !important;
}

/* 導入文 … #25・#26・#27 */
.item_desc_text .lead {
    font-size: 1.25rem;
    font-weight: 300;
}

/* 見出し風の段落(クラス名 h2)… #5969 */
.item_desc_text .h2 {
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    font-size: 2rem;
}

/* 横並びの枠 … #1282(素材の一覧)
   今の版では row の左右の余白が無くなり、col-auto(中身の幅)が col(等分)に負けるようになった */
.item_desc_text .row {
    margin-right: -15px;
    margin-left: -15px;
}

.item_desc_text .col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/* 幅の枠 … #5969・#6068・#6270・#6272 */
.item_desc_text .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .item_desc_text .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .item_desc_text .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .item_desc_text .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .item_desc_text .container {
        max-width: 1140px;
    }
}

/* ============================================================================
   ▼ デザインテーマ「ライト」案 v6(2026-10-28 F / ちかおさんのご依頼: 白基調・クリーン・ライト)
   - デザイン区画の末尾(目印の直前)に置く。上にある既存の指定を、あとから読まれる順で上書きする。
   - 変数(--km-*)を変えれば色・角丸をまとめて調整できる。
   - 目印より下(D 区画)と、商品説明の中のクラス(案内枠・表など)には触らない。
   ========================================================================== */

:root {
  --km-text: #1A1A1A;        /* 本文の文字 */
  --km-muted: #6B7280;       /* 補足の文字(税込・型番など) */
  --km-line: #E5E7EB;        /* 細い罫線 */
  --km-line-soft: #EEF0F2;   /* さらに薄い罫線 */
  --km-soft: #F6F7F8;        /* 薄いグレーの面(検索窓・告知帯など) */
  --km-primary: #111111;     /* 主役のボタン(カートに入れる・メニューのホバー) */
  --km-primary-hover: #333333;
  --km-accent: #D93025;      /* 強調(セール・注意)は赤を 1 色だけ */
  --km-radius: 10px;         /* 角丸(カード・ボタン) */
  --km-radius-pill: 999px;   /* 丸いボタン(メニュー・検索) */
  --km-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

/* ---- 1. 書体・本文 ------------------------------------------------------
   おちゃのこの文字設定(.ocnk015.responsive body = Noto Serif JP 明朝)より後に読まれ、同じ強さで勝つ */
.touch004.responsive body,
.touch004.responsive select,
.touch004.responsive input,
.touch004.responsive button,
.touch004.responsive textarea {
  font-family: var(--km-font);
}
.touch004.responsive body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--km-text);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
/* ⚠ 商品説明・グループ説明・カテゴリ説明の中(D の領分)はテーマのリンク色を当てない = 本番のまま(2026-10-29 検証で発見:
   本番のショップ CSS は `a, a:link… { color: #000 }` で説明の中のリンクは黒、D の組み合わせ表の中だけ D の規則で青。
   `#container a` が D の規則(クラス 2〜3 個)より強く、青が黒に化けていた。:not() で説明欄を除外すると、中は本番と同じ値に戻る) */
#container a:not(.item_desc_text a, .grouplist_desc a, .categorylist_desc a) { color: var(--km-text); }
.use_hover #container a:not(.item_desc_text a, .grouplist_desc a, .categorylist_desc a):hover { color: #000000; }

/* ---- 2. ヘッダー ------------------------------------------------------- */
#header {
  background-color: #FFFFFF;
  border-bottom: 0 none;
}
#header_area { padding-top: 10px; padding-bottom: 10px; }

/* 検索窓: 丸い枠・薄いグレー */
#container .search_bar .search,
#container .search.form_data { background-color: transparent; }
#container .search_form .search_box {
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-pill);
  background-color: var(--km-soft);
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
  box-shadow: none;
}
#container .search_form .search_box:focus {
  outline: none;
  border-color: var(--km-primary);
  background-color: #FFFFFF;
}
#container .search_form .searchinput.btn_color_common {
  background-image: none;
  background-color: var(--km-primary);
  color: #FFFFFF;
  border: 0 none;
  border-radius: var(--km-radius-pill);
}
.use_hover #container .search_form .searchinput.btn_color_common:hover { background-color: var(--km-primary-hover); color: #FFFFFF; }

/* ヘッダー右のカート・検索アイコンの文字 */
#container .inner_header_nav .nav_btn { color: var(--km-text); }

/* ---- 3. 大きなメニュー 4 つ(登山カテゴリ など): 四角い区切り線 → 丸いボタン ---- */
#container .global_nav {
  background-color: #FFFFFF;
  border-top: 0 none;
  border-bottom: 1px solid var(--km-line-soft);
}
#container .global_nav .inner_global_nav {
  justify-content: center;
  gap: 10px;
  padding: 8px 0 14px;
}
#container .global_nav.column4 .global_nav_item {
  width: auto;
  flex: 0 0 auto;
}
#container .inner_global_nav .nav_btn,
#container .global_nav_item:first-child .nav_btn {
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-pill);
  background-color: #FFFFFF;
  color: var(--km-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  height: 40px;
  padding: 0 22px;
  transition: background-color .15s, color .15s, border-color .15s;
}
.use_hover #container .inner_global_nav .nav_btn:hover {
  border: 1px solid var(--km-primary);
  background-color: var(--km-primary);
  color: #FFFFFF;
}
#container .inner_global_nav .nav_btn .fa,
#container .inner_global_nav .nav_btn::after { color: inherit; }

/* ポップアップで開くメニュー(カテゴリ一覧など) */
#container .popup_nav_box {
  background-color: #FFFFFF;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
}
#container .inner_popup_nav .nav_btn {
  background-color: #FFFFFF;
  border: 0 none;
  border-radius: 8px;
  color: var(--km-text);
}
.use_hover #container .inner_popup_nav .nav_btn:hover { background-color: var(--km-soft); }

/* ---- 4. 上部の告知帯(送料・会員割引) ----------------------------------- */
#inner_contents_top {
  background-color: var(--km-soft);
  border-radius: var(--km-radius);
  padding: 10px 16px;
  margin-top: 12px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
}

/* ---- 5. トップのスライド ------------------------------------------------ */
#photo .top_image_case .swiper-slide img,
#photo .top_image_case .swiper-slide .slider_image_box { border-radius: 14px; overflow: hidden; }
#photo .swiper-pagination-bullet { background-color: #111111; opacity: .25; }
#photo .swiper-pagination-bullet-active { opacity: 1; }

/* ---- 6. 見出し: 枠と灰色の面をやめて、太い文字と細い下線だけに ------------ */
.side_box h2,
.main_box h2,
.page_box .section_title h2,
.page_box .section_title h3 {
  background-color: transparent;
  background-image: none;
  border: 0 none;
  border-bottom: 1px solid var(--km-line);
  border-radius: 0;
  color: var(--km-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 0 0 10px;
  margin-bottom: 18px;
}
.side_box h2 { font-size: 15px; padding-bottom: 8px; margin-bottom: 10px; }
.page_box .page_title h1,
.page_box .page_title h2 {
  background-color: transparent;
  border: 0 none;
  border-bottom: 1px solid var(--km-line);
  border-radius: 0;
  color: var(--km-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  padding: 4px 0 12px;
  margin-bottom: 18px;
}
.page_box .section_title h4 { border-bottom: 1px solid var(--km-line); font-weight: 700; }
.page_title h1, .page_title h2, .section_title h1, .section_title h2 { font-size: 18px; }
.page_box .page_title h1 { font-size: 22px; }

/* 見出し右の「もっと見る」などの小さなボタン */
.page_title_right_edge .general_btn,
.section_title_right_edge .general_btn,
.more_item .general_btn {
  background-color: #FFFFFF;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-pill);
  color: var(--km-text);
  font-size: 13px;
  padding: 6px 16px;
}
.use_hover .page_title_right_edge .general_btn:hover,
.use_hover .section_title_right_edge .general_btn:hover,
.use_hover .more_item .general_btn:hover { background-color: var(--km-soft); color: var(--km-text); }

/* ---- 7. 商品のカード(トップ・一覧・関連商品) ---------------------------- */
#container .list_item_cell .item_data,
#container .slide_item_cell .item_data { padding: 6px; }
#container .list_item_photo .item_image_box,
#container .list_item_photo .global_photo {
  border: 1px solid var(--km-line-soft);
  border-radius: var(--km-radius);
  overflow: hidden;
  background-color: #FFFFFF;
  transition: box-shadow .15s, transform .15s;
}
.use_hover #container .item_data_link:hover .list_item_photo .item_image_box {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
#container .list_item_data { padding-top: 10px; }
#container .list_item_data .item_name {
  font-size: 13px;
  line-height: 1.5;
  color: var(--km-text);
}
#container .list_item_data .model_number { color: var(--km-muted); font-size: 11px; }
#container .list_item_data .price,
#container .list_item_data .price .figure { color: var(--km-text); }
#container .list_item_data .selling_price > .figure { font-size: 15px; font-weight: 700; }
#container .list_item_data .tax_label { color: var(--km-muted); font-size: 11px; }
#container .thumbnail_image_box img { border-radius: 4px; border: 1px solid var(--km-line-soft); }

/* 一覧ページの並べ替え・表示切替の欄 */
#container select,
#container input[type="text"],
#container input[type="search"],
#container input[type="email"],
#container input[type="tel"],
#container input[type="number"],
#container input[type="password"],
#container textarea {
  border: 1px solid var(--km-line);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--km-text);
  padding: 6px 10px;
}

/* ---- 8. 商品詳細 ------------------------------------------------------- */
.detail_page_body .detail_page_title { font-size: 22px; }
.detail_page_body .large_product_info_box .item_name { font-size: 20px; font-weight: 700; line-height: 1.4; }
.detail_page_body .large_product_info_box .model_number { color: var(--km-muted); font-size: 13px; font-weight: 400; }
.detail_page_body .detail_item_data .selling_price .figure { font-size: 28px; font-weight: 700; color: var(--km-text); }
.detail_page_body .detail_item_data .selling_price .price_label { color: var(--km-muted); font-size: 13px; }
.detail_page_body .detail_item_data .tax_label { color: var(--km-muted); font-size: 12px; }
.detail_page_body .main_photo_slide .item_image_box img { border-radius: 14px; }
.detail_page_body .data_table th,
.detail_page_body .data_table td,
.detail_page_body .stocklist th,
.detail_page_body .stocklist td { border-color: var(--km-line); }
.detail_page_body .data_table th,
.detail_page_body .stocklist th { background-color: var(--km-soft); color: var(--km-text); font-weight: 600; }

/* ボタン: 主役(カートに入れる)は黒、脇役(お問い合わせ・お気に入り)は白い枠 */
.btn_color_emphasis,
A.btn_color_emphasis:link, A.btn_color_emphasis:visited {
  background-image: none;
  background-color: var(--km-primary);
  border: 1px solid var(--km-primary);
  border-radius: var(--km-radius);
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: none;
}
.use_hover .btn_color_emphasis:hover { background-color: var(--km-primary-hover); border-color: var(--km-primary-hover); color: #FFFFFF; }
.btn_color_common,
A.btn_color_common:link, A.btn_color_common:visited {
  background-image: none;
  background-color: #FFFFFF;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  color: var(--km-text);
  box-shadow: none;
}
.use_hover .btn_color_common:hover { background-color: var(--km-soft); color: var(--km-text); }
.detail_page_body .add_cart_btn .cartinput { min-height: 50px; font-size: 16px; }

/* ---- 9. 左のメニュー ---------------------------------------------------- */
#container .side_box { margin-bottom: 22px; }
#container .side_nav .nav_btn,
#container .side_itemlist_nav .nav_btn {
  border: 0 none;
  border-radius: 8px;
  background-color: transparent;
  color: var(--km-text);
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.4;
}
.use_hover #container .side_nav .nav_btn:hover,
.use_hover #container .side_itemlist_nav .nav_btn:hover { background-color: var(--km-soft); color: var(--km-text); }
#container .side_itemlist_nav .sub_menu_link_list .nav_btn { font-size: 12.5px; color: #444444; padding-left: 22px; }
#container .side_itemlist_nav .menu_link_item,
#container .side_itemlist_nav .sub_menu_link_item { border: 0 none; }
#container .side_free_box img { border-radius: 8px; display: block; max-width: 100%; height: auto; }
#container .side_free_box .custom_space { padding: 2px 0; }
#container .side_calendar_box table { border-collapse: separate; border-spacing: 2px; }
#container .side_calendar_box td,
#container .side_calendar_box th { border: 0 none; border-radius: 6px; font-size: 12px; }

/* ---- 10. フッター ------------------------------------------------------ */
#container .footer_nav {
  background-color: var(--km-soft);
  border-top: 1px solid var(--km-line-soft);
}
#container .footer_nav_item .nav_btn {
  border: 0 none;
  color: var(--km-text);
  font-size: 13px;
  padding: 10px 12px;
}
.use_hover #container .footer_nav_item .nav_btn:hover { background-color: transparent; color: #000000; text-decoration: underline; }
#copyright { color: var(--km-muted); font-size: 12px; padding: 18px 0 28px; }
#container .back_to_top {
  background-color: var(--km-primary);
  color: #FFFFFF;
  border-radius: 50%;
  opacity: .85;
}

/* ---- 11. スマホ幅(839px 以下)の調整 ------------------------------------ */
/* ⚠ 2026-10-29 F4: 境目を 767/768 → 839/840 に揃えた。テンプレートの「左から出るメニュー」は 839px 以下(iPad 縦 768px も含む)なのに、
   このテーマのスマホ向け規則が 767px 以下だけだったため、768〜839px では左から出るメニューの中の見出しが PC 用(小さな灰色・開閉マーク無し)になっていた(実測) */
@media screen and (max-width: 839px) {
  .touch004.responsive body { font-size: 14px; }
  #header_area { padding-top: 6px; padding-bottom: 6px; }
  /* 大きなメニュー 4 つ: 横に並べて指でスクロール */
  #container .global_nav .inner_global_nav {
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #container .global_nav .inner_global_nav::-webkit-scrollbar { display: none; }
  #container .inner_global_nav .nav_btn,
  #container .global_nav_item:first-child .nav_btn {
    font-size: 12.5px;
    height: 34px;
    padding: 0 14px;
    white-space: nowrap;
  }
  #inner_contents_top { border-radius: 0; margin: 0; font-size: 11.5px; padding: 8px 12px; }
  #photo .top_image_case .swiper-slide img,
  #photo .top_image_case .swiper-slide .slider_image_box { border-radius: 0; }
  .page_box .page_title h1 { font-size: 18px; }
  .side_box h2, .main_box h2, .page_box .section_title h2, .page_box .section_title h3 { font-size: 16px; }
  .detail_page_body .large_product_info_box .item_name { font-size: 17px; }
  .detail_page_body .detail_item_data .selling_price .figure { font-size: 24px; }
  #container .list_item_data .item_name { font-size: 12.5px; }
}
/* ---- 12. v2 で直した点(2026-10-28 モック v1 を見て) --------------------- */
/* 告知帯: 中身の HTML 直書きの枠(style 属性)が二重の枠に見える → 内側の枠だけ消す
   (style 属性に勝つため !important。HTML 側は触らない) */
#inner_contents_top > div[style] {
  border: 0 none !important;
  background-color: transparent !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 100% !important;
}
#inner_contents_top a { color: var(--km-text); }

/* 検索: 丸いボタンを窓の中(右端)に収める */
#container .search_form { position: relative; }
#container .search_form .search_box { padding-right: 46px; width: 100%; }
#container .search_form .global_btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
#container .search_form .searchinput.btn_color_common {
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  line-height: 30px;
}

/* パンくず: 小さく薄く */
#container .breadcrumb_area { font-size: 12px; color: var(--km-muted); padding: 8px 0; }
#container .breadcrumb_area a { color: var(--km-muted); }

/* 一覧の並べ替え欄: 灰色の面 → 白い薄枠 */
#container .item_sort_form .sort {
  background-color: #FFFFFF;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
}
#container .item_sort_form .sort_item { background-color: transparent; }
#container .item_sort_form .sort_toggle .custom_toggle_button {
  background-color: #FFFFFF;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-pill);
  box-shadow: none;
  color: var(--km-text);
}
#container .item_count { color: var(--km-muted); font-size: 13px; }

/* ページ送り: 四角 → 丸。いまのページは黒 */
#container .pager .pager_btn,
#container .pager strong {
  display: inline-block;
  min-width: 34px;
  height: 34px;
  line-height: 32px;
  padding: 0 10px;
  margin: 0 3px;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-pill);
  background-color: #FFFFFF;
  color: var(--km-text);
  text-align: center;
  font-size: 13px;
  box-sizing: border-box;
}
#container .pager strong {
  background-color: var(--km-primary);
  border-color: var(--km-primary);
  color: #FFFFFF;
}
.use_hover #container .pager .pager_btn:hover { background-color: var(--km-soft); }
#container .pager .three_dots { color: var(--km-muted); margin: 0 4px; }

/* 商品詳細のサムネイル: 角丸・薄い枠、選択中は黒い枠 */
.detail_page_body .thumbnail_listbox img,
.detail_page_body .thumbnail_image_box img { border-radius: 6px; border: 1px solid var(--km-line-soft); }
.detail_page_body .thumbnail_listbox.current img,
.detail_page_body .thumbnail_listbox.now_photo img,
.detail_page_body .thumbnail_listbox.active img { border-color: var(--km-primary); }
/* ---- 13. v3: もっとミニマムに・動きをつける・左メニューの洗練(2026-10-28 ちかおさんの感想を受けて) ---- */

/* 13-1. 共通の動き: 色・背景・枠・透明度・位置はなめらかに変わる(写真のスライド等の transform は触らない) */
#container a:not(.item_desc_text a, .grouplist_desc a, .categorylist_desc a),   /* 説明の中(D の領分)は除外(2026-10-29・transition だけだが D の css_impact で「当たった」と数えられるため) */
#container button,
#container .nav_btn,
#container .general_btn { transition: color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease, box-shadow .18s ease, transform .18s ease; }

/* 13-2. 大きなメニュー 4 つ: 丸いボタン → 文字だけ + ホバーで下線が左から伸びる */
#container .global_nav { border-bottom: 1px solid var(--km-line-soft); }
#container .global_nav .inner_global_nav { gap: 40px; padding: 6px 0 0; }
#container .inner_global_nav .nav_btn,
#container .global_nav_item:first-child .nav_btn {
  border: 0 none;
  border-radius: 0;
  background-color: transparent;
  color: var(--km-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  height: 44px;
  padding: 0 2px;
  position: relative;
}
#container .inner_global_nav .nav_btn::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-color: var(--km-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}
.use_hover #container .inner_global_nav .nav_btn:hover {
  border: 0 none;
  background-color: transparent;
  color: var(--km-primary);
}
.use_hover #container .inner_global_nav .nav_btn:hover::before { transform: scaleX(1); }

/* 13-3. 見出し: 下線もやめて、太い文字と余白だけ */
.side_box h2,
.main_box h2,
.page_box .section_title h2,
.page_box .section_title h3 { border-bottom: 0 none; padding-bottom: 6px; margin-bottom: 14px; font-size: 20px; letter-spacing: .01em; }
.page_box .page_title h1,
.page_box .page_title h2 { border-bottom: 0 none; font-size: 24px; margin-bottom: 14px; }
#container .main_section { margin-top: 36px; }

/* 「もっと見る」: 枠なしの文字 + 矢印、ホバーで矢印が右へ */
.more_item .general_btn {
  border: 0 none;
  background-color: transparent;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--km-text);
}
.more_item .general_btn::after { content: " \2192"; display: inline-block; transition: transform .18s ease; }
.use_hover .more_item .general_btn:hover { background-color: transparent; text-decoration: underline; }
.use_hover .more_item .general_btn:hover::after { transform: translateX(4px); }

/* 13-4. 商品カード: 枠線も面もやめて写真だけ(商品写真は白地が多く、灰色のタイルは縞に見えた)。ホバーで写真がわずかに大きく */
#container .list_item_photo .item_image_box,
#container .list_item_photo .global_photo {
  border: 0 none;
  border-radius: 12px;
  background-color: transparent;
  overflow: hidden;
}
#container .list_item_photo .item_image_box img { transition: transform .35s ease; }
.use_hover #container .item_data_link:hover .list_item_photo .item_image_box {
  box-shadow: none;
  transform: none;
}
.use_hover #container .item_data_link:hover .list_item_photo .item_image_box img { transform: translate(-50%, -50%) scale(1.04); }   /* 2026-11-02: テンプレートは画像を translate(-50%,-50%) で中央に置いている。scale だけにすると中央寄せが消えて画像がずれた(ちかおさん指摘) */
#container .list_item_data .item_name { color: #333333; }
.use_hover #container .item_data_link:hover .item_name { color: var(--km-primary); }

/* 13-5. 告知帯: 面もやめて、細い 1 行に */
#inner_contents_top { background-color: transparent; border-top: 1px solid var(--km-line-soft); border-bottom: 1px solid var(--km-line-soft); border-radius: 0; margin: 0 0 8px; padding: 8px 16px; font-size: 12px; color: #444444; }

/* 13-6. 左メニュー */
/* ログイン・会員登録・カート: 縦の行 → 小さな文字のボタンを横に並べる */
#container .login_nav_box .inner_side_nav,
#container .cart_nav_box .inner_side_nav { display: flex; gap: 8px; }
#container .login_nav_box .basic_nav_item,
#container .cart_nav_box .basic_nav_item { flex: 1 1 0; width: auto; }
#container .login_nav_box .nav_btn,
#container .cart_nav_box .nav_btn {
  display: block;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-pill);
  padding: 8px 10px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
}
#container .login_nav_box .nav_btn .nav_text,
#container .cart_nav_box .nav_btn .nav_text { display: block; padding: 0; }
#container .login_nav_box .nav_btn .menu_nav_icon,
#container .cart_nav_box .nav_btn .menu_nav_icon { display: inline-block; position: static; width: auto; height: auto; margin-right: 6px; font-size: 13px; color: var(--km-muted); }
#container .login_nav_box .nav_btn .right_side_nav_icon,
#container .cart_nav_box .nav_btn .right_side_nav_icon { display: none; }
.use_hover #container .login_nav_box .nav_btn:hover,
.use_hover #container .cart_nav_box .nav_btn:hover { background-color: var(--km-primary); border-color: var(--km-primary); color: #FFFFFF; }
.use_hover #container .login_nav_box .nav_btn:hover .menu_nav_icon,
.use_hover #container .cart_nav_box .nav_btn:hover .menu_nav_icon { color: #FFFFFF; }
#container .login_nav_box { margin-bottom: 8px; }
#container .cart_nav_box { margin-bottom: 20px; }

/* バナー画像: 角丸・間隔を揃える・ホバーで少し浮く */
#container .side_free_box { margin-bottom: 8px; }
#container .side_free_box img { border-radius: 10px; transition: transform .18s ease, box-shadow .18s ease; }
.use_hover #container .side_free_box a:hover img { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }

/* カテゴリ: 小さな見出し + 一覧。親カテゴリはアコーディオン(右端の「+」が開くと「×」に回る) */
#container .category_nav_box { margin-top: 24px; }
#container .category_nav_box .section_title h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--km-muted);
  text-transform: uppercase;
  padding: 0 10px 6px;
  margin: 0;
  background-color: transparent;
}
/* 開閉のマーク(⌄)は PC では要らない(一覧が常に出ている)。スマホでは 13-7 で出す */
@media screen and (min-width: 840px) {
  #container .category_nav_box .section_title .right_side_nav_icon { display: none; }
}
#container .side_itemlist_nav .menu_link_item { margin: 0; }
#container .side_itemlist_nav .nav_btn {
  padding: 8px 28px 8px 10px;
  font-size: 13.5px;
  position: relative;
  border-radius: 8px;
}
#container .side_itemlist_nav .nav_btn .nav_text { padding: 0; }
.use_hover #container .side_itemlist_nav .nav_btn:hover { background-color: var(--km-soft); }
/* 「+」の目印(子のあるカテゴリだけ) */
#container .side_itemlist_nav .parental_menu_link.open_sub_menu_link::after,
#container .side_itemlist_nav .parental_menu_link.close_sub_menu_link::after {
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  line-height: 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: var(--km-muted);
  transition: transform .25s ease, color .18s ease;
}
#container .side_itemlist_nav .parental_menu_link.close_sub_menu_link { background-color: transparent; color: var(--km-primary); font-weight: 600; }
#container .side_itemlist_nav .parental_menu_link.close_sub_menu_link::after { transform: rotate(45deg); color: var(--km-primary); }
/* 子カテゴリ: 左に細い線を引いて、少し小さく */
#container .side_itemlist_nav .sub_menu_link_list {
  margin: 2px 0 6px 14px;
  padding-left: 6px;
  border-left: 1px solid var(--km-line);
}
#container .side_itemlist_nav .sub_menu_link_list .nav_btn { font-size: 12.5px; color: #555555; padding: 6px 10px; }
.use_hover #container .side_itemlist_nav .sub_menu_link_list .nav_btn:hover { color: var(--km-primary); background-color: transparent; transform: translateX(3px); }

/* 営業カレンダー: 見出しも小さく */
#container .side_calendar_box { margin-top: 24px; }
#container .side_calendar_box h2 { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--km-muted); padding: 0 10px 6px; }

/* 13-7. スマホ: ハンバーガーと左から出るメニューに動きをつける */
@media screen and (max-width: 839px) {
  /* 大きなメニュー 4 つ(文字だけの横スクロール) */
  #container .global_nav .inner_global_nav { gap: 22px; padding: 0 16px; }
  #container .inner_global_nav .nav_btn,
  #container .global_nav_item:first-child .nav_btn { height: 40px; font-size: 13px; padding: 0; }

  /* ハンバーガー: アイコン文字の代わりに 3 本線を描き、開くと「×」に変わる */
  #container .h_side_menu_opener .nav_btn { background-color: transparent; }
  #container .h_side_menu_opener .menu_nav_icon {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
    margin: 4px auto 3px;
    color: transparent;
    font-size: 0;
    border-top: 2px solid var(--km-text);
    border-bottom: 2px solid var(--km-text);
    transition: border-color .2s ease;
  }
  #container .h_side_menu_opener .menu_nav_icon::before,
  #container .h_side_menu_opener .menu_nav_icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 22px;
    height: 2px;
    background-color: var(--km-text);
    transition: transform .3s ease;
  }
  .open_side_col #container .h_side_menu_opener .menu_nav_icon { border-color: transparent; }
  .open_side_col #container .h_side_menu_opener .menu_nav_icon::before { transform: rotate(45deg); }
  .open_side_col #container .h_side_menu_opener .menu_nav_icon::after { transform: rotate(-45deg); }
  #container .h_side_menu_opener .nav_label { font-size: 9px; letter-spacing: .08em; }

  /* 左から出るメニュー: ゆっくり滑り出し、右に影 */
  #left_side_col { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .open_side_col #left_side_col .side_container { box-shadow: 8px 0 24px rgba(0, 0, 0, .12); }
  .open_side_col #left_side_col .inner_side_container { padding: 12px 10px; }

  /* 左から出るメニューの中: 「カテゴリ」「営業カレンダー」は指で押す見出しなので、少し大きく・開閉のマーク(⌄)を右端に。開くと回る */
  #container .category_nav_box .section_title h2,
  #container .side_calendar_box h2 {
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--km-text);
    padding: 10px 32px 10px 10px;
    position: relative;
  }
  #container .category_nav_box .section_title .right_side_nav_icon {
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    width: auto;
    height: auto;
    margin-top: -8px;
    font-size: 14px;
    line-height: 16px;
    color: var(--km-muted);
    transition: transform .25s ease;
  }
  #container .category_nav_box:not(.toggle_closed) .section_title .right_side_nav_icon { transform: rotate(180deg); }
  #container .category_nav_box { margin-top: 12px; }
  #container .side_calendar_box { margin-top: 4px; }

  /* メニューを開いたときに本文を覆う幕(テンプレートの .menu_blocker)を薄く暗くする */
  #container .menu_blocker { background-color: rgba(17, 17, 17, .35); transition: opacity .3s ease; }
}
/* ---- 14. v4(2026-10-28 ちかおさんの決定: 購入ボタンは赤 / 書体はゴシック / サイドのバナーは文字化) ---- */
:root {
  --km-buy: #E5322D;         /* 購入(カートに入れる)のボタン */
  --km-buy-hover: #C4261F;
}

/* 14-1. 「カートに入れる」は赤。ほかの主役(メニューのホバー・ページ送り)は黒のまま */
.btn_color_emphasis,
A.btn_color_emphasis:link, A.btn_color_emphasis:visited {
  background-color: var(--km-buy);
  border-color: var(--km-buy);
  color: #FFFFFF;
}
.use_hover .btn_color_emphasis:hover { background-color: var(--km-buy-hover); border-color: var(--km-buy-hover); color: #FFFFFF; }
.detail_page_body .add_cart_btn .cartinput { box-shadow: 0 4px 14px rgba(229, 50, 45, .22); }
.use_hover .detail_page_body .add_cart_btn .cartinput:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(229, 50, 45, .28); }

/* 14-2. 左サイドの「文字 + アイコン」のリンク(自由記入欄に貼る HTML: scripts/build_side_links.py) */
#container .side_free_box { margin-bottom: 0; }
#container .side_free_box .custom_space { padding: 0; }
#container .km-side-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--km-muted);
  margin: 0;
  padding: 6px 10px 6px;
}
#container .km-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--km-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
#container .km-side-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  transition: color .18s ease, transform .18s ease;
}
#container .km-side-icon svg { width: 20px; height: 20px; display: block; }
#container .km-side-text { flex: 1 1 auto; }
#container .km-side-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: #FFFFFF;
  background-color: var(--km-accent);
  border-radius: var(--km-radius-pill);
  padding: 4px 8px;
}
#container .km-side-link--sale .km-side-icon { color: var(--km-accent); }
.use_hover #container .km-side-link:hover { background-color: var(--km-soft); color: var(--km-primary); transform: translateX(2px); }
.use_hover #container .km-side-link:hover .km-side-icon { color: var(--km-primary); }
.use_hover #container .km-side-link--sale:hover .km-side-icon { color: var(--km-accent); }
/* ブランドの行(カモシカ・ヘリテイジ・エスパース): 左の枠にマークの画像(data URI)。ヘリテイジのマークは横長なので枠の幅を広げる(2026-10-29) */
#container .km-side-icon--logo { width: auto; min-width: 22px; max-width: 56px; }
#container .km-side-icon--logo img { max-width: 56px; }
/* 案 B(文字の代わりにロゴ)のとき: ロゴと「(テント)」を横に並べる */
#container .km-side-text--logo { display: flex; align-items: center; gap: 6px; }
#container .km-side-sub { font-size: 12px; color: #555555; }
/* 文字化のあとは、バナーの最後と「カテゴリ」の間を少し空ける */
#container .category_nav_box { margin-top: 20px; }
/* ---- 15. v5(2026-10-28 深夜・他のページ種類の下見で見つけた 2 点) ---------------------------- */
/* 15-1. カート・ログイン・会員登録・お問い合わせ(1 カラムの簡易ヘッダー .min_header)の「その他メニュー」ボタンが
        2〜3 行に折り返していた(今の本番でも 2 行)→ 1 行の丸いボタンに */
#container .min_header .header_right,
#container .min_header .header_nav_size1,
#container .min_header .h_menu { width: auto; }
#container .min_header .h_menu .nav_btn {
  background-color: #FFFFFF;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-pill);
  padding: 0 16px;
  height: 38px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--km-text);
}
#container .min_header .h_menu .nav_btn .nav_text { white-space: nowrap; }
.use_hover #container .min_header .h_menu .nav_btn:hover { background-color: var(--km-primary); border-color: var(--km-primary); color: #FFFFFF; }
#container .min_header { border-bottom: 1px solid var(--km-line-soft); }

/* 15-2. 左サイドの見出しは「カテゴリ」だけでなく全部(検索結果ページの「特集」など)を同じ小さな見出しに */
#container .side_box .section_title h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--km-muted);
  padding: 0 10px 6px;
  margin: 0;
  background-color: transparent;
  border: 0 none;
}
@media screen and (max-width: 839px) {
  #container .side_box .section_title h2 {
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--km-text);
    padding: 10px 32px 10px 10px;
    position: relative;
  }
  /* スマホの簡易ヘッダー: 文字を入れると右端からはみ出すので、丸いアイコンだけにする(開くメニューの中に文字がある) */
  #container .min_header .h_menu .nav_btn { padding: 0; width: 38px; height: 38px; justify-content: center; }
  #container .min_header .h_menu .nav_btn .nav_text { padding: 0; }
  #container .min_header .h_menu .nav_btn .nav_label { display: none; }
  #container .min_header .h_menu .nav_btn .fa { font-size: 16px; margin: 0; position: static; }
}
/* ---- 16. v6(2026-10-29 ちかおさんの指摘: 検索の虫眼鏡がズレている) --------------------------
   ボタンの中は「アイコン(::before・FontAwesome 22px)+ 文字『検索』(22px)」で、30px の丸い枠に収まらず
   文字が右にはみ出して切れていた(虫眼鏡が左に寄って見える)。文字は読み上げ用に残して見えなくし、
   アイコンだけを中央に置く */
#container .search_form .searchinput.btn_color_common {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  text-indent: 0;
}
#container .search_form .searchinput.btn_color_common::before {
  font-size: 15px;
  line-height: 1;
  margin: 0;
  position: static;
}
#container .search_form .searchinput .button_text,
#container .search_form .searchinput .button_head_space,
#container .search_form .searchinput .button_end_space {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* スマホの検索バー(開いたとき): 窓を右端まで伸ばすと「×」と重なるので、「×」の分(44px)だけ右を空ける */
@media screen and (max-width: 839px) {
  #container .search_bar .search_form { display: block; margin-right: 44px; }
  #container .search_bar .search_form .search_box { width: 100%; margin-right: 0; }
  #container .search_bar .search_close {
    width: 32px;
    height: 32px;
    top: 8px;
    right: 6px;
    padding: 0;
    border: 0 none;
    border-radius: 50%;
    background-color: var(--km-soft);
    color: var(--km-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
}
/* ▲ デザインテーマ「ライト」案 v6 ここまで */

/* ---- 17. v7(2026-10-29 ちかおさんの指示: サイドのブランド 3 行の確定版) ------------------------------ */
/* カモシカ = 文字だけ「カモシカオリジナル」/ ヘリテイジ = HERITAGE ロゴ + 小さく「ヘリテイジ」/ エスパース = 赤い ESPACE ロゴ + 小さく「エスパース」。
   3 行とも左の枠(アイコン)を持たず、ロゴ・文字が左端から始まる(HTML は scripts/build_side_links.py --logo C。テントの絵・鹿のマークは使わない) */
#container .km-side-link--brand { min-height: 38px; box-sizing: border-box; }
#container .km-side-link--brand .km-side-text--logo { gap: 8px; flex-wrap: nowrap; }
#container .km-side-link--brand .km-side-text--logo img { flex: 0 0 auto; }
#container .km-side-link--brand .km-side-sub { font-size: 11.5px; color: #555555; letter-spacing: .02em; line-height: 1; padding-top: 1px; white-space: nowrap; }
.use_hover #container .km-side-link--brand:hover .km-side-sub { color: var(--km-primary); }

/* ---- 18. v7: 上部のメニューを固定(sticky)(2026-10-29 ちかおさん「上部にスティッキーで固定させることは可能か」→ できる) ----
   実測(2026-10-29・PC/スマホ): #header_wrapper の先祖に overflow: hidden / transform は無い。#container は overflow: clip
   (ocnk.min.css の @supports)で、clip はスクロールの箱を作らないので sticky が効く(hidden なら効かなかった)。
   張り付かせる箱は <header>(#main_wrapper の直下)。#header_wrapper 自身に書くと、親の <header> の高さ分しか動けず効かない。
   z-index はスマホの左メニュー(#left_side_col = 99)・幕(.menu_blocker = 100)より下に置く(メニューを開くとヘッダーも暗くなる) */
#container #main_wrapper > header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #FFFFFF;
  box-shadow: 0 1px 0 var(--km-line);
}
/* ページ内リンクで飛んだ先が固定ヘッダーの下に隠れないように */
html { scroll-padding-top: 150px; }
@media screen and (max-width: 839px) { html { scroll-padding-top: 120px; } }
/* 18-2 の「スクロールで畳む」は v9 では opt_sticky_a.css / opt_sticky_c.css に分けた(2026-11-02・ちかおさんが見比べて選ぶ) */

/* ---- 19. v8(2026-10-29 午後 ちかおさん): PC ではログイン・会員登録を上部のメニューに / サイドのショッピングカートは消す ---------
   上部のログイン・会員登録はちかおさんが後日おちゃのこの設定(ヘッダーのナビ)で足す。足されたとき、カートと同じ丸いボタンに揃うようにしておく
   (モックは work/redesign/inject_header_links.js で同じ形の li を足して見せている) */
@media screen and (min-width: 840px) {
  #container .header_right .inner_header_nav { gap: 8px; align-items: center; }
  #container .header_right .header_nav_item { width: auto; }
  #container .header_right .header_nav_item .nav_btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--km-line);
    border-radius: var(--km-radius-pill);
    background-color: #FFFFFF;
    color: var(--km-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  #container .header_right .header_nav_item .nav_btn .nav_text { display: inline-flex; align-items: center; padding: 0; }
  #container .header_right .header_nav_item .nav_btn .menu_nav_icon { display: inline-block; position: static; width: auto; height: auto; margin-right: 6px; font-size: 13px; color: var(--km-muted); }
  #container .header_right .h_cart .nav_btn { background-color: var(--km-soft); border-color: var(--km-soft); }
  .use_hover #container .header_right .header_nav_item .nav_btn:hover { background-color: var(--km-primary); border-color: var(--km-primary); color: #FFFFFF; }
  .use_hover #container .header_right .header_nav_item .nav_btn:hover .menu_nav_icon { color: #FFFFFF; }
  /* 検索窓は absolute(右から 130px・カートの左)に置かれている → ログイン・会員登録が足されると重なる(2026-10-29 実測)。
     #inner_header(ロゴ | ナビ)を display: contents でほどき、ロゴ・検索窓・ナビを #header_area の横並び(flex)にして自動で詰める */
  #container #header_area { display: flex; align-items: center; }
  #container #header_area #inner_header { display: contents; }
  #container #header_area .header_left { order: 1; }
  #container #header_area .search_bar { order: 2; position: static; top: auto; right: auto; margin-left: auto; margin-right: 14px; width: auto; }
  #container #header_area .search_bar .search_box { width: 280px; }
  #container #header_area .header_right { order: 3; }
  /* PC: サイドのログイン・会員登録の箱は出さない(上部に入る) */
  #container .side_box.login_nav_box { display: none; }
}
/* 全幅: サイドのショッピングカートは消す(スマホはヘッダーにカートのアイコンがある) */
#container .side_box.cart_nav_box { display: none; }

/* ---- 20. v8: 商品ページ(商品詳細)では PC の左サイドを出さない(ちかおさん「スッキリして清潔感・信頼感・高級感がアップ」) --------
   #left_side_col 自体は残す(K4 の上部パネル = カテゴリの箱がこの中にあるため)。幅を 0 にして、中の箱(特集・サービス / 営業カレンダー)を隠す。
   本文(#maincol)は flex-grow で全幅に広がる(ocnk.min.css)。読みやすいよう最大幅 1180px で中央に。スマホは今までどおり(左から出るメニュー) */
@media screen and (min-width: 840px) {
  body.detail_page_body #container #left_side_col { width: 0 !important; min-width: 0; padding: 0; margin: 0; overflow: visible; }   /* !important = 共通 CSS の .side_col { width: 250px !important } に勝つため(2026-10-29 実測: 無いと幅 209px が残り本文が右に寄る) */
  body.detail_page_body #container #left_side_col .side_section:not(.category_nav_box) { display: none; }   /* ⚠ 営業カレンダーは side_box を持たない(side_section だけ)・2026-10-29 実測 */
  body.detail_page_body #container.has_left_side_menu .layout_2_col #main_container { padding-left: 0; }
  body.detail_page_body #container #maincol { width: 100%; max-width: 1180px; margin: 0 auto; }
}

/* ---- 21. v8: 商品画像の「マウスを乗せると少し大きくなる」動き(テンプレート: img を scale(1.05)・本番にもある) ----------------
   v7 で画像を角丸にしたぶん、拡大したとき角がはみ出して見えた(ちかおさん「ズームがうまく働かず画像がずれる」= プレビュー環境のせいではない)
   → 枠(.slider_image_box)の側を角丸 + overflow: hidden にして、枠の中で拡大するように。画像自体の角丸はやめる */
.detail_page_body .main_photo_slide .slider_image_box { overflow: hidden; border-radius: 14px; }
.detail_page_body .main_photo_slide .item_image_box img { border-radius: 0; }

/* ---- 22. (2026-10-29)説明の中のリンク色は §1 の :not() で本番のままにした(いちど「一律に青」にしたが、本番は黒 + D の表だけ青だったので取り下げ) ---- */


/* ---- 19-K1. 左のカテゴリを「見出し」で区切る(案 K1・2026-10-29 ちかおさん「カテゴリのメニューは冗長で古めかしい。他にアイデアを」) ----
   33 個の大カテゴリを 7 つのグループに分け、グループごとに小さな見出しを置く。HTML は触らない:
   順番は flex の order で並べ替え(カテゴリの id = li.maincategoryN)、見出しは各グループの先頭の li の ::before。
   ⚠ ここに無い id(新しいカテゴリ)は「そのほか」の末尾に入る。カテゴリを増やしたら F に言う(order と見出しを足す) */
#container .side_itemlist_nav .menu_link_list.inner_itemlist_nav { display: flex; flex-direction: column; }
#container .side_itemlist_nav .menu_link_item { display: block; order: 89; }   /* ⚠ 個別の order と同じ詳細度にして、後ろの個別規則が勝つようにする(2026-10-29 に汎用側が強くて並べ替えが効かなかった) */
/* 見出し */
#container .side_itemlist_nav .maincategory31::before,
#container .side_itemlist_nav .maincategory4::before,
#container .side_itemlist_nav .maincategory3::before,
#container .side_itemlist_nav .maincategory240::before,
#container .side_itemlist_nav .maincategory105::before,
#container .side_itemlist_nav .maincategory127::before,
#container .side_itemlist_nav .maincategory85::before {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  color: var(--km-muted);
  padding: 18px 10px 5px;
}
#container .side_itemlist_nav .maincategory31::before  { content: "クライミング"; padding-top: 4px; }
#container .side_itemlist_nav .maincategory4::before   { content: "山道具"; }
#container .side_itemlist_nav .maincategory3::before   { content: "靴・クライミングシューズ"; }
#container .side_itemlist_nav .maincategory240::before { content: "ウェア"; }
#container .side_itemlist_nav .maincategory105::before { content: "スキー・アバランチギア"; }
#container .side_itemlist_nav .maincategory127::before { content: "高所作業・ケイビング"; }
#container .side_itemlist_nav .maincategory85::before  { content: "そのほか"; }
/* 順番(グループごとに 10 の位を変える) */
#container .side_itemlist_nav .maincategory31  { order: 10; }  /* クライミングギア・登攀具 */
#container .side_itemlist_nav .maincategory98  { order: 11; }  /* クライミングギア・登攀具(冬期) */
#container .side_itemlist_nav .maincategory4   { order: 20; }  /* テント・ツェルト・タープ */
#container .side_itemlist_nav .maincategory72  { order: 21; }  /* シュラフ・マット */
#container .side_itemlist_nav .maincategory60  { order: 22; }  /* ザック・バックパック */
#container .side_itemlist_nav .maincategory55  { order: 23; }  /* バーナー・ストーブ */
#container .side_itemlist_nav .maincategory128 { order: 24; }  /* クッカー・カトラリー・食器類 */
#container .side_itemlist_nav .maincategory59  { order: 25; }  /* トレッキングポール */
#container .side_itemlist_nav .maincategory58  { order: 26; }  /* ヘッドランプ・ライト */
#container .side_itemlist_nav .maincategory266 { order: 27; }  /* ボトル・ハイドレーション */
#container .side_itemlist_nav .maincategory268 { order: 28; }  /* エマージェンシー・緊急用品 */
#container .side_itemlist_nav .maincategory94  { order: 29; }  /* 食料・サプリメント */
#container .side_itemlist_nav .maincategory8   { order: 30; }  /* 小物・雑貨 */
#container .side_itemlist_nav .maincategory3   { order: 40; }  /* クライミングシューズ */
#container .side_itemlist_nav .maincategory83  { order: 41; }  /* シューズ */
#container .side_itemlist_nav .maincategory77  { order: 42; }  /* 沢靴・渓流タビ */
#container .side_itemlist_nav .maincategory355 { order: 43; }  /* インソール */
#container .side_itemlist_nav .maincategory240 { order: 50; }  /* トップス */
#container .side_itemlist_nav .maincategory248 { order: 51; }  /* ボトムス */
#container .side_itemlist_nav .maincategory352 { order: 52; }  /* アンダーウェア */
#container .side_itemlist_nav .maincategory260 { order: 53; }  /* キャップ・ビーニー・その他 */
#container .side_itemlist_nav .maincategory256 { order: 54; }  /* グローブ */
#container .side_itemlist_nav .maincategory257 { order: 55; }  /* ソックス */
#container .side_itemlist_nav .maincategory103 { order: 56; }  /* スパッツ・テントシューズ */
#container .side_itemlist_nav .maincategory177 { order: 57; }  /* finetrack製品 */
#container .side_itemlist_nav .maincategory105 { order: 60; }  /* 山スキー・バックカントリースキー */
#container .side_itemlist_nav .maincategory87  { order: 61; }  /* アバランチギア */
#container .side_itemlist_nav .maincategory127 { order: 70; }  /* 高所作業用品 */
#container .side_itemlist_nav .maincategory342 { order: 71; }  /* ケイビング・キャニオニング装備 */
#container .side_itemlist_nav .maincategory85  { order: 80; }  /* 書籍・地図・DVD/BD */
#container .side_itemlist_nav .maincategory146 { order: 81; }  /* カモシカオリジナル メンバーズバッグ */
#container .side_itemlist_nav .maincategory267 { order: 82; }  /* リペア・メンテナンス用品 */
/* 「全商品」は最後に・上に細い線 */
#container .side_itemlist_nav .menu_link_item.all_items { order: 99; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--km-line-soft); }

/* 商品ページ(PC)はサイドを出さない(v8 §20)ので、サイドの中のカテゴリも隠す */
@media screen and (min-width: 840px) { body.detail_page_body #container #left_side_col .category_nav_box { display: none; } }


/* ======================================================================================================
   ---- 23. v9(2026-11-02 プラン M): テンプレート内蔵の「押すと開くメニュー」を本命に(K4 の hover パネルは廃止 = opt_cat_K4 を使わない) ----
   大きなメニューの各項目を押すと開く .popup_nav_area.popup_menu_area(#header_wrapper > .popup_base_menu の中 = 固定ヘッダーの直下に出る)。
   構造(実測 2026-11-02): .inner_popup_nav_area.popup_main_menu > .popup_nav_title(題名) + .popup_nav > ul.inner_popup_nav > li.popup_nav_item.popup_menu_categoryN / popup_menu_groupN
   子カテゴリ = a.has_popup_sub_menu を押すと .popup_sub_menu(戻る .popup_menu_back + 子の一覧)に切り替わる。× = a.close_btn_box(右上)と .nav_close_box(下の帯)
   ====================================================================================================== */
#container .popup_menu_area .inner_popup_nav_area {
  /* ⚠ position は下で本体(.popup_main_menu)= relative・子(.popup_sub_menu)= absolute に分ける。2026-11-02 ここで一律 relative にしたら、
     子の一覧が本体の下に流れて「押すと表示がズレる」になった(ちかおさん指摘) */
  max-height: calc(100vh - 160px);    /* ブランド 113 件のように長いときはカードの中でスクロール */
  overflow: auto;
  background-color: #FFFFFF;
  border: 1px solid var(--km-line);
  border-top: 0 none;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 28px 20px;
  box-sizing: border-box;
}
#container .popup_menu_area .popup_main_menu { position: relative; }
#container .popup_menu_area .popup_sub_menu { position: absolute; top: 0; left: 0; right: 0; }
/* 子の一覧を開いている間、裏の本体(aria-hidden=true)は見せない(× が左端に残って見えた) */
#container .popup_menu_area .inner_popup_nav_area[aria-hidden="true"] { visibility: hidden; }
/* 題名(「カテゴリ」「取扱いブランド(一般)」…)は小さな見出しに */
#container .popup_menu_area .popup_nav_title { padding: 6px 0 10px; border-bottom: 1px solid var(--km-line-soft); margin-bottom: 10px; }
#container .popup_menu_area .popup_nav_title .popup_sub_title { padding: 0; text-align: left; }
#container .popup_menu_area .popup_nav_title .title_text { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--km-muted); }
#container .popup_menu_area .popup_nav_title .title_head_space,
#container .popup_menu_area .popup_nav_title .title_end_space { display: none; }
/* 一覧: 4 列の grid(行 34px・列をまたいで隙間なく) */
#container .popup_menu_area .inner_popup_nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 34px;
  grid-auto-flow: row dense;
  column-gap: 28px;
  row-gap: 0;
  align-items: start;
  padding: 0;
}
#container .popup_menu_area .popup_nav_item { display: block; width: auto; margin: 0; position: relative; }
#container .popup_menu_area .popup_nav_item .nav_btn {
  display: block;
  height: 34px;
  padding: 0 26px 0 8px;
  border: 0 none;
  border-radius: 8px;
  background-color: transparent;
  color: var(--km-text);
  font-size: 13px;
  line-height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#container .popup_menu_area .popup_nav_item .nav_btn .nav_text { display: block; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#container .popup_menu_area .popup_nav_item .nav_btn .nav_label { display: inline; }
#container .popup_menu_area .popup_nav_item .nav_btn .menu_nav_icon,
#container .popup_menu_area .popup_nav_item .nav_btn .right_side_nav_icon { display: none; }
.use_hover #container .popup_menu_area .popup_nav_item .nav_btn:hover { background-color: var(--km-soft); color: var(--km-primary); }
/* 子カテゴリがある項目: 右端に「›」(押すと子の一覧に切り替わる) */
#container .popup_menu_area .popup_nav_item .nav_btn.has_popup_sub_menu::after {
  content: "›";
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -9px;
  line-height: 18px;
  font-size: 16px;
  color: var(--km-muted);
}
/* 右上の × : 細い線の丸いボタン(FontAwesome の太い × は使わない) */
#container .popup_menu_area .close_btn_box.icon_btn {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 12px;
  right: 20px;
  z-index: 2;
  border: 1px solid var(--km-line);
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: none;
  transition: border-color .18s ease, background-color .18s ease;
}
#container .popup_menu_area .close_btn_box .close_btn { display: block; width: 100%; height: 100%; position: relative; }
#container .popup_menu_area .close_btn_box .close_btn .fa-times { display: none; }
#container .popup_menu_area .close_btn_box .close_btn::before,
#container .popup_menu_area .close_btn_box .close_btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -1px 0 0 -7px;
  background-color: var(--km-text);
  transform: rotate(45deg);
}
#container .popup_menu_area .close_btn_box .close_btn::after { transform: rotate(-45deg); }
.use_hover #container .popup_menu_area .close_btn_box.icon_btn:hover { border-color: var(--km-primary); background-color: var(--km-soft); }
/* 下の黒い帯の × は PC では出さない(右上の × で足りる) */
#container .popup_menu_area .nav_close_box { display: none; }
/* 子の一覧: 「戻る」は丸いボタン・題名は子カテゴリの名前 */
#container .popup_menu_area .popup_menu_back { margin: 0 0 8px; }
#container .popup_menu_area .popup_menu_back .backinput {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-pill);
  background: #FFFFFF;
  color: var(--km-text);
  font-size: 12.5px;
}
.use_hover #container .popup_menu_area .popup_menu_back .backinput:hover { background-color: var(--km-primary); border-color: var(--km-primary); color: #FFFFFF; }
#container .popup_menu_area .popup_sub_menu .popup_nav_title .title_text { font-size: 15px; letter-spacing: .02em; color: var(--km-text); text-transform: none; }

/* 23-2. 「カテゴリ」のポップアップは左メニューと同じ 7 グループで区切る(列 = グループで決める・順番 = order。K1 と同じ id) */
#container .popup_menu_category .inner_popup_nav > li { order: 89; grid-column: 4; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category31,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category98,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category3,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category83,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category77,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category355 { grid-column: 1; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category4,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category72,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category60,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category55,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category128,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category59,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category58,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category266,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category268,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category94,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category8 { grid-column: 2; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category240,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category248,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category352,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category260,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category256,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category257,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category103,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category177 { grid-column: 3; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category31  { order: 10; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category98  { order: 11; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category4   { order: 20; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category72  { order: 21; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category60  { order: 22; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category55  { order: 23; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category128 { order: 24; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category59  { order: 25; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category58  { order: 26; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category266 { order: 27; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category268 { order: 28; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category94  { order: 29; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category8   { order: 30; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category3   { order: 40; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category83  { order: 41; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category77  { order: 42; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category355 { order: 43; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category240 { order: 50; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category248 { order: 51; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category352 { order: 52; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category260 { order: 53; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category256 { order: 54; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category257 { order: 55; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category103 { order: 56; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category177 { order: 57; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category105 { order: 60; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category87  { order: 61; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category127 { order: 70; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category342 { order: 71; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category85  { order: 80; } #container .popup_menu_category .inner_popup_nav > li.popup_menu_category146 { order: 81; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category267 { order: 82; }
/* 見出し(グループの先頭の li の ::before・1 行ぶん・下寄せ) */
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category31::before,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category4::before,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category3::before,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category240::before,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category105::before,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category127::before,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category85::before {
  display: block; height: 34px; box-sizing: border-box; padding: 14px 8px 0; line-height: 1.2;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--km-muted);
}
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category31::before  { content: "クライミング"; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category4::before   { content: "山道具"; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category3::before   { content: "靴・クライミングシューズ"; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category240::before { content: "ウェア"; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category105::before { content: "スキー・アバランチギア"; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category127::before { content: "高所作業・ケイビング"; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category85::before  { content: "そのほか"; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category31,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category4,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category3,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category240,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category105,
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category85 { grid-row: span 2; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category127 { grid-row: span 3; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category127 .nav_btn { height: 68px; line-height: 1.4; padding-top: 7px; white-space: normal; }
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category127 .nav_btn .nav_text { white-space: normal; }
/* 「全商品」(番号なしの li = 先頭)は一番下に・全列にまたがる */
#container .popup_menu_category .inner_popup_nav > li.popup_menu_category:not([class*="popup_menu_category1"]):not([class*="popup_menu_category2"]):not([class*="popup_menu_category3"]):not([class*="popup_menu_category4"]):not([class*="popup_menu_category5"]):not([class*="popup_menu_category6"]):not([class*="popup_menu_category7"]):not([class*="popup_menu_category8"]):not([class*="popup_menu_category9"]) {
  order: 99; grid-column: 1 / -1; grid-row: span 2; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--km-line-soft);
}
/* ⚠ 子の一覧(.popup_sub_menu)は上の並べ替えの対象外: 子の li も popup_menu_categoryN を持つので、子の一覧では grid の列指定を戻す */
#container .popup_menu_area .popup_sub_menu .inner_popup_nav > li { order: 0; grid-column: auto; grid-row: auto; margin: 0; padding: 0; border: 0; }
#container .popup_menu_area .popup_sub_menu .inner_popup_nav > li::before { display: none; content: none; }
#container .popup_menu_area .popup_sub_menu .inner_popup_nav > li .nav_btn { height: 34px; line-height: 34px; padding-top: 0; white-space: nowrap; }

/* 23-3. 特集・サービス(ちかおさんが「ポップアップリンク追加」で足す・中身 = F の HTML .km-side-link)はポップアップの中で 3 列 */
#container .popup_menu_area .km-side-heading { display: none; }
#container .popup_menu_area .km-feature { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 2px; margin: 0; padding: 0; list-style: none; }
#container .popup_menu_area .km-side-link { padding: 7px 10px; }

/* 23-4. 大きなメニューの行: 6 項目になっても 1 行に収まるように少し詰める */
#container .global_nav .inner_global_nav { gap: 6px; }
#container .inner_global_nav .nav_btn,
#container .global_nav_item:first-child .nav_btn { padding: 0 14px; font-size: 14px; }
/* 開いている項目には下線を残す */
#container .inner_global_nav .nav_btn.popup_opened::before { transform: scaleX(1); }

/* ---- 24. v9: PC は全ページで左サイドを出さない(商品ページだけだった §20 を全ページに)。入口は上部のメニューだけ ---- */
@media screen and (min-width: 840px) {
  #container #left_side_col { display: none; }
  #container.has_left_side_menu .layout_2_col #main_container { padding-left: 0; }
  #container #maincol { width: 100%; max-width: 1180px; margin: 0 auto; }
  /* 商品名の 2 回目(右の欄)は出さない(2026-11-02 ちかおさん・PC だけ) */
  body.detail_page_body #container .detail_block_name { display: none; }
}

/* ---- 25. v9: スマホ(839px 以下)は入口をハンバーガーに集約(横 1 列の大きなメニューは出さない)。左メニューの中は PC と同じ順番・見出し ---- */
@media screen and (max-width: 839px) {
  #container .header_global_nav { display: none; }
  /* 左メニューの中の小さな見出し(文字化 HTML の .km-side-heading)は PC と同じ字づら */
  #container #left_side_col .km-side-heading { font-size: 11px; letter-spacing: .1em; color: var(--km-muted); padding: 14px 10px 4px; }
  /* 左メニューの × (テンプレートの .side_menu_close_btn)も細い線に */
  #container .side_menu_close_btn .close_btn_box { width: 32px; height: 32px; border: 1px solid var(--km-line); border-radius: 50%; background: #FFFFFF; }
  #container .side_menu_close_btn .close_btn { display: block; width: 100%; height: 100%; position: relative; }
  #container .side_menu_close_btn .close_btn .fa-times { display: none; }
  #container .side_menu_close_btn .close_btn::before,
  #container .side_menu_close_btn .close_btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -1px 0 0 -7px; background-color: var(--km-text); transform: rotate(45deg); }
  #container .side_menu_close_btn .close_btn::after { transform: rotate(-45deg); }
  /* 内蔵ポップアップはスマホでは 1 列・行 44px(横 1 列を隠すので通常は開かないが、念のため) */
  #container .popup_menu_area .inner_popup_nav { grid-template-columns: 1fr; grid-auto-rows: 44px; column-gap: 0; }
  #container .popup_menu_area .popup_nav_item .nav_btn { height: 44px; line-height: 44px; font-size: 14px; }
  #container .popup_menu_area .inner_popup_nav_area { border-radius: 0; box-shadow: none; padding: 8px 12px 16px; }
  #container .popup_menu_category .inner_popup_nav > li,
  #container .popup_menu_category .inner_popup_nav > li.popup_menu_category127 { grid-column: 1; grid-row: auto; }
  #container .popup_menu_category .inner_popup_nav > li::before { height: auto; padding: 16px 8px 4px; }
}

/* ---- 26. v9.1(2026-11-02 ちかおさんの確認後) ----------------------------------------------------------------- */
/* 26-1. スマホの左メニューの順番: ログイン → カテゴリ → 一覧(登山ブランド・高所作業カテゴリ・高所作業ブランド)→ 特集・サービス → そのほか
   (箱は自由記入欄の並び順で出るので、flex の order で並べ替える。一覧の箱は中のリンクのクラス .km-side-link--menu で見分ける) */
#container #left_side_col .inner_side_container { display: flex; flex-direction: column; }
#container #left_side_col .inner_side_container > * { order: 50; }
#container #left_side_col .inner_side_container > .login_nav_box { order: 10; }
#container #left_side_col .inner_side_container > .category_nav_box { order: 20; }
#container #left_side_col .inner_side_container > .side_free_box:has(.km-side-link--menu) { order: 30; }
#container #left_side_col .inner_side_container > .side_free_box { order: 40; }
#container #left_side_col .inner_side_container > .side_free_box:has(.km-side-link--menu) { order: 30; }
#container #left_side_col .inner_side_container > .basic_nav_box { order: 90; }
@media screen and (max-width: 839px) { #container .category_nav_box { margin-top: 8px; } }
/* 26-1b. 「靴 フィッティングサービス」は特集・サービスの最下部(2026-11-02 ちかおさん)。管理画面の欄は 6 番目のままなので、中のリンクの目印 .km-side-link--shoes で見分けて最後へ。
   ほかの特集の箱 = 40・そのほか(.basic_nav_box)= 90 の間 */
#container #left_side_col .inner_side_container > .side_free_box:has(.km-side-link--shoes) { order: 45; }

/* 26-2. ロゴ画像の角を丸めない(§9 の .side_free_box img { border-radius } が当たっていた・ヘリテイジのマークの角が丸かった) */
#container .km-side-link img, #container .km-feature img { border-radius: 0; box-shadow: none; transform: none; }
/* 26-3. ブランドの 3 行(カモシカ・ヘリテイジ・エスパース)は「マーク/ロゴ + 小さな文字」で揃える(文字は .km-side-sub = 11.5px) */
#container .km-side-link--brand .km-side-icon--logo { width: 76px; min-width: 76px; max-width: 76px; justify-content: flex-start; }   /* 3 行の文字の位置を揃える(ロゴの幅 27〜73px)。2026-11-02 22px だと文字が重なった */
#container .km-side-link--brand .km-side-icon--logo img { max-width: none; }
/* 26-4. SALE の印は文頭(左の枠の代わり)・文字は普通の行と同じ */
#container .km-side-link--sale .km-side-badge { flex: 0 0 auto; margin-right: 2px; }
/* 26-5. 商品ページの「◆会員登録(無料)をして頂きますと…」(カートボタンの下の定型文 .product_detail_cart_add_btn_freetext)は一回り小さく(2026-11-02 ちかおさん) */
#container .detail_section.product_detail_cart_add_btn_freetext { font-size: 13px; line-height: 1.7; }

/* 26-6. スマホの左メニュー: 「カテゴリ」の見出しは PC の上部メニューと同じ「登山カテゴリ」と表示(データは不変・表示だけ)。
   一覧の 3 本(登山ブランド・高所作業カテゴリ・高所作業ブランド)には見出しを付けて、カテゴリの中身と誤解されないように(2026-11-02 ちかおさん) */
@media screen and (max-width: 839px) {
  #container .category_nav_box .section_title .title_text { font-size: 0; }
  #container .category_nav_box .section_title .title_text::after { content: "登山カテゴリ"; font-size: 14px; letter-spacing: .04em; }
  #container #left_side_col .side_free_box:has(.km-side-link--menu) { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--km-line-soft); }
  #container #left_side_col .side_free_box:has(.km-side-link--menu) .km-side-heading { padding-top: 0; }
  #container #left_side_col .side_free_box:has(.km-side-heading):not(:has(.km-side-link--menu)) { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--km-line-soft); }
}

/* ---- 27. ログインの状態に合わせたヘッダー(2026-11-05 ちかおさん「サイドメニューの『ログイン』の項目(ログイン・会員登録 → ログイン後は マイページ・ログアウト)を活用したい」) ----
   おちゃのこは #container に visitor(未ログイン)/ membership(ログイン中)のクラスを付け、サイドの .login_nav_box の中身を状態に合わせて出す(実測 2026-11-05)。
   ヘッダー欄のスクリプト(header_login_state.js)がその箱の項目を複製してヘッダー右上(カートの前)に差し込む(印 .km-header-login)。
   27-1. PC: 複製をカートと同じ丸いボタンに(§19 の .header_right .header_nav_item の規則がそのまま当たる)。複製があるときはテンプレート側の「ログイン」ボタン(h_singin ほか)を隠す。
   27-2. スマホ: 複製は出さない(左メニューに元の箱がある)。
   27-3. ログイン中は大きなメニューの「会員登録」(g_register)を出さない(会員には不要。未ログインでは今までどおり)。スクリプトが動かなくても CSS だけで効く */
@media screen and (min-width: 840px) {
  #container .header_right .inner_header_nav.km-has-header-login > li:not(.h_cart):not(.km-header-login) { display: none; }
  #container .header_right .km-header-login .nav_btn .nav_text { display: inline-flex; align-items: center; padding: 0; }
}
@media screen and (max-width: 839px) {
  #container .header_right .km-header-login { display: none; }
}
#container.membership .global_nav .g_register { display: none; }

/* ---- 28. 右上の「検索」ボタン(2026-11-07 ちかおさん「スマホでも検索は上部にあるか」→ 本番は右上の検索ボタンが OFF でスマホに検索の入口が無い。ON にすると虫眼鏡が出て検索バーが開く) ----
   PC(≥840)は §6 で検索窓を常時出しているので、虫眼鏡のボタンは二重になる → 隠す。スマホはテンプレートどおりアイコンで出す(押すと検索バーが開く・閉じる × は §16 で整えてある) */
@media screen and (min-width: 840px) {
  #container .header_right .h_search { display: none; }
}
/* 28-2. スマホ: 右上が 3 つ(検索・ログイン・カート)になるとテンプレートの右の箱(幅 110px 固定)から溢れてロゴに重なる(実測 2026-11-07: 3 つで 138px)
   → 右の箱は中身の幅に・ロゴの箱は縮められるように(ロゴ画像は幅いっぱいまで)。2 つのときは今までどおり */
@media screen and (max-width: 839px) {
  #container #inner_header { gap: 4px; }
  #container #inner_header .header_left, #container #inner_header .header_right { width: auto; flex: 0 0 auto; }
  #container #inner_header .header_center { min-width: 0; flex: 1 1 auto; }
  #container #inner_header .header_center img { max-width: 100%; height: auto; }
}

/* ---- 固定の畳み方 (c): スクロールすると大きなメニューの行が畳まれ、ロゴ・検索・ボタンの行が残る(v8 の 18-2 と同じ・K3 のバランス) ---- */
/* 18-2. スクロールしたら「大きなメニュー 4 つ」の行を畳んで、ロゴ・検索・カート(スマホはハンバーガー・ロゴ・アイコン)の行だけ残す。
   CSS のスクロール連動アニメーション(JS なし)。対応 = Chrome / Edge 115 以降・Safari 26 以降。
   未対応のブラウザでは何も起きず、18-1 のとおりヘッダー全体が固定されたまま(壊れない) */
@supports (animation-timeline: scroll()) {
  #container #main_wrapper > header .header_global_nav {
    overflow: hidden;
    animation: km-nav-fold linear both;
    animation-timeline: scroll(root);
    animation-range: 60px 180px;
  }
  @keyframes km-nav-fold {
    from { max-height: 72px; opacity: 1; }
    to   { max-height: 0;    opacity: 0; }
  }
}

/* ▼▼▼ ここから下は商品登録システムが組み立てています（手で直さないでください）▼▼▼ */

/* --- 新しい案内の枠 --- */
/* ===== 新しい案内の枠 2 つ（#248、2026-08-18）=========================
   ・国内規格への適合について（部門 28 を中心に 57 商品）
   ・フィッティングサービス対応商品（部門 8/9 の 59 商品）
   見た目は既存 6 種類と同じ規格（角丸 5px / 内側 28・14・18px / 帯は左上 -13px）。
   ⚠ 既存 6 種類の共通指定は本番の CSS 側にあり、そこに新しいクラス名が
     書かれていないため、**ここで同じ値を書き直しています**。
   ⚠ 色は既にある黄（製品説明）・赤（プロ会員）と重ならないものを選びました。
     部門 28 の 758 商品には**その 2 枠が必ず付いている**ので、3 つ目の枠になります。 */
.compliance-notice-textBox,
.fitting-notice-textBox {
    position: relative;
    margin: 30px 0 20px 0;
    padding: 28px 14px 18px 14px;
    border: 1px solid;
    border-radius: 5px;
}

.compliance-notice-textBox:before,
.fitting-notice-textBox:before {
    position: absolute;
    top: -13px;
    left: 14px;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    color: #fff;
}

.compliance-notice-textBox > *:first-child,
.fitting-notice-textBox > *:first-child {
    margin-top: 0;
}

.compliance-notice-textBox > *:last-child,
.fitting-notice-textBox > *:last-child {
    margin-bottom: 0;
}

/* 国内規格への適合について
   ちかおさん 2026-08-18「これらの『適合』関連の案内は高所作業従事者への訴求ポイントですので、
   まとめて、軽く四角で囲むなどレイアウト的にもシンプルに整えて頂けたら、ありがたいです」 */
.compliance-notice-textBox {
    border-color: #1f4e79;
}

.compliance-notice-textBox:before {
    background-color: #1f4e79;
    content: "国内規格への適合について";
}

/* フィッティングサービス対応商品
   ちかおさん 2026-08-18「緩やかな四角で囲って、高所作業用品の会員登録のように、
   統一の DIV として、レイアウトも調整してテンプレ化してととのえられませんでしょうか」
   色はちかおさん選択 */
.fitting-notice-textBox {
    border-color: #0070c0;
}

.fitting-notice-textBox:before {
    background-color: #0070c0;
    content: "フィッティングサービス対応商品";
}

/* ===== 受注発注商品の案内枠（#70、2026-09-04）================================
   ちかおさん 2026-09-03「受注発注商品を含む商品ページに…ラベルを作成して添付して下さい。
   場所は、商品の説明文が始まる前がよいです」
   色 = 紫 #7030a0（2026-09-04 ちかおさん選択・案1。既存 8 色のどれとも重ならない）
   css_impact.py 検証済み（2026-09-04・24 チェック ✅ 当たった要素 0 個） */
.backorder-notice-textBox {
    position: relative;
    margin: 30px 0 20px 0;
    padding: 28px 14px 18px 14px;
    border: 1px solid;
    border-radius: 5px;
    border-color: #7030a0;
}

.backorder-notice-textBox:before {
    position: absolute;
    top: -13px;
    left: 14px;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    color: #fff;
    background-color: #7030a0;
    content: "受注発注商品について";
}

.backorder-notice-textBox > *:first-child {
    margin-top: 0;
}

.backorder-notice-textBox > *:last-child {
    margin-bottom: 0;
}

/* 目印（「・」）の大きさも既存の枠と揃える */
.compliance-notice-textBox li::marker,
.fitting-notice-textBox li::marker,
.backorder-notice-textBox li::marker {
    font-size: 0.6em;
}

/* --- 組み合わせ表・サイズ換算表 --- */
/* ===== 商品説明の中の「組み合わせのご案内」表 =====================
   パソコン (横幅 840px 以上) …… 表のまま 2 列
   スマートフォン (840px 未満) … 1 件ずつ縦に積む
   ※ 840px は おちゃのこ自身が最も多く使っている境目に合わせています */
.combi-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
}

.combi-table td {
    border: 1px solid #b5b5b5;
    padding: 8px 10px;
    vertical-align: top;
}

.combi-table .combi-head td {
    background-color: #dcdcdc;
    text-align: center;
    font-weight: bold;
}

.combi-table .combi-parts {
    width: 40%;
}

.combi-table p {
    margin: 0 0 10px;
}

.combi-table p:last-child {
    margin-bottom: 0;
}

.combi-table a {
    color: blue;
}

.combi-table .combi-plus {
    text-align: center;
    margin: 12px 0;
}

/* 列の見出しは、表が表として見えているあいだは要らない */
.combi-sp-label {
    display: none;
}

@media screen and (max-width: 839px) {
    .combi-table,
    .combi-table tbody,
    .combi-table tr,
    .combi-table td {
        display: block;
        width: auto;
    }

    .combi-table .combi-head {
        display: none;
    }

    .combi-table tr {
        border: 1px solid #b5b5b5;
        margin: 0 0 18px;
    }

    .combi-table td {
        border: 0;
        padding: 12px 14px;
    }

    /* ⚠ 40% の指定はクラス 2 つぶんの強さで書かれているので、
       ここでも同じ強さで打ち消さないと効かない (2026-08-16 実測で踏んだ) */
    .combi-table .combi-parts {
        width: auto;
        border-top: 1px dashed #c8c8c8;
        background-color: #fafafa;
    }

    .combi-sp-label {
        display: block;
        font-weight: bold;
        margin: 0 0 10px;
    }
}

/* ===== サイズ換算表 =================================================
   もとは 1 枚の画像（縦 1,479px）。文字にすると拡大してもぼやけず、検索にも載る。
   ⚠ MONDO 25 マスと EURO 30 マスが**同じ高さを分け合う**作り（元の画像と同じ）。
     cm と EURO で刻みが違うので、1 対 1 に並べると元に無い対応が生まれてしまう */
.size-conv-title {
    /* 🆕 2026-09-13 ちかおさん「商品説明文内のテキストは、基本左寄せにすると自然」
       → 既定を左寄せに。**サイズ換算表だけ** .is-center で中央に戻す（案 A） */
    text-align: left;
    font-weight: bold;
    margin: 20px 0 10px;
}

.size-conv-title.is-center {
    /* サイズ換算表は表そのものが中央寄せ（.size-conv の margin: 0 auto）なので、
       タイトルも中央のほうが揃って見える */
    text-align: center;
}

.size-conv {
    display: flex;
    max-width: 420px;
    margin: 0 auto 14px;
    border: 1px solid #b5b5b5;
}

.size-conv-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.size-conv-col + .size-conv-col {
    border-left: 1px solid #b5b5b5;
}

.size-conv-head {
    background-color: #404040;
    color: #ffffff;
    text-align: center;
    padding: 6px 2px;
    font-weight: bold;
}

.size-conv-cell {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #b5b5b5;
    padding: 5px 2px;
    text-align: center;
}

.size-conv-note {
    margin: 0 0 10px;
}

/* ===== 横長のサイズ表 ===============================================
   11 列あるのでスマートフォンには収まらない。**箱の中で横に送れる**ようにする。
   ⚠ おちゃのこの CSS に table{max-width:100%} があり、そのままだと表が縮んで
     文字が折り返してしまう。min-width:max-content で打ち消している */
.size-x {
    overflow-x: auto;
    margin: 14px 0 4px;
    -webkit-overflow-scrolling: touch;
}

.size-x-table {
    border-collapse: collapse;
    min-width: max-content;
}

.size-x-table th,
.size-x-table td {
    border: 1px solid #ded5bd;
    padding: 8px 14px;
    text-align: center;
    white-space: nowrap;
}

.size-x-table th {
    background-color: #ffffff;
    font-weight: normal;
}

.size-x-table td {
    background-color: #fdf5e0;
}

/* 切れているだけに見えないよう、狭いときだけ案内を出す
   ちかおさん 2026-08-16「あったほうが親切かな。（少しだけ字を小さめにしてください）」

   ⚠ **表ごとに出し分ける**（ちかおさん 2026-08-16「横にスクロールするほど長くないテーブルなのに、
      横にスクロールできるという注意書きが残る場合があるなら、それは、オミット」）。
      実サイトで測った「画面幅 → 説明欄の幅」は **説明欄 = 画面幅 − 20px**（280px より狭くはならない）。
      ∴ 表の本来の幅 w に対して **画面幅 < w + 20** のときだけ横へ動く。
      本来の幅が **300px 以下**（= 実在するいちばん狭い説明欄）の表には**クラスを付けない**。
      幅は `measure_table_width.py --width 100 --save` で実機計測した値を使い、
      下の出し分けは `build_css.py` が**この実測値から組み立てる**（手で書かない）。 */
.size-x-hint::after,
.size-x-hint-always::after,
.size-x-hint-359::after,
.size-x-hint-374::after,
.size-x-hint-389::after,
.size-x-hint-413::after,
.size-x-hint-427::after,
.size-x-hint-767::after,
.size-x-hint-1439::after {
    content: "→ 横にスクロールできます";
    display: none;
    font-size: 0.78em;
    color: #777777;
    margin: 2px 0 12px;
}

.size-x-hint-always::after {
    display: block;
}

@media screen and (max-width: 839px) {
    .size-x-hint::after {
        display: block;
    }
}

@media screen and (max-width: 359px) {
    .size-x-hint-359::after {
        display: block;
    }
}

@media screen and (max-width: 374px) {
    .size-x-hint-374::after {
        display: block;
    }
}

@media screen and (max-width: 389px) {
    .size-x-hint-389::after {
        display: block;
    }
}

@media screen and (max-width: 413px) {
    .size-x-hint-413::after {
        display: block;
    }
}

@media screen and (max-width: 427px) {
    .size-x-hint-427::after {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .size-x-hint-767::after {
        display: block;
    }
}

@media screen and (max-width: 1439px) {
    .size-x-hint-1439::after {
        display: block;
    }
}

/* --- 箇条書きの目印 --- */
/* ===== 商品説明の中の箇条書きの目印 ===============================
   ちかおさん 2026-08-16「リストタグの「・」大きくてデザイン的に重いです。
   もう少し、小さめの・にできないでしょうか？」
   ⚠ 商品説明の中だけに効かせています。ページには ul が 32 個あり、
     そのうち説明欄は 1 個だけ（残りはヘッダ・サイドメニュー・フッタ）。
     全体に効かせるとメニューの点まで小さくなります
   ⚠ 余白（下がり幅・上下の空き）は下の「商品説明の中の余白」にまとめてあります */
.item_desc_text li::marker {
    font-size: 0.6em;
}

/* 入れ子の箇条書きの目印
   ちかおさん 2026-08-16「２回目の・は、不自然なので、-とかにすると良いと思います」
   ⚠ 目印の文字は list-style-type で指定する（::marker の content より対応が広い）。
     対応していない古いブラウザでは丸のまま出るだけで、崩れはしない */
.item_desc_text ul ul {
    list-style-type: "- ";
}

/* ⚠ 1 階層目と同じ 0.6 倍にすると「-」が小さすぎて行の上に寄って見える
   （2026-08-16 に 5 通り並べて確認。0.9 倍がいちばん落ち着いた） */
.item_desc_text ul ul li::marker {
    font-size: 0.9em;
}

/* 説明欄の**外**にある案内の枠も、目印の大きさを揃える
   ちかおさん 2026-08-18「こちらですが、リストの・を CSS のものと同様に揃えて
   いただけますか？」（お届けについての枠・請求書払いの枠）
   ⚠ 実測 2026-08-18: 説明欄の中は 8.424px（0.6em）なのに、`.pre-notice-textBox` だけ
     14.04px のままだった。上の指定が `.item_desc_text` の中にしか効かないため。
   ⚠ 枠の名前を明示して足す（`li::marker` を全体に当てると、ヘッダ・サイドメニュー・
     フッタの点まで小さくなる。ページには ul が 32 個ある） */
.pre-notice-textBox li::marker,
.invoice-notice-textBox li::marker,
.student-notice-textBox li::marker,
.pro-product-notice-textBox li::marker,
.product-notice-textBox li::marker {
    font-size: 0.6em;
}

.pre-notice-textBox ul ul,
.invoice-notice-textBox ul ul,
.student-notice-textBox ul ul,
.pro-product-notice-textBox ul ul,
.product-notice-textBox ul ul {
    list-style-type: "- ";
}

.pre-notice-textBox ul ul li::marker,
.invoice-notice-textBox ul ul li::marker,
.student-notice-textBox ul ul li::marker,
.pro-product-notice-textBox ul ul li::marker,
.product-notice-textBox ul ul li::marker {
    font-size: 0.9em;
}

/* 固定ページ（自由ページ）の箇条書きも、目印の大きさを揃える
   ちかおさん 2026-08-18「https://www.kamoshikasports.com/page/29 「・」が大きいので、
   他のリスト、CSS と同様に揃えて下さい」
   ⚠ 器を名指しする（`li::marker` を全体に当てると、ヘッダ・サイドメニュー・フッタの点まで小さくなる）
   ⚠ 実測 2026-08-18: 固定ページは全 16 本。**本文に箇条書きを持つのは 2 本だけ**
     （/page/29 フィッティング = li 11 / /page/23 3 足同時発送 = li 9 /
       /page/14 プロ会員登録 = li 6）。∴ この指定が当たるのは **li 26 個**。
     🚨 最初「2 本 / li 20 個」と数えたのは誤り。/page/1〜45 を叩いて **200 のものだけ**を見たため、
       **301 でリダイレクトする /page/14 が漏れていた**（2026-08-18、css_impact.py が拾って発覚）。
       「存在するページ」を数えるときは、**リダイレクトも追う**こと */
.inner_free_contents li::marker {
    font-size: 0.6em;
}

.inner_free_contents ul ul {
    list-style-type: "- ";
}

.inner_free_contents ul ul li::marker {
    font-size: 0.9em;
}

/* --- 説明文の余白 --- */
/* ===== 商品説明の中の余白 =========================================
   ちかおさん 2026-08-16「余白の一貫性、非常に非常に重要です」
                        「余白が整っていることは、商品ページの信頼度を保つためには、
                          とても大切です」

   ■ なぜ HTML ではなく CSS に置くか
   整形したあとの箇条書きは **4 分の 3 が余白の指定を持たず**、ブラウザ任せで出ていた
   （2026-08-16 実測: ul 2,494 個のうち 1,885 個 ／ li 10,491 個のうち 9,407 個）。
   そのため同じページの中で
     ・箇条書きの下が   0px ／ 12px ／ 16px
     ・項目どうしが     0px ／ 8px
     ・箇条書きの左が   40px（ブラウザ既定）／ 20px ／ 18px
     ・表の下が         0px ／ 12px ／ 14px ／ 16px
   と混ざっていた。値を HTML の中に書くと、直すたびに全商品を作り直すことになる。
   **CSS に 1 か所だけ**置き、HTML 側からは余白の指定を外す。

   ■ 値の出どころ
   すべて make_template.py の S（雛形の基準）と同じ。
   段落 12px ／ 表の下 16px ／ 箇条書きの下 14px ／ 項目どうし 5px。
   ここを直せば、雛形も整形も同時に変わる。

   ⚠ D が組み立てる部品（.combi-table ／ .size-x-table）は、それぞれの CSS で
     余白が決まっているので対象から外す

   🚨 **左右は指定しない**（margin をひとまとめに書かない）。
     `align="center"` の表は、ブラウザが左右を auto にして中央に寄せている。
     ひとまとめの `margin: 0 0 16px 0` を当てると左右まで 0 になり、**中央寄せが消える**
     （2026-08-16 の独立検証で実測: #501 の表 2 個が margin-left 92.5px → 0px）。
     HTML 側では auto を残す作りにしているのに、CSS で打ち消しては意味がない。 */
.item_desc_text table:not(.combi-table):not(.size-x-table) {
    margin-top: 0;
    margin-bottom: 16px;
}

.item_desc_text ul,
.item_desc_text ol {
    margin-top: 0;
    margin-bottom: 14px;
    padding-left: 1.6em;
}

/* 入れ子は親からさらに下げる
   （ちかおさん 2026-08-16「ネストされたものは、少し右に寄せないと不自然ですね」） */
.item_desc_text ul ul, .item_desc_text ul ol,
.item_desc_text ol ul, .item_desc_text ol ol {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 1.4em;
}

.item_desc_text li {
    margin-top: 0;
    margin-bottom: 5px;
}

/* ⚠ 最後の項目にも下の空きが付くと、箇条書き全体の下（14px）と足し算になる */
.item_desc_text li:last-child {
    margin-bottom: 0;
}

.item_desc_text blockquote {
    margin-top: 0;
    margin-bottom: 12px;
}

/* --- 元からある表の見た目 --- */
/* ===== 元からある表の見た目を揃える（#248 / 2026-08-18）===== */
.item_desc_text .d-tbl {
    border-collapse: collapse;
    margin: 0 0 12px 0;
}
.item_desc_text .d-tbl th,
.item_desc_text .d-tbl td {
    border: 1px solid #ded5bd;
    padding: 8px 14px;
}
.item_desc_text .d-tbl th {
    background-color: #f7f7f7;
    font-weight: normal;
}
.item_desc_text .d-tbl td {
    background-color: #ffffff;
}
/* 短い値が並ぶ表 = 中央揃え */
.item_desc_text .d-tbl-data th,
.item_desc_text .d-tbl-data td {
    text-align: center;
}
/* 文章が入る表 = 左揃え・行間を広めに */
.item_desc_text .d-tbl-text th,
.item_desc_text .d-tbl-text td {
    text-align: left;
    vertical-align: top;
    line-height: 1.7;
}

/* --- サイトの体裁（手載せの保全） --- */
/* 並び順から「売れ筋順」「おすすめ順」を消す
   （ちかおさんが管理画面で直接追加されたルール。
     2026-09-04 に「売れ筋順」(rank) を、2026-09-13 に「おすすめ順」(featured) を正本へ保全） */
#sort option[value="rank"],
#sort option[value="featured"] {
    display: none;
}