@charset "UTF-8";
/*===========================================================================

  style.css
  サイト固有の装飾スタイルをまとめます。
  汎用コンポーネントは components.css (.c-*) を使用してください。

  【命名ルール】
  接頭辞なし → このファイル（サイト固有）
  .c-        → components.css
  .l-        → layout.css
  .u-        → utility.css

===========================================================================*/

/*===========================================================================

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

/* 共通
===========================================================================*/
.top-heading{
	text-align:center;
	font-family: var(--font-maru);
	font-size: clamp(var(--text-24), 5vw, var(--text-40));
	font-weight:700;
	line-height: 1.4;
	margin-bottom: var(--s-10);
	}
	.top-heading__eng{
		display:block;
		color:var(--color-primary);
		font-family: var(--font-eng), var(--font-sans);
		font-weight: 500;
		font-size: clamp(var(--text-16), 2vw, var(--text-20));
		}
@media (min-width: 768px) {
.top-heading{
	line-height: 1.5;
	margin-bottom: var(--s-15);
	}
}
@media (min-width: 1024px) {
}

/* メインビジュアル
===========================================================================*/
.main-visual {
  position: relative;
  width: 100%;
  height: calc(100vh - 3.75rem); /* SP: 100vh - ヘッダー60px */
  background-color: #f9f8f4;
  display: flex;
  gap: 10px;
  padding: 10px;
	flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
.main-visual__col {
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
}
.main-visual__col--right{
	display:none;
	}
.main-visual__col .swiper,
.main-visual__col .swiper-wrapper,
.main-visual__col .swiper-slide {
  height: 100%;
}
.main-visual__slide {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.main-visual__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 5;
}
#waveCanvas {
  display: block;
  width: 100%;
  height: 100%;
}
.main-visual__object {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(550px, 85vw);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
	background-image:url(../images/mv/main-visual-text-bg.png);
	background-repeat:no-repeat;
	background-size:cover;
}
.main-visual__object-body{
	padding: 0 var(--s-5);
}

@media (min-width: 768px) {
	.main-visual__col--right{
		display:block;
	}
	.main-visual__wave { 
		height: 100px;
	}
  .main-visual {
		flex-direction: row;
  }
	.main-visual__object {
		width: min(550px, 90vw);
	}
}
@media (min-width: 1024px) {
  .main-visual {
    height: calc(100vh - 6.25rem); /* 通常ヘッダー 100px */
		gap: 20px;
		padding: 20px;
  }
	.main-visual__object-body{
		padding: 0 var(--s-10);
	}
}

/* ABOUT US
===========================================================================*/
.about-layout {
	display: flex;
	flex-direction: column;
	gap: var(--s-10);
}
.about-eng {
	font-family: var(--font-eng), var(--font-sans);
	font-size: clamp(var(--text-16), 2vw, var(--text-20));
	font-weight: 500;
	color: var(--color-primary);
	margin-bottom: var(--s-3);
}
.about-title {
	font-family: var(--font-maru);
	color: var(--color-text);
	font-size: clamp(var(--text-24), 4vw, var(--text-36));
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: var(--s-5);
}
.about-text {
	font-family: var(--font-sans);
	color: var(--color-text);
	line-height: 1.9;
	margin-bottom: var(--s-8);
}
/* 右：画像エリア */
.about-images {
	position: relative;
	flex-shrink: 0;
}
.about-img-main img {
	border-radius: 20px;
}
.about-img-sub {
	position: absolute;
	bottom: calc(var(--s-10) * -1);
	right: var(--s-5);
	width: 30%;
}
.about-img-sub img {
	border-radius: 10px;
}
@media (min-width: 768px) {
	.about-layout {
		flex-direction: row;
		align-items:flex-start;
		gap: var(--s-10);
	}
	.about-body {
		flex: 1;
	}
	.about-eng {
		margin-bottom: var(--s-6);
	}
	.about-title {
		margin-bottom: var(--s-10);
	}
	.about-text {
		margin-bottom: var(--s-10);
	}
	.about-images {
		width: 50%;
	}
	.about-img-sub {
		bottom: calc(var(--s-5) * -1);
		left: calc(var(--s-5) * -1);
	}
}
@media (min-width: 1024px) {
	.about-layout {
		align-items: center;
		gap: var(--s-20);
	}
	.about-images {
		width: 50%;
	}
	.about-img-sub {
		bottom: calc(var(--s-10) * -1);
		left: calc(var(--s-10) * -1);
	}
}

/* STORY
===========================================================================*/
.story-section{
	background-color:#f9f8f4;
	}
.story-grid {
	display: flex;
	flex-direction: column;
	gap: var(--s-10);
}
.story-card {
	overflow: hidden;
}
.story-card__thumb {
	position: relative;
	}
