/**
Theme Name: ECBase-child
Author: (internal)
Description: ECBase — Astra子テーマ。20〜30サイトへ複製する派生元のベーステーマ。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecbase-child
Template: astra
*/

/* ============================================================================
   配色トークン（ECBase共通デザイン設定）
   ============================================================================
   サイトの配色をまとめて変更したいときは、この :root ブロックの値だけを
   書き換える。CSS内の色指定はすべてここで定義した変数を参照している
   （直書きの16進カラーコードは使わない）。
   フォントは下の .is-pc 等の少し下、Noto Sans JP の指定を参照。
   ============================================================================ */
:root {
    --ecbase-color-primary: #d75c31;        /* メインカラー（ボタン・見出し強調・CTA） */
    --ecbase-color-primary-dark: #b8461f;   /* メインカラーの濃色（グラデーション・ホバー） */
    --ecbase-color-secondary: #5D8735;      /* サブカラー（緑系のアクセント） */
    --ecbase-color-secondary-light: #7aac4b;/* サブカラーの明色 */
    --ecbase-color-accent: #f2d202;         /* ワンポイントの差し色（黄） */
    --ecbase-color-text: #404040;           /* 本文の基本文字色 */
    --ecbase-color-text-strong: #222;       /* 見出し等の濃い文字色 */
    --ecbase-color-danger: #ff0000;         /* 必須マーク等 */
    --ecbase-color-danger-strong: #c50000;  /* エラー表示（枠線付き） */
    --ecbase-color-danger-bg: #fae4e4;      /* エラー・警告系の背景 */
    --ecbase-color-primary-tint: #ffe6ca;   /* メインカラーの薄色（背景グラデーション用） */

    /* 面の色：ヘッダー・フッター・セクションは余白ではなく背景色で区切る（特にスマホで縦を詰めるため） */
    --ecbase-color-header-bg: var(--ecbase-color-primary-dark); /* ヘッダーの帯 */
    --ecbase-color-header-text: #fff;                           /* ヘッダーの文字（ロゴ・メニュー・≡） */
    --ecbase-color-footer-bg: var(--ecbase-color-text-strong);  /* フッターの帯 */
    --ecbase-color-footer-text: rgba(255, 255, 255, 0.85);      /* フッターの文字 */
    --ecbase-color-surface: #f7f3ee;                            /* 交互に入れるセクションの薄い背景 */

    /*
     * Astra本体が独自に持つカラーパレット（--ast-global-color-0/-1）を
     * ECBaseのトークンに合わせる。これが無いと、ハンバーガーメニューの
     * アイコンやAstra純正ボタン等がここで --ecbase-color-primary を
     * 変えても連動しない（Astraの管理画面カスタマイザーで生成される
     * インラインstyleとは別に、こちらを !important で上書きしている）。
     */
    --ast-global-color-0: var(--ecbase-color-primary) !important;
    --ast-global-color-1: var(--ecbase-color-primary-dark) !important;
}

/* ===== フッター：ショップ名＋（PCのみ）ショップ情報リンク =====
   スマホ（921px以下＝ハンバーガーメニューが出る幅）はショップ名だけ。
   リンクは functions.php の ecbase_mobile_menu_add_footer() でハンバーガーメニューの末尾に入る。 */
.ecbase-footer{
    padding: 28px 20px;
    text-align: center;
    background: var(--ecbase-color-footer-bg);
    color: var(--ecbase-color-footer-text);
}
.ecbase-footer-name{
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.ecbase-footer-name a,
.ecbase-footer-name a:hover{
    color: var(--ecbase-color-footer-text);
    text-decoration: none;
}
.ecbase-footer-nav{
    margin-top: 14px;
}
.ecbase-footer-menu-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
}
.ecbase-footer-menu-list li{
    margin: 0;
}
.ecbase-footer-menu-list a{
    font-size: 13px;
    color: var(--ecbase-color-footer-text);
    text-decoration: none;
}
.ecbase-footer-menu-list a:hover{
    color: #fff;
    text-decoration: underline;
}
@media (max-width: 921px){
    .ecbase-footer{
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    }
    .ecbase-footer-name{
        font-size: 13px;
    }
    .ecbase-footer-nav{
        display: none;
    }
}

/* ===== スマホのハンバーガーメニュー：末尾のショップ情報リンク（特商法・規約など） ===== */
.ast-mobile-header-content .ecbase-menu-sub > .menu-link,
.ast-mobile-popup-content .ecbase-menu-sub > .menu-link{
    font-size: 12px !important;
    line-height: 40px !important;
    color: #666 !important;
}
.ast-mobile-header-content .ecbase-menu-sub-first,
.ast-mobile-popup-content .ecbase-menu-sub-first{
    border-top: 6px solid var(--ecbase-color-surface) !important;
}

