/*
Theme Name:		Welcart Basic Child
Description:	Welcart Basic Child is child theme for Welcart Basic.
Author:			WElcart Inc.
Author URI:		https://www.welcart.com/
Template:		welcart_basic
Version:		1.0.0
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			responsive-layout, basic-child, two-columns, right-sidebar. left-sidebar
*/

@font-face {
    font-family: 'Noto Sans JP-Bold';
    src: url('./images/font/NotoSansJP-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('./images/font/NotoSansJP-Regular.ttf');
    font-weight: normal;
}

html, body {
    overflow-x: hidden;
}

body, input[type="text"] ,p , div, label, h1, h2, h3, h4, h5, h6, a, button, select {
    font-family: 'Noto Sans JP' !important;
}

a {
    cursor: pointer !important;
    text-decoration: none !important;
}

.site-header .inner .logo {
    width: auto;
    height: 45px;
    max-width: 280px;
}

.snav.cf {
    display: inline-flex;
    align-items: center;
    width: calc(75% - 20px);
    justify-content: right;
    margin-right: 20px;
}

.search-box div.s-box {
    display: inline-flex !important;
    border-radius: 25px;
    padding: 2px 10px;
}

.search-text {
    padding: 5px !important;
}

#head-s-submit {
    color: #ee7e33;
}

.hidden {
    display: none !important;
}

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

.ic_login {
    width: 18px;
    height: 26px;
}

.ic_cart {
    width: 26px;
    height: 26px;
}

.ic_menu {
    width: 44px;
    height: 44px;
}

/* デスクトップではハンバーガーメニュー非表示 */
.menu-btn {
    display: none;
}

@media only screen and (max-width: 767px) {
    .menu-btn {
        display: block;
        margin-left: 15px;
    }
}

.incart-btn {
    margin-left: 10px;
}

.ic_heart {
    width: 27px;
    height: 25px;
    margin-left: 30px;
}

#main {
    width: 1200px;
    max-width: 100%;
}

.snav .membership li:first-child, .snav li a {
    border: none !important;
    /* padding: 5px !important; */
}

.snav .signup-btn a.signup {
    display: block;
    background-color: #91CE54;
    border-radius: 25px;
    padding: 7px 20px;
    font-size: 16px !important;
    color: white !important;
    font-weight: bold;
    font-family: 'Noto Sans JP-Bold';
    text-decoration: none !important;
}

.incart-btn .total-quant {
    position: absolute;
    top: -8px;
    left: -10px;
    width: 10px;
    height: 20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #CC0000;
    color: #fff;
}

.snav .login-btn {
    margin-left: 10px;
}

.snav .signup-btn, .snav .menu-btn  {
    margin-left: 25px;
}

.snav .membership ul {
    justify-content: left;
}

.top-more-btn, .top-more-btn:hover {
    background-color: #FF7700;
    color: white;
    padding: 5px 20px;
    margin-left: 40px;
    font-size: 85%;
    width: 120px !important;
    position: relative;
    border-radius: 20px;
    display: block;
}

.top-more-btn:after {
    top: 11px;
}

.top-list-title {
    display: inline-flex;
    align-items: center;
    margin: 50px 10px 25px;
}

.top-list-title h2 {
    font-size: 150%;
    line-height: 1.5;
}

.p-slider .slick-list {
    padding: 5px 0;
}

.p-slider .item {
    position: relative;
    background-color: white;
    margin: 0 10px;
    box-shadow: 1px 1px 1px lightgray,  /* Top and left */
                3px 4px 9px lightgray;
    text-align: center;
    width: 200px;
}

/* 商品カード画像を150px正方に固定。:first-child だと おすすめ(先頭に.lbl)・新着(先頭に.new-mark)で
   画像に当たらず、汎用 .slick-slide img(height:550px) が効いて巨大化・不揃いになるため :first-child を外す。
   .item直下の img.icon は商品画像のみ(星は.p-stars内・お気に入りは.fav・newマークは.new-mark)。 */
.p-slider .item > img.icon,
.p-slider .item > .wp-post-image {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover;
    display: block;
    margin: 15px auto;
}

.p-slider .item .p-stars img {
    width: 15px !important;
    height: 15px !important;
    margin: 0 1px;
    display: inline-block;
}

.p-slider .item img.fav {
    width: 23px !important;
    height: 21px !important;
    position: absolute;
    top: 30%;
    right: 15px;
}

.p-slider img {
    height: auto !important;
}

.p-desc {
    font-size: 12px;
    padding: 10px 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    line-break: anywhere;
    height: 69px;
    margin-bottom: 15px;
}

.top-special .p-desc {
    height: 65px !important;
    margin-bottom: 20px !important;
}

.p-price-txt {
    padding: 2px 9px;
    color: #707070;
    margin: 10px 15px;
    font-size: 12px;
}

.p-test {
    border: 1px solid #707070;
}

.p-price {
    font-weight: bold;
    font-size: 16px !important;
    margin: 5px 15px;
    border: none !important;
}

.p-price span {
    font-weight: normal !important;
    font-size: 12px !important;
    margin-left: 2px;
}

.p-spec {
    color: #CC0000;
    border: 1px solid #CC0000;
}

.p-entry__body {
    margin-bottom: 30px;
}

.p-info-content .p-entry-footer {
    padding: 30px 0;
}

.p-info-content .p-entry-footer h2 {
    font-size: 130%;
    padding-left: 10px;
    border-left: 4px solid #FF7701;
    margin-bottom: 20px;
}

.p-info-content .p-entry-footer ul {
    margin: 40px 0 100px;
    padding-left: 20px;
}

.p-info-content .p-entry-footer ul li {
    margin: 20px 0;
}

.p-info-content .p-entry-footer ul li:before {  
    background-color: #FF9900;
    margin-right: 10px;
    padding: 2px 9px;
    content: counter(index, decimal);
    counter-increment:index;
    border-radius: 50%;
    color: white;
}

.p-info-content .p-entry-footer ul li:first-child {
    counter-reset:index;
}

.p-info-content .p-entry-footer h3 {
    font-size: 115%;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #FF7701;
}

.p-info-content .p-entry-footer h4 {
    margin-bottom: 15px;
    margin-top: 50px;
}

.p-info-content .p-entry-footer p {
    white-space: pre-line;
    margin: 20px 0;
}

.p-info-content .entry__footer_comment {
    margin-top: 60px;
}

.p-info-content .entry__footer_comment p.title {
    white-space: pre-line;
    margin: 10px 0 20px;
}

.p-info-content .entry__footer_comment ul li {
    margin-bottom: 10px;
}

.p-info-content .entry__footer_comment ul li a {
    text-decoration: underline !important;
    display: block;
    position: relative;
    padding-left: 30px;
    color: #444;
}

.p-info-content .entry__footer_comment ul li a:before {
    content: '';
    background: url(./images/icon/ic_arrowred_right.png);
    position: absolute;
    left: 0px;
    top: 7px;
    width: 20px;
    height: 10px;
    background-size: 20px 10px;
}

.p-info-content .entry__footer_comment {
    background-color: #F7F5ED;
    padding: 30px;
}

.p-info-content .entry__footer_help {
    margin: 80px 0;
    padding-top: 50px;
    padding-bottom: 30px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.p-info-content .entry__footer_help h2 {
    font-size: 110%;
    font-weight: bold;
    margin-bottom: 20px;
}

.p-info-content .entry__footer_help p {
    white-space: pre-line;
    margin: 20px 0;
}

#news-page .l-primary #news-list, .p-info-content {
    display: inline-block;
    width: calc(100% - 350px);
}

#news-page .l-primary #news-list .pagination {
    margin-top: 50px;
}

#news .item {
    margin-top: 15px !important;
}

#news-detail .p-news-detail {
    display: inline-block;
    width: calc(100% - 350px);
}

#news-recent .p-article04__title {
    margin-left: 0;
    -webkit-line-clamp: 2;
}

.new-mark {
    position: absolute;
    top: -20px;
    right: -8px;
    width: 40px !important;
    height: 40px !important;
    display: block;
    z-index: 2;
}

/* Front page site-header */
.site-header .banner-msg {
    width: 100%;
    background-color: #FFCC00;
    padding: 10px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.site-header .banner-msg h2 {
    font-family: 'Noto Sans JP-bold';
}

.site-header .banner-msg h2 span {
    background-color: #CC0000;
    color: white;
    padding: 2px 10px;
    margin-right: 10px;
}

.site-header .banner-msg h2 strong {
    font-size: 130% !important;
}

.site-header .banner-msg .more-btn {
    background-color: #FF9900;
    color: white;
    padding: 2px 20px;
    margin-left: 40px;
    font-size: 85%;
    width: 120px;
    position: relative;
}

.site-header .banner-msg .more-btn:after, .top-more-btn:after {
    content: "";
    background: url('./images/icon/ic_arrow_right.png');
    position: absolute;
    right: 10px;
    top: 11px;
    width: 15px;
    height: 10px;
    background-size: 15px 10px;
}

.site-header .banner-msg .more-btn:after {
    top: 8px;
}

/* Front page slider */
.slider .slick-list{padding:0;}

.slick-slide img {
    width: 100%;
    height: 550px;
    object-fit: cover;
}

#popular-product-list {
    background-color: #F7F5ED;
    padding: 30px 10px;
}

#popular-product-category {
    margin-top: 30px;
}

#popular-product-category .cat-name {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px 20px;
    margin-right: 0;
    font-weight: bold;
    display: inline-block;
    color: black;
}

#popular-product-category .cat-name.selected {
    background-color: #F7F5ED;
}

#popular-product-list .item {
    position: relative;
    margin-top: 20px;
}

#popular-product-list .item .rank {
    position: absolute;
    width: 34px;
    height: auto;    
    top: -15px;
    left: -8px;
}

#cat-menu {
    background-color: #F7F5ED;
    padding: 30px 20px;
    text-align: center;
    margin-top: -10px;
}

#cat-menu a.cat-menu-btn, #cat-menu a.cat-menu-btn:hover {
    background-color: white;
    border: 2px solid #FF7701;
    border-radius: 20px;
    margin: 0 10px;
    color: #FF7701;
    padding: 5px 20px;
    font-family: 'Noto Sans JP-Bold' !important;
}

.p-stars {
    display: inline-flex;
    margin: 2px 0 10px;
    padding: 0 15px;
    align-items: center;
}

/* レビュー数値(.s-price)の有無で星行が15px↔21pxと変動し、商品カードの高さが
   6pxずれる(レビュー有り商品だけ高くなる)のを防ぐ。星行を常に21pxで確保。 */
.item .p-stars {
    min-height: 21px;
}

.p-stars .icon {
    width: 15px !important;
    height: 15px !important;
    margin-right: 2px !important;
}

