/*
 Theme Name: Terui Online
 Text Domain: terui-online
 Version: 0.1.0
*/



/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
/*----- RESET CSS END -----*/




html, body {
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", /* macOS */
    "Yu Gothic UI", "Yu Gothic",                  /* Windows */
    Meiryo,                                       /* Windows */
    "MS PGothic",                                 /* 古めのWin */
    sans-serif;
}




/*:root { --container: 1120px; --gap: 24px; }*/

.container { 
    max-width: var(--container-w);
    width: 92%;
    margin: 0 auto;
}

/*.container--narrow { max-width: 800px; }*/

/*----- モバイルファーストで作成していく -----*/
:root {
    --header-h: 60px;
    --container-w: 1200px;
    --pad: 16px;
    --gap: 12px;
    --radius: 12px;
    --border: 1px solid rgba(0,0,0,.08);
    --bg: #fff;
    /*--ink: #111;*/
    --ink-weak: #666;
    --brand: #2563eb;           /* 青系 */
    --ink:   #111827; 
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0f1115;
    --ink: #f5f6f8;
    --ink-weak: #a9b0bc;
    --border: 1px solid rgba(255,255,255,.08);
  }
}

/*.container {
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--pad);
}*/




/* ===== モバイル（デフォルト） ===== */

/*----- site-headr.php START -----*/
.site-header {
    background-color: rgba(255, 255, 255, 0.7);
    border-bottom: var(--border);
    backdrop-filter: saturate(1.2) blur(1px); /* 背面のぼかしや彩度を設定 */
    position: fixed;
    width: 100%;
    z-index: 100;
}


/*===== gridは素晴らしい!!! =====*/
/* コンテナで構造を定義、装飾はパーツごとに行うというreact的?設計!!! */
.site-header__row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo actions"
    "search search";
  align-items: center;
  gap: 8px 12px;
  padding-block: 8px 10px;
}

.site-header__logo {
  grid-area: logo;
}

.site-header__actions {
  grid-area: actions;
  justify-self: end;
}

.site-header__search {
  grid-area: search;
}

@media (min-width: 1024px) {
  .site-header__row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo search actions";
  }
}
/*===== gridは素晴らしい!!! =====*/



.site-header .site-header__logo {
    width: 120px;
}

.site-header .site-header__logo img {
    vertical-align: bottom:
}

.site-header .site-header__icons a {
    text-decoration: none;
    transition: background .15s ease, transform .08s ease;
}

.site-header .site-header__icons a:hover {
    background: rgba(0,0,0,.04);
    transform: translateY(-3px);
}

@media (prefers-color-scheme: dark) {
    .site-header .site-header__icons a:hover{ 
        background: rgba(255,255,255,.06); }
}

.site-header .site-header__icons {
    display: flex;
    /*gap: 12px;*/
    align-items: center;
}

.site-header .icon-btn {
    width: 44px;
    height: 44px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.site-header .icon-btn img {
    width: 30px;
}

.site-header .icon-btn:nth-child(1) img {
    width: 32px;
}

.site-header .icon-btn:nth-child(4) img {
    width: 26px;
}

.site-header .icon-cart {
    position:  relative;
}

.site-header .cart-badge {
    position: absolute; 
    top: 0px; 
    right: -2px;
    min-width:9px; 
    height: 18px; 
    padding: 0 5px;
    border-radius:999px; 
    font-size: 12px; 
    line-height: 18px;
    background: #e11; 
    color: #fff; 
    text-align: center;
}

/* 視覚的に非表示（スクリーンリーダー向け） */
.site-header .screen-reader-text {
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px;
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    white-space: nowrap; 
    border: 0;
}

/* ラッパー相対配置：ボタンを右端に重ねるため */
.site-header .search-box { 
    position: relative; 
    display: flex; 
    align-items: center; 
}

/* 入力欄：右側にボタン分の余白を確保 */
.site-header .search-box__input {
    width: 100%;
    height: 40px;
    padding-left: 16px; /*----- placeholderの位置を右にずらす -----*/
    border: var(--border);
    border-radius: var(--radius);
    color: var(--ink);
    background: transparent; /*--- 背景の色を透明にして親の色にする ---*/
}

/* 送信ボタン（アイコンのみ） */
.site-header .search-box__submit {
    position: absolute; 
    top: 50%; 
    right: max(15px, 1.5vw); 
    transform: translateY(-50%);
    width: 36px; /*--- クリック範囲を36px確保してiconを真ん中に寄せる ---*/ 
    height: 36px; /*--- クリック範囲を36px確保してiconを真ん中に寄せる ---*/ 
    display: inline-flex; /*--- クリック範囲を確保して上でiconを真ん中に寄せる ---*/ 
    align-items: center; /*--- クリック範囲を確保して上でiconを真ん中に寄せる ---*/ 
    justify-content: center; /*--- クリック範囲を確保して上でiconを真ん中に寄せる ---*/ 
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

/* 大きめのプライマリーボタン */
.site-header .auth__btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;                         /* アイコンと文字の間 */
    min-width: 150px;                 /* ボタンの最低幅 */
    height: 38px;                     /* 高さ */
    padding: 0 16px;                  /* 左右の余白 */
    background-color: #007bff;        /* ブルー背景（お好みのブランドカラーに変更可） */
    color: #fff;                      /* 文字は白 */
    font-weight: 600;
    font-size: 14px;
    border: none;                     /* デフォルトの枠線は消す */
    border-radius: 6px;               /* 角丸 */
    text-decoration: none;            /* 下線消す */
    transition: background 0.2s ease, transform 0.1s ease;
}

.site-header .auth__btn--primary img {
    width: 18px;
    height: 18px;
}

.site-header .auth__btn--primary:hover {
    background-color: #0069d9;        /* hover時に少し濃い青 */
    transform: translateY(-1px);      /* 軽く浮かせる */
}

.site-header .auth__btn--primary:focus-visible {
    outline: 2px solid #fff;          /* フォーカスリング */
    outline-offset: 2px;
}

.site-header__search {
    display:flex;
    align-items:center;
    gap:6px;
}
.site-header__search form {
    flex:4;
}        /* 検索フォームを伸ばす */

/* 検索窓横の絞り込みボタン */
.btn-filter{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:40px;
    border:1px solid #ddd;
    border-radius:10px;
    background:#fff; color:#333;
}

/* SPはPC用サイドバーは非表示（JSフォールバックは後述） */
.to-filterbar{ display:none; }

/* ただしシートの中に移動したときは表示する */
.to-filter-sheet .to-filterbar{ display:block; }

/* フィルターを使用したときにフィルターの高さに合わせて遷移する */
#shop-filters {
  /* #shop-filtersにページ内リンク(#)で遷移してきたときに117px(固定ヘッダー分)だけ上に余白をとる */
  scroll-margin-top: 117px;
} 