/* ===== トップページ・共通の見出し ===== */
.ecbase-section-title{
    margin: 0 0 28px;
    text-align: center;
    font-size: 24px;
    color: var(--ecbase-color-text-strong);
}
.ecbase-section-title::after{
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin: 10px auto 0;
    background: var(--ecbase-color-primary);
}
/* 「すべての商品を見る」：文字リンクではなく押しやすい枠ボタン */
.ecbase-section-more{
    margin: 24px 0 0;
    text-align: center;
}
.ecbase-section-more a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    min-height: 44px;
    padding: 8px 24px;
    border: 1px solid var(--ecbase-color-primary);
    border-radius: 999px;
    color: var(--ecbase-color-primary);
    font-weight: 700;
    text-decoration: none;
    background: #fff;
}
.ecbase-section-more a::after{
    content: "\203A";
    margin-left: 10px;
    font-size: 1.3em;
    line-height: 1;
}
.ecbase-section-more a:hover{
    background: var(--ecbase-color-primary);
    color: #fff;
}

/* ===== トップ：ヒーロー（キャッチ＋商品カルーセル） ===== */
.ecb-hero{
    background: var(--ecbase-color-surface);
    padding: 28px 0 20px;
}
.ecb-hero-catch{
    max-width: 1100px;
    margin: 0 auto 16px;
    padding: 0 20px;
    text-align: center;
    color: var(--ecbase-color-text-strong);
}
.ecb-hero-welcome{
    display: block;
    font-size: 14px;
    color: var(--ecbase-color-primary-dark);
    font-weight: 700;
}
.ecb-hero-copy{
    display: block;
    margin-top: 4px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
}
.ecb-carousel{
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.ecb-carousel-track{
    position: relative;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 0 8px;
    overscroll-behavior-x: contain;
}
.ecb-carousel-track::-webkit-scrollbar{
    display: none;
}
.ecb-slide{
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    color: var(--ecbase-color-text-strong);
    text-decoration: none;
}
.ecb-slide:hover{
    color: var(--ecbase-color-text-strong);
}
.ecb-slide-ph{
    display: block;
    aspect-ratio: 1 / 1;
    max-height: 420px;
    background: #fff;
}
.ecb-slide-ph img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ecb-slide-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 32px 40px;
}
.ecb-slide-label{
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--ecbase-color-primary);
    border-radius: 999px;
    padding: 2px 12px;
}
.ecb-slide-name{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}
.ecb-slide-price{
    font-size: 22px;
    font-weight: 700;
    color: var(--ecbase-color-primary-dark);
}
.ecb-slide-btn{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--ecbase-color-primary);
    color: #fff;
    font-weight: 700;
}
.ecb-carousel-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ecbase-color-text-strong);
    font-size: 28px;
    line-height: 44px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.ecb-carousel-prev{ left: 0; }
.ecb-carousel-next{ right: 0; }
.ecb-carousel-nav:hover,
.ecb-carousel-nav:focus{
    background: #fff;
    color: var(--ecbase-color-primary);
}
.ecb-carousel-dots{
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 6px;
}
/* ドットは見た目8px・押せる範囲は24px角 */
.ecb-carousel-dot{
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}
.ecb-carousel-dot::before{
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
}
.ecb-carousel-dot.is-active::before{
    background: var(--ecbase-color-primary);
}
.ecb-carousel.is-single .ecb-carousel-nav,
.ecb-carousel.is-single .ecb-carousel-dots{
    display: none;
}

/* ===== トップ：新着商品 ===== */
.ecb-new{
    padding: 48px 0;
    background: #fff;
}
/* トップページ文脈ではAstraがブログ記事用の区切り線を商品カードに付けるので消す */
.ecb-new li.product{
    border-bottom: 0;
}
/* 枠が一覧ページより狭く、既定の余白(28px)だとボタン文言が2行に折れる */
.ecb-new a.button{
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
}

