* {
    margin: 0;
    padding: 0;
    color: #000;
    letter-spacing: 0.1rem;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
	font-weight: 500;
	font-style: normal;
    font-size: 90%;
}

/*

本文大：
font-size:clamp(16px,3.5svw,20px);
line-height:clamp(28px,7svw,36px);
本文中：
font-size:clamp(14px,3svw,18px);
line-height:clamp(25px,6svw,30px);
本文小：
font-size:clamp(12px,2.5svw,16px);
line-height:clamp(20px,4svw,24px);
本文極小：
font-size:clamp(10px,2.5svw,14px);
line-height:clamp(16px,3svw,20px);

*/
/*横幅*0.047*/
@media screen and (max-width:1800px){* {font-size: 84.6%;}}
@media screen and (max-width:1700px){* {font-size: 79.9%;}}
@media screen and (max-width:1600px){* {font-size: 75.2%;}}
@media screen and (max-width:1500px){* {font-size: 70.5%;}}
@media screen and (max-width:1400px){* {font-size: 65.8%;}}
@media screen and (max-width:1300px){* {font-size: 61.1%;}}
@media screen and (max-width:1200px){* {font-size: 56.4%;}}
@media screen and (max-width:1100px){* {font-size: 51.7%;}}

@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	* {font-size: 80%;}
}
html{
	scroll-behavior: smooth;
}
html,body{
	width:100%;
	height:100%;
	background: #edebe7;
}
#content{
	width:auto;
	height:100%;
	min-width:1003px;
	margin:auto;
}
.contentBox{
	max-width:1400px;
	min-width:1003px;
	margin:auto;
}
@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	#content{
		width:100%;
		min-width:0;
	}
	.contentBox{
		max-width:1000px;
		min-width:0px;
	}
}
#logo{
	width:clamp(200px,17rem,250px);
	padding:1.5rem 1.5rem;
	margin:auto;
	position: fixed;
	top:0;
	left:0;
	z-index: 1000;
	& img{
		aspect-ratio: 1.25 / 1;
		width: 100%;
		/*height: 14rem;*/
	}
}

@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	#logo{
		width:clamp(160px,15rem,200px);
		padding:1.5rem 1.5rem;
		& img{
		}
	}
}
@media screen and (max-width:640px){/*スマートフォン・タブレット*/
	#logo{
		width: 30svw;
		padding:2svw 2svw;
		& img{
		}
	}
}
/*============================================================

mv

============================================================*/
#mv{
	display:block;
	position: relative;
	width: 100%;
	height:100%;
	& #mvCopy{
		display:grid;
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 4;
	}
	& #mvCopy{
		position: absolute;
		display: inline-block;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
		z-index: 50;
		background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 100%);
		text-align: center;
		padding:4rem;
		& h1{
			display: block;
			margin:0 auto;
			font-weight: 400;
			letter-spacing: 0.5rem; text-align: left;
			font-size: 12rem;
			line-height: 12rem;
			/*white-space: nowrap;*/
			text-align: center;
			color:#900;
			& span{
				font-size: 9rem;
				line-height: 11rem;
				color:#000;
				/*white-space: nowrap;*/
				text-align: center;
				& span{
					font-size: 8rem;
					line-height: 8rem;
					color:#000;
					/*white-space: nowrap;*/
					text-align: center;
				}
			}
		}
		& h4{
			text-align: center;
			font-size: 2.5rem;
			line-height: 1.5rem;
		}
	}
	& #mvPhoto{
		position: absolute;
		width: 100%;
		height:100%;
		overflow: hidden;
		& .mvSlide{
			width: 100%;
			height:100%;
			aspect-ratio:1.473 / 0.836;
			&.slide1{
				background-image: url(../img/mv.jpg);
				background-size:cover;
				background-position: center center;
			}
			&.slide2{
				background-image: url(../img/mv2.jpg);
				background-size:cover;
				background-position: 33% center;
			}
			&.slide3{
				background-image: url(../img/mv3.jpg);
				background-size:cover;
				background-position: center center;
			}
			&.slide4{
				background-image: url(../img/mv4.jpg);
				background-size:cover;
				background-position: 30% center;
			}
		}
	}

	& #mvRead{
		position: absolute;
		z-index: 51;
		display:block;
		padding:1rem 2rem 1rem;
		border-radius: 9999px;
		background: #FFF;
		bottom:5%;
		left: 50%;
		transform: translateX(-50%);
		& h2{
			/*white-space: nowrap;*/
			font-weight: 600;
			font-size: 2rem;
			line-height: 2rem;
			text-align: center;
		}
	}
	& .line{
		position: absolute;
		height:5%;
		width:4px;
		left:50%;
		transform: translateX(-50%);
		&.one{
			bottom:0%;
			background: #FFF;
		}
		&.two{
			bottom:-5%;
			background: #900;
		}
	}
}
@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	#mv{
		& #mvCopy{
			padding:6svw;
			& h1{
				font-weight: 500;
				letter-spacing: 0.2rem;
				font-size: 11svw;
				line-height: 11svw;
				& span{
					font-size: 9svw;
					line-height: 12svw;
					& span{
						font-size: 8svw;
						line-height: 5svw;
					}
				}
			}
			& h4{
				font-size: 4svw;
				line-height: 3svw;
			}
		}
		& #mvRead{
			min-width:90%;
			& h2{
				font-size: 4svw;
				line-height: 6svw;
			}
		}
	}
}
/*============================================================

craftmanship

============================================================*/
#craftmanship{
	position: relative;
	z-index: 1;
	margin-top:10rem;
	text-align: center;

	& h2{
		display: inline-block;
		width:107rem;
		margin:auto;
		text-align: center;
		font-weight: 500;
		font-size:3.5rem;
		/*white-space: nowrap;*/
		padding-bottom:1rem;
		letter-spacing: 0;
		line-height: 3.5rem;
		border-bottom: 2px solid #000;
		margin-bottom:7rem;
	}
}
@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	#craftmanship{
		& h2{
			width:90%;
			font-size:clamp(22px,5svw,50px);
			line-height:clamp(35px,6svw,60px);
			border-bottom: 1px solid #000;
		}
	}
}


