@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
  html {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 500;
     font-size: 62.5%;
      height: 100%;
      word-break: break-word;
     color:#404040; 
	scroll-behavior: smooth;
  scroll-padding-top: 70px;
		padding: 0;
      margin: 0;
    }

    body {
padding: 0;
      margin: 0;
box-sizing: border-box;
position: relative;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

 

    img {
	width:100%;
      border: 0;
      margin: 0;
    }

    figure {
      margin: 0;
    }

    p {
      margin: 0;
      padding: 0;

    }

    a {
      text-decoration:none;
	transition: 1s;
	color: #4A4A4A;
    }

 a:hover {
      opacity: 0.6;
    }
    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

/**************** ヘッダー ****************/


header.new_head_2026{
width: 100%;
position:fixed;
display:flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 5%;
align-items: center;
padding:0.8rem 1rem;
top: 0;
left: 0;
z-index:100;
background-color:#fff;

}



.hedader_logo{
	width:9%;
	
	margin: 0;
}

.hedader_logo img{
	width:100%;

}
.sp-menu-btn{
	display: none;
}
.new_navi{

display: flex;
flex-wrap:wrap;
font-size:1.3rem;
gap:0 10.5rem; 
justify-content:space-around;

}

.new_navi>li{
height:auto;

padding:0px 0;
}

.has-dropdown_menu{
position:static;

}

.sub_arrow{
	position: relative;
	opacity: 1;
	z-index:10;
	transition: all 0.4s ease;
}

.new_navi_dropdown{
position: absolute;
width:100vw;
top:6.5rem!important;
left:0;
display: grid;
grid-template-columns: repeat(3, 30%);
justify-content: center;
gap:5rem 3rem; 
border-top: 1px solid #E5E5E5;
padding: 3rem 0 3rem 0;
background-color: hsla(0,0%,100%,0.98);
opacity:0;
visibility:hidden;
transform: translateY(-10px);
transition: all 0.4s ease;
}



a.sub_arrow::before{
content: "";
position: absolute;
top: 34px;
left: 3rem;
width: 20px;
height: 20px;
 border:1px solid;
 border-color:  transparent transparent #E5E5E5 #E5E5E5;
 transform: rotate(135deg);
background-color: #fff;

opacity:0;
}




.has-dropdown_menu:hover .new_navi_dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}

.has-dropdown_menu:hover .sub_arrow::before{
opacity: 1;

}

.new_navi_dropdown > li{
break-inside: avoid; 
 -webkit-column-break-inside: avoid;
 position: relative;
padding: 0 0 0 60px;
display: inline-block;
}


.new_navi_dropdown > li a{
position: relative;
width: auto;
}


.new_navi_dropdown li a::before {
  background: #858585;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -5px;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.new_navi_dropdown li .sub_header  a::before {
 
  bottom:-1px;
  
}
.new_navi_dropdown li a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}



.sub_header {
width:100%;
display: flex;
flex-wrap: wrap;
justify-content:space-between;

}

.sub_header a {
 text-decoration: none;

}


.toggle-sub{
background:none;
border:none;
cursor:pointer;
color:#14354d;
font-weight: 700;

}

.sub_dropdown{
font-size: 1.4rem;
width: 100%;
max-height:0;
overflow:hidden;
transition:max-height .28s ease;

}

.sub_dropdown>li{
padding:18px 0 0 10px;

}

.sub_dropdown > li a::before{
background-image:none;
}

.sp_br{
	display: none;
}


.sub_dropdown>li:last-of-type{
padding:18px 0 18px 10px;
border-bottom:1px solid #E5E5E5;
}

.shop_navi{
display:flex;
flex-wrap: wrap;
gap:0 4rem; 
font-size: 1.2rem;

}

.hedader_sns{
	display: none;
}

/**************** トップページ ****************/



main{
	

	
}

/*** タイトル ***/

h1.top-heading{
width: 100%;
text-align: left;
display: flex;
flex-direction: column;	
gap:0.3rem 0;
}

h1.top-heading .top_en{
	font-size:3.0rem;
	color: #515151;
	font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  font-style: normal;
	
}

h1.top-heading .top_ja{
	font-size: 1.4rem;
	color: #959595;
	letter-spacing:1px;
font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight:500;
  font-style: normal;
	
}

/*** トップページ カテゴリー ***/

.db_categry{
	margin: 6rem auto 10rem auto;
	width: 90%;
}
.table-wrap{
	 overflow-x: auto;
  -webkit-overflow-scrolling: touch;
	
}
.db_category_list{
	width: 100%;
	padding: 0;
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	gap:10px 10px;
	margin:40px auto 0px auto;

}

