@charset "utf-8";
/*------------------------------------------------------------
	detail
------------------------------------------------------------*/
.mainVisual {
	margin-bottom: 7.5rem;
	background-image: url("../img/detail/main_bg.jpg");
}
@media all and (max-width: 896px) {
	.mainVisual {
		margin-bottom: 4.8rem;
		background-image: url("../img/detail/main_bg_sp.jpg");
	}
}

/* topBox */
#main .topBox {
	position: relative;
}
#main .topBox .bgImg {
	width: 75rem;
	position: absolute;
	top: -37.2rem;
	left: -51.2rem;
	z-index: -1;
}
#main .topBox .title {
	text-align: center;
	margin-bottom: 0.5rem;
}
#main .topBox .title .note {
	position: relative;
}
#main .topBox .title .smlTxt {
	position: absolute;
	top: -0.7rem;
	left: 50%;
	color: #aeaeae;
	font-size: 1rem;
	transform: translateX(-50%);
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
#main .topBox .title sup {
	font-size: 1.9rem !important;
}
#main .topBox .centerTxt {
	text-align: center;
	margin-bottom: 1.5rem;
}
#main .topBox .comNotes.center {
	margin-bottom: 7.6rem;
	text-align: center;
	font-size: 1rem !important;
	letter-spacing: 0.05em;
}
#main .topBox .imgBox {
	margin-bottom: 7.4rem;
	display: flex;
}
#main .topBox .imgBox .photo {
	width: 60.2rem;
}
#main .topBox .imgBox .textBox {
	flex: 1;
	margin: 5.1rem 2rem 0 0;
}
#main .topBox .imgBox .headLine02 .sml {
	font-size: 2rem;
	margin-bottom: 1.9rem;
}
#main .topBox .imgBox .comNotes {
	margin-top: 1.8rem;
	font-size: 1rem !important;
}
@media all and (max-width: 896px) {
	#main .topBox .centerTxt {
		text-align: left;
		margin: 0 -1.5rem 1.1rem 0;
		line-height: 1.875;
		letter-spacing: 0;
	}
	#main .topBox .title {
		text-align: left;
		margin-bottom: 1.8rem;
	}
	#main .topBox .comNotes.center {
		margin-bottom: 7rem;
		text-align: left;
	}
	#main .topBox .title sup {
		font-size: 1.5rem !important;
	}
	#main .topBox .imgBox {
		margin-bottom: 7.4rem;
		display: block;
	}
	#main .topBox .imgBox .textBox {
		margin: 0 0 2rem;
	}
	#main .topBox .imgBox .photo {
		margin: 0 -1.8rem;
		width: auto;
	}
	#main .topBox .imgBox .photo img {
		width: 100%;
	}
	#main .topBox .imgBox .headLine02 .sml {
		font-size: 1.6rem;
		margin-bottom: 0.6rem;
	}
	#main .topBox .imgBox .comNotes {
		margin-top: 1.4rem;
	}
	#main .topBox .bgImg {
		width: 39rem;
		top: 13.8rem;
		right: -11.2rem;
		left: auto;
	}
}


/* flexBox */
#main .flexBox {
	display: flex;
	align-items: flex-start;
}
#main .flexBox .textBox {
	flex: 1;
}
#main .flexBox .textBox p {
	margin-bottom: 0.9rem;
	line-height: 1.4;
}
#main .flexBox .textBox p:last-child {
	margin-bottom: 0;
}
#main .flexBox .rightBox {
	width: 52.5rem;
}
#main .flexBox .headLine02 .sml {
	margin-bottom: 0.8rem;
	font-size: 1.3rem;
	letter-spacing: 0.1em;
}
#main .flexBox .headLine02 .size {
	font-size: 2rem;
	min-width: 34.1rem;
	display: inline-block;
	vertical-align: top;
	background: linear-gradient(90deg, rgba(220, 229, 241, 1) 0%, rgba(222, 231, 242, 1) 47.78%, rgba(230, 236, 245, 1) 71.17%, rgba(243, 246, 250, 1) 89.21%, rgba(255, 255, 255, 1) 100%);
	padding: 0.5rem 0.8rem 0.5rem;
	margin-bottom: 0.9rem;
}
#main .flexBox .headLine02 .size .text {
	font-size: 1.2rem;
}
#main .flexBox .headLine02 {
	margin-bottom: 1rem;
	line-height: 1.2;
}
#main .flexBox .headLine02 small {
	margin-top: 1.2rem;
	padding-bottom: 1rem;
	display: block;
	font-size: 1.8rem;
}
#main .flexBox .comNotes {
	margin-top: 2rem;
	letter-spacing: 0.05em;
}
#main .flexBox .photoBox {
	margin: -0.3rem -4.1rem 0 0;
	width: 29.2rem;
	position: relative;
}
#main .flexBox .photoBox .textImg {
	width: 10.1rem;
	position: absolute;
	top: -0.5rem;
	left: -5.5rem;
}
#main .flexBox .photoBox .textImg img {
	width: 100%;
}
#main .flexBox .photoBox .ttl {
	margin: 0 -2rem 0.9rem;
	color: #6385b3;
	font-size: 1.8rem;
	text-align: center;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