.story-card__thumb > img {
	border-radius: 20px;
	}
/* アイコン */
.story-card__icon {
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	width: var(--s-20);
	height: var(--s-20);
	background-color: #f9f8f4;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	}
	.story-card__icon img {
		width: 40px;
		height: 40px;
		object-fit: contain;
	}
.story-card__body {
	padding: var(--s-10) 0 0 0;
	text-align:center;
}
/* 吹き出し */
.story-card__balloon {
	display: inline-block;
	position: relative;
	font-family: var(--font-maru);
	font-size: var(--text-14);
	font-weight:500;
	line-height:1.2;
	color: #fff;
	border-radius: 999px;
	padding: 0.4em 1.2em;
	margin-bottom: var(--s-4);
}
.story-card__balloon--kids   { background-color: var(--color-kids); }
.story-card__balloon--ladies { background-color: var(--color-ladies); }
.story-card__balloon::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 8px 8px 0 8px;
	border-style: solid;
	border-color: currentColor transparent transparent transparent;
}
.story-card__balloon--kids::after   { border-color: var(--color-kids) transparent transparent transparent; }
.story-card__balloon--ladies::after { border-color: var(--color-ladies) transparent transparent transparent; }
/* キャッチコピー */
.story-card__title {
	font-family: var(--font-maru);
	font-size: clamp(var(--text-20), 3vw, var(--text-24));
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: var(--s-6);
}
.story-card__title--kids   { color: var(--color-kids); }
.story-card__title--ladies { color: var(--color-ladies); }
/* 本文：罫線 */
.story-card__text {
	text-align:left;
	font-family: var(--font-sans);
	margin-bottom: var(--s-8);
	background-color: #f9f8f4;
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #f9f8f4 50%, #f9f8f4 100%),linear-gradient(180deg, #ddd 1px, transparent 1px);
	background-size: 8px 100%,100% 2.25em;
	line-height: 2.25em;
	padding-bottom: 1px;
	}
@media (min-width: 768px) {
	.story-grid {
		flex-direction: row;
		gap: var(--s-10);
		margin-left:0;
		margin-right:0;
	}
	.story-card {
		flex: 1;
	}
	.story-card__body {
		padding: var(--s-10) var(--s-5) 0 var(--s-5);
	}
	.story-card__balloon {
		margin-bottom: var(--s-6);
		}
	.story-card__title {
		margin-bottom: var(--s-8);
		}
	.story-card__text {
		margin-bottom: var(--s-10);
		background-size: 8px 100%,100% 2.5em;
		line-height: 2.5em;
		}
}
@media (min-width: 1024px) {
	.story-grid {
		gap: var(--s-15);
		margin-left:var(--s-15);
		margin-right:var(--s-15);
		}
	.story-card__icon {
		bottom: -50px;
		width: var(--s-25);
		height: var(--s-25);
		}
	.story-card__icon img {
		width: 50px;
		height: 50px;
	}
	.story-card__body {
		padding: 3.125rem var(--s-10) 0 var(--s-10);
		}
}

/* PRODUCT
===========================================================================*/

.product-section{
	background-color:#7b6b8a;
	background-image:url(../images/product_bg.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
	}
.product-section .top-heading,
.product-section .top-heading__eng {
	color: #fff;
}
.product-list {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.c-news-list--top{
	height: 250px;
	overflow-y: scroll;
	}
/* SP: 縦積み */
.product-item {
	display: flex;
	flex-direction: column;
	background-color:#fff;
	border-radius:20px;
}
.product-item__img {
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}
.product-item__img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.product-item__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--s-3);
	padding:var(--s-5) var(--s-5) var(--s-5) var(--s-5);
}
.product-item__category {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  position: relative;
  font-family: var(--font-maru);
  font-size: var(--text-12);
  font-weight: 700;
  padding: var(--s-2) var(--s-8) var(--s-2) var(--s-2);
  color: #fff;
  background-color: #586b54;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 18px) 50%,
    100% 100%,
    0 100%
  );
}
.product-item__category-icon {
	width: 20px;
	height: 20px;
  flex-shrink: 0;
	filter: brightness(0) invert(1);
}
.product-item__category--kids   { background-color: var(--color-kids); }
.product-item__category--ladies { background-color: var(--color-ladies); }
.product-item__title {
	font-family: var(--font-maru);
	font-size: clamp(var(--text-20), 3vw, var(--text-24));
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
}
.product-item__text { font-size: var(--text-15); }
.product-item__text--kids   { color: var(--color-kids); }
.product-item__text--ladies { color: var(--color-ladies); }
.product-item__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1);
}
.product-item__tags li {
	display: inline-block;
	font-size: var(--text-12);
	border: 1px solid var(--color-border);
	color:#333;
	border-radius: 4px;
	padding: var(--s-1) var(--s-2);
}
.product-item .c-btn{
	align-self: flex-start;
	padding: var(--s-4) var(--s-5);
	margin-top: var(--s-3);
	}