.p-stars .s-price {
    margin-left: 5px;
}

.item .lbl {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    font-size: 10px;
    background-color: #91CE54;
    color: white;
    padding: 0 5px;
}

.item .lbl.sell {
    background-color: #CC0000;
}

.item .fav {
    position: absolute;
    top: 40%;
    right: 15px;
    width: 23px;
    height: 21px !important;
    z-index: 2;
}

.top-special .item .p-desc, .top-special .item .p-price, .top-special .item .p-price-txt, .top-special .item .p-stars {
    margin: 7px;
}

.top-special .item .p-stars {
    padding: 0;
    margin-top: 0;
}

.top-special .item .p-desc {
    height: 72px;
    padding: 3px;
}

.top-special .item .fav {
    top: 30%;
}

.p-slider .slick-next:before, .p-slider .slick-prev:before {
    color: #ccc;
    font-size: 45px;
}

.p-slider .slick-next, .p-slider .slick-prev {
    width: 40px;
    height: 40px;
    z-index: 3;
    font-weight: normal;
    background-color: white;
    border-radius: 20px;
}

.p-slider .slick-next {
    right: -10px;
}

.p-slider .slick-prev {
    left: -10px;
}

/* Front page width */
#main:has(.frontpage), #main:has(.product-page) {
    width: 100% !important;
}

.frontpage {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

/* Front page category */
#front-category {
    background-color: #F7F5ED;
    padding: 0 0 10px;
    width: 100%; /* Adjust this as needed */
    margin-top: 100px;
}

#front-category-white {
    width: 100%;
    height: 100px;
    background-color: white;
}

#front-category-container {
    display: flex;
    justify-content: space-between; /* Adjusts space between items */
    width: 1200px;
    max-width: 100%;
    margin: -80px auto 0;
    flex-wrap: wrap;
}

#front-category-container .item {
    padding: 0px;
    margin: 10px; /* Adds space between items */
    text-align: center;
    border-radius: 5px;
    flex: 0 0 22%; /* 22% width per item to fit 4 items per row with margins */
}

#front-category .item:hover {
    cursor: pointer;
}

#front-category .item img {
    margin: 10px 0;
    border-radius: 15px;
}

/* Front page special */
#front-special {
    display: flex;
    justify-content: space-between; /* Adjusts space between items */
    width: 1200px;
    max-width: 100%;
    margin: 80px auto 20px;
    flex-wrap: wrap;
}

#front-special .s-item {
    padding: 20px 30px;
    text-align: center;
    flex: 0 0 33%; /* 22% width per item to fit 4 items per row with margins */
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; 
    height: 240px;
    width: 100%;
    display: block;
}

#front-special .s-item img {
    margin-bottom: 30px;
}

#front-special .s-item:nth-child(2) {
    border: none;
}

/* Front page information */
#front-information, #front-news .inner {
    width: 1200px;
    max-width: 100%;
    margin: 20px auto;
    padding: 50px 0;
}

#front-information .item {
    box-shadow: none;
}

/* Front page News */
#front-news { 
    background-color: #F7F5ED;
}

#front-news .inner {
    display: flex;
}

#front-news #news-title {
    width: 25%;
    display: inline-block;
    padding-top: 40px;
    padding-left: 40px;
}

#front-news #news-title h2 {
    font-size: 150%;
    margin-bottom: 10px;
}

#front-news #news-title p {
    margin-bottom: 10px;
}

#front-news #news-title .top-more-btn{
    margin-left: 0;
}

#front-news #news-list {
    width: 74%;
    display: inline-block;
}

#front-news #news-list .news-item {
    position: relative;
    display: inline-flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    width: 100%;
}

#front-news #news-list .news-item .news-date {
    color: #FF7700;
    margin-right: 10px;
}

#front-news #news-list .news-item .news-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    line-break: anywhere;
    margin-right: 40px;
}

#front-bottom-text {
    width: 1200px;
    max-width: 100%;
    margin: 100px auto 30px;
    font-size: 13px;
    padding: 10px;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: start;
}

/* Search Page */
.breadcrumb {
    margin-bottom: 30px;
}

.breadcrumb span {
    position: relative;
    padding-right: 20px;
}

.breadcrumb span:not(:last-child):after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #FF7700; /* Adjust the color as needed */
    margin-left: 25px; /* Adjust spacing if needed */
}

.p-none {
    padding: 0 !important;
}

#search-content {
    width: 1200px;
    max-width: 100%;
    margin: 20px auto;
    display: inline-flex;
}

#search_filter {
    width: 25%;
    padding: 0 10px;
}

#search_filter #search_cond h2 {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    margin-top: 10px;
    font-weight: normal;
}

#search_filter #search_cond h2:before {
    content: "";
    background: url('./images/icon/ic_search.png');
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
}

#search_filter #search_cond #search_cond_items {
    margin: 20px 0;
}

#search_filter #search_cond #search_cond_items .item {
    padding: 5px 40px 5px 10px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
    font-size: 11px;
    text-align: left;
    position: relative;
}

#search_filter #search_cond #search_cond_items .item:after {
    content: "";
    background: url('./images/icon/ic_close.png');
    position: absolute;
    right: 15px;
    top: 12px;
    width: 7px;
    height: 8px;
    background-size: 7px 8px;
    cursor: pointer;
}

#search_filter #search_cond .btn_cond_clear {
    margin: 20px 0 30px;
    width: 100%;
    background-color: #EFEFEF;
    padding: 15px 20px;
    text-align: center;
    color: black;
    display: block;
    border-radius: 10px;
}

#search_filter .btn_cond_search {
    margin: 20px 0 30px;
    width: 100%;
    background-color: white;
    padding: 15px 20px;
    text-align: center;
    color: #FF7701;
    display: block;
    border-radius: 10px;
    border: 2px solid #FF7701;
    font-weight: bold;
}

#search_filter #accordion-list .accordion {
    border: none;
    border-top: 1px solid #ccc;
    margin-bottom: 0;
    padding-bottom: 0;
}

#search_filter #accordion-list .question {
    padding: 15px 5px;
}

#search_filter #accordion-list .answer {
    padding: 0;
    margin-left: 3px;
}

#search_filter #accordion-list .answer:last-child {
    padding-bottom: 20px;
}

#search_filter #accordion-list .accordion:last-child {
    border-bottom: 1px solid #ccc;
}

#search_result {
    width: 75%;
    padding: 0 20px;
}

#search_result h2.cat-title {
    font-size: 20px;
}

#search_result #result-top {
    margin-top: 15px;
}

#search_result #result-num {
    display: inline-flex;
}

#search_result #result-num h2 {
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
}

#search_result #result-num span {
    font-size: 14px;
}

#result-searchbox {
    background-color: #F7F5ED;
    padding: 5px 10px;
    margin: 10px 0;
    height: 56px;
}

#result-searchbox .search-box {
    float: left;
    background-color: white;
    border-radius: 20px;
    margin-top: 5px;
}

.s-box  input[type="text"]:-webkit-autofill {
    background-color: white !important; /* Change to your desired background color */
    outline: none !important; /* Optionally remove the default outline */
}

/* Ensure label and checkbox are aligned */
.custom-checkbox {
    display: inline-flex;
    align-items: center; /* Vertically centers the checkbox with the text */
    cursor: pointer;
    margin-left: 15px;
    margin-top: 12px;
}

/* Hide the default checkbox */
.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.custom-checkbox .checkmark {
    height: 24px;
    width: 24px;
    background-color: white;
    border: 1px solid #ccc;
    display: inline-block;
    margin-right: 4px; /* Space between checkbox and label text */
    position: relative;
    border-radius: 5px;
}

/* When the checkbox is checked, add a red background */
.custom-checkbox input:checked + .checkmark {
    background-color: #ff9900;
    border: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked + .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Ensure label and radio button are aligned */
.custom-radio {
    display: inline-flex;
    align-items: center; /* Vertically centers the radio with the text */
    cursor: pointer;
    margin-left: 15px;
    margin-top: 12px;
}

/* Hide the default radio button */
.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.custom-radio .checkmark {
    height: 23px;
    width: 23px;
    background-color: white;
    border: 1px solid #ccc;
    display: inline-block;
    margin-right: 8px; /* Space between radio and label text */
    position: relative;
    border-radius: 50%; /* Make it circular for radio */
}

/* When the radio is checked, add a red background */
.custom-radio input:checked + .checkmark {
    background-color: white;
    border: 1px solid #ccc;
}

/* Create the dot/indicator (hidden when not checked) */
.custom-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the dot when checked */
.custom-radio input:checked + .checkmark:after {
    display: block;
}

/* Style the dot/indicator */
.custom-radio .checkmark:after {
    left: 5px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: #ff9900;
    border-radius: 50%; /* Make the dot circular */
}

#result-searchbox .custom-select {
    float: right;
    margin-top: 6px;
}

/* Custom Select Box */
.custom-select {
    -webkit-appearance: none; /* Remove default arrow in WebKit browsers */
    -moz-appearance: none;    /* Remove default arrow in Firefox */
    appearance: none;         /* Remove default arrow in all browsers */
    
    background-color: #fff; /* Background color similar to the image */
    border: 1px solid #d9d9d9; /* Border similar to the image */
    padding: 5px 60px 5px 15px; /* Padding for text and space for custom arrow */
    font-size: 14px; /* Font size */
    font-family: 'Arial', sans-serif; /* Font family */
    color: #444; /* Text color */
    border-radius: 4px; /* Rounded corners */
    outline: none; /* Remove outline on focus */
    cursor: pointer; /* Change cursor on hover */
    position: relative; /* Positioning for custom arrow */
}

/* Add custom arrow */
.custom-select::after {
    content: '▼'; /* Unicode arrow symbol */
    font-size: 10px; /* Smaller size for arrow */
    color: #a9a9a9; /* Color of the arrow */
    position: absolute; /* Position relative to the select box */
    right: 10px; /* Position the arrow on the right */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust to center perfectly */
    pointer-events: none; /* Disable pointer events on the arrow */
}

/* Remove arrow for IE */
select::-ms-expand {
    display: none;
}

/* Adjust font and padding on focus */
.custom-select:focus {
    border-color: #a3a3a3; /* Change border color on focus */
}

#result-bottom {
    text-align: center;
    margin: 50px auto 20px;
}

#recent-product {
    margin-top: 100px;
}

/* FAQ */
#accordion-list {
    width: 1000px;
    max-width: 100%;
    margin: 20px auto 50px;
}

#accordion-list .py-60 {
	padding: 60px 0;
}

#accordion-list h2 {
	font-size: 32px;
	color: #000000;
	line-height: 1.25;
	text-transform: uppercase;
}

#accordion-list .text-control-1 h2 {
	margin-bottom: 20px;
}