.craftmanshipGrid{
	width:100%;
	margin:auto;
	display: grid;
	height:38rem;
	margin-bottom:12rem;
	&.grid_l{
		grid-template-columns: calc((100% - 107rem) / 2) 57rem calc((100% - 107rem) / 2) 50rem ;
	}
	&.grid_r{
		grid-template-columns: 50rem calc((100% - 107rem) / 2) 57rem calc((100% - 107rem) / 2);
	}
	& .item{
		justify-items: start;
	    align-items: center;
	    & div{
			justify-items: start;
		    align-items: center;

		    & p{
				display:block;
				font-weight: 500;
				text-align: left;
				font-size: 1.65rem;
				line-height: 3.8rem;
				/*white-space: nowrap;*/

			}
			& h5{
				display: block;
				font-weight: 700;
				text-align: left;
				font-size: 2.5rem;
				line-height: 2.5rem;
				padding-bottom:4rem;
			}
		}

		&.item1{
			display:grid;
		    grid-column: 2 / 3;
		}
		&.item2{
		    grid-column: 3 / 5;
		}
		&.item3{
		    grid-column: 1 / 3;
		    order: 1; /*1番目*/
		}
		&.item4{
			display:grid;
		    grid-column: 3 / 4;
		    position: relative;
		    justify-items: end;
		    align-items: center;
		    order: 2; /*1番目*/
		}

		& img{
			display: block;
			width:100%;
			aspect-ratio: 1.2 / 0.7;
		}
	}
}
@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	.craftmanshipGrid{
		width:90%;
		display: block;
		height:auto;
		margin-bottom:8rem;
		& .item{
			display:block;
		    & div{
			    & p{
					font-size:clamp(16px,3.5svw,20px);
					line-height:clamp(28px,7svw,36px);
					white-space: normal;
					padding-bottom:2rem;
				}
				& h5{
					display: inline-block;
					font-size: clamp(21px,7svw, 35px);
                    line-height: clamp(24px,8svw,40px);
                    font-weight: 700;
					text-align: center;
					padding-bottom:4rem;
				}
			}
			&.item1{
				display:block;
			}
			&.item2{
				display:block;
			}
			&.item3{
				display:block;
			}
			&.item4{
				display:block;
			}
		}
	}
}

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

products