@media (min-width: 768px) {
	.product-list {
		gap: var(--s-10);
	}
	.c-news-list--top{
		height: 200px;
		}
	.product-item {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--s-5);
		padding:var(--s-5);
	}
	.product-item__body {
		gap: var(--s-4);
		padding:0;
	}
	.product-item--reverse {
		flex-direction: row-reverse;
	}
	.product-item__img {
		flex: 0 0 45%;
		padding:0;
		border-radius: 12px;
	}
	.product-item__body {
		flex: 1;
		padding:0;
	}
	.product-item__category {
		font-size: var(--text-14);
	}
	.product-item__category-icon {
		width: 24px;
		height: 24px;
	}
	.product-item__title {
	}
	.product-item__tags li {
		font-size: var(--text-14);
	}
}
@media (min-width: 1024px) {
	.product-item {
		gap: var(--s-10);
		padding:var(--s-10);
	}
	.product-item__text {
		font-size: var(--text-15);
	}
}

/* CRAFTSMANSHIP
===========================================================================*/
.craftsmanship-section {
}
.craftsmanship-grid {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(2, 1fr);
}
.craftsmanship-item {
	background: #f9f8f4;
	border-radius: 20px;
	padding: var(--s-5) var(--s-5);
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
}
.craftsmanship-item__num {
	width: 40px;
	height: 40px;
	background-color: #fff;
	border:1px solid var(--color-primary);
	color:var(--color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--s-3);
	font-family: var(--font-eng), var(--font-sans);
	font-size: clamp(var(--text-16), 2vw, var(--text-20));
	font-weight: 800;
	text-align: center;
}
.craftsmanship-item__title {
	font-family: var(--font-maru);
	font-size: clamp(var(--text-16), 2vw, var(--text-20));
	font-weight: 700;
	line-height:1.5;
	margin-bottom: var(--s-3);
	text-align: center;
}
.craftsmanship-item__text {
	text-align:left;
	font-size: var(--text-14);
	line-height: 2;
	margin-bottom: var(--s-3);
}
.craftsmanship-item__text + p{
	line-height:1.6;
	margin-bottom:0;
	}
.craftsmanship-item__text_note{
	display:block;
	line-height:1.6;
	margin-top:var(--s-3);
	}
@media (min-width: 768px) {
  .craftsmanship-grid {
    grid-template-columns: repeat(6, 1fr);
		gap: var(--s-5);
  }
  .craftsmanship-item { grid-column: span 2; }
  .craftsmanship-item:nth-child(4) { grid-column: 2 / span 2; }
  .craftsmanship-item:nth-child(5) { grid-column: 4 / span 2; }
	.craftsmanship-item {
		padding: var(--s-10) var(--s-5);
	}
	.craftsmanship-item__num {
		width: 50px;
		height: 50px;
		margin: 0 auto var(--s-5);
	}
	.craftsmanship-item__title {
		margin-bottom: var(--s-5);
	}
	.craftsmanship-item__text {
		font-size: var(--text-15);
	}
}
@media (min-width: 1024px) {
  .craftsmanship-grid {
		gap: var(--s-10);
  }
	.craftsmanship-item {
		padding: var(--s-15) var(--s-10);
	}
}

/* VOICE
===========================================================================*/
.voice-section {
	background-color:#41220f;
	background-image:url(../images/voice_bg.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
}
.voice-section .top-heading,
.voice-section .top-heading__eng {
	color: #fff;
}
.js-swiper-voice .swiper-slide {
	height: auto;
}
.voice-section .swiper-pagination-bullet {
	background-color: rgba(255,255,255,0.5);
	opacity: 1;
}
.voice-section .swiper-pagination-bullet-active {
	background-color: #fff;
}
.voice-slider .swiper {
	padding-bottom: var(--s-10);
}
.voice-card {
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
}
.voice-card__body {
  padding: var(--s-5);
}
.voice-card__title {
  font-family: var(--font-maru);
  font-size: clamp(var(--text-16), 2vw, var(--text-18));
  font-weight: 700;
  line-height: 1.5;
	margin-bottom: var(--s-3);
}
.voice-card__text {
  font-size: var(--text-14);
  line-height: 1.9;
	color:#333333;
}
.voice-card__footer {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background-color: #f9f8f4;
  padding: var(--s-3) var(--s-5);
}
.voice-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
}
.voice-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.voice-card__product {
  font-size: var(--text-14);
  font-weight: 700;
  line-height: 1.5;
}
.voice-card__meta {
  font-size: var(--text-12);
  line-height: 1.5;
	color:var(--color-primary);
}
@media (min-width: 768px) {
.voice-card__body {
  padding: var(--s-8);
}
.voice-card__title {
	margin-bottom: var(--s-5);
}
.voice-card__footer {
  gap: var(--s-4);
  padding: var(--s-4) var(--s-8);
}
.voice-card__icon {
  width: 50px;
  height: 50px;
}
}
@media (min-width: 1024px) {
}