/* ===== シート（上からスライド） ===== */
.to-filter-sheet {
  position:fixed;
  inset:0; /* 全体幅・高さまで広がる */
  z-index:1000;
  display:none;
}

.to-filter-sheet.is-open {
  display:block;
}

.to-filter-sheet .sheet-backdrop {
  position:absolute; /* .to-filter-sheet(position: fixed)の範囲を基準に絶対配置される。 */
  inset:0; /* .to-filter-sheetの幅・高さいっぱいまで広がる */
  background:rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .2s ease;
}

.to-filter-sheet.is-open .sheet-backdrop {
  opacity:1;
}

.to-filter-sheet .sheet-panel {
  position:absolute; left:0; right:0; top:0; /* bottomは指定していない点に注目!! */
  background:#fff;
  border-radius:0 0 16px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  transform:translateY(-100%);
  transition:transform .26s cubic-bezier(.2,.6,.6,1);
  max-height:100dvh; /* 100dvhはspでツールバーの表示があった場合は、動的にその分の高さを減算した残りの全画面の高さ */
  display:flex;
  flex-direction:column;
}

.to-filter-sheet.is-open .sheet-panel {
  transform:translateY(0);
}

.sheet-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid #eee;
}

.sheet-header h2 {
  font-size:18px;
  margin:0;
}

.sheet-close {
  font-size:40px;
  line-height:1;
  background:none;
  border:0;
  /*padding:4px;*/
  position: relative;
  top: 0.4px;
  cursor:pointer;
}

.sheet-body {
  max-height:calc(100dvh - 54px);
  overflow:auto; /* max-heightの高さを超えたらスクロールを表示!! */
  padding:12px 16px;
}



/*===== 以下1024px以上と重複して暫定的にcss当ててます!! 11/16 =====*/
/* フィルター枠のベース（既に似たものがあればスキップ） */
.to-filterbar {
  margin-bottom: 1.5rem;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fff;
}

/* 各ウィジェットの区切り */
.to-filterbar .widget_layered_nav {
  padding: .8em;
  border-top: 3px solid #f0f0f4;
}

/* ウィジェット見出し（サイズ／カラーなどの h2） */
.to-filterbar .widget_layered_nav > h2 {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 900;
}

.to-filterbar .widget_layered_nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* liタグ */
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
  padding: 0;
}

/* .to-filter-sheetはモーダル表示用のクラスで、.to-shopとは兄弟要素なので、spは.to-shop->.to-filter-sheetにしている。*/
.to-filter-sheet .to-filterbar .widget_layered_nav a {
  display: inline-flex; /* 疑似要素(before)も横並びになる、また直下の子要素はもともとがinline要素でもblock要素的に振る舞う!! */
  /*align-items: center;*/
  gap: .3em;
  padding: 5px;
  border: 1px solid #e2e2ea;
  border-radius: 5px;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  color: #333;
  transition: background .15s, border-color .15s, color .15s;
}

/* 選択済みのアイコンは色を変える（Woo は li に .chosen が付く） */
.to-filter-sheet .to-filterbar .widget_layered_nav li.chosen a {
  color: #4b2bbd;
  border-color: #cfc7ff;
  background: #f4f1ff;
  font-weight: 700;
}

/* ホバー・フォーカス */
.to-filter-sheet .to-filterbar .widget_layered_nav a:hover,
.to-filter-sheet .to-filterbar .widget_layered_nav a:focus-visible {
  border-color: #b7b7d0;
  background: #fafaff;
  outline: none;
}

.to-filter-sheet .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a::before {
  margin-right: 0; /* デフォルトでつけられている選択済みアイコン疑似要素のmargin-right: .62rem;を消す */
}


/* 色丸はカラーウィジェットにだけ適用 */
/* 選択された時はwooが×ボタンを出力してくれるので表示しない*/
.to-attr--color li:not(.chosen) a::before{
  content:"";
  width:14px; height:14px; /* ::beforeはinline要素だが、親のaタグでdisplay:inline-flex;を指定しているので、block要素的にwidth,heightが指定出来る!! */
  border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  background: transparent;
}