============================================================*/
#products{
	padding:0 0 5rem;
}
#products h3 span{
	color:#c6b19e;

}
#products h3 strong{
	color:#492223;
}
#products .productBox{
	display:block;
	background-image: url(../img/product_bg.jpg);
	background-size: cover;
	background-position:center center;
}
#products .productBox .item{
	width:100%;
	text-align:center;
	position: relative;
	padding:0 0 0;
	& .photo{
		background-size: 45%;
		background-position:center 5rem;
		background-repeat: no-repeat;
		width:100%;
		text-align:center;
		min-height:65rem;
	}
	&.sweater .photo{
		background-image: url(../img/sweater.png);
	}
	&.vest .photo{
		background-image: url(../img/vest.png);
	}
	&.cardigan .photo{
		background-image: url(../img/cardigan.png);
	}
	&.stole .photo{
		background-image: url(../img/stole.png);
	}

	& h4{
		position: absolute;
		left:5rem;
		top:2rem;
		display:block;
		font-size:3rem;
		font-weight: 500;
		& span{
			font-weight: 100;
			font-size:10rem;
			color:#c3a25f;
		}
	}
	& .color_variation{
		position: absolute;
		right:5rem;
		top:2rem;
		display:block;
		padding:2rem 0 0 0;
		& p{
			font-size:1.8rem;
			color:#4a3e2f;
			padding:0.5rem 0;
		}

		& .color_box{
			display: grid;
			grid-template-columns: repeat(2, 1fr); /* 最大2列 */
			& .col{
				width: 80%;
				aspect-ratio: 1 / 1;
				background-repeat: no-repeat;
				background-size:250%;
				background-position: center center;
				margin: auto;
				border-radius: 9999px;

				&.navy{
					background-image:url(../img/navy.jpg);
				}
				&.deepred{
					background-image:url(../img/deepred.jpg);
				}
				&.gray{
					background-image:url(../img/gray.jpg);
				}
				&.camel{
					background-image:url(../img/camel.jpg);
				}
			}
			& .col_name{
			font-size:1.3rem;
			color:#000;
			padding:0.5rem 0;
			}
		}
	}

	& .read_price{
		display:flex;
		justify-content:center;
		align-items: center;
		margin: 0 auto 3rem;
		max-width:75rem;
		& p.read{
			font-size: 1.2rem;
            line-height: 2rem;
            text-align: left;
            padding: 0 4rem 0 0;
		}
		& p.price{
			font-size: 7rem;
			line-height: 5rem;
			font-weight: 300;
			border-bottom: 2px solid #000;
			/*white-space: nowrap;*/
			& span{
			font-size: 3rem;
			line-height: 5rem;
			}
			& strong{
				&::after{
					content:"(税込)より";
					font-size: 3rem;
					line-height: 7rem;
					font-family: "Shippori Mincho B1", serif;
					font-style: normal;
				}
			}
		}
		
	}

	& .photo_variation{
		display: flex;
		justify-content:center;
		gap: 0 3rem;

		& div{
			width: 23rem;
			img{
				display: block;
				vertical-align: baseline;
				width: 100%;
				aspect-ratio: 1 / 1;
				border:0.5rem solid #dfdbd2;
			}
			& p{
				text-align: left;
				font-size:1.2rem;
				padding:1rem 0.5rem;
			}
		}
	}

	& .sending{
		margin-top:2rem;
		color:#312202;
		background: #c3a25f;
		height:4.5rem;
		font-size:3rem;
		letter-spacing: 0.5rem;
	}

	& .note{
		display:grid;
		grid-template-columns: 20rem 55rem;
		justify-content: center;
		align-content:center;
		padding:3rem 0 7rem;
		gap:2rem;
		background:#edebe7;
		& .portrait{
			background-repeat: none;
			background-position: center center;
			background-size: cover;
			border-radius: 9999px;
			grid-row: 1 / 4;
			grid-column: 1 / 3;
			&.p_sweater{
				background-image: url(../img/sweater_portrait.jpg);
				width:20rem;
				aspect-ratio: 1 / 1;
			}
			&.p_vest{
				background-image: url(../img/vest_portrait.jpg);
				width:20rem;
				aspect-ratio: 1 / 1;
			}
			&.p_cardigan{
				background-image: url(../img/cardigan_portrait.jpg);
				width:20rem;
				aspect-ratio: 1 / 1;
			}
			&.p_stole{
				background-image: url(../img/stole_portrait.jpg);
				width:20rem;
				aspect-ratio: 1 / 1;
			}
		}
		& .message{
			text-align: left;
			grid-row: 1 / 2;
			grid-column: 2 / 3;
			& h5{
				display: block;
				position: relative;
				font-size:6rem;
				line-height: 2rem;
				border-bottom:1px solid #990000;
				color:#990000;
			}
			& span.hitokoto{
				display: block;
				position: absolute;
				right:0;
				text-align: right;
				top:1rem;
				font-size:1.5rem;
				font-weight: 600;
				color:#000;
			}
		}

		& p{
			grid-row: 2 / 4;
			grid-column: 2 / 3;
			padding-top:0rem;
			font-size:1.5rem;
			line-height: 3rem;
			text-align: left;
		}
	}
}
@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	#products{
		padding:0 0 2rem;
	}
	#products .productBox .item{
		padding:2rem 0 0;
		& .photo{
			background-size: 90%;
			background-position:center -4svw;
			min-height: 80svw;
		}

		& h4{
			position: static;
			font-size:clamp(25px,5svw,50px);
			text-align: left;
			padding: 0 0 0 6svw;
			& span{
				font-size:clamp(50px,7.5svw,100px);
				line-height:clamp(50px,7.5svw,100px);
			}
		}
		& .color_variation{
			position: static;
			width: 60%;
			padding:0 0 0 0;
			margin:7svw auto 0;
			& p{
				font-size:clamp(12px,2.5svw,16px);
				line-height:clamp(20px,4svw,24px);
				text-align: center;
				padding:2svw;
			}

			& .color_box{
				grid-template-columns: 1fr 1fr 1fr 1fr;
				& .col_name{
					font-size:clamp(10px,2svw,14px);
					line-height:clamp(16px,3svw,20px);
				}
			}
		}

		& .read_price{
			display:block;
			margin: 0 auto 3rem;
			width: 90%;
			& p.read{
				font-size: clamp(16px, 3svw, 20px);
				line-height: clamp(28px, 5svw, 36px);
				text-align: left;
				padding: 1rem 0 2rem;
			}
			& p.price{
				display: inline-block;
				font-size: min(6rem,55px);
				line-height: 3rem;
				padding:0;
				& span{
				font-size: min(3rem,20px);
				line-height: 3rem;
				}
				& strong{
					&::after{
						font-size: min(2rem,20px);
						line-height: 3rem;
					}
				}
			}
		}
		& .photo_variation{
			width: 95%;
			margin: auto;
			gap: 0 1rem;
			& div{
				width: 23rem;
			}
		}
		@media screen and (max-width:600px){/*スマートフォン・タブレット*/
			& .photo_variation{
				display: block;
				gap: 0;
				& div{
					display: grid;
					grid-template-columns: 35% 65%;
					width: 100%;
					gap: 5px;
					padding:0 0 1rem;
					img{
						border:0.2rem solid #dfdbd2;
					}
					& p{
						display: grid;
						justify-items: center;
					    align-items: center;
						font-size:clamp(12px,2.5svw,16px);
						line-height:clamp(20px,4svw,24px);
					}
				}
			}
		}

		& .sending{
			position: relative;
			height:auto;
			font-size:clamp(20px,5svw,40px);
			line-height:clamp(20px,5svw,40px);
			padding:2.5svw;
			letter-spacing: 0.3svw;
		}
		& .note{
			width:100%;
			padding: 3rem 5% 5rem;
			margin:auto;
			grid-template-columns: 25% 75%;
			gap:3%;
			& .portrait{
				grid-column: 1 / 2;
				&.p_sweater{
					width:100%;
				}
				&.p_vest{
					width:100%;
				}
				&.p_cardigan{
					width:100%;
				}
				&.p_stole{
					width:100%;
				}
			}
			& .message{
				width:100%;
				& h5{
                    font-size: clamp(50px, 13.5svw, 60px);
                    line-height: clamp(24px, 7svw, 24px);
				}
				& span.hitokoto{
					top:3.5rem;
					font-size:clamp(16px,3.5svw,20px);
					line-height:clamp(28px,7svw,36px);
				}
			}
			& p{
				padding-top:3rem;
				font-size:clamp(14px,3svw,18px);
				line-height:clamp(25px,6svw,30px);
				grid-row: 2 / 3;
			}
		}
		@media screen and (max-width:600px){/*スマートフォン・タブレット*/
			& .note{
				gap:3%;
				& .portrait{			
					grid-row: 1 / 3;
					grid-column: 1 / 2;
				}
				& .message{
					& h5{
	                    font-size: clamp(50px, 13.5svw, 60px);
	                    line-height: clamp(24px, 7svw, 24px);
					}
					& span.hitokoto{
						top:3.5rem;
						font-size:clamp(16px,3.5svw,20px);
						line-height:clamp(28px,7svw,36px);
					}
				}
				& p{
					padding-top:0rem;
					font-size:clamp(14px,3svw,18px);
					line-height:clamp(25px,6svw,30px);
					grid-row: 3 / 4;
					grid-column: 1 / 3;
				}
			}
		}
	}
}

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