/* NEWS
===========================================================================*/
.news-section{
	}
.news-section .top-heading,
.news-section .top-heading__eng {
}
.news-wrap{
	display: flex;
	flex-direction: column;
	/*flex-direction: row;*/
	}
@media (min-width: 768px) {
.news-section .top-heading,
.news-section .top-heading__eng {
	text-align:left;
	margin-bottom:0;
}
.news-section .top-heading {
	font-size: clamp(var(--text-16), 2vw, var(--text-20));
	font-weight:500;
}
.news-section .top-heading__eng {
	font-size: clamp(var(--text-24), 5vw, var(--text-40));
}
.news-wrap{
	flex-direction: row;
	align-items: center;
	/*gap: var(--s-20);*/
	}
.news-wrap__left{
	width:30%;
	}
.news-wrap__right{
	width:70%;
	}
}
@media (min-width: 1024px) {
}

/* インスタグラム
===========================================================================*/
.instagram-section{
	background-color:#f9f8f4;
	}
.instagram-heading{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction: column;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
	}
.instagram-heading h2{
  font-family: var(--font-maru);
  font-size: clamp(var(--text-20), 3vw, var(--text-30));
  font-weight: 700;
	}
.instagram-heading a{
	display:inline-block;
	font-family: var(--font-eng), var(--font-sans);
	font-size: var(--text-12);
	line-height:1;
	color:#fff;
	background-color:#7b6b8a;
	border-radius:999px;
	padding: var(--s-2) var(--s-5);
	}
.instagram-text{
	margin-bottom: var(--s-10);
	}

.instagram-section .c-grid > div .instagram-media,
.instagram-section .c-grid > div iframe {
  min-width: 100% !important; /* インラインスタイルの326pxを破壊 */
  max-width: 100% !important;
  width: 100% !important;
}

@media (min-width: 768px) {
.instagram-heading{
	justify-content:flex-start;
	flex-direction: row;
	gap: var(--s-4);
	}
	}
@media (min-width: 1024px) {}

/* オンラインショップ
===========================================================================*/
.cat-section {
	background-image:url(../images/common/dot_bg.jpg);
	}
.cat-section .inner p {
  display: flex;
  justify-content: center;
}
.cat-section .inner p a {
  display: block;
  width: fit-content;
  filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.15));
}

/*===========================================================================

　下層ページ

===========================================================================*/

/* ページタイトル
===========================================================================*/
@media (min-width: 768px) {}
@media (min-width: 1024px) {}

/* ほう花について/*
===========================================================================*/

/* ほう花の願い / ほう花の製品が生まれた理由 */
.about-story-section {
  background-color: #f9f8f4;
}
.about-media .c-media__img  { order: 1; }
.about-media__img-wrap img {
	border-radius: 20px;
}
.about-media .c-media__body { order: 0; }
.about-media__label {
  font-family: var(--font-maru);
  font-size: clamp(var(--text-14), 2vw, var(--text-20));
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--s-4);
}
.about-media__title {
  font-family: var(--font-maru);
  font-size: clamp(var(--text-24), 3vw, var(--text-36));
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--s-5);
}
.about-media__title br{
	display:none;
	}
.about-media__text {
  line-height: 2;
}
.about-media__text + .about-media__text {
  margin-top: var(--s-2);
}
.about-media__img-wrap {
  position: relative;
}
.about-media__watermark {
  position: absolute;
  bottom: calc(var(--s-5) * -1);
  right: 0;
  font-family: var(--font-eng), var(--font-sans);
  font-size: clamp(var(--text-40), 5vw, var(--text-72));
  font-weight: 700;
  color: rgba(0, 0, 0, 0.1);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 768px) {
  .about-media.c-media {
    gap: 0;
		align-items: flex-start;
    justify-content: space-between;
  }
  .about-media.c-media--reverse {
    flex-direction: row-reverse;
  }
  .about-media .c-media__img {
    flex: 0 0 45%;
  }
  .about-media .c-media__body {
    flex: 0 0 50%;
  }
	.about-media__label {
		margin-bottom: var(--s-6);
	}
	.about-media__title {
		margin-bottom: var(--s-8);
	}
	.about-media__title br{
		display:block;
	}
	.about-media__text + .about-media__text {
		margin-top: var(--s-3);
	}
}
@media (min-width: 1024px) {
  .about-media.c-media {
		align-items: center;
  }
  .about-media .c-media__img {
    flex: 0 0 40%;
  }
  .about-media .c-media__body {
    flex: 0 0 50%;
  }
}