.db_category_list>div{

width:100%;
display: flex;
flex-wrap: wrap;
justify-content:center;
flex-direction:column;
align-items: center;
text-align: center;
font-size: 1.8rem;
letter-spacing: 2px;
padding: 1rem 3px;
border: 1px solid #7F7F7F;
}


.db_category_list>div:hover{
border: 1px solid #CECECE;
}


.db_category_list>div img{
width:40%;
transition: transform .6s ease;
margin: auto;

}



.db_category_list>div:hover img{
transform: scale(1.06);
}

.db_category_list>div span{
display: block;

}

/*** 人気アイテムタグ ***/

.db_tag{
	margin: 6rem auto 10rem auto;
	width: 100%;
	
	
}
.db_tag h1.top-heading{
text-align: center;
}

.db_tag_list{
	width:100%!important;
	padding: 0 2rem;
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap:10px 10px;
	margin:40px auto 0px auto;

}


.db_tag_list li{
	background-color: #E7E7E7;
	font-size: 1.8rem;
	text-align: center;
	font-weight:400;
	letter-spacing: 1px;
	padding: 5px 20px;
	border-radius: 999px;
	
}

.db_tag_list li a{
	
	color: #696969
}



/*** 新着商品 ***/


.db_newitem h1.top-heading{
text-align: center;
}

.db_newitem_list{
	width: 90%;
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:10px 20px;
	margin:40px auto 0px auto;
}

.db_newitem_list>div{
display: grid;
grid-template-rows: subgrid;
 grid-row: span 4;
  gap: 20px;
text-align: center;
position: relative;
}

.db_newitem_list>div div{
width:100%;
position: relative;
display: block;
aspect-ratio: 1 / 1;
}

.db_newitem_list>div div img{

top: 0;
position: absolute;
left: 0;
}

.db_newitem_list>div div img:last-of-type{
opacity: 0;
transition: opacity .4s;

}

.db_newitem_list>div div:hover{
opacity: 1;
}

.db_newitem_list>div div:hover img{
opacity: 1;
}

.db_newitem_list>div span{
font-size: 1.4rem;
font-weight: 500;
border:1px solid #042643;
display:inline-block;
margin:20px auto 0px auto;	
width: 80%;
}

.db_newitem_list h2{
font-size: 1.4rem;
font-weight: 500;
margin:20px auto;
padding: 0;

overflow-wrap: break-word;
width: 100%;
}

.db_newitem_list b{
color:#042643;
font-weight: 400;
font-size: 1.6rem;
display: block;
}

/*** 売れ筋ランキング ***/

.db_ranking{
grid-template-columns: repeat(5, 1fr);	
}

.db_ranking>div::before{
content:"1";
position: absolute;
top: 0;
left: 0;
background-color: #042643;
color: #fff;
padding:7px 15px;
font-size: 1.6rem;
font-weight:500;
z-index: 10;
}


.db_ranking>div:nth-of-type(2)::before{
content:"2";
	
}

.db_ranking>div:nth-of-type(3)::before{
content:"3";
	
}

.db_ranking>div:nth-of-type(4)::before{
content:"4";
	
}

.db_ranking>div:nth-of-type(5)::before{
content:"5";
	
}

/*** ピックアップ ***/

.db_pickup{
	margin: 6rem auto 10rem auto;
	width: 90%;
}
.pickup_list{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px * 2) / 3); 
  gap: 0 3rem;
 overflow-x: auto;              /* ←ここがスクロール本体 */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
	margin:20px auto 0 auto;
  
}


.pickup_list > .pickup_item {
  scroll-snap-align: start;
}

.pickp_inner{
display:grid;
grid-template-columns:55% 1fr;
gap:0 15px;
}



.pickp_inner>div{
display: flex;
flex-direction: column;
justify-content:space-between;
}


.pickp_inner>div h2{
margin: 0 0 20px 0;
font-size: 1.8rem;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight:500;
 font-style: normal;	
}


.pickp_inner>div p{
font-size: 1.2rem;
color: #515151;
line-height: 180%;
display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; /* ← ここを調整（約100文字相当） */
  overflow: hidden;
}


.more {
  display: none;
  margin-top:15px;
  color: #007acc;
  background: none;
  border: none;
  cursor: pointer;
	font-size: 1.4rem;
}



.pickp_inner>div h3{
margin: 20px 0 0px 0;
font-size: 1.8rem;
font-family: "Be Vietnam Pro", sans-serif;
font-weight: 600;
font-style: normal;
}


.pickp_inner>div span {
 overflow: hidden;
display: block;
}
.pickp_inner>div span img{
  transition: transform .6s ease;
}


.pickp_inner:hover span img{
transform: scale(1.04);
}




.pickp_inner>div b{
font-size: 1.2rem;
color: #686868;
padding: 0px 0px;
}

.pickup_nav{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap: 8rem;
  margin-top: 18px;
	
}


