/* site-2026 skin for the legacy commerce and reading screens  Loaded only while the switch is on
   The old stylesheets stay  This file renames their colours and type to the new site and brings its header and footer */
body.site2026-skin.site2026-skin{
  --cream:#f6efe2;--paper:#fcf8f0;--brown:#6f4319;--brown2:#84603d;--line:#e3d6c1;
  --butter:#eec25a;--butter2:#b9862a;--dark:#8f5a26;--on-dark:#fdf6e8;--on-dark2:#f5dfc0;--line-dark:#a9773f;
  --ease:cubic-bezier(.2,.7,.1,1);
  --gl:max(20px,env(safe-area-inset-left,0px));--gr:max(20px,env(safe-area-inset-right,0px));
  --s26-font:"Outfit","Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  /* The names the old screens read */
  --ink:var(--brown);--muted:var(--brown2);--gold:var(--brown);--sans:var(--s26-font);--serif:var(--s26-font);
  --fec-primary:var(--brown);--fec-primary-lt:var(--brown);--fec-text:var(--brown);--fec-border:var(--line);
  --ftk-control-primary:var(--brown);--ftk-action-bg:var(--brown);
  --gutter:max(var(--gl),calc((100vw - 1240px)/2 + 48px));
  background:var(--cream);color:var(--brown);font-family:var(--s26-font);font-feature-settings:"palt";letter-spacing:.02em;-webkit-font-smoothing:antialiased;
}
@media(min-width:900px){body.site2026-skin.site2026-skin{--gl:max(48px,env(safe-area-inset-left,0px));--gr:max(48px,env(safe-area-inset-right,0px))}}
html.ftk-premium-document:has(body.site2026-skin){background:#f6efe2}

/* 上の帯 */
.site2026-skin .hd{position:fixed;inset:0 0 auto 0;z-index:200;padding:env(safe-area-inset-top,0px) 0 0;margin:0;border:0;background:color-mix(in srgb,var(--paper) 94%,transparent);color:var(--brown);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(10px);font-family:var(--s26-font);line-height:1.85}
.admin-bar.site2026-skin .hd{top:32px}
@media(max-width:782px){.admin-bar.site2026-skin .hd{top:46px}}
.site2026-skin :is(.hd,.ft) .wrap{width:auto;max-width:1240px;margin:0 auto;padding:0 var(--gr) 0 var(--gl);box-sizing:border-box}
.site2026-skin .hd .wrap{display:flex;align-items:center;gap:20px;height:64px}
.site2026-skin :is(.hd,.ft) a{color:inherit;text-decoration:none}
.site2026-skin :is(.hd,.ft) .logo{font-weight:700;font-size:19px;letter-spacing:.14em;margin:0 auto 0 0;display:flex;flex-direction:column;line-height:1.2}
.site2026-skin :is(.hd,.ft) .logo small{font-size:9.5px;letter-spacing:.3em;font-weight:500;opacity:.7}
.site2026-skin .hd .nav{display:none;gap:26px;font-size:14px;font-weight:500;margin:0;padding:0}
.site2026-skin .hd .nav a{position:relative;padding:8px 0}
.site2026-skin .hd .nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.site2026-skin .hd .nav a:hover::after,.site2026-skin .hd .nav a[aria-current="page"]::after{transform:scaleX(1)}
.site2026-skin .hd .try{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--butter);color:var(--brown);font-weight:700;font-size:14px;transition:transform .3s var(--ease)}
.site2026-skin .hd .try:hover{transform:translateY(-2px)}
.site2026-skin .hd .menu{width:44px;height:44px;min-height:0;display:grid;place-content:center;gap:6px;background:none;border:0;border-radius:0;box-shadow:none;color:inherit;padding:0;cursor:pointer}
.site2026-skin .hd .menu i{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
@media(max-width:999px){
  .site2026-skin .hd.open{background:var(--paper)}
  .site2026-skin .hd.open .nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--paper);padding:4px var(--gr) 26px var(--gl);box-shadow:0 24px 30px -22px rgba(60,35,10,.45);font-size:17px;font-weight:700;max-height:calc(100svh - 64px);overflow:auto}
  .site2026-skin .hd.open .nav a{padding:17px 0;border-bottom:1px solid var(--line)}
  .site2026-skin .hd.open .nav a::after{display:none}
  .site2026-skin .hd.open .menu i:first-child{transform:translateY(4px) rotate(45deg)}
  .site2026-skin .hd.open .menu i:last-child{transform:translateY(-4px) rotate(-45deg)}
}
@media(min-width:1000px){.site2026-skin .hd .nav{display:flex}.site2026-skin .hd .menu{display:none}.site2026-skin .hd .wrap{height:76px}}

/* 下の案内 */
.site2026-skin .ft{background:var(--dark);color:var(--on-dark2);font-family:var(--s26-font);font-size:14px;line-height:1.85;margin:0;padding:56px 0 calc(40px + env(safe-area-inset-bottom,0px));border:0}
.site2026-skin .ft .cols{display:grid;gap:30px}
.site2026-skin .ft .logo{color:var(--on-dark);margin-bottom:12px}
.site2026-skin .ft :is(p,ul,h3){margin:0;padding:0}
.site2026-skin .ft ul{display:grid;gap:6px;list-style:none}
.site2026-skin .ft li{margin:0;padding:0;list-style:none}
.site2026-skin .ft li::before{content:none}
.site2026-skin .ft a:hover{color:var(--on-dark)}
.site2026-skin .ft h3{font-family:var(--s26-font);font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--butter);margin-bottom:10px}
.site2026-skin .ft .copyr{margin-top:40px;padding-top:20px;border-top:1px solid var(--line-dark);font-size:12px}
@media(min-width:900px){.site2026-skin .ft .cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}}

