@charset "utf-8";

body{
	font-family:'Zen Kaku Gothic New',sans-serif;
	font:16px;
	font-size:100%;
	line-height:1;
	letter-spacing:0;
}

.bldFnt{font-weight:bold!important;}
.nmlFnt{font-weight:normal!important;}


/*.mainVisWrap{
	width:100%;
	height:90dvh;
	z-index:1;
}
.mainVisWrap .mainVisImg{
	width:100%;
	height:100%;
	background-color:#faa;
}
.mainVisWrap .mainVisImg img{
	object-fit:cover;
	width:100%;
	height:100%;
}*/



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

@media screen and (max-width:767px){
	.spHide{display:none !important;}


	/* ============================================================== */
	.mainVisBlock{
		width:100%;
		height:75dvh;
		position:relative;
		overflow:hidden;
	}
	/*.mainVisBlock::before{
		content:"";
		display:block;
		padding-top:160.0%;
	}*/
	.mainVisBlock .mainVisImg{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		z-index:1;
	}
	.mainVisBlock .mainVisImg img{
		object-fit:cover;
		width:100%;
		height:100%;
	}
	.mainVisBlock .mainVisTxtImg01{
		width:100%;
		position:absolute;
		top:0;
		left:0;
		z-index:2;
	}
	.mainVisBlock .mainVisTxtImg02{
		width:80%;
		position:absolute;
		top:70%;
		left:50%;
		transform: translate(-50%,0);
		z-index:2;
	}
	.mainVisBlock .mainVisTxtImg03{
		display:flex;
		flex-direction:column;
		align-items:center;
		width:70%;
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		z-index:2;
	}
	.mainVisBlock .mainVisTxtImg03 .leftBox{
		transform: translateX(9.5%);
	}
	.mainVisBlock .mainVisTxtImg03 .rightBox{
		width:80%;
		margin:2% auto 0;
	}

	/* ============================================================== */
	.block.first{
		padding:5% 0 0 0;
	}
	.block.first > .inner{
		border-top:1px solid #dfdfdf;
		border-bottom:1px solid #dfdfdf;
	}

	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap{
		display:flex;
		flex-wrap:wrap;
		width:95%;
		margin:0 auto 0;
	}
	.block.first > .inner .itemWrap .items{
		width:100%;
		padding:7%;
		border-right:1px solid #dfdfdf;
		border-left:1px solid #dfdfdf;
		border-bottom:1px solid #dfdfdf;
		position:relative;
	}
	.block.first > .inner .itemWrap > div:last-child{
		border-bottom:none;
	}

	.block.first > .inner .itemWrap .cs::before{
		display:flex;
		justify-content:center;
		align-items:center;
		content:"COMING SOON";
		font-weight:900;
		font-size:clamp(1.2rem, 9vw, 3rem);
		color:#999;
		width:95%;
		height:95%;
		background-color:rgba(240, 240, 240, 0.9);
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		border-radius:20px;
	}

	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap .items .not{
		font-size:clamp(1.2rem, 6vw, 1.9rem);
	}
	.block.first > .inner .itemWrap .items .imgBox{
		width:100%;
		margin-top:2%;
		position:relative;
		background-color:#eee;
		z-index:1;
	}
	.block.first > .inner .itemWrap .items .imgBox .inner{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
	}
	.block.first > .inner .itemWrap .items .imgBox::before{
		content:"";
		display:block;
		padding-top:56.25%;
	}

	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap .items .infoBox{
		display:flex;
		margin-top:4%;
		padding-bottom:2%;
		border-bottom:1px solid #dfdfdf;
	}
	.block.first > .inner .itemWrap .items .infoBox > p{
		font-size:clamp(0.85rem, 3.5vw, 1.2rem);
		line-height:1.2;
	}
	.block.first > .inner .itemWrap .items .infoBox .ttlTxt{
		width:5em;
	}
	.block.first > .inner .itemWrap .items .infoBox .bdyTxt{
		width:calc(100% - 5em);
	}

	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap .items .notesBox{
		padding:4% 2% 0 2%;
	}
	.block.first > .inner .itemWrap .items .notesBox p{
		font-size:0.85rem;
		line-height:1.2;
		color:#da0000;
	}

	/* ------------------------------------------------- */
	/*.block.first > .inner .itemWrap .items a{
		display:flex;
		justify-content:center;
		width:70%;
		margin:3% auto 0;
		padding:3% 0;
		font-size:clamp(1.1rem, 4vw, 1.6rem);
		font-weight:500;
		color:#00b400;
		border:3px solid #00b400;
		border-radius:10px;
		position:relative;
		overflow: hidden;
		transition: .4s;
	}
	.block.first > .inner .itemWrap .items a:after{
		content:"\f105";
		font-family:"FontAwesome";
		position:absolute;
		top:50%;
		right:0.2em;
		transform: translate(0,-50%);
	}*/

		.block.first > .inner .itemWrap .items .btnBox{
		display:flex;
		justify-content: space-between;
	}
	.block.first > .inner .itemWrap .items .btnBox a{
		display:flex;
		justify-content:center;
		width:48%;
		margin:6% 0 0 0;
		padding:3% 0;
		font-size:clamp(1.0rem, 4vw, 1.6rem);
		font-weight:500;
		letter-spacing: -1px;
		border-radius:10px;
		position:relative;
		overflow: hidden;
		transition: .4s;
	}
	.block.first > .inner .itemWrap .items .btnBox a.applyBtn{
		color:#00b400;
		border:2px solid #00b400;
	}
	.block.first > .inner .itemWrap .items .btnBox a.applyBtn::before{
	  background-color: #00b400;
	}
	.block.first > .inner .itemWrap .items .btnBox a.dtlBtn{
		color:#6241c0;
		border:2px solid #6241c0;
	}
	.block.first > .inner .itemWrap .items .btnBox a.dtlBtn::before{
	  background-color: #6241c0;
	}


	.block.first > .inner .itemWrap .items .btnBox a:after{
		content:"\f105";
		font-family:"FontAwesome";
		position:absolute;
		top:50%;
		right:0.3em;
		transform: translate(0,-50%);
	}

	/* ============================================================== */
	.footerBlock{
		text-align:center;
		padding:6% 0;
	}
	.footerBlock p{
		font-size:0.7rem;
	}

}

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

@media screen and (min-width:768px){
	.pcHide{display:none !important;}

	a.alpHov{
		opacity:1;
		transition: all 0.4s ease;
	}
	a.alpHov:hover{
		opacity:0.5;
	}

	/* ============================================================== */
	.mainVisBlock{
		width:100%;
		position:relative;
		overflow:hidden;
		background:#fcc;
	}
	.mainVisBlock::before{
		content:"";
		display:block;
		/*padding-top:65.0%;*/
		padding-top:47.5%;
	}
	.mainVisBlock .mainVisImg{
		width:120%;
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		z-index:1;
	}
	.mainVisBlock .mainVisTxtImg01{
		width:100%;
		position:absolute;
		top:0;
		left:0;
		z-index:2;
	}
	.mainVisBlock .mainVisTxtImg02{
		width:35%;
		position:absolute;
		top:55%;
		left:50%;
		transform: translate(-50%,0);
		z-index:2;
	}
	.mainVisBlock .mainVisTxtImg03{
		display:flex;
		align-items:end;
		width:70%;
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		z-index:2;
	}
	.mainVisBlock .mainVisTxtImg03 .leftBox{
		width:39%;
		margin-right:3%;
	}
	.mainVisBlock .mainVisTxtImg03 .rightBox{
		width:58%;
		padding-bottom:2.2%;
	}


	/* ============================================================== */
	.block.first{
		padding:50px 0 0 0;
	}
	.block.first > .inner{
		border-top:1px solid #dfdfdf;
		border-bottom:1px solid #dfdfdf;
	}

	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap{
		display:flex;
		flex-wrap:wrap;
		width:93%;
		margin:0 auto 0;
	}
	.block.first > .inner .itemWrap .items{
		width:calc(100% / 3);
		padding:4%;
		border-right:1px solid #dfdfdf;
		position:relative;
	}
	.block.first > .inner .itemWrap .cs::before{
		display:flex;
		justify-content:center;
		align-items:center;
		content:"COMING SOON";
		font-weight:900;
		font-size:clamp(1.0rem, 3vw, 3rem);
		color:#999;
		width:90%;
		height:90%;
		background-color:rgba(240, 240, 240, 0.9);
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		border-radius:30px;
	}
	.block.first > .inner .itemWrap > div:nth-child(1),
	.block.first > .inner .itemWrap > div:nth-child(4){
		border-left:1px solid #dfdfdf;
	}
	.block.first > .inner .itemWrap > div:nth-child(-n+3){
		border-bottom:1px solid #dfdfdf;
	}

	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap .items .not{
		font-size:clamp(1.0rem, 2vw, 1.7rem);
	}
	.block.first > .inner .itemWrap .items .imgBox{
		width:100%;
		margin-top:15px;
		position:relative;
		background-color:#eee;
		z-index:1;
	}
	.block.first > .inner .itemWrap .items .imgBox::before{
		content:"";
		display:block;
		padding-top:56.25%;
	}
		.block.first > .inner .itemWrap .items .imgBox .inner{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
	}

	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap .items .infoBox{
		display:flex;
		margin-top:20px;
		padding-bottom:10px;
		border-bottom:1px solid #dfdfdf;
	}
	.block.first > .inner .itemWrap .items .infoBox > p{
		/*font-size:clamp(0.9rem, 1.1vw, 1.2rem);*/
		font-size:1.1vw;
		line-height:1.3;
	}
	.block.first > .inner .itemWrap .items .infoBox .ttlTxt{
		width:5em;
	}
	.block.first > .inner .itemWrap .items .infoBox .bdyTxt{
		width:calc(100% - 5em);
	}

	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap .items .notesBox{
		padding:20px 5px 0 5px;
	}
	.block.first > .inner .itemWrap .items .notesBox p{
		font-size:0.9rem;
		line-height:1.3;
		color:#da0000;
	}


	/* ------------------------------------------------- */
	.block.first > .inner .itemWrap .items .btnBox{
		display:flex;
		justify-content: space-between;
	}
	.block.first > .inner .itemWrap .items .btnBox a{
		display:flex;
		justify-content:center;
		width:48%;
		margin:6% 0 0 0;
		padding:3% 0;
		font-size:clamp(0.8rem, 1.5vw, 1.2rem);
		font-weight:500;
		letter-spacing: -1px;
		border-radius:10px;
		position:relative;
		overflow: hidden;
		transition: .4s;
	}
	.block.first > .inner .itemWrap .items .btnBox a.applyBtn{
		color:#00b400;
		border:2px solid #00b400;
	}
	.block.first > .inner .itemWrap .items .btnBox a.applyBtn::before{
	  background-color: #00b400;
	}
	.block.first > .inner .itemWrap .items .btnBox a.dtlBtn{
		color:#6241c0;
		border:2px solid #6241c0;
	}
	.block.first > .inner .itemWrap .items .btnBox a.dtlBtn::before{
	  background-color: #6241c0;
	}

	.block.first > .inner .itemWrap .items .btnBox a::before{
		content: '';
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  left: -100%;
	  top:0;
	  transition: .2s;
	  z-index: -1;
	}
	.block.first > .inner .itemWrap .items .btnBox a:after{
		content:"\f105";
		font-family:"FontAwesome";
		position:absolute;
		top:50%;
		right:0.3em;
		transform: translate(0,-50%);
	}
	.block.first > .inner .itemWrap .items .btnBox a:hover{
		color:#fff;
	}
	.block.first > .inner .itemWrap .items .btnBox a:hover::before {
  	left: 0;
	}


	/* ============================================================== */
	.footerBlock{
		text-align:center;
		padding:50px 0;
	}
	.footerBlock p{
		font-size:0.8rem;
	}
}