@charset "utf-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Author : Hirohisa Kambe
  Date : 2026.03.26
  Copyright(C)HARD DISK. All rights reserved.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* ========================
   base
======================== */

figure img {
	width: 100% !important;
	height: auto !important;
}

img {
	max-width: 100%;
	display: block;
}

p.kai {
	white-space: pre-wrap;
}

/* ========================
   pageContents
======================== */

@media (max-width:991px) {
	#pageTitle h2 { font-size: 290%; }
	#pageTitle h1 { font-size: 110%; }
}
@media (min-width: 992px) {
	#pageTitle h2 { font-size: 500%; }
	#pageTitle h1 { font-size: 130%; }
}

#pageTitle {
	padding: 60px 0;
}

#pageTitle h2 {
	font-family: "Geist", sans-serif;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	letter-spacing: .1em;
	text-indent: .1em;
	margin: 0 !important;
}

#pageTitle h1 {
	font-family: "Geist", sans-serif;
	font-weight: 800 !important;
	line-height: 1;
	text-align: center;
	margin: 20px 0 0 !important;
}

/* ========================
   products
======================== */

/* gallery */
.nima-gallery { width: 100%; }

.nima-main {
	position: relative;
	aspect-ratio: 3.2 / 4;
	overflow: hidden;
}

.nima-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
	z-index: 1;
}

.nima-slide.is-active {
	opacity: 1;
	z-index: 2;
}

.nima-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* thumbs */
.nima-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.nima-thumb {
	width: 70px;
	aspect-ratio: 3.2 / 4;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	opacity: 0.7;
	transition: 0.2s;
}

.nima-thumb:hover { opacity: 1; }

.nima-thumb.is-active {
	border-color: #000;
	opacity: 1;
}

.goods_model {
	font-size: 92%;
	line-height: 1.4;
	margin-top: 10px;
}
/* =========================
   商品カード画像（singleと統一）
========================= */

.product-card .image-wrap {
	position: relative;
	width: 100%;
	padding-top: calc(100% * 4 / 3.2); /* ←これが比率 */
	overflow: hidden;
}

.product-card .image-wrap img.main-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ========================
   color
======================== */

.color-chip {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.2s;
	position: relative;
	z-index: 20;
}

.color-chip:hover { opacity: 0.85; }

.color-chip.active {
	border: 1px solid #000;
}

.color-chip.is-black.active {
	border: 1px solid #000;
	box-shadow: inset 0 0 0 2px #fff;
}

/* responsive */
.post-type-archive-products .color-chip,
.tax-procat .color-chip {
	width: 24px;
	height: 24px;
}

.single-products .color-chip {
	width: 40px;
	height: 40px;
}

@media (max-width: 768px) {
	.single-products .color-chip { width: 32px; height: 32px; }
	.post-type-archive-products .color-chip,
	.tax-procat .color-chip { width: 20px; height: 20px; }
	.nima-thumb { width: 60px; }
}

/* ========================
   text
======================== */

.color-name {
	margin: 12px 0;
	font-size: 14px;
	letter-spacing: 0.03em;
}

.color-name strong { font-weight: 600; }

.color-name-single {
	margin: 12px 0;
	font-size: 100%;
	letter-spacing: 0.03em;
}
/* ========================
   layout
======================== */

.product-info {
	display: flex;
	flex-direction: column;
}

.info-main { order: 1; }

.product-color {
	order: 2;
	margin-bottom: 10px;
}

.info-bottom { order: 3; }

@media (max-width: 768px) {
	.product-color {
		order: 1;
		margin-top: -15px;
		margin-bottom: 30px;
	}
	.info-main { order: 2; }
}

/* ========================
   bootstrap調整
======================== */

.card { border: none; }

.card-body {
	padding: 12px 0 0 !important;
}

/* ========================
   scroll
======================== */

:root { --header-h: 65px; }

@media (min-width: 992px) {
	:root { --header-h: 90px; }
}