/* ===== トップ：当店のこだわり（3点） ===== */
.ecb-points{
    padding: 48px 0;
    background: var(--ecbase-color-surface);
}
.ecb-points-lead{
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}
.ecb-points-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.ecb-points-list li{
    margin: 0;
    padding: 24px;
    background: #fff;
    border-radius: 14px;
    text-align: center;
}
.ecb-points-list img{
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto 12px;
}
.ecb-points-list b{
    display: block;
    font-size: 18px;
    color: var(--ecbase-color-text-strong);
    margin-bottom: 6px;
}
.ecb-points-list span{
    display: block;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

/* PC幅（769px以上）は1枚ずつ大きく。スマホは下の「スマホのコンパクト化」で縦型の小さいカードにする */
@media (max-width: 768px){
    .ecb-carousel-nav{
        display: none;
    }
}

/* ----------------------------------------------------------------------
　表示・非表示設定
------------------------------------------------------------------------*/
/* PC版非表示設定 */
.is-pc {
    display: block !important;
}

.is-sp {
    display: none !important;
}

/* SP版非表示設定 */
@media screen and (max-width: 768px) {
    .is-pc {
        display: none !important;
    }

    .is-sp {
        display: block !important;
    }
}

/* ----------------------------------------------------------------------
 margin - 余白
---------------------------------------------------------------------- */
.u-mt-xxsmall {
    margin: 5px 0 0;
}

.u-mt-xsmall {
    margin: 10px 0 0;
}

.u-mt-small {
    margin: 20px 0 0;
}

.u-mt {
    margin: 30px 0 0;
}

.u-mt-large {
    margin: 40px 0 0;
}

.u-mt-xlarge {
    margin: 50px 0 0;
}

.u-mt-xxlarge {
    margin: 60px 0 0;
}

.u-mr-xsmall {
    margin: 0 10px 0 0;
}

.u-mr-small {
    margin: 0 20px 0 0;
}

.u-mr {
    margin: 0 30px 0 0;
}

.u-mr-large {
    margin: 0 40px 0 0;
}

.u-mr-xlarge {
    margin: 0 50px 0 0;
}

.u-mb-xsmall {
    margin: 0 0 10px 0;
}

.u-mb-small {
    margin: 0 0 20px 0;
}

.u-mb {
    margin: 0 0 30px 0;
}

.u-mb-large {
    margin: 0 0 40px 0;
}

.u-mb-xlarge {
    margin: 0 0 50px 0;
}

.u-ml-xsmall {
    margin: 0 0 0 10px;
}

.u-ml-small {
    margin: 0 0 0 20px;
}

.u-ml {
    margin: 0 0 0 30px;
}

.u-ml-large {
    margin: 0 0 0 40px;
}

.u-ml-xlarge {
    margin: 0 0 0 50px;
}

/* ----------------------------------------------------------------------
   text-align - 配置
  ---------------------------------------------------------------------- */
.align_c {
    text-align: center;
}

.align_r {
    text-align: right;
}

.align_l {
    text-align: left;
}

.txt12 {
    font-size: 12px;
}

.txt13 {
    font-size: 13px;
}

.txt14 {
    font-size: 14px;
}

.txt15 {
    font-size: 15px;
}

.txt16 {
    font-size: 16px;
}

.txt18 {
    font-size: 18px;
}

.txt20 {
    font-size: 20px;
}

.txt22 {
    font-size: 22px;
}

.txt24 {
    font-size: 24px;
}

.txt26 {
    font-size: 26px;
}

.txt28 {
    font-size: 28px;
}

.txt30 {
    font-size: 30px;
}

.txt32 {
    font-size: 32px;
}

.txt34 {
    font-size: 34px;
}

.txt36 {
    font-size: 36px;
}

.txt38 {
    font-size: 38px;
}

.txt40 {
    font-size: 40px;
}

.text-bd{
    font-weight: bold;
}

.flo_l {
    float: left;
}

.flo_r {
    float: right;
}

.cboth {
    clear: both; 
}

.red {
    color: var(--ecbase-color-danger);
}

a {
    color: var(--ecbase-color-primary);
    text-decoration: var(--proteo-general_link_decoration, underline);
}

/* 本文中のリンクだけ下線を残し、サイト名・商品名・ボタン・パンくず等のUI要素からは外す */
.site-title a,
.woocommerce-breadcrumb a,
a.button,
a.ast-on-card-button,
a.woocommerce-LoopProduct-link,
a.ast-loop-product__link,
.ecbase-footer-menu-list a {
    text-decoration: none;
}
a.ast-loop-product__link:hover,
.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

body,
button,
optgroup,
body.yith-woocompare-popup {
    color: var(--proteo-base_font_color, var(--ecbase-color-text));
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: var(--proteo-base_font_size, 16);
    line-height: 1.7;
}

.alignfull {
    /*margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);*/
    width: auto;
    max-width: 1140px;
    margin: 0 auto;
}

.alignwide {
    /*margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);*/
    width: auto;
    max-width: 1140px;
    margin: 0 auto;
}

.site-header:not(.sticky) {
    margin: 0 auto;
    padding: 0px !important;
    left: 0;
    right: 0;
    /*max-width: 1140px;*/
    z-index: 1000;
}

/*.site-content{
    padding-top: 0 !important;  
}*/
.content-area{
    margin: 0 auto 0 0;
    padding: 0;
    width: 75%;
}

@media screen and (max-width: 991px) {
    .content-area{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    }
}

.top-sidearea{
    margin: 0;
    padding: 0;
    width: 23%;
    text-align: left;
    border: 1px solid var(--ecbase-color-primary);
    border-radius: 8px;
    box-sizing:border-box;
    height: fit-content;
    display: block;
}

@media screen and (max-width: 1160px) {
    .top-sidearea{
        margin: 0 15px 0 0;
        padding: 0;
        width: 21%;
        text-align: left;
        border: 1px solid var(--ecbase-color-primary);
        border-radius: 8px;
        box-sizing:border-box;
        height: fit-content;
        display: block;
    }
}

.top-sidearea .widget,
.top-sidearea ul{
    margin-bottom: 0 !important;
    padding: 0;
}
.top-sidearea ul li{
    margin: 0;
    padding: 10px;
    text-align: left;
    border-bottom:1px solid var(--ecbase-color-primary);
    font-size: 15px;
    font-weight: 400;
}

.top-sidearea ul li:last-child {
    margin: 0;
    padding: 10px;
    text-align: left;
    border-bottom: 0px solid var(--ecbase-color-primary);
    font-size: 15px;
    font-weight: 400;
}

.top-sidearea ul li a:hover{
    color: var(--ecbase-color-primary);
    text-decoration: none;
}


#primary-menu li {
    width: 14.0%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.site-branding{
    width: 100px !important;
    margin: 0;
    padding: 0;
}

.main-navigation{
        display: table-cell;
        width: 900px !important;
        float: none;
        vertical-align: middle;
    }

#primary-menu li img {
    width: 40%;
}

