@charset "UTF-8";
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:#fff;
  color:#333;
  font-family:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif;
}
html, body{
  overflow-x:hidden;
}
.pane-contents {
  padding-bottom:0!important;
}
/* =========================
  Header height rules（Base）
========================= */
:root{
  --header-h:180px;
  --gnav-h:60px;
  --hd-top-h:calc(var(--header-h) - var(--gnav-h));
  --hd-pad-y:12px;
  --hd-pad-x:20px;
  --noticebar-h:40px;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
  outline:none;
  box-shadow:none;
}


.page-top main.pane-main{
  display:flex;
  flex-direction:column;
  padding:calc(var(--header-h) + var(--noticebar-h)) 0 0;
}

body:not(.page-top) main.pane-main{
  display:flex;
  flex-direction:column;
  padding-top:180px;
}
.mt10 {
  margin-top:10px!important;
}
.mt20 {
  margin-top:20px!important;
}
.mt30 {
  margin-top:30px!important;
}
.mt60 {
  margin-top:60px!important;
}
.mt90 {
  margin-top:90px!important;
}


/* ----商品一覧画面：商品詳細：block-goods-detail-j---- */
.block-goods-detail-j .block-goods-detail-j--items {
  grid-template-columns: 1fr 1fr 1fr; /* ★ 3列 (over ride)*/
}




/* =========================
  Image hover（opacity only / PC）
========================= */
@media (hover:hover) and (pointer:fine){

  a img,
  .is-hover-img{
    transition: opacity 0.2s ease;
  }

  a:hover img,
  .is-hover-img:hover{
    opacity:0.5;
  }
}

.sp-only{
  display: none;
}
@media (max-width: 767px){
  .sp-only{
    display: block;
  }
}

/* =========================
  Header（Base）
========================= */
#header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10000;
  background:#fff;
}

.hd-top{
  position:relative;
  height:var(--hd-top-h);
  padding:var(--hd-pad-y) var(--hd-pad-x);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ---------- 左：電話 ---------- */
.hd-tel{
  display:flex;
  align-items:center;
}
.hd-tel img{
  width:min(240px, 24vw);
  height:auto;
}

/* ---------- ロゴ ---------- */
.hd-logo img{
  width:min(90px, 10vw);
  height:auto;
}

/* かご 数量（丸囲み） */
/* 親を基準にする */
.hd-icon{
  position: relative;
}

/* かご 数量バッジ */
.block-headernav--cart-count{
  position: absolute;
  top: -6px;
  right: 5px;
  font-family:
    "Yu Gothic",
    "游ゴシック",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  font-weight:700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  line-height: 1;
  color: #bf292a;
  background: #fff;
  border: 1.5px solid #bf292a;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 2;
}
@media (max-width:767px){
  .block-headernav--cart-count{
    top: -10px;
    right: 0;
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
}

a.block-list-add-cart-btn {
  padding:12px 0!important;
}


/* =========================
  PC scroll compact header
  - left tel -> hidden
  - left logo -> shown (fixed 80x80)
  - center logo -> fade out (no position shift)
  - prevent double-display when back to top
========================= */

/* 追加ロゴ：デフォルトは非表示（PCでも最初は隠す） */
.hd-logo-sub{
  display:none;
  overflow:hidden; /* ★念のため：大きいロゴでもはみ出しを隠す */
}
.hd-logo-sub__img{
  display:block;
  height:auto;
  max-width:100%;
}

/* アニメーション（ガクつき軽減） */
body.is-pc-scrolled #header,
body.is-pc-scrolled .hd-top{
  transition:
    height .5s ease,
    padding .1s ease; /* ←縮める時だけゆっくり */
}
/* PCのみ対象 */
@media (min-width: 768px){

  /* 通常時：左TEL表示、中央ロゴ表示 */
  .hd-tel{display:block;}
  .hd-logo{display:block;}

  /* ★中央ロゴ：displayは触らず opacityのみ（座標ズレ防止） */
  .hd-logo{
    opacity:1;
    transition: opacity 1s ease;
    transition-delay: .1s; /* ★トップ復帰時に少し遅れて出して二重を防ぐ */
  }

  /* ===== 中央ロゴ：スクロール中（= “消える”側） ===== */
  body.is-pc-scrolled .hd-logo{
    opacity:0;
    pointer-events:none;

    /* ★消えるときは速く・ディレイ無し */
    transition: opacity .3s ease;
    transition-delay: 0s;
  }


  /* ★スクロール後：変数上書きでヘッダーを縮める */
  body.is-pc-scrolled{
    --header-h:130px;         /* スクロール後のヘッダー高 */
    --gnav-h:60px;
    --hd-top-h:calc(var(--header-h) - var(--gnav-h));
    --hd-pad-y:8px;
  }

  /* スクロール後：左TELを隠す */
  body.is-pc-scrolled .hd-tel{
    display:none;
  }

  /* スクロール後：左の代替ロゴを表示（固定） */
  body.is-pc-scrolled .hd-logo-sub{
    display:block;
    width:70px;
    height:70px;
    overflow:hidden;
    margin-top:10px!important;

    /* ★演出：ふわっと出す（display切替なのでopacityは補助的に） */
    opacity:0;
    transform: scale(0.92);
    animation: hdLogoSubIn 1.22s ease forwards;
    animation-delay: .10s; /* ★中央が消えた後に出る */
  }

  @keyframes hdLogoSubIn{
    to{
      opacity:1;
      transform: scale(1);
    }
  }

  /* ★固定枠に必ず収める（縦横どっちが大きくてもOK） */
  body.is-pc-scrolled .hd-logo-sub__img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    display:block;
  }

  /* スクロール後：中央ロゴを隠す（display:none禁止。opacityのみ） */
  body.is-pc-scrolled .hd-logo{
    opacity:0;
    pointer-events:none;
    transition-delay: 0s; /* ★スクロール開始時はすぐ消す */
  }
}

@media (min-width: 768px){
  main {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }
  main:has(.block-filter--treelist-layer){
    overflow-x: visible;
  }
  .hd-logo{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
}

/* ---------- アイコン ---------- */
.hd-right{
  display:flex;
  align-items:flex-end;
}
.hd-icons{
  display:flex;
  align-items:flex-end;
}
.hd-icon{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#333;
  font-family:
    "Yu Gothic",
    "游ゴシック",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height:1.2;
}

/* =========================
  Hover effects（PC only）
========================= */
@media (hover:hover) and (pointer:fine){

  .hd-icon__img{
    transition:
      filter 0.2s ease,
      transform 0.2s ease;
  }

  .hd-icon:hover .hd-icon__img{
    transform: translateY(-2px);
  }
}




/* =========================
  [title] block-top-event タイトル調整
  - 上下逆
  - メイン：明朝 32px（SP 28px）
  - サブ（span）：ゴシック 14px normal / margin-bottom:10px
========================= */

h2.block-top-title{
  display: flex;
  flex-direction: column-reverse;
  font-family:
  "Zen Old Mincho",
  "Hiragino Mincho ProN",
  "Yu Mincho",
  "MS PMincho",
   serif;
  font-size: 32px;
  line-height: 1.3;
  padding-top:0;
  padding-bottom:20px;
  color:#333;
}

h2.block-top-title span{
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  color:#333;
}

@media (max-width:767px){
  h2.block-top-title{
    font-size: 28px;
  }
}





/* PC/SP 表示制御 */
.is-pc-only{display:inline-flex;}

/* ---------- ハンバーガー ---------- */
.hd-hamburger{
  display:none;
}

/* ---------- グロナビ ---------- */

.hd-gnav__inner{
  height:var(--gnav-h);
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:
    "Yu Gothic",
    "游ゴシック",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  font-size:14px;
  color:#666;
}

.is-sp-only{
  display:none;
}

/* =========================
  PC：1000px以上
========================= */
@media (min-width:1000px){
  .hd-icons{ gap:14px; }
  .hd-icon{ font-size:11px; min-width:56px; }
  .hd-icon__img{ width:32px; height:32px; }
}

/* =========================
  PC：1000px未満
========================= */
@media (max-width:999px) and (min-width:768px){
  :root{
    --hd-pad-y:clamp(8px, 1.2vw, 12px);
    --hd-pad-x:clamp(12px, 2.0vw, 20px);
  }
  .hd-icons{ gap:8px; }
  .hd-icon{ font-size:clamp(10px, 1.0vw, 11px); min-width:48px; }
  .hd-icon__img{ width:28px; height:28px; }
}

/* =========================
  SP（縦向き含む）
========================= */
@media (max-width:767px){
  :root{
    --ham:min(96px, 18vw);
    --header-h:var(--ham);
    --gnav-h:0px;
    --hd-top-h:var(--ham);
    --hd-pad-y:10px;
    --hd-pad-x:14px;
  }

  .hd-top{
    padding-right:calc(var(--hd-pad-x) + var(--ham));
    border-bottom: 1px solid #73aab7;
  }

  .hd-tel{display:none;}

  .hd-logo img{
    width:56px;
    height:56px;
  }

  .hd-icon{
    font-size:9px!important;
    min-width:46px;
	gap:6px;
  }
  .hd-icon__img{
    width:clamp(24px, 6.7vw, 30px)!important;
    height:auto;
  }

  .hd-icons{
    gap:clamp(6px, 1.8vw, 10px);
  }

  .is-pc-only{display:none;}
  .is-sp-only{display:block!important;}
  .hd-hamburger{
    display:flex;
    position:absolute;
    top:0;
    right:0;
    width:var(--ham);
    height:var(--ham);
    background:#bf292a;
    align-items:center;
    justify-content:center;
  }

	/* =========================
	ハンバーガーアイコン（☰ / ×）
	========================= */
	.hd-hamburger{
	cursor:pointer;
	}

	/* 中央に配置 */
	.hd-hamburger__icon{
	position:relative;
	width:26px;
	height:18px;transition: transform .45s cubic-bezier(.19,1,.22,1);
	}

	/* 三本線 */
	.hd-hamburger__icon::before,
	.hd-hamburger__icon::after,
	.hd-hamburger__icon span{
	content:"";
	position:absolute;
	left:0;
	width:100%;
	height:2px;
	background:#fff;
	transition:transform .25s ease, opacity .25s ease;
	}

	/* 上・中・下 */
	.hd-hamburger__icon::before{ top:0; }
	.hd-hamburger__icon span{
	top:8px;
	}
	.hd-hamburger__icon::after{ bottom:0; }

	/* ========== 開いた状態（×） ========== */
	#header_menu.active .hd-hamburger__icon{
	transform: rotate(90deg);
	}
	#header_menu.active .hd-hamburger__icon::before{
	transform:translateY(8px) rotate(45deg);
	}

	#header_menu.active .hd-hamburger__icon::after{
	transform:translateY(-8px) rotate(-45deg);
	}

	#header_menu.active .hd-hamburger__icon span{
	opacity:0;
	}

	/* グロナビ不要 */
	.hd-gnav{
		display:none;
	}
}