CTA

============================================================*/
section.cta{
	background-image: url(../img/cta_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 100%;
	min-height:45rem;
	position: relative;
	& .border{
		position: absolute;
		top:1rem;
		left:1rem;
		border:1px solid #FFF;
		height: calc(100% - 2rem);
		width: calc(100% - 2rem);
	}

	& h4{
		padding-top:2rem;
		text-align: center;
		font-size:5rem;
		font-weight:300;
		color:#FFF;
	}

	& .inquiry{
		position: relative;
		& .inquiry_bg{
			position: absolute;
			margin-top:6rem;
			background:#cd9934;
			height:23.5rem;
			width: 100%;
		}
		& .inquiry_grid{
			display: flex;
			justify-content:center;
			& .ooto{
				width: 22rem;
				position: relative;
				& .photo{
					background-image: url(../img/cta_ooto.png);
					background-position: center center;
					background-size: cover;
					width:100%;
					aspect-ratio: 9.08 / 10.63;
				}
				& .fukidashi{
					position: relative;
					width: 23rem;
					letter-spacing: -0.1rem;
					margin-left:-0.5rem;
					margin-top:-1.5rem;
					background:#fff;
					border-radius: 9999px;
					padding:1.3rem 0;
					font-size:1.8rem;
					line-height:2.5rem;
					font-weight: 500;
					text-align: center;
					color:#492223;

					&::before{
						position: absolute;
						top:-1rem;
						right:5rem;
						content: "";
						background-image: url(../img/fukidashi_top.png);
						background-size: cover;
						background-position: center center;
						width: 2rem;
						aspect-ratio: 3.29/1.93
					}
				}
			}/*ooto*/
			& .read_tel{
				width:63rem;
				position: relative;
				& .read{
					margin-top:1rem;
					background: #ecc781;
					color:#cc0000;
					font-size:3rem;
					line-height: 4rem;
					border-radius: 9999px;
					padding:1rem 0 1.5rem;
					text-align: center;
				}
				& .tel{
					font-size:9rem;
					line-height: 9rem;
					text-align: center;
					padding:1rem 0 2rem;
					filter: drop-shadow(1px 1px 0px rgba(255,255,255,0.25));
				}
				& .description{
					color: #fff;
					text-align: center;
					font-size: 1.3rem;
				}
			}
		}

	}
}

@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	section.cta{
		min-height:90svw;
		padding:0 0 1svw;
		& h4{
			padding-top:6svw;
			font-size:6svw;
		}

		& .inquiry{
			& .inquiry_bg{
				top:calc(28.4svw + calc(30svw / 100 * 10.63));
				margin-top:0;
				height:38svw;
			}
			@media screen and (max-width:760px){/*スマートフォン・タブレット*/
				& .inquiry_bg{
					height:40svw;
				}
			}
			@media screen and (max-width:500px){/*スマートフォン・タブレット*/
				& .inquiry_bg{
					height:42svw;
				}
			}
			@media screen and (max-width:450px){/*スマートフォン・タブレット*/
				& .inquiry_bg{
					height:44svw;
				}
			}
			@media screen and (max-width:420px){/*スマートフォン・タブレット*/
				& .inquiry_bg{
					height:46svw;
				}
			}
			@media screen and (max-width:380px){/*スマートフォン・タブレット*/
				& .inquiry_bg{
					height:48svw;
				}
			}
			& .inquiry_grid{
				display: block;
				position: relative;
				width: 100%;
				margin: auto;
				grid-template-columns: 30% 70%;
				& .ooto{
					padding:5svw 0 0 0;
					width: 100%;
					& .photo{
						position: absolute;
						top:0svw;
						left:3svw;
						width:27svw;
					}
					& .fukidashi{
						position: absolute;
						top:6svw;
						right:5svw;
						width:65%;
						letter-spacing: -0.4svw;
						margin-left:0;
						margin-top:0;
						padding:2svw 2svw 2.5svw;
						font-size:5svw;
						line-height:6.5svw;
						&::before{
							top:17svw;
							left:10%;
							width: 6svw;
							aspect-ratio: 52/31;
							transform: scale(1, -1);
						}
					}
				}/*ooto*/
				& .read_tel{
					width:100%;
					margin: 0 auto 0;
					background: #cd9934;
					padding-bottom:1rem;
					& .read{
						margin-top:27svw;
						background:none;
						color:#900;
						font-size:clamp(18px,4svw,50px);
						line-height:clamp(22px,4.5svw,60px);
						border-radius: 0;
						padding:3svw 0 0svw;
						filter: drop-shadow(1px 1px 0px rgba(255,255,255,0.25));
					}
					& .tel{
						font-size:13svw;
						line-height: 13svw;
						padding:1svw 0 2svw;
					}
					& .description{
						padding: 0 0 0 2svw;
						font-size:clamp(10px,2svw,14px);
						line-height:clamp(16px,3svw,20px);
					}
				}
			}

		}
	}
	@media screen and (max-width:760px){/*スマートフォン・タブレット*/
		section.cta{
			min-height:93svw;
		}
	}
	@media screen and (max-width:500px){/*スマートフォン・タブレット*/
		section.cta{
			min-height:95svw;
		}
	}
	@media screen and (max-width:450px){/*スマートフォン・タブレット*/
		section.cta{
			min-height:97svw;
		}
	}
	@media screen and (max-width:420px){/*スマートフォン・タブレット*/
		section.cta{
			min-height:99svw;
		}
	}
	@media screen and (max-width:380px){/*スマートフォン・タブレット*/
		section.cta{
			min-height:101svw;
		}
	}
}
/*============================================================

knitter

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

#knitter{
	position: relative;
	height:65rem/*(60rem-5rem)*/;
	padding-top:5rem;
	margin-top:10rem;
	margin-bottom:10rem;
	& .bg{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background-image: url(../img/knitter_bg.jpg);
		background-size: cover;
		background-position: center 70%;
	}
	& .itemText{
		position: relative;
		display: grid;
		justify-content: center;
  		align-items: center;
		margin-left:52%;
		width: 48%;
		min-height:55rem;
		padding:0 3rem 0 5rem;
		background:#c95f5f;
		& h3{
			width: 42rem;
			& span{
				color:#eca4a4;
			}
			& code{
				color:#250c0c;
			}
		}
		& p{
			padding-top:3rem;
			font-size: 1.65rem;
			line-height:3rem;
		}
	}
}

