@charset "utf-8";
/* CSS Document */
*{ box-sizing: border-box;}

mark{
	background-image: linear-gradient(to bottom, transparent 50%, #d9e700 50%);
}

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

特集campaign/common

------------------------------------------------------*/
:root {
	--main-color: #d7a647;
	--main-grad: linear-gradient( 90deg, rgb(90,226,231) 0%, rgb(12,160,236) 100%);
}

.h-main {
	margin-bottom: 2rem;
	font-weight: bold;
	font-size: 3rem;
}

.main-img {
	margin-bottom: 2rem;
}

.main-img + p {
	margin-bottom: 4rem;
}

@media screen and (max-width: 480px) {
	.h-main {
		margin-bottom: 1.5rem;
		font-size: 2.3rem;
	}
}

/*h要素*/
.h-base {
	margin-bottom: 4rem;
	padding-top: 2rem;
	text-align: center;
	border-top: 3px solid var(--main-color);
	position: relative;
}
.h-base:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--main-color);
	position: absolute;
	top: 1px;
	left: 0;
}

.h-base .inner {
	display: block;
	width: fit-content;
	margin: 0 auto;
	padding: 0 10rem;
	position: relative;
	z-index: 1;
}
.h-base .inner:before,
.h-base .inner:after {
	content: "";
	background: url(../../../_images/common/icon-wave.svg);
	width: 8rem;
	height: 4rem;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	filter: brightness(0) saturate(100%) invert(100%) sepia(35%) saturate(7488%) hue-rotate(317deg) brightness(87%) contrast(91%);
	position: absolute;
	top: 50%;
	z-index: -1;
}

.h-base .inner:before { left: 0; }
.h-base .inner:after { right: 0; }

.h-base .inner span {
	display: block;
	color: var(--main-color);
	margin-bottom: .2rem;
	font-size: 2rem;
	font-weight: bold;
	-webkit-text-stroke: 4px #fff;
	text-stroke: 4px #fff;
	paint-order: stroke;
}

.h-base .inner em {
	font-size: 3rem;
	font-weight: bold;
}

@media screen and (max-width: 786px) {
	.h-base {
		padding-top: 3rem;
		width: calc(100% + 40px);
		margin: 0 -20px 4rem;
	}
}

@media screen and (max-width: 480px) {
	.h-base {
		margin-bottom: 2.5rem;
	}

	.h-base .inner {
		padding: 1rem 0 0;
		margin-bottom: 1rem;
	}
	.h-base .inner:before {
		width: 70px;
		height: 35px;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		opacity: .5;
		top: -1.5rem;
		bottom: auto;
		left: 50%;
	}
	
	.h-base .inner:after {
		content: none;
	}
}

.h-beige {
	margin-bottom: 2.5rem;
	padding: .5rem 2rem;
	font-size: 1.8rem;
	font-weight: bold;
	border-left: .5rem solid #d7a647;
}


/*------------------------------------------------------
	drop-link
------------------------------------------------------*/
.drop-link {
	display:flex;
	justify-content: center;
	flex-flow: row wrap;
	gap: 1.5rem;
	margin-bottom: 5rem;
}

.drop-link li {
	width: calc((100% - 4.5rem) / 4);
	position: relative;
}
.drop-link li::after {
	content: "";
	width: 11px;
	height: 11px;
	transform: translateX(-50%) rotate(-45deg);
	transition: all 0.2s ease;
	border-left: .3rem solid transparent;
	border-bottom: .3rem solid transparent;
	border-radius: 2px;
	position: absolute;
	left: 50%;
	bottom: -1rem;
}

/* hover時に少し下へ動く */
.drop-link li:hover::after {
	border-left-color: #f41e1e;
	border-bottom-color: #f41e1e;
	bottom: -2rem;
}

.drop-link li a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: #FFF;
	padding: 2rem 2rem;
	font-size: 1.9rem;
	font-weight: bold;
	text-align: center;
	position: relative;
	z-index: 1;
}