.nav_dots{ display:flex; gap: 28px; }

.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
background: #bbb;
  cursor: pointer;
}


.dot.is-active{ background:#000; }

.nav_arrow{
	background: #fff;
	border:none;
	font-size:5.6rem;
}

/*** ニュース ***/

.db_information h1.top-heading{
text-align: center;
}

.db_information_list{
	width: 80%;
	display:grid;
	grid-template-columns: repeat(1, 1fr);
	gap:30px 0px;
	margin:40px auto 0px auto;
}

.db_information_inner{
display:grid;
grid-template-columns:1fr 20%;
gap:0 30px;
border-bottom: 1px solid #D4D4D4;
padding: 0 0 10px 0;

}



.db_information_inner>div:nth-of-type(1){
display: flex;
flex-direction: column;
justify-content:space-between;
}



.db_information_inner>div b{
font-size: 1.4rem;
color: #686868;
margin:50px 0px 0px 0px;
}



.db_information_inner>div p{
font-size: 1.8rem;
color: #515151;
line-height: 180%;

}



.db_information_inner>div span {
 overflow: hidden;
display: block;
}
.db_information_inner>div span img{
  transition: transform .6s ease;
}


.db_information_inner:hover span img{
transform: scale(1.04);
}


/*** ナビゲーション ***/
.db_navigation{
	margin: 6rem auto 10rem auto;
	width: 90%;
}

.db_navigation_list{
	width: 90%;
	padding: 0 2rem;
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:20px 20px;
	margin:40px auto 0px auto;
}

.db_navigation_list>div{
width:100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8rem;
letter-spacing: 2px;
}





/*** スタイリング ***/
.db_styling{
	width: 100%;
}

.db_styling h1.top-heading{
text-align: center;
}

.db_styling_list{
	width: 90%!important;
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	gap:10px 20px;
	margin:40px auto 0px auto;

}

.db_styling_list>div a{
display:flex;
flex-wrap:wrap;
align-items:center!important;
justify-content:center!important;
gap: 10px 30px;
}

.db_styling_img{
width:100%!important;
background-color:#848181;
aspect-ratio: 1 / 1;
overflow: hidden;
}


.db_styling_list>div span{
background-color: #042643;
width:80px;
height:80px;
border-radius: 50%;
overflow: hidden;
}



.db_styling_img{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap:5px 0;
	
}

.db_styling_list h2{
font-size: 1.4rem;
font-weight: 500;
padding: 0;
margin: 0;
}

.db_styling_list b{
color:#042643;
font-weight: 400;
font-size: 1.6rem;
display: inline-block;

}


.db_styling_list b:last-of-type{
padding: 0 0 0 10px;

}

/**************** フッター ****************/


footer{
	
	width: 100%;
	background-color:#000;
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	
gap: 0 4rem;
	padding: 5rem 6rem;
}


footer h2{
	color: #FFF;
	margin: 0;
	padding:0 0 5px 0;
	font-size:1.6rem;
	font-weight: 600;
	letter-spacing: 1px;
	border-bottom: 1px solid #9C9C9C;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

footer a{
	color: #FFF;
	
}

footer>div{
font-size:1.3rem;
letter-spacing: 1px;
position: relative;
}

footer>div ul{
	margin:10px 0 0 0;
	line-height:250%;
}


.member_link>div{
	color: #fff;
width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
flex-direction: column;
gap:30px;
padding: 20px 0 0 0;
}


.member_link>div>span{
color: #fff;
display: flex;
flex-direction: column;
width:43%;
text-align: center;
font-size:1.4rem;
letter-spacing: 2px;
position: relative;
}

.member_link>div>span::before{
content: "";
width:45px;
height:45px;
background-image: url("../img/member.svg");
background-position: center;
background-size: contain;
margin:0 auto 10px auto;
}


.member_link>div>span:nth-of-type(2)::before{
background-image: url("../img/icon-line.svg");

}


.member_link>div>span>a{
background-color: #fff;
color:#5C5C5C;
letter-spacing:3px;
margin: 10px 0 0 0;
font-weight: 600;
padding: 1px 0;
border-radius:5px;
}

.member_link>div>span:nth-of-type(2)>a{
background-color: #00c300;
color:#fff;
}


.sns_links>div{
color: #fff;
width: 100%;
font-size:1.0rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-betwen;
flex-direction: column;
gap:30px;
padding: 20px 0 0 0;
text-align: center;
	
}

.sns_links>div>a{
text-align: center;
width: 100%;
margin: auto;
}


.sns_links>div span{
display: flex;
flex-direction: column;
text-align: center;

}


.sns_links>div>a>span::before{
content: "";
width:40px;
height:40px;
background-image: url("../img/icon-insta.svg");
background-position: center;
background-size: contain;
margin:0 auto 5px auto;
}

.sns_links>div>a:nth-child(2)>span::before,.sns_links>div>a:nth-child(3)>span::before{
background-image:url("../img/icon-x.svg");

}



/**************** エフェクト ****************/


/* 共通の初期状態 */
.js-fadeup,
.js-fade-stagger,
.js-fade-stagger02{
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.6s ease, transform 1.0s ease;
}


.js-fade-stagger02 {
 transform: translateY(0px);
 transition: opacity 1.0s ease, transform 1.2s ease;
}

/* 表示された状態 */
.is-visible {
  opacity: 1;
  transform: translateY(0);
}




/* スタイルページ表示 */
.db_style_page{
	width: auto;
	display: grid;
	grid-template-columns:30% auto;
	justify-content:center;
	gap:30px;
	
}

.db_style_page_article{
	width: 100%;
	 grid-template-columns:40% 1fr; /* 左：画像 / 右：テキスト */
  align-items: stretch;          /* ← 高さを揃える */
	gap:30px;
    padding:10rem  0 ;
    border-bottom: 1px solid rgb(221, 221, 221);
}

.db_style_page_article:first-of-type{

    padding:5rem 0 10rem  0 ;
   
}

.db_style_page_img img{
  width: 100%;
  height: 100%;
  object-fit: contain; 
  
}

.db_style_page_detail{
	
	display: flex;
	padding: 10px;
	flex-direction: column;
	gap:30px;
	height: 100%;
}


.db_style_page_hed{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
 
	gap:30px;
	
}

.db_style_page_hed > span{
background-color: #042643;
width:100px;
height:100px;
border-radius:50%;
overflow: hidden;
}

.db_style_page_hed > div{
font-size: 1.8rem;
font-weight: 400;

}


.db_style_page_hed > div h2{
font-size: 2.0rem;
font-weight:600;
margin: 0 0 10px 0;
}

.db_style_page_hed > div b{
font-size: 1.8rem;
font-weight:500;
color: #686868;
}

.db_style_page_detail time{
font-size: 1.4rem;
font-weight:500;
color: #8A8A8A;
}

.db_style_page_detail p{
font-size: 1.4rem;
line-height: 250%;

}


/* マイページ */

.db_mypage {
margin:40px auto 0px auto;
font-size: 1.7rem;
display: flex;
flex-wrap: wrap;
justify-content:center;
align-content: center;
border: 1px solid #C5C5C5;
border-radius: 20px;
width: 90%;
background-image:
  /* メインの純白パールグラデーション */
  linear-gradient(135deg,
    #ffffff 0%,
    #ffffff 25%,
    #f6f6f6 45%,
    #ffffff 70%,
    #f2f2f2 100%
  ),

  /* ヘアライン加工：白ベースでより淡く */
  repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.18) 0px,
    rgba(255,255,255,0.18) 2px,
    rgba(0,0,0,0.05) 3px
  );
	
	
aspect-ratio: 16/9;
padding: 20px 0;
gap:20px 0;
box-shadow: 3px 7px 15px rgba(0, 0, 0, 0.3), /* リアルな影 */
0 0 0 3px rgba(255, 255, 255, 0.3) inset; /* インナーシャドウで質感をプラス */
}