@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	#knitter{
		display:grid;
		grid-template-columns: 10% 90%;
		grid-template-rows: 50rem 10rem auto;
		height:auto;
		margin-bottom:15svw;
		& .bg{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
			background-position: 30% 70%;
			grid-column-start: 1;
			grid-column-end: 3;
			grid-row-start: 1;
			grid-row-end: 3;
		}
		& .itemText{
	  		/*margin-top:80svw;
			margin-left:10%;*/
			padding: 0;
			width: 100%;
			min-height:0;
			grid-column-start: 2;
			grid-column-end: 3;
			grid-row-start: 2;
			grid-row-end: 4;
			margin-left: 0;
			height: auto;
		background:none;
			& .box{
				display: block;
				background: #000;
				padding:5svw 5svw 10svw 5svw;
				width: 100%;
				background:#c95f5f;
			}
			& h3{
				width: 100%;
				text-align: right;
			}
			& p{
				font-size:clamp(14px,3svw,18px);
				line-height:clamp(25px,6svw,30px);
			}
		}
	}

}
/*============================================================

voice

============================================================*/
#voice{
	& .interview_box{
		padding:0 5rem 5rem;
	}
	& h3{
		& span{
			color:#c6b19e;
		}
		&strong{
			color:#492223;
		}
	}
	& ul.interview{
		padding:3rem 1rem 3rem;
		& li{
			display:inline;
			list-style-type: none!important;
			& div.monolog{
				display:inline;
			}
			& div.monoParts{
				display:flex;
				padding:0 0 1.5rem;
				& span:first-child{
					min-width:6rem;
					padding-right:2rem;
					&.name1{
						color:#7c0000;
						font-weight:600!important;
					}
					&.name2{
						color:#884d8f;
						font-weight:600!important;
					}
				}
			}
			& span{
				font-size:1.65rem;
				line-height:3rem;
				letter-spacing: 0;
			}
			&.img{
				display: inline-block;
				width:40%;
			}
			&.l{
				float:left;
				padding:2rem 2rem 2rem 0;
			}
			&.r{
				float:right;
				padding:2rem 0 2rem 2rem;
			}
			& img{
				width:100%;
			}
		}
	}
	div.in_title{
		background-image: url(../img/interview/001/voice.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		aspect-ratio: 2000 / 1333;
		display: grid;
		align-items: center;
		& h4{
			& span{
				display: block;
				padding-bottom:0.5rem;
				font-size:1.2rem;
				text-align: center;
			}
			& p{
				display: block;
				margin: 0 auto;
				padding: 0 0 0 0;
				-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
				font-weight: 400;
				letter-spacing: 0rem;
				text-align: left;
				font-size: 3.8rem;
				line-height: 4.5rem;
				/*white-space: nowrap;*/
				color: #000;
				background: #FFF;
				& code{
					display: block;
			  		font-weight: 500;
			  		letter-spacing: 0rem;
			  		text-align: right;
					font-size: 2.5rem;
					line-height: 4rem;
					/*white-space: nowrap;*/
					padding:0 0 1rem 0;
				}
			}
		}
	}
}
@media screen and (max-width:1800px){
	#voice{
		& div.in_title{
			& h4{
				& p{
				font-size: 4rem;
				line-height: 4.5rem;
				}
			}
		}
	}
}
@media screen and (max-width:1700px){
	#voice{
		& div.in_title{
			& h4{
				& p{
				font-size: 4.25rem;
				line-height: 4.75rem;
				}
			}
		}
	}
}
@media screen and (max-width:1600px){
	#voice{
		& div.in_title{
			& h4{
				& p{
				font-size: 4.5rem;
				line-height: 5rem;
				}
			}
		}
	}
}
@media screen and (max-width:1500px){
	#voice{
		& div.in_title{
			& h4{
				& p{
				font-size: 5rem;
				line-height: 5.5rem;
				}
			}
		}
	}
}
@media screen and (max-width:1500px){
	#voice{
		& div.in_title{
			& h4{
				& p{
					font-size: 5.3rem;
					line-height: 5.8rem;
				}
			}
		}
	}
}
@media screen and (max-width:1400px){
	#voice{
		& div.in_title{
			& h4{
				& p{
					font-size: 5rem;
					line-height: 5.5rem;
				}
			}
		}
	}
}
	/*.interviewList{
		border-bottom:1px solid #000;
		position: relative;
		padding:0 0 2rem;
		margin:0 2rem 1rem;
	}
	.interviewList span{
		display: block;
		font-size:1.5rem;
		line-height:3rem;
	}
	.interviewList p{
		display: block;
		font-size:2.5rem;
		line-height:2.5rem;
	}
	.iconInterview{
		position: absolute;
		top:0.75rem;right:0;
		width:5rem;
		fill:#524545;
	}*/