/* ほう花の製品のこだわり */
.about-craftsmanship-section {
}
.about-craftsmanship__lead {
  line-height: 2;
  margin-bottom: var(--s-10);
}
.about-craftsmanship-card {
	border:1px solid #eee;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.about-craftsmanship-card__img{
	position:relative;
	}
.about-craftsmanship-card__num {
	position:absolute;
	top:0;
	left:0;
  font-family: var(--font-eng), var(--font-sans);
  font-size: var(--text-12);
  font-weight: 500;
  color: #fff;
  background-color: var(--color-primary);
  padding: var(--s-1) var(--s-3);
  display: inline-block;
  align-self: flex-start;
  border-radius: 0 0 4px 0;
	opacity: 0.8;
}
.about-craftsmanship-card__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.about-craftsmanship-card__title {
  font-family: var(--font-maru);
  font-size: clamp(var(--text-16), 2vw, var(--text-20));
  font-weight: 700;
  line-height: 1.5;
	text-align:center;
  padding: var(--s-5) var(--s-5) var(--s-2);
}
.about-craftsmanship-card__text {
  line-height: 1.9;
	font-size: var(--text-15);
  padding: 0 var(--s-5) var(--s-5);
  color: #333;
  flex: 1;
}
.about-craftsmanship-card__text_note{
	display:block;
	line-height:1.6;
	margin-top:var(--s-3);
	}
/* Swiper設定 */
.js-swiper-craftsmanship {
  padding-bottom: var(--s-10) !important;
}
.js-swiper-craftsmanship .swiper-slide {
  height: auto;
}
@media (min-width: 768px) {
	.about-craftsmanship-card__num {
		font-size: var(--text-14);
		padding: var(--s-2) var(--s-5);
	}
	.about-craftsmanship__lead {
		margin-bottom: var(--s-15);
	}
	.about-craftsmanship-card__title {
		padding: var(--s-10) var(--s-10) var(--s-5);
	}
	.about-craftsmanship-card__text {
		padding: 0 var(--s-10) var(--s-10);
	}
}
@media (min-width: 1024px) {
	/* Swiper設定 */
	.about-craftsmanship-slider {
		overflow: hidden;
		padding: 0 24px; /* ボタンのはみ出し分を確保 */
		margin: 0 -24px;
	}
	.js-swiper-craftsmanship.swiper {
		overflow: visible;
	}
	.js-swiper-craftsmanship .swiper-button-prev,
	.js-swiper-craftsmanship .swiper-button-next {
		width: 3rem;
		height: 3rem;
		box-shadow: none;
	}
  .js-swiper-craftsmanship .swiper-button-prev {
    left: -24px;
  }
  .js-swiper-craftsmanship .swiper-button-next {
    right: -24px;
  }
}

/* 製品 */
#section-about-product .product-list {
}
#section-about-product .product-item {
	flex-direction: column;
	width: 100%;
}
#section-about-product .product-item__img {
	flex: none;
	border-radius: 12px;
}
#section-about-product .product-item__body {
	flex: 1;
	justify-content: flex-start;
}
@media (min-width: 768px) {
	#section-about-product .product-list {
		flex-direction: row;
	}
	#section-about-product .product-item {
		flex: 1 1 0;
		width: auto;
	}
}
@media (min-width: 1024px) {
	#section-about-product .product-item {
		gap: var(--s-5);
		padding: var(--s-5);
	}
	#section-about-product .product-item__text {
		font-size: var(--text-15);
	}
}

/* べびー･きっず/レディース
===========================================================================*/
.product-heading {
  font-family: var(--font-maru);
  font-size: clamp(var(--text-24), 3vw, var(--text-36));
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--s-12);
  position: relative;
  padding-bottom: var(--s-5);
}
.product-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3px;
  background-color: var(--color-primary);
	border-radius: 1.5px;
}
.product-heading--white {
  color: #fff;
}
.product-heading--white::after {
  background-color: #fff;
}

/* 商品のご紹介
===========================================================================*/
.product-intro-section{
	background-image:url(../images/kids/about_bg.png);
	background-repeat:no-repeat;
	background-position:top left;
	background-size: contain;
	}
.product-media__label {
  display: inline-block;
  font-family: var(--font-maru);
  font-size: var(--text-15);
  font-weight: 500;
  color: #fff;
  background-color: var(--color-kids);
  border-radius: 4px;
  padding: 0.75em 1em;
  margin-bottom: var(--s-5);
	position:relative;
	line-height:1.2;
	}
	.product-media__label::after {
		content: '';
		position: absolute;
		bottom: -8px;
		left: 1em;
		border-width: 8px 8px 0;
		border-style: solid;
		border-color: var(--color-kids) transparent transparent;
		}