.drop-link li a::before,
.drop-link li a::after {
	content: "";
	background: url(../../../_images/type/other/common/btn-back.svg) no-repeat center/100% 100%;
	opacity: 1;
	transition: all .6s ease-out;
	inset: 0;
	position: absolute;
	z-index: -1;
}
.drop-link li a::after {
	filter: brightness(0) saturate(100%) invert(66%) sepia(37%) saturate(308%) hue-rotate(356deg) brightness(94%) contrast(92%);
}
.drop-link li a::before {
	filter: brightness(0) saturate(100%) invert(15%) sepia(96%) saturate(4574%) hue-rotate(11deg) brightness(101%) contrast(103%);
}

.drop-link li a:hover {
	opacity: 1;
}

.drop-link li a:hover::after {
	opacity: 0;
}

@media screen and (max-width: 550px) {
	.drop-link li a {
		font-size: 1.7rem;
	}
	.drop-link li a::before,
	.drop-link li a::after {
		background-size: contain;
	}
}
@media screen and (max-width: 480px) {
	.drop-link {
		margin-bottom: 3rem;
	}

	.drop-link li {
		width: calc((100% - 1.5rem) / 2);
		position: relative;
	}
	.drop-link li a::before,
	.drop-link li a::after {
		background-size: 100% 100%;
	}
	
	.drop-link li:after {
		content: none;
	}

	.drop-link li a {
		padding: 2rem;
		font-size: 1.7rem;
	}
}

/*------------------------------------------------------
	estimate-link
------------------------------------------------------*/
.estimate-link {
	margin: 0 auto 8rem;
}

.estimate-link p {
	text-align: center;
	font-weight: bold;
	color: #4a4a4a;
	margin-bottom: 1rem;
	font-size: 1.9rem;
	letter-spacing: .05em;
}

.estimate-link p span {
	color: #38d4da;
}

.estimate-link .link-btn {
	width: 80%;
	margin: 0 auto;
}