#primary-menu li .menu-image-title {
    font-size: 12px;
    letter-spacing: 0;
    margin: -10px 0 0;
}

.site-header .header-sidebar {
    text-align: right;
    clear: both;
    width: 200px !important;
    padding: 10px 0 0 !important;
}

.site-header .header-contents {
    position: relative;
    transition: all ease 0.3s;
    padding: 0 0 20px !important;
    color: var(--proteo-header_menu_color, var(--ecbase-color-text));
    /*padding: var(--proteo-header_spacing);*/ }


h2.top-heading-01{
    margin: 0;
    padding: 10px 5px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    border-top: 5px solid var(--ecbase-color-accent);
    border-bottom: 5px solid var(--ecbase-color-accent);
    background: var(--ecbase-color-primary);
    color: #fff;
}

ul.top-banner-area{
    margin: 30px 0 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    list-style: none;
}

ul.top-banner-area li{
    margin: 0;
    padding:10px 15px 15px;
    width: 32%;
    border: 1px solid var(--ecbase-color-primary);
    box-sizing: border-box;
}

ul.top-banner-area li .banner-img{
    margin: 0 auto;
    padding: 0;
    width: 60%;
}

ul.top-banner-area li .banner-img img{
    width: 100%;
    height: auto;
}

ul.top-banner-area li .banner-heading{
    margin: 0;
    text-align: center;
    color:var(--ecbase-color-primary);
    font-size: 18px;
    font-weight: bold;
}

ul.top-banner-area li .banner-text{
    margin: 0;
    text-align: center;
    font-size: 15px;
}

ul.top-box {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.top-box li{
    margin: 50px 0 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

ul.top-box li .textarea{
    margin: 0;
    padding: 0;
    text-align: left;
    width: 70%;
}

ul.top-box li .textarea .heading{
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: bold;
    color: var(--ecbase-color-primary);
}

ul.top-box li .textarea .text {
    margin: 5px 0 0;
    padding: 0;
    font-size: 14px;

}

ul.top-box li .imgarea {
    margin: 0;
    padding: 0;
    width: 25%;
}

ul.top-box li .imgarea img{
    width: 100%;
    height: auto;
}

.button01 a {
    background: #fff;
    border: 2px solid var(--ecbase-color-primary);
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto 0 0;
    max-width: 400px;
    padding: 10px 25px;
    color: var(--ecbase-color-primary);
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.button01 a:hover {
    background: var(--ecbase-color-primary);
    color: #FFF;
}

.button01 a:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid var(--ecbase-color-primary);
    border-right: 3px solid var(--ecbase-color-primary);
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 47%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.button01 a:hover:after {
    border-color: #FFF;
}

#main-footer .footer-sidebars{
    padding-top: 30px;
}

#main-footer .site-info{
    display: none;
}

.footer-sidebar-2 ul li a{
    font-size: 14px;
    margin: 0;
    padding: 0;
}

#main-footer div[class^=footer-sidebar] {
    padding-bottom: 0px; 
}

header.entry-header .woocommerce-breadcrumb {
    text-align: inherit;
    margin-bottom: 35px;
    text-align: left;
}

#secondary .widget{
    margin: 0 0 20px;
    padding: 0;
    width: 100%;
    text-align: left;
    border: 1px solid var(--ecbase-color-primary);
    border-radius: 8px;
    box-sizing:border-box;
    height: fit-content;
    display: block;
}

#secondary .widget ul {
    padding: 0;
    list-style-type: none;
    margin: 0 !important;
}

#secondary .widget ul li {
    margin: 0;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--ecbase-color-primary);
    font-size: 15px;
    font-weight: 400;
}

#secondary .widget ul li:last-child {
    margin: 0;
    padding: 10px;
    text-align: left;
    border-bottom: 0px solid var(--ecbase-color-primary);
    font-size: 15px;
    font-weight: 400;
}

#secondary .widget ul li a:hover {
    color: var(--ecbase-color-primary);
    text-decoration: none;
}

@media (min-width: 1600px) {
    .container,
    .wp-block-cover-image .wp-block-cover__inner-container,
    .wp-block-cover .wp-block-cover__inner-container,
    .wp-block-group__inner-container {
        max-width: 1140px;
    }
}

/*サイドウィジェット　タイトルサイズ調整*/
div h2.widget-title {
    font-family: Noto Sans JP, sans-serif;
    font-weight: 400 !important;
    font-style: normal;
    margin: 10px auto;
    text-align: center;
    font-size: 18px;
    font-weight: 700 !important;
}

div h3.widget-title {
    font-family: Noto Sans JP, sans-serif;
    font-weight: 400 !important;
    font-style: normal;
    margin: 10px auto;
    text-align: center;
    font-size: 20px;
}

/*商品ページ一覧　ボタンテキストサイズ調整*/
.button-style-1:not(.wp-block-button){
    font-size: 14px;
}