@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	#voice{
		& .interview_box{
			padding:0 0 5svw;
			& div.in_title{
				display: grid;
				align-items: end;
				& h4{
					width: 100%;
					& span{
					}
					& p{
						padding: 1rem;
						-ms-writing-mode: lr-tb;
						writing-mode: horizontal-tb;
						font-size: clamp(20px,5.8svw,55px);
						line-height: clamp(25px,6svw,60px);
						background: rgba(255, 255, 255, 0.7);

						& code{
							display: block;
					  		font-weight: 500;
					  		letter-spacing: 0rem;
					  		text-align: left;
							font-size: clamp(12px,3.5svw,25px);
							line-height: clamp(25px,5.5svw,40px);
							/*white-space: nowrap;*/
							padding:0;
						}
					}
				}
			}
			@media screen and (max-width:700px){/*スマートフォン・タブレット*/
				& div.in_title{
					display: block;
					background-position: center top;
					& h4{
						width: 100%;
						display: block;
						padding: calc(100% / 2000 * 1333 + 3svw) 0 3svw;
						& span{
						}
						& p{
							display: block;
							padding: 0 0 0 5%;
							background: none;
							& code{
							}
						}
					}
				}
			}
		}
		& h3{
			& span{
			}
			&strong{
			}
		}
		& ul.interview{
			padding:2rem 5% 3rem;
			& li{
				display:block;
				list-style-type: none!important;
				& div.monolog{
					display:inline;
				}
				& div.monoParts{
					display:grid;
					grid-template-columns: 1fr;
					padding:0 0 3svw;
					& span:first-child{
						min-width:6rem;
						padding-right:2rem;
						&.name1{
							color:#7c0000;
							font-weight:700!important;
						}
						&.name2{
							color:#884d8f;
							font-weight:700!important;
						}
					}
				}
				& span{
					font-size:clamp(14px,3svw,18px);
					line-height:clamp(25px,6svw,30px);
					letter-spacing: 0;
					font-weight: 500;
				}
				&.img{
					display: block;
					width:100%;
				}
				&.l{
					float:none;
					padding:0;
				}
				&.r{
					float:none;
					padding:0;
				}
				& img{
					width:100%;
					margin-bottom:3svw;
				}
			}
		}

		& .interviewTitle{
			display:grid;
			width: 100%;
            grid-template-columns: 35% 15% 15% 35%;
            grid-template-rows: 23svw 41svw 41svw 23svw;
			padding-bottom:7rem;
			& .customer{
				padding:0 0 0 0;
				grid-row: 1 / 3;
				grid-column: 1 / 3;
			}
			& .creator{
				padding:0 0 0 0;
				grid-row: 3 / 5;
				grid-column: 3 / 5;
				display: grid;
				justify-items:end;
				align-items:end;
			}
			& .customer img,
			& .creator img{
				width:100%;
			}
			& h4{
				grid-row: 2 / 4;
				grid-column: 2 / 4;
				z-index: 10;
				& span{
					display: block;
					padding-bottom:0.5rem;
					font-size:1.2rem;
					text-align: center;
				}
				& p{
					display: block;
					margin:0 auto;
					padding-right:4rem;/*code分の余白取って中央に寄せる*/
					-ms-writing-mode: tb-rl;
					writing-mode: vertical-rl;
					font-weight: 400;
					letter-spacing: 0rem;
					text-align: left;
					font-size:clamp(20px,3.5svw,34px);
					line-height:clamp(24px,4svw,36px);
					/*white-space: nowrap;*/
					& code{
						display: block;
				  		font-weight: 700;
				  		letter-spacing: 0rem;
				  		text-align: right;
						font-size:clamp(12px,3svw,20px);
						line-height:clamp(20px,5svw,30px);
						/*white-space: nowrap;*/
						padding-bottom:2rem;
					}
				}
			}
		}
	}
}



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

faq

============================================================*/
#faq{
	padding:10rem 0;
	& h3 span{
		color:#c6b19e;
	}
	& h3 strong{
		color:#492223;
	}

	& .faq_grid{
		display: grid;
		grid-template-columns: 40% 60%;

		& .photo{
			width: 100%;
			background-image: url(../img/faq.jpg);
			background-position: center center;
			background-size:cover;
			aspect-ratio: 12 / 10;
		}
		& .accordion{
			width: 80%;
			margin:auto;
		}
	}
}
@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	#faq{
		& .faq_grid{
			grid-template-columns: 100%;
			
			& .accordion{
				width: 95%;
				margin:auto;
			}
		}
	}
}

.accordionBlock{
	font-family: "Shippori Mincho B1", serif;
	font-style: normal;
	border-bottom:2px dotted #ccc;

	& .accordionHeader {
		color:#492223;
		padding: 1rem;
		transition: background .3s ease;
		cursor: pointer;
		position: relative;
		font-size: 1.65rem;
		line-height:3rem;

		&::before,::after{
			position:absolute;
			content:'';
			top:1px;
			right:20px;
			bottom:0;
			width:12px;
			height:2px;
			margin:auto;
			background:none;
		}
		&::after{
		  transform:rotate(-90deg);
		  transition:transform 0.3s;
		}
		&.active::after{transform:rotate(0deg);}
		& span{
			padding-left: 2rem;
			position: relative;
			display:block;
			&::before{
				position: absolute;
				content:"Q";
				left: -1rem;
				color: #492223;
				font-size: 1.65rem;
				line-height:3rem;
			}
		}
		&:hover {
			background-color: #fff;
		}
	}

	& .accordionContent {
		display: none;
		color:#492223;
		padding: 1rem;
		font-size: 1.65rem;
		line-height:3rem;
		& span{
				padding-left: 2rem;
				position: relative;
				display:block;
		}
	}
}