.estimate-link .link-btn a {
	display: block;
	text-align: center;
	color: #FFF;
	padding: 2rem 8rem 2rem 2.5rem;
	font-weight: bold;
	font-size: 2.5rem;
	position: relative;
	border: 3px solid #ffffff;
	border-radius: 100px;
	background-image: linear-gradient(to right, #00d473, #009159);
	box-shadow: 0px 3px 9.4px 0.6px rgba(0, 0, 0, 0.2);
}

.estimate-link .link-btn a::after {
	content: "";
	width: 11px;
	height: 11px;
	transform: translateX(-50%) rotate(-45deg);
	transition: all 0.2s ease;
	border-left: .3rem solid #fff;
	border-bottom: .3rem solid #fff;
	border-radius: 2px;
	position: absolute;
	right: 3rem;
	bottom: 0;
	top: 0;
	margin: auto;
}
/* hover時に少し下へ動く */
.estimate-link .link-btn a:hover::after {
	bottom: -1rem;
}


@media screen and (max-width: 480px) {
	.estimate-link p {
		line-height: 1.5;
		padding: 0 1rem .5rem;
	}

	.estimate-link .link-btn {
		width: 100%;
	}

	.estimate-link .link-btn a {
		font-size: 2rem;
		padding-right: 6rem;
	}

	.estimate-link .link-btn a::after {
		width: 2rem;
		height: 2rem;
		right: 2.5rem;
	}

}

/*------------------------------------------------------
	case-cont
------------------------------------------------------*/
.case-cont {
	margin-bottom: 4rem;
}
.case-cont p.caption{
	width: 95%;
	background-image: linear-gradient(to right, transparent, #fe5154 20% 80%, transparent);
	color: #fff;
	margin: 20px auto;
	padding: 5px;
	font-size: 2rem;
	line-height: 1.5em;
	text-align: center;
}

/*----case-slider----*/
.case-img {
	position: relative;
}

.case-img .case-slider {
	position: relative;
	overflow: hidden;
}
.case-img .case-slider .swiper-wrapper{
	height: auto;
}

.case-img .case-slider .swiper-slide * {
	user-drag: none;           /* 画像やリンクのドラッグを禁止 */
	-webkit-user-drag: none;   /* Chrome/Safari対応 */
	user-select: none;          /* テキスト選択を禁止 */
	-webkit-user-select: none;  /* Chrome/Safari対応 */
	-ms-user-select: none;      /* IE/Edge対応 */
}

.case-img .controls-btn {
	width: 100%;
	height: 4.8rem;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
}
.case-img .controls-btn div:hover {
	cursor: pointer;
	opacity: .7;
}


/**/
.case-img .controls-btn .case-prev,
.case-img .controls-btn .case-next {
	background: #FFF;
	border: 1px solid #da0202;
	display: block;
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 100%;
	position: absolute;
	transition: all 0.3s ease-out;
	pointer-events: auto;
	display:flex;
	justify-content: center;
	align-items: center;
}

.case-img .controls-btn .case-prev:before,
.case-img .controls-btn .case-next:before {
	content: "";
	background: url("../../../_images/common/icon-arrow-b.svg");
	filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(7246%) hue-rotate(5deg) brightness(84%) contrast(112%);
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
}

.case-img .controls-btn .case-prev {
	left: -30px;
	transform:rotate(180deg);
}
.case-img .controls-btn .case-next {
	right: -30px;
}

.case-img .controls-btn .case-prev:hover,
.case-img .controls-btn .case-next:hover {
	opacity: 1;
	background: #da0202;
	border-color: #FFF;
}
.case-img .controls-btn .case-prev:hover:before,
.case-img .controls-btn .case-next:hover:before {
	filter: none;
}

/**/
.case-img .case-slider li{
	height: auto;
	background-color: #f9f3ea;
}
.case-img .case-slider li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 350 / 240;
	object-fit: cover;
	object-position: center;
}

.case-img .case-slider li a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.case-img .case-slider li table{
	width: calc(100% - 20px);
	margin: 15px 10px;
	border-collapse: separate;
	border-spacing: 10px 5px;
	font-size: 1.4rem;
	line-height: 1.6em;
}
.case-img .case-slider li table th{
	color: #6d8f98;
	font-weight: 700;
	vertical-align: top;
}

@media screen and (max-width: 786px) {
	.case-cont p.caption{
		padding: 5px 5rem;
	}
	/**/
	.case-img .controls-btn .case-prev {
		left: 10px;
	}
	.case-img .controls-btn .case-next {
		right: 10px;
	}
}

@media screen and (max-width: 480px) {
	/**/
	.case-img {
		margin-bottom: 2rem;
	}

	.case-img .case-slider .swiper-slide {
		width: 70%;
	}
	
}


/*------------------------------------------------------
	making-cont
------------------------------------------------------*/
.making-cont {
	margin-bottom: 8rem;
}

.making-cont .main-about{
	margin: 30px auto;
}

/*-----making-box-----*/
.making-cont .making-box:not(:last-child) {
	margin-bottom: 5rem;
}

.making-cont .making-box .h-design {
	background-color: #212121;
	background-image: url(../../../_images/campaign/nawa/title-nawa.webp);
	background-repeat: no-repeat;
	background-position: right bottom;
	color: #FFF;
	margin-bottom: 3rem;
	padding: 1.3rem 4.5rem 1.3rem 2.5rem;
	font-size: 2.3rem;
	font-weight: bold;
	position: relative;
	z-index: 1;
}

/*--material--*/
.making-box#material ul.material-list{
	display: flex;
	flex-direction: column;
	gap: 5rem 3rem;
}
.making-box#material ul.material-list > li{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}
.making-box#material ul.material-list > li > div{
	width: 50%;
}
.making-box#material ul.material-list > li > div .name{
	margin-bottom: 15px;
	font-size: 2.2rem;
	font-weight: 700;
}
.making-box#material ul.material-list > li > div .size{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 15px;
}
.making-box#material ul.material-list > li > div .size > li{
	background-color: #f9f3ea;
	color: #897e6f;
	padding: 3px 10px;
	font-size: 1.6rem;
	font-weight: 700;
	border-radius: 5px;
}

