@charset "utf-8";
#overlaybg2,#overlayMenu{
    display:none;
}
@media screen and (max-width:680px){
#header .spmenu{
    display:block;	
    background:url(../images/btn_menu.png) left 4px no-repeat;
    -webkit-background-size: 57px 55px;
    -moz-background-size: 57px 55px;
    background-size: 57px 55px;
    cursor: pointer;
    text-indent: -9999px;
}


#header .onlineshop{
    position:absolute;
    /*right:5px;*/
    right:58px;
    top:5px;
    width:63px;
    height:66px;
}
#header .hlogin,#header .hmypage,
#header .hlogin2,#header .hlogin2-,
#header .hmypage2{
    position:absolute;
    /*right:60px;*/
   right:118px;
    top:5px;
    width:57px;
    height:66px;
}
#overlayMenu .logo{
margin:17px 0 0 13px;
}
#overlayMenu .logo img{
	width:90px;
	height:auto;
}
#overlayMenu a:hover{
    text-decoration:none;
}

#overlaybg2{
	background:rgba(0,0,0,0.4);
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	display:block;
	z-index:-1;
	height:calc(100%);
	opacity: 0;
	
    transition: all 0.25s ease-in-out;
	pointer-events: none; /*クリックを無効にする*/
	
}
#overlaybg2.active{
	opacity:1;
	cursor: pointer;
	left:0px;
	z-index:9000;
	pointer-events: auto; /*クリックを無効にする*/
}
#overlayMenu{
	position:absolute;
	position:fixed;
	z-index:9900;
	transition: all 0.25s ease-in-out;
	left:0px;
	transform:translate(-100%,0);
	top:0px;
	background:#d4d3c4;
	width:80%;
    display:block;
	height:calc(100%);	
}	
#overlayMenu.active{
	left:0px;
	width:80%;
	transform:translate(0%,0);
	height:calc(100%);
}

#menuclose{
	background:url(/shopping/sp/images/arrow-close.png) center center no-repeat;
	background-size:40px auto;
	z-index:9990;
	width:40px;
	height:40px;
	display:block;
	position: absolute;
	right:14px;
	cursor: pointer;
	top:10px;
}
#overlayMenu .menu-inner{
	overflow-y:auto;
	width:100%;
	box-sizing:border-box;
	height:calc(100% - 80px);
	font-family:Arial,osaka,'ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro W6',Georgia,Helvetica,'ＭＳ Ｐゴシック',sans-serif;
	font-size:12px;
}
#overlayMenu .menu-inner::-webkit-scrollbar{
	width: 10px;
 }
 #overlayMenu .menu-inner::-webkit-scrollbar-track{
	background-color: #fff;
 }
 #overlayMenu .menu-inner::-webkit-scrollbar-thumb{
	background-color: #666;
 }


#overlayMenu .menu-button{
	margin-bottom:0px;
	margin-right:12px;
	margin-left:12px;
	margin-top:14px;
}
#overlayMenu .menu-button.custom{
	margin-bottom:20px;
	margin-top:12px;
}

#overlayMenu .menu-button a{
	background:#636254;
	color:#fff;
	text-align:center;
	display:block;
	padding:10px;
	border-radius:30px;
}
#overlayMenu .menu-button2{
	margin-top:14px;
	margin-bottom:10px;
	margin-right:10px;
	margin-left:10px;
}
#overlayMenu .menu-button2 a{
	background:#636254;
	color:#fff;
	text-align:center;
	display:block;
	padding:10px;
	border-radius:30px;
}



#overlayMenu h4{
	font-weight:100;
	font-size:12px;
	border-bottom:solid 1px #cac9b6;
	border-top:solid 1px #cac9b6;
	padding:10px;
	color:#333;
	background:#e6e5da;
	text-align:center;
	font-weight:400;
	font-family:Arial,osaka,Roboto,'ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro W6',Georgia,Helvetica,"Hiragino Kaku Gothic ProN",'ＭＳ Ｐゴシック',sans-serif;
}