/* =========================
  SP 横向き（landscape）調整 ver.3.1
========================= */
@media (max-width:767px) and (orientation: landscape){
  :root{
    --ham:72px;
    --header-h:72px;
    --hd-top-h:72px;
    --hd-pad-y:6px;
    --hd-pad-x:16px; /* 左右余白を広く */
  }

  .hd-top{
    padding-right:calc(var(--hd-pad-x) + var(--ham));
  }

  /* ロゴを少し大きく */
  .hd-logo img{
    width:55px;
    height:55px;
  }

  /* アイコンを少し大きく */
  .hd-icon__img{
    width:28px!important;
  }

  /* フォントを少し大きく */
  .hd-icon{
    font-size:10px!important;
    min-width:44px;
  }

  /* アイコン間の余白を広げる */
  .hd-icons{
    gap:16px;
  }
}

/* =========================
  Header Search Panel (RESET)
========================= */

.hd-right{
  position: relative; /* ★PC吹き出しの基準 */
}

/* パネル：滑らかに表示/非表示（JSは is-open の付け外しだけでOK） */
.hd-searchpanel{
  display: block; /* ← transitionさせるため display:none をやめる */
  box-sizing: border-box;
  background: #fff!important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-6px);
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility 0s linear .22s;
}

.hd-searchpanel.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
  transition:
    opacity .15s ease-out,
    transform .15s ease-out,
    visibility 0s;
}

/* 動きを減らす設定の人向け */
@media (max-width:767px){
  .hd-searchpanel{
    transform: none;
  }
}

/* フォーム共通 */
.hd-searchpanel__form{
  display:block;
  width:100%;
  align-items: center;
  gap: 10px;
}
/* 入力＋内ボタンの枠（白背景の“入力エリア”） */
.hd-searchpanel__field{
  position:relative;
  width:100%;
  background:#fff;
  box-sizing:border-box;
}
.hd-searchpanel__input{
  width:85%;
  height:40px;
  padding:0 44px 0 10px; /* 右44px＝内ボタン領域 */
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;

  font-family:
    "Yu Gothic",
    "游ゴシック",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  background: #fff;
  font-size:16px;
}
/* 内側の検索ボタン（右寄せ） */
.hd-searchpanel__inbtn{
  position:absolute;
  top:0;
  right:0;
  width:44px;
  height:40px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
}
.hd-searchpanel__inbtnimg{
  width:22px;
  height:auto;
  display:block;
}

.hd-searchpanel__submit{
	display:none !important;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #4d4d4d;
  background: #fff;
  cursor: pointer;
}

/* ===== PC：吹き出し ===== */
@media (min-width: 768px){
  .hd-searchpanel{
    position: absolute;
    top: calc(100% + 18px);
    left: 0;
    z-index: 10060;

    background: transparent;
    border: 1px solid #4d4d4d;
    padding: 7px 12px;

    width: 280px!important;                  /* 基本幅 */
    max-width: calc(100vw - 24px); /* 画面からはみ出さない */
    box-sizing: border-box;
  }

  /* 矢印：枠線のみ（JSは「中心座標」を渡す） */
  .hd-searchpanel::before,
  .hd-searchpanel::after{
    content:"";
    position:absolute;
    top:-9px;
    left: var(--hd-searcharrow-cx, 50%);
    width:0;
    height:0;
    border-style:solid;
    transform: translateX(-50%);
  }
  .hd-searchpanel::before{
    border-width:0 9px 9px 9px;
    border-color:transparent transparent #4d4d4d transparent;
  }
  .hd-searchpanel::after{
    top:-8px;
    border-width:0 8px 8px 8px;
    border-color:transparent transparent #fff transparent;
  }
}
/* 吹き出し幅調整 */
@media (max-width:999px) and (min-width: 768px){
  .hd-searchpanel{
    width: min(240px, calc(100vw - 24px))!important;
  }
}