/*--print--*/
.making-box#print .color{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	margin-bottom: 5rem;
}
.making-box#print .color p{
	font-size: 1.8rem;
	font-weight: 700;
}

/**/
.making-box#print .invert {
	margin: 3rem auto;
	padding-top: 2rem;
	position: relative;
}
.making-box#print .invert .title{
	display: block;
	width: fit-content;
	max-width: 95%;
	background-color: #f41e1e;
	color: #fff;
	margin: auto;
	padding: 15px 2rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1em;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.making-box#print .invert .title b{
	font-size: 2.5rem;
	line-height: 1em;
}
.making-box#print .invert .title:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin: auto;
	border: 30px solid transparent;
	border-right: 30px solid #f41e1e;
	border-top: 30px solid #f41e1e;
	transform: rotate(45deg);
	box-shadow: 2px -2px 0 #fff;
	position: absolute;
	right: -25px;
	top: -50%;
	bottom: -50%;
	z-index: -1;
}
.making-box#print .invert .scroll {
	margin-bottom: 10px;
}

/**/
.making-box#print .print-list {
	display: flex;
	gap: 30px;
}
.making-box#print .print-list .title{
	color: #4a4a4a;
	margin-bottom: 10px;
	font-size: 1.9rem;
	font-weight: 700;
	text-align: center;
}
.making-box#print .print-list img{
	margin-bottom: 10px;
}


/*--braiding--*/
.making-box#braiding .braiding-list{
	display: flex;
	gap: 3rem;
	margin-bottom: 1rem;
}
.making-box#braiding .braiding-list .title{
	color: #4a4a4a;
	margin-bottom: 10px;
	font-size: 1.9rem;
	font-weight: 700;
	text-align: center;
}
.making-box#braiding .braiding-list + p{
	margin: 1rem auto 2rem;
}

.making-box#braiding .braiding-other{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	background-color: #f9f3ea;
	margin: 4rem auto 0;
	padding: 3rem;
}
.making-box#braiding .braiding-other p{
	font-size: 1.6rem;
	text-align: center;
}
.making-box#braiding .braiding-other p b{
	font-weight: 700;
}


/*--bamboo--*/
.making-box#bamboo .bamboo-list{
	display: flex;
	gap: 2rem;
	margin-bottom: 1rem;
}
.making-box#bamboo .bamboo-list .title{
	color: #4a4a4a;
	margin-bottom: 10px;
	font-size: 1.9rem;
	font-weight: 700;
	text-align: center;
}


@media screen and (max-width: 786px) {
	.making-cont .h-design {
		width: calc(100% + 40px);
		margin: 0 -20px 2rem;
	}

	.making-cont .main-about{
		overflow-x: auto;
	}
	.making-cont .main-about img{
		min-width: 650px;
	}

	/*-----making-box-----*/
	.making-cont .making-box .h-design {
		background-position-y: 5px;
		background-position-x: calc(100% + 80px);
	}

	/*--material--*/
	.making-box#material ul.material-list > li > img{
		width: 45%;
		max-width: 350px;
		height: auto;
	}
	.making-box#material ul.material-list > li > div{
		width: 55%;
	}

	/*--print--*/
	.making-box#print .color img{
		width: 45%;
		max-width: 300px;
	}
	.making-box#print .color p{
		width: 55%;
	}

	/**/
	.making-box#print .invert {
		padding-top: 2rem;
	}
	.making-box#print .invert .title{
		padding: 13px 1.5rem;
		left: -20px;
	}
	.making-box#print .invert .title b{
		font-size: 2.2rem;
	}
	.making-box#print .invert .title:after{
		border-width: 25px;
		border-right-width: 25px;
		border-top-width: 25px;
		right: -20px;
	}
	.making-box#print .invert .scroll {
		overflow-x: auto;
	}
	.making-box#print .invert .scroll img{
		min-width: 650px;
	}

	/*--braiding--*/
	.making-box#braiding .braiding-other > img{
		width: 50%;
	}
	.making-box#braiding .braiding-other p{
		width: 50%;
	}
}

