@charset "utf-8";

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

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

@media screen and (max-width:767px){
	.block.first .leadBox{}
	.block.first .leadBox .txtBox{}
	.block.first .leadBox .txtBox p{
		font-size:3.8vw;
		line-height:1.5;
	}
	.block.first .leadBox .imgBox{
		height:65vw;
		overflow:hidden;
	}
	.block.first .leadBox .imgBox .innerBox{
		width:120%;
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .blockTtlBox.vertical h3{
		font-size:5.2vw;
	}
	.block.second > .inner .storyBox .blockTtlBox.vertical h3::before{
		top:25%;
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .contBox{
		width:100%;
		margin-top:5%;
		padding-left:2%;
	}
	.block.second > .inner .storyBox .contBox .innerBox{
		border-left:1px solid #333;
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .contBox .innerBox .items{
		display:flex;
		margin-top:6%;
		position:relative;
		top:-2.2vw;
	}
	.block.second > .inner .storyBox .contBox .innerBox .items:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .contBox .innerBox .items .periodBox{
		width:17.5vw;
	}
	.block.second > .inner .storyBox .contBox .innerBox .items .periodBox p{
		font-size:4vw;
		font-weight:500;
		padding-left:2.7vw;
		position:relative;
		line-height:1.4;
	}
	.block.second > .inner .storyBox .contBox .innerBox .items .periodBox p::before{
		content:"";
		display:block;
		width:3vw;
		height:2.8vw;
		background-color:var(--clr-indigo);
		position:absolute;
		top:50%;
		left:-1.5vw;
		transform:translateY(-40%);
		clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .contBox .innerBox .items .descBox{
		width:calc(100% - 17.5vw);
		padding-top:0.5%;
	}
	.block.second > .inner .storyBox .contBox .innerBox .items .descBox p{
		font-size:3.5vw;
		line-height:1.4;
	}

	/* ============================================ */
	.block.third > .inner .dtlBox{
		margin-top:4%;
	}
	.block.third > .inner .dtlBox .txtBox p{
		font-size:3.5vw;
		margin-top:5%;
		line-height:1.4;
	}
	.block.third > .inner .dtlBox .txtBox p:nth-child(2){
		margin-top:0;
	}
	.block.third > .inner .dtlBox .imgBox{
		margin-top:6%;
	}

	.block.third > .inner .btmMsgBox{
		margin-top:10%;
	}
	.block.third > .inner .btmMsgBox p{
		text-align:center;
		font-size:3.9vw;
		font-weight:600;
		line-height:1.6;
		letter-spacing:-1px;
	}
	.block.third > .inner .btmMsgBox p span{
		font-size:3.0vw;
	}

}

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

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

@media screen and (min-width:768px){
	.block.first .leadBox{
		display:flex;
		align-items:center;
	}
	.block.first .leadBox .txtBox{
		width:60%;
		/*min-height:27.5vw;*/
		padding:0 0 0 0;
	}
	.block.first .leadBox .txtBox p{
		font-size:clamp(1.0rem, 1.4vw, 1.4rem);
		line-height:1.5;
		padding:0 1.5em 0 0;
	}
	.block.first .leadBox .imgBox{
		height:430px;
		overflow:hidden;
	}
	.block.first .leadBox .imgBox .innerBox{
		min-width:500px;
		width:120%;
	}
	/* ============================================ */
	.block.second{
		padding-top:70px;
	}
	.block.second > .inner .storyBox{
		display:flex;
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .blockTtlBox.vertical{
		width:7vw;
		max-width:110px;
	}
	.block.second > .inner .storyBox .blockTtlBox.vertical h3{
		padding:45px 0 0 0.10em;
	}
	.block.second > .inner .storyBox .blockTtlBox.vertical h3::before{
		top:17.5px;
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .contBox{
		width:calc(100% - 7vw);
		padding:20px;
	}
	.block.second > .inner .storyBox .contBox .innerBox{
		border-left:1px solid #333;
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .contBox .innerBox .items{
		display:flex;
		margin-top:50px;
		position:relative;
		top:-14px;
	}
	.block.second > .inner .storyBox .contBox .innerBox .items:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .contBox .innerBox .items .periodBox{
		width:100px;
	}
	.block.second > .inner .storyBox .contBox .innerBox .items .periodBox p{
		font-size:clamp(1.4rem, 1.8vw, 1.6rem);
		font-weight:500;
		padding-left:11px;
		position:relative;
		line-height:1.5;
	}
	.block.second > .inner .storyBox .contBox .innerBox .items .periodBox p::before{
		content:"";
		display:block;
		width:14px;
		height:13px;
		background-color:var(--clr-indigo);
		position:absolute;
		top:50%;
		left:-8%;
		transform:translateY(-40%);
		clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	}
	/* ------------------------------------ */
	.block.second > .inner .storyBox .contBox .innerBox .items .descBox{
		width:calc(100% - 100px);
		padding-top:6px;
	}
	.block.second > .inner .storyBox .contBox .innerBox .items .descBox p{
		font-size:clamp(1.0rem, 1.2vw, 1.2rem);
		line-height:1.5;
	}
	/* ------------------------------------ */
	.block.third > .inner .dtlBox{
		margin-top:35px;
	}
	.block.third > .inner .dtlBox .txtBox{}
	.block.third > .inner .dtlBox .txtBox:after{
		content:"";
		display:block;
		clear:both;
	}
	.block.third > .inner .dtlBox .txtBox p{
		font-size:clamp(0.8rem, 1.4vw, 1.3rem);
		line-height:1.6;
		margin-top:30px;
	}
	.block.third > .inner .dtlBox .txtBox p:nth-child(2){
		margin-top:0;
	}
	.block.third > .inner .dtlBox .txtBox img{
		width:40%;
		margin-left:30px;
		margin-bottom:30px;
		float:right;
	}
	/* ------------------------------------ */
	.block.third > .inner .btmMsgBox{
		margin-top:100px;
	}
	.block.third > .inner .btmMsgBox p{
		font-size:clamp(1rem, 1.9vw, 2.0rem);
		text-align:center;
		line-height:2;
		font-weight:600;
	}
	.block.third > .inner .btmMsgBox p span{
		font-size:clamp(0.9rem, 1.6vw, 1.7rem);
	}
}