@charset "utf-8";


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For SmartPhone
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (max-width:767px){
	/* ============================================ */
	.block.first > .inner .leadTxt{
		font-size:3.5vw;
		line-height:1.5;
	}
	/* ============================================ */
	.block.second{}
	.block.second > .inner .whyBox{
		margin-top:4%;
	}
	.block.second > .inner .whyBox .txtBox{}
	.block.second > .inner .whyBox .txtBox p{
		font-size:3.5vw;
		margin-top:3%;
		line-height:1.5;
	}
	.block.second > .inner .whyBox .txtBox p:first-child{
		margin-top:0;
	}
	.block.second > .inner .whyBox .imgBox{
		width:100%;
		/*height:60vw;*/
		margin-top:5%;
		/*background:#ccc;*/
	}
	/* ============================================ */
	.block.third{
		padding-top:10%;
	}
	.block.third > .inner .factorBox{
		margin-top:4%;
		border-left:1px solid #333;
		border-right:1px solid #333;
	}
	/* ------------------------------------ */
	.block.third > .inner .factorBox .factorList{
		display:flex;
		flex-wrap:wrap;
		width:100%;
	}
	.block.third > .inner .factorBox .factorList li{
		display:flex;
		justify-content:center;
		flex-wrap:wrap;
		width:20%;
		border-right:1px solid #333;
	}
	.block.third > .inner .factorBox .factorList li:last-child{
		border:none;
	}
	.block.third > .inner .factorBox .factorList li p{
		writing-mode:vertical-lr;
		line-height:1.1;
		font-size:4.0vw;
		font-weight:300;
		padding:0.75em 2% 2em 2%;
		position:relative;

		transition:all 0.2s ease-in-out;
		transform:scale(1);
	}
	.block.third > .inner .factorBox .factorList li p::before{
		content:"→";
		display:flex;
		justify-content:center;
		align-items:center;
		width:4.0vw;
		height:4.0vw;
		font-size:3.0vw;
		border:1px solid #333;
		position:absolute;
		bottom:0.5em;
		left:50%;
		transform:translateX(-45%);
	}
	/* ------------------------------------ */
	.block.third > .inner .factorBox .factorList li.act p{
		font-weight:500;
		color:var(--clr-blue);
		transform:scale(1.05);
	}
	.block.third > .inner .factorBox .factorList li.act p::before{
		border:1px solid var(--clr-blue);
		color:var(--clr-blue);
	}
	/* ------------------------------------ */
	.block.third > .inner .factorBox .descBox{
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		padding:12.5% 6% 10% 6%;
	}
	.block.third > .inner .factorBox .descBox p{
		font-size:3.5vw;
		line-height:1.5;
		position:relative;
		top:0;
		transition:all 0.2s ease-in-out;
		display:none;
	}
	.block.third > .inner .factorBox .descBox p.act{
		display:block;
	}

	/* ============================================ */
	.block.fourth{
		padding-top:10%;
	}
	.block.fourth > .inner .stepBox{
		margin-top:4%;
		display:flex;
		flex-direction:column-reverse;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .imgBox{
		width:100%;
		/*border-top:5px solid #f00;
		background:#ccf;*/
	}
	.block.fourth > .inner .stepBox .imgBox .imgBoxInner{
		/*height:50vw;
		background:#ccc;*/
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox{
		width:100%;
		padding-top:25rem;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox .items{
		position:sticky;
		top:32rem;/* 固定位置 */
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy{
		position:relative;
		background-color:rgba(255,255,255,1);
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(1) .itemBdy{
		top:-24rem; /*.dtlBoxのpadding-topの値と同じ値を設定 */
		margin-top:0;
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(2) .itemBdy{
		top:-19.9rem;
		margin-top:-4.5rem;
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(3) .itemBdy{
		top:-15.8rem;
		margin-top:-8.6rem;
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(4) .itemBdy{
		top:-11.7rem;
		margin-top:-8.6rem;
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(5) .itemBdy{
		top:-7.6rem;
		margin-top:-7.6rem;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner{
		border-right:1px solid #333;
		padding-bottom:8%;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner h4{
		padding:4% 0 4% 0.75em;
		font-size:4vw;
		line-height:1.3;
		border-top:1px solid #333;
		border-bottom:1px solid #333;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul{
		padding:4% 0 4% 0.75em;
		height:37vw;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul li{
		margin-top:2%;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul li:first-child{
		margin-top:0;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul li p{
		font-size:3.5vw;
		line-height:1.3;
		position:relative;
		padding-left:1em;
		padding-right:1em;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul li p::before{
		content:"−";
		display:inline-block;
		position:absolute;
		top:0;
		left:0;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .btmTxtBox{
		display:flex;
		flex-direction:column;
		justify-content:center;
		text-align:center;
		margin-top:-12rem;
		background:#fff;
		position:relative;
		z-index:2;
	}
	.block.fourth > .inner .btmTxtBox .downArrow span{
		font-size:10vw;
		font-weight:200;
	}
	.block.fourth > .inner .btmTxtBox .btmTxt{
		font-size:7vw;
		padding:5% 0 0 0;
		color:var(--clr-blue);
	}

	/* ============================================ */
	.block.fifth{
		padding-top:12%;
	}
	.block.fifth > .inner{
		border:1px solid #333;
		padding:4% 6%;
	}
	.block.fifth > .inner > ul{
		width:90%;
		margin:5% auto 0;
	}
	.block.fifth > .inner > ul li{
		margin-top:3%;
	}
	.block.fifth > .inner > ul li:first-child{
		margin-top:0;
	}
	.block.fifth > .inner > ul li > p{
		width:100%;
		position:relative;
		padding:0 1.5em 0 1.0em;
		font-size:3.5vw;
		line-height:1.4;
	}
	.block.fifth > .inner > ul li > p::before{
		content:"−";
		position:absolute;
		top:0;
		left:0;
	}
	.block.fifth > .inner .addTxtBox{
		display:flex;
		justify-content:end;
		margin-top:4%;
	}
	.block.fifth > .inner .addTxtBox > p{
		font-size:3.6vw;
	}

}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For Desktop & Tablet
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (min-width:768px){
	/* ============================================ */
	.block.first > .inner .leadTxt{
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		line-height:1.5;
	}

	/* ============================================ */
	.block.second{
		padding-top:70px;
	}
	.block.second > .inner .whyBox{
		display:flex;
		align-items:center;
		margin-top:35px;
	}
	.block.second > .inner .whyBox .txtBox{
		width:calc(100% - 35vw);
		padding:0 4% 0 0;
	}
	.block.second > .inner .whyBox .txtBox p{
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		margin-top:20px;
		line-height:1.6;
	}
	.block.second > .inner .whyBox .txtBox p:first-child{
		margin-top:0;
	}
	.block.second > .inner .whyBox .imgBox{
		width:35vw;
		min-width:320px;
		/*height:475px;
		background:#ccc;*/
	}

	/* ============================================ */
	.block.third{
		padding-top:120px;
	}
	.block.third > .inner .factorBox{
		display:flex;
		margin-top:35px;
		border-top:1px solid #333;
		border-bottom:1px solid #333;
	}
	/* ------------------------------------ */
	.block.third > .inner .factorBox .factorList{
		display:flex;
		flex-direction:column;
		width:35%;
	}
	.block.third > .inner .factorBox .factorList li{
		border-bottom:1px solid #333;
		padding:0 1em;
	}
	.block.third > .inner .factorBox .factorList li:last-child{
		border:none;
	}
	.block.third > .inner .factorBox .factorList li p{
		padding:20px 0;
		font-size:clamp(1.2rem, 1.9vw, 1.9rem);
		font-weight:300;
		position:relative;
		cursor:pointer;
		color:#333;
		transition:all 0.2s ease-in-out;
		transform:scale(1);
	}
	.block.third > .inner .factorBox .factorList li p::before{
		content:"→";
		display:flex;
		justify-content:center;
		align-items:center;
		width:2.0vw;
		max-width:32px;
		min-width:22px;
		height:2.0vw;
		max-height:32px;
		min-height:22px;
		font-size:clamp(0.8rem, 1.5vw, 1.5rem);
		font-weight:300;
		/*color:var(--clr-blue);
		border:1px solid var(--clr-blue);*/
		color:#333;
		border:1px solid #333;
		position:absolute;
		top:50%;
		transform:translateY(-47%);
		right:0;
		transition:all 0.2s ease-in-out;
	}
	.block.third > .inner .factorBox .factorList li p:hover{
		transform:scale(1.05);
	}
	/* ------------------------------------ */
	.block.third > .inner .factorBox .factorList li.act p{
		font-weight:500;
		color:var(--clr-blue);
		transform:scale(1.05);
	}
	.block.third > .inner .factorBox .factorList li.act p::before{
		border:1px solid var(--clr-blue);
		color:var(--clr-blue);
	}
	
	/* ------------------------------------ */
	.block.third > .inner .factorBox .descBox{
		display:flex;
		justify-content:center;
		align-items:center;
		width:65%;
		padding:0 8%;
	}
	.block.third > .inner .factorBox .descBox p{
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		line-height:1.6;
		position:relative;
		top:0;
		transition:all 0.2s ease-in-out;
		display:none;
	}
	.block.third > .inner .factorBox .descBox p.act{
		display:block;
	}

	/* ============================================ */
	.block.fourth{
		padding-top:120px;
	}
	.block.fourth > .inner .stepBox{
		margin-top:35px;
		display:flex;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox{
		width:55%;
		padding-top:24rem;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox .items{
		position:sticky;
		/*top:21.7rem;*/
		top:34rem;/* 固定位置 */
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy{
		position:relative;
		background-color:rgba(255,255,255,.9);
		margin-top:-4.1rem;
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(1) .itemBdy{
		/*top:-25rem;*/
		top:-24rem;/* .dtlBoxのpadding-topの値と同じ値を設定 */
		margin-top:0;
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(2) .itemBdy{
		/*top:clamp(-20.75rem, -10vw, -19.9rem);*/
		top:-19.9rem;
		/*top:-20.75rem;*/
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(3) .itemBdy{
		top:-15.8rem;
		/*top:-17.5rem;*/
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(4) .itemBdy{
		top:-11.7rem;
		/*top:-14.25rem;*/
	}
	.block.fourth > .inner .stepBox .dtlBox .items:nth-child(5) .itemBdy{
		top:-7.6rem;
		/*top:-11rem;*/
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner{
		border-right:1px solid #333;
		padding-bottom:20px;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner h4{
		padding:15px 0 15px 10px;
		font-size:clamp(1.0rem, 1.7vw, 1.7rem);
		line-height:1.3;
		border-top:1px solid #333;
		border-bottom:1px solid #333;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul{
		padding:15px 0 15px 10px;
		height:11vw;
		min-height:120px;
		max-height:160px;
		/*background:#fcc;*/
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul li{
		margin-top:5px;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul li:first-child{
		margin-top:0;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul li p{
		font-size:clamp(0.9rem, 1.4vw, 1.4rem);
		line-height:1.3;
		position:relative;
		padding-left:clamp(17px, 1.6vw, 25px);
		padding-right:20px;
	}
	.block.fourth > .inner .stepBox .dtlBox .items .itemBdy .itemBdyInner ul li p::before{
		content:"−";
		display:inline-block;
		font-size:clamp(0.9rem, 1.4vw, 1.4rem);
		position:absolute;
		top:0;
		left:0;
	}
	/* ------------------------------------ */
	.block.fourth > .inner .stepBox .imgBox{
		width:45%;
		padding-left:50px;
		padding-bottom:160px;
		/*border-top:5px solid #f00;
		background:#ccf;*/
	}
	.block.fourth > .inner .stepBox .imgBox .imgBoxInner{
		position:sticky;
		top:10rem;
		/*height:30vw;
		background:#ccc;*/
	}
	/* ------------------------------------ */
	.block.fourth > .inner .btmTxtBox{
		display:flex;
		flex-direction:column;
		justify-content:center;
		text-align:center;
		margin-top:-50px;
	}
	.block.fourth > .inner .btmTxtBox .downArrow span{
		font-size:clamp(5rem, 8vw, 8rem);
		font-weight:200;
	}
	.block.fourth > .inner .btmTxtBox .btmTxt{
		font-size:clamp(2rem, 6vw, 6rem);
		padding:5% 0 0 0;
		color:var(--clr-blue);
	}

	/* ============================================ */
	.block.fifth{
		padding-top:120px;
	}
	.block.fifth > .inner{
		border:1px solid #333;
		padding:25px 50px;
	}
	.block.fifth > .inner > ul{
		display:flex;
		flex-wrap:wrap;
		width:96%;
		margin:35px auto 0;
	}
	.block.fifth > .inner > ul li{
		width:calc(100% / 3);
		margin-top:20px;
	}
	.block.fifth > .inner > ul li:nth-child(-n+3){
		margin-top:0;
	}
	.block.fifth > .inner > ul li > p{
		position:relative;
		padding:0 1.5em 0 1.0em;
		font-size:clamp(0.9rem, 1.4vw, 1.3rem);
		line-height:1.3;
	}
	.block.fifth > .inner > ul li > p::before{
		content:"−";
		position:absolute;
		top:0;
		left:0;
	}
	.block.fifth > .inner .addTxtBox{
		display:flex;
		justify-content:end;
		margin-top:35px;
	}

}