@charset "utf-8";

:root{
	--itemBC: #f39800;
	--itemyellow: #fffeee;
	--itemorange: #fef5e5;
	--itemgreen: #f2f9f6;
}
div.txtWrap{
	width: 85%;
}
h2.Gbdr{
	margin-bottom: 0;
	color: var(--itemBC);
}
h2.Gbdr::after {
	content: url(/assets/imgs/item/iso/bgbr.svg);
}
div.txtWrap h3{
	color: var(--itemBC);
}
article{
	padding-bottom: 6rem;
}
strong{
	color: var(--itemBC);
}
sup{
	font-size: 1rem;
}
div h3.Torange{
	color: var(--itemBC);
}
.Tgreen{
	color: rgba(var(--Gclr),1);
}
.cmt{
	line-height: 2;
	margin: 3rem auto;
}
span.anno{
	text-align: initial;
}
.rep1{
	margin-top: 2rem;
	padding: 3rem 2.5rem;
}
.txtWrap .rephead {
	gap: 16px;
	margin: 0;
}
.txtWrap .rephead div:first-of-type{
	flex: 0 0 25%;
}
.txtWrap .rephead div:last-of-type{
	flex: 1 1 auto;
	min-width: 0;
}
.txtWrap .rephead img{
	max-width: 100%;
	height: auto;
}
@media (min-width: 1200px){
	div.txtWrap{
		width: 850px;
	}
	h3{
		text-align: center;
	}
	h3 small{
	width: 410px;
	height: 62px;
	margin: 0 auto 1rem;
	}
	.rephead.fle{
		justify-content: left;
	}
	.txtWrap .rephead div:first-of-type{
		flex: 0 0 15%;
	}
	.txtWrap .rephead div:last-of-type{
		flex: 0 0 70%;
	}
	.rep1{
		padding: 3rem 5rem;
	}
	.box{
		margin: 10rem auto;
		padding: 10rem;
		width: 1200px;
		border-radius: 0;
	}
	.box h4{
		margin-left: 5rem;
		font-size: 4rem;
	}
	.box h4::before{
		top: 1rem;
		left: -5rem;
		width: 4rem;
		height: 4rem;
	}
	.box div:not(:nth-of-type(2)){
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}
	.box div > *{
		flex:1;
		min-width: 0;
	}
	.box div img,.box div .txt{
		flex:0 0 45%;
	}
	.box div img{
		max-width: 100%;
	}
}
#about::before, #support::before, #plan::before{
	content:"";
	display:block;
	height: calc(var(--navsize) + 8px);
	margin-top: calc(-1 * (var(--navsize) + 8px));
}