/* ===== SP：ヘッダー下に横幅100%（背景 #73aab7） ===== */
@media (max-width:767px){
  .hd-searchpanel{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 10040;

    background: #73aab7!important;
    padding: 20px 14px;
    border: 0;
    min-width: 0;
  }

  .hd-searchpanel::before,
  .hd-searchpanel::after{
    display:none;
  }

  .hd-searchpanel__input{
	width:100%;
    flex: 1 1 auto;
    min-width: 0;
	height: 48px;
	font-size:18px;
	padding: 7px 60px 7px 20px!important;
    border: 1px solid #4d4d4d !important;
    box-sizing: border-box;
  }
  .hd-searchpanel__inbtn{
    width: 56px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
	right: 10px;
  }

  .hd-searchpanel__inbtnimg{
    width: 24px;
    height: auto;
    display: block;
  }
}

/* グロナビ */
/* =========================
  Global Navigation
========================= */
.hd-gnav{
  background:#fff;
}

.hd-gnav__inner{
  display:flex;
  justify-content:center;
}

/* ---- ナビ本体 ---- */
.gnav{
  height:var(--gnav-h);
}

.gnav__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  height:100%;
  align-items:center;
}

.gnav__item{
  position:relative;
}

/* 明朝・太字 */
.gnav__link{
  position:relative;
  display:flex;
  align-items:center;
  height:var(--gnav-h);
  padding:0 24px;
  color:#333;
  font-family:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif;
  font-weight:700;
  text-decoration:none!important;
  white-space:nowrap;
}
/* 商品一覧だけ矢印調整 */
.gnav__item--has-sub .gnav__link{
  padding-right:38px;
}

/* hover時の視覚変化（全メニュー共通でOK） */
.gnav__item:hover .gnav__link,
.gnav__item:focus-within .gnav__link{
  background:#e6f1f2;
  opacity:0.52;
}

/* ▼ 下向き矢印（CSS）：デフォルトは非表示 */
.gnav__link::after{
  content:"";
  position:absolute;          /* ★変更 */
  right:24px;                  /* ★右端基準 */
  margin-left:6px;
  width:8px;
  height:8px;
  border-right:2px solid #bf292a;
  border-bottom:2px solid #bf292a;
  transform: rotate(45deg) translateY(-2px)!important;
  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
}

/* 1000px未満で文字を少し縮小 */
@media (max-width: 999px){
  .gnav__link{
    font-size:clamp(13px, 1.6vw, 14px);
    padding:0 12px;
  }
  .gnav__link::after{
    width:7px;
    height:7px;
    margin-left:4px!important;
  }
  .gnav__item--has-sub .gnav__link{
	padding-right:26px;
  }
  .gnav__item--has-sub .gnav__link::after{
    right:14px;   /* ← ここを詰める（例） */
  }

}

/* =========================
  ▼ 矢印を出すのは「商品一覧だけ」
  li に .gnav__item--has-sub を付ける前提
========================= */

/* hover / focus：商品一覧だけ矢印表示 */
.gnav__item--has-sub:hover .gnav__link::after,
.gnav__item--has-sub:focus-within .gnav__link::after,
.gnav__item--has-sub.gnav__item--current .gnav__link::after{
  opacity:1;
  transform: rotate(45deg) translateY(0);
}

/* 初期表示（現在地）：商品一覧だけ矢印常時表示
   ※ current は商品一覧にだけ付く運用にする */
.gnav__item--has-sub.gnav__item--current .gnav__link::after{
  opacity:1;
  transform: rotate(45deg) translateY(0);
}

/* ---- サブメニュー（枠だけ） ----
   デフォルトは出さない（商品一覧以外も含めて完全OFF） */

/* ★親側に hoverブリッジ（サブへ移動する隙間で消えない） */
.gnav__item--has-sub::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
  background:transparent;
}

.gnav__sub{
  position:absolute;
  top:100%;
  margin-top:1px;
  left:-80px;
  background:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .18s ease, visibility 0s linear .18s;
  z-index:1000;
}
.gnav__sub::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-2px;      /* ★スキマを覆う */
  height:2px;    /* ★1pxより少し厚くして確実に */
  background:transparent;
}

@media (max-width:1150px) and (min-width:768px){
  .gnav__sub{
    left:-30px;
  }
}
@media (max-width:1025px) and (min-width:1000px){
  .gnav__sub{
    left:0;
  }
}
@media (max-width:999px) and (min-width:860px){
  .gnav__sub{
    left:-30px;
  }
}
@media (max-width:859px){
  .gnav__sub{
    left:0;
  }
}

/* hover / focus：商品一覧だけサブメニュー表示 */
.gnav__item--has-sub:hover .gnav__sub,
.gnav__item--has-sub:focus-within .gnav__sub{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity .18s ease, visibility 0s;
}

/* =========================
  グロナビ　サブメニュー
========================= */

.gnav__subinner{
  width:550px;
  padding:20px 40px 30px;   /* ★ 内側をしっかり広げる */
  box-sizing:border-box;
}

.gnav-sub{
  margin:0;
  padding:0;
  list-style:none;

  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:40px;     /* ★ padding と同程度に */
}

/* 各行：下にドット線 */
.gnav-sub__item{
  border-bottom:1px dotted #808080;
}

/* リンク全体 */
.gnav-sub__link{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:64px; /* 44pxサムネ + 上下padding(10+10)の想定 */
  padding:10px 28px 10px 0; /* 右は矢印分 */
  color:#333;
  text-decoration:none!important;
  font-size:clamp(13px, 1.2vw, 14px);
  font-family:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif;
  font-weight:700;
  transition: padding .18s ease, background-color .18s ease, opacity .18s ease;
}
/* hover時だけ左を広げる */
.gnav-sub__item:hover .gnav-sub__link,
.gnav-sub__item:focus-within .gnav-sub__link{
  padding-left: 8px;
}
/* 右矢印（グロナビと同デザイン） */
.gnav-sub__link::after{
  content:"";
  position:absolute;
  right:6px;
  top:50%;

  width:7px;
  height:7px;

  border-right:2px solid #bf292a;
  border-bottom:2px solid #bf292a;

  transform:translateY(-50%) rotate(-45deg);
}

/* サムネ（正方形） */
.gnav-sub__thumb{
  flex:0 0 auto;
  width:44px;
  height:44px;
  overflow:hidden;
  background:#f2f2f2;
}
.gnav-sub__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* テキスト */
.gnav-sub__txt{
  flex:1 1 auto;
  line-height:1.25;
  white-space:nowrap;
}

/* 画像なしパターン */
.gnav-sub__item--noimg .gnav-sub__thumb{
  display:none;
}
.gnav-sub__item--noimg .gnav-sub__link{
  gap:0;
  padding-left:0;
}

/* hover 表現 */
.gnav-sub__item:hover .gnav-sub__link,
.gnav-sub__item:focus-within .gnav-sub__link{
  background:#e6f1f2;
  opacity:0.5;
}