/*商品ページ一覧　ボタンテキストサイズ調整*/
ul.products li.product .add_to_cart_button,
ul.products li.product .added_to_cart{
    font-size: 14px;
}

/*商品ページ詳細　テキストエリア余白調整*/
.single-product div.product .summary.entry-summary {
    width: 60%;
    float: left;
    display: inline-block;
    padding-left: 30px;
    padding-right: 10px;
}

/* スマホは画像と説明文の左端をそろえる（PCの左右余白を持ち込まない） */
@media (max-width: 544px) {
    .single-product div.product .summary.entry-summary {
        width: 100%;
        float: none;
        padding-left: 0;
        padding-right: 0;
    }
    /* 「説明」「レビュー」タブを縦積みにせず横に並べる
       （Astraが #content 付きの詳細度で block にしているため、同じ詳細度で上書き） */
    .woocommerce #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        display: inline-block;
        margin-right: 20px;
    }
}

/* 商品一覧（2列）のカートボタン：スマホで文字が2行に割れないよう列幅いっぱい＋1行に。
   高さは指で押しやすい44px。 */
@media (max-width: 544px) {
    .woocommerce ul.products li.product .button {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 12px 4px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }
}

/* 商品一覧の見出しを固定ページの見出し（太字）とそろえる */
.woocommerce-products-header .page-title {
    font-weight: 700;
}

/* 固定ページ本文のグループブロック：背景色のないグループにAstraが付ける左右の余白を消す。
   返金・返品ポリシー等で見出しだけ字下げされたように見えていた。 */
.entry-content .wp-block-group:not(.has-background) {
    padding: 0;
}

/* 特商法・運営者情報の表：スマホは見出しと内容を上下に積む。
   横並びのままだと見出し列が細く「ショップ名」が2行に割れる。 */
@media (max-width: 544px) {
    .entry-content .wp-block-table th,
    .entry-content .wp-block-table td,
    table.table-company th,
    table.table-company td {
        display: block;
        width: 100%;
        white-space: normal;
    }
    .entry-content .wp-block-table th,
    table.table-company th {
        background: var(--ecbase-color-primary-tint);
        border-bottom: 0;
        text-align: left;
    }
}

.site-header.left_logo_navigation_inline .header-contents {
    display: table;
    border-radius: 0 0 20px 20px;
    padding: 10px !important;
    box-shadow: 0px 0px 4px var(--ecbase-color-secondary);
    background: #fff;
}

.site-header.sticky {
    position: fixed;
    width: 100vw;
    box-shadow: -2px 2px 0px -27px rgba(0, 0, 0, 0); 
    z-index: 200;
    background-color: transparent !important;
}

.home .content-area {
    margin: 0 auto 0 0;
    padding: 0;
    width: 100%;
}

.home .content-area .site-main .main-v{
    margin: 20px 0 0;
    padding: 0;
    width: 100%;
    position: relative;
}

.home .content-area .site-main .main-v img{
width: 100%;
height: auto;
}

/*  2025.11　　修正*/

.maincatch-area{
    margin: 0;
    padding: 20px 30px 20px 50px;
    background: rgba(170, 196, 108, 0.9);
    font-size: 34px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    min-width: 50%;
    /* 右側の絵（ギフト箱は画面幅の約6割の位置から）に被らない幅で折り返す */
    max-width: 58%;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: 0;
    top: 38%;
    line-height: 1.5;
    border-radius: 0 20px 20px 0;
}
/* スマホはキャッチを絵に重ねず、絵の下に帯として置く。
   重ねると画面幅が狭いぶん絵の主役（バッグ）がほぼ隠れてしまうため。 */
@media screen and (max-width: 768px){
    .maincatch-area{
    margin: 0;
    padding: 20px;
    background: rgba(170, 196, 108, 0.95);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    display: block;
    position: static;
    line-height: 1.5;
    border-radius: 0;
    width: 100%;
    max-width: none;
}
}

.main-catch{
    font-size: 40px;
}
@media screen and (max-width: 768px) {
.main-catch{
    font-size: 22px;
}
}

.top-contents-main{
    margin: 0;
    padding: 0;
    width: 100%;
    color: var(--ecbase-color-text-strong);
    line-height: 1.8;
    box-sizing: border-box;
}

@media (min-width: 922px) {
        body.home .site-content .ast-container {
        display: block;
        }
    body.home .site-content .ast-container {
        max-width: 100%;
        padding: 0;
    }
}

.main-visual{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 640px;
    background: url(images/img-hero.svg?v=2) no-repeat;
    background-position: center bottom;
    background-size: cover;
    position: relative;

}

/* ※ .main-visual（イラスト）は公開商品が0件のサイトでだけ出る代替のメインビジュアル。
   商品があればトップの先頭は商品カルーセル（.ecb-hero）になる。
   スマホは上に絵（右半分のバッグとギフトを拡大）、下にキャッチの帯。 */
@media screen and (max-width: 768px) {
.main-visual{
    margin: 0;
    padding: 330px 0 0;
    width: 100%;
    height: auto;
    background: #fbf3ee url(images/img-hero.svg?v=2) no-repeat;
    background-position: right -70px;
    background-size: auto 440px;
    position: relative;
}
}