.product-media__title {
  font-family: var(--font-maru);
  font-size: clamp(var(--text-20), 3vw, var(--text-30));
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--s-5);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-left: 3px solid var(--color-kids);
}
.product-media__title br{
	display:none;
	}
.product-media__text {
  line-height: 1.8;
}
.product-media__text + .about-media__text {
  margin-top: var(--s-2);
}
/* レディース用 */
.product-intro-section--ladies { background-image:url(../images/ladies/about_bg.png); }
.product-media__label--ladies .product-media__label { background-color: var(--color-ladies); }
.product-media__label--ladies .product-media__label::after { border-color: var(--color-ladies) transparent transparent; }
.product-media__label--ladies .product-media__title { border-left: 3px solid var(--color-ladies); }
@media (min-width: 768px) {
  .product-media.c-media {
    gap: 0;
		align-items: flex-start;
    justify-content: space-between;
  }
  .product-media .c-media__img {
    flex: 0 0 45%;
  }
  .product-media .c-media__body {
    flex: 0 0 50%;
  }
	.product-media__label {
		font-size: var(--text-16);
	}
	.product-media__label {
		margin-bottom: var(--s-6);
	}
	.product-media__title {
		margin-bottom: var(--s-8);
		padding: var(--s-3) 0 var(--s-3) var(--s-8);
	}
	.product-media__title br{
		display:block;
	}
	.product-media__text + .product-media__text {
		margin-top: var(--s-3);
	}
}
@media (min-width: 1024px) {
.product-intro-section{
	background-size:auto;
	}
}

/* こんな方に選ばれています
===========================================================================*/
.product-checklist {
  border-radius: 4px;
  margin-top: var(--s-10);
  padding: 0 var(--s-3) var(--s-2);
  position: relative;
  overflow: visible;
  background-color: #fff;
	border: 1px solid var(--color-kids);
}
.product-checklist__heading {
  width: fit-content;
  padding: 0 var(--s-3);
  transform: translateY(-50%);
  background-color: #fff;
	color: var(--color-kids);
  font-family: var(--font-maru);
  font-size: clamp(var(--text-18), 2vw, var(--text-20));
  font-weight: 500;
  line-height: 1.4;
	text-align:left;
  position: relative;
}
.product-checklist__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
	grid-template-columns: 1fr;
  column-gap: var(--s-2);
  list-style: none;
  margin: calc(var(--s-2) * -1) 0 0;
  padding: 0;
}
.product-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  font-size: var(--text-14);
  line-height: 1.5;
  border-bottom: 1px dotted #ddd;
}
.product-checklist__item br{
	display:none;
	}
.product-checklist__item i {
	color: var(--color-kids);
  font-size: var(--text-16);
  flex-shrink: 0;
}
.product-checklist__item span {
  display: block;
}
/* レディース用 */
.product-checklist--ladies { border: 1px solid var(--color-ladies);}
.product-checklist--ladies .product-checklist__heading { color: var(--color-ladies); }
.product-checklist--ladies .product-checklist__item i{ color: var(--color-ladies); }
@media (min-width: 768px) {
.product-checklist__list {
  grid-template-columns: 1fr 1fr;
}
.product-checklist__item:nth-last-child(-n + 2) {
  border-bottom: none;
}
}
@media (min-width: 1024px) {
.product-checklist {
  margin-top: var(--s-10);
  padding: 0 var(--s-5) var(--s-2);
}
.product-checklist__heading {
  padding: 0 var(--s-5);
  transform: translateY(-50%);
}
.product-checklist__list {
  column-gap: var(--s-5);
  margin: calc(var(--s-3) * -1) 0 0;
}
.product-checklist__item {
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  font-size: var(--text-14);
}
.product-checklist__item br{
	display:block;
	}
.product-checklist__item i {
  font-size: var(--text-18);
}
}