/* こう書けるようになる（クエリ無関係で安定） */
.to-attr--color li:not(.chosen) .term-black::before { background:#000; }
.to-attr--color li:not(.chosen) .term-gray::before { background:#9aa0a6; }
.to-attr--color li:not(.chosen) .term-white::before { background:#fff; }


/* 該当件数は表示しない */
.to-filter-sheet .to-filterbar .widget_layered_nav .count {
  display: none;
}

.to-filterbar .to-filter-clear {
  padding: 20px;
  font-size: 13px;
  /*text-align: center;*/
  border-top: 3px solid #f0f0f4;
}

.to-filterbar .to-filter-clear a {
  color: #4b2bbd;
  font-weight: 600;
  text-decoration: none;
}
/*===== 以上1024px以上と重複しているので暫定的にcss当ててます!! 11/16 =====*/
/*----- site-headr.php END -----*/



main {
    padding-top: 116px; /* headerを固定した分padding-topを開ける */
}

@media (min-width: 1024px) {
    main {
        padding-top: 71px;
    }
}



/*----- hero.php START -----*/
.hero { 
    position: relative; 
    overflow: clip; 
}

.hero .hero__inner {
    position: absolute; 
    inset: 0;
    display: grid; 
    place-items: center;
    text-align: center; 
    padding: 24px;
}

/* ダミーのビジュアル（画像なしでも比率を固定） */
.hero .hero__media {
    width: 100%;
    aspect-ratio: 16 / 9; /* ここが“枠”＝CLS対策の要 */
    background:
        radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
        linear-gradient(120deg, #f0f3f7, #e6eef7 40%, #f3f7fb);
    /* ほんのり骨格ローディング風 */
    position: relative;
    overflow: hidden;
}

.hero .hero__media::after {
    content:"";
    position:absolute; inset:0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: hero-shimmer 1.6s infinite;
}

@keyframes hero-shimmer {
    100% { transform: translateX(100%); }
}

/* タイトル等 */
.hero .hero__title { 
    font-size: clamp(26px, 4vw, 40px); 
    font-weight: 700; 
}

.hero .hero__lead  { 
    margin-top: .5rem; 
    font-size: clamp(14px, 2.2vw, 18px); 
    opacity: .85; 
}

.hero .hero__btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    padding: .75rem 1rem; 
    border-radius: 9999px; 
    border: 1px solid #ddd; 
    text-decoration: none;
}

.hero .btn--accent { 
    background: #1e90ff; 
    color: #fff; 
    border-color: transparent; 
}
/*----- hero.php END -----*/



/*----- block.php START -----*/
.block {
    margin: 3rem 0;
}

.block .block__head--bleed {
    background-color: #e9e9ea;
}

.block .block__head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 10px;
}

.block .block__more {
    text-decoration: none;
    color: deeppink;
    display: inline-flex;
    align-items: center;
    opacity: 0.8;
}

.block .block__more::before {
    content:  "▶";
    margin-right: .4em;
}

.block .block__body {
    margin-top: 12px;
}

.block ul.products {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-items: center;
    align-items: stretch;
    gap: 40px 10px;
}

/* タブレット：3 */
@media (min-width: 768px) {
  .block ul.products { grid-template-columns: repeat(3, 1fr); }
}

/* ラップトップ：4 */
@media (min-width: 1024px) {
  .block ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* デスクトップ広め：5（楽天感） */
@media (min-width: 1280px) {
  .block ul.products { grid-template-columns: repeat(5, 1fr); }
}


/* 疑似要素を生成しないようにする */
.block ul.products::before,
.block ul.products::after {
    content: none !important;
    display: none !important;
}

/*----- カードは共通クラス.to-shopに統合して定義しています -----*/


/*----- block.php END -----*/





/*----------------------------------------------*/
/* |        archive-product.php START           | */
/*----------------------------------------------*/
.shop-main .container {
    /*max-width: 1200px;*/
    /*margin: 0 auto;*/
    width: 92%;
    padding: 3rem 0;
}

.shop-main .shop-title {
    font-size: 2rem;
    margin: 0 0 0.5em;
}




/* パンくず：カード風＋区切りを›に */
.shop-main .woocommerce-breadcrumb{
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: .5rem;
    margin-block: .5rem 3rem;
    padding:.375rem .75rem;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: .5rem;
    color: #9ca3af;

    /* 区切りの“/”テキストノードを視覚的に消す */
    /*font-size:0;*/
}

.shop-main .woocommerce-breadcrumb a,
.shop-main .woocommerce-breadcrumb span{
    font-size: .875rem;             /* 復活 */
    color: #6b7280;
    text-decoration: none;
}

.shop-main .woocommerce-breadcrumb a:hover{
    color:#111827;
    text-decoration:underline;
    text-underline-offset:.2em;
}


/* デリミタ：枠線を45°回転＝› */
.shop-main .crumb + .crumb::before{
    content: "";
    display: inline-block;
    width: .6em;                 /* 大きさはここで調整 */
    height: .6em;
    margin-right : .8rem;
    border-right: 2px solid #d1d5db;
    border-top:   2px solid #d1d5db;
    transform: rotate(45deg);
    /* 行の中央に自動で揃う（flex itemなので baseline 問題が起きない） */
}


/* 件数ラベル */
.shop-main .woocommerce-result-count{
    display:inline-block;
    margin:0 1rem .75rem 0;
    font-size: 1.2rem;
    position: relative;
    top: 0.35em;
}




/* セレクトの見た目を整える（ネイティブを薄くカスタム） */
.shop-main .woocommerce-ordering{
    position:relative;
    display:inline-block;
}

.shop-main .woocommerce-ordering select{
    appearance:none;
    padding:.5rem 2.25rem .5rem .75rem;
    border:1px solid #d1d5db;
    border-radius:.5rem;
    background:#fff;
    line-height:1.2;
    font:inherit;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.shop-main .woocommerce-ordering::after{
    content:"";
    position:absolute; 
    right:.6rem; 
    top:50%; 
    width: 1.7rem; 
    height: 1.7rem; 
    margin-top:-.85rem;
    pointer-events:none;
    background-repeat:no-repeat; background-size:100% 100%;
    opacity:.55;

    /* 角丸に馴染む下矢印（SVG） */
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 8l4 4 4-4'/></svg>");
}

.shop-main .woocommerce-ordering select:focus{
    outline:none;
    border-color:#111827;
    box-shadow:0 0 0 3px rgba(17,24,39,.12);
}


/* 疑似要素を生成しないようにする */
.shop-main ul.products::before,
.shop-main ul.products::after {
    content: none !important;
    display: none !important;
}

/* 
wooデフォルトのcssが「.woocommerce ul.products」のように当たっているので、
詳細度のために.shop-mainを記述すること!! 
*/
.shop-main ul.products {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    /*grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));*/
    justify-items: center;
    align-items: stretch;
    gap: 20px 0;
}

/* タブレット：3 */
@media (min-width: 768px) {
  .shop-main ul.products { grid-template-columns: repeat(3, 1fr); }
}

/* ラップトップ：4 */
@media (min-width: 1024px) {
  .shop-main ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* デスクトップ広め：5（楽天感） */
@media (min-width: 1280px) {
  .shop-main ul.products { grid-template-columns: repeat(5, 1fr); }
}


@media (min-width: 1024px) {
  .shop-main.to-shop > .container {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr); /* 左フィルター / 右メイン */
    column-gap: 24px;
    row-gap: 16px;
    align-items: start; /* 子要素の全セル内のコンテンツをセル内の高さのどこに揃えるかを決める!! */
    width: 100%;
    max-width: none;
  }

  /* 上の2行は全幅（パンくず） */
  .shop-main.to-shop .woocommerce-breadcrumb {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* 上の2行は全幅（タイトル） */
  .shop-main.to-shop .shop-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* 通知エリアがあれば、タイトル下の2列目に置く */
  .shop-main.to-shop .woocommerce-notices-wrapper {
    grid-column: 2;
    grid-row: 3;
  }

  /* 左サイド：フィルターは 3行目・1列目 */
  .shop-main.to-shop .to-filterbar {
    grid-column: 1;
    grid-row: 3 / 6;
  }


  /* 右側：件数・並び順は 4行目(通知エリアの下)・2列目 */
  /* 同じセルに個別のUIを入れることも可能!!! */
  .shop-main.to-shop .woocommerce-result-count,
  .shop-main.to-shop .woocommerce-ordering {
    grid-column: 2;
    grid-row: 4;
    margin-top: 0;          /* デフォの上マージンを消す */
    margin-bottom: .5rem;
  }

  /* 件数は左寄せ、並び順は右寄せにしたい場合 */
  .shop-main.to-shop .woocommerce-result-count {
    text-align: left;
    justify-self: start; /* 同じセルに入れたUIであってもjustify-selfやalign-selfでそれぞれ個別にセル内の位置を指定できる!! */
    align-self: center; /* 親gridでalign-items:start;としているのでセルの上に揃うが、この要素は真ん中の高さにしたいのでalign-selfで個別に指定!! */
    margin-left: 1.5vw;
  }
  .shop-main.to-shop .woocommerce-ordering {
    justify-self: end; /* 同じセルに入れたUIであってもjustify-selfやalign-selfでそれぞれ個別にセル内の位置を指定できる!! */
    margin-right: 1.3vw;
    margin-top: 10px;
  }

  /* 商品リストは 5行目・2列目 */
  .shop-main.to-shop ul.products {
    grid-column: 2;
    grid-row: 5;
    margin-top: 0;          /* ここも余計な上マージンを消す */
  }
}
/*----------------------------------------------*/
/* |        archive-product.php END           | */
/*----------------------------------------------*/


/*--------------------------------------------------------*/
/* |  filter START(価格フィルターはassetsに分けてます)  | */
/*--------------------------------------------------------*/

/*===== ※価格フィルターは別にaseets/js、assets/cssなどにおいてあります!! =====*/




@media (min-width: 1024px){
  #open-filters, #filter-sheet{ display:none !important; }


  /* フィルター枠のベース（既に似たものがあればスキップ） */
  .to-filterbar {
    display: block;
    margin-bottom: 1.5rem;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
  }
  
  /* 各ウィジェットの区切り */
  .to-filterbar .widget_layered_nav {
    padding: .8em;
    border-top: 3px solid #f0f0f4;
  }
  
  /* ウィジェット見出し（サイズ／カラーなどの h2） */
  .to-filterbar .widget_layered_nav > h2 {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 900;
  }
  
  
  
  .to-filterbar .widget_layered_nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  
  /* liタグ */
  .woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
    padding: 0;
  }
  
  .to-shop .to-filterbar .widget_layered_nav a {
    display: inline-flex; /* 疑似要素(before)も横並びになる */
    /*align-items: center;*/
    gap: .3em;
    padding: 5px;
    border: 1px solid #e2e2ea;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    color: #333;
    transition: background .15s, border-color .15s, color .15s;
  }
  
  /* 選択済みのアイコンは色を変える（Woo は li に .chosen が付く） */
  .to-filterbar .widget_layered_nav li.chosen a {
    color: #4b2bbd;
    border-color: #cfc7ff;
    background: #f4f1ff;
    font-weight: 700;
  }
  
  /* ホバー・フォーカス */
  .to-filterbar .widget_layered_nav a:hover,
  .to-filterbar .widget_layered_nav a:focus-visible {
    border-color: #b7b7d0;
    background: #fafaff;
    outline: none;
  }
  
  .to-shop .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a::before {
    margin-right: 0; /* デフォルトでつけられている選択済みアイコン疑似要素のmargin-right: .62rem;を消す */
  }
  
  /* 該当件数は表示しない */
  .to-shop .to-filterbar .widget_layered_nav .count {
    display: none;
  }
  
  /* 色丸はカラーウィジェットにだけ適用 */
  .to-attr--color li:not(.chosen) a::before{
    content:"";
    width:14px; height:14px;
    border-radius:50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    background: transparent;
  }
  
  /* こう書けるようになる（クエリ無関係で安定） */
  .to-attr--color li:not(.chosen) .term-black::before { background:#000; }
  .to-attr--color li:not(.chosen) .term-gray::before { background:#9aa0a6; }
  .to-attr--color li:not(.chosen) .term-white::before { background:#fff; }
  
  
  .to-filterbar .to-filter-clear {
    padding: 20px;
    font-size: 13px;
    /*text-align: center;*/
    border-top: 3px solid #f0f0f4;
  }
  
  .to-filterbar .to-filter-clear a {
    color: #4b2bbd;
    font-weight: 600;
    text-decoration: none;
  }

}


/*----------------------------------------------*/
/* |   filter(only product attribute) END   | */
/*----------------------------------------------*/




/*---------------------------------------------*/
/* |        content-product.php START        | */
/*---------------------------------------------*/

/*----- フロントページとアーカイブページ共通のカード!! -----*/

/* 念のため、Wooの既定幅/floatも打ち消しておく */
.to-shop ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: clamp(0.3em, 2vw, 15px);
    padding-bottom: 0px;
}

.to-shop ul.products li.product {
    display: flex;
    flex-direction: column;
}

.to-shop ul.products li.product {
  position: relative;
  /*overflow: hidden;*/
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.to-shop ul.products li.product:hover {
  transform: translateY(-2px);
  border-color: #e5e7eb;
  background: #F9F9F9;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}


/* 全体をクリック可能に（リンク領域の余白を確保） */
.to-shop ul.products li.product a.woocommerce-LoopProduct-link {
  display: grid;
  text-decoration: none;
}

.to-shop ul.products li.product a img {
  width: 100%;
  aspect-ratio: 4/5;           /* ファッション寄りの縦長比率 */
  object-fit: cover;
  /*border-radius: 10px;*/
  transition: transform .25s ease;
  margin: 0;
}

.to-shop ul.products li.product:hover a img { 
    transform: scale(1.02);
}

.to-shop ul.products li.product .brand {
    font-size: 12px;
    color: #B0B0B0;
    margin-top: 4px;
    /*letter-spacing: .03em;*/
    /* margin: 4px 2px 2px; */
}

.to-shop ul.products li.product .woocommerce-loop-product__title {
    padding: 0;
    margin: 2px 2px 0;
    font-size: clamp(13px, 2vw, 16px);
    font-weight: 600;

    color: #111;
    letter-spacing: -.03em;

    /* max-linesが2列になり、省略の際は省略記号が表示される */
    /* 現時点の運用では-webkit-line-clamp: 2;が優先されているみたい... */
    /* chromeではUnknown property nameと▲マークが表示される*/
    line-clamp: 2;

    /* flexの子要素は「min-width: auto;」になっているのでboxは子要素の幅まで広がる */
    /* なのでflexboxの幅?になるとテキストを折り返すようにするプロパティ? */
    overflow-wrap: anywhere;
    /* 念のためはみ出した場合は表示しない */
    overflow: hidden;
    line-height: 1.3;

    /* boxごとのUIを揃えるため予め2行分のスペースを確保しておく*/
    /* 楽天もUIを完全に揃えているわけではないようなので外していいかも? */
    /*min-height: calc(1.35em * 2);*/ 

    /* フォールバック */
    /* -webkit-boxはflexboxの前にあった旧式のflexbox的な概念らしい*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/*----- 価格 START -----*/
.to-shop ul.products li.product .price {
  margin-top: 6px;
  margin-bottom: 0px;
}


/*----- .to-price__rowを囲むラッパー -----*/
.to-shop ul.products li.product .to-price{ }

/*----- セール前価格(打消し線)と現在価格を囲む共通のdivクラス ------*/
.to-shop ul.products li.product .to-price__row{ line-height:1.3; }


/*===== 上段(打ち消し線) START =====*/

/*----- .to-price__rowと同じでセール前価格(打消し線)特有クラス -----*/
.to-shop ul.products li.product .to-price__row--retail{ color:#6b7280; }

/*----- セール前価格(打消し線)のラベル -----*/
.to-shop ul.products li.product .to-price__row--retail .to-price__label{ font-size:.85em; font-weight: 400; margin-right:.3em; }

/*----- セール前価格(打消し線)のdelと等価、.woocommerce-Price-amountを内包 -----*/
.to-shop ul.products li.product .to-price__row--retail .to-price__retail{
    color:#9ca3af;
    text-decoration: none; /* リセットCSSの記述を無効化 */
    opacity: 1;
}

/*----- wc_price()で出力される価格部分 -----*/
.to-shop ul.products li.product .to-price__row--retail .woocommerce-Price-amount {
  position: relative;
  display: inline-block; 
  font-size: .85em;
  color: #9ca3af;
  font-weight: 400;
}

/*----- 価格部分の斜め打ち消し線 -----*/
.to-shop ul.products li.product .to-price__row--retail .woocommerce-Price-amount::after{
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;                 /* ちょいはみ出させて端まで届かせる */
  top: 50%;
  height: 1px;                /* 線の太さ */
  background: currentColor;   /* 文字色と同じ色にする */
  transform: rotate(-12deg);  /* 角度（好みで調整） */
  transform-origin: 50% 50%;
  pointer-events: none;
}

/*----- セール前価格(打消し線)の価格の「円」 -----*/
.to-shop ul.products li.product .to-price__row--retail .to-price__retail-symbol{ 
  font-size:.9em;
  margin-left: .08em;        /* くっつき防止（左寄せなら margin-right に） */
  position: relative;
  top: -.02em;               /* ベースライン微調整（お好みで） */
}

/*===== 上段(打ち消し線) END =====*/


/*===== 下段(現在価格) START =====*/
/* wc_price()が出力する現在価格 */
.to-shop ul.products li.product .to-price__now .woocommerce-Price-amount {
  /*font-size: clamp(20px, 2.6vw, 28px);*/
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  color: #F61212;
}

.to-shop ul.products li.product .price .price-tax-note {
  font-size: .8em;
  color: #F61212;
  /*margin-left: .3em;*/
  /*white-space: nowrap;*/
}

/* 税込表記をやや小さく*/
.to-shop ul.products li.product .price .price-tax-note .woocommerce-Price-amount {
  /*font-size: .8em;*/
  color: #F61212;
  margin-left: .15em;
  white-space: nowrap;
}

/*===== 下段(現在価格) END =====*/
/*----- 価格 END -----*/



/*----- 評価★ START -----*/
/*----- functions.phpで出力したラッパー -----*/
.to-shop .rating-row {
    display: flex;
    /*gap: 4px;*/ /* 子要素でemで管理したほうがレスポンシブ対応できる? */
    align-items: center;
    margin-top: 4px;
}

/* ---- Wooの星をUnicodeの★に差し替え（一覧/単品とも） ---- */
.to-shop ul.products li.product .star-rating{
  position: relative;
  display: inline-block;
  font-size: clamp(14px, 2vw, 16px);       /* 大きさ */
  line-height: 1;
  letter-spacing: .12em; /* 星の間隔 */
  margin: 0 .3em 0 0; /* wooのデフォルトのmargin-bottomを消してmargin-rightはemで管理 */
  transform: translateY(-1px); /* ベースライン微調整 */
}


/* 既定の背景/マスクを無効化（テーマ依存の上書き対策） */
.to-shop .star-rating,
.to-shop .star-rating::before,
.to-shop .star-rating span::before{
  background: none !important;
  -webkit-mask: none !important; /* webkit系の星マスク?の無効化らしい */
          mask: none !important; /* Safari系の星マスク?の無効化らしい */
}

/* 下地（空の星） */
.to-shop ul.products li.product .star-rating::before{
  content: "★★★★★";
  color: #e5e7eb; /* 空星の色 */
}

/* 充填レイヤー（span の width で覆う） */
.to-shop .star-rating > span{
  position: absolute; left:0; top:0; bottom:0;
  display: block; overflow: hidden;
  color: transparent; /* span の中のテキストを視覚的に消す */
}

.to-shop ul.products li.product .star-rating > span::before{
  content: "★★★★★";
  color: #EDD430; /* 塗りつぶし色 */
  position: absolute; left:0; top:0;
}

/*----- 評価件数 -----*/
.to-shop ul.products li.product span.rating-count {
    font-size: 13px;
    color: #B0B0B0;
}

/*----- 評価★ END -----*/


/*----- 線 START -----*/
.to-shop hr {
    margin-top: 12px;
    margin-bottom: 0px;
}
/*----- 線 END -----*/


/*----- バッジ START -----*/
.to-shop .to-badges{
  display:flex;
  flex-wrap:wrap;
  gap: .3rem .1rem;
  margin-top: 8px;
}

/* ピル共通 */
.to-shop .to-badge{
  display:inline-flex; align-items:center;
  border-radius: 5px; padding:.15rem .20rem;
  font-size:.65rem; line-height:1; font-weight:700;
  border:2px solid transparent;
}

/* バリエーション */
.to-shop .to-badge--danger{     background:#fff; color:#E41111; border-color:#E41111; }
.to-shop .to-badge--success{    background:#f0fff4; color:#2f855a; border-color:#c6f6d5; }
.to-shop .to-badge--accent{     background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.to-shop .to-badge--neutral{    background:#f7fafc; color:#4a5568; border-color:#e2e8f0; }

/*----- バッジ END -----*/

/*----- PR文 -----*/
.to-shop .to-prtext {
  font-size: .9em;
  width: 60%;
  height: 4em;
  margin-top: 2px;
  display: flex;
  align-items: center;
}


/*----- add-to-cart-buttonをアイコン型にカスタマイズSTART -----*/
.to-shop ul.products li.product .to-cartbtn,
.to-shop ul.products li.product .to-detailbtn{
  width:80px; height:80px;        /* お好み */
  position: absolute;
  bottom: -16px;
  right: -8px;
}



.to-shop ul.products li.product .to-cartbtn__icon,
.to-shop ul.products li.product .to-detailbtn__icon{
  width:100%; height:100%;        /* お好み */
  display:grid; place-items:center;
  border-radius:9999px;
}

.to-shop ul.products li.product .to-cartbtn__icon img,
.to-shop ul.products li.product .to-detailbtn__icon img{
  width:80%; height:80%;
  display:block;
  object-fit:contain;
}

.to-shop ul.products li.product .to-cartbtn__icon img:hover,
.to-shop ul.products li.product .to-detailbtn__icon img:hover{
  background:#eae4f7;
  border-color:#d9d0f2;
  color:#3a2567;
}

/*.shop-main ul.products li.product .to-cartbtn:hover,
.shop-main ul.products li.product .to-detailbtn:hover {
  background:#eae4f7;
  border-color:#d9d0f2;
  color:#3a2567;
}*/

.to-shop ul.products li.product .to-cartbtn:active,
.to-shop ul.products li.product .to-detailbtn:active{
  transform: translateY(-3px);
}
/*----- add-to-cart-buttonをアイコン型にカスタマイズEND -----*/


/*---------------------------------------------*/
/* |         content-product.php END         | */
/*---------------------------------------------*/


/*----- archive-product.php END -----*/





/*----- single-product.php START -----*/

.product-main {
}

/*----- container START-----*/
.product-main .container {
    max-width: var(--container-w);
    width: 92%;
    margin: 0 auto;
}
/*----- container END -----*/


/* パンくず：カード風＋区切りを›に */
.product-main .woocommerce-breadcrumb{
    display: flex; 
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-block: .5rem 1rem;
    padding:.375rem .75rem;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: .5rem;
    color: #9ca3af;

    /* 区切りの“/”テキストノードを視覚的に消す */
    /*font-size:0;*/
}

.product-main .woocommerce-breadcrumb a,
.product-main .woocommerce-breadcrumb span{
    font-size: .875rem;             /* 復活 */
    color: #6b7280;
    text-decoration: none;
}

.product-main .woocommerce-breadcrumb a:hover{
    color:#111827;
    text-decoration:underline;
    text-underline-offset:.2em;
}

/* デリミタ：枠線を45°回転＝› */
.product-main .crumb + .crumb::before{
  content: "";
  display: inline-block;
  width: .6em;                 /* 大きさはここで調整 */
  height: .6em;
  margin-right: .8rem;
  border-right: 2px solid #d1d5db;
  border-top:   2px solid #d1d5db;
  transform: rotate(45deg);
  /* 行の中央に自動で揃う（flex itemなので baseline 問題が起きない） */
}
/*----- パンくずEND -----*/



.product-main .product {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

/*@media (min-width: 767px) {
    .product-main .product {
        grid-template-columns: 1fr 1fr;
    }
}*/

/* content-wrapper = 左ギャラリー / 右サマリー */
.product-main .product .content-wrapper {
  display: block;            /* mobile: 1カラム */
  gap: 20px;                 /* gridにしたとき用の余白、先に書いてOK */
}

@media (min-width: 1024px) {
  .product-main .product .content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左=ギャラリー / 右=サマリー */
    gap: 24px;
    align-items: start;
  }
}



/*----- ギャラリーSTART -----*/
/* Wooの既定幅/floatも打ち消しておく */
.product-main .product .images {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.product-main .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 3px;
}
/*----- ギャラリーEND -----*/



/*----- summary START -----*/
/* Wooの既定幅/floatも打ち消しておく */
.product-main .product .summary {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* タイトル・価格・説明 */
.product-main .summary .product_title {
    font-size: clamp(20px, 3.4vw, 28px);
    line-height: 1.3;
    margin: 0 0 10px;
}

.product-main div.summary p.price,
.product-main div.summary span.price {
    display: inline-flex;
    gap: 10px;
    align-items: baseline;
    font-size: clamp(18px, 2.8vw, 24px);
    font-weight: 700;
    color: var(--color-price, #111);
    margin-bottom: 12px;
}

.product-main div.summary p.price del,
.product-main div.summary span.price del {
    opacity: .55;
    font-weight: 400;
}

.product-main div.summary .woocommerce-product-details__short-description {
    color: #444;
    line-height: 1.75;
    margin: 10px 0 16px;
}

/* 数量・カートボタン */
.single-product div.summary form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 16px 0 20px;
}


/* 疑似要素を生成しないようにする */
.single-product div.summary form.cart::before,
.single-product div.summary form.cart::after {
    content: none !important;
    display: none !important;
}

.single-product .summary form.cart .qty {
    width: 84px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}

.single-product .summary form.cart .single_add_to_cart_button {
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: none;
}




/* 変数商品（バリエーション） */
.single-product div.summary form.variations_form {
    margin: 30px 0 30px;
} 

.single-product div.summary form.variations_form .variations {
    margin: 0 0 12px;
}
 
.single-product div.summary table.variations th.label {
    width: 12%;
    padding-right: 8px;
    font-weight: 600;
    text-align: left;
}

.single-product div.summary form.variations_form table.variations select {
    min-width: 70%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.single-product div.summary table.variations tr:nth-child(1) select {
    margin-bottom: 10px;
}

/* 変数商品の「クリア」リンクを隠す */
.single-product div.summary table.variations a.reset_variations { 
  display: none !important;
}



/* 在庫・メタ */
.single-product div.summary p.stock.in-stock {
    color: #0a7a2f;
    font-weight: 600;
    margin: 8px 0;
}

.single-product div.summary p.stock.out-of-stock {
    color: #b00020;
}

.single-product div.product_meta {
    font-size: 13px;
    color: #666;
    margin-block: 30px 10px;
}

.single-product span.sku_wrapper {
    margin-right: 10px;
}

.single-product span.posted_in a {
    text-decoration: none;
    color: #666666;
}

/*----- summary END -----*/

.single-product div.product .woocommerce-tabs {
    margin-top: 50px;
}



/* タブ見出し行 */
.single-product div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 10px;
    margin: 0;
    border-bottom: 1px solid #eee;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a {
    font-weight: 900;
}

/* パネル本文 */
.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 16px 0;
    line-height: 1.8;
}



/*----- single-product.php END -----*/







/*----- site-footer.php START -----*/
.site-footer { 
    background: #0f1114; 
    color: #cfd3da; 
    padding-bottom: 20px;
}
.site-footer a { 
    color: inherit; 
    text-decoration: none; 
    opacity: .9; 
}

.site-footer a:hover, 
.site-footer a:focus { 
    opacity: 1; 
    text-decoration: underline; 
}

.site-footer .container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 24px 0px; 
}

.site-footer__news-letter .container {
    padding: 0 ;
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    column-gap: 40px;
}

.site-footer .site-footer__bottom-inner { 
    display: grid; 
    grid-template-columns: 1fr;
    gap: 1rem; 
    align-items: center;
    padding: 0;  
}

.site-footer__legal {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
}

.site-footer__copy {
    text-align: right;
    right: -40px;
}


@media (min-width: 617px) {
    
    .site-footer__top {
        grid-template-columns: auto 1fr;
    }
    

    .site-footer__top .site-footer__news-letter {
        width: 100%;
        position: relative;
        top: 18px;
    }
    
    li#menu-item-175::after {
        content: "|";
        padding-left: 23px;
        position: relative;
        top: -1px;
    }
    
    li#menu-item-173::after {
        content: "|";
        padding-left: 24px;
        position: relative;
        top: -1px;
    }
    
    li#menu-item-165::after {
        content: "|";
        padding-left: 24px;
        position: relative;
        top: -1px;
    }
    
    li#menu-item-166::after {
        content:  "|";
        padding-left: 24px;
        position: relative;
        top: -1px;
    }

}




/*
.site-footer__top {
    display:grid; gap:24px;
    grid-template-columns: repeat(4, minmax(0,1fr));
    align-items: center;
}

@media (max-width: 900px) {
    .site-footer__top { 
        grid-template-columns: repeat(2, minmax(0,1fr)); 
    }
}

@media (max-width: 560px) {
    .site-footer__top { 
        grid-template-columns: 1fr; 
    }
}
*/


.site-footer__brand { 
    display: flex; 
    flex-direction: column; 
    gap: .5rem; 
}

.site-footer__logo img { 
    width: 140px; 
    height: auto; 
    display: block; 
}

.site-footer__heading { 
    margin: .2rem 0 .6rem; 
    font-size: 1rem; 
    color: #fff; 
}

.site-footer__menu { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: grid; 
    gap: .4rem; 
}

.site-footer__menu li { 
    min-width: 0; 
}

.site-footer__menu a { 
    overflow-wrap: anywhere; 
}

.site-footer__form { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: .3rem; 
    /*margin: .5rem 0 1rem;*/ 
}

.site-footer__form input { 
    flex: 1 1 auto; 
    min-width: 0; 
    padding: .6rem .7rem; 
    border-radius: .5rem; 
    border: 1px solid #3a3f46; 
    background: #14171b; 
    color: #e9edf3; 
}

.site-footer__form button { 
    padding: .6rem .9rem; 
    border-radius: .5rem; 
}

.site-footer__sns { 
    display: flex; 
    gap: .8rem; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

.site-footer__bottom { 
    border-top: 1px solid #1d232b; 
    background: #0b0d10; 
}



.site-footer__copy {
    opacity: .8; 
    position: relative;
    left: -40px;
    top: 2px;
}
/*----- site-footer.php END -----*/




/*----- back-to-top.php START -----*/
.backtotop {
    position: fixed; 
    right: 4px;
    bottom: 16px;
    background-color: transparent;
    border: 0; 
    cursor: pointer;
    /*padding: 0;*/
}

/*.backtotop:focus { 
    outline: 2px solid #fff; 
    outline-offset: 2px; 
}*/

.backtotop img {
    width: 40px;
    backdrop-filter: saturate(1.2) blur(0.1px);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 1px 3px 4px rgba(0, 0, 0, .15);
}

/*----- back-to-top.php END -----*/







/*===== my-account.php START =====*/

/*----- navigation.php START -----*/
nav.account-nav {
    padding-top: 40px;
    /*padding-bottom: 20px;*/
}

.account-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.account-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: #111;
  gap: 8px;
  border: 2px solid #eee;
  transition: background .2s, box-shadow .2s;
}

.account-nav__link:hover {
  background: #f9f9f9;
}

.account-nav__icon svg {
  width: 28px;
  height: 28px;
}

.account-nav__label {
  font-size: 12px;
  font-weight: 600;
}
/*----- navigation.php END -----*/




/*----- my-account-content START -----*/
/* 遷移時にヘッダーの分だけずらす */
#myaccount-content {
  scroll-margin-top: 115px; /* あなたのヘッダー高さ */
}

/* 全エンドポイント共通 START */
.woocommerce-MyAccount-content {
    padding-block: 40px;
    font-size: 15px;
}

div.woocommerce-MyAccount-content button.button {
    margin-top: 1em;
}

/* 全エンドポイント共通 END */




/* ================================
   アドレス管理（edit-address）ページ
   デフォルトHTMLをそのまま美しくする
   ================================ */

/* 全体の余白 */
.woocommerce-MyAccount-content > p {
  margin-bottom: 20px;
  color: #444;
  line-height: 1.6;
  font-size: 15px;
  text-align: center;
}



/* WooCommerce の col2-set の clearfix 疑似要素を無効化 */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after {
  content: "";
  display: none;
}


/* 2カラム → モバイルは1カラム */
.woocommerce-Addresses.col2-set {
  display: grid;
  gap: 20px;
  /*margin-bottom: 30px;*/
}

@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
  }
  .woocommerce-MyAccount-content {
    padding-block: 60px 80px;
  }

  .woocommerce-Addresses.col2-set {
    grid-template-columns: repeat(2, 1fr);
  }

  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 {
    float: none;
    width: 100%;
  }
}


/* 各住所カード */
.woocommerce-Address {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  box-sizing: border-box;
  text-align: center;
}

/* タイトル行（請求先住所 / お届け先住所 + 編集リンク） */
.woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

/* 見出し */
.woocommerce-Address-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

/* 編集リンク（右上） */
.woocommerce-Address-title .edit {
  font-size: 14px;
  color: #6c3ecb; /* ← あなたのブランドカラーに変えてOK */
  text-decoration: none;
  font-weight: 600;
}

.woocommerce-Address-title .edit:hover {
  text-decoration: underline;
}

/* 住所テキスト */
.woocommerce-Address address {
  margin: 0;
  color: #444;
  font-size: 14px;
  /*line-height: 1.7;*/
  white-space: pre-line;
}

/* 空の住所の場合のスタイル */
.woocommerce-Address address {
  color: #666;
  font-style: normal;
}


/*===== 「住所の設定・変更」START =====*/
/* 都道府県を郵便番号の下にくるようにする */
.woocommerce-MyAccount-content p#billing_state_field,
.woocommerce-MyAccount-content p#shipping_state_field {
  clear: left;
  float: left;
}

.woocommerce-MyAccount-content .woocommerce-address-fields label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  /*margin-bottom: 6px;*/
}

/* 国または地域は日本に固定したので、input="hidden"になり
   labelのforが警告がでるので、spanタグにしてclass名を追加した*/
.woocommerce-MyAccount-content .woocommerce-address-fields span.wc-country-label {
    display: block;
    line-height: 2;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}


/* テキスト入力欄 */
.site-main .container .woocommerce-MyAccount-content .input-text {
  width: 100%;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}

/* セレクトの見た目、親のselectタグではなくspanタグに記述されている模様 */
.site-main .container .woocommerce-MyAccount-content span.select2-selection--single {
  width: 100%;
  padding: 0;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}


/* フォーカス時の効果 */
.site-main .container .woocommerce-MyAccount-content .input-text:focus, 
.site-main .container .woocommerce-MyAccount-content span.select2-selection--single:focus {
  border-color: #6c3ecb; /* ブランドカラーに変更可能 */
  box-shadow: 0 0 0 3px rgba(108, 62, 203, 0.15);
  outline: none;
}
/*===== 「住所の設定・変更」END =====*/





/*===== 「アカウント設定・変更」 START =====*/


/* アカウント編集ページ全体 */
.woocommerce-EditAccountForm {
  /*margin-top: 20px;*/
  /*display: grid;*/
  /*gap: 20px;*/
}

/* 入力フィールドのラベル */
.woocommerce-EditAccountForm label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  /*margin-bottom: 6px;*/
}

/* テキスト入力欄 */
.site-main .container .woocommerce-EditAccountForm .input-text {
  width: 100%;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}

/* フォーカス時の効果 */
.site-main .container .woocommerce-EditAccountForm .input-text:focus {
  border-color: #6c3ecb; /* ブランドカラーに変更可能 */
  box-shadow: 0 0 0 3px rgba(108, 62, 203, 0.15);
  outline: none;
}


/* 2カラム行（名 / 姓） */
.woocommerce-form-row-first,
.woocommerce-form-row-last {
  /*width: 100%;*/
}

.site-main .container .woocommerce-form-row--first {
  float: right;
}

.site-main .container .woocommerce-form-row--last {
  float: left;
}

@media (min-width: 600px) {
  .woocommerce-form-row-first,
  .woocommerce-form-row-last {
    width: 48%;
    display: inline-block;
  }
}

.woocommerce-EditAccountForm fieldset {
    margin-top: 1.8em;
}

.woocommerce-EditAccountForm fieldset legend {
    font-size: 16px;
    font-weight: 800;
}

/* 表示名の説明文 */
#account_display_name_description {
  font-size: 12px;
  color: #777;
}
/* 「アカウント設定・変更」 END */
/*----- my-account-content END -----*/


/*----- order START -----*/

/* ===== 注文履歴1ページ目(履歴がある場合)：カード化 ===== */

#myaccount-content table.woocommerce-orders-table {
    border-collapse: separate;
    border-spacing: 0 1.5rem; /* カード間の間隔 */
    width: 100%;
    border: none;
}

#myaccount-content tr.woocommerce-orders-table__row {
    margin-bottom: 26px;
}