#overlayMenu ul{
	margin-right:12px;
	margin-left:12px;
}
#overlayMenu ul li a{
	display:block;
	padding:10px 0;
	color:#6d6d6d;
	background:url(../images/icon_arrow1.png) right center no-repeat;
	background-size:6px auto;
}
#overlayMenu ul li{
	border-bottom:solid 1px #cac9b6;
}
#overlayMenu ul li:last-child{
	border:none;
}
#overlayMenu .menu-inner2{
	border-top:solid 1px #cac9b6;
	border-bottom:solid 1px #cac9b6;
	overflow:hidden;

}
#overlayMenu ul.snsiconsp{
	display:flex;
	width:200px;
	margin-right:auto;
	margin-left:auto;
	align-items:center;
	justify-content: center;
}
#overlayMenu ul.snsiconsp li{
	width:33.3%;
	text-align:center;
	border:none;
}
#overlayMenu ul.snsiconsp li a{
	background:none;
}

#header.active{
	position:fixed;
	top:0px;
	width:100%;
	transition: all 0.25s ease-in-out;
	left:0px;
	z-index:900;
	animation-name: downmenu;
	-webkit-animation-delay: 0s;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
@keyframes downmenu {
	0% {
	  transform:translate(0,-66px);
	}
	100% {
		transform:translate(0px,0);
	}
  }
  #header.active2{
	position:fixed;
	top:0px;
	width:100%;
	transition: all 0.25s ease-in-out;
	left:0px;
	z-index:900;
	animation-name: downmenu2;
	animation-delay: 0s;
	animation-duration: 0.3s;
	animation-iteration-count: 1;
}
@keyframes downmenu2 {
	0% {
	  transform:translate(0,0px);
	}
	100% {
		transform:translate(0px,-66px);
	}
  }
}

/* =========================================================
   ヘッダー常時追従（PC/SP共通）＋ オンラインストアボタン強調
   20260717 rev2
   ・position:fixed で #headerarea を常に画面上部へ固定。
     JS(scripts2.js)のスクロール方向判定に依存しないため、上下
     どちらにスクロールしても常にヘッダーが追従する。
   ・html,body{height:100%} 環境では position:sticky が途中で
     効かなくなるため、確実な fixed を採用している。
   ========================================================= */

/* --- ヘッダーを画面上部へ常時固定（全幅） --- */
#headerarea{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background-color:#d4d3c4;   /* 固定時に両サイドが透けないよう不透明背景を明示 */
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
/* 固定ヘッダーの高さぶん本文を下げ、コンテンツが隠れないようにする */
body{
  padding-top:98px;      /* PCヘッダー高 */
}
@media screen and (max-width:680px){
  body{
    padding-top:70px;    /* SPヘッダー高 */
  }
}

/* --- 旧スクロール連動(.active/.active2)の固定・アニメを無効化 ---
   #headerarea を常時固定にしたため、#header 自体を固定する必要は
   なくなった。二重固定・ガタつきを防ぐため通常フロー(relative)に戻す。 */
#header.active,
#header.active2{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  animation:none;
  box-shadow:none;
  /* ※ここで width/margin は指定しない。
     指定すると 1行レイアウト(96%/max1180px)を上書きしてしまい、
     スクロールアップで .active が付いた瞬間に旧950px幅へ戻って崩れる。
     幅は #header 側（2段組み=950px / 1行=96%）のルールに任せる。 */
}
#header.active::before{
  display:none;
}
@media screen and (max-width:680px){
  #header.active,
  #header.active2{
    width:100%;
    margin:0;
  }
}

/* --- 右上ユーティリティ（PC）：検索を非表示、SNS＋ストアボタンを同じ高さで整列 ---
   #header 内の .searcharea2 / .cart2 / .snsbtn を <div class="headerutils"> で
   まとめ、flex(align-items:center)で上下中央にそろえる。フロートの縦ズレを回避。 */

/* モバイル(≦680px)ではラッパーを透過させ、既存SPレイアウトに影響を出さない */
@media screen and (max-width:680px){
  #header .headerutils{
    display:contents;
  }
}