/* =========================
  お知らせバー
========================= */
.noticebar{
  height:var(--noticebar-h);
  width:100%;
  background:#73aab7;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* Swiper コンテナ */
.noticebar__inner{
  width:100%;
  height:100%;
}

/* Swiper 内は高さを揃える */
.noticebar .swiper-wrapper,
.noticebar .swiper-slide{
  height:100%;
}

/* お知らせテキスト（リンク） */
.noticebar__link{
  margin:0;
  padding:0 20px;

  height:100%;
  width:100%;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;                /* ★アイコンと文字の間隔 */

  color:#fff;
  font-weight:400;
  font-size:16px;
  text-align:center;
  text-decoration:none;

  font-family:
    "Yu Gothic",
    "游ゴシック",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
/* =========================
  Swiper 初期表示のチラつき防止
========================= */
.swiper:not(.swiper-initialized){
  opacity: 0;
  visibility: hidden;
}
.swiper.swiper-initialized{
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease;
}

/* =========================
  共通アイコン（before化）
========================= */
.noticebar__link::before{
  content:"";
  width:15px;
  height:15px;
  flex-shrink:0;
  display:block;

  background:url("../../img/usr/common/i.png")
             no-repeat center / contain;
}

/* PCのみ：視覚的中央補正 */
@media (min-width: 768px){
  .noticebar__link::before{
    transform: translateY(-1px);
  }
}

/* hover（PCのみ） */
@media (hover:hover){
  .noticebar__link:hover{
    opacity:.5;
    text-decoration:underline;
    text-underline-offset: 2px;
  }
}

/* =========================
  SP Slide Menu（確定：左側は透明、右から出る）
========================= */

/* スクロール固定（EC-being方式） */
body.body-fixed{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

/* メニュー全体（ヘッダー直下） */
#menu_view{
  display:none;
  position:fixed;
  top:var(--header-h)!important;
  left:0;
  right:0;
  bottom:0;
  z-index:20000;

  background:transparent !important; /* ★左側が白になるのを根絶 */
}
#menu_view.current{
  display:block;
}

/* 背景：透明（クリック閉じ領域としては残す） */
#menu_view .spmenu__bg{
  position:absolute;
  inset:0;
  background:transparent !important; /* ★塗らない */
}

/* 右パネル：右から出す（縦は100%） */
#menu_view .spmenu__panel{
  position:absolute;
  top:0;
  right:0;
  left:auto;

  height:100%;
  width:100%;

  background:#e6f1f2; /* ★色はパネルだけ */

  transform:translateX(100%);
  transition:transform .28s ease;

  overflow:auto;
  -webkit-overflow-scrolling:touch;

  padding:0;
  box-sizing:border-box;
}
/* 下部UIに隠れないための逃がし余白 */
#menu_view .spmenu__panel::after{
  content:"";
  display:block;
  height:70px; /* Android対策：実寸で逃がす */
}
#menu_view.current .spmenu__panel{
  transform:translateX(0);
}

/* 横向き：右70%だけ（左は透明で下レイヤーが見える） */
@media (max-width:767px) and (orientation: landscape){
  #menu_view .spmenu__panel{
    width:70vw;
  }
}

/* パネル最上部 1px ライン */
#menu_view .spmenu__panel::before{
  content:"";
  position:sticky;
  top:0;
  z-index:2;

  display:block;
  width:100%;
  height:1px;
  background:#73aab7;
}
/* リスト */
#menu_view .spmenu__nav ul{
  list-style:none;
  margin:0;
  padding:0;
}
#menu_view .spmenu__nav li{
  border-bottom:1px solid #fff;
}

/* リンク全体（太字・左余白増） */
#menu_view .spmenu__nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:20px 16px 20px 28px; /* ★テキスト左余白 */
  font-size:18px;
  font-weight:700;             /* ★太字 */
  line-height:1.5;

  color:#333;
  text-decoration:none;
}
#menu_view .spmenu__nav a:active{
  background:#73aab7;
  color:#fff;
}
/* 電話番号画像のリンクはタップ時に色を変えない */
#menu_view .spmenu__tel a:active,
#menu_view .spmenu__tel a:focus{
  background:transparent;
  color:inherit;
}

/* 右端アイコン枠（共通） */
#menu_view .spmenu__ico{
  position:relative;
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 商品一覧：＋／−（CSS） */
#menu_view .spmenu__item--products .spmenu__ico::before,
#menu_view .spmenu__item--products .spmenu__ico::after{
  content:"";
  position:absolute;
  background:#bf292a;
  transition:transform .25s ease, opacity .25s ease;
}
#menu_view .spmenu__item--products .spmenu__ico::before{
  width:14px;
  height:2px;
}
#menu_view .spmenu__item--products .spmenu__ico::after{
  width:2px;
  height:14px;
}
#menu_view .spmenu__item--products.is-open .spmenu__ico::after{
  transform:scaleY(0);
}

/* 通常：右矢印（＞） */
#menu_view .spmenu__item:not(.spmenu__item--products) .spmenu__ico::before{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background:transparent;
  border-top:2px solid #73aab7;
  border-right:2px solid #73aab7;
  transform:rotate(45deg);
  margin-right:3px; /* 微調整 */
}
#menu_view .spmenu__item:not(.spmenu__item--products) .spmenu__ico::after{
  content:none;
}

/* PCでは使わない（保険） */
@media (min-width: 768px){
  #menu_view{display:none!important;}
}

/* =========================
  ハンバーガー内 電話ブロック
========================= */

#menu_view .spmenu__tel{
  list-style:none;
  text-align:center;       /* 左右中央 */
  padding:15px 0;     /* 上下に若干の余白 */
  border-bottom:none;      /* 仕切り線は不要 */
}

#menu_view .spmenu__tel a{
  display:inline-block;
  padding:20px 0;
}

#menu_view .spmenu__tel img{
  width:auto;
  max-width:75%;
  height:auto;
}

/* =========================
  電話下：3等分リンク + 閉じるボタン
========================= */

/* 電話と3等分の間の横線（指定色） */
#menu_view .spmenu__gridline{
  width:100%;
  height:1px;
  background:#73aab7;
}

/* 3等分ブロック全体（liなのでborderを消す） */
#menu_view .spmenu__gridwrap{
  border-bottom:none;
  padding:0;
  margin:0;
}

/* 3等分 */
#menu_view .spmenu__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  width:100%;
}

/* 各セル（リンク） */
#menu_view .spmenu__griditem{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px!important;

  min-height:30px;
  padding:20px 0!important;

  text-decoration:none;
  background:transparent;

  font-family:
    "Yu Gothic",
    "游ゴシック",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  font-weight:700;
  color:#333;
}

/* 仕切り線（左-中央、中央-右） */
#menu_view .spmenu__griditem + .spmenu__griditem{
  border-left:1px solid #73aab7;
}

/* アイコン */
#menu_view .spmenu__gridicon img{
  width:28px;
  height:auto;
  display:block;
}

/* テキスト */
#menu_view .spmenu__gridtxt{
  font-size:13px;
  line-height:1.2;
  text-align:center;
}

/* タップ時 */
#menu_view .spmenu__griditem:active{
  background:rgba(115,170,183,.18);
}

