.main_fv h1 {
    background-color: #ff3b30;
    color: white;
    padding-block: 0.2rem;
    text-align: center;
    font-size: 39px;
    font-weight: 1000;
    line-height: 2.8rem;
    margin-block: 0.2rem;
}

.main_fv .container {
    margin-top: 0px;
    font-size: 22px;
}


.main_fv .container p {
    margin-block: 0.1rem;
}



.container {
    border: 1px solid;
    max-width: 650px;
    text-align: center;
    margin: 0 auto;
    margin-block: 20px;
}


ul {
    display: flex;
    flex-wrap: wrap;
}

ul li {
    list-style: none;
    width: 30%;
    margin: 3px;
    border: 1px solid;
}


ul li img {
    width: 100%;

}



.products ul li a {
    text-decoration: none;
    color: black;
}












.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
    font-size: 1.5rem;
}

.woocommerce ul.products li.product .price {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}




/* 以下特定商取引法セクション */

/* dl {
    display: flex;
    flex-wrap: wrap;
}

dt {
    width: 30%;
}

dd {
    width: 70%;
    /* まさかddにはdefaultでmargin-leftが設定されているとは知らなかった。面白い。 */
/* margin-left: 0; */

/* } */

/* dlの中に入れるのは、dt,ddだけと決まってるんだね、
ddのwidth100%の注意書きだけ書きたいみたいなときは
下記のように該当ddにだけクラス名を割り当てて指定するのがbetterだという結論付。 */
/* 
dl .caution {
    width: 100%;
} */



.info-list {
    border-top: 1px solid #000;
    /* 一番上の線 */
    width: 100%;
}

.info-row {
    display: flex;
    border-bottom: 1px solid #000;
    /* 各行の下線 */
    align-items: stretch;
    /* これで左右の高さが自動で揃います */
    text-align: left;
    /* containerのもともとのtextaligncenterを戻した */
}

.info-row dt {
    width: 30%;
    /* 左側の幅 */
    background: #f9f9f9;
    /* 項目側に背景色をつけると表らしくなります */
    padding: 10px;
    display: flex;
    align-items: center;
    /* 前回の質問の「文字を縦中央」にする設定 */
    border-right: 1px solid #000;
    /* 真ん中の縦線 */
}

.info-row dd {
    width: 70%;
    /* 右側の幅 */
    margin: 0;
    /* デフォルトの余白を消す */
    padding: 10px;
    display: flex;
    align-items: center;
    /* 右側も縦中央に */
}


.info-row dd.caution {
    width: 100%;
}


/*商品詳細ページ*/



/* 以下ヘッダー */

header {
    display: flex;
    justify-content: space-between;
    border-block-end: 1px solid;
}

header .return_top {
    height: 98px;
    line-height: 41px;
    font-size: 1.5rem;
}

header .home .return_top {
    display: none;
}


/*.product1 ul{
    display:block;
    padding:0;
}*/

/*.product1 ul li{
    width:100%;
}
*/
.name {
    font-size: 22px;
}


.name span {
    font-size: 8px;
}


.piece {
    display: flex;
}

.piece li {
    /*    width: 30%;*/
    border: 1px solid;
}


.variations td.value select {
    font-size: 1.5rem;
    font-weight: 600;
    margin-left: 1.0rem;
}


.quantity input.qty {
    font-size: 1.5rem;
    margin-top: 1rem;
}


.single_add_to_cart_button {
    font-size: 1.5rem;
    margin-top: 1rem;
}



section.related.products ul {
    padding-left: 0rem;
}

section.related.products ul li {
    width: 100%;
}



/* 以下priceの表記変更装飾 */

/* リスト全体を縦並びにする */
.custom-price-list {
    display: flex;
    flex-direction: column;
    /* gap: 8px; */
    margin-bottom: 15px;
}

/* 基本の文字サイズ */
.var-price {
    font-size: 1.3rem;
    color: #333;
}