/* 商品の特徴
===========================================================================*/
.product-feature-section {
	background-image:url(../images/kids/grid_bg.jpg);
	background-color: var(--color-kids);
	overflow: hidden;
}
.product-feature-section--ladies {
	background-image:url(../images/ladies/grid_bg.jpg);
	background-color: var(--color-ladies); 
}
.product-feature-slider {
	/*
	width: 100%;
	overflow: visible;
	padding: var(--s-5) var(--s-4) var(--s-10);
	box-sizing: border-box;
	position: relative;
	*/
}
.product-feature-card {
	background-color: #fff;
	border-radius: 20px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--s-5);
	gap:var(--s-5);
}
.product-feature-card__img img {
	border-radius: 10px;
}
.product-feature-card__body {
	/*
	padding: var(--s-5);
	gap: var(--s-4);
	*/
	display: flex;
	flex-direction: column;
	flex: 1;
}
.product-feature-card__tag {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--font-maru);
	font-size: var(--text-15);
	font-weight:500;
	border-radius: 999px;
	padding: 0.5em 1em;
	line-height: 1;
	margin-bottom:var(--s-3);
	border:1px solid var(--color-kids);
	color:var(--color-kids);
}
.product-feature-card__title {
	font-family: var(--font-maru);
	font-size: clamp(var(--text-18), 2vw, var(--text-24));
	font-weight: 700;
	color:var(--color-kids);
	line-height: 1.5;
	margin-bottom:var(--s-5);
}
.product-feature-card__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	list-style: none;
	counter-reset: feature-counter;
}
.product-feature-card__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--s-2);
	row-gap: var(--s-1);
	counter-increment: feature-counter;
}
.product-feature-card__list li::before {
	content: counter(feature-counter);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	color: #fff;
	background-color:var(--color-text);
	font-family: var(--font-eng);
	font-size: var(--text-12);
	font-weight: 500;
	grid-row: 1 / 3;
	align-self: start;
}
.product-feature-card__list-title {
	font-weight: 500;
	font-size: var(--text-15);
	grid-column: 2;
	grid-row: 1;
}
.product-feature-card__list-text {
	font-size: var(--text-14);
	color: #333;
	grid-column: 2;
	grid-row: 2;
}
/* レディース用 */
.product-feature-card--ladies .product-feature-card__tag{ border:1px solid var(--color-ladies); color:var(--color-ladies); }
.product-feature-card--ladies .product-feature-card__title{ color:var(--color-ladies); }
/* Swiper設定 */
.js-swiper-product-feature { padding-bottom: var(--s-10) !important; }
.js-swiper-product-feature.swiper {	overflow: visible;}
.js-swiper-product-feature .swiper-wrapper { align-items: stretch; }
.js-swiper-product-feature .swiper-slide {
  width: 86vw;
  height: auto;
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.js-swiper-product-feature .swiper-slide.swiper-slide-active {
  opacity: 1;
  pointer-events: auto;
}
.product-feature-section .swiper-button-prev, .product-feature-section .swiper-button-next {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
}
.product-feature-section .swiper-button-prev::after,
.product-feature-section .swiper-button-next::after { font-size: var(--text-14); }
.product-feature-section .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.5); opacity: 1;}
.product-feature-section .swiper-pagination-bullet-active { background-color: #fff; }
.product-feature-section .swiper-pagination {	bottom: 0; }
.product-feature-section .swiper-pagination-bullet:nth-child(n + 4) {	display: none; }

@media (min-width: 768px) {
	.product-feature-card {
		flex-direction: row;
		align-items: stretch;
	}
	.product-feature-card__img {
		flex: 0 0 40%;
	}
}
@media (min-width: 1024px) {
	.product-feature-card {
		padding: var(--s-10);
		gap: var(--s-10);
	}
	.product-feature-card__img {
		flex: 0 0 40%;
	}
	.product-feature-card__tag {
		font-size: var(--text-16);
		padding: 0.5em 1em;
		margin-bottom:var(--s-5);
	}
	.product-feature-card__title {
		margin-bottom:var(--s-8);
	}
	.product-feature-card__list {
		gap: var(--s-4);
	}
	.product-feature-card__list li {
		column-gap: var(--s-2);
		row-gap: var(--s-1);
	}
	.product-feature-card__list li::before {
		width: 1.5rem;
		height: 1.5rem;
	}
	.product-feature-card__list-title {
		font-size: var(--text-16);
	}
	.product-feature-card__list-text {
		font-size: var(--text-15);
	}
	/* Swiper設定 */
	.js-swiper-product-feature .swiper-slide {
		width: min(1040px, 72vw);
	}
	.product-feature-section .swiper-button-prev, .product-feature-section .swiper-button-next {
		width: 3rem;
		height: 3rem;
	}
	.js-swiper-product-feature .swiper-button-prev {
		left: calc(50% - min(520px, 36vw) - 24px);
	}
	.js-swiper-product-feature .swiper-button-next {
		right: calc(50% - min(520px, 36vw) - 24px);
	}
}

/* 商品ラインナップ
===========================================================================*/
.product-feature-lineup{
  background-color: #f9f8f4;
}
.product-lineup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2) var(--s-2);
}
.product-lineup-card {
  display: flex;
  flex-direction: column;
	background-color:#fff;
	border-radius: 10px;
}
.product-lineup-card__img {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.product-lineup-card__img .c-thumbnail {
	background-color:#fff;
	}
.product-lineup-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
	padding: var(--s-4) var(--s-4);
}
.product-lineup-card__copy {
	font-family: var(--font-maru);
  font-size: var(--text-14);
	font-weight: 500;
	line-height:1.2;
	margin-bottom:var(--s-1);
	color: var(--color-kids);
}
.product-lineup-card__name {
  font-family: var(--font-maru);
	font-size: clamp(var(--text-16), 2vw, var(--text-18));
  font-weight: 700;
	line-height:1.2;
	margin-bottom:var(--s-2);
	color: var(--color-kids);
}
.product-lineup-card__price {
  font-family: var(--font-eng), var(--font-sans);
	font-size: clamp(var(--text-18), 2vw, var(--text-20));
  font-weight: 700;
	margin-bottom:var(--s-2);
}
.product-lineup-card__price span {
  font-size: var(--text-14);
	font-weight: 500;
	font-family: var(--font-sans);
	color:#666;
	margin-left:var(--s-1);
}
.product-lineup-card__text {
  font-size: var(--text-14);
  line-height: 1.8;
  color: #333;
  flex: 1;
	margin-bottom:var(--s-5);
}
.product-lineup-card .c-btn{
	padding: var(--s-2) var(--s-5);
	line-height:1.4;
	}