.site-jigyou{
    margin: 5px 10px 0 0;
    padding: 0;
    text-align: right;
    font-size: 12px;
}

.page-base{
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}

@media screen and (max-width: 768px) {
.page-base{
    margin: 0 auto;
    padding: 0;
    width: 90%;
}
}

.page-c03{
    background: linear-gradient(156deg, var(--ecbase-color-primary), var(--ecbase-color-primary-dark));
    background-size: cover;
    position: relative;
    height: 100%;
}

.page-c03-inbox{
    margin: 0 auto;
    padding: 70px 0;
    max-width: 1000px;
    text-align: left;
    font-size: 18px;
    color: #fff;
}

@media screen and (max-width: 768px) {
.page-c03{
    background: linear-gradient(156deg, var(--ecbase-color-primary), var(--ecbase-color-primary-dark));
    background-size: cover;
    position: relative;
    height: 100%;
}

.page-c03-inbox{
    margin: 0 auto;
    padding: 40px 0;
    width: 90%;
    text-align: left;
    font-size: 16px;
    color: #fff;
}
}

a.button-01 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 20px auto 0;
    padding: 10px 50px;
    border: 1px solid #fff;
    border-radius: 30px;
    background-color:transparent;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    width: 600px;
    box-sizing: border-box;
}

a.button-01::after {
    position: absolute;
    right: 2em;
    transform: translateY(-50%);
    transform-origin: left;
    width: 2em;
    height: .5em;
    background-color: #fff;
    clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
    content: '';
    transition: transform .3s;
}

.button-01:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
}

.button-01:hover::after {
    transform: translateY(-50%) scaleX(1.4);
}

@media screen and (max-width: 768px) {
a.button-01 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 20px auto 0;
    padding: 10px 20px;
    border: 1px solid #fff;
    border-radius: 30px;
    background-color:transparent;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    width: 96%;
    box-sizing: border-box;
}

a.button-01::after {
    display: none;
}
}

/*　フッターメニュー*/
#astra-footer-menu li a{
    color: #000 !important;
    text-decoration: none;
    font-size: 13px;
    margin: 0 10px;
}

#astra-footer-menu li a:hover {
    color: var(--ecbase-color-secondary) !important;
}

@media screen and (max-width: 768px) {
#astra-footer-menu li{
    margin: 0 0 10px;
}

#astra-footer-menu li a{
    color: var(--ecbase-color-secondary) !important;
    text-decoration: none;
    font-size: 15px;
}

#astra-footer-menu li a:hover {
    color: var(--ecbase-color-secondary-light) !important;
}


}
/* 商品ウィジェット（widget_products）: サムネイル画像と商品名・価格の重なりを修正。
   画像が position:absolute; left:0; 幅60px のため、li に左ガター(72px)を設けて
   テキストが画像に重ならないようにする。テーマ側の padding 指定を上書きするため
   詳細度を上げ !important を付与している。 */
.widget.widget_products ul.product_list_widget li {
    padding-left: 72px !important;
}

/* ============================================================================
   マイページ（woocommerce/myaccount/dashboard.php の入口タイル＋最近のご注文）
   ============================================================================ */