@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	.accordionBlock{

		& .accordionHeader {
			font-size:clamp(14px,3svw,18px);
			line-height:clamp(25px,6svw,30px);
			& span{
				padding-left: 3svw;
				&::before{
					left: -1svw;
					font-size:clamp(14px,3svw,18px);
					line-height:clamp(25px,6svw,30px);
				}
			}
		}

		& .accordionContent {
					font-size:clamp(14px,3svw,18px);
					line-height:clamp(25px,6svw,30px);
			& span{
					padding-left: 3svw;
			}
		}
	}
}
/*============================================================

footer

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


footer{
	padding: 31rem 5rem 2rem;
	background-image: url(../img/footer.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 95%;
}
footer #footerBox{
	text-align: left;
	position: relative;
	padding-bottom: 5rem;

	& h2{
		font-size: 6rem;
		line-height: 7.5rem;
		font-weight: 400;
		/*white-space: nowrap;*/
		color:#FFF;
		padding-bottom:2rem;
		text-align: left;
	}
	& p{
		display:inline;
		background: #000;
		padding:0.2rem 0.3rem 0.4rem;
		font-size:1.4rem;
		line-height:4.5rem;
		color:#FFF;
		text-align: left;
		margin-bottom: 0;
	}
}
#copyrightAndMenu{
	position: absolute;
	bottom:1rem;
	right:0;
	width:100%;
	display:grid;
	grid-template-columns: 1fr 1fr;
	padding:8rem 0rem 1rem;
	font-size:1.4rem;
	line-height:1.4em;
	letter-spacing: 0;

	& div:first-child{
		color:#FFF;
		text-align: left;
		padding: 0;
	}
	& div:last-child{
		color:#FFF;
		text-align: right;
	}
}

@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	footer{
		padding: 3rem 2svw 0rem;
		background-position: center top;
	}
	footer #footerBox{
		text-align: center;
		padding-bottom: 0rem;
		& h2{
			font-size: 13svw;
		    line-height: 13svw;
		    display: inline-block;
		}
		& p{
			display: inline-block;
			background: none;
			padding: 0.5svw 3svw 0;
			font-size:clamp(12px,2.5svw,16px);
			line-height:clamp(20px,4svw,24px);
			color: #FFF;
			text-align: left;
			margin-bottom: 70svw;
		}
	}
	#copyrightAndMenu{
		font-size:clamp(10px,2.5svw,14px);
		line-height:clamp(16px,3svw,20px);
	}

}
@media screen and (max-width:700px){/*スマートフォン・タブレット*/
	footer #footerBox{
		& p{
			padding: 0.5svw 2svw 0;
			margin-bottom: 90svw;
		}
	}
	#copyrightAndMenu{
		position: relative;
		width:auto;
		grid-template-columns: 1fr;
		padding:2rem 0rem 1rem;
		letter-spacing: 0;
		& div:first-child{
			text-align: center;
			padding: 1svw;
		}
		& div:last-child{
			text-align: center;
		}
	}
}
@media screen and (max-width:500px){/*スマートフォン・タブレット*/
	footer #footerBox{
		& p{
			padding: 0.5svw 2svw 0;
			margin-bottom: 100svw;
		}
	}
}
@media screen and (max-width:400px){/*スマートフォン・タブレット*/
	footer #footerBox{
		& p{
			padding: 0.5svw 4svw 0;
			margin-bottom: 120svw;
		}
	}

}
@media screen and (max-width:400px){/*スマートフォン・タブレット*/
	footer #footerBox{
		& p{
			padding: 0.5svw 2svw 0;
			margin-bottom: 135svw;
		}
	}
}
	/*

}*/
/*============================================================

utility

============================================================*/
.let_sp_ab1{
	letter-spacing: -20px;
}
.let_sp{
	letter-spacing: -2rem;
}
.spacer{
	display: block;
	height:3rem;
}
/*タイトル*/
.titleBox{
	display: flex;
	padding: 0 5rem 8rem;
	& p{
		padding:4rem 0 0 0;
		font-size:2rem;
		font-weight:500;
	}
}

h3{
	display: inline-block;
	position: relative;
	height: 14rem;
	line-height: 14rem;
	padding-right:3rem;
	& span{
		font-size:14rem;
		line-height: 14rem;
	}
	& code{/*サブタイトル*/
		position: absolute;
	    display: block;
	    /*white-space: nowrap;*/
	    font-size: 1.75rem;
	    line-height: 2.2rem;
	    left: 2rem;
	    top: 8rem;
	    text-align: left;
	    &.r{
			right:0rem;
			text-align: right;
		}
	}
	& strong{/*タイトル*/
		/*white-space: nowrap;*/
		font-size:3rem;
		line-height: 3rem;
		font-weight: 500;
		text-align: left;
		&.r{
			right: 0;
			text-align: right;
		}
	}
}

@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	.titleBox{
		display: block;
		padding: 0 5% 0rem;
		& p{
			padding:0 0 10svw 5%;
			font-size:min(1.2rem,20px);
		}
	}

	h3{
		height: auto;
    	line-height: normal;
		padding-right:0rem;
		margin: 0;
		& span{
			font-size: clamp(66px, 30svw, 145px);
            line-height: clamp(66px, 30svw, 145px);
		}
		& code{/*サブタイトル*/
			font-size:clamp(15px,4vw,21px);
			line-height:clamp(21px,6vw,30px);
		    text-align: left;
		    left: 4svw;
		    top: clamp(48px, 15svw, 78px);
		    &.r{
			}
		}
		& strong{/*タイトル*/
			font-size:clamp(21px,6vw,30px);
			line-height:clamp(21px,6vw,30px);
			&.r{
			}
		}
	}
}