.db_mypage>div{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	gap:40px 0;
width:60%;
}

.db_mypage>div:last-child{
justify-content:flex-end;
align-items: center;
width: 30%;
}

.db_mypage>div:last-child img{
width: 80%;
}

.db_mypage h1{
font-weight:600;
color: #535353;
font-size:3.0rem;
font-family: "Be Vietnam Pro", sans-serif;
letter-spacing: 2px;
margin: 0 0 15px 0;
}

.db_mypage_name{

font-size: 2.2rem!important;

}

.db_mypage>div span{
letter-spacing: 2px;
}

.db_mypage>div>div{
display: flex;
flex-wrap: wrap;
gap:0 5px;
}

.db_mypage>div>div b{
letter-spacing: 2px;
font-weight: 500;
}

.db_mypage>div>div.db_point{
flex-direction: column;
gap:5px 0;
}

.db_mypage>div>div.db_point>span b{
letter-spacing: 0;
font-size: 5.0rem;
padding: 0 5px 0 0;
font-weight:600;
}

.db_card_line{
display: flex;
flex-wrap:wrap;
flex-direction:column;
gap:0;
}


.db_card_line>span{
font-size:3.5rem!important;
letter-spacing:2px!important;

}

.db_card_line>div{
display:flex;
flex-wrap:wrap;
flex-direction: row;
width: 100%;
margin: 0 0 5px 0;
}

.db_card_line>div>b{
text-align-last: justify;
text-justify: inter-ideograph; 
margin: 0 10px 0 0;
width: 30%;
}