/* ===== 閉じるボタン（横幅100%） ===== */
#menu_view .spmenu__closebtn{
  border-bottom:none;
  padding:0;
  margin:0;
}

#menu_view .spmenu__close{
  width:100%;
  border:0;
  background:#73aab7;
  color:#fff;
  padding:18px 16px;
  cursor:pointer;

  font-family:
    "Yu Gothic",
    "游ゴシック",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;            /* ★ゴシック */
  font-weight:700;
  font-size:16px;
  line-height:1.2;
}

#menu_view .spmenu__close:active{
  opacity:0.85;
}

/* =========================
  spmenu accordion（商品一覧）追記
========================= */
#menu_view .spmenu-acc__panel{
  overflow:hidden;
}

/* アコーディオン内（背景 #fff／仕切り線 #e6f1f2） */
#menu_view .spmenu-acc__list{
  list-style:none;
  margin:0;
  padding:0;
  background:#fff;
  border-top:1px solid #e6f1f2;
}
#menu_view .spmenu-acc__item{
  border-bottom:1px solid #e6f1f2!important;
}

/* 中身リンク：既存spmenuリンクに寄せる */
#menu_view .spmenu-acc__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px!important;

  padding:12px 16px 12px 28px !important;
  font-size:16px;
  font-weight:700;
  line-height:1.5;

  background:#fff;
  color:#333;
  text-decoration:none;
}
#menu_view .spmenu-acc__link:active{
  background:#73aab7;
  color:#fff;
}

/* ===== 画像なし：親メニューと同じ縦幅 ===== */
#menu_view .spmenu-acc__item--noimg .spmenu-acc__link{
  padding:20px 16px 20px 28px !important;
  gap:12px !important; /* 画像がないので通常間隔に戻す */
}

/* 画像 */
#menu_view .spmenu-acc__thumb{
  flex:0 0 auto;
  width:44px;
  height:44px;
  overflow:hidden;
  background:#f5f5f5;
}
#menu_view .spmenu-acc__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* テキスト */
#menu_view .spmenu-acc__txt{
  flex:1 1 auto;
}

/* 画像なし */
#menu_view .spmenu-acc__item--noimg .spmenu-acc__thumb{
  display:none;
}

/* 右矢印（既存の色に合わせる） */
#menu_view .spmenu-acc__arrow{
  position:relative;
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#menu_view .spmenu-acc__arrow::before{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background:transparent;
  border-top:2px solid #73aab7;
  border-right:2px solid #73aab7;
  transform:rotate(45deg);
  margin-right:3px;
}

/* =========================
  商品一覧：＋ → 横向き「―」専用アレンジ
========================= */

/* 共通：アニメーション */
#menu_view .spmenu__item--products .spmenu__ico::before,
#menu_view .spmenu__item--products .spmenu__ico::after{
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    opacity   .28s ease;
  transform-origin:center;
}

/* デフォルト（＋） */
#menu_view .spmenu__item--products:not(.is-open) .spmenu__ico::before{
  transform:scaleX(1);
}
#menu_view .spmenu__item--products:not(.is-open) .spmenu__ico::after{
  transform:scaleY(1);
  opacity:1;
}

/* OPEN（―）
   縦線は消す */
#menu_view .spmenu__item--products.is-open .spmenu__ico::after{
  transform:scaleY(0);
  opacity:0;
}

/* OPEN（―）
   横線を「横向き―」として強調 */
#menu_view .spmenu__item--products.is-open .spmenu__ico::before{
  transform:scaleX(1.8);   /* 長くする */
  opacity:1;
}

/* ほんの少しスライドして“変わった感”を出す */
#menu_view .spmenu__item--products.is-open .spmenu__ico{
  transform:translateX(-2px);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}

/* 押した感（分かりやすさUP） */
#menu_view .spmenu__item--products > a:active .spmenu__ico{
  transform:scale(.92);
}

/* 動き軽減設定 */
@media (prefers-reduced-motion: reduce){
  #menu_view .spmenu__item--products .spmenu__ico,
  #menu_view .spmenu__item--products .spmenu__ico::before,
  #menu_view .spmenu__item--products .spmenu__ico::after{
    transition:none!important;
  }
}





/* =========================
  Footer アイコンセット（共通）
========================= */
.pane-footer {
  margin-top:50px;
  background:#fff!important;
  padding:0!important;
}

.page-top .footer-iconset {
  margin-top:0;
  padding-bottom:70px;
}


/* 全体 */
.footer-iconset{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  box-sizing:border-box;
}

/* トップページ以外の footer-icon */
@media (max-width:1050px){
  body:not(.page-top) .footer-iconset{
    padding:0 1%!important;
  }
}


/* リスト（PC / SP 共通：3列×2段） */
.footer-iconset__list{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:15px; /* PCの余白 */
}

/* パネル */
.footer-iconset__item{
  width:calc((100% - 40px) / 3); /* 3列 */
  box-sizing:border-box;
  position:relative;
}

/* リンク（PC：横並び） */
.footer-iconset__link{
  display:flex;
  align-items:center;
  gap:14px;

  border:1px solid #4d4d4d;
  background:#fff;

  padding:18px 16px;
  box-sizing:border-box;

  text-decoration:none;
  color:#333;

  position:relative;
}

/* 画像 */
.footer-iconset__icon{
  width:40px;
  height:auto;
  display:block;
  flex:0 0 auto;
}

/* テキスト */
.footer-iconset__text{
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  margin-top:5px;
}


/* =========================
  SP（3列×2段）
  ・上下は実線
  ・中の仕切りは接触しない
========================= */
@media (max-width:767px){

  .footer-iconset{
    max-width:none;
  }

  /* 上下の実線：borderではなく疑似要素で描画（確実に #73aab7） */
  .footer-iconset__list{
    position:relative;
    gap:0;
    border:0 !important; /* 既存borderは無効化（ダブり防止） */
  }

  .footer-iconset__list::before,
  .footer-iconset__list::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background:#73aab7;
    pointer-events:none;
    z-index:5;
  }

.footer-iconset__list::before{ top:0; }
.footer-iconset__list::after{ bottom:0; }

  .footer-iconset__item{
    width:calc(100% / 3);
  }

  /* リンク（SP：縦並び） */
  .footer-iconset__link{
    flex-direction:column;
    align-items:center;
    gap:15px;
    border:0;
    background:#fff;
    padding:20px 0;
    text-align:center;
  }

  /* 縦の仕切り線（非接触） */
  .footer-iconset__item:not(:nth-child(3n)) .footer-iconset__link::after{
    content:"";
    position:absolute;
    top:6px;
    bottom:6px;
    right:0;
    width:1px;
    background:#73aab7;
  }

  /* 横の仕切り線（非接触） */
  .footer-iconset__item:nth-child(-n+3) .footer-iconset__link::before{
    content:"";
    position:absolute;
    left:6px;
    right:6px;
    bottom:0;
    height:1px;
    background:#73aab7;
  }

  .footer-iconset__icon{
    width:40px;
  }

  .footer-iconset__text{
    font-size:14px;
    line-height:1.4;
    margin-top:0;
  }
}

/* hover装飾 */
.footer-iconset__link:hover{
  background: #e6f1f2;
  border-color: #73aab7;
  text-decoration: none;
}