@media screen and (max-width: 480px) {
	.making-cont .making-box .h-design {
		background-position-x: calc(100% + 100px);
	}

	/*--material--*/
	.making-box#material ul.material-list > li{
		flex-direction: column-reverse;
		gap: 10px;
	}
	.making-box#material ul.material-list > li > img{
		width: 100%;
		height: auto;
	}
	.making-box#material ul.material-list > li > div{
		width: 100%;
	}

	/*--print--*/
	.making-box#print .color {
		flex-direction: column-reverse;
		gap: 10px;
	}
	.making-box#print .color img{
		width: 100%;
	}
	.making-box#print .color p{
		width: 100%;
	}
	/**/
	.making-box#print .print-list {
		flex-direction: column;
	}
	/**/
	.making-box#print .invert {
		padding-top: 2.2rem;
	}
	.making-box#print .invert .title{
		padding: 8px 1.2rem;
		left: -20px;
	}
	.making-box#print .invert .title b{
		display: block;
		margin-top: 3px;
	}
	.making-box#print .invert .scroll {
		overflow-x: auto;
	}
	.making-box#print .invert .scroll img{
		min-width: 650px;
	}

	/*--braiding--*/
	.making-box#braiding .braiding-list{
		flex-direction: column;
	}

	.making-box#braiding .braiding-other{
		flex-direction: column;
	}
	.making-box#braiding .braiding-other > img,
	.making-box#braiding .braiding-other p{
		width: 100%;
	}

	/*--bamboo--*/
	.making-box#bamboo .bamboo-list{
		flex-wrap: wrap;
		gap: 2rem;
		margin-bottom: 1rem;
	}
	.making-box#bamboo .bamboo-list > li{
		width: calc((100% - 2rem) / 2);
	}
}


/*------------------------------------------------------
	deadline-cont
------------------------------------------------------*/
.deadline-cont {
	margin-bottom: 6rem;
}
.deadline-cont .deadline-price{
	display: flex;
	gap: 3rem;
}
.deadline-cont .deadline-price > li{
	width: calc((100% - 3rem) / 2);
	height: 100%;
	background-color: #f9f3ea;
	padding: 2rem;
	border: 3px solid #e6dfd5;
	border-radius: 10px;
	position: relative;
}
.deadline-cont .deadline-price > li .title{
	display: block;
	width: 150px;
	background-color: #f41e1e;
	color: #fff;
	margin: auto;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5em;
	text-align: center;
	border-radius: 30px;
	position: absolute;
	top: -15px;
	left: 0;
	right: 0;
}
.deadline-cont .deadline-price > li dl dt{
	margin: 1.5rem 0;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
}
.deadline-cont .deadline-price > li dl dd{
	color: #6f6352;
	font-size: 1.3rem;
	line-height: 1.8em;
}

@media screen and (max-width: 480px) {
	.deadline-cont .deadline-price{
		flex-direction: column;
	}
	.deadline-cont .deadline-price > li{
		width: 100%;
	}
}


/*------------------------------------------------------
	option-cont
------------------------------------------------------*/
.option-cont {
	margin-bottom: 6rem;
}
.option-cont .option-list{
	display: flex;
	flex-direction: column;
	gap: 3rem;
}
.option-cont .option-list > li{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 30px;
}