.rank_c{

background-image:
  linear-gradient(135deg,
    #0f1a2b 0%,
    #1c2940 20%,
    #0d1524 40%,
    #22334a 60%,
    #0a111d 100%
  ),
  repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 2px,
    rgba(0,0,0,0.2) 3px
  );
}



.rank_b{
background-image:
  /* 明るめブロンズ：反射が見える配色 */
  linear-gradient(135deg,
    #6a3f24 0%,     /* ベース：明るいダークブロンズ */
    #9a6238 18%,    /* 赤みのある反射 */
    #d2a06a 35%,    /* ← メインハイライト（明るさの要） */
    #8a5430 55%,    /* 中間の深み */
    #b47a45 75%,    /* 弱めの反射 */
    #5a341e 100%    /* 締め */
  ),

  /* ヘアライン：明るさに合わせて少し軽め */
  repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.14) 0px,
    rgba(255,255,255,0.14) 2px,
    rgba(0,0,0,0.22) 3px
  );
}

.rank_a{
background-image:
  linear-gradient(135deg,
    #d7d7d7 0%,
    #f0f0f0 20%,
    #c4c4c4 40%,
    #ffffff 60%,
    #bfbfbf 100%
  ),
  repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.08) 0px,
    rgba(255,255,255,0.08) 2px,
    rgba(0,0,0,0.12) 3px
  );
}


.rank_s{

background-image:
  linear-gradient(135deg,
    #bfa76a 0%,
    #e8d7a4 20%,
    #c8b26a 40%,
    #f6ecd2 60%,
    #b79f55 100%
  ),
  repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 2px,
    rgba(0,0,0,0.05) 3px
  );
}

.rank_a h1{
color: #222222;
}

.rank_ss{
background-image:
  /* 光の反射帯を強調したブラックグラデーション */
  linear-gradient(135deg,
    #000000 0%,     /* 完全な黒 */
    #101010 18%,    /* 少し浮き上がる黒 */
    #3a3a3a 35%,    /* ← ハイライト帯：光沢の反射部分 */
    #0d0d0d 55%,    /* また暗く深い黒へ */
    #1e1e1e 75%,    /* 2つ目の弱い反射 */
    #000000 100%    /* しっかり締める黒 */
  ),

  /* ヘアライン（少し明るめにして光を拾う） */
  repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.10) 0px,   /* ← 明るさアップ：光沢 */
    rgba(255,255,255,0.10) 2px,
    rgba(0,0,0,0.25) 3px
  );
}


:is(.rank_c, .rank_b, .rank_ss)  {
color: #fff;

}

:is(.rank_c, .rank_b, .rank_ss) h1 {
color: #fff;
}





/* パーツ */

.coming_soon{
justify-content: center;
	align-content: center;
	font-size: 2.5rem;
	font-weight: 600;
	text-align: center;
	letter-spacing:5px;
	height: 100%;
}


.db_categry_title{
	text-align: center!important;
	border-top:solid 1px #DDDDDD;
	border-bottom:solid 1px #DDDDDD;
	width: 90%!important;
	margin:80px auto 0 auto!important;
	padding: 25px 0;
}

h1.db_categry_title .top_en{
font-size:2.0rem;
color: #959595;
font-family: "Be Vietnam Pro", sans-serif;
font-weight: 500;
 font-style: normal;
	
}

h1.db_categry_title .top_ja{
	font-size: 3.0rem;
	color: #515151;
	letter-spacing:1px;
font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight:600;
  font-style: normal;
	
}





p.db_categry_description{
	color: #616161;
	font-size: 1.5rem;
	text-align:center;
	margin:30px auto;
	display: block;
}

.child-category-list{
	display: grid;
	grid-template-columns: repeat(5, auto);
	text-align: center;
	flex-wrap: wrap;
	justify-content:center;
	width: 90%;
	margin:40px auto;
	gap:30px 10rem;
	font-weight:600;
	font-size: 1.4rem;
 }