.product-lineup-card .c-btn span{
	display:block;
	font-size: var(--text-12);
	}
/*.product-lineup-card__btn {
	color: var(--color-primary);
  font-family: var(--font-maru);
  font-size: var(--text-15);
  font-weight: 700;
}
.product-lineup-card__btn span{
	font-size: var(--text-12);
	}*/
/* レディース用 */
.product-lineup-card--ladies .product-lineup-card__copy,
.product-lineup-card--ladies .product-lineup-card__name{ color: var(--color-ladies); }
/* Swiper設定 */
.js-swiper-product .swiper-pagination-fraction {
  font-family: var(--font-eng);
	font-weight:500;
  font-size: var(--text-12);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 0.5em 1em;
	line-height:1;
  border-radius: 999px;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
}
/* prev / next */
.js-swiper-product .swiper-button-prev,
.js-swiper-product .swiper-button-next {
  width: 2rem;
  height: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0;
	border:none;
  top: 50%;
  transform: translateY(-50%);
}
.js-swiper-product .swiper-button-prev {
  border-radius: 0 2px 2px 0;
}
.js-swiper-product .swiper-button-next {
  border-radius: 2px 0 0 2px;
}
.js-swiper-product .swiper-button-prev::after,
.js-swiper-product .swiper-button-next::after {
  font-size: var(--text-12);
  color: #fff;
  font-weight: 700;
}
.js-swiper-product .swiper-button-prev { left: 0; }
.js-swiper-product .swiper-button-next { right: 0; }
@media (min-width: 768px) {
  .product-lineup-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5) var(--s-5);
  }
}
@media (min-width: 1024px) {
  .product-lineup-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6) var(--s-6);
  }
	.product-lineup-card__body {
		padding: var(--s-8) var(--s-6);
	}
}

/* お客様からの声
===========================================================================*/
.product-voice-card {
  position: relative;
  display: flex;
  gap: var(--s-5);
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--s-5);
  overflow: hidden;
}
.product-voice-card__watermark {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: var(--font-eng);
  font-size: clamp(var(--text-20), 3vw, var(--text-40));
  font-weight: 700;
  color: rgba(0, 0, 0, 0.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.product-voice-card__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
.product-voice-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
}
.product-voice-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-voice-card__meta {
  font-size: var(--text-12);
  color: var(--color-primary);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}
.product-voice-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-voice-card__product {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-12);
	background-color: var(--color-kids);
  font-weight: 700;
  color: #fff;
  border-radius: 4px;
  padding: 0.2em 0.8em;
  line-height: 1.6;
	margin-bottom: var(--s-3);
}
.product-voice-card__title {
  font-family: var(--font-maru);
	font-size: clamp(var(--text-16), 2vw, var(--text-18));
  font-weight: 700;
  line-height: 1.5;
	margin-bottom: var(--s-1);
}
.product-voice-card__text {
  font-size: var(--text-14);
  color: #333;
}
/* レディース用 */
.product-voice-card--ladies .product-voice-card__product{ background-color: var(--color-ladies); }
/* Swiper設定 */
.js-swiper-product-voice { padding-bottom: var(--s-10) !important; }
.js-swiper-product-voice .swiper-slide { height: auto; }
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
	.product-voice-card {
		gap: var(--s-8);
		padding: var(--s-8);
	}
	.product-voice-card__left {
		gap: var(--s-2);
	}
	.product-voice-card__icon {
		width: 7.5rem;
		height: 7.5rem;
	}
	.product-voice-card__product {
	 margin-bottom: var(--s-3);
	}
	.product-voice-card__text {
		font-size: var(--text-15);
	}
}

/* よくあるご質問
===========================================================================*/
.product-faq-section{
  background-color: #f9f8f4;
}