#main .flexBox .photoBox .image {
	position: relative;
}
#main .flexBox .comHow .ttl {
	font-size: 1.4rem;
}
#main .flexBox .comHow p {
	line-height: 1.625;
}
#main .comHow {
	background-color: #e3e8f5;
	margin-top: 2.1rem;
	padding-left: 8.1rem;
}
#main .comHow p {
	letter-spacing: 0.05em;
}
#main .comHow .img {
	width: 8.7rem;
	bottom: 1rem;
	left: -0.7rem;
}
@media all and (max-width: 896px) {
	#main .flexBox {
		display: block;
	}
	#main .flexBox .headLine02 .size {
		font-size: 1.75rem;
		padding: 0 0.5rem 0.4rem;
		margin-bottom: 0.9rem;
		letter-spacing: 0;
		line-height: 1.2;
	}
	#main .flexBox .headLine02 .size sup {
		font-size: 1rem !important;
		margin-top: 0.2rem;
	}
	#main .flexBox .headLine02 .size .letter {
		letter-spacing: -0.05em;
	}
	#main .flexBox .headLine02 {
		margin-bottom: 0;
		font-size: 3rem;
		line-height: 1;
	}
	#main .flexBox .textBox p {
		margin-bottom: 1.3rem;
		letter-spacing: 0.05em;
		font-size: 1.5rem;
		line-height: 1.5;
	}
	#main .flexBox .headLine02 small {
		margin-top: 0.5rem;
		padding-bottom: 0;
		font-size: 1.8rem;
		line-height: 1.2;
		letter-spacing: -0.05em;
	}
	#main .flexBox .photo {
		margin: 0.3rem -1.8rem 1.8rem;
		text-align: center;
		position: relative;
	}
	#main .flexBox .photo .textImg {
		position: absolute;
		top: 1.8rem;
		left: 1.7rem;
		width: 10.2rem;
	}
	#main .flexBox .photo img {
		width: 100%;
	}
	#main .flexBox .photoBox {
		margin: 3.5rem 0 0 0;
		width: auto;
	}
	#main .flexBox .photoBox .ttl {
		margin: 0 -1.5rem 1.3rem;
		color: #646464;
		font-size: 2.2rem;
		letter-spacing: 0;
	}
	#main .flexBox .photoBox .image img {
		width: 100%;
	}
	#main .flexBox .headLine02 .sml {
		margin-bottom: 1.1rem;
	}
	#main .flexBox .comNotes {
		font-size: 1rem !important;
	}
	#main .comHow {
		background-color: #eaf0f7;
		margin-top: 2.6rem;
		padding-left: 9.2rem;
	}
	#main .comHow .img {
		width: 9.6rem;
		bottom: 0.5rem;
		left: -0.7rem;
	}
}