/* CSSのコメントアウトは入れ子にできない!!もしやるとそこから下のCSSが当たらくなるので注意!! */
/* 行全体をカードにする */
/*
.woocommerce-account .woocommerce-orders-table__row {
    display: block;
    background: #fff;
    padding: 1.6rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 10px;
}
*/

/* 各セルを縦並びに */
/*
.woocommerce-account .woocommerce-orders-table__cell {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 14px;
    border: none !important;
}
*/

/* セル名は日本語にしやすい */
/*
.woocommerce-account .woocommerce-orders-table__header {
    display: none;
}
*/

/* 注文番号を強調 */
/*
.woocommerce-orders-table__cell-order-number a {
    font-weight: 700;
    font-size: 15px;
    color: #333;
    text-decoration: none;
}
*/

/* ステータスの色（例：完了＝緑） */
/*
.woocommerce-orders-table__cell-order-status {
    font-weight: 600;
    color: #38a169;
}
*/

/* 合計金額 */
/*
.woocommerce-orders-table__cell-order-total {
    font-weight: 700;
    font-size: 15px;
}
*/

/* 操作ボタン */
/*
.woocommerce-orders-table__cell-order-actions .button {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
}
*/


/*===== 注文履歴2ページ目(詳細ページ) =====*/
.woocommerce-order-details__title {
    margin-bottom: 10px;
}

h2.woocommerce-column__title {
    margin-bottom: 10px;
}

.woocommerce .woocommerce-customer-details {
    padding: 10px 12px;
}

.woocommerce .woocommerce-customer-details address {
    padding: 14px 10px;
}

.woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1 {
    margin-bottom: 24px;
}





/*----- order END -----*/



/*===== my-account.php END =====*/


/*===== cartページSTART ======*/
/* カートCTA：購入手続きに進む */
.wc-block-cart__submit-container a {
    display: block;
    width: 100%;
    text-align: center;
    background: #5C1CD4; /* あなたのブランドカラーに合わせる */
    color: #fff !important;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(92, 28, 212, 0.25);
    transition: all 0.2s ease;
    margin: 10px auto 20px;
}

/* ホバー */
.wc-block-cart__submit-container ahover {
    background: #4A16AF;
    box-shadow: 0 8px 18px rgba(92, 28, 212, 0.35);
    transform: translateY(-2px);
}

/*===== cartページEND ======*/