/* ★16錠（真ん中）だけを大きく太く目立たせる */
.highlight-price {
    font-size: 2.4rem;
    /* 文字を大きく */
    font-weight: 800;
    /* 太く */
    color: #ff3b30;
    /* 目立つ色（赤系）に */
    padding: 5px 0;
    display: block;
}

/* PC等でさらに強調したい場合は枠線などを追加 */
.highlight-price::before {
    content: "オススメ！ ";
    /* 補足テキストを入れることも可能 */
    font-size: 14px;
    vertical-align: middle;
}






/* 以下商品詳細のメイン商品の画像の大きさ */

.woocommerce-product-gallery__image img {
    width: 100%;
    height: 300px;
    /* ★ここを希望の高さ（300〜400px程度）に固定 */
    object-fit: contain;
    /* 縦横比を維持して枠に収める */
    background-color: #f9f9f9;
    /* 余白ができる場合に備えて背景を敷く */
}

/* 以下関連商品とかの画像の設定 */


/* 商品タイトルも高さを揃えると、さらに綺麗に整列します */
/* .products .product .woocommerce-loop-product__title {
    min-height: 2.5em;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
} */


.related.products .attachment-woocommerce_thumbnail {
    width: 100%;
    height: 200px;
    /* ★ここを一覧で見栄えの良い高さ（180〜220px程度）に固定 */
    object-fit: contain;
    /* 縦横比を維持して枠に収める */
    background-color: #f9f9f9;
    /* 余白を埋める背景色（お好みで） */
    display: block;
    margin: 0 auto;
}









footer .container {
    border: none;
}


/* ここから商品詳細woocommerceのCSS */

.price {
    text-align: center;
    font-weight: 700;
    color: red;
    padding-right: 7%;
    font-size: 30px;
}


.summary {
    text-align: center;
    font-size: 21px;
}


/* 商品画像エリアを横いっぱいに広げて中央へ */
.woocommerce-product-gallery {
    width: 100%;
    /* 横幅を最大に */
    float: none;
    /* 左右の回り込みを解除 */
    margin: 0 auto 30px;
    /* 左右中央寄せ + 下に余白 */
    max-width: 800px;
    /* 大きすぎると困る場合はここで最大幅を制限 */
    text-align: center;
}



/* 右側にあったテキストエリア（価格やボタン）を画像の下に回す */
/* .summary {
    width: 100% !important;
    float: none !important;
    text-align: center;      
} */




/* セレクトボックス（容量選択）の調整 */
.single-product div.product form.cart .variations select {
    font-size: 20px;
    /* 文字を大きく */
    padding: 10px;
    /* 枠内の余白を広げて大きく見せる */
    width: 100%;
    /* 横幅を広げる（お好みで調整） */
    height: auto;
    /* 高さを自動調整 */
    border: 2px solid #ccc;
    /* 枠線を太くする場合 */
}

/* WPのwoocommerceで使うタグとかクラス名は結構共通してるもんなのか？
それが事実ならとても分かりやすいけど */



/* カゴに入れるボタンの調整 */
.single-product div.product form.cart .single_add_to_cart_button {
    font-size: 20px;
    /* 文字を大きく */
    padding: 15px 30px;
    /* 上下左右の余白を増やしてボタン自体を大きく */
    font-weight: bold;
    /* 文字を太く */
    background-color: #ff0000;
    /* ボタンの色を変える場合 */
    color: #fff;
    border-radius: 5px;
    /* 角を丸くする */
}









.product_meta {
    display: none;
}

.woocommerce-tabs ul {
    display: none;
}







/*カートボタン*/

/* カート全体のリンク設定 */
.cart-contents {
    display: inline-block;
    background-color: #ff3b30;
    color: #fff;
    font-weight: bold;
    min-width: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 8px;
    margin-left: 8px;
    font-size: 30px;
    padding-inline: 35px;
    padding-block: 10px;
    transition: background 0.3s;
}