/* 本文  帯の高さだけ下げ 見出しと文字を新しい書体に */
body.site2026-skin main#main{padding-top:calc(64px + 30px)}
@media(min-width:1000px){body.site2026-skin main#main{padding-top:calc(76px + 44px)}}
body.site2026-skin main#main :is(h1,h2,h3,h4,h5,legend,th,strong,b){font-family:var(--s26-font);color:var(--brown)}
body.site2026-skin main#main :is(h1,h2,h3){font-weight:700;letter-spacing:.04em;line-height:1.45}
body.site2026-skin main#main h1{font-size:clamp(28px,4.2vw,46px)}
body.site2026-skin main#main h2{font-size:clamp(22px,2.8vw,32px)}
body.site2026-skin main#main :is(p,li,dd,dt,td,label,span,small,a,input,select,textarea,button){font-family:var(--s26-font)}
body.site2026-skin main#main a{color:var(--brown)}

/* 押すところ */
body.site2026-skin main#main :is(.button,button.button,a.button,input.button,#place_order,.checkout-button,.wc-block-components-button:not(.is-link),.wp-element-button,button.wpforms-submit){background:var(--brown);border:0;color:var(--paper);border-radius:999px;font-family:var(--s26-font);font-weight:700;letter-spacing:.04em;box-shadow:none;text-decoration:none}
body.site2026-skin main#main :is(.button,#place_order,.checkout-button,.wc-block-components-button:not(.is-link),button.wpforms-submit):hover{background:var(--dark);color:var(--paper)}
body.site2026-skin main#main :is(.button,#place_order,.checkout-button,.wc-block-components-button:not(.is-link))[disabled],body.site2026-skin main#main .button.disabled{background:var(--line);color:var(--brown2);opacity:1}
/* The checkout already repeats its way back just below  One is enough */
body.site2026-skin .site2026-skin-return:has(+ .commerce-return){display:none}
body.site2026-skin .site2026-skin-return{max-width:1240px;margin:0 auto 18px;padding:0;font-size:14px;font-weight:700}
body.site2026-skin .site2026-skin-return a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1.5px solid currentColor;text-decoration:none}

/* 入れるところ */
body.site2026-skin main#main :is(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],textarea,select,.select2-selection,.wc-block-components-text-input input,.wc-blocks-components-select__select){background:var(--cream);border:1px solid var(--line);border-radius:6px;color:var(--brown);font-family:var(--s26-font);box-shadow:none}
body.site2026-skin main#main :is(input,textarea,select):focus-visible{outline:3px solid var(--butter2);outline-offset:2px;border-color:var(--butter2)}
body.site2026-skin main#main ::placeholder{color:color-mix(in srgb,var(--brown2) 60%,transparent)}

/* お知らせと表  区切りの色 */
body.site2026-skin main#main :is(hr,table,th,td,fieldset){border-color:var(--line)}
body.site2026-skin main#main :is(.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner){background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--brown);font-family:var(--s26-font)}

/* 購入手続き  注文の箱と お試しの画像2枚を新しい見た目で言い直す
   画像は読み上げ用に残し 目に見える分だけ差し替える  特典の条件は画像の代替文と同じ内容 */
body.site2026-skin main#main .ftk-checkout-order{background:var(--paper);border:1px solid var(--line);border-radius:6px}
body.site2026-skin main#main .ftk-checkout-order :is(th,td){background:none}
body.site2026-skin main#main :is(.ftk-review-trial-image,.ftk-checkout-reward) img{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%)}
body.site2026-skin main#main .ftk-review-trial-image td{position:relative;padding:20px 0 16px;border-color:var(--line)}
body.site2026-skin main#main .ftk-review-trial-image td::before{content:"";display:block;aspect-ratio:6/1.1;background-image:url(butter.webp),url(cocoa-c.webp),url(chip.webp),url(round45.webp),url(heart-c.webp),url(miso.webp);background-repeat:no-repeat;background-size:14.5% auto;background-position:0 50%,20% 50%,40% 50%,60% 50%,80% 50%,100% 50%}
body.site2026-skin main#main .ftk-review-trial-image td::after{content:"6種を10枚ずつ 合計60枚";display:block;margin-top:10px;font-family:var(--s26-font);font-size:14.5px;font-weight:700;letter-spacing:.04em;color:var(--brown)}
body.site2026-skin main#main .ftk-checkout-reward{position:relative;margin-top:18px;padding:20px 22px;background:var(--cream);border:0;border-radius:6px;font-family:var(--s26-font)}
body.site2026-skin main#main .ftk-checkout-reward::before{content:"お試しセットの特典\A 次回のお買い物が 1,000円OFF";display:block;white-space:pre-line;font-size:clamp(18px,2.2vw,22px);font-weight:700;line-height:1.7;letter-spacing:.04em;color:var(--brown);margin-bottom:6px}
body.site2026-skin main#main .ftk-checkout-reward::first-line{font-size:12.5px;letter-spacing:.14em;color:var(--butter2)}
body.site2026-skin main#main .ftk-checkout-reward::after{content:"税込の商品代 5,000円以上で使えます\A 購入日から60日間 1回限り\A まとめ買いの特典と併用できます";display:block;white-space:pre-line;font-size:14px;line-height:1.9;color:var(--brown2)}