/* ========================================================================
ResetCss
======================================================================== */
/* 要素 フォントサイズ・マージン・パディングをリセット */
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%;
  font-weight: normal;
  vertical-align:baseline;
  background:transparent;
}

/* 行の高=フォントサイズ */
body {
  line-height:1;
}

/* 新規追加要素をブロック要素化 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

/* ulのマーカー非表示 */
ol, ul {
  list-style: none;
}

/* 引用符の非表示 */
blockquote, q {
  quotes:none;
}

/* blockquote要素、q要素の前後にコンテンツ非表示 */
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

/* フォントサイズ　リセット フォントの縦方向 ベースライン揃え 点線削除 */
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  outline: none;
  text-decoration: none;
}
/* キーボード操作時のみフォーカスリングを表示(マウス操作時の見た目は変えず、キーボード利用者のアクセシビリティを確保) */
a:focus-visible,
button:focus-visible {
  outline: .2rem solid #6b7280;
  outline-offset: .2rem;
}

/* テキスト 打ち消し線 */
del {
  text-decoration: line-through;
}

/*　隣接するセルのボーダーを重ねて表示　*/
table {
  border-collapse:collapse;
  border-spacing:0;
}

/* 水平罫線デフォルトリセット */
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

/* 縦方向の揃え 中央揃え */
input, select {
  vertical-align:middle;
}

/* 画像を縦に並べた時に余白0 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*画像レスポンシブ*/
img {
  max-width: 100%;
  height: auto;
}

/*改行のweb際のBR高さバグ修正*/
br {
  line-height: inherit;
}

/*  共通
-------------------------------------------------------------*/
html {
  width: 100%;
  min-height: 100%;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media screen and (max-width: 1920px) {
  html { font-size: 0.6944444vw; /* 10 ÷ 1440 × 100 */ }
}

@media (max-width: 999px) {
  html { font-size: 2.6666667vw; }
}

body {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  background: none;
  width: 100%;
  min-height: 100%;
  position: relative;
  margin: 0;
  line-height: normal;
  font-size: 1.4rem;
  color: #1a1a1a;
}

/* 見出し等に使う欧文フォント */
.en {
  font-family: "Hubballi", sans-serif;
  font-weight: 400;
}

a {
  color: #1a1a1a;
  -webkit-transition: all .2s;
  transition: all .2s;
}
a:hover {
  opacity: .7;
}
a img:hover {
  opacity: .7;
}
button {
  -webkit-transition: all .2s;
  transition: all .2s;
}

.inner {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  position: relative;
}

/* セクション見出し(英字ラベル+日本語タイトル)。トップページの各セクションで共通利用 */
.section-header .en {
  font-size: 1.8rem;
  color: #6b7280;
  text-transform: uppercase;
}
.section-header .ja {
  margin-top: .2rem;
  font-size: 1.8rem;
  color: #1a1a1a;
  font-weight: 500;
}

/* スクロール抑止(ハンバーガーメニュー展開時) */
html.no-scroll {
  overflow: hidden;
}
body.no-scroll {
  position: fixed;
  right: 0;
  left: 0;
  overflow: hidden;
}
/* position:stickyはbody自体がposition:fixedになると効かなくなるため、
   スクロール固定中は送料バー/ヘッダーをfixedに切り替えて画面上部に留める */
body.no-scroll .restock-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
body.no-scroll #header {
  position: fixed;
  top: 3.6rem;
}

/* =================================================================
送料無料バー
=================================================================*/
.restock-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1001;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6b7280;
}
.restock-bar p {
  font-size: 1.1rem;
  line-height: normal;
  color: #fff;
  font-weight: 500;
  text-align: center;
}

/* =================================================================
ヘッダー
=================================================================*/
#header {
  position: -webkit-sticky;
  position: sticky;
  top: 3.6rem;
  left: 0;
  width: 100%;
  height: 6.4rem;
  background: #fffdfb;
  border-bottom: 1px solid #ede9e2;
  z-index: 1000;
}
#header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.6rem;
  max-width: 100%;
}

@media screen and (max-width: 999px) {
  #header {
    background: #f3f4f6;
    border-bottom: none;
  }
}

/* ハンバーガーボタン(押下でばつ印にアニメーション変化) */
.hamburger {
  position: relative;
  width: 4rem;
  height: 3.2rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  position: absolute;
  left: .4rem;
  width: 3.2rem;
  height: 1px;
  background: #8c8c8c;
  border-radius: 9999px;
  -webkit-transition: transform .3s ease, opacity .3s ease;
  transition: transform .3s ease, opacity .3s ease;
}
.hamburger span:nth-child(1) { top: 1.0rem; }
.hamburger span:nth-child(2) { top: 1.6rem; }
.hamburger span:nth-child(3) { top: 2.2rem; }

/* 押下時: 上下のバーを中央(1.6rem)に寄せて45度回転させ、ばつ印にする */
.hamburger.is-active span:nth-child(1) {
  top: 1.6rem;
  transform: rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  top: 1.6rem;
  transform: rotate(-45deg);
}