/*_____________MV*/
#mv {
	padding-top: 6rem;
	background: var(--itemyellow);
	position: relative;
	.mvBg{
		position: relative;
	}
	.poab{
		z-index: 2;
		left: 5rem;
		top: 5rem;
	}
	.catch,.catchsub{
		margin: 0;
		color: var(--itemBC);
		letter-spacing: .02em;
		font-weight: 600;
	}
	.catch{
		font-size: 2.4rem;
	}
	.catchsub{
		margin-top: 18px;
		font-size: 1.8rem;
	}
	.mvimg img{
		width: 100%;
		height: auto;
	}
	nav ul{
		justify-content: space-between;
	}
	nav li{
		margin: 1rem auto 2rem;
		padding-right: 1rem;
		font-size: 1.2rem;
		width: calc(100% / 4);
	}
	nav span{
		font-size: 0.9rem;
		letter-spacing: -0.04rem;
	}
	h3{
		padding-top: 0;
	}
	h3 img{
		width: calc(var(--chars) * 1.5rem);
		height: auto;
	}
	mark{
		color: var(--itemBC);
		background: var(--itemyellow);
		border-bottom: 1px solid var(--itemBC);
	}
	.rep1{
		background: #fff;
	}
	.reppoint{
		padding: 1rem;
		font-size: 1.5rem;
		letter-spacing: -0.03rem;
		background: var(--itemyellow);
	}
	.reppoint li{
		display: flex;
		align-items: start;
		justify-content: left;
		padding: 1rem 0;
	}
	.reppoint img{
		margin: 0;
		width: 18px;
		height: 18px;
	}
	.reppoint p{
		margin: 0;
		padding-left: 1rem;
		font-weight: 600;
		color: var(--itemBC);
		text-indent: -0.5rem;
	}
	@media (min-width: 1200px){
		.poab{
			left: 10vw;
			top: 9vw;
		}
		.catch{
			font-size: 4.4rem;
		}
		.catchsub{
			margin-top: 26px;
			font-size: 2.6rem;
		}
		.mvBg{
			height: 1000px;
		}
		.mvimg{
			position: absolute;
			inset: 0;
			overflow: hidden;
		}
		.mvimg img{
			min-width: 2000px;
			height: 100%;
			object-fit: cover;
			object-position: center;
			object-position: 50% 100%;
		}
		nav ul{
			justify-content: center;
		}
		nav li{
			padding-right: 3rem;
			font-size: 2rem;
		}
		nav span{
			font-size: 1.2rem;
			letter-spacing: 0;
		}
		h3 img{
			margin: 0;
			width: calc(var(--chars) * 2rem);
		}
		.reppoint{
			padding: 2rem 4rem;
		}
		.reppoint p{
			align-items: center;
		}
		.reppoint p{
			font-size: 1.8rem;
		}
		.reppoint img{
			width: 20px;
			height: 20px;
		}
	}
}

/*_____________about*/
#about{
	position: relative;
	margin-bottom: 7rem;
	padding-bottom: 3rem;
	background: var(--itemyellow);
	&::after{
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -70px;
		height: 70px;
		background: var(--itemyellow);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		pointer-events: none;
	}
	.txtBox > h3:first-of-type{
		padding-top: 0;
	}
	ul{
		display: flex;
		gap: 12px;
		overflow-x: auto;
		justify-content: flex-start;
		align-items: flex-start;
		overflow-x: auto;
		margin: auto;
		padding-bottom: 5rem;
		width: 82%;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	ul::-webkit-scrollbar{
		display: none;
	}
	li{
		flex: 0 0 140px;
		padding: 0;
	}
	li img{
		display: block;
		object-fit: contain;
		width: 136px;
		height: 150px;
	}
	li:first-of-type img,li:last-of-type img {
		padding-top: 6px;
		height: 144px;
}
	@media (min-width: 1200px){
		text-align: center;
		.txtBox > h3:first-of-type{
			padding-top: 5rem;
		}
		.txt{
			text-align: center;
		}
		ul{
			gap: 20px;
			justify-content: center;
			margin: auto;
			padding-bottom: 3rem;
			width: 1000px;
		}
		li{
			flex: 0 0 220px;
			padding: 0;
			width: auto;
			min-width: 0;
		}
		li img{
			margin: 0 auto;
			object-fit: contain;
			display: block;
			transform-origin: center;
			width: 200px;
			height: 236px;
		}
		li:first-of-type img, li:last-of-type img {
			padding-top: 20px;
			height: 238px;
		}
	}
}