.cart-contents:hover {
    background-color: #555;
}

/* 数字（カウント）部分のデザイン */
.cart-count {
    /* display: inline-block; */
    background-color: #ff3b30;
    color: #fff;
    font-weight: bold;
    min-width: 20px;
    height: 82px;
    /* 既存の line-height: 50px; を削除して以下に変更 */
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 以上 */
    text-align: center;
    border-radius: 8px;
    margin-left: 8px;
    font-size: 31px;
    /* padding-inline: 35px; */
    padding-block: 7px;
    transition: background 0.3s;
    /* スマホ：65%固定 */
    flex: 0 0 65%;
    width: 65% !important;
    box-sizing: border-box;
}

/* PC：自動調整 */
@media (min-width: 768px) {
    .cart-count {
        flex: 0 0 auto;
        width: auto !important;
    }
}



/* カートが空（0点）の時に目立たせたくない場合 */
.cart-count:contains('0') {
    background-color: #999;
}


.cart-count a {
    color: white;
    text-decoration: none;
    display: block;
    word-break: keep-all;
    overflow: hidden;
    line-height: 1.3;
    padding: 5px;
}



/* 「推定合計額」を消して「合計金額」と表示させる */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    visibility: hidden;
    /* 元の文字を隠す */
    position: relative;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label::after {
    content: "合計金額";
    /* 新しい文字を表示 */
    visibility: visible;
    position: absolute;
    left: 0;
    white-space: nowrap;
}


/* 以下footer */

footer p {
    text-align: center;
}





/* ==============================
   チェックアウト画面 追加スタイル
   ============================== */

/* 4: 購入手続きに進む ボタン（カートページ） */
.wc-block-cart__submit-button,
a.checkout-button,
.checkout-button {
    display: block !important;
    width: 100% !important;
    background-color: #ff3b30 !important;
    /* 朱色 */
    color: #ffffff !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    padding: 20px !important;
    text-align: center !important;
    border-radius: 6px !important;
    border: none !important;
    text-decoration: none !important;
    margin-top: 12px !important;
}

/* 6: 注文を確定 ボタン */
#place_order,
button#place_order,
.wc-block-checkout__submit-button {
    display: block !important;
    width: 100% !important;
    background-color: #ff3b30 !important;
    /* 朱色 */
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    padding: 24px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: 16px !important;
    letter-spacing: 0.05em !important;
}

/* 5: プライバシー文言を小さく・細く・目立たせない */
.woocommerce-privacy-policy-text,
.wc-block-checkout__privacy-policy,
p.woocommerce-privacy-policy-text {
    font-size: 0.65rem !important;
    font-weight: 300 !important;
    color: #999 !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}

/* 5: プライバシー文言内のリンクも目立たせない */
.woocommerce-privacy-policy-text a,
.wc-block-checkout__privacy-policy a {
    color: #bbb !important;
    text-decoration: none !important;
}



/* ブロック版チェックアウト ボタン */
.wp-block-woocommerce-checkout-actions-block button,
.wc-block-components-checkout-place-order-button {
    display: block !important;
    width: 100% !important;
    background-color: #ff3b30 !important;
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    padding: 24px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: 16px !important;
}

/* ブロック版 購入手続きに進む */
.wp-block-woocommerce-cart-order-summary-block a.wc-block-cart__submit-button,
.wc-block-cart__submit-container a {
    display: block !important;
    background-color: #ff3b30 !important;
    color: #ffffff !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    padding: 20px !important;
    text-align: center !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}


/* 送料行の右側「無料」テキストを非表示 */
.wc-block-components-totals-shipping .wc-block-components-totals-item .wc-block-components-totals-item__value strong {
    display: none !important;
}

/* 配送方法の右側「無料」を非表示 */
.wc-block-checkout__shipping-option--free {
    display: none !important;
}