.option-cont .option-list > li > div .title{
	margin-bottom: 10px;
	padding-left: 50px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5em;
	position: relative;
}
.option-cont .option-list > li > div .title:before{
	content: "";
	display: block;
	width: 33px;
	height: 33px;
	background-image: url(../../../_images/campaign/nawa/icon-check.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	margin: auto;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
}

@media screen and (max-width: 786px) {
	.option-cont .option-list > li > div{
		width: 55%;
	}
	.option-cont .option-list > li > img{
		width: 45%;
	}
}
@media screen and (max-width: 480px) {
	.option-cont .option-list{
		display: flex;
		flex-direction: column;
		gap: 4rem;
	}
	.option-cont .option-list > li{
		flex-direction: column-reverse;
		gap: 1.5rem;
	}

	.option-cont .option-list > li > div{
		width: 100%;
	}
	.option-cont .option-list > li > img{
		width: 100%;
		max-width: 350px;
	}
	.option-cont .option-list > li > div .title{
		padding-left: 40px;
	}
	.option-cont .option-list > li > div .title:before{
		width: 26px;
		height: 26px;
	}

}


/*------------------------------------------------------
	qa-cont
------------------------------------------------------*/
.qa-cont {
	margin-bottom: 5rem;
}

.qa-cont details {
    border: 5px solid #f8f5f0;
}

.qa-cont details summary {
	pointer-events: none;
}

.qa-cont details:not(:last-child) {
    margin-bottom: 2rem;
}

/*デフォルト矢印の削除*/
summary {
	display: block;
}
/* Chrome、Safari */
summary::-webkit-details-marker {
	display: none;
}

.qa-cont summary {
	background: #f8f5f0;
    padding: 2rem 3rem;
    font-size: 1.5rem;
	font-weight: bold;
    line-height: 1.5;
    letter-spacing: .08em;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
	pointer-events: auto;
}
.qa-cont details summary:after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
    transition: var(--transition);
    position: absolute;
    top: 35%;
    right: 40px;
}

.qa-cont details[open] summary:after {
    transform: rotate(225deg);
    transition: .3s;
    transform-origin: 5px 12px;
}

.qa-cont summary,
.qa-cont details .content .inner {
    position: relative;
}

.qa-cont summary span {
    display: block;
    padding-left: 60px;
    position: relative;
}

.qa-cont summary span:before,
.qa-cont details .content .inner:before {
    content: "";
    width: 4rem;
    height: 4rem;
    left: 0;
    font-size: 1.9rem;
    font-weight: bold;
	line-height: 3.5rem;
	text-align: center;
    border-radius: 50%;
    position: absolute;
}

.qa-cont summary span:before {
    content: "Q";
    background: #e52e2e;
    color: #FFF;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
    transition: var(--transition);
    top: 50%;
}

.qa-cont details .content {
    overflow: hidden;
}

.qa-cont details .content .inner {
    padding: 2.5rem 3rem 2.5rem 9rem;
}

.qa-cont details .content .inner:before {
    content: "A";
	color: #e52e2e;
    border: 2px solid #e52e2e;
    top: 3rem;
    left: 3rem;
}

.qa-cont details .content .inner a {
    text-decoration: underline;
	color: #c20000;
}
.qa-cont details .content .inner a:hover {
	text-decoration: none;
	opacity: 1;
}

@media screen and (min-width: 481px) {
  
	.qa-cont summary {
		cursor: default;
	}

	.qa-cont details summary:after {
		display: none;
	}

	.qa-cont details .content {
		overflow: visible;
	}
}


@media screen and (max-width: 480px) {
    .qa-cont summary {
        padding: 2rem 50px 2rem 3rem;
    }
    
	.qa-cont details summary {
		pointer-events: auto;
	}

    .qa-cont details summary:after {
        width: 10px;
        height: 10px;
        top: 36%;
        right: 25px;
    }
    
    .qa-cont details[open] summary:after {
        transform-origin: 5px 9px;
    }
    
    .qa-cont details:not(:last-child) {
        margin-bottom: 1.5rem;
    }

	.qa-cont summary span {
		padding-left: 50px;
	}
}


/*------------------------------------------------------
	estimate-cont
------------------------------------------------------*/
/**/
input,
select,
textarea {
	font-size: 15px;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
}

input:focus,
select:focus,
textarea:focus {
	background-color: #ededf9;
	border: 1px solid #7576b7;
	z-index: 10;
    outline: 0;
}

.estimate-cont textarea {
	width: 100%;
}