.footer-iconset__item:hover{
  background: #e6f1f2;
  text-decoration: none;
}

.footer-iconset__item:hover .footer-iconset__link{
  text-decoration: none;
  color:#73aab7;
}






/* =========================
  Footer お問い合わせ
========================= */


.ft-contact{
  width:100%;
  position:relative;
}

.page-top .ft-contact{
  background:
    url("../../img/usr/common/pc/bg_island2.jpg")
    no-repeat
    center top / 100% auto;
}



/* 白背景が透けて背景画像が見える */
.page-top .ft-contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.42);
  pointer-events:none;
}

.ft-contact__inner{
  position:relative;
  max-width:1000px;
  width:100%;
  margin:50px auto 0;
  padding:50px 20px 60px;
  box-sizing:border-box;
}
.page-top .ft-contact__inner{
  margin-top:0;
}

/* タイトル：明朝 */
.ft-contact__ttl{
  margin:0;
  color:#333;
  font-family:
    "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-weight:700;
  font-size:22px;
  line-height:1.4;
  text-align:left; /* PC：左寄せ */
}

/* 下線（これ1本のみ） */
.ft-contact__line{
  width:100%;
  height:1px;
  background:#4d4d4d;
  margin:14px 0 45px;
}

/* 画像3点（PC：横並び） */
.ft-contact__items{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  column-gap:24px; /* PCは詰めて、端に寄せやすく */
}

.ft-contact__item{
  flex:1 1 0;
  display:flex; /* 端寄せ用 */
}

/* PC：左・中・右の寄せ */
.ft-contact__item:first-child{
  justify-content:flex-start;
}
.ft-contact__item:nth-child(2){
  justify-content:center;
}
.ft-contact__item:last-child{
  justify-content:flex-end;
}

/* PC：画像を大きく（80%指定はSPに閉じ込める） */
.ft-contact__item img{
  width:100%;
  max-width:290px;
  height:auto;
  display:block;
}

/* =========================
  SP
========================= */
@media (max-width:767px){
  .page-top .ft-contact{
    /* 背景画像（SP） */
    background:
      url("../../img/usr/common/sp/bg_island2.jpg")
      no-repeat
      center top / 100% auto;
  }

  .ft-contact__inner{
    max-width:none;
    width:100%;
    padding:38px 0 110px;
    margin:0;
  }



  .page-top .ft-contact::before{
    background:rgba(255,255,255,.42); /* 例：同じ */
    /* background:rgba(255,255,255,.3); ← さらに透けさせたい場合 */
  }



  .ft-contact__ttl{
    font-size:18px;
    text-align:center; /* SP：中央 */
  }

  .ft-contact__line{
    margin:12px auto 24px;
    width:92%;
  }

  .ft-contact__items{
    display:block; /* SP：縦並び */
  }

  .ft-contact__item{
    display:block; /* SPは寄せ指定不要 */
  }

  /* SP：画像80%（中央） */
  .ft-contact__item img{
    width:80%;
    margin:0 auto;
  }

  .ft-contact__item + .ft-contact__item{
    margin-top:30px;
  }
}



/* =========================
  FAX 注文用紙ダウンロード
========================= */
.ft-contact__inner{
  position:relative; /* 念のため（すでに指定済み） */
}

.ft-contact__faxdl{
  position:absolute;
  z-index:5;
  display:block;
  text-decoration:none;
}

/* 画像共通 */
.ft-contact__faxdl img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
}

/* =========================
  PC：右上
========================= */
@media (min-width: 768px){
  .ft-contact__faxdl{
    top:20px;
    right:20px;
  }

  .ft-contact__faxdl img{
    content:url("../../img/usr/common/pc/fax_dl.png");
    width:160px;
  }
}

/* =========================
  SP：右下
========================= */
@media (max-width:767px){
  .ft-contact__faxdl{
    bottom:25px;
    right:0;
  }

  .ft-contact__faxdl img{
    content:url("../../img/usr/common/sp/fax_dl.png");
    width:180px;
  }
}





/* トップ以外の共通 css */
body:not(.page-top) .hd-gnav{
  border-bottom: 1px solid #73aab7;
}
/*
body .pane-contents{
  content:'';
}
*/





/* マイページ */
.page-menu .block-mypage {
  max-width:1180px;
}


/* パンくず → 先頭へ */
.block-category-list{
  display: flex;
  flex-direction: column;
}
.block-category-list .block-topic-path{
  order: 0;
}
.block-topic-path,
.block-topic-path li,
.block-topic-path a{
  font-size: 12px;
}
.block-category-list > :not(.block-topic-path){
  order: 1;
}

/* パンくず・色固定 */
.block-topic-path--delimiter,.block-topic-path--list li a {
  color:#333;
}




/* お問い合わせ用　ぱんくず */
.block-inquiry{
  display:flex;
  flex-direction:column;
}
.page-contact .pane-main{
  overflow:visible!important;
}
.block-inquiry .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
}
.block-inquiry > :not(.block-topic-path){
  order: 1;
}

/* お問い合わせ履歴一覧用　ぱんくず */
.block-inquiry-history {
  display:flex;
  flex-direction:column;
}
.page-contactlist .pane-main{
  overflow:visible!important;
}
.block-inquiry-history .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin:0 auto!important;
}
.block-inquiry-history > :not(.block-topic-path){
  order: 1;
}