.ecbase-mypage-hello{
    margin: 0 0 16px;
    font-size: 15px;
}
.ecbase-mypage-hello strong{
    font-size: 20px;
    color: var(--ecbase-color-text-strong);
    margin-right: 2px;
}
.ecbase-mypage-tiles{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}
.ecbase-mypage-tile{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 112px;
    padding: 14px 8px;
    border: 1px solid #e6e1da;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    color: var(--ecbase-color-text-strong);
    text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.ecbase-mypage-tile:hover,
.ecbase-mypage-tile:focus{
    border-color: var(--ecbase-color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: var(--ecbase-color-text-strong);
}
.ecbase-mypage-tile svg{
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    color: var(--ecbase-color-primary);
}
.ecbase-mypage-tile b{
    font-size: 15px;
    line-height: 1.4;
}
.ecbase-mypage-tile small{
    font-size: 12px;
    line-height: 1.4;
    color: #777;
}
@media (min-width: 1100px){
    .ecbase-mypage-tiles{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.ecbase-mypage-recent{
    margin: 0 0 24px;
}
.ecbase-mypage-h{
    margin: 0 0 4px;
    padding: 0 0 8px;
    font-size: 17px;
    border-bottom: 2px solid var(--ecbase-color-primary);
}
.ecbase-mypage-orders{
    list-style: none;
    margin: 0;
    padding: 0;
}
.ecbase-mypage-orders li{
    margin: 0;
    border-bottom: 1px solid #eee;
}
.ecbase-mypage-orders a{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 12px 4px;
    color: var(--ecbase-color-text);
    text-decoration: none !important;
}
.ecbase-mypage-orders a:hover{
    background: var(--ecbase-color-surface);
}
.ecbase-mypage-order-no{
    font-weight: 700;
    color: var(--ecbase-color-text-strong);
}
.ecbase-mypage-order-status{
    justify-self: end;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--ecbase-color-surface);
    color: var(--ecbase-color-primary-dark);
    font-size: 12px;
    font-weight: 700;
}
.ecbase-mypage-order-date{
    font-size: 13px;
    color: #777;
}
.ecbase-mypage-order-total{
    justify-self: end;
    font-weight: 700;
}
.ecbase-mypage-more{
    margin: 8px 0 0;
    text-align: right;
    font-size: 14px;
}
.ecbase-mypage-empty{
    margin: 12px 0 0;
    color: #777;
}
.ecbase-mypage-logout{
    margin: 0;
    text-align: center;
    font-size: 14px;
}
.ecbase-mypage-logout a,
.ecbase-mypage-more a,
.ecbase-mypage-back a{
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    text-decoration: none;
}
.ecbase-mypage-back{
    margin: 0 0 8px;
    font-size: 14px;
}
/* スマホ：WooCommerceの左メニュー（6項目の縦リスト）は出さず、TOPのタイルと各画面の「戻る」で移動する */
@media (max-width: 921px){
    .woocommerce-account .woocommerce-MyAccount-navigation{
        display: none;
    }
    .woocommerce-account .woocommerce-MyAccount-content{
        width: 100%;
        float: none;
        margin: 0;
        padding: 0;
    }
}
@media (min-width: 922px){
    .ecbase-mypage-back{
        display: none;
    }
}

/* お問い合わせフォーム（CF7）：PCで入力欄が横に伸びすぎないように */
.wpcf7{
    max-width: 720px;
}

/* ============================================================================
   スマホのコンパクト化
   ----------------------------------------------------------------------------
   区切りは余白ではなく背景色（ヘッダー・フッター・セクション）で付けるので、余白は詰めてよい。
   ただし使いやすさの下限は守る：
     ・押す場所（ボタン・リンクの行）は高さ44px前後を確保（文字を小さくしても押せる範囲は狭めない）
     ・入力欄の文字は16px（iOSでフォーカス時に画面が勝手に拡大されるのを防ぐ）
   ============================================================================ */
@media (max-width: 921px){
    /* 左右の余白 20→14px（ヘッダーのロゴ位置も common-style.css で14pxにそろえている） */
    body:not(.home) .site-content > .ast-container{
        padding: 12px 14px 0 !important;
    }
    .page-base{
        width: auto;
        padding: 0 14px;
    }
    .site-content .site-main,
    .ast-plain-container.ast-no-sidebar #primary{
        margin-top: 0;
        margin-bottom: 24px;
    }
}

@media (max-width: 544px){
    /* --- 文字 --- */
    body{
        font-size: 14px;
        line-height: 1.65;
    }
    .woocommerce-breadcrumb{
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }
    .entry-title,
    .woocommerce-products-header__title.page-title,
    .entry-header .entry-title{
        font-size: 20px !important;
        line-height: 1.35;
        margin-bottom: 10px !important;
    }
    .entry-content h2,
    .woocommerce h2{
        font-size: 17px;
        line-height: 1.4;
        margin: 20px 0 8px;
    }
    .entry-content h3,
    .woocommerce h3{
        font-size: 15px;
        line-height: 1.4;
        margin: 16px 0 6px;
    }
    .entry-content p,
    .woocommerce div.product .woocommerce-tabs .panel p{
        margin-bottom: 12px;
    }
    .entry-content ul,
    .entry-content ol{
        margin-bottom: 12px;
    }
    /* 入力欄は16pxのまま（iOSの自動ズーム防止）。高さは44px */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea{
        font-size: 16px !important;
    }
    .woocommerce form .form-row label,
    .wpcf7 label{
        font-size: 13px;
    }
    .woocommerce form .form-row{
        margin-bottom: 10px;
    }

    /* --- 見出し（トップ・共通） --- */
    .ecbase-section-title{
        font-size: 18px;
        margin-bottom: 14px;
    }
    .ecbase-section-title::after{
        width: 32px;
        margin-top: 6px;
    }
    .ecbase-section-more{
        margin-top: 16px;
    }
    .ecbase-section-more a{
        display: flex;
        min-width: 0;
        font-size: 14px;
    }

    /* --- トップ：ヒーロー（カルーセル） ---
       1枚を画面幅の82%にして次の商品をのぞかせる＝横にめくれることが見て分かる */
    .ecb-hero{
        padding: 12px 0 4px;
    }
    .ecb-hero-catch{
        margin-bottom: 10px;
        padding: 0 14px;
    }
    .ecb-hero-welcome{
        font-size: 11px;
    }
    .ecb-hero-copy{
        font-size: 16px;
        margin-top: 2px;
    }
    .ecb-carousel{
        padding: 0;
    }
    .ecb-carousel-track{
        gap: 10px;
        padding: 2px 14px 6px;
        scroll-padding: 0 14px;
    }
    .ecb-slide{
        flex-basis: 82%;
        grid-template-columns: 1fr;
        border-radius: 12px;
    }
    .ecb-slide-ph{
        aspect-ratio: 4 / 3;
    }
    .ecb-slide-body{
        gap: 2px;
        padding: 8px 12px 10px;
    }
    .ecb-slide-label{
        font-size: 10px;
        padding: 0 8px;
    }
    .ecb-slide-name{
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ecb-slide-price{
        font-size: 15px;
    }
    /* カード全体が押せるので「商品を見る」ボタンは省略（縦を節約） */
    .ecb-slide-btn{
        display: none;
    }
    .ecb-carousel-dots{
        margin-top: 0;
    }

    /* --- トップ：新着・こだわり・CTA --- */
    .ecb-new{
        padding: 20px 0 24px;
    }
    .ecb-points{
        padding: 20px 0 24px;
    }
    .ecb-points-lead{
        font-size: 13px;
        margin-bottom: 12px;
        text-align: left;
    }
    .ecb-points-list{
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ecb-points-list li{
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 12px;
        align-items: center;
        padding: 12px;
        text-align: left;
        border-radius: 10px;
    }
    .ecb-points-list img{
        width: 52px;
        height: 52px;
        margin: 0;
    }
    .ecb-points-list b{
        font-size: 14px;
        margin-bottom: 2px;
    }
    .ecb-points-list span{
        font-size: 12px;
        line-height: 1.6;
    }
    .page-c03-inbox{
        padding: 22px 0;
        width: auto;
        margin: 0 14px;
        font-size: 13px;
    }
    .page-c03-inbox .txt24{
        font-size: 17px;
    }
    a.button-01{
        min-height: 44px;
        margin-top: 14px;
        padding: 8px 20px;
        font-size: 15px;
    }

    /* --- 商品一覧（2列） --- */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product{
        margin-bottom: 18px;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title{
        font-size: 13px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 2px;
    }
    .woocommerce ul.products li.product .price{
        font-size: 14px;
        margin-bottom: 6px;
    }
    .woocommerce-result-count{
        font-size: 12px;
        margin: 4px 0 8px !important;
    }
    .woocommerce-ordering{
        margin-bottom: 12px !important;
    }

    /* --- 商品詳細 --- */
    .single-product div.product .woocommerce-product-gallery{
        margin-bottom: 12px;
    }
    .single-product div.product .product_title{
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 6px;
    }
    .single-product div.product p.price,
    .single-product div.product span.price{
        font-size: 18px;
        margin-bottom: 10px;
    }
    .single-product div.product form.cart{
        margin-bottom: 12px;
    }
    .single-product div.product form.cart .button,
    .single-product div.product form.cart .qty{
        min-height: 44px;
    }
    .woocommerce div.product .woocommerce-tabs{
        margin-top: 8px;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs{
        margin-bottom: 10px;
    }

    /* --- ログイン・会員登録・クーポン等の枠 --- */
    .woocommerce form.login,
    .woocommerce form.register,
    .woocommerce form.checkout_coupon,
    .woocommerce form.lost_reset_password{
        padding: 14px !important;
        margin: 6px 0 16px !important;
    }
    .woocommerce-account .woocommerce h2{
        margin-top: 4px;
    }

    /* --- 本文のグループブロック（返金・返品ポリシー等）：見出しの前を空け、見出しと本文の間は詰める --- */
    .entry-content > .wp-block-group{
        margin-top: 22px;
    }
    .entry-content .is-layout-constrained > * + *{
        margin-block-start: 8px;
    }

    /* --- よくあるご質問（Ultimate FAQs）：質問文18px太字・記号が大きく1問で2〜3行になっていた --- */
    .ewd-ufaq-faq-title-text h4{
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    .ewd-ufaq-post-margin-symbol{
        font-size: 18px !important;
    }
    .ewd-ufaq-faq-title .ewd-ufaq-post-margin{
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* --- お問い合わせ（CF7） --- */
    .wpcf7 p{
        margin: 0 0 6px;
    }
    .wpcf7 textarea{
        height: 160px;
    }

    /* --- 表（特商法・運営者情報）：見出しと内容を上下に積んだうえで詰める --- */
    .entry-content .wp-block-table th,
    .entry-content .wp-block-table td,
    table.table-company th,
    table.table-company td{
        padding: 6px 10px;
        font-size: 13px;
    }

    /* --- 商品詳細：商品コードと「説明」タブの間（Astraは 2em＋2em 空ける） --- */
    .woocommerce-js div.product div.summary{
        margin-bottom: 8px;
    }
    .woocommerce-js div.product .woocommerce-tabs{
        padding-top: 12px;
        margin-bottom: 16px;
    }

    /* --- 購入手続き --- */
    .woocommerce-checkout h3{
        margin-top: 12px;
    }

    /* --- マイページ --- */
    .ecbase-mypage-hello{
        margin-bottom: 12px;
    }
    .ecbase-mypage-hello strong{
        font-size: 17px;
    }
    .ecbase-mypage-tiles{
        gap: 8px;
        margin-bottom: 20px;
    }
    .ecbase-mypage-tile{
        min-height: 92px;
        padding: 10px 6px;
    }
    .ecbase-mypage-tile svg{
        width: 26px;
        height: 26px;
        margin-bottom: 2px;
    }
    .ecbase-mypage-tile b{
        font-size: 14px;
    }
    .ecbase-mypage-tile small{
        font-size: 11px;
    }
    .ecbase-mypage-h{
        font-size: 15px;
    }
}