.estimate-cont label {
	border: none;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	transition: all .3s ease;
}
.estimate-cont label.current {
	border-color: #ff0000;
	background: #FFF4F6;
	box-shadow: 0px 3px 3px 0px rgb(225, 206, 208);
}
.estimate-cont label:hover {
	background-color: #ffeded;
}
.estimate-cont label span{
	margin: 1.5rem 1.1rem;
	font-size: 1.4rem;
}

.estimate-cont li label input[type="radio"] + span{
	padding-left: 25px;
}

/*----------*/
.estimate-cont {
	margin: 6rem auto;
	font-size: 1.6rem;
}

/**/
.estimate-cont .h-grade{
	display: block;
	background-image: linear-gradient(to right, #00d473, #009159);
	color: #fff;
	margin: 0 auto 2rem;
	padding: 10px 15px;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5em;
	text-align: center;
}

/**/
.estimate-cont .estimate-form{
	display: block;
	width: 100%;
	margin: 3rem auto;
	padding: 3rem 3.5rem;
	border: 2px solid #d8d8d8;
}
.estimate-cont .estimate-form dl > div p.ps{
	font-size: 13px;
}
.estimate-cont .estimate-form dl > div p.ps small:before {
	content: "※";
}

.estimate-cont .estimate-form > dl {
	display: flex;
	flex-direction: column;
	gap: 50px;
}
.estimate-cont .estimate-form > dl > div > dt{
	margin-bottom: 20px;
	padding-bottom: 5px;
	font-size: 2rem;
	font-weight: 700;
	border-bottom: 1px solid #111;
	position: relative;
}
.estimate-cont .estimate-form dt:after{
	display: inline-block;
	color: #fff;
	margin-left: 10px;
	padding: 0 10px;
	font-size: 1.5rem;
	line-height: 1.5em;
	border-radius: 30px;
}
.estimate-cont .estimate-form dt.required:after{
	content: "必須";
	background-color: #f41e1e;
}
.estimate-cont .estimate-form dt.optional:after{
	content: "任意";
	background-color: #2951ff;
}

.estimate-cont .estimate-form dl dd p{
	font-size: 1.6rem;
}
.estimate-cont .estimate-form dl dd p.caution{
	margin-top: 10px;
	font-size: 1.2rem;
}

/*----*/
.estimate-form dl > div dd ul.flex.list-3:after{
	display: none;
}
.estimate-form dl > div dd ul.flex.list-3{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 30px 42px;
	margin: 0 auto;
}
.estimate-form dl > div dd ul.flex.list-3 > li{
	width: 190px;
}

/*--size--*/
.estimate-form dl > div.size-box > dd{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	gap: 30px;
}
.estimate-form dl > div.size-box > dd p{
	display: block;
	width: fit-content;
	text-align: center;
}
/*--color--*/
.estimate-form dl > div.color-box > dd img{
	margin: 0;
}
.estimate-form dl > div.color-box > dd span{
	padding: 0 0 0 30px;
}
.estimate-form dl > div.color-box > dd label{
	padding-bottom: 0;
}

/*--calendar--*/
.estimate-form dl > div.calendar-box input[type="text"]#calendar{
	width: 17rem;
}

/*--design--*/
.estimate-form dl > div.designdata-box .caution-cont{
	border: 2px solid #e6dfd5;
	border-radius: 10px;
	overflow: hidden;
}
.estimate-form dl > div.designdata-box .caution-cont > dt{
	background-color: #e6dfd5;
	color: #111;
}
.estimate-form dl > div.designdata-box .caution-cont > dt:before{
	filter: brightness(0) saturate(100%) invert(8%) sepia(88%) saturate(7496%) hue-rotate(1deg) brightness(95%) contrast(107%);
}
.estimate-form dl > div.designdata-box .caution-cont > dd{
	background-color: #f9f3ea;
}
.estimate-form dl > div.designdata-box .caution-cont > dd p{
	font-size: 1.3rem;
}