.child-category-list li{

 padding-bottom: 3px; /* テキストと下線の間隔 */
  background-image: linear-gradient(#616161, #616161);
  background-repeat: no-repeat;
  background-position: bottom right; /* 下線の初期位置 */
  background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
  transition: background-size 0.5s;
 }



.child-category-list li:hover{
 background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 1px; /* 下線の横幅を100%にする */
 }




/* サイズ表 */

.chart{
width: 80%;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}

.chart h1{
margin:10% 0 0 0;
padding:5px 0 3px 5px;
font-size: 2.6rem;
font-weight:700;
letter-spacing:2px;
width: 100%;
text-align: left;	
color: #515151;
border-bottom:2px solid #D5D5D5;
font-family: "Be Vietnam Pro", sans-serif;
}

.chart_top{
	width: 100%;
	display: flex;
flex-direction: column;
	text-align: center;
margin:0 auto 0% auto;

}



.chart_top img{
	width:60%;
	margin: auto;

}



.chart_top>div{
width: 100%;

margin:50px auto 0 auto;
padding: 0 0 30px 0;
}
.chart_top>div>h1{
margin: 0 auto;
padding: 0;
text-align: center;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 3px;
width: 100%;
border-bottom: none;
display: flex;
justify-content:center;
align-items: center;
gap : 0 20px;
}


.chart_top>div>h1::before,.chart_top>div>h1::after{
content: "";
width: 30%;
height: 1px;
background-color:#2F2F2F;
display: inline-block;
}

.chart_top>div>ul{
line-height: 160%;
margin: 30px auto;
color: #2F2F2F;
width:80%;
padding: 0 2%;
font-family: "Zen Kaku Gothic New", sans-serif;

}

.chart_top>div>ul>li{
font-size: 1.8rem;
text-align: left;
line-height: 160%;
margin: 0 0 20px 0;
}
.chart_top>div>ul>li>span{
display: block;
border-radius: 999px;
background-color: #454545;
color: #fff;
margin: 0 auto 8px 0;
width: 25%;
text-align: center;	
}

.chart_top>div>ul>li>small{
font-size: 1.7rem;
display: block;
line-height: 150%;

margin: 5px 0 0 0;
display: flex;
flex-wrap:nowrap;
gap:0 3px;
}



.chart_top>div>ul>li>small::before{
content: "※";

}


.chart_top>div>b{
font-size: 2.2rem;
font-weight: 600;
}

.size_chart{
width: 100%;
margin:3% auto 0% auto;
display: flex;
flex-direction: column;
gap:30px 0;
}


.size_chart span{
font-size:1.8rem;
padding: 2px 60px;
margin: 0px auto 0px 0;
background-color: #000;
color: #fff;
display:inline-block;
text-align: center;
}




.size_chart h2{
text-align: center;
font-size: 2.1rem;
font-weight: 600;
background-color: #000;
color: #fff;
border-radius: 999px;
display: inline-block;
margin:auto;
font-family: "Be Vietnam Pro", sans-serif;
padding: 2px 10%;
}

.size_chart h2 small{
font-size: 1.4rem;
font-weight: 600;
}

.size_chart h2.wt_tag,.size_chart span.wt_tag{
background-color: #fff;
color:#282828;
border: 1px solid #282828;
}

.size_chart h2.navy_tag,.size_chart span.navy_tag{
background-color: #040A58;
}

.table-scroll-wrap{
  position: relative;
}

/* スクロールは内側だけ */
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 右フェード影（常に右端固定） */
.table-scroll-wrap::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:32px;
  height:100%;
  pointer-events:none;
  background: linear-gradient(to left, rgba(0,0,0,.18), rgba(0,0,0,0));
  opacity:0;
  transition: opacity .2s ease;
  z-index: 50;
}

/* スクロール可能時だけ表示 */
.table-scroll-wrap.is-scrollable::after{ opacity:1; }

.size_chart table{
margin: auto;

font-size: 1.8rem;
color: #2F2F2F;
 border-collapse: separate; 
  border-spacing: 0;
  min-width: 700px; 
	
  width: 100%;
}

.size_chart table thead th:first-child,
.size_chart table tbody td:first-child{
  position: sticky;
  left: 0;
  z-index: 3;            
  background: #fff;
}



.size_chart table th{
border: 1px solid #E0E0E0;
width:auto;
max-width: 15%;
padding: 8px 10px;
font-weight: 600;
white-space: nowrap;
}

.size_chart table td{
border: 1px solid #E0E0E0;
text-align: center;
padding: 8px 0;
}

.size_chart table tbody tr td:first-of-type{
font-weight: 600;
}

.size_chart table tbody tr:nth-child(odd){
background-color: #F4F4F4;
}

.chart_note{
	width: 100%;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-around;
	margin:30px auto;

	padding: 0 20px;
	color: #2F2F2F;
}

.chart_note_one_column{
	
grid-template-columns: 100% ;


	
}




.chart_note h3{
	margin: 0;
	padding: 0;
	font-weight: 600;
	font-family: "Be Vietnam Pro", sans-serif;
}



.chart_note ul{
font-size: 1.6rem;
margin: 5px 0 0 0;
}

.chart_note ul li{
margin:0 0 5px 0;
}

.chart_note ul li::before{
content: "※";
display: inline-block;
padding: 0 5px 0 0;
}

.chart_tag{
	width: 100%;
	justify-content: center;
	display: grid;
	grid-template-columns: auto auto;
	gap:0 10px;

}
.chart_note_one_column .chart_tag{
	width: 100%;
	grid-template-columns: 20% auto;
	gap:0 30px;

}

.chart_note_one_column .fa_tag{
grid-template-columns: 30% auto;

}