#accordion-list .q-mark {
	color: #D40119;
	padding: 18px 0 18px 18px;
}
	
#accordion-list .question {
	font-size: 15px;
    font-weight: bold;
	color: #5C5C5C;
	line-height: 1.5;
	padding: 20px;
	margin-bottom: 0;
}
	
#accordion-list .material-icons.drop {
	/* padding: 20px; */
	/* font-size: 2rem; */
    padding-right: 10px;
	color: #D40119;
	transition: transform .5s ease-in-out;
}
	
#accordion-list .answer {
	font-size: 14px;
	color: #5C5C5C;
	padding: 10px 16px;
	padding-left: 52px;
	padding-bottom: 32px;
	background-color: white;
	overflow: hidden;
}

#accordion-list .answer img {
    margin-right: 20px;
    margin-top: -10px;
}

#accordion-list .accordion .link {
    margin-left: 110px;
}

#accordion-list .accordion .link i {
    color: #A70909;
}

#accordion-list .accordion {
	background-color: #ffffff;
	color: #444;
	cursor: pointer;
	width: 100%;
	margin-bottom: 20px;
	text-align: left;
	border-bottom: 1px solid #ccc;
	outline: none;
	transition: 0.4s;
    padding-bottom: 20px;
}

#accordion-list .question-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color .25s ease-in-out;
}
	
#accordion-list .answer-wrapper {
	display: none;
}
	
#accordion-list .icon-expend {
	transform: rotateX(180deg);
	transition: transform .75s ease-in-out;
}

#accordion-list .container {
	width: 100%;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: auto;
	margin-left: auto;
}

/* /question/ 専用: 回答内HTML（移行コンテンツ）の体裁。#accordion-list 配下のみに限定 */
#accordion-list .answer-body {
	flex: 1;
	min-width: 0;
}
#accordion-list .answer-body p {
	margin: 0 0 .8em;
	line-height: 1.7;
}
#accordion-list .answer-body p:last-child {
	margin-bottom: 0;
}
#accordion-list .answer-body a {
	color: #A70909;
	text-decoration: underline;
	word-break: break-all;
}

/*
* News
*/

#p-news_content .entry__footer {
    padding: 40px 0;
}

#p-news_content .entry__footer h2 {
    margin: 10px 0;
    font-size: 130%;
}

#p-news_content .entry__footer p.help {
    white-space: break-spaces;
    margin: 20px 0 40px;
}

#p-news_content .entry__footer .entry__footer_comment p.title {
    white-space: pre-line;
    margin: 10px 0 20px;
}

#p-news_content .entry__footer .entry__footer_comment ul li {
    margin-bottom: 10px;
}

#p-news_content .entry__footer .entry__footer_comment ul li a {
    text-decoration: underline !important;
    display: block;
    position: relative;
    padding-left: 30px;
    color: #444;
}

#p-news_content .entry__footer .entry__footer_comment ul li a:before {
    content: '';
    background: url(./images/icon/ic_arrowred_right.png);
    position: absolute;
    left: 0px;
    top: 7px;
    width: 20px;
    height: 10px;
    background-size: 20px 10px;
}

#p-news_content .entry__footer_comment {
    background-color: #F7F5ED;
    padding: 30px;
}

#p-news_content .entry__footer_help {
    margin-top: 100px;
    margin-bottom: 50px;
    padding-top: 50px;
    border-top: 1px solid #ccc;
}

#p-news_content .entry__footer_help h2 {
    font-size: 130%;
    font-weight: bold;
    margin-bottom: 20px;
}

#p-news_content .entry__footer_help p {
    white-space: break-spaces;
    margin: 20px 0;
}

.p-article04__header {
    display: inline-flex;
    gap: 1em;
    border-bottom: 1px solid #ccc;  
    padding-bottom: 10px;
    margin: 10px 0;
    outline: none;
    width: 100%;
}

.p-news-header {
    font-size: 20px;
    margin-bottom: 50px;
    margin-top: 20px;
}

.p-news-list .p-article04__date {
    color: #ff7700;
    display: inline-flex;
}

.p-news-list .p-article04__title {
    position: relative;
    color: black;
    font-weight: normal;
    margin-left: 20px;
    padding-right: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    line-break: anywhere;
    width: 100%;
}

.p-news-list .p-article04__title:after, #secondary .side-cat-name::after, #front-news #news-list .news-item:after {
    content: "";
    background: url('./images/icon/ic_arrowred_right.png');
    position: absolute;
    right: 10px;
    top: 5px;
    width: 15px;
    height: 10px;
    background-size: 15px 10px;
}

.p-entry__date {
    color: #ff7700;
}

.p-entry__title {
    font-size: 24px;
    line-height: 1.5;
    margin: 10px 0 30px;
}

.p-entry__img img {
    width: 100%;
    margin-bottom: 30px;
}

.p-news-category-list__items {
    display: inline-flex;
    margin-bottom: 30px;
}

.p-news-category-list__items li {
    padding: 5px 15px;
}

.p-news-category-list__items li.active {
    border-bottom: 2px solid #FF7701;
}

.p-news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items per row */
    gap: 20px; /* Adjust the gap between items */
  }
    
.p-news-grid__thumbnail {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
}

.p-news-grid__item {
    margin-bottom: 20px;
}

.p-news-grid__title {
    font-size: 13px;
    line-height: 1.2;
    font-weight: normal;
    height: 48px;
    margin-bottom: 10px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    line-break: anywhere;
}

.p-news-grid__category {
    font-size: 11px;
    background-color: #EFEFEF;
    padding: 3px 10px;
    display: inline-block;
    margin-right: 5px;
}

.p-news-grid__category.info-category-name {
    background-color: white ;
    border: 1px solid #707070;
}

.no-result {
    text-align: center;
    color: #6b6b6b;
    margin: 20px 0;
}

ul.p-pager {
    text-align: center;
    margin: 20px auto;
}

ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.page-numbers li {
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 5px;
    margin: 5px;
    line-height: 28px;
    font-size: 14px;
}

ul.page-numbers li a {
    color: black;
    outline: none;
}

ul.page-numbers li:has(.page-numbers.current) {
    color: white;
    background-color: #FF7700;
    border: 1px solid #FF7700;
}

ul.page-numbers li:not(:has(.page-numbers.current)):hover {
    background-color: #f5f5f5;
}

ul.page-numbers li:has(.page-numbers.next), ul.page-numbers li:has(.page-numbers.prev) {
    border: none !important;
    margin: 5px 10px;
    font-size: 16px;
    width: 50px;
}

.no-data {
    color: #6b6b6b;
    text-align: center;
    margin: 20px 0;
}

ul.page-numbers li a.next, ul.page-numbers li a.prev {
    display: inline-flex;
    align-items: center;
}

ul.page-numbers li a.next::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #000;
    margin-left: 8px;
    margin-top: 2px;
}

ul.page-numbers li a.prev::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 8px solid #000;
    margin-right: 8px;
    margin-top: 2px;
}

.p-entry__img img {
    height: auto;
}

#product-list {
    display: flex;
    justify-content: space-between; /* Adjusts space between items */
    width: 1000px;
    max-width: 100%;
    margin: -80px auto 0;
    flex-wrap: wrap;
    margin: 0;
    justify-content: flex-start
}

#product-list .item {
    padding: 0px;
    margin: 10px; /* Adds space between items */
    /* border-radius: 5px; */
    flex: 0 0 22%; /* 22% width per item to fit 4 items per row with margins */
    box-shadow: none;
}

#product-list .item:hover {
    cursor: pointer;
}

#product-list .item img:first-child {
    margin: 10px 0;
    width: 100%;
}

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

#product-list .item .p-desc {
    padding: 0;
    color: black;
    height: 67px;
}

#product-list .item .p-price-txt, #product-list .item .p-price {
    margin: 10px 0 0;
    color: black;
}

#product-list .item .p-stars {
    margin: 0;
    padding: 0;
    color: black;
}

#product-list .item .fav {
    top: 36%;
    right: 10px;
}

#search-top-pagination {
    margin-top: -12px;
    float: right;
}

.top-information .p-desc {
    padding: 10px 0;
}

.two-column #secondary {
    width: 300px;
}

.info-rel-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 100px;
}

.p-info-rel-grid {
    grid-template-columns: repeat(3, 1fr);
}

#secondary a.banner img {
    margin-bottom: 20px;
}

#secondary .side-cat-title {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
}

#secondary .side-feature-title {
    margin: 50px 0 20px;
    font-size: 20px;
    font-weight: bold;
}

#secondary .side-cat-name {
    position: relative;
    border-bottom: 1px solid #CCC;
    padding-bottom: 10px;
    width: 100%;
    margin: 10px 0 20px;
    font-size: 16px;
}

#secondary .side-cat-name a {
    width: calc(100% - 40px);
    display: block;
}

#secondary #feature-box {
    margin:0 0 80px;
}

#secondary #feature-box .feature-item {
    margin: 0 0 30px;
}

#secondary #feature-box .feature-item img {
    width: 100%;
}

#secondary #feature-box .feature-item p {
    font-size: 14px;
    margin-top: 5px;
}

div.site-title {
    display: inline-flex;
}

div.site-title .select-container {
    position: relative;
    display: inline-flex;
    width: 130px; /* Adjust as needed */
    margin-left: 30px;
    /* 親のフレックス配置で潰れないようにする。潰れると中の select が
       幅100%で追従して「ブランド」が読めなくなる（2026-08-10） */
    flex: 0 0 auto;
    min-width: 130px;
}

.select-container select {
    width: 130px;
    padding: 10px;
    outline: none;
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background-color: white;
    border: none;
    border-radius: 4px;
    padding-right: 40px; /* Space for the custom icon */
    font-size: 14px;
    background: none;
}

.select-container::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 20px; /* Width of the custom icon */
    height: 20px; /* Height of the custom icon */
    background: url('images/icon/ic_angle.png') no-repeat center center; /* Replace 'your-icon.png' with the path to your image */
    background-size: contain; /* Ensure the image fits within the element */
    pointer-events: none; /* Prevent the icon from interfering with clicks */
}

/*
 * 🚨 幅100px固定はNG（2026-08-10 修正）
 * `.select-container select` は左padding 10px＋右padding 40px（矢印の逃げ）で
 * 計50pxを消費する。100px固定だと文字に使えるのが50pxしかなく、
 * 「ブランド」(14pxで約56px) が入りきらず **「ブラント」と濁点が切れて**いた。
 * 実測で 768px以上の全幅（975/1010/1200px すべて）で発生。
 * 親 .select-container の幅（PC:130px / 768〜999px:120px）に追従させる。
 */
.select-container select#trouble-list {
    width: 100%;
}

/* footer */
footer {
    background-color: #F7F5ED;
}

footer a {
    color: black;
}