/* box01 */
#main .box01 {
	padding: 3.3rem 0 2rem;
	background-color: #ebf0f7;
}
#main .box01 .photo {
	width: 71.9rem;
	margin: 0 -4.5rem 0 -2rem;
}
#main .box01 .headLine02 .size {
	background : linear-gradient(to left,rgba(220, 229, 241, 0) 0%, rgba(226, 234, 244, 0.08) 7.51%, rgba(242, 246, 250, 0.33) 33.05%, rgba(252, 253, 254, 0.62) 61.78%, rgba(255, 255, 255, 1) 100%);
}
#main .box01 .flexBox .textBox {
	margin-top: 4.4rem;
}
#main .box01 .comHow {
	background-color: #fff;
	margin-top: 2.3rem;
	padding: 1.6rem 3rem 1.5rem 8rem;
}
#main .box01 .comHow .img {
	width: 5.6rem;
	bottom: 0.2rem;
	left: 1.9rem;
}
@media all and (max-width: 896px) {
	#main .box01 .photo {
		width: auto;
		margin: 0 -1.8rem -0.5rem;
	}
	#main .box01 .flexBox .textBox {
		margin-top: 0;
	}
	#main .box01 {
		padding: 7.3rem 0 7.5rem;
	}
	#main .box01 .comHow {
		margin-top: 2.5rem;
		padding: 1.3rem 2rem 1.4rem 10.1rem;
		min-height: 10.6rem;
	}
	#main .box01 .comHow .img {
		width: 4.8rem;
		bottom: 0.2rem;
		left: 2.9rem;
	}
}

/* box02 */
#main .box02 {
	padding: 7.6rem 0 7.9rem;
	background: url("../img/detail/bg02.png") no-repeat center bottom / 67.7rem auto;
}
@media all and (max-width: 896px) {
	#main .box02 .flexBox .textBox {
		font-size: 1.5rem;
	}
	#main .box02 .flexBox .textBox p {
		line-height: 1.5;
	}
	#main .box02 {
		margin-bottom: 0;
		padding: 7.3rem 0 7.7rem;
		background: none;
	}
}

/* box03 */
#main .box03 {
	padding: 7.6rem 0 8.6rem;
	background: #ebf0f7 url("../img/detail/bg03.png") no-repeat center bottom;
	background-size: 67.7rem auto;
	margin-bottom: 9.8rem;
}
#main .box03 .headLine02 .size {
	background : linear-gradient(to left,rgba(220, 229, 241, 0) 0%, rgba(226, 234, 244, 0.08) 7.51%, rgba(242, 246, 250, 0.33) 33.05%, rgba(252, 253, 254, 0.62) 61.78%, rgba(255, 255, 255, 1) 100%);
}
#main .box03 .comHow {
	background-color: #fff;
}
#main .box03 .flexBox .photoBox .ttl {
	color: #646464;
}
#main .box03 .flexBox .photoBox {
	margin-top: 2.2rem;
}
@media all and (max-width: 896px) {
	#main .box03 .flexBox .textBox {
		font-size: 1.5rem;
	}
	#main .box03 .flexBox .textBox p {
		line-height: 1.5;
	}
	#main .box03 .flexBox .photoBox {
		margin-bottom: 1.7rem;
	}
	#main .box03 .comHow {
		margin-top: 2.9rem;
	}
	#main .box03 {
		padding: 7.1rem 0;
		background: #eaf0f7;
	}
	#main .box03 .flexBox .photo .textImg {
		left: auto;
		right: 2.9rem;
		top: 0.7rem;
	}
}


#main .howTo {
	margin-bottom: 9.5rem;
}
#main .howTo .movie img {
	width: 100%;
}
#main .howTo .head {
	margin: -1.5rem 0 1.8rem;
	font-size: 3.6rem;
	font-weight: 500;	
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	letter-spacing: 0.6rem;
}
#main .howTo .step dt {
	margin-bottom: 0.5rem;
	padding: 0.3rem 1.2rem 0.5rem;
	font-size: 2.2rem;
	font-weight: 300;	
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	letter-spacing: 0.35rem;
	background-color: #dce5f1;
}
#main .howTo .step dd {
	min-height: 5.7rem;
	margin-bottom: 1.2rem;
	letter-spacing: 0.15rem;
	line-height: 1.625;
}
#main .howTo .use {
	width: 100%;
	border-collapse: collapse;
}
#main .howTo .use th,
#main .howTo .use td {
	padding: 1.8rem 2rem;
	border: 0.1rem solid #e3e3e3;
}
#main .howTo .use th {
	padding: 1rem;
	width: 8.6rem;
	font-size: 1.4rem;
	font-weight: 300;
	text-align: center;
}
#main .howTo .use .tag {
	margin-bottom: 0.2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