.foj_s{
	font-family: "Shippori Mincho B1", serif;
	font-style: normal;
}
.foe{
	font-family: "Corinthia", cursive;
	font-style: normal;
	font-weight:400;
}

.strong{
	font-size:inherit;
	font-weight: 600;
}
/*スパム対策*/
.domain:before {
        content: "@";
    }
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}
.pc{
	display: inline;
}
.smp{
	display: none;
}
@media screen and (max-width:1020px){/*スマートフォン・タブレット*/
	.pc{
		display: none;
	}
	.smp{
		display: inline;
	}
}

/*モーダルウィンドウ全体のレイアウト（画面いっぱいに表示）*/
.c-modal {
	display: none;
	min-height: 100vh;
	min-height: 100dvh;
	position: fixed;
	top: 0;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000000;
}

/* 黒背景の設定 */
.c-modal_bg {
	background: rgba(0, 0, 0, 0.8);
	min-height: 100vh;
	min-height: 100dvh;
	width: 100%;
}
/* ウィンドウの設定 */
.c-modal_content {
	background: #fff;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	&._sm {
		width: 60%;
	}

	&._md {
		width: 70%;
	}

	&._lg {
		width: 90%;
	}
	& h4{
		font-size:3.5rem;
		padding:0 0 2rem;
		margin:0 0 0;
		display:block;
	}
	& h6{
		font-size:2rem;
		display:block;
		padding:0 0 2rem;
	}
	& p{
		font-size:1.5rem;
		padding:0 0 2rem;
	}
	& .gr{
		display: grid;
		grid-template-columns: 30% 70%;

		& h6{
			font-size:1.5rem;
		}
		& p{
			padding:2rem 0 2rem;
			border-bottom:1px solid #eee;
		}
		& h6{
			padding:2rem 0 2rem;
			border-bottom:1px solid #eee;
		}
	}


	/*--------------------------

	標準リスト
	・（中黒）<ul.list.text_list><li>...
	※（注意書きなど）<ul.list.text_list><li.caution>...
	01.（数字）<ol.list><li>...

	--------------------------*/
	& ul.list {
		font-size:1.5rem;
		line-height: inherit;
		font-weight: inherit;
		list-style-type: none;
		display: block;
		& li {
			font-size:1.5rem;
			line-height: inherit;
			font-weight: inherit;
			display:block;
			text-indent: 0;
			padding-bottom:0.5rem;
			&:first-child{
				padding-top:0.5rem;
			}
		}/*ul.list li*/

	&.text_list{
		& li{
			margin-left: 1.6rem;
			&:before {
				content: "\30fb";
				display: inline-block;
				margin-left: -1.6rem;
				width: 1.6rem;
				height: 1.6rem;
			}
		&.caution{
			&:before {
				content: "\0274a";
			}
		}
		&.arrow{
			&:before {
				content: "\02192";
			}
		}
		}
	}/*ul.list.text_list*/
	}/*ul.list*/

	& ol.list {
		font-size:1.5rem;
		line-height: inherit;
		font-weight: inherit;
		list-style: none;
		display: block;
		counter-reset: listnum;
		& li {
			font-size:1.5rem;
			line-height: inherit;
			font-weight: inherit;
			display:block;
			text-indent: 0;
			padding-bottom:0.5rem;
			margin-left: 2.7rem;
		&:first-child{
			padding-top:0.5rem;
		}&:last-child{
			padding-bottom:2rem;
		}
			&:before {
				counter-increment: listnum;
				content: counter(listnum)".";
				color : #990000;
				display: inline-block;
				margin-left: -2.7rem;
				width: 2.7rem;
				height: 1.6rem;
			}
		}/*ol.list li*/
	}/*ol.list*/

	@media screen and (max-width:1020px){/*スマートフォン・タブレット*/

		&._lg {
			width: 90%;
		}
		& h4{
			font-size:2rem;
			padding:0 0 2rem;
			margin:0 0 0;
			display:block;
		}
		& h6{
			font-size:1.5rem;
			display:block;
			padding:0 0 2rem;
		}
		& p{
			font-size:1.2rem;
			padding:0 0 2rem;
		}
		& .gr{
			display: block;

			& h6{
				font-size:1.5rem;
			}
			& p{
				padding:1rem 0 2rem;
				border-bottom:1px solid #eee;
			}
			& h6{
				padding:2rem 0 0rem;
				border-bottom:none;
			}
		}

		& ul.list {
			font-size:1.2rem;
			& li {
				font-size:1.2rem;
			}/*ul.list li*/
		}
		& ol.list {
			font-size:1.2rem;
			& li {
				font-size:1.2rem;
			}/*ol.list li*/
		}/*ol.list*/
	}
}

.c-modal_content_inner {
	position: relative;
	padding: 3rem;
	height: 90vh;
	overflow-y: scroll;
}

/* 閉じるボタン */
.c-modal_close {
	position: absolute;
	top: 1.5rem;
	right: 2rem;
	font-size:3rem;
	color:#000;
}

.pagetop{
	position:fixed;
	right: 1rem;
	bottom:1rem;
	text-align:center;
	z-index:10000;
	cursor: pointer;
	display: none;
	& a{
		display:block;
		padding:1rem;
	}
}

/*------------------------------------------

animation variations

--------------------------------------------*/
.fadeIn{
  opacity: 0;
}
.fadeIn.active{
	animation: fadeIn 1s cubic-bezier(0, 0, 1, 1) forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}