#site-info {
    display: none;
}

p.copyright {
    color: black;
    padding: 20px 0;
}

footer .footer-bottom-menu {
    text-align: center;
    padding: 20px 0;
}

footer .footer-bottom-menu ul {
    display: inline-flex;
}

footer .footer-bottom-menu ul li {
    color: black;
    border-right: 1px solid #242424;
    padding: 0 30px;
}

footer .footer-bottom-menu ul li:first-child {
    padding-left: 0;
}

footer .footer-bottom-menu ul li:last-child {
    padding-right: 0;
    border-right: none;
}

#footer-main {
    width: 1200px;
    max-width: 100%;
    margin: 40px auto;
    position: relative;
}

#footer-main .box {
    display: inline-flex;
    gap: 4em;
    width: 100%;
}

#footer-main .box #footer-center {
    display: inline-flex;
    gap: 5%;
    width: 100%;
}

#footer-main .box #footer-center .footer-menu {
    width: 30%;
}

#footer-main .box #footer-center .footer-menu h2 {
    color: black;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
}

#footer-main .box #footer-center .footer-menu li {
    margin-bottom: 7px;
}

#footer-main .box #footer-right {
    display: inline-flex;
    align-items: start;
    justify-content: end;
    gap: 1em;
}

#footer-main #footer-product-search {
    position: absolute;
    right: 0;
    bottom: -20%;
}

/*
    Product detail page
*/

.product-page {
    width: 1200px !important;
    max-width: 100%;
    margin: 0 auto !important;
    float: none !important;
}

.product-page .detail-box { 
    width: calc(100% - 330px) !important;
    display: inline-flex;
    gap: 1em;
}

.product-page .detail-box h2 {
    font-size: 18px;
    line-height: 1.5;
    margin: 10px 0;
    font-weight: 600;
}

.product-page .detail-box .product-desc {
    width: 70%;
}

.product-page .detail-box .product-desc .p-stars {
    padding: 0;
    margin-bottom: 30px;
}

.product-page .detail-box div.p-spec {
    padding-top: 10px;
    border: none;
}

.product-page .detail-box div.p-spec span, .product-page .detail-box span.p-spec  {
    margin-top: 10px;
    color: #CC0000;
    border: 1px solid #CC0000;
    padding: 5px 10px;
}

#img-box .itemsubimg a {
    border: 1px solid #ccc;
}

.product-page #itempage .item-info {
    padding-top: 0;
}

.product-page .product-desc .sell, .product-page #itempage .sell {
    font-size: 12px;
    color: white;
    padding: 5px 10px;
    background-color: #CC0000;
}

.product-page .detail-box .product-desc .price {
    color: #CC0000;
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

.product-page .detail-box .product-desc .price span {
    position: relative;
    color: #707070;
    font-size: 16px;
    font-weight: normal;
    margin-left: 30px;
    padding: 0 5px;
}

.product-page .detail-box .product-desc .price span:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #909090;
    height: 1px;
}

.product-page .detail-box #p-stock-info {
    display: inline-flex;
    width: 100%;
    gap: 2em;
    margin: 30px 0;
}

.product-page .detail-box #p-stock-info .p-stock-item {
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #333;
    text-align: center;
    padding: 8px 20px;
    font-size: 16px;
}

.product-page .detail-box #p-stock-info .p-stock-item span {
    font-size: 12px;
}

.product-page .detail-box #p-stock-info .p-stock-item:has(.no-stock) {
    color: #ccc;
}

.product-page .detail-box #p-stock-info .p-stock-item:has(.is-stock) {
    border: 3px solid #FF7701;
}

.product-page .detail-box #p-stock-info .p-stock-item:has(.is-stock) span.is-stock {
    color: #FF7701;
    font-weight: bold;
}

.product-page #itempage .itemcode {
    border: none;
    margin-bottom: 10px;
}

.product-page .detail-box #special-concept {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 60px 0;
}

.product-page .detail-box #special-concept ul {
    padding: 0 20px;
}

.product-page .detail-box #special-concept ul li {
    list-style: disc;
    color: #333;
    margin-bottom: 5px;
}

.product-page .detail-box #special-concept ul li::marker {
    color: #ccc;
}

.product-page .detail-box #itemstock {
    margin: 10px 0 20px;
}

.product-page .detail-box #itemstock span {
    margin-right: 10px;
    padding: 4px 10px;
    background-color: #efefef;
}

.product-page .detail-box .c-box {
    text-align: left;
}

.product-page .detail-box .c-box .quantity {
    margin-bottom: 20px;
}

.product-page .detail-box .c-box .quantity .skuquantity {
    border-radius: 10px;
    text-align: left;
    padding: .357143em 10px;
}

.product-page .detail-box .cart-button .skubutton {
    width: 100%;
    margin-top: 25px;
    border-radius: 10px;
}

.product-page .detail-box .item-info .field_price {
    font-size: 28px;
    font-weight: bold;
}

.product-page .detail-box .item-info .field_price em {
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.product-page .detail-box .c-box .shipping-comment {
    text-align: left;
}

.product-page .detail-box .fav-button {
    margin: 20px 0;
    width: 100%;
    display: block;
    border: 1px solid #ccc;
    color: #333;
    position: relative;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.product-page .detail-box .fav-button:before {
    content: '';
    background: url('./images/icon/ic_heart1.png');
    position: absolute;
    left: 20px;
    top: 12px;
    width: 19px;
    height: 19px;
    background-size: 19px 19px;
}

.product-page .detail-box .fav-button.is-fav {
    border-color: #e74c6f;
    color: #e74c6f;
    background: #fef0f3;
}

.product-page .detail-box .fav-button.is-fav:before {
    background: url('./images/icon/ic_heart2.png');
    background-size: 19px 19px;
}

.product-page .detail-box .fav-button {
    cursor: pointer;
}

.fav-btn {
    position: relative;
}

.fav-btn .fav-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c6f;
    color: #fff;
    font-size: 11px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
}

#extra-content #pack-box h2 {
    font-size: 150%;
    margin-bottom: 20px;
    padding-top: 50px;
}

#extra-content #pack-box .pack-product-list {
    display: inline-flex;
    gap: 1.5em;
    margin: 10px 0;
    height: 350px;
    align-items: stretch;
}

#extra-content #pack-box .pack-product-list .pack-product {
    position: relative;
    padding: 0 0 20px;
    width: 180px;
    box-shadow: 1px 1px 1px lightgray, 3px 4px 9px lightgray;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
}

#extra-content #pack-box .pack-product-list .pack-product.selected {
    border: 2px solid #FF9900;
}

#extra-content #pack-box .pack-product-list .pack-product label.custom-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
}

#extra-content #pack-box .pack-product-list .pack-product a {
    display: block;
    padding: 15px;
}

#extra-content #pack-box .pack-product-list .pack-product img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

#extra-content #pack-box .pack-product-list .pack-product p {
    padding: 8px 20px;
    font-size: 16px;
}

#extra-content #pack-box .pack-product-list .pack-product p.title {
    font-size: 12px;
    height: 50px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#extra-content #pack-box .pack-product-list .pack-product p span {
    font-size: 80%;
}

#extra-content #pack-box .cart-box {
    text-align: center;
    margin-left: 100px;
    position: relative;
}

#extra-content #pack-box .cart-box p {
    font-size: 16px;
    margin-top: 40%;
}

#extra-content #pack-box .cart-box p span {
    font-size: 12px;
}

#selected-products-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    text-align: left;
}

#selected-products-list li {
    padding: 8px 10px;
    background: #f5f5f5;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 13px;
    border-left: 3px solid #ccc;
    color: #6b6b6b;
    transition: all 0.2s ease;
}

#selected-products-list li.selected {
    border-left: 3px solid #FF7700;
    background: #fff8f0;
    color: #333;
}

#selected-products-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

#selected-products-list .product-name {
    flex: 1;
}

#selected-products-list .product-price {
    font-weight: bold;
    white-space: nowrap;
}

.list-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.list-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #FF7700;
}

.pack-cart-button {
    background-color: #FF7700;
    border-radius: 10px;
    padding: 15px 50px;
    display: block;
    color: white;
    text-align: center;
    position: relative;
    margin-top: 10px;
}

.pack-cart-button:hover {
    color: white;
    opacity: 0.8;
}

.pack-cart-button:before {
    content: '';
    background: url('./images/icon/ic_cart_white.png');
    position: absolute;
    left: 20px;
    top: 15px;
    width: 22px;
    height: 20px;
    background-size: 22px 20px;
}

#tag-list {
    margin: 20px 0;
}

#tag-list h2 {
    margin: 50px 0 20px;
    font-size: 150%;
    padding: 0 10px;
}

#tag-list #cat-menu {
    padding: 30px 0;
    text-align: left;
    background: transparent;
}

.p-inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

#p-common-info {
    background-color: #F7F5ED;
    padding: 40px 0;
}

#p-common-info #accordion-list {
    width: 1200px;
}

#p-common-info #accordion-list .accordion {
    background: transparent;
    margin-bottom: 0;
    padding-bottom: 0;
}

#p-common-info #accordion-list .question {
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: black;
}

#p-common-info #accordion-list .question em {
    font-size: 80%;
    margin-left: 30px;
}

#p-common-info #accordion-list .answer-wrapper {
    padding: 10px 20px;
}

#p-review{
    display: inline-flex;
    gap: 2em;
    width: 100%;
    padding: 50px 10px;
}

#p-review #p-review-score {
    width: 25%;
    overflow: hidden;
}

#p-review #p-review-score .p-review-stars {
    max-width: 100%;
}

#p-review #p-review-score .p-review-star {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    flex-wrap: nowrap;
}

#p-review #p-review-score .p-review-star .p-stars {
    flex-shrink: 0;
    width: 80px;
}

#p-review #p-review-score .p-review-star .progress-bar {
    flex: 1;
    min-width: 50px;
    max-width: 100px;
}

#p-review #p-review-score .p-review-star .percent-value {
    flex-shrink: 0;
    width: 35px;
    text-align: right;
    font-size: 12px;
}

#p-review #p-review-score h2 {
    font-size: 150%;
}

#p-review #p-review-score .t-score {
    margin-top: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

#p-review #p-review-score .t-score strong {
    font-size: 400%;
}

#p-review #p-review-score .t-score span {
    margin-left: 30px;
}

#p-review #p-review-user {
    width: 75%;
}

#p-review .review-button {
    margin: 30px 0;
    width: 100%;
    display: block;
    background-color: white;
    border: 2px solid #ff9900;
    color: #FF7701;
    position: relative;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 5px #ccc;
}

#p-review .p-review-star {
    display: inline-flex;
    align-items: center;
}

#p-review .p-review-star .p-stars {
    padding-left: 0;
    margin-bottom: 0;
}