html { scroll-behavior: smooth; }

/* ========================
   mobile
======================== */

@media (max-width: 768px) {
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}
	.color-name { font-size: 13px; }
}

/* ========================
   helper
======================== */

.d-flex.gap-2 {
	gap: 8px !important;
}

/* ========================
   productsContents
======================== */

@media (max-width:991px) {
	#productsContents h2.noTitle { font-size: 400%; }
	#productsContents h2.archiveH2 { font-size: 220% !important; }
	#productsContents h3.archiveH3 { font-size: 140% !important; }
}

@media (min-width: 992px) {
	#productsContents h2.noTitle { font-size: 500%; }
	#productsContents h2.archiveH2 { font-size: 260% !important; }
	#productsContents h3.archiveH3 { font-size: 180% !important; }

}

#productsContents h3.colorH3 {
	font-family: "Geist", sans-serif;
	font-weight: 700 !important;
	font-size: 200%;
	line-height: 1;
	text-align: left;
	margin: 40px 0 20px;
}

#productsContents h2.archiveH2 {
	font-family: "Geist", sans-serif;
	font-weight: 700 !important;
	line-height: 1;
	text-align: center;
	letter-spacing: .05em;
	margin: 0 !important;
}

#productsContents h2.archiveH2Cat {
	font-family: "Geist", sans-serif;
	font-weight: 700 !important;
	font-size: 160%;
	line-height: 1;
	text-align: center;
	margin: 0 !important;
}

#productsContents h2.otherH2 {
	font-family: "Geist", sans-serif;
	font-weight: 800;
	font-size: 220%;
	line-height: 1;
	text-align: center;
	letter-spacing: .05em;
	text-indent: .05em;
	margin: 0 0 30px !important;
}
#productsContents h3.archiveH3 {
	font-family: "Geist", sans-serif;
	font-weight: 700 !important;
	line-height: 1;
	text-align: center;
	margin: 0 !important;
}

#productsContents span.seTitle {
	font-family: "Geist", sans-serif;
	font-weight: 600 !important;
	font-size: 120%;
	line-height: 1;
	color: #fff;
	display: inline-flex;        /* ←変更 */
	align-items: center;         /* ←縦中央 */
	justify-content: center;     /* ←横中央 */
	width: 160px;
	height: 40px;                /* ←高さ固定（重要） */
	background-color: #000;
	border-radius: 50px;
	padding: 8px 12px;             /* ←上下padding削除 */
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
}

#productsContents h2.noTitle {
	font-family: "Akshar", sans-serif;
	font-weight: 600 !important;
	line-height: 1;
	text-align: left;
	margin: 10px 0 20px !important;
}

#productsContents span.seTitleCat {
	font-family: "Geist", sans-serif;
	font-weight: 600 !important;
	font-size: 89%;
	line-height: 1;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center; /* ← これが文字中央 */
	width: 90px;
	border-radius: 50px !important;
	padding: 5px;
	margin-right: 5px;
	text-align: center;
}
#productsContents span.seTitleCat-other {
	font-family: "Geist", sans-serif;
	font-weight: 600 !important;
	font-size: 10px;
	line-height: 1;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center; /* ← これが文字中央 */
	width:50px;
	border-radius: 20px !important;
	padding: 3px 5px;
	margin-right: 3px;
	text-align: center;
}
#productsContents span.seTitleCat-other a {
	color: #fff !important;
}
#productsContents span.seTitleCat-other a:link {
color: #fff !important;
	text-decoration: none;
}
#productsContents span.seTitleCat-other a:visited {
	color: #fff !important;
	text-decoration: none;
}
#productsContents span.seTitleCat-other a:hover {
	color: #fff !important;
	text-decoration: none;
}
#productsContents span.seTitleCat-other a:active {
	color: #fff !important;
}

