@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	font-family: "Noto Serif Display", serif;
}

.wrapper img{
	display: block;
	line-height: 0;
}

.mv{
	margin: 0 auto 5%;
}

.mv .sp{
	display: block;
}

.mv .pc{
	display: none;
}

.mv .lead{
	margin: 10% auto;
}

.mv .lead p{
	text-align: center;
	margin: 2% auto;
	font-size: .8rem;
	line-height: 1.6;
	font-weight: 600;
}

.mv .lead .lead-title{
	font-size: 1.4rem;
	letter-spacing: .05rem;
	font-weight: bold;
	margin: 1% 0;
}

.mv .lead .lead-sub{
	font-size: 1.0rem;
	letter-spacing: .05rem;
	margin-bottom: 0;
}

.mv .lead .mtg10{
	margin-top: 10%;
}

@media(min-width:750px){
	.mv .sp{
		display: none;
	}

	.mv .pc{
		display: block;
	}

	.mv .lead{
		margin: 5% auto;
	}

	.mv .lead p{
		margin: 2% auto;
		font-size: 1.0rem;
		line-height: 2;
		letter-spacing: .08rem;
	}

	.mv .lead .lead-title{
		font-size: 2.2rem;
		letter-spacing: .2rem;
		margin: 1% 0;
		line-height: 1.3;
	}

	.mv .lead .lead-sub{
		font-size: 1.6rem;
		line-height: 1.3;
		letter-spacing: .05rem;
		margin-bottom: 0;
	}

	.mv .lead .mtg10{
		margin-top: 5%;
	}
}

/*---------- button-container ----------*/

.button-container {
	display: flex;
	gap: 12px;
	margin:8% auto 0;
	width: 90%;
	}

.btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #000;
	color: #000;
	text-decoration: none; /* テキストアンダーラインなし */
	padding: 13px 16px;
	font-size: .9rem;
	border-radius: 50px;
	font-weight: 600;
}

@media(min-width:750px){
	.button-container {
		gap: 20px;
		width: 50%;
		margin-bottom: 8%;
		}
	
	.btn {
		font-size: 1.01rem;
	}
}


/*---------- main-contents ----------*/

.main-contents{
	margin: 5% auto 0%;
}

.contents-innner{
	margin: 0 auto;
	padding-top: 13%;
}

.inner-top{
	background-color: #E3D2CB;
	padding: 5% 0 8%;
	text-align: center;
}

.inner-top p{
	margin: 0 auto;
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: bold;
	letter-spacing: .05rem;
}

.inner-top p span{
	margin: 2% auto;
	font-size: 1.0rem;
	color: #780202;
}

@media(min-width:750px){
	.main-contents{
		margin: 0% auto 10%;
	}
	
	.contents-innner{
		margin: 0 auto;
		padding-top: 4%;
	}

	.inner-top{
		padding: 5% 0;
	}

	.inner-top p{
		font-size: 2.0rem;
		line-height: 1.6;
	}

	.inner-top p span{
		font-size: 1.2rem;
	}
}

/*---------- fabric ----------*/

.fabric{
	background-color: #F9F5F4;
	padding: 5% 0;
}

.fabric-flex{
	display: flex;
	align-items: center;
	column-gap: 20px;
	width: 90%;
	margin: 0 auto;
}

.fabric-flex > div:first-child{
	flex: 0 0 34%;
}

.fabric-flex > div:first-child img{
	border-radius: 150px;
}