#p-review .percent-value {
    margin-left: 20px;
}

#p-review .progress-bar {
    border: 1px solid #ccc;
    background-color: white;
    width: 120px;
    height: 16px;
    overflow: hidden;  
}

#p-review .progress-bar .progress {
    background-color: #FFCC00;
    width: 0;
    height: 100%;
}

#p-review .progress-bar .progress.p-100 {
    width: 100%;
}

#p-review .progress-bar .progress.p-90 {
    width: 90%;
}

#p-review .progress-bar .progress.p-80 {
    width: 80%;
}

#p-review .progress-bar .progress.p-70 {
    width: 70%;
}

#p-review .progress-bar .progress.p-60 {
    width: 60%;
}

#p-review .progress-bar .progress.p-50 {
    width: 50%;
}

#p-review .progress-bar .progress.p-40 {
    width: 40%;
}

#p-review .progress-bar .progress.p-30 {
    width: 30%;
}

#p-review .progress-bar .progress.p-20 {
    width: 20%;
}

#p-review .progress-bar .progress.p-10 {
    width: 10%;
}

#p-review-user .user-box {
    border: 1px solid #ccc;
    padding: 30px;
    margin-bottom: 30px;
}

#p-review-user .user-box .photo, #p-review-user .user-box .p-feedback {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

#p-review-user .user-box .photo div {
    display: inline-flex;
    align-items: center;
}

#p-review-user .user-box .photo span {
    margin-left: 20px;
}

#p-review-user .user-box .photo p.date {
    margin-left: 20px;
}

#p-review-user .user-box .p-name {
    font-size: 110%;
    margin: 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

#p-review-user .user-box .p-user-review {
    margin-top: 10px;
    margin-bottom: 20px;
    display: inline-flex;
}

#p-review-user .user-box .p-user-review .p-stars {
    padding-left: 0;
    margin-right: 10px;
}

#p-review-user .user-box .p-feedback {
    margin-top: 30px;
}

#p-review-user .user-box .p-feedback a {
    display: inline-flex;
    align-items: end;
}

#p-review-user .btn-more {
    display: block;
    text-align: center;
    width: 200px;
    border-radius: 20px;
    border: 2px solid #ff7700;
    color: #ff7700;
    background-color: white;
    padding: 10px 15px;
    font-weight: bold;
    margin: 40px auto;
}

@media only screen and (max-width: 767px) {
    
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .site-header .inner .logo {
        width: 100px;
        height: auto;
    }

    div.site-title {
        padding-right: 0;
    }

    div.site-title .select-container {
        display: none !important;
    }

    .snav.cf {
        margin-right: 10px;
    }

    .snav .login-btn, .snav .incart-btn, .snav .signup-btn, .snav .menu-btn {
        margin-left: 20px;
    }

    .snav .fav-btn img {
        margin-left: 0;
    }

    .ic_menu {
        width: 30px;
        height: 30px;
    }

    .snav.cf .search-box {
        display: none;
    }

    .snav .signup-btn a.signup {
        border-radius: 10px;
        padding: 5px 10px;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .site-header .banner-msg .more-btn {
        display: none;
    }

    .site-header .banner-msg {
        padding: 10px 2px !important;
        font-size: 13px;
    }

    .slick-slide img.new-mark {
        height: 40px !important;
    }

    #front-category-container .item {
        flex: 0 0 45%
    }

    #front-special .s-item {
        flex: 0 0 100%;
        border: none !important;
    }

    #front-information {
        margin: 0 auto;
        padding: 0;
    }

    .top-information a {
        width: calc(100% - 20px) !important;
        margin-bottom: 20px !important;
    }

    .p-desc {
        padding: 10px 5px;
    }

    #front-bottom-text {
        margin-top: 30px !important;
    }

    #front-news .inner {
        padding: 30px 20px;
        display: block;
    }

    #front-news #news-title h2 {
        margin-bottom: 0;
    }

    #front-news #news-title {
        margin: 0 0 30px !important;
        width: 100% !important;
        padding: 0;
    }

    .top-list-title {
        position: relative;
        width: 95% !important;
    }

    .top-more-btn-sp {
        position: absolute;
        right: 0;
        top: 0;
    }

    #front-news #news-list {
        width: 100%;
    }

    #cat-menu a.cat-menu-btn {
        padding: 5px 10px;
        margin: 5px 10px;
        display: inline-block;
    }

    .slick-slide img {
        height: 200px !important;
    }

	#accordion-list .py-60 {
		padding: 52px 0;
	}
	
	#accordion-list h2 {
		font-size: 24px;
	}
	
	#accordion-list .text-control-1 h2 {
	margin-bottom: 16px;
	}
	
	#accordion-list .accordion {
		margin-bottom: 16px;
	}
	
	#accordion-list .container {
		max-width: 768px;
	}

    .l-inner {
        padding: 0 10px;
    }

    .p-news-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

	#accordion-list .container {
		max-width: 1144px;
	}

    #news-page .l-primary #news-list {
        display: block;
        width: 109%;
    }

    #news-page .l-primary #news-list .p-article04__header {
        display: block;
        margin-top: 10px;
    }

    #news-page .l-primary #news-list .p-article04__title {
        margin-top: 10px;
        margin-left: 0;
        -webkit-line-clamp: unset;
    }

    #news-detail .p-news-detail {
        display: block;
        width: 100%;
    }

    #secondary {
        width: 100% !important;
        border: none !important;
        margin-top: 50px;
    }

    #footer-main #footer-left {
        width: 50%;
    }

    #footer-main #footer-left img {
        width: 100%;
    }

    #footer-main .box, #footer-main .box #footer-center {
        display: block;
        margin-bottom: 50px;
    }

    #footer-main .box #footer-center .footer-menu {
        margin-top: 40px;
        display: inline-block;
    }

    #footer-main .box #footer-center .footer-menu:first-child {
        width: 100%;        
    }

    #footer-main .box #footer-center .footer-menu:nth-child(2), #footer-main .box #footer-center .footer-menu:nth-child(3) {
        width: 48%;        
    }

    footer .footer-bottom-menu ul {
        display: block;
        text-align: left;
    }

    footer .footer-bottom-menu ul li {
        border: none;
        padding: 5px 0;
    }

    #footer-main #footer-product-search {
        bottom: -30%;
    }

    #p-review {
        display: block;
    }

    #p-review #p-review-score, #p-review #p-review-user {
        width: 100%;
    } 

    #p-common-info #accordion-list {
        padding: 0 15px;
    }
    .product-page .detail-box { 
        display: block;
        width: 100% !important;
    }

    .product-page .detail-box .product-desc {
        width: 100% !important;
    }

    .product-page .detail-box #p-stock-info {
        gap: 1em;
    }

    .product-page #itempage .item-info {
        background: #F7F5ED;
        padding: 20px;
        margin: 0 -15px;
    }

    .product-page .detail-box .cart-button .skubutton {
        padding: 20px 0;
    }

    #extra-content #pack-box .pack-product-list {
        display: block;
    }

    #extra-content #pack-box .pack-product-list .pack-product {
        width: 45%;
        margin-left: 4%;
        margin-bottom: 30px;
        display: inline-block;
    }

    #extra-content #pack-box .pack-product-list .pack-product label.custom-checkbox {
        top: -20px;
        left: -20px;
    }

    #extra-content #pack-box .cart-box {
        margin-left: 0;
        margin-top: -100px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 40px;
    }

    .pack-cart-button {
        padding: 20px 0;
    }

    .pack-cart-button:before {
        top: 20px;
        left: 50px;
    }

    #check-box .top-list-title {
        margin-top: 25px;
    }

    .product-page .detail-box .p-spec {
        padding-top: 30px;
    }

    #itempage .item-name {
        font-size: 130%;
        line-height: 1.5;
        margin-top: 10px;
    }

    #itempage .p-stars {
        padding-left: 0;
        margin-top: 50px;
    }

    #p-common-info #accordion-list .question {
        font-size: 17px;
    }

    #search-content {
        display: block;
    }

    #search-content #search_result {
        width: 100%;
        padding: 0 10px !important;
    }

    .breadcrumb {
        padding: 0 15px;
    }

    #search-content #search_filter {
        width: calc(100% + 20px);
        padding: 15px 10px;
        margin: 20px -10px;
        background-color: #F7F5ED;
    }

    #search-content #search_result #product-list {
        justify-content: space-between;
    }

    #search-content #search_result #product-list .item {
        flex: 0 0 44%;
    }

    #search-content #search_filter #search_cond h2 {
        text-align: center;
        padding: 0 0 20px;
        margin-top: 0;
    }

    #search-content #search_filter #search_cond h2:before {
        left: 27%;
    }

    #search-content #search_filter #search_cond h2:after {
        position: absolute;
        bottom: -5px;
        left: 48%;

        content: '▼'; /* Unicode arrow symbol */
        font-size: 14px; /* Smaller size for arrow */
        color: #FF7700; /* Color of the arrow */
        pointer-events: none; /* Disable pointer events on the arrow */
    }

    #search_filter #accordion-list .accordion, #search_filter #accordion-list .answer {
        background-color: #F7F5ED;
    }

    #search_filter #search_cond .btn_cond_clear {
        border: 2px solid #CCCCCC;
        background-color: white;
        font-weight: bold;
        font-size: 120%;
    }

    #search_filter #search_option .btn_close {
        border: 2px solid #CCCCCC;
        background-color: white;
        font-weight: bold;
        font-size: 120%;
        border-radius: 30px;
        width: 200px;
        padding: 10px 30px;
        display: block;
        text-align: center;
        margin: 30px auto;
        color: #333;
    }

    #popular-product-category {
        padding: 0 10px;
        display: inline-flex;
    }

    #popular-product-category .cat-name {
        font-size: 12px;
        padding: 10px;
    }
}

/*
 * 🚨 上限は 999px（1000px未満）にすること — 2026-08-10 修正
 *
 * デスクトップ用のヘッダー指定は下の `@media screen and (min-width: 62.5em)`
 * ＝ 1000px 以上からしか効かない。ここの上限が 950px だったため
 * **951〜999px がどちらのブロックにも当たらず**、素の指定
 * （`.snav.cf { width: calc(75% - 20px) }` / ロゴ max-width:280px）に戻り、
 * カート・会員登録ボタンが2段目に落ちてヘッダーが235pxまで伸びていた。
 * 実測: 950px→高さ180px / 951px→235px / 1000px→166px。
 * 1000px の手前まで伸ばして境界を繋ぐ。
 */