/* ▼ SPだけ */
@media screen and (max-width: 575px) {
	#productsContents span.seTitleCat {
		display: block;
		margin: 0 0 5px 0; /* ← 枠は左 */
		justify-content: center; /* ← 中の文字は中央維持 */
	}
	#productsContents span.seTitleCat-other  {
		display: block;
		margin: 0 0 0 0; /* ← 枠は左 */
		justify-content: center; /* ← 中の文字は中央維持 */
	}
}

#productsContents span.caTitle {
	white-space: nowrap;
	font-family: "Akshar", sans-serif;
	font-weight: 600 !important;
	font-size: 200%;
	line-height: 1;
	text-align: left;
	vertical-align: -15% !important;
}

#productsContents span.unisex { background-color: #000; }
#productsContents span.unisex-txt { color: #000; }
#productsContents span.ladies { background-color: #d56592; }
#productsContents span.ladies-txt { color: #d56592; }

#productsContents span.noTitleCat {
	font-family: "Akshar", sans-serif;
	font-weight: 600 !important;
	font-size: 200%;
	line-height: 1;
	text-align: left;
	vertical-align: -20% !important;
	margin-top: 10px;
}
#productsContents span.noTitleCat-other {
	font-family: "Akshar", sans-serif;
	font-weight: 600 !important;
	font-size: 16px;
	line-height: 1;
	text-align: left;
	vertical-align: -20% !important;
	margin-top: 10px;
}

#productsContents div.otherBack {
	background-color: #F4F4F4;
	margin-top: 80px;
	padding: 80px 0 !important;
}

.goods-text {
	font-size: 89%;
	line-height: 1.8;
}

@media (max-width:991px) {
	.goods-text br {
		display: none;
	}
}

/* ========================
   絞り込み
======================== */
.filter-wrap {
	display:flex;
	justify-content: center; /* 左右中央 */
	flex-wrap:wrap;
	gap:10px;
}
.filter-btn {
	padding:6px 12px;
	border:1px solid #ccc;
	border-radius:20px;
	cursor:pointer;
	font-size:14px;
}
.filter-btn.active {
	background: #000 !important;
	color: #fff !important;
	border-color: #000 !important;
}
.filter-btn:hover,
.filter-btn.is-parent:hover  {
	background:#333;
	color:#fff !important;
}
.filter-btn.is-parent {
	font-weight: bold;
	background-color: rgb(212, 212, 212);
}

/* ========================
   goods
======================== */

ul.goods_color {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.goods_color li {
	display: inline-block;
	padding-right: 5px;
}

ul.goods_color li::after {
	content: "｜";
	padding-left: 2px;
}

ul.goods_color li:last-child::after {
	content: none;
}

/* ★重要：維持 */
ul.goods_size {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.goods_size li {
	display: flex;
	align-items: center;
}

ul.goods_size li::after {
	content: "/";
	margin-left: 6px;
	color: #aaa;
}

ul.goods_size li:last-child::after {
	content: none;
}

/* ========================
   features
======================== */
@media (max-width:1140px) {
	.mdNone  {display:none;}
}
@media (min-width: 1141px) {
	.lgNone  {display:none;}
}

.triangle {
	position: absolute;
	left: 10px;
	bottom: 5px;
	font-family: "Akshar", sans-serif;
	font-weight: 600 !important;
	font-size: 280%;
	line-height: 1;
	color: #fff;
	z-index: 10;
}
#featuresContents h2 {
	font-size: 120%;
	font-weight: 600;
	line-height: 1.3;
	margin: 10px 0 5px !important;
}
#featuresContents h2.h2other {
	font-size: 240%;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	margin: 60px 0 30px !important;
}

#featuresContents h3 {
	font-size: 100%;
	line-height: 1;
	margin: 0 !important;
}

#featuresContents p {
	font-size: 100%;
	line-height: 1.8;
	margin: 10px 0 0 !important;
}