/*_____________compone_beforeafter*/
#compone{
	padding-top: 1rem;
	h3 strong{
		border-bottom: 1px solid var(--itemBC);
	}
	.taking{
		position: relative;
		justify-content: center;
		align-items: flex-start;
		gap: 3rem;
		margin-top: 1rem;
	}
	.taking div{
		flex: 0 0 48%;
	}
	.taking img{
		margin: 0 auto;
		display: block;
		height: 190px;
		width: auto;
	}
	.taking p{
		margin-top: 1rem;
		font-size: 1.2rem;
		line-height: 1.6;
		text-align: left;
	}
	.taking:after{
		content: "";
		position: absolute;
		left: 50%;
		top: 58%;
		transform: translate(-50%, -50%);
		width: 1.5rem;
		height: 6rem;
		background: var(--itemBC);
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}
	.bfaf{
		padding: 10rem 0 0;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.bfaf h3{
		display: block;
		margin: auto auto 2rem;
		width: 80%;
	}
	.bfaf h4{
		margin-top: -1.5rem;
		margin-bottom: 3rem;
		padding: 0rem 1rem;
		color: #fff;
		font-size: 2rem;
		font-weight: 500;
		text-align: center;
		letter-spacing: 1px;
		border: 2px solid #fff;
		background: var(--itemBC);
		border-radius: 50px;
	}
	.bfaf .case{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 24px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding: 3rem 12vw;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.bfaf .case::-webkit-scrollbar{
		display: none;
	}
	.bfaf .case li{
		flex: 0 0 65vw;
		padding: 0 1.5rem 2rem;
		min-width: 65vw;
		scroll-snap-align: center;
		white-space: normal;
		background: var(--itemorange);
	}
	.bfaf .case p{
		font-size: 2.3rem;
		text-align: center;
		letter-spacing: 1px;
	}
	.bfaf .case p.txt{
		padding-top: 3.5rem;
		padding-bottom: 1rem;
		position: relative;
		color: var(--itemBC);
	}
	.bfaf .case p.txt:before{
		content: "";
		position: absolute;
		bottom: 5rem;
		left: 45%;
		border: 1.5rem solid transparent;
		border-top: 1.5rem solid var(--itemBC);
	}
	.bfaf .case dl{
		margin: 1rem auto 0;
	}
	.bfaf .case dt,.bfaf .case dd{
		padding: .5rem 0 .5rem 1rem;
	}
	.bfaf .case .treat{
		display: flex;
		flex-wrap: wrap;
		margin: 3rem auto 0;
		font-size: 1.3rem;
		border-right: 1px solid #aaa;
		border-bottom: 1px solid #aaa;
	}
	.bfaf .case .treat dt{
		width: 30%;
		border-right: 1px solid #aaa;
	}
	.bfaf .case .treat dd{
		width: 70%;
	}
	.bfaf .acoA{
		position: relative;
	}
	.bfaf .acoA:before,.bfaf .acoA:after{
		content: "";
		position: absolute;
		top: 45%;
		right: 1rem;
		bottom: 0;
		display: flex;
		align-items: center;
		margin: auto;
		width: 1.5rem;
	}
	.bfaf .acoA:before{
		border-top: 1px solid #aaa;
	}
	.bfaf .acoA:after{
		border-top: 1px solid #aaa;
		right: 2.7rem;
		top: -.2rem;
		transform: rotate(90deg);
	}
	.bfaf .acoA.active:after{
		border: none;
	}
	.bfaf .acoB{
		white-space: normal;
		font-weight: 400;
		font-size: 1.25rem;
	}
	.componepoint dl{
		margin: auto;
		padding: 2rem;
		width: 90%;
		background: var(--itemyellow);
	}
	.componepoint dt{
		padding-bottom: 1rem;
		padding-left: .7rem;
		width: 35%;
	}
	.componepoint dd{
		padding-bottom: 1rem;
		padding-left: 1em;
		text-indent: -1em;
	}
	.componepoint dd::before{
		content: "・";
	}
	.componepoint .anno{
		text-align: left;
	}
	@media (min-width: 1200px){
		text-align: center;
		.bfaf{
			overflow: auto;
		}
		.bfaf h3{
			width: 600px;
		}
		.taking{
			gap: 9rem;
		}
		.taking div{
			flex: 0 0 270px;
		}
		.taking div img{
			object-fit: contain;
			display: block;
			width: 100%;
			height: 340px;
		}
		.taking p{
			font-size: initial;
		}
		.bfaf .case{
			gap: 24px;
			justify-content: center;
			margin: 0 auto;
			padding-left: 0;
			padding-right: 0;
			text-align: left;
			max-width: 1200px;
			overflow: visible;
			scroll-snap-type: none;
			-webkit-overflow-scrolling: auto;
		}
		.bfaf .case li{
			flex: 0 0 calc((100% - 72px) / 4);
			min-width: 0;
			scroll-snap-align: none;
			padding: 0 1.5rem 2rem;
		}
		.componepoint dl{
			margin-top: 5rem;
			margin-bottom: 1rem;
			padding: 3rem;
			width: 950px;
			text-align: left;
		}
		.componepoint dt{
			padding-bottom: 3rem;
			padding-left: .7rem;
			width: 200px;
		}
		.componepoint dd{
			font-size: 2.5rem;
		}
		.componepoint .anno{
			width: 900px;
		}
	}
}

/*_____________compone_beforeafter*/
#support{
	h3{
		padding-top: 0;
		margin-top: -5rem;
	}
	h3 small{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1rem;
		padding-bottom: .7rem;
		color: #fff;
		font-weight: 700;
		letter-spacing: .08em;
		z-index: 2;
		background: url(/template/default/assets/imgs/item/iso/support_ballon.svg) no-repeat center top / cover;
		height: 50px;
	}
	h3 span{
		color: rgba(var(--Gclr),1);
	}
	.rep1{
		margin-top: 1rem;
		padding-bottom: 1rem;
		background: var(--itemyellow);
	}
	.txtWrap .rephead {
		padding-bottom: 2rem;
		border-bottom: 1px solid rgba(var(--Gclr),1);
	}
	.cmt:first-of-type{
		margin-top: 2rem;
	}
	.box{
		margin: 5rem 0 0;
		padding: 3rem 4rem 2rem;
		background: var(--itemgreen);
		border-radius: 50px;
		line-height: 1.8;
	}
	.box h4{
		position: relative;
		margin-bottom: 1rem;
		margin-left: 2rem;
		color: rgba(var(--Gclr),1);
		font-size: 2.1rem;
		line-height: 1.6;
	}
	.box h4::before{
		content: "";
		position: absolute;
		top: .5rem; 
		left: -2rem;
		display: block;
		width: 20px;
		height: 20px;
		background: url(/assets/imgs/item/iso/support_ico.svg) no-repeat center / contain;
	}
	li:not(:first-child){
		margin-top: 7rem;
	}
	li h3{
		color: rgba(var(--Gclr),1);
	}
	li .imgdiagram{
		position: absolute;
		right: -1.5rem;
		width: 90px;
		top: -5rem;
	}
	li .txt{
		padding: 1rem 0 1.5rem;
	}
	@media (min-width: 1200px){
		h3{
			text-align: center;
		}
		h3 small{
		width: 410px;
		height: 62px;
		margin: 0 auto 1rem;
		}
		.rephead.fle{
			justify-content: left;
		}
		.txtWrap .rephead div:last-of-type{
			flex: 0 0 400px;
		}
		.box{
			margin: 10rem auto;
			padding: 10rem;
			width: 1200px;
			border-radius: 0;
		}
		.box h4{
			margin-left: 5rem;
			font-size: 3.2rem;
			letter-spacing: 1px;
		}
		.box h4::before{
			top: .5rem;
			left: -5rem;
			width: 4rem;
			height: 4rem;
		}
		.box .step{
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
		}
		.box .step > *{
			flex: 1;
			min-width: 0;
		}
		.box .step img,.box .step .txt{
			flex: 0 0 45%;
		}
		li .txt{
			margin-left: 54px;
		}
		.box .step img{
			max-width: 100%;
		}
		li .imgdiagram{
			position: relative;
			top: -6rem;
		}
		.box .imgBox{
			display:flex;
			flex-direction:row-reverse;
			align-items: flex-start;
			margin-left: 45px;
			margin-top: -60px;
		}
		.box .imgBox img:first-child{
			flex: 0 0 28%;
			max-width: 28%;
		}
		.box .imgBox img:last-child{
			flex: 0 0 68%;
			max-width: 68%;
		}
	}
}