@media (min-width: 768px) and (max-width: 999px) {
    #popular-product-list .item .rank {
        width: 50px;
        top: -25px;
    }

    .slick-slide img {
        height: auto;
    }

    #cat-menu {
        padding: 15px 20%;
    }

    #cat-menu .cat-menu-btn {
        margin-bottom: 30px;
    }

    #special, #news, #recent, #front-category-container {
        padding: 0 10px;
    }

    #front-news #news-title .top-more-btn-sp {
        display: none;
    }

    .top-list-title {
        position: relative;
        width: 95% !important;
    }

    .top-more-btn-sp {
        position: absolute;
        right: 0;
        top: 0;
    }

    #footer-main .box {
        display: block;
    }

    #footer-main .box #footer-center {
        margin: 50px 0 20px;
        padding: 0 10px;
    }

    #footer-main .box #footer-right {
        margin-left: 10px;
    }

    div.site-title .select-container {
        width: 120px;
        min-width: 120px;
        margin-left: 10px;
    }

    .snav.cf {
        width: 38%;
    }

    .site-header .inner .logo {
        width: 140px;
        height: auto;
    }

    #cat-menu a.cat-menu-btn, #cat-menu a.cat-menu-btn:hover {
        margin: 10px;
        display: inline-block;
    }

    #search_filter {
        width: 30%;
    }

    #search_result {
        width: 70%;
    }

    #itempage #img-box {
        width: 25% !important;
    }

    .product-page .detail-box {
        width: 75% !important;
    }

    .product-page .detail-box .product-desc {
        width: 60%;
    }

    .product-page .detail-box #p-stock-info {
        flex-wrap: wrap;
        gap: 1em;
    }

    #p-common-info #accordion-list {
        padding: 0 20px;
    }

    .product-page .detail-box .item-info .field_price {
        font-size: 22px;
    }

    #p-review #p-review-score {
        width: 35%;
    }

    #cart-box1 {
        display: none !important;
    }

    #cart-box2 {
        display: block !important;
        width: 50%;
        margin-left: 25% !important;
        margin-top: -100px;
        margin-bottom: 70px;
    }

    #news-page .p-news-list, #news-detail .p-entry__inner, .info-content {
        padding: 0 10px;
    }

    #news-page .l-primary #news-list, .p-info-content, #news-detail .p-news-detail {
        width: 65%;
        vertical-align: top;
    }

    .two-column #secondary {
        width: 30%;
        margin-left: 4%;
        display: inline-block;
        border: none;
        padding-top: 0 !important;
    }

    .p-news-list {
        padding: 0 10px;
    }

    .breadcrumb {
        padding-left: 10px;
    }
}

@media screen and (min-width: 62.5em) {
    header .inner {
        max-width: 1800px;
        width: 100%;
        padding: 10px 0;
    }

    h1.site-title, div.site-title {
        width: 25%;
        padding: 0.1em 3%;
    }

    .incart-btn {
        margin-top: 0;
    }

    .search-box {
        padding: 0;
    }

    .incart-btn {
        min-width: 50px !important;
    }

    .incart-btn a {
        background-color: transparent !important;
    }
}

@media screen and (max-width: 1500px) {
    .item.slick-slide img {
        height: 400px;
    }    
}

@media screen and (max-width: 1200px) {
    .slick-slide img {
        height: 300px;
    }    
}

/* =====================================================
   商品レビュー機能 CSS
   ===================================================== */

/* レビューフォーム */
.review-custom-fields {
    margin-bottom: 20px;
}

.review-custom-fields p {
    margin-bottom: 15px;
}

.review-custom-fields label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.review-custom-fields .required {
    color: #e00;
}

.review-title-field input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

/* 星評価入力 */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.star-rating-input input {
    display: none;
}

.star-rating-input label {
    cursor: pointer;
    font-size: 30px;
    color: #ddd;
    transition: color 0.2s;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
}

.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input label.hover {
    color: #f5a623;
}

.star-rating-input input:checked ~ label {
    color: #f5a623;
}

/* レビュー表示 */
#p-review {
    margin: 30px 0;
}

#p-review h2 {
    font-size: 20px;
    margin-bottom: 20px;
}

#p-review-score {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

#p-review-score .t-score {
    font-size: 18px;
    margin-bottom: 15px;
}

#p-review-score .t-score strong {
    font-size: 36px;
    color: #f5a623;
}

#p-review-score .t-score span {
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}

/* 評価分布 */
.p-review-stars {
    margin: 20px 0;
}

.p-review-star {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.p-review-star .p-stars {
    width: 100px;
    flex-shrink: 0;
}

.p-review-star .p-stars img {
    width: 15px;
    height: 15px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    margin: 0 10px;
    overflow: hidden;
}

.progress-bar .progress {
    height: 100%;
    background: #f5a623;
    border-radius: 4px;
}

.percent-value {
    width: 40px;
    text-align: right;
    font-size: 12px;
    color: #666;
}

/* レビュー書くボタン */
.review-button {
    display: inline-block;
    padding: 12px 30px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s;
}

.review-button:hover {
    background: #555;
    color: #fff;
}

/* 個別レビュー */
#p-review-user {
    margin-top: 30px;
}

.user-box {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.user-box:last-of-type {
    border-bottom: none;
}

.user-box .photo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.user-box .photo > div:first-child {
    display: flex;
    align-items: center;
}

.user-box .photo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.user-box .photo span {
    font-weight: bold;
}

.user-box .date {
    color: #6b6b6b;
    font-size: 12px;
}

.user-box .p-name {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.user-box .p-user-review {
    margin-bottom: 10px;
}

.user-box .p-user-review strong {
    display: block;
    margin-top: 5px;
    font-size: 16px;
}

.user-box .p-user-review .p-stars img {
    width: 15px;
    height: 15px;
}

.user-box > p {
    line-height: 1.8;
    color: #333;
}

/* 参考になったボタン */
.p-feedback {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.p-feedback a {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s;
}

.p-feedback a:hover {
    color: #333;
}

.p-feedback img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.helpful-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.helpful-btn:hover {
    background: #f5f5f5;
}

.helpful-btn.voted {
    background: #f0f0f0;
    color: #6b6b6b;
    cursor: default;
}

.helpful-btn img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/* もっと見るボタン */
.btn-more {
    display: block;
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.2s;
}

.btn-more:hover {
    background: #f5f5f5;
}

/* 星評価表示 */
.star-rating {
    color: #f5a623;
    font-size: 16px;
}

.star-rating .star.empty {
    color: #ddd;
}

/* レビューフォームセクション */
#review-form-section {
    background: #f9f9f9;
    padding: 0;
    border-radius: 8px;
    margin-top: 30px;
    display: none;
}

#review-form-section.active {
    display: block;
}

#review-form-section h3 {
    margin-bottom: 20px;
}

/* コメントフォームスタイル上書き */
#respond {
    margin-top: 20px;
}

#respond .comment-form-comment label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#respond textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#respond .form-submit input {
    background: #333;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

#respond .form-submit input:hover {
    background: #555;
}

/* ========== カテゴリーページ ========== */
.category-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.cat-breadcrumb {
    font-size: 13px;
    padding: 15px 0;
    color: #6b6b6b;
}
.cat-breadcrumb a {
    color: #666;
    text-decoration: none;
}
.cat-breadcrumb a:hover {
    color: #e74c3c;
}
.cat-breadcrumb .sep {
    margin: 0 6px;
    color: #ccc;
}
.cat-breadcrumb .current {
    color: #333;
}

.cat-page-header {
    padding: 10px 0 15px;
    border-bottom: 2px solid #e74c3c;
    margin-bottom: 20px;
}
.cat-page-title {
    font-size: 22px;
    margin: 0;
}
.cat-page-desc {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}

.cat-subcategories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.cat-sub-btn {
    display: inline-block;
    padding: 6px 14px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
}
.cat-sub-btn:hover {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}
.cat-sub-btn .cat-count {
    font-size: 11px;
    color: #6b6b6b;
    margin-left: 3px;
}
.cat-sub-btn:hover .cat-count {
    color: rgba(255,255,255,0.8);
}

.cat-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.cat-result-count {
    font-size: 14px;
    color: #666;
}
.cat-sort select {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.cat-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}
.cat-product-grid .item {
    position: relative;
    display: block;
    background: #fff;
    box-shadow: 1px 1px 1px lightgray, 3px 4px 9px lightgray;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: box-shadow 0.2s;
    padding-bottom: 10px;
}
.cat-product-grid .item:hover {
    box-shadow: 1px 1px 3px #aaa, 3px 4px 12px #bbb;
}
.cat-product-grid .item img.icon {
    width: 130px;
    height: 130px;
    object-fit: cover;
    display: block;
    margin: 15px auto;
}
.cat-product-grid .item .p-desc {
    font-size: 12px;
    padding: 5px 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    min-height: 48px;
}
.cat-product-grid .item .p-price {
    font-size: 15px;
    font-weight: bold;
    color: #e74c3c;
    padding: 3px 12px;
}
.cat-product-grid .item .p-stars {
    padding: 0 12px;
}
.cat-product-grid .item .p-stars img {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin: 0 1px;
}
.cat-product-grid .item .p-stars .s-price {
    font-size: 12px;
    color: #f5a623;
    margin-left: 3px;
}
.cat-product-grid .item img.fav {
    width: 22px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 10px;
    cursor: pointer;
}

/* ページネーション: 箱の装飾は ul.page-numbers に一本化。ここは余白/中央寄せのラッパーのみ */
.cat-pagination,
.pagination_wrapper {
    text-align: center;
    margin: 30px 0;
}

.cat-no-products {
    text-align: center;
    padding: 60px 20px;
    color: #6b6b6b;
    font-size: 15px;
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .cat-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .cat-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .cat-product-grid .item img.icon {
        width: 100px;
        height: 100px;
    }
    .cat-page-title {
        font-size: 18px;
    }
    .cat-toolbar {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

/* ========== 検索結果ページ ========== */
.search-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-box-inline {
    max-width: 250px;
}
.search-box-inline .search-form {
    display: flex;
    gap: 5px;
}
.search-box-inline .search-field {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    width: 160px;
}
.search-box-inline .search-submit {
    padding: 6px 12px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.search-no-results {
    text-align: center;
    padding: 60px 20px;
}
.search-no-results p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}
.search-no-results ul {
    list-style: none;
    padding: 0;
    color: #6b6b6b;
    font-size: 13px;
    margin-bottom: 30px;
}
.search-no-results ul li {
    margin-bottom: 5px;
}
.search-no-results ul li:before {
    content: "・";
}
.search-box-center {
    max-width: 400px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .search-toolbar-right {
        flex-direction: column;
        width: 100%;
    }
    .search-box-inline {
        max-width: 100%;
        width: 100%;
    }
}

/* ========== モバイルドロワーメニュー ========== */
body.drawer-open {
    overflow: hidden;
}

#mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}
#mobile-overlay.open {
    display: block;
}

#mobile-drawer {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
}
#mobile-drawer.open {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #333;
    color: #fff;
}
.drawer-title {
    font-size: 16px;
    font-weight: bold;
}
#drawer-close {
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.drawer-search {
    padding: 15px;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
}
.drawer-search form {
    display: flex;
    gap: 0;
}
.drawer-search input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    outline: none;
}
.drawer-search button {
    padding: 10px 14px;
    background: #FF7700;
    color: #fff;
    border: 1px solid #FF7700;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 14px;
}