.fabric-comment{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.fabric-comment p{
	margin: 1% 0;
	font-size: .75rem;
	line-height: 1.6;
}

.fabric-comment p br{
	display: none;
}

.fabric-comment p:first-child{
	font-size: 1.1rem;
	font-weight: bold;
	margin-top: 0;
	letter-spacing: .03rem;
	text-align: center;
	color: #780202;
}

@media(min-width:750px){
	.fabric-flex{
		width: 100%;
		max-width: 600px;
		justify-content: center;
		column-gap: 40px;
	}
	
	.fabric-flex > div:first-child{
		flex: 0 0 160px;
	}

	.fabric-comment{
		flex: 0 1 auto;
		justify-content: center;
	}

	.fabric-comment p{
		flex: 0;
		font-size: .95rem;
		line-height: 1.8;
	}
	
	.fabric-comment p br{
		display: inline;
	}

	.fabric-comment p:first-child{
		font-size: 1.5rem;
		text-align: left;
	}	
}

/*---------- item ----------*/

.item{
	margin: 5% auto;
	width: 90%;
}

.item-flex{
	display: flex;
	flex-wrap: wrap;
	gap: 26px 8px;
	justify-content: center;
}

.item-inner{
	width: calc((100% - 8px) / 2);
	min-width: 0;
	box-sizing: border-box;
}

.slide{
	position: relative;
	overflow: inherit;
}

.slide img{
	animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-name: slideshow; 
    animation-timing-function: ease; 
    opacity: 0;
}

.slide img:nth-child(2){
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}

.slide img:nth-child(1){
	animation-delay: 0s;
	}

.slide img:nth-child(2){
	animation-delay: 3s;
}


@keyframes slideshow {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


/* --- 商品名・価格のテキスト部分 --- */
.item-inner p:not(.color) {
	margin: 4% auto;
	text-align: center;
	font-size: .7rem;
	line-height: 1.6;
	max-width: 30ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-inner p:not(.color)::after {
	content: "tax in";
	font-size: .6rem;
	margin-left: 3px;
}

/* --- カラーチップの親要素（横並び・中央配置） --- */
.item-inner .color {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;        /* チップ同士の間隔 */
	margin: 4% auto; /* 上下の余白 */
}

/* --- 正円のカラーチップ本体 --- */
.item-inner .color .cc {
	display: inline-block;
	width: 13px;          /* 幅と高さを揃える */
	height: 13px;
	border-radius: 50%;   /* 正円化 */
	box-sizing: border-box;
}

/*------- 各色の指定 --------*/
.color-01 .cc:nth-of-type(1) {
	background: #fff7eb;
	border: solid 1px #b6b6b6;
}

.color-01 .cc:nth-of-type(2) {
	background: #231f20;
}

.color-01 .cc:nth-of-type(3) {
	background: #b4895f; 
}

.color-02 .cc:nth-of-type(1) {
	background: #fff7eb;
	border: solid 1px #b6b6b6;
}

.color-02 .cc:nth-of-type(2) {
	background: #231f20;
}

.color-02 .cc:nth-of-type(3) {
	background: #0cc0df; 
}

.color-02 .cc:nth-of-type(4) {
	background: #004aad; 
}

.color-03 .cc:nth-of-type(1) {
	background: #0cc0df; 

}

.color-03 .cc:nth-of-type(2) {
	background: #004aad; 
}


.item-inner a{
	display: block;
	text-decoration: none;
	width: 50%;
	margin: 5% auto 0;
	background-color: #000;
	color: #fff;
	text-align: center;
	line-height: 1.5;
	font-size: .8rem;
	font-weight: 600;
}

@media (min-width: 750px) {
  /* 全体の最大幅を600pxにし、中央揃え */
  .item {
    max-width: 1200px;
  }

  /* 折り返しを解除し、等間隔で横並び */
  .item-flex {
    flex-wrap: nowrap;
	  justify-content: center;
    gap: 12px;
  }

  /* アイテム数に応じて均等に横幅を自動配分 */
  .item-inner {
   flex: 0 0 calc((100% - 12px * 2) / 3);
   width: calc((100% - 12px * 2) / 3);
  }

  /* --- 既存の文字・ボタンのサイズ調整 --- */
  .item-inner p:not(.color) {
    font-size: .78rem;
    max-width: 40ch;
  }
  
  .item-inner a {
    width: 60%; /* 横並びで枠が狭くなるため、押しやすいサイズ感に調整 */
    line-height: 1.5;
    font-size: .9rem;
  }
	
	.item-inner p:not(.color) {
		font-size: .9rem;
		max-width: 40ch;
	  }
	
	.item-inner a{
		width: 40%;
		line-height: 1.5;
		font-size: 1.0rem;
	}
}