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

/*
=========================================
Original Layout
=========================================
*/

.header__inner{
	position: relative;
}
.header__inner .header__guide{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: clamp(1.0rem, calc(0.789rem + 0.563vw), 1.6rem);
	line-height: 1.4;
	text-align: center;
}
@media (max-width: 767px){
	.header__inner .header__guide{
		line-height: 1.1;
	}
}
.header__logo{
	max-width: clamp(9.5rem, 20vw, 22.0rem);
}

section:not(:last-child){
	padding: 0;
	margin-bottom: 7.5rem;
}

section h3:not(.order__heading){
	position: relative;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(1.8rem, 1.4rem + 0.8vw, 2.2rem);
	padding-bottom: 2.0rem;
	margin-bottom: 3.0rem;;
}
section h3:not(.order__heading)::after{
	content: "";
	position:absolute;
	bottom: 0;
	left: 50%;
	width: 100vw;
	height: 2px;
	transform: translateX(-50%) scaleY(0.5);
	background-color: #4b4b4b;
	pointer-events: none;	
}

/*
=========================================
FAQ-popular
=========================================
*/
.faq-popular__list{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: var(--font-lower-base);
}
.faq-popular__list li{
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.faq-popular__list li::before{
	content: '';
	width: 2.0rem;
	height: 2.0rem;
	background-image: url("../img/faq/icon_search.png");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}
.faq-popular__list li a{
	text-decoration: underline;
	text-underline-offset: 0.3em;
}
.faq-popular__list li a:hover{
	text-decoration: none;
}

/*
=========================================
FAQ-user-guide
=========================================
*/
section.faq-user-guide h3{
	font-family: avenir-lt-pro, sans-serif;
	font-weight: 500;
	font-style: normal;
}
.faq-user-guide__list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4.0rem;
}
@media (max-width: 767px){
	.faq-user-guide__list{
		grid-template-columns: 1fr;
		row-gap: 2.0rem;
		width: 100%;
		padding: 1.8rem 0;
	}
}

.faq-user-guide__item a{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2.8rem;
	background-color: var(--color-bg);
	color: #3c5078;
}
.faq-user-guide__item a:hover{
	background-color: #3c5078;
	color: #fff;
	transition: .3s;
}
.faq-user-guide__item h4{
	font-size: clamp(2.0rem, 1.4rem + 1vw, 2.7rem);
	font-weight: 500;
}
.faq-user-guide__item img{
	max-width: 3.5rem;
}
.faq-user-guide__item a:hover img{
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(115deg) brightness(107%) contrast(101%);
	transition: .3s;
}

@media (max-width: 767px){
	.faq-user-guide__item a{
		justify-content: flex-start;
	}
}

/*
=========================================
FAQ-product
=========================================
*/
.faq-product__list{
	margin-bottom: 3.6rem;
	max-width: 72.0rem;
}
.faq-product__question{
	font-size: var(--font-lower-base);
	position: relative;
	cursor: pointer;
	padding: 1.5em 0;
}
.faq-product__question .toggle-icon{
	position: absolute;
	right: 0;
	top: 40%;
	width: 1.3rem;
	height: 1.3rem;
	border-right: 3px solid #4b4b4b;
	border-bottom: 3px solid #4b4b4b;
	transform: rotate(45deg);
	transition: transform 0.4s ease;
}
.faq-product__question.open .toggle-icon{
	transform: rotate(-135deg);
}
.faq-product__answer{
	height: 0;
	overflow: hidden;
	transition: height 0.4s ease;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #4b4b4b;
	font-size: clamp(1.5rem, 1.2rem + 0.5vw, 1.8rem);
}
.faq-product__content{
	padding: 0 0 2em;
}


.faq-product__answer ul{
	margin-left: 1em;
}
.faq-product__answer li{
	list-style: disc;
}
.faq-product__answer li::marker{
	font-size: 1.0rem;
}


/*Size chart*/
.faq-product__answer ul.faq-product__size{
	margin-bottom: 5.0rem;
	font-weight: 500;
}
.faq-product__answer .faq-product__size-chart{
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
	margin-bottom: 8.8rem;
}
.faq-product__answer .faq-product__size-chart:last-of-type{
	margin-bottom: 4.0rem;
}
@media (max-width: 767px){
	.faq-product__answer .faq-product__size-chart{
		flex-direction: column;
		justify-content: center;
	}
}
.faq-product__answer .faq-product__size-chart .size-chart{
	width: 49.6rem;
	height: auto;
}
.faq-product__answer .faq-product__size-chart .size-guide{
	height: auto;
	margin-top: 8.0rem;
}
@media (max-width: 767px){
	.faq-product__answer .faq-product__size-chart .size-guide{
		width: 100%;
		margin-top: 0;
		margin-inline: auto;
	}
}
.faq-product__answer .faq-product__size-chart .long-sleeve-shirt
{
	width: 19.5rem;
}
.faq-product__answer .faq-product__size-chart .long-pants{
	width: 11.7rem;
	margin-left: 3.0rem;
}
.faq-product__answer .faq-product__size-chart .short-sleeve-shirt
{
	width: 18.7rem;
}
.faq-product__answer .faq-product__size-chart .short-pants{
	width: 14.4rem;
	margin-left: 2.0rem;
}

@media (max-width: 767px){
	.faq-product__answer .faq-product__size-chart .long-pants,.faq-product__answer .faq-product__size-chart .short-pants{
		margin-inline: auto;
	}
}


.faq-product__detail h4{
	margin-bottom: 1.2rem;
}
.faq-product__detail{
	font-size: var(--font-lower-base);
	max-width: 72.0rem;
}
.faq-product__detail dl{
	display: flex;
	flex-direction: column;
	row-gap: 0.3rem;
}
.faq-product__detail .faq-product__definition{
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5rem;
}

/*
=========================================
Product Contact
=========================================
*/
.product-contact__description{
	margin-bottom: 2.7rem;
}
.product-contact__tel{
	display: flex;
	align-items: center;
	gap: 2.0rem;
	margin-bottom: 3.0rem;
}
@media (max-width: 767px){
	.product-contact__tel{
		gap: 1.0rem;
	}
}
.product-contact__tel img{
	max-width: 4.4rem;
	height: auto;
}
.product-contact__tel a{
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-size: 5.0rem;
	line-height: 1;
}
@media (max-width: 767px){
	.product-contact__tel a{
		font-size: clamp(3.2rem, 5vw, 5rem);
	}
}
.product-contact__tel a:hover{
	opacity: 0.6;
	transition: .3s;
}
.product-contact__time{
	font-weight: 600;
	margin-bottom: 2.4rem;
}