#main .howTo .use .tag span {
	padding: 0.1rem 0.5rem 0.2rem;
	min-width: 4rem;
	color: #FFF;
	font-size: 1.18rem;
	text-align: center;
	background-color: #646464;
	border-radius: 0.4rem;
}
#main .howTo .use .num {
	margin-bottom: -0.2rem;
	font-size: 1.6rem;
}
#main .howTo .use .note {
	color: #adadad;
	font-size: 1.4rem;
}
#main .faqBox .headLine02 {
	margin-bottom: 2.7rem;
	font-size: 2.5rem;
}
#main .faqBox .headLine02 .sml {
	margin-bottom: 1rem;
	font-size: 1.3rem;
}
#main .faqText dt {
	margin-bottom: 1.4rem;
	position: relative;	
	font-size: 1.8rem;
	background-color: #e1e1e1;
	border-radius: 1rem;
}
#main .faqText dt span {
	padding: 1.2rem 6rem;
	position: relative;
	display: block;
	letter-spacing: 0.2rem;
}
#main .faqText dt span::before {
	position: absolute;
	left: 2.3rem;
	top: 50%;
	font-size: 2.3rem;
	content: 'Q';
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	transform: translateY(-55%) scaleX(1.15);
}
#main .faqText dd {
	margin-bottom: 2.4rem;
	letter-spacing: 0.12rem;
	line-height: 1.625;
}
#main .faqText dd .note {
	display: inline-block;
	color: #aeaeae;
	font-size: 1rem;
}
@media all and (min-width: 897px) {	
	#main .howTo {
		display: flex;
		gap: 4.7rem;
	}
	#main .howTo .movie {
		width: 51.2rem;
	}
	#main .howTo .textBox {
		flex: 1;
	}
}
@media all and (max-width: 896px) {
	#main .howTo {
		padding-top: 5rem;
		margin-bottom: 7rem;
		position: relative;
	}
	#main .howTo .head {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 2.75rem;
		letter-spacing: 0.2rem;
	}
	#main .howTo .movie {
		margin-bottom: 3.5rem;
	}
	#main .howTo .step dt {
		margin-bottom: 1rem;
		padding: 0.3rem 1.5rem;
		font-size: 1.8rem;
		letter-spacing: 0.15rem;
	}
	#main .howTo .step dd {
		min-height: inherit;
		margin-bottom: 3.2rem;
		font-size: 1.8rem;
		line-height: 1.61;
	}
	#main .howTo .use th {
		padding: 0 0.5rem;
		width: 3.5rem;
		color: #b2b2b2;
		font-size: 1.669rem;
		line-height: 1;
	}
	#main .howTo .use td {
		padding: 2.1rem 2rem 1.8rem;
	}
	#main .howTo .use .tag {
		margin-bottom: 0.7rem;
	}
	#main .howTo .use .tag span {
		padding: 0.2rem 0.5rem 0.3rem;
		min-width: 5.9rem;
		font-size: 1.6rem;
		border-radius: 0.5rem;
	}
	#main .howTo .use .num {
		margin: 0 0.5rem 0.7rem;
	}
	#main .howTo .use .note {
		margin: 0 0.5rem;
		letter-spacing: 0.2rem;
	}
	#main .faqBox .headLine02 {
		margin-bottom: 3rem;
		font-size: 2.75rem;
	}
	#main .faqBox .headLine02 .sml {
		margin-bottom: 0.2rem;
		font-size: 1.6rem;
	}
	#main .faqText dt {
		margin: 2rem 0 0;
		font-size: 2rem;
		display: flex;
		align-items: center;
		min-height: 7.75rem;
		line-height: 1.25;
		background-color: #f3f3f3;
	}
	#main .faqText dt:before,
	#main .faqText dt:after {
		position: absolute;
		right: 1.6rem;
		top: 50%;
		width: 1.9rem;
		height: 0.2rem;
		background-color: #b3b3b3;
		transition: all .3s ease;
		content: "";
	}
	#main .faqText dt:after {
		transform: rotate(90deg);
	}
	#main .faqText dt.on:after {
		transform: rotate(180deg);
		opacity: 0;
	}
	#main .faqText dt span {
		width: 100%;
		padding: 1.2rem 4.4rem;
		letter-spacing: 0.2rem;
	}
	#main .faqText dt span::before {
		left: 1.5rem;
		font-size: 2.3rem;
		transform: translateY(-55%) scaleX(1);
	}
	#main .faqText dd {
		margin: 0;
		display: none;
		padding: 1rem 0;
		font-size: 1.8rem;
		letter-spacing: 0.12rem;
		text-align: justify;
	}
	#main .faqText dd .note {
		margin-top: 1rem;
		display: block;
	}
}