/*_____________plan*/
#plan{
	margin: auto;
	padding-bottom: 0;
	width: 80%;
	h3{
		width: 31%;
		margin-bottom: 5rem;
	}
	.check{
		list-style: none;
		margin: 1.5rem 0 0;
		padding: 0;
		text-align: left;
	}
	.check li{
		position: relative;
		padding-left: 1.3em;
		font-size: 1.45rem;
	}
	.check li:not(:first-child){
		margin-top: .6rem;
	}
	.check li::before{
		content: "";
		position: absolute;
		left: 0;
		top: .45em;
		width: .75em;
		height: .75em;
		border: 1px solid currentColor;
		box-sizing: border-box;
	}
	h4{
		font-weight: 500;
		font-size: 1.8rem;
	}
	.precau{
		margin: 3rem auto;
	}
	.precau	h4{
		margin: auto;
		padding: 2rem 2.5rem;
		font-size: 1.4rem;
		font-weight: 500;
		color: rgba(var(--GclrDR),1);
		border-top: 1px solid rgba(var(--Gclr),1);
		width: 95%;
	}
	.precau li{
		background: rgba(var(--GraYrgb),.05);
	}
	.precau li:first-of-type h4 {
		border-top: none;
	}
	.precau	dl{
		padding: 1rem 2rem;
		font-size: 1.4rem;
		font-weight: 400;
		background: #fff;
	}
	.precau	dt{
		color: rgba(var(--Gclr),1);
		font-weight: 600;
	}
	.precau	dd{
		padding: 0 0 1rem;
	}
	.precau .acoA{
		position: relative;
	}
	.precau .acoA::before,.precau .acoA::after{
		content: "";
		position: absolute;
		right: 1rem;
		width: 1.5rem;
		border-top: 1px solid rgba(var(--GclrDR),1);
	}
	.precau .acoA:before{
		top: 3rem;
		bottom: 0;
		margin: auto;
	}
	.precau .acoA:after{
		transform: rotate(90deg);
		right: 1rem;
		top: 3rem;
	}
	.precau .acoA.active:after{
		border: none;
	}
	.anno{
		margin-bottom: 2rem;
		font-size: 1rem;
		font-weight: normal;
		width: 100%;
		margin-top: .5rem;
	}
	div .anno{
		text-align: left;
	}
	@media (min-width: 1200px){
		width: 1200px;
		margin: auto;
		text-align: center;
		h3{
			width: 220px;
			text-align: center;
			display: block;
			margin: 0 auto 5rem;
		}
		.txt{
			font-size: 3rem;
			letter-spacing: 1px;
			font-weight: 400;
		}
		.check{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.check li{
			padding-right: 2rem;
			font-size: 2rem;
			font-weight: 500;
		}
		.check li:not(:first-child){
			margin-top: 0;
		}
		.check strong{
			font-weight: 500;
		}
		img{
			width: 680px;
		}
		.precau{
			margin-top: 60px;
			width: 680px;
			text-align: left;
		}
		.precau	dt{
			padding: 1.2rem 0 0rem;
		}
		.precau	h4{
			font-size: 1.8rem;
		}
		div .anno{
			margin: 0.5rem auto 0;
			width: 680px;
		}
	}
}

.BtnArea {
	margin: 0 auto 10rem;
	width: 80%;
	@media (min-width: 1200px){
		margin-top: 80px;
		width: 900px;
	}
	.next a{
	position: relative;
	margin-top: 8rem;
	text-align: center;
	line-height: 1.2;
	}
	.next a span.tagline {
	position: absolute;
	top: -3rem;
	}
}