@charset "utf-8";

/* ===== Base / Reset ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* 横スクロール封じ */
}

a {
  color: #4a494d;
  text-decoration: none;
  display: block;
}

img {
  display: block;
  width: 100%;       /* 親幅に追従 */
  height: auto;
  vertical-align: bottom;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

h1 { margin: 10px; }
h1 a { display: flex; align-items: center; }

.header_top p,
.header_category ul li a,
#Category_button,
.shippori {
  font-family: 'Shippori Mincho', serif;
}

/* ===== Header Top（SP基準） ===== */
.header_top{
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  /* max-width: 1400px; */
  margin: 0 auto;
}
.header_top > h1{
  margin: 0 auto;
}
.header_top > * { padding: 0 10px; }
.header_logo { height: 30px; }
.header_top > p{ margin-right: auto; width: 15%; }

header a:hover, #Category_button:hover { opacity: .5; }

/* 検索 */
.header_icon{ display: flex; justify-content: space-between; }
.header_search{ position: relative; }
header form.header_search{
  border: 1px solid #4a494d;
  margin-right: 10px;
}
header form.header_search > input{
  border: none; outline: none;
  padding: 5px 0 5px 40px;
  margin: 0;
}
.header_search_icon{
  background: #fff center/contain no-repeat url(../../img/icon_search2.svg);
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 30px;
}
#Search_target .header_search_icon{ background-color:#4a494d; color:#FFF; font-size:30px; }

.header_line_icon,
.header_shopbag_icon{
  display: inline-block; width: 30px; height: 30px;
  background-position: center; background-repeat: no-repeat;
}
.header_line_icon   { background-image:url(../../img/icon_line.svg); }
.header_shopbag_icon{ background-image:url(../../img/icon_cart.svg); margin-left: 10px; }

/* ===== Category Bar ===== */
.header_category{
  background-color: #4a494d;
  position: relative;
  font-family: 'Shippori Mincho', serif;
}
.header_category > ul{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.header_category > ul > li a{
  color: #fff;
  padding: 7.5px 5px;     /* SP基準 */
  text-align: center;
}

#Category_button{
  cursor: pointer;
  color: #fff;
  padding-right: 1em;
}

/* 検索ドロワー */
#Search_target{
  display: none;
  position: absolute;
  width: 100%;
  z-index: 10;
  background-color: #4a494d;
}
#Search_target form{ margin: 20px auto; text-align: center; cursor: pointer; }
#Search_target input[type="text"]{
  background-color: #4a494d; color:#fff; font-size: 20px;
}
#Search_target input[type="submit"]{ appearance: none; -webkit-appearance: none; }

/* ===== Index専用：カテゴリ（Flex版） ===== */
section.category{ background-color: #fff; }
.category_wrapper{
  border-top: 1px solid #dbdad9;
  border-bottom: 1px solid #dbdad9;
  margin: 20px auto 40px;
  background-color: #fff;
}

.in-category, .in-category-box, .in-category-box2, .category-box{
  /* 旧Grid撤去 → Flexラッパー */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 1000px;
  margin: 20px auto;
}

.in-category a,
.in-category-box a,
.in-category-box2 a,
.category-box a{
  display: block;
  flex: 0 1 calc(16.66% - 8px); /* 6列相当（PC）*/
  max-width: 180px;              /* 必要なら上限 */
  margin: 0 auto;
}

@media (max-width: 900px){
  .in-category a,
  .in-category-box a,
  .in-category-box2 a,
  .category-box a{ flex-basis: calc(25% - 8px); } /* 4列 */
}
@media (max-width: 600px){
  .in-category a,
  .in-category-box a,
  .in-category-box2 a,
  .category-box a{ flex-basis: calc(33.33% - 8px); } /* 3列 */
}
@media (max-width: 400px){
  .in-category a,
  .in-category-box a,
  .in-category-box2 a,
  .category-box a{ flex-basis: calc(50% - 8px); } /* 2列 */
}

.in-category-box img:hover,
.in-category-box2 img:hover,
.category-box img:hover{ filter: opacity(50%); }

.category-box img{ border: 1px solid darkgray; }
.category-box img{ border: none; } /* 直近優先：不要なら無しに */

/* ===== 説明テキスト ===== */
header p{ margin: 1em 0 0; }

.header_word{
  max-width: 1400px;
  margin: 0 auto;
  padding: 5px 10px;
  color: #4a494d;
  text-align: center;
}
.header_word_fl{
  display: none; /* SPは非表示 */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
}
.header_word_fl .header_word_s{ margin: 0; padding: 5px 0; }
.header_word_s{ font-size: .7em; }
.header_haiso{
  font-size: .8em; min-width: 1.5em; line-height: 1.3em; padding: 0; color: #4a494d;
}
.header_word_bottom{
  padding: .4em 0; border-bottom: 1px dotted #4a494d;
}
.header_word_bottom .header_word_s{ font-size: .7em; padding-top: 0; }

/* ===== デバイス表示切替 ===== */
.header_sp{ display: block; }
.header_pc, .header_tab, .header_forsp_p{ display: none; }

/* ===== ハンバーガー ===== */
.globalMenuSp{
  position: fixed; top: 0; left: 0; z-index: 70;
  width: 100%;
  color: #4a494d; text-align: center;
  transform: translateX(-100%);     /* 初期は隠す */
  transition: all .6s;
}
header .globalMenuSp .globalMenuSp_bg{
  width: 70%; max-width: 600px; height: 100vh;
  margin-left: 0; overflow-y: auto;
  background: #fff; border: 1px solid #4a494d;
  padding: 20px 0 130px;
}
header .globalMenuSp .keyword a{
  display: inline-block; margin-left: .5em; color: #49494c; font-size: .8em;
}
header .globalMenuSp .keyword_top{
  text-align: left; background-color: #efefef;
  padding: .8em 0; margin: 1em 0; font-size: 1.1em; text-indent: 1.2em;
}

.rank{ text-align: left; }
.rank li{ text-indent: 1em; }
.rank li a{
  border-bottom: 1px solid; line-height: 1em; text-underline-offset: .3ex; text-indent: 0;
}

header .globalMenuSp form{
  padding-top: 1em;
  margin: 0 auto 2em;
  display: flex; justify-content: center; text-align: center;
}
header .globalMenuSp form input{ padding: .3em 0; }
header .globalMenuSp form input[type="text"]{
  width: 80%; padding-left: 1em; font-size: 15px;
}
header .globalMenuSp form input[type="image"]{
  width: 15%; max-width: 35px; margin-left: 7px; vertical-align: middle;
}

header .hamburger{
  position: fixed; z-index: 99; left: 1%; top: 0%;
  width: 30px; height: 30px; cursor: pointer; text-align: center; display: block;
}
header .hamburger span{
  z-index: 80; display: block; position: absolute;
  width: 28px; height: 1.5px; left: 6px; background: #4a494d; transition: .5s all;
}
header .hamburger span:nth-child(1){ top: 10px; }
header .hamburger span:nth-child(2){ top: 20px; }
header .hamburger span:nth-child(3){ top: 30px; }

header .active span{ background-color: #000; }
header .active span:nth-child(1){ top: 16px; left: 6px; transform: rotate(-45deg); }
header .active span:nth-child(2){ left: 60%; opacity: 0; }
header .active span:nth-child(3){ top: 16px; transform: rotate(45deg); }

header .globalMenuSp.active{ transform: translateX(0%) !important; }

body.fixed{ width: 100%; height: 100%; position: fixed; overflow-y: scroll; }
.globalMenuSp_bg{ position: relative; }
.menu-bg{ position: absolute; width:100%; height:100%; z-index: -100; cursor: pointer; }

/* ===== Breakpoints ===== */
@media (max-width: 700px){
  .in-category{ display: none; } /* 不要ならこのまま */
  .header_search_icon{ margin-left: auto; margin-right: 10px; }
  .header_category > ul{ padding: 0; }
  .header_category > ul > li > a,
  #Category_button{ font-size: 12px; }
  .header_top h1{ margin-left: 0; margin-right: 0; }
  .header_search_pc{ margin-left: auto; }
  .header_word_fl{ display: none; }
  header > a{ width: 90%; }            /* ヘッダー画像縮小 */
  .header_top > h1{
    width: 100%;
    max-width: 160px;
    margin: 0 auto;
}
}

@media (min-width: 701px){
  .header_sp{ display: none; }
  .header_tab{ display: block; }
  .header_forsp_p{ display: none; }
  .header_pc{ display: none; }         /* 必要なら切替 */

  .header_top{ height: 70px; }
  .header_logo{ height: 40px; }

  .header_top .forpc{ display: block; }
  .header_top .forsp{ display: none; }

  .header_word_fl{ display: flex; }    /* PCで表示 */
  .header_category > ul > li a{ padding: 15px; }
}

/* 検索フォーム幅：可変 */
@media (min-width: 1201px){
  header .globalMenuSp ul form{ max-width: 60%; }
}
@media (max-width: 1200px){
  header .globalMenuSp ul form{ width: 100%; }
  header .globalMenuSp ul form input[type="search"]{ width: 90%; }
}