.drawer-section {
    border-bottom: 1px solid #eee;
}

.drawer-accordion-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}
.drawer-accordion-title .arrow::after {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 16px;
    transition: transform 0.2s;
}
.drawer-accordion-title.open .arrow::after {
    content: "\f106";
}

.drawer-accordion-body {
    display: none;
    padding: 0 20px 10px;
}

.drawer-link {
    display: block;
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.drawer-link:last-child {
    border-bottom: none;
}
.drawer-link:hover {
    color: #FF7700;
}
.drawer-link i {
    width: 20px;
    margin-right: 8px;
    color: #6b6b6b;
}

.drawer-nav-links {
    padding: 5px 20px;
}
.drawer-nav-links .drawer-link {
    padding: 12px 0;
}

/* === 404ページ === */
.error-404-container {
    text-align: center;
    padding: 40px 20px;
}

.error-404-icon {
    font-size: 80px;
    font-weight: bold;
    color: #ddd;
    line-height: 1;
    margin-bottom: 10px;
}

.error-404-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
}

.error-404-text {
    color: #666;
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.8;
}

.error-404-search {
    max-width: 500px;
    margin: 0 auto 30px;
}

.error-404-search form {
    display: flex;
    border: 2px solid #e74c3c;
    border-radius: 4px;
    overflow: hidden;
}

.error-404-search input[type="text"] {
    flex: 1;
    padding: 12px 15px;
    border: none;
    font-size: 15px;
    outline: none;
}

.error-404-search button {
    padding: 12px 20px;
    background: #e74c3c;
    color: #fff;
    border: none;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
}

.error-404-search button:hover {
    background: #c0392b;
}

.error-404-categories {
    margin-bottom: 30px;
}

.error-404-categories h2 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.error-404-cat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.error-404-cat-grid .cat-menu-btn {
    display: inline-block;
    padding: 8px 18px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.error-404-cat-grid .cat-menu-btn:hover {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

.error-404-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.error-404-links a {
    color: #e74c3c;
    font-size: 14px;
    text-decoration: underline !important;
}

.error-404-links a:hover {
    color: #c0392b;
}

@media only screen and (max-width: 767px) {
    .error-404-icon {
        font-size: 60px;
    }
    .error-404-title {
        font-size: 18px;
    }
    .error-404-search button {
        padding: 12px 15px;
    }
}

/* === お知らせ・お役立ち情報 === */

/* お知らせアーカイブ */
.news-subtitle {
    color: #6b6b6b;
    font-size: 13px;
    margin-top: -8px;
}

.news-list {
    border-top: 1px solid #eee;
}

.news-list-item {
    display: flex;
    align-items: baseline;
    gap: 15px;
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    color: #333;
    transition: background 0.2s;
}

.news-list-item:hover {
    background: #f9f9f9;
}

.news-date {
    font-size: 13px;
    color: #6b6b6b;
    white-space: nowrap;
    flex-shrink: 0;
}

.news-list-item .news-title {
    font-size: 14px;
    line-height: 1.6;
}

.news-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #6b6b6b;
}

/* お役立ち情報カテゴリータブ */
.info-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.info-tab {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
    background: #fff;
    transition: all 0.2s;
}

.info-tab:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.info-tab.active {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

/* お役立ち情報グリッド */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.info-grid-item {
    display: block;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s;
    color: #333;
}

.info-grid-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.info-grid-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.info-grid-body {
    padding: 12px;
}

.info-grid-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.info-grid-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.info-grid-cat {
    display: inline-block;
    padding: 2px 10px;
    background: #f0f0f0;
    border-radius: 10px;
    font-size: 11px;
    color: #666;
}

/* 記事詳細ページ共通 */
.single-article {
    background: #fff;
    padding: 30px;
    margin-bottom: 20px;
}

.single-article-header {
    margin-bottom: 20px;
}

.single-article-cats {
    margin-bottom: 10px;
}

.single-article-date {
    display: block;
    font-size: 13px;
    color: #6b6b6b;
    margin-bottom: 5px;
}

.single-article-title {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5;
    color: #333;
}

.single-article-thumb {
    margin: 0 0 20px;
}

.single-article-thumb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.single-article-body {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
}

.single-article-body h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 30px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e74c3c;
}

.single-article-body h3 {
    font-size: 17px;
    font-weight: bold;
    margin: 25px 0 10px;
}

.single-article-body p {
    margin-bottom: 15px;
}

.single-article-body img {
    max-width: 100%;
    height: auto;
}

/* 前後記事ナビ */
.single-article-nav {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.single-article-nav a {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.single-article-nav a:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.nav-next {
    text-align: right;
}

.single-article-back {
    text-align: center;
    margin-bottom: 30px;
}

.single-article-back a {
    color: #e74c3c;
    font-size: 14px;
}

/* 関連記事 */
.info-related {
    margin-bottom: 30px;
}

.info-related-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #333;
}

@media only screen and (max-width: 767px) {
    .news-list-item {
        flex-direction: column;
        gap: 5px;
    }
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .info-grid-thumb {
        height: 120px;
    }
    .single-article {
        padding: 15px;
    }
    .single-article-title {
        font-size: 18px;
    }
    .single-article-nav {
        flex-direction: column;
    }
}

/* 親テーマの #site-navigation label を非表示（カスタム .menu-btn を使用） */
#site-navigation label[for="panel"] {
    display: none !important;
}

/* モバイル - #site-navigation 自体を非表示（ドロワーに置き換え） */
@media only screen and (max-width: 767px) {
    #site-navigation {
        display: none;
    }
}

/* =====================================================
   [G13] グローバルナビ（768px以上）— 2026-08-07 追加
   🚨 これが無いとナビが全幅で消える。

   親テーマ welcart_basic は
     header div.header-nav-container { display: none; }
   を既定に置き、
     header #site-navigation input#panel.on-off + div.header-nav-container
   （＝トグル用チェックボックスの「隣接兄弟」）でのみ表示する設計。
   ところが子テーマの header.php にはその <input id="panel"> も <label> も無いため、
   このセレクタは一度もマッチせず、`display:none` が全幅で残り続けていた。
   実測: 768〜1440px の全幅で .header-nav-container が非表示・#site-navigation の高さ0。

   旧テーマ kenko-l は項目ごとに固定幅の背景画像（btn_gl01.jpg 等）を並べる実装で、
   ul が 970px 固定のため 768〜969px では横スクロールが出ていた。そこは踏襲せず、
   折り返し可能な可変幅ナビにして「どの幅でも崩れない」ことを優先する。

   ※767px以下はドロワー（.menu-btn）が担当するので対象外。
===================================================== */
@media only screen and (min-width: 768px) {

    header #site-navigation {
        padding: 0;
        clear: both;
        background-color: #fff;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }

    /* 親テーマの display:none を打ち消す（トグル無しで常時表示） */
    header #site-navigation div.header-nav-container {
        display: block;
        height: auto;
        overflow: visible;
        background-color: transparent;
    }

    /* 親の `width:1000px` 固定を上書きし、可変＋折り返しにする */
    #site-navigation > .header-nav-container > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    #site-navigation > .header-nav-container > ul > li {
        position: relative;
        float: none;
        margin: 0;
        padding: 0;
        border: none;
    }

    #site-navigation > .header-nav-container > ul > li + li {
        border-left: 1px solid #e0e0e0;
    }

    #site-navigation > .header-nav-container > ul > li > a {
        display: block;
        margin: 0;
        padding: 14px 18px;
        border: none;
        color: #333;
        font-size: 15px;
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
    }

    #site-navigation > .header-nav-container > ul > li > a:hover {
        color: #FF7700;
        background-color: #fff8f2;
        text-decoration: none;
    }

    #site-navigation > .header-nav-container > ul > li.current_page_item > a,
    #site-navigation > .header-nav-container > ul > li.current-menu-item > a {
        color: #FF7700;
        box-shadow: inset 0 -3px 0 #FF7700;
    }

    /* サブメニュー（現在の7項目は階層なしだが、将来メニューを差し替えても崩れないように） */
    #site-navigation > .header-nav-container > ul ul {
        display: none;
        position: absolute;
        z-index: 99999;
        top: 100%;
        left: 0;
        min-width: 200px;
        margin: 0;
        padding: 0;
        border: 1px solid #e0e0e0;
        background-color: #fff;
        text-align: left;
    }

    #site-navigation > .header-nav-container > ul > li:hover > ul {
        display: block;
    }

    #site-navigation > .header-nav-container > ul ul li a {
        display: block;
        padding: 10px 14px;
        border: none;
        color: #333;
        white-space: nowrap;
    }
}

/* 中間幅（768〜999px）は7項目が窮屈になるので詰める */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    #site-navigation > .header-nav-container > ul > li > a {
        padding: 12px 10px;
        font-size: 13px;
    }
}

/* トースト通知 */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/*
    Static page (固定ページ)
*/

#main:has(.static-page) {
    width: 100% !important;
}

.static-page {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    float: none !important;
}

.static-page-content {
    padding: 30px 0 60px;
    line-height: 1.9;
    font-size: 15px;
    color: #333;
}

/* 見出し */
.static-page-content h2 {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    padding: 12px 16px;
    margin: 40px 0 20px;
    border-left: 4px solid #e74c3c;
    background: #faf8f5;
}

.static-page-content h3 {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    padding-bottom: 8px;
    margin: 30px 0 15px;
    border-bottom: 1px solid #ddd;
}

.static-page-content h4 {
    font-size: 15px;
    font-weight: bold;
    color: #444;
    margin: 25px 0 10px;
}

/* 段落 */
.static-page-content p {
    margin: 0 0 16px;
}

/* リスト */
.static-page-content ul,
.static-page-content ol {
    margin: 10px 0 20px 20px;
    padding: 0;
}

.static-page-content ul li {
    list-style: disc;
    margin-bottom: 6px;
}

.static-page-content ol li {
    list-style: decimal;
    margin-bottom: 6px;
}