/*--customer--*/
.estimate-cont .customer-box{
	margin: 0;
}
.estimate-cont .customer-box table{
	border-spacing: 1px;
	background-color: #e4e0e8;
}
.estimate-cont .customer-box table th{
	width: 37%;
}
.estimate-cont .customer-box table td{
	background-color: #fff;
}
.estimate-cont .customer-box table th::after{
	font-size: 1.4rem;
	border-radius: 30px;
}
.estimate-cont .customer-box table input,
.estimate-cont .customer-box table select{
	background-color: #f6f6f6;
	border: none;
}

@media screen and (max-width: 786px) {	
	/**/
	.estimate-cont .h-grade{
		width: calc(100% + 40px);
    	margin: 0 -20px 2rem;
	}

	.estimate-cont .estimate-form{
		padding: 3rem 3rem;
	}
	/*----*/
	.estimate-form dl > div dd ul.flex.list-3{
		gap: 30px 45px;
	}
	.estimate-form dl > div dd ul.flex.list-3 > li{
		width: calc((100% - 90px) / 3);
	}

	/*--size--*/
	.estimate-form dl > div.size-box > dd > div{
		width: 50%;
	}
	.estimate-form dl > div.size-box > dd img{
		width: 50%;
	}
}

@media screen and (max-width: 480px) {
	.estimate-cont .estimate-form{
		padding: 2.5rem;
	}
	/*----*/
	.estimate-form dl > div dd ul.flex.list-3{
		gap: 20px 20px;
	}
	.estimate-form dl > div dd ul.flex.list-3 > li{
		width: calc((100% - 20px) / 2);
	}

	/*--size--*/
	.estimate-form dl > div.size-box > dd{
		flex-direction: column-reverse;
	}
	.estimate-form dl > div.size-box > dd > div{
		width: 100%;
	}
	.estimate-form dl > div.size-box > dd p{
		margin: auto;
	}
	.estimate-form dl > div.size-box > dd > div input{
		width: 50%;
	}
	.estimate-form dl > div.size-box > dd img{
		width: 100%;
		max-width: 260px;
	}

	/*--customer--*/
	.estimate-cont .customer-box table th{
		width: 100%;
		margin-left: 0;
	}
	.estimate-cont .customer-box table td{
		width: 100%;
		margin: 0;
		padding: 2rem 1.5rem;
	}
	.estimate-cont .customer-box table th::after{
		font-size: 1.4rem;
		border-radius: 30px;
	}
	.estimate-cont .customer-box table input,
	.estimate-cont .customer-box table select{
		background-color: #f6f6f6;
		border: none;
	}

}


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

送信ボタン

------------------------------------------------------*/
.form-btn input[type="submit"]:hover,
.form-btn input[type="button"]:hover{
	opacity: 0.5;
	cursor: pointer;
}

.form-btn {
	margin: 0 auto 8rem;
	width: 70%;
}

/*btn-send*/
.form-btn .btn-send {
	position: relative;
}
.form-btn .btn-send:before {
	content: "";
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	background: url("../../../_images/common/icon-arrow-b.svg");
	filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(0%) hue-rotate(15deg) brightness(103%) contrast(103%);
}

.form-btn input[type="submit"] ,
.form-btn input[type="button"] {
	display: block;
	width: calc(100% - 4px);
	background-image: none;
	color: #FFF;
	margin: 0 auto;
	padding: 20px;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: .1em;
	text-align: center;
	border: none;
	border-radius: 5px;
	outline: none;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

.form-btn input[type="submit"] {
	background-color: #006f5d;
}
/*btn-return*/
.form-btn input[type="button"] {
	background: #bdbdbd;
}

/*----confirm----*/
.btn2{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.btn2 li{
	width: 48%;
}
.btn2 li input,
.btn2 li input{
	width: 100%;
}


.estimate-cont.confirm-page .form-btn {
	width: 90%;
}

@media screen and (max-width: 480px) {
	.form-btn {
		margin: 0 auto;
		width: 90%;
	}
	
	.btn2 {
		row-gap: 20px;
		flex-direction:column-reverse;
	}
	.btn2 li {
		width: 100%;
	}
}