.logo {
  position: absolute;
  left: 50%;
  top: 1.1rem;
  transform: translateX(-50%);
  width: min(19.6rem, 50vw);
  height: 4.2rem;
}
.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
}
.header-icons .icon-search {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.header-icons .icon-search:hover {
  opacity: .7;
}
.header-icons .icon-search img {
  width: 2.1rem;
  height: 2.115rem;
  transform: scaleY(-1);
}
.header-icons .icon-cart {
  position: relative;
}
.header-icons .icon-cart img {
  width: 1.95rem;
  height: 2.096rem;
}
.header-icons .icon-cart .badge {
  position: absolute;
  top: -.2rem;
  right: -.4rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #c40080;
}

/* =================================================================
ハンバーガーメニュー
=================================================================*/
.head-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity .3s ease, visibility .3s ease;
  transition: opacity .3s ease, visibility .3s ease;
}
.head-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.head-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .2);
}
/* メニュー項目の見た目(SP・PC共通。SPの375px基準デザイン値を流用) */
.head-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 3.2rem 1.6rem;
}
.head-menu-item a,
.head-menu-sub-item a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.head-menu-list .en,
.head-menu-sub-list .en {
  font-size: 2.1rem;
  line-height: normal;
  letter-spacing: .2rem;
  color: #000;
  text-transform: uppercase;
}
.head-menu-list .ja,
.head-menu-sub-list .ja {
  font-size: 1.2rem;
  line-height: normal;
  font-weight: 300;
  color: #6b7280;
}

/* メニュー下部(グレー背景: ガイド・ログイン・お問い合わせ・各種案内・SNS) */
.head-menu-sub {
  display: flex;
  flex-direction: column;
  gap: 3.8rem;
  padding: 6rem 0;
  background: #6b7280;
}
.head-menu-sub-list {
  display: flex;
  flex-direction: column;
  gap: 3.8rem;
  padding: 0 1.6rem;
}
.head-menu-sub-list .en,
.head-menu-sub-list .ja {
  color: #fff;
}
.head-menu-guide {
  padding: 0 1.6rem;
}
.head-menu-guide a {
  font-size: 1.2rem;
  line-height: 2.5rem;
  font-weight: 300;
  color: #fff;
}
.head-menu-sns {
  display: flex;
  gap: 2.4rem;
  padding: 0 2rem;
}
.head-menu-sns img {
  display: block;
  width: 2rem;
  height: 2rem;
}

/* SP(999px以下): 画面全面。ヘッダーは上に残り、内容はヘッダー下端から(padding-topはJSで実測) */
@media screen and (max-width: 999px) {
  .head-menu {
    background: #f3f4f6;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .head-menu-overlay {
    display: none;
  }
}

/* PC(1000px以上): 左寄せ35.7remのドロワー。ヘッダーの下から表示(topはJSで実測)、
   ヘッダーは上に残り、右側は薄い背景・押下で閉じる */
@media screen and (min-width: 1000px) {
  .head-menu-nav {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 35.7rem;
    background: #f3f4f6;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =================================================================
検索バー(ヘッダーの検索アイコン押下で、アイコン位置から右→左へ約27remぶん展開。
オーバーレイ押下 / Escで閉じる。閉じるアニメーションは無し)
=================================================================*/
.head-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, .2);
  opacity: 0;
  visibility: hidden;
}
.head-search.is-open .head-search-overlay {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}
/* 検索アイコンの右端を基点に幅を広げるクリップ。閉時はアイコン幅ぶんだけ表示。
   展開時のみ transition を効かせ、閉じる際は即座に戻す */
.head-search-clip {
  position: fixed;
  right: 0;
  z-index: 1050;
  width: 5rem;
  height: 6.4rem;
  overflow: hidden;
  visibility: hidden;
}
.head-search.is-open .head-search-clip {
  width: 27rem;
  visibility: visible;
  -webkit-transition: width .4s ease;
  transition: width .4s ease;
}
/* 検索ボックス本体。固定幅で右寄せし、クリップの幅アニメ中もリフローさせない */
.head-search-form {
  position: absolute;
  top: .7rem;
  right: 0;
  display: flex;
  align-items: center;
  width: 27rem;
  height: 5rem;
  padding-right: 1rem;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}
.head-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 1rem 0 1.5rem;
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  color: #2d2d2d;
}
.head-search-input::-webkit-input-placeholder { color: #777777; }
.head-search-input::placeholder {
  color: #777777;
}
.head-search-input:focus {
  outline: none;
}
/* ヘッダーの検索アイコンと同一位置・同一サイズに重ねる(見た目を変えない) */
.head-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.head-search-submit img {
  display: block;
  width: 2.1rem;
  height: 2.115rem;
  transform: scaleY(-1);
}

/* =================================================================
フッター
=================================================================*/
footer {
  background: #6b7280;
  padding: 4rem 2.4rem;
}
footer .footer-logo {
  display: block;
  width: 31.5rem;
  height: 6.7rem;
  max-width: 100%;
  margin: 0 auto;
}
footer .footer-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
footer .sns {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 3.2rem;
}
footer .sns img {
  display: block;
  width: 2rem;
  height: 2rem;
}
footer .copy {
  margin-top: 3.2rem;
  text-align: center;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, .8);
}