@media (max-width:991px) {
	.brandLogo { width: 280px; }
	#features01 h2.heading-number img.icon,
	#features02 h2.heading-number img.icon,
	#features03 h2.heading-number img.icon {
		width: auto;
		height:55px !important;
		margin-top: 5px;
		margin-right: 5px;
	}
	#features01 h2.heading-number,
	#features02 h2.heading-number,
	#features03 h2.heading-number {
	  font-size: 150%;
	  }
	#features02 h3,
	#features03 h3 {
	  font-size: 110% !importantz;
	}
	#features01 p ,
	#features02 p ,
	#features03 p {
		font-size: 100%;
	}
	#features01 p span ,
	#features02 p span,
	#features03 p span{
		font-size: 110%;
	}
}

@media (min-width: 992px) {
	.brandLogo { width: 300px; }
	#features01 h2.heading-number img.icon,
	#features02 h2.heading-number img.icon,
	#features03 h2.heading-number img.icon {
		width: auto;
		height:80px !important;
		margin-top: 5px;
		margin-right: 10px;
	}
	#features01 h2.heading-number,
	#features02 h2.heading-number,
	#features03 h2.heading-number {
	  font-size: 220%;
	  }
	#features02 h3,
	#features03 h3 {
	  font-size: 160%;
	}
	#features01 p ,
	#features02 p ,
	#features03 p {
		font-size: 115%;
	}
	#features01 p span ,
	#features02 p span,
	#features03 p span{
		font-size: 140%;
	}
}
#features01 {
	background-image: url("../images/features/features01.jpg");
	background-size:cover;
	background-repeat:  no-repeat;
	background-position: top center;
	padding: 80px 0px;
}
#features02 {
	background-image: url("../images/features/features02.jpg");
	background-size:cover;
	background-repeat:  no-repeat;
	background-position: center center;
	padding: 80px 0px;
}
#features03 {
	background-image: url("../images/features/features03.jpg");
	background-size:cover;
	background-repeat:  no-repeat;
	background-position: top center;
	padding: 80px 0px;
}
#features01 h2.heading-number,
#features02 h2.heading-number,
#features03 h2.heading-number {
  display: flex;
  line-height: 1.4;
  font-weight: 800;
  align-items: center;
  padding: 0 0 10px;
  border-bottom: 2px solid #fff;
  color: #fff;
  margin-bottom: 20px;
}
#features01 h2.heading-number .number,
#features02 h2.heading-number .number,
#features03 h2.heading-number .number {
  display: inline-block;
  margin-right: 15px;
  padding: 5px 5px;
  background: #fff;
  color: #2f3f88;
}

#features02 h3,
#features03 h3 {
   line-height: 1.4;
  font-weight: 800;
  align-items: center;
  padding: 0;
  color: #fff;
  margin-bottom: 15px;
}
#features01 p ,
#features02 p ,
#features03 p {
	line-height: 1.8;
	font-weight: 400;
	color: #fff;
}
#features01 p span,
#features02 p span,
#features03 p span{
	font-size: 140%;
	margin-left: -0.6em;
	font-weight: 800;
}
#features01 p span.function-zh {
	font-size: 140%;
	margin-left: 0.2em;
	font-weight: 800;
}

/* =========================
	TAB
========================= */

.features-tab-nav{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	margin-bottom:40px;
	flex-wrap:wrap;
}

.features-tab-btn{
	border:none;
	padding:12px 30px;
	background:#e5e5e5;
	cursor:pointer;
	font-weight:bold;
	transition:0.3s;
	/* 横幅を長いのに合わせる追加 */
	min-width:180px;
	padding:12px 30px;
	text-align:center;
}

.features-tab-btn.active{
	background:#000;
	color:#fff;
}

/* =========================
	CONTENT
========================= */

.features-tab-content{
	display:none;
}

.features-tab-content.active{
	display:flex;
	flex-wrap:wrap;
	row-gap:40px;
}


/* ========================
   brand
======================== */

@media (max-width:991px) {
	.brandLogo { width: 280px; }
}

@media (min-width: 992px) {
	.brandLogo { width: 300px; }
}