@media screen and (min-width:681px){
  /* ユーティリティ帯を右上に配置し、子要素を上下中央でそろえる */
  #header .headerutils{
    position:absolute;
    top:0;
    right:0;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  /* 検索窓は一旦非表示（マークアップは残置。戻す場合はこの行を削除） */
  #header .headerutils .searcharea2{
    display:none;
  }
  /* 並び順：SNS（左）→ ONLINE STORE（右） */
  #header .headerutils .snsbtn{ order:1; }
  #header .headerutils .cart2{  order:2; }
  #header .headerutils .snsbtn,
  #header .headerutils .cart2{
    float:none;
    display:flex;
    align-items:center;
    margin:0 0 0 12px;
    padding:0;
    background:none;
  }
  #header .headerutils .snsbtn a{
    margin-left:6px;
  }

  /* ONLINE STORE ボタンを強調 */
  #header .headerutils .cart2 a{
    display:inline-block;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    line-height:1;
    letter-spacing:0.04em;
    padding:11px 22px 11px 44px;
    border-radius:24px;
    background:#4f4e42 url(../images/i_cart.png) 18px center no-repeat;
    transition:all 0.25s ease;
  }
  #header .headerutils .cart2 a:hover{
    color:#fff;
    text-decoration:none;
    /* ホバー時はオンラインストアのフッターと同じパープル */
    background:#652072 url(../images/i_cart.png) 18px center no-repeat;
  }
}

/* =========================================================
   PCワイド（≧1024px）：ロゴ・グロナビ・SNS・ONLINE を1行横並び
   20260717 rev3
   ・#header を flex 化し、[ロゴ][ナビ][SNS＋ONLINE] を1行で中央そろえ。
   ・ヘッダー幅を最大1180pxまで広げる（要望：横幅は広がってOK）。
   ・1024px未満は上の2段組みレイアウトにフォールバック（崩れ防止）。
   ・サブメニュー(STAFF BLOG)を壊さないよう、ナビは直下(> ul > li)のみ操作。
   ========================================================= */
@media screen and (min-width:1024px){
  #header{
    width:96%;
    max-width:1180px;
    height:auto;
    min-height:64px;
    margin:0 auto;
    display:flex;
    align-items:center;   /* 4要素を同じ高さ（上下中央）にそろえる */
    gap:20px;
    padding:34px 0 12px;   /* 上パディングを増やしSEO文言との間隔を確保 */
    box-sizing:border-box;
  }
  /* SEO用h1は上部の細いラインとして絶対配置（行の邪魔をしない）
     元の line-height:2em / padding:12px を打ち消して行を細くし、
     下のナビ行との間に適度な余白をつくる。 */
  #header h1{
    position:absolute;
    top:9px;
    left:0;
    width:100%;
    margin:0;
    padding:0 0 0 2px;
    line-height:1.3;
  }
  /* ロゴ */
  #header .title{
    position:static;
    top:auto;
    left:auto;
    flex:0 0 auto;
    margin:0;
  }
  /* グローバルナビ（中央・伸縮） */
  #globalnavigation{
    position:static;
    top:auto;
    left:auto;
    flex:1 1 auto;
    height:auto;
  }
  #globalnavigation > ul{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
  }
  #globalnavigation > ul > li{
    float:none;
    margin:0 0 0 8px;
  }
  /* ナビ文字を上下中央に（元の padding-top:7px を打ち消し、line-heightで中央寄せ） */
  #globalnavigation > ul > li > a{
    height:29px;
    padding:0 0 0 3px;
    line-height:29px;
  }
  /* SNS＋ONLINE を右端へ */
  #header .headerutils{
    position:static;
    top:auto;
    right:auto;
    height:auto;
    flex:0 0 auto;
    margin-left:auto;   /* 右端に押し出す */
  }
  /* 固定ヘッダーの高さぶんの本文余白を1行レイアウト用に調整 */
  body{
    padding-top:100px;
  }
}