/* テーブル */
.static-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.static-page-content table th,
.static-page-content table td {
    border: 1px solid #ddd;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}

.static-page-content table th {
    background: #f7f5ed;
    font-weight: bold;
    white-space: nowrap;
    width: 180px;
    color: #333;
}

.static-page-content table td {
    background: #fff;
}

/* リンク */
.static-page-content a {
    color: #e74c3c;
    text-decoration: underline !important;
}

.static-page-content a:hover {
    color: #c0392b;
}

/* 画像 */
.static-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* 中央寄せ */
.static-page-content .center {
    text-align: center;
}

/* お買い物手順（howto）のステップリスト */
.static-page-content .howto_box01 {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.static-page-content .howto_box01 > li {
    list-style: none;
    margin: 0 0 30px;
    padding: 0 0 25px;
    border-bottom: 1px dashed #ddd;
}
.static-page-content .howto_box01 > li:last-child {
    border-bottom: none;
}

/* お問い合わせ メールボタン */
.static-page-content .contact-mail-link {
    display: inline-block;
    margin: 10px auto 20px;
    padding: 14px 32px;
    background: #e74c3c;
    color: #fff !important;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background 0.2s;
}
.static-page-content .contact-mail-link:hover {
    background: #c0392b;
    color: #fff !important;
}

/* 強調テキスト */
.static-page-content strong {
    font-weight: bold;
    color: #222;
}

/* 区切り線 */
.static-page-content hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 30px 0;
}

/* ブロックエディタのカラム対応 */
.static-page-content .wp-block-columns {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.static-page-content .wp-block-column {
    flex: 1;
}

/* ボタンブロック */
.static-page-content .wp-block-button a {
    display: inline-block;
    padding: 12px 30px;
    background: #e74c3c;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: bold;
    transition: background 0.2s;
}

.static-page-content .wp-block-button a:hover {
    background: #c0392b;
}

/* 引用 */
.static-page-content blockquote {
    border-left: 4px solid #e74c3c;
    padding: 15px 20px;
    margin: 20px 0;
    background: #faf8f5;
    color: #555;
    font-style: italic;
}

/* FAQ用アコーディオン風（よくある質問ページ） */
.static-page-content dt {
    font-weight: bold;
    padding: 12px 0 6px;
    color: #222;
}

.static-page-content dt::before {
    content: "Q. ";
    color: #e74c3c;
    font-weight: bold;
}

.static-page-content dd {
    padding: 0 0 16px 20px;
    margin: 0;
    border-bottom: 1px solid #eee;
}

.static-page-content dd::before {
    content: "A. ";
    color: #3498db;
    font-weight: bold;
}

/* レスポンシブ */
@media only screen and (max-width: 767px) {
    .static-page {
        padding: 0 15px;
    }

    .static-page-content {
        font-size: 14px;
        padding: 20px 0 40px;
    }

    .static-page-content h2 {
        font-size: 17px;
        padding: 10px 12px;
        margin: 30px 0 15px;
    }

    .static-page-content h3 {
        font-size: 15px;
        margin: 25px 0 12px;
    }

    .static-page-content table th {
        width: 100px;
        padding: 10px;
    }

    .static-page-content table td {
        padding: 10px;
    }

    /* テーブルがはみ出す場合のスクロール対応 */
    .static-page-content .wp-block-table {
        overflow-x: auto;
    }

    .static-page-content .wp-block-columns {
        flex-direction: column;
        gap: 10px;
    }
}

/* =====================================================
   元サイト細帯バナー対応(暫定)
   トリキュラー/カマグラ等の横長バナー(577x136)を
   クロップせず自然比率で表示する。
   ※元の550pxヒーロー用ルールを上書き。戻す場合はこのブロックを削除。
===================================================== */
.slider .slick-slide img,
.slider .item img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0;
    display: block;
}
/* 全幅ヒーロー: 1枚ずつ表示。矢印/ドットを画像に重ねる */
.slider.hero-slider { width: 100%; max-width: 900px; margin: 0 auto; position: relative; }
.slider.hero-slider .slick-slide { height: auto !important; }
.slider.hero-slider .slick-slide img,
.slider.hero-slider .item img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}
.slider.hero-slider .item a { display: block; }
.slider.hero-slider .slick-prev,
.slider.hero-slider .slick-next { width: 40px; height: 40px; z-index: 3; }
.slider.hero-slider .slick-prev { left: 16px; }
.slider.hero-slider .slick-next { right: 16px; }
.slider.hero-slider .slick-prev:before,
.slider.hero-slider .slick-next:before { font-size: 34px; color: #fff; opacity: .9; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
.slider.hero-slider .slick-dots { bottom: 14px; }
.slider.hero-slider .slick-dots li button:before { font-size: 12px; color: #fff; opacity: .55; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.slider.hero-slider .slick-dots li.slick-active button:before { color: #fff; opacity: 1; }

/* =====================================================
   アクセシビリティ: キーボード操作時のフォーカス可視化
   各所の outline:none はマウス操作時の見た目維持が目的。
   :focus-visible はキーボード操作時のみ発火するため、
   通常の見た目を保ちつつキーボード利用者にフォーカス位置を明示する。
===================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.custom-select:focus-visible,
.custom-checkbox input[type="checkbox"]:focus-visible + .checkmark,
#accordion-list .accordion:focus-visible,
ul.page-numbers li a:focus-visible {
    outline: 2px solid #e74c3c !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* =====================================================
   印刷用スタイル
   ナビ・検索・スライダー・ドロワー・フッター・推薦・装飾を隠し、
   本文を全幅・黒文字白背景で読みやすく印刷する。
===================================================== */
@media print {
    #masthead .snav,
    #site-navigation,
    .banner-msg,
    .slider,
    #cat-menu,
    [id^="drawer"], [class^="drawer"],
    .drawer-overlay,
    #toTop,
    #colophon,
    #front-bottom-text,
    #extra-content,
    .fav,
    .more-btn, .top-more-btn, .top-more-btn-sp {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    #main, #primary, #content,
    .static-page, .product-page {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    a { color: #000 !important; }
    img { max-width: 100% !important; height: auto !important; }
    @page { margin: 1.5cm; }
}

/* =====================================================
   [G16] 1000〜1099px でヘッダーの「ブランド」セレクタが検索ボックスに潜り込む
         — 2026-08-10 追加

   `div.site-title` は ≥1000px で `width: 25%` 固定だが、中の
   ロゴ(237px)＋カテゴリー/ブランドのセレクタ(130px×2)は合計530px前後あり、
   1000px では 25%＝250px を大きくはみ出して右へ伸びる。
   一方 `.snav` は `calc(75% - 20px)` で右寄せのため、
   実測でセレクタ右端 557px に対し検索ボックス左端 549px となり **8px 重なる**
   （「ブランド」の“ド”が検索ボックスの背景に隠れる）。
   1100px 以上では検索が右へ逃げるので発生しない。

   この帯だけ検索ボックスを詰めて逃がす。ロゴやセレクタの寸法は
   他の幅と揃えたいので触らない。
===================================================== */
@media screen and (min-width: 1000px) and (max-width: 1099px) {
    .snav .search-box,
    .snav .search-box div.s-box {
        max-width: 170px;
    }

    .snav .search-box .search-text,
    .snav .search-box #head-s-text {
        max-width: 130px;
    }
}

/* =====================================================
   [G15] 移行コンテンツ／CF7が使う旧テーマのクラスを補完 — 2026-08-10 追加

   🚨 これが無いと「必須」バッジが素のテキストになり、ラベルと地続きで
      「必須件名」のように見える（実際にそうなっていた）。

   旧サイトから移した固定ページ本文と Contact Form 7 のフォーム定義が、
   旧テーマ kenko-l の style.css にしか無いクラスに依存していた。
   新テーマ（子・親・Welcart既定CSS）のどこにも定義が無く、実測で
   8ページ・13クラスが完全に無スタイルだった。
     acc02×7 / acc03×9 / bold×18 / center×26 / middium×2 / small×2 /
     musts×4 / entryftxt×4 / contact_table01×2 / myButton×1 /
     textbox01×3 / textfield01×1

   旧テーマの見た目をそのまま持ってこない方針は維持しつつ（青系のテーブル等は
   新テーマの意匠と衝突するため）、機能上必要な体裁だけを新テーマの配色で補う。
   旧テーマは固定幅（textbox01=350px / textfield01=500px）でモバイルが
   はみ出していたので、ここでは可変幅にして折り返す。
===================================================== */

/* --- 汎用ユーティリティ（移行本文が使用） --- */
.acc02 { color: #c00; }
.acc03 { color: #035fb2; }
.acc05 { color: #666; }
.acc06 { color: #fff; }
.bold { font-weight: bold; }
.center { text-align: center; }
.large { font-size: 112.5%; }
.middium { font-size: 100%; }
.small { font-size: 87.5%; }

/* --- 必須バッジ（今回の主症状） --- */
.musts {
    display: inline-block;
    margin: 0 8px 2px 0;
    padding: 2px 7px;
    border-radius: 3px;
    background-color: #c00;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.entryftxt {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5;
}

/* --- 問い合わせテーブル --- */
.contact_table01 {
    width: 100%;
    margin: 20px 0 0;
    border-collapse: collapse;
    line-height: 1.7;
}

/* 既存の `.static-page-content table th`(width:180px / SP:100px, nowrap) より
   詳細度を上げる必要があるため `table.` を付ける。付けないと幅が奪われる。 */
table.contact_table01 th,
table.contact_table01 td {
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
    white-space: normal;
}

table.contact_table01 th {
    width: 30%;
    background-color: #f7f7f7;
    font-weight: bold;
}

/* --- 入力欄（旧テーマの固定幅をやめ、はみ出さないようにする） --- */
.contact_table01 input[type="text"],
.contact_table01 input[type="email"],
.contact_table01 input[type="tel"],
.contact_table01 textarea,
.textbox01,
.textfield01 {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 16px; /* iOSで入力時にズームされないように16px以上 */
}

.textbox01 { max-width: 360px; }
.textfield01 { max-width: 520px; min-height: 150px; }

/* --- 送信ボタン（サイトのオレンジに合わせる。旧テーマは青のグラデ） --- */
.myButton,
input.myButton,
.contact_table01 + p input[type="submit"],
.wpcf7-form input[type="submit"].myButton {
    display: inline-block;
    padding: 12px 48px;
    border: none;
    border-radius: 4px;
    background-color: #FF7700;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.myButton:hover,
input.myButton:hover {
    background-color: #e56a00;
    color: #fff;
}

/* --- モバイル: テーブルを縦積みにして横はみ出しを防ぐ --- */
@media only screen and (max-width: 767px) {
    table.contact_table01,
    table.contact_table01 tbody,
    table.contact_table01 tr,
    table.contact_table01 th,
    table.contact_table01 td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    table.contact_table01 tr + tr {
        margin-top: 12px;
    }

    table.contact_table01 th {
        border-bottom: none;
    }

    table.contact_table01 td {
        border-top: none;
    }

    .textbox01,
    .textfield01 {
        max-width: 100%;
    }

    .myButton,
    input.myButton {
        width: 100%;
        padding: 14px 0;
    }
}