/* 定期契約情報 */
.block-regular-purcharse-list{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-regularhistory .pane-main{
  overflow:visible!important;
}
.block-regular-purcharse-list .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-regular-purcharse-list > :not(.block-topic-path){
  order: 1;
}


/* 購入履歴 */
.block-purchase-history{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-history .pane-main{
  overflow:visible!important;
}
.block-purchase-history .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-purchase-history > :not(.block-topic-path){
  order: 1;
}


/* クーポン */
.block-coupon-list{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-couponlist .pane-main{
  overflow:visible!important;
}
.block-coupon-list .block-topic-path{
  order:-1;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-coupon-list > :not(.block-topic-path){
  order: 1;
}


/* お気に入り */
.block-favorite{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-bookmark .pane-main{
  overflow:visible!important;
}
.block-favorite .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-favorite > :not(.block-topic-path){
  order: 1;
}


/* 入荷申し込み商品 */
.block-arrival-notice-list{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-backorder .pane-main{
  overflow:visible!important;
}
.block-arrival-notice-list .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-arrival-notice-list > :not(.block-topic-path){
  order: 1;
}


/* 会員情報変更 */
.block-member-info{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-customer .pane-main{
  overflow:visible!important;
}
.block-member-info .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-member-info > :not(.block-topic-path){
  order: 1;
}

/* 会員情報変更（更新） */
.block-member-info-confirmation{
  display:flex;
  flex-direction:column;
  margin-top:0;
}

.block-member-info-confirmation .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-member-info-confirmation > :not(.block-topic-path){
  order: 1;
}












/* メールアドレス変更 */
.block-update-mail-address{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-mailchange .pane-main{
  overflow:visible!important;
}
.block-update-mail-address .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-update-mail-address > :not(.block-topic-path){
  order: 1;
}


/* パスワード変更 */
.block-update-member-password{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-passchange .pane-main{
  overflow:visible!important;
}
.block-update-member-password .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-update-member-password > :not(.block-topic-path){
  order: 1;
}


/* アドレス帳登録 */
.block-shipping-address{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-custdest .pane-main{
  overflow:visible!important;
}
.block-shipping-address .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-shipping-address > :not(.block-topic-path){
  order: 1;
}


/* アドレス帳の新規登録・変更 */
.page-custdest .block-shipping-address-confirmation{
  margin-top:0;
  display: flex;
  flex-direction: column;
}

.page-custdest .block-topic-path{
  order: -1;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0!important;
}




/* 注文の詳細・出荷状況 */
.block-purchase-history-detail{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-historydetail .pane-main{
  overflow:visible!important;
}
.block-purchase-history-detail .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin-top:0;
}
.block-purchase-history-detail > :not(.block-topic-path){
  order: 1;
}

.page-historydetail .block-purchase-history-detail--customer-name {
  margin-top:20px;
}



/* 休止・再開 */
.block-regular-purcharse-pause{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-regularpause .pane-main{
  overflow:visible!important;
}
.block-regular-purcharse-pause .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin:0 auto;
}
.block-regular-purcharse-pause > :not(.block-topic-path){
  order: 1;
}

.page-regularpause .block-regular-purcharse-pause--customer-name {
  margin-top:20px;
}



/* クレジット */
.block-credit-card-confirmation{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-cardedit .pane-main{
  overflow:visible!important;
}
.block-credit-card-confirmation .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin:0 auto;
}
.block-credit-card-confirmation > :not(.block-topic-path){
  order: 1;
}


/* 頒布会変更(日時) */
.block-regular-purcharse-cycle-info-update{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-regularcycle .pane-main{
  overflow:visible!important;
}
.block-regular-purcharse-cycle-info-update .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin:0 auto;
}
.block-regular-purcharse-cycle-info-update > :not(.block-topic-path){
  order: 1;
}


/* 頒布会変更(住所) */
.block-regular-purcharse-shipment-info-update{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-regulardest .pane-main{
  overflow:visible!important;
}
.block-regular-purcharse-shipment-info-update .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin:0 auto;
}
.block-regular-purcharse-shipment-info-update > :not(.block-topic-path){
  order: 1;
}



/* 頒布会変更(支払い) */
.block-regular-purcharse-method-info-update{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.page-regularmethod .pane-main{
  overflow:visible!important;
}
.block-regular-purcharse-method-info-update .block-topic-path{
  order:0;
  transform:translateX(-50%);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
  margin:0 auto;
}
.block-regular-purcharse-method-info-update > :not(.block-topic-path){
  order: 1;
}










/* ホーム：画像置き換え（パターン1） */
.block-topic-path--item__home a span{
  display:inline-block;
  width:14px;
  height:14px;
  background:url("../../img/usr/common/home.png")
             no-repeat center / contain;
  text-indent: -9999px;
  overflow:hidden;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* ホーム：画像置き換え（パターン2） */
.block-topic-path--item__home a{
  display:inline-block;
  width:14px;
  height:14px;
  background:url("../../img/usr/common/home.png")
             no-repeat center / contain;
  text-indent: -9999px;
  overflow:hidden;
  vertical-align: middle;
  transform: translateY(-2px);
}


















/* パンくず：背景を画面幅いっぱいに引き延ばす（ズレ・空白対策込み） */
.block-topic-path{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;            /* ★ 上部の空白を消す */
  margin-bottom: 0;
  box-sizing: border-box;   /* ★ 100vwズレ防止 */
  background: #e6f1f2!important;
  padding: 8px 0!important;
  border: none;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* 中身だけ1000pxに制限 */
.block-topic-path--list{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.block-topic-path--category-item span {
  padding:0 0 0 5px;
}



.block-category-list{
  display:flex;
  flex-direction:column;
}

/* 1) 見出し */
.block-category-list--header{
  order: 0;
}

/* 2) パンくず */
.block-topic-path{
  order: 1;
}

/* 3) コメント */
.block-category-list--comment{
  order: 2;
}

/* 4) カテゴリメニュー */
#catemenu{
  order: 3;
}

/* 5) その他 */
.block-category-list > :not(.block-category-list--header):not(.block-topic-path):not(.block-category-list--comment):not(#catemenu){
  order: 4;
}

@media (max-width:767px){
  .block-topic-path--item__home a span{
    width:16px;
    height:16px;
  }
  .block-topic-path{
    padding: 8px 0;
  }
  .block-topic-path,
  .block-topic-path li,
  .block-topic-path a{
    font-size: 14px;
  }

}



/* カテゴリタイトル */
.block-category-list--header{
  font-family:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif;
  text-align: center;
  padding-top:50px!important;
  margin-bottom:10px!important;
  font-size:30px;
  color:#333;
}

.block-category-list--comment{
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  color:#333;
  text-align: center;
  font-size:16px;
  margin-bottom:70px;
}





.block-category-list{
  position: relative;
  z-index: 0;
}

/* 背景：高さに合わせて画像をフィット */
.block-category-list::before{
  content: "";
  position: absolute;
  top: 34px;
  left: 50%;
  width: 100vw;
  height: 230px;               /* ← 背景の縦幅を固定 */
  margin-left: -50vw;

  background-image: url("../../img/usr/common/pc/cate_wave.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;

  z-index: -1;
}



/* SP */
@media (max-width: 767px){
  .block-category-list::before{
    top: 37px;
    background-image: url("../../img/usr/common/sp/cate_wave.png");
    height: 240px;
  }

  .block-category-list--comment{
    margin-bottom:50px;
  }

}






/* =========================
  Footer（最下部フッター）
========================= */
.ft-footer{
  width:100%;
  background:#e6f1f2;
  font-family:
    "Yu Gothic","Yu Gothic Medium","游ゴシック体",
    "Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}

.ft-footer__inner{
  max-width:1140px;
  width:100%;
  margin:0 auto;
  padding:44px 0;
  box-sizing:border-box;

  display:flex;
  gap:0; /* PC：左右ブロックのギャップなし */
  align-items:flex-start;
}
@media (max-width: 1169px){
  .ft-footer__inner{
    padding:44px 10px;
  }

  .ft-footer__left{
    flex:0 0 47%!important;
  }
  .ft-footer__right{
    flex:0 0 53%!important;
  }
  .ft-footer-menu{
     column-gap:5px!important;
  }

}

/* =========================
  左右 50%（PC）
========================= */
.ft-footer__left{
  flex:1 1 0;
  min-width:0;
  order:1;
}

.ft-footer__right{
  flex:1 1 0;
  min-width:0;
  order:2;

  /* PC：メニュー3列＋SNS配置用 */
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:28px;
  row-gap:8px;
}

/* =========================
  左ブロック(A)（PC）
  左：ロゴ（2行分）
  右：上「三陸おのや」／下「住所」
========================= */
.ft-footer-brand{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:25px;
  row-gap:6px;
  align-items:start;
}

/* row内要素をgridに参加させる */
.ft-footer-brand__row{
  display:contents;
}

/* ロゴ：さらに大きく */
.ft-footer-brand__logo{
  grid-column:1;
  grid-row:1 / span 2;
  width:auto;
  height:100px; /* ← ロゴをさらに大きく */
  display:block;
}

/* 三陸おのや：20px */
.ft-footer-brand__name{
  grid-column:2;
  grid-row:1;
  font-weight:600;
  font-size:20px;
  line-height:1.25;
  margin:0;
}

/* 住所（会社情報）：14px */
.ft-footer-brand__company{
  grid-column:2;
  grid-row:2;
  margin:0;
  font-size:14px;
  font-size:clamp(12px, 1.5vw, 14px);
  line-height:1.7;
  font-weight:600;
}

/* =========================
  右ブロック(A)（PC）メニュー
========================= */
.ft-footer-menu{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
}

/* 親メニュー：16px */
.ft-footer-menu__parent{
  font-weight:600;
  font-size:clamp(14px, 1.6vw, 16px);
  line-height:1.4;
  position:relative;
  padding:8px 0 5px;
}

/* 子メニュー：13px＋縦幅を少し広く */
.ft-footer-menu__child{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  font-family:
    "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-size:13px;
  line-height:2.3;
  font-weight:600;
}

.ft-footer-menu__child li{
  margin:0;
}

.ft-footer-menu__child a{
  color:#333;
  text-decoration:none;
  display:block;
  padding:0 0;
}

.ft-footer-menu__child a:hover{
  opacity:.75;
  
}

/* =========================
  SNS（PC）
  メニュー3の直下
========================= */
.ft-footer-sns{
  grid-column:3;
  grid-row:2;
  margin-top:15px;
  display:flex;
  gap:20px;
  align-items:center;
}

.ft-footer-sns__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.ft-footer-sns__link img{
  display:block;
  width:20px;
  height:auto;
}

/* =========================
  SP（アコーディオン）
========================= */
@media (max-width: 767px){

  .ft-footer__inner{
    max-width:none;
    padding:0 0 50px 0;
    flex-direction:column;
    gap:24px;
  }

  /* SP：右→左 */
  .ft-footer__right{
    order:1; display:block;
    width:100%;
  }
  .ft-footer__left{
    order:2;
    width:100%;
  }

  /* 左ブロック：縦並び */
  .ft-footer-brand{
    display:block;
  }

  .ft-footer-brand__row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .ft-footer-brand__logo{
    margin-top:25px;
    height:100px;
  }

  .ft-footer-brand__name{
    font-size:20px;
    margin-top:40px;
  }

  .ft-footer-brand__company{
    margin-top:16px;
    text-align:center;
  }

  /* メニュー：縦並び＋アコーディオン */
  .ft-footer-menu{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }

  .ft-footer-menu__parent{
    padding:22px 40px 22px 10px;
    border-bottom:1px solid #73aab7;
    cursor:pointer;
  }

  .ft-footer-menu__icon{
    position:absolute;
    top:50%;
    right:5%;
    width:18px;
    height:18px;
    transform:translateY(-50%);
  }

  .ft-footer-menu__icon::before,
  .ft-footer-menu__icon::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:15px;
    height:2px;
    background:#73aab7;
    transform:translate(-50%,-50%);
  }

  .ft-footer-menu__icon::after{
    transform:translate(-50%,-50%) rotate(90deg);
  }

  .ft-footer-menu__child{
    display:none;
    padding:0 0 12px 50px;
    margin:0;
    font-size:16px;
  }
  .ft-footer-menu__child a{
    padding:4px 0;
  }

  .ft-footer-menu__col.is-open .ft-footer-menu__parent{
    border-bottom:none;
  }

  .ft-footer-menu__col.is-open .ft-footer-menu__child{
    display:block;
  }

  .ft-footer-menu__col.is-open .ft-footer-menu__icon::after{
    display:none;
  }

  .ft-footer-sns{
    margin-top:25px;
    justify-content: center;
    gap:50px;
  }

  .ft-footer-sns__link img{
    width:40px;
  }


  
}



/* フッターのアコーディオン */
@media (max-width: 767px){

  /* 子メニュー（閉） */
  .ft-footer-menu__child{
    display:block;              /* none にしない */
    max-height:0;
    overflow:hidden;

    /* ★ここがズレ原因：閉じてる時はpaddingで高さを作らない */
    padding:0 0 0 50px;         /* ← bottomを0に */
    margin:0;
    font-size:16px;

    transition:
      max-height .12s ease,
      padding .12s ease;
  }

  /* 開いた状態 */
  .ft-footer-menu__col.is-open .ft-footer-menu__child{
    max-height:2000px;
    padding:0 0 12px 50px;      /* ←元のbottom 12pxに戻す */
  }

}
@media (max-width: 767px){

  /* 開いている項目の「次の親メニュー」の上に線を足す */
  .ft-footer-menu__col.is-open + .ft-footer-menu__col .ft-footer-menu__parent{
    border-top:1px solid #73aab7;
  }
  /* 最後の親メニューが開いているとき、colの最下部に仕切り線 */
  .ft-footer-menu__col.is-open:last-child{
    border-bottom:1px solid #73aab7;
  }
}



/* =========================
  Footer Copyright
========================= */
.footer-copyright{
  width:100%;
  background:#73aab7;
  color:#fff;
  text-align:center;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:12px;
  padding:14px 10px;
  box-sizing:border-box;
}

/* PC */
@media (max-width:767px){
  .footer-copyright{
    font-size:11px;
    padding:16px 0;
  }
}




/* =========================
  頒布会コース セクション（枠）
========================= */
.block-hanpukai-course{
  width:100%;
  background:#e6f1f2;
  padding:40px 0 100px;
  position:relative;
}

/* 上の円 */
.block-hanpukai-course::before{
  content:"";
  position:absolute;

  /* サイズ */
  width:30vw;
  height:30vw;
  max-width:320px;
  max-height:320px;
  min-width:270px;
  min-height:270px;

  /* 位置（中央＋上にはみ出し） */
  left:50%;
  top:0;
  transform:translate(-50%, -16%);

  /* 見た目 */
  background:#e6f1f2;
  border-radius:50%;
  z-index:1;
}

/* 中身 */
.block-hanpukai-course__inner{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px 0;
  box-sizing:border-box;
}

/* 円中央の画像 */
.block-hanpukai-course__icon{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -7%);
  z-index:2;
}

.block-hanpukai-course__icon img{
  display:block;
  width:17vw;
  max-width:150px;
  height:auto;
}

/* タイトル */
.block-hanpukai-course__title{
  position:relative;
  z-index:3;
  margin:60px 0 0;
  text-align:center;
  font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-size:32px;
  font-weight:500;
  line-height:1.5;
  color:#333;
  letter-spacing:0.08em;
  border:none!important;
  padding:0;
}

.block-hanpukai-course__title::after{
  content:none!important;
  display:none!important;
}


.block-hanpukai-course__lead{
  position:relative;
  z-index:3;
  margin:50px auto 0;
  text-align:center;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:2;
  color:#333;
}

/* =========================
  SP
========================= */
@media (max-width: 767px){
  .block-hanpukai-course__title{
    font-size:28px;
    margin-top:55px;
  }

  .block-hanpukai-course__icon img{
    width:37vw;
  }

  .block-hanpukai-course__lead{
    text-align:left;
    font-size:16px;
    margin-top:35px;
    line-height:1.8;
    padding:0 5%;
  }

  .block-hanpukai-course__lead br{
    display:none;
  }
}