.chart_tag ul li::before{
content: "・";
}


.unit-switch-wrap{
  margin:0 0 10px 0;
	text-align: right;
}
.unit-switch{
  display:inline-flex;
	text-align: center;
  border:1px solid #ddd;
  border-radius:999px;
  overflow:hidden;

	font-size: 1.3rem;
	
}
.unit-switch input{ display:none; }

.unit-switch label{
  padding:6px 14px;
  cursor:pointer;
  font-weight:600;
}
.unit-switch input:checked + label{
  background:#111;
  color:#fff;
}


/* よくある質問 */


/* **********************  FAQ 　***********************  */


.faq{
width:80%;
height: auto;
margin:0px auto 50px auto;
display: flex;
flex-wrap:wrap;
align-items: flex-start;

padding:0px 0 0 0;
	
}


.qa-list{
   width:100%;
	margin:0px auto 0 auto;
	   
}
.qa-list dl {
    position: relative;
    margin: 0;
    padding: 28px 80px 28px 30px;
    cursor: pointer;
    border-bottom: 1px solid #8E8E8E;
}
.qa-list dl:first-child {
    border-top:none;
}
.qa-list dl::before {
    position: absolute;
    top: 35px;
    right: 35px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::before {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    display:grid;
	grid-template-columns: 50px auto;
	align-items: center;
    font-weight: bold;
	letter-spacing: 2px;
	text-align: left;
	
}

.qa-list dl:has(b){
   margin:150px 0 0 0;
}

.qa-list dl dt h2 b{
display: block;
position: absolute;
top:-90px;
color: #3A3A3A;
left: 0;
font-weight: 700;
  font-size:2.4rem;
font-family: "Be Vietnam Pro", sans-serif;
}

.qa-list dl dt h2{
 font-weight: 700;
  font-size:1.8rem;
position: relative;
font-family: "Be Vietnam Pro", sans-serif;	
}

.qa-list dl dt::before {
  font-size:2.2rem;
    content: 'Q.';

    color: #292828;

}
.qa-list dl dd::before {
   font-size:2.2rem;
 content: 'A.';

    color: #8C0D0F;
}
.qa-list dl dd {
display:none;
grid-template-columns: 50px auto;

margin:20px 0 0 0;
text-align: left;
line-height: 180%;
	

}


.qa-list dl dd p {
	font-size:1.6rem!important;
	line-height: 180%!important;
	font-weight: 500!important;
 overflow-wrap: break-word;
}

.qa-list dl dd a{
color: #0366C1;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

.invoice_log{
	background-color: aqua;
	border: 2px solid  #6C6969;
}

/* **********************  ガイド 　***********************  */

.db_guide-wrap{
width:80%;
height: auto;
margin:50px auto 50px auto;	
}

.db_guide-wrap >ul{
	width: 100%;
	text-align: left;
	font-size:2.0rem; 
  display: flex;
flex-direction: column;
gap: 50px;
color: #282828;
}
.db_guide_list h1{
 font-weight: 700;
  font-size:3.5rem;

font-family: "Be Vietnam Pro", sans-serif;	
padding:0 0 5px 0;
border-bottom: 1px solid rgb(191, 191, 191);
margin: 0 0 30px 0;

}

.db_guide_list h2{
 font-weight: 700;
  font-size:2.6rem;
position: relative;
font-family: "Be Vietnam Pro", sans-serif;	
padding:0;
margin: 0 0 20px 0;

}

.db_guide_list>ul,.db_guide_list>ol{
margin-left: 35px;
list-style-position: outside;
 
display: flex;
flex-direction: column;
gap: 20px;
}

.db_guide_list li{
list-style:decimal-leading-zero;
}



.db_guide_list b{
margin: 0 5px 5px 0;
font-size:2.2rem;
display: block;
font-weight: 700;
}


.db_guide_list>ol{
margin:30px 5px;

}
.db_guide_list>ol li{
 display: flex;
  gap:0 .1em;
  align-items: flex-start;
 
}

.db_guide_list>ol li::before{
content: "・";

}

.db_guide_list>ol.none_list li::before{
content: "";

}

.db_guide_list>table{
  width: 100%;
  border-collapse: collapse;
  border:#848181 1px solid;
  margin: 20px auto;
}

.db_guide_list th,.db_guide_list td{
padding:10px 0px 10px 30px;
  border:#848181 1px solid;
}

.db_guide_list th{
text-align: center;
font-weight: 600;
letter-spacing: 0.2em;
background-color: #fbfbfb;
padding:10px 0px 10px 0px;
}

.db_guide_list a{
color: #e51212;
font-weight: 600;
}
.db_guide_list span{
white-space: nowrap;
font-weight: 700;
padding: 0 3px 0 0;
position: relative;
}
.db_guide_list span::after{
content:'：';

padding: 0 0px 0px 3px;

}
.db_guide_list strong{

display:contents;

}
.guide_br{display: none;}


.db_guide-index{
width:95%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto ;
gap:10px;
margin:8rem auto;
}
.db_guide-index_list{
border: 1px solid #cccccc;
display: flex;
flex-direction: column;
align-items: center;
padding: 2.2rem;
}
.db_guide-index_list>h3{
  margin: 0;
  min-height:3.5em;
  display: flex;
  align-items: center;
  font-size: 2.0rem;
  font-weight: 700;
  text-align: center;
  font-family: "Be Vietnam Pro", sans-serif;	
}

.db_guide-index_list>ul{
 display: flex;
 flex-wrap: wrap;
  gap: 10px;
flex-direction: column;;
  width:fit-content;
  margin: 2rem auto 0;
  justify-content: start; /* 左詰め */
  font-size: 1.6rem;

}

.db_guide-index_list li{
list-style:disc;

}
.db_guide-index_list li a:hover{
color: #202de1;
}

/* **********************  スマレジ ***********************  */


.smaregi_barcode::before{
display: none;
content: "";
font-size: 1.6rem;
background-color: #1a4a8a;
color: #fff;
position: absolute;
top: -9px;
left: 15px;
z-index: 2;
padding:2px 30px;
border-radius: 10px;
  }


.smaregi_barcode::after{
content: "";
font-size: 3.0rem;
background-color: #ffffff;
background-image: url("../img/width_logo.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
height: 20px;
width: 32%;
position: absolute;
bottom: -10px;
right: 130px;
z-index:2;
padding:2px 30px;
  }
  
  .smaregi_barcode img.rank_c_border{
border: 8px solid  #1a4a8a;
	 position: relative;
  }
.smaregi_barcode:has(.rank_c_border)::before{
display:inline-block;
content:"C ランク";
background-color: #1a4a8a;
}
  
  .smaregi_barcode img.rank_b_border{
border: 8px solid  #8a5430;
  }

.smaregi_barcode:has(.rank_b_border)::before{
display:inline-block;
content:"B ランク";
background-color: #8a5430;
}
  
  .smaregi_barcode img.rank_a_border{
border: 8px solid  #bfbfbf;
  }
  
.smaregi_barcode:has(.rank_a_border)::before{
display:inline-block;
content:"A ランク";
background-color: #bfbfbf;
}
  .smaregi_barcode img.rank_s_border{
border: 8px solid #c8b26a;
  }

.smaregi_barcode:has(.rank_s_border)::before{
display:inline-block;
content:"S ランク";
background-color: #c8b26a;
}

  .smaregi_barcode img.rank_ss_border{
border: 8px solid  #0d0d0d;
  }

.smaregi_barcode:has(.rank_ss_border)::before{
display:inline-block;
content:"SS ランク";
background-color: #0d0d0d;
}

/* **********************  店舗受け取り注意書き ***********************  */

ul.pickup_store_note{

margin: 20px 0 0 0;
color: #c40e0e;

}
ul.pickup_store_note li{
font-size: 1.4rem;
margin: 0px 0 10px 0;

}

ul.pickup_store_note li::before{
content: "※";
display: inline-block;;
margin: 0px 10px 0px 0;

}

/* **********************  ショッピングに戻る ***********************  */

.db_cart-top{
  width: 100%;
 text-align: center;
margin: 40px 0 0 0;
}

.db_cart-top a{
background-color: #5a5a5a;
color: #fff;
border-radius: 999px;
padding: 5px 50px;
font-size: 1.8rem;

}

/* **********************  商品サブ詳細 ***********************  */

.db_sub_detail{
  font-size:1.8rem;
  font-weight:600;
 color: #3d3d3d;
}

.db_sub_detail a{
  font-weight: 700;
  color: #007acc;
}

/* **********************  パスワード注意書き ***********************  */

.password_note{
  width: 100%;

  border: 1px solid rgb(187, 187, 187);
  text-align: center;
  padding: 10px 30px;
  margin: 10px 0 0 0;
}
.password_note h3{
 padding:0;
 margin:0;
 font-size:1.4rem;
 font-weight: 600;
 letter-spacing:1px;
 font-family: "Be Vietnam Pro", sans-serif;	
 color: #464646;
}

.password_note ul{
margin: 10px auto 0 auto;
display:inline-block;
font-size: 1.1rem;
}

.password_note ul li{
text-align:left;
list-style: disc;

margin-bottom: 1rem;
}

.password_note ul li:last-of-type{
margin-bottom: 0rem;
}

.password-wrap{
  position: relative;
}

.password-wrap input{
  padding-right: 40px;
}

.password-wrap button{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
}

.password-wrap button:hover{
  color: #000;
}