@charset "utf-8";

.ppBlock{
	visibility:hidden;
	opacity:0;
	transition: all 0.3s ease;
}
.ppBlock.open{
	visibility:visible;
	opacity:1;
}


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

@media screen and (max-width:767px){
	/* ///////////////////////////////////////////////////// */
	.mainVisual{
		width:100%;
		height:50dvh;
		margin:0 auto 0;
		position:relative;
		/*background:#fcc;*/
	}
	.mainVisual::before{
		content:"";
		display:block;
		width:95vw;
		height:15px;
		position:absolute;
		top:50%;
		left:50%;
		/*transform:translate(-50%,-50%) rotate(var(--deg));*/
		transform:translate(-50%,-50%) rotate(-23deg);
		background-color:rgba(0, 0, 0, 1);
	}
	.mainVisual .logoBox{
		width:68%;
		position:absolute;
		top:7%;
		left:7%;
	}
	.mainVisual .cactusBox{
		width:22%;
		position:absolute;
		right:7%;
		bottom:0;
	}


	/* ///////////////////////////////////////////////////// */
	.block .wrapper > .inner h2{
		display:inline-block;
		font-size:7vw;
		font-weight:900;
		position:relative;
	}
	.block .wrapper > .inner h2::before{
		content:"";
		display:block;
		width:calc(100% + 15%);
		height:4px;
		position:absolute;
		bottom:-18%;
		right:0;
	}

	/* ///////////////////////////////////////////////////// */
	.block.first{
		width:100%;
	}
	.block.first .wrapper{
		width:95%;
		margin-left:5%;
		padding:8% 0 8% 5%;
		background-color:#000;
		clip-path: polygon(100% 0, 100% 100%, 6% 100%, 0 96%, 0 0);
	}
	.block.first .wrapper > .inner{
		width:90%;
		margin-right:10%;
		/*background:#fcc;*/
	}
	.block.first .wrapper > .inner h2{
		color:#fff;
	}
	.block.first .wrapper > .inner h2::before{
		background-color:#fff;
	}

	/* ============================================ */
	.block.first .wrapper > .inner .leadBox{
		margin-top:8%;
	}
	.block.first .wrapper > .inner .leadBox .philosophy{
		color:var(--accentColor);
		font-size:6vw;
		font-weight:900;
		line-height:1.5;
	}
	.block.first .wrapper > .inner .leadBox .description{
		font-size:4.4vw;
		line-height:1.4;
		margin-top:4%;
		color:#fff;
	}

	/* ============================================ */
	.block.first .wrapper > .inner .credoBox{
		display:flex;
		margin-top:5%;
		padding:7%;
		border:4px solid var(--accentColor);
	}
	.block.first .wrapper > .inner .credoBox > h3{
		width:2em;
		writing-mode:vertical-lr;
		font-size:6vw;
		font-weight:800;
		color:var(--accentColor);
		letter-spacing:2px;
	}
	.block.first .wrapper > .inner .credoBox > ul{
		width:calc(100% - 2em);
	}
	.block.first .wrapper > .inner .credoBox > ul > li{
		margin-top:5%;
	}
	.block.first .wrapper > .inner .credoBox > ul > li:first-child{
		margin-top:0;
	}
	.block.first .wrapper > .inner .credoBox > ul > li p{
		color:#fff;
		font-size:4.4vw;
	}

	/* ============================================ */
	.block.first .wrapper > .inner .companyProfBox{}
	.block.first .wrapper > .inner .companyProfBox > ul{}
	.block.first .wrapper > .inner .companyProfBox > ul > li{
		display:flex;
		flex-wrap:wrap;
		margin-top:5%;
		padding:0 0.7em;
		border-bottom:1px solid #fff;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li > p{
		font-size:3.4vw;
		color:#ffffff;
		padding:10px 0;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li .ttlTxt{
		width:4em;
		padding-right:1em;
		position:relative;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li .ttlTxt::after{
		content:"";
		display:block;
		width:1px;
		height:10px;
		background-color:#fff;
		position:absolute;
		right:0;
		bottom:0;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li .bdyTxt{
		width:calc(100% - 4em);
		padding-left:1em;
	}

	/* ///////////////////////////////////////////////////// */
	.block.second{
		width:100%;
		padding-top:10%;
		position:relative;
	}
	/*.block.second::after{
		content:"";
		display:block;
		width:9%;
		height:5px;
		position:absolute;
		bottom:-1px;
		left:0;
		background-color:#fff;
	}*/

	/* ============================================ */
	.block.second .outer{
		width:95%;
		padding:2px 2px 2px 0;
		background-color:#000;
		/*clip-path: polygon(100% 0, 100% 96%, 92% 100%, 0 100%, 0 0);*/
		clip-path: polygon(93% 0, 100% 4%, 100% 100%, 0 100%, 0 0);
		/*border-top:2px solid #000;*/
		position:relative;
	}

	/* ============================================ */
	.block.second .outer .wrapper{
		width:100%;
		height:100%;
		padding:8% 5% 8% 0;
		background-color:#fff;
		clip-path: polygon(93% 0, 100% 4%, 100% 100%, 0 100%, 0 0);
	}

	/* ============================================ */
	.block.second .outer .wrapper > .inner{
		width:90%;
		margin-left:10%;
		padding:0 0 0 0;
		/*background:#fcc;*/
	}
	.block.second .outer .wrapper > .inner h2{
		color:#000;
	}
	.block.second .outer .wrapper > .inner h2::before{
		background-color:#000;
	}

	/* ============================================ */
	.block.second .outer .wrapper > .inner .itemsWrap{
		margin-top:8%;
	}
	.block.second .outer .wrapper > .inner .itemsWrap .item{
		width:100%;
		margin-top:6%;
		/*background:#fcc;*/
	}
	.block.second .outer .wrapper > .inner .itemsWrap > div:first-child{
		margin-top:0;
	}

	/* ------------------------------------ */
	.block.second .outer .wrapper > .inner .itemsWrap .item .iconBox{
		display:flex;
		justify-content:center;
	}
	.block.second .outer .wrapper > .inner .itemsWrap .item .iconBox .material-symbols-outlined{
		font-size:16vw;
		color:var(--accentColor);
	}
	.block.second .outer .wrapper > .inner .itemsWrap .item h3{
		text-align:center;
		font-weight:400;
		font-size:5.4vw;
	}
	.block.second .outer .wrapper > .inner .itemsWrap .item .dtlTxt{
		margin-top:5%;
		padding:4% 4% 0 4%;
		font-size:4vw;
		font-weight:400;
		line-height:1.3;
		border-top:1px solid #000;
	}
	.block.second .outer .wrapper > .inner .descTxt{
		margin-top:12%;
		padding:5% 4% 0;
		font-size:4vw;
		line-height:1.5;
		border-top:2px solid #ccc;
	}

	/* ///////////////////////////////////////////////////// */
	.block.third{
		width:100%;
		padding-top:10%;
	}
	.block.third .wrapper{
		width:93%;
		margin:0 auto 0;
		padding:9% 2.5% 8% 2.5%;
		background-color:#f2f2f2;
		/*clip-path: polygon(100% 0, 100% 100%, 6% 100%, 0 96%, 0 0);*/
		clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 6%);
	}

	/* ============================================ */
	.block.third .wrapper > .inner{
		width:95%;
		margin:0 auto 0;
		/*background:#fcc;*/
	}
	.block.third .wrapper > .inner h2{
		color:var(--accentColor);
	}
	.block.third .wrapper > .inner h2::before{
		background-color:var(--accentColor);
	}

	.block.third .wrapper > .inner .tokenErr{
		width:100%;
		margin:12% auto 0;
		font-size:1.1rem;
		color:#f00;
		line-height:1.4;
	}

	/* ///////////////////////////////////////////////////// */
	.ppBlock{
		width:100%;
		height:100dvh;
		position:fixed;
		top:0;
		left:0;
	}
	.ppBlock .wrapper{
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:column;
		width:100%;
		height:100%;
		background-color:rgba(0, 0, 0, 0.7);
	}

	/* ============================================ */
	.ppBlock > .wrapper > .clsdBtn{
		width:90vw;
		display:flex;
		justify-content:end;
		margin-bottom:10px;
	}
	.ppBlock > .wrapper > .clsdBtn p{
		color:#fff;
		font-size:1.3rem;
		font-weight:300;
	}

	/* ============================================ */
	.ppBlock > .wrapper > .inner{
		width:90vw;
		height:70dvh;
		padding:4%;
		background-color:#eee;
		overflow:auto;
	}

	/* ============================================ */
	.ppBlock > .wrapper > .inner h2{
		display:inline-block;
		font-size:6vw;
		font-weight:900;
		position:relative;
		padding:0 2%;
		/*
		font-size:clamp(0.5rem, 3.8vw, 3.0rem);
		font-weight:900;
		position:relative;*/
	}

	/* ============================================ */
	.ppBlock > .wrapper > .inner .innerLead{
		margin-top:3%;
		font-size:3.2vw;
		font-weight:400;
		line-height:1.4;
		padding:0 2% 25px 2%;
		border-bottom:2px solid #333;
	}

	.ppBlock > .wrapper > .inner .metaBox{
		display:flex;
		flex-direction:column;
		align-items:end;
		margin-top:4%;
		padding:0 2%;
	}
	.ppBlock > .wrapper > .inner .metaBox .dateTxt{
		font-size:0.9rem;
	}
	.ppBlock > .wrapper > .inner .metaBox .dateTxt span{
		font-size:0.9rem;
	}
	.ppBlock > .wrapper > .inner .metaBox .sigTxt{
		margin-top:5px;
		line-height:1.2;
		font-size:0.9rem;
	}
	.ppBlock > .wrapper > .inner .metaBox .sigTxt span{
		font-size:0.8rem;
	}

	/* ============================================ */
	.ppBlock > .wrapper > .inner dl{
		padding:0 2%;
	}
	.ppBlock > .wrapper > .inner dl dt{
		margin-top:10%;
	}
	.ppBlock > .wrapper > .inner dl dt > p{
		font-size:4vw;
		font-weight:600;
		padding-left:1.0em;
		text-indent:-1.0em;
		line-height:1.3;
	}

	.ppBlock > .wrapper > .inner dl dd{
		margin-top:2%;
	}
	.ppBlock > .wrapper > .inner dl dd .ddLead{
		font-size:3.2vw;
		line-height:1.4;
	}
	.ppBlock > .wrapper > .inner dl dd .ddInner{}
	.ppBlock > .wrapper > .inner dl dd .ddInner > p{
		font-size:3.2vw;
		margin-top:3%;
	}
	.ppBlock > .wrapper > .inner dl dd .ddInner > ul,
	.ppBlock > .wrapper > .inner dl dd > ul{}
	.ppBlock > .wrapper > .inner dl dd .ddInner > ul li,
	.ppBlock > .wrapper > .inner dl dd > ul li{
		margin-top:8px;
		padding-left:1em;
	}
	.ppBlock > .wrapper > .inner dl dd .ddInner > ul li > p,
	.ppBlock > .wrapper > .inner dl dd > ul li > p{
		font-size:3.2vw;
		line-height:1.4;
		position:relative;
		padding-left:1.3em;
	}
	.ppBlock > .wrapper > .inner dl dd .ddInner > ul li > p::before,
	.ppBlock > .wrapper > .inner dl dd > ul li > p::before{
		content:"─";
		display:inline-block;
		position:absolute;
		left:0;
		top:0em;
	}

	.ppBlock > .wrapper > .inner dl dd > ul li	.notes{
		padding-left:1.3em;
	}
	.ppBlock > .wrapper > .inner dl dd > ul li	.notes > p{
		font-size:2.8vw;
		line-height:1.4;
		padding-left:1em;
		text-indent:-1em;
	}
}

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

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

@media screen and (min-width:768px){
	/* ///////////////////////////////////////////////////// */
	.mainVisual{
		width:80%;
		height:690px;
		margin:0 auto 0;
		position:relative;
		/*background:#fcc;*/
	}
	.mainVisual::before{
		content:"";
		display:block;
		width:107%;
		height:20px;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%) rotate(-22.0deg);
		background-color:rgba(0, 0, 0, 1);
	}
	.mainVisual .logoBox{
		width:50%;
		position:absolute;
		top:7%;
		left:0;
	}
	.mainVisual .cactusBox{
		width:12%;
		position:absolute;
		right:0;
		bottom:0;
	}

	/* ///////////////////////////////////////////////////// */
	.block .wrapper > .inner h2{
		display:inline-block;
		font-size:4.5rem;
		font-size:clamp(0.5rem, 3.8vw, 4.5rem);
		font-weight:900;
		position:relative;
	}
	.block .wrapper > .inner h2::before{
		content:"";
		display:block;
		width:calc(100% + 50px);
		height:5px;
		position:absolute;
		bottom:-10px;
		right:0;
	}

	/* ///////////////////////////////////////////////////// */
	.block.first{
		width:100%;
	}
	.block.first .wrapper{
		width:90%;
		margin-left:10%;
		padding:100px 0 100px 50px;
		background-color:#000;
		clip-path: polygon(100% 0, 100% 100%, 8% 100%, 0 92%, 0 0);
	}
	.block.first .wrapper > .inner{
		width:90%;
		margin-right:10%;
		/*background:#fcc;*/
	}
	.block.first .wrapper > .inner h2{
		color:#fff;
	}
	.block.first .wrapper > .inner h2::before{
		background-color:#fff;
	}

	/* ============================================ */
	.block.first .wrapper > .inner .leadBox{
		margin-top:50px;
	}
	.block.first .wrapper > .inner .leadBox .philosophy{
		color:var(--accentColor);
		font-size:clamp(1rem, 5.2vw, 6.3rem);
		font-weight:900;
		line-height:1.2;
	}
	.block.first .wrapper > .inner .leadBox .description{
		font-size:clamp(1rem, 2.0vw, 2.5rem);
		line-height:1.5;
		margin-top:15px;
		color:#fff;
	}

	/* ============================================ */
	.block.first .wrapper > .inner .credoBox{
		max-width:1250px;
		margin-top:30px;
		padding:40px;
		border:5px solid var(--accentColor);
	}
	.block.first .wrapper > .inner .credoBox > h3{
		font-size:clamp(1rem, 2.2vw, 2.5rem);
		font-weight:800;
		color:var(--accentColor);
	}
	.block.first .wrapper > .inner .credoBox > ul{
		display:flex;
		flex-wrap:wrap;
	}
	.block.first .wrapper > .inner .credoBox > ul > li{
		width:calc(100% / 3);
		margin-top:25px;
	}
	.block.first .wrapper > .inner .credoBox > ul > li p{
		color:#fff;
		font-size:clamp(0.8rem, 1.6vw, 1.8rem);
	}

	/* ============================================ */
	.block.first .wrapper > .inner .companyProfBox{
		max-width:1250px;
	}
	.block.first .wrapper > .inner .companyProfBox > ul{
		display:flex;
		flex-wrap:wrap;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li{
		display:flex;
		flex-wrap:wrap;
		width:48%;
		margin-top:20px;
		padding:0 1.5em;
		border-bottom:1px solid #fff;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li:nth-child(odd){
		margin-right:4%;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li > p{
		font-size:clamp(0.5rem, 1.3vw, 1.5rem);
		color:#ffffff;
		padding:10px 0;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li .ttlTxt{
		width:4em;
		padding-right:1em;
		position:relative;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li .ttlTxt::after{
		content:"";
		display:block;
		width:1px;
		height:10px;
		background-color:#fff;
		position:absolute;
		right:0;
		bottom:0;
	}
	.block.first .wrapper > .inner .companyProfBox > ul > li .bdyTxt{
		width:calc(100% - 4em);
		padding-left:1em;
	}

	/* ///////////////////////////////////////////////////// */
	.block.second{
		width:100%;
		padding-top:100px;
		position:relative;
	}
	.block.second::after{
		content:"";
		display:block;
		width:9%;
		height:5px;
		position:absolute;
		bottom:-1px;
		left:0;
		background-color:#fff;
	}

	/* ============================================ */
	.block.second .outer{
		width:90%;
		padding:2px 2px 2px 0;
		background-color:#000;
		clip-path: polygon(92% 0, 100% 12%, 100% 100%, 0 100%, 0 0);
		/*border-top:2px solid #000;*/
		position:relative;
	}

	/* ============================================ */
	.block.second .outer .wrapper{
		width:100%;
		height:100%;
		padding:100px 50px 100px 0;
		background-color:#fff;
		clip-path: polygon(92% 0, 100% 12%, 100% 100%, 0 100%, 0 0);
	}

	/* ============================================ */
	.block.second .outer .wrapper > .inner{
		width:90%;
		margin-left:10%;
		padding:0 0 0 50px;
		/*background:#fcc;*/
	}
	.block.second .outer .wrapper > .inner h2{
		color:#000;
	}
	.block.second .outer .wrapper > .inner h2::before{
		background-color:#000;
	}

	/* ============================================ */
	.block.second .outer .wrapper > .inner .itemsWrap{
		display:flex;
		margin-top:60px;
	}
	.block.second .outer .wrapper > .inner .itemsWrap .item{
		width:31%;
		margin-right:3.5%;
		/*background:#fcc;*/
	}
	.block.second .outer .wrapper > .inner .itemsWrap > div:last-child{
		margin-right:0;
	}

	/* ------------------------------------ */
	.block.second .outer .wrapper > .inner .itemsWrap .item .iconBox{
		display:flex;
		justify-content:center;
	}
	.block.second .outer .wrapper > .inner .itemsWrap .item .iconBox .material-symbols-outlined{
		font-size:7rem;
		color:var(--accentColor);
	}
	.block.second .outer .wrapper > .inner .itemsWrap .item h3{
		text-align:center;
		font-weight:400;
		font-size:clamp(0.5rem, 2.1vw, 2.1rem);
	}
	.block.second .outer .wrapper > .inner .itemsWrap .item .dtlTxt{
		margin-top:20px;
		padding:20px 20px 0 20px;
		font-size:clamp(0.5rem, 1.4vw, 1.4rem);
		font-weight:400;
		line-height:1.3;
		border-top:1px solid #000;
	}
	.block.second .outer .wrapper > .inner .descTxt{
		margin-top:70px;
		padding:0 20px 0;
		font-size:1.5rem;
		line-height:1.5;
		/*border-top:1px solid #000;*/
	}

	/* ///////////////////////////////////////////////////// */
	.block.third{
		width:100%;
		padding-top:100px;
	}
	.block.third .wrapper{
		width:90%;
		margin-left:7%;
		padding:100px 0 100px 50px;
		background-color:#f2f2f2;
		clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 11%);
	}

	/* ============================================ */
	.block.third .wrapper > .inner{
		width:90%;
		/*background:#fcc;*/
	}
	.block.third .wrapper > .inner h2{
		color:var(--accentColor);
	}
	.block.third .wrapper > .inner h2::before{
		background-color:var(--accentColor);
	}

	.block.third .wrapper > .inner .tokenErr{
		width:95%;
		margin:60px auto 0;
		font-size:1.2rem;
		color:#f00;
	}

	/* ///////////////////////////////////////////////////// */
	.ppBlock{
		width:100%;
		height:100dvh;
		position:fixed;
		top:0;
		left:0;
	}
	.ppBlock .wrapper{
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:column;
		width:100%;
		height:100%;
		background-color:rgba(0, 0, 0, 0.7);
	}

	/* ============================================ */
	.ppBlock > .wrapper > .clsdBtn{
		width:80vw;
		display:flex;
		justify-content:end;
		margin-bottom:10px;
	}
	.ppBlock > .wrapper > .clsdBtn p{
		color:#fff;
		font-size:1.3rem;
		font-weight:300;
	}

	/* ============================================ */
	.ppBlock > .wrapper > .inner{
		width:80vw;
		height:65%;
		padding:50px;
		background-color:#eee;
		overflow:auto;
	}

	/* ============================================ */
	.ppBlock > .wrapper > .inner h2{
		padding:0 25px;
		font-size:clamp(0.5rem, 3.8vw, 3.0rem);
		font-weight:900;
		position:relative;
	}

	/* ============================================ */
	.ppBlock > .wrapper > .inner .innerLead{
		margin-top:20px;
		font-size:clamp(0.5rem, 1.4vw, 1.3rem);
		font-weight:400;
		line-height:1.4;
		padding:0 25px 25px 25px;
		border-bottom:2px solid #333;
	}

	.ppBlock > .wrapper > .inner .metaBox{
		display:flex;
		flex-direction:column;
		align-items:end;
		margin-top:25px;
		padding:0 25px;
	}
	.ppBlock > .wrapper > .inner .metaBox .dateTxt{}
	.ppBlock > .wrapper > .inner .metaBox .dateTxt span{}
	.ppBlock > .wrapper > .inner .metaBox .sigTxt{
		margin-top:5px;
		line-height:1.2;
	}
	.ppBlock > .wrapper > .inner .metaBox .sigTxt span{
		font-size:0.9rem;
	}

	/* ============================================ */
	.ppBlock > .wrapper > .inner dl{
		margin-top:50px;
		padding:0 25px;
	}
	.ppBlock > .wrapper > .inner dl dt{
		margin-top:40px;
	}
	.ppBlock > .wrapper > .inner dl dt:first-child{
		margin-top:0;
	}
	.ppBlock > .wrapper > .inner dl dt > p{
		font-size:clamp(0.5rem, 1.4vw, 1.3rem);
		font-weight:600;
	}

	.ppBlock > .wrapper > .inner dl dd{
		margin-top:10px;
	}
	.ppBlock > .wrapper > .inner dl dd .ddLead{
		font-size:clamp(0.5rem, 1.2vw, 1.2rem);
		line-height:1.4;
	}
	.ppBlock > .wrapper > .inner dl dd .ddInner{}
	.ppBlock > .wrapper > .inner dl dd .ddInner > p{
		font-size:clamp(0.5rem, 1.2vw, 1.2rem);
		margin-top:15px;
	}
	.ppBlock > .wrapper > .inner dl dd .ddInner > ul,
	.ppBlock > .wrapper > .inner dl dd > ul{}
	.ppBlock > .wrapper > .inner dl dd .ddInner > ul li,
	.ppBlock > .wrapper > .inner dl dd > ul li{
		margin-top:8px;
		padding-left:1em;
	}
	.ppBlock > .wrapper > .inner dl dd .ddInner > ul li > p,
	.ppBlock > .wrapper > .inner dl dd > ul li > p{
		font-size:clamp(0.5rem, 1.2vw, 1.2rem);
		line-height:1.4;
		position:relative;
		padding-left:1.3em;
	}
	.ppBlock > .wrapper > .inner dl dd .ddInner > ul li > p::before,
	.ppBlock > .wrapper > .inner dl dd > ul li > p::before{
		content:"─";
		display:inline-block;
		position:absolute;
		left:0;
		top:0em;
	}

	.ppBlock > .wrapper > .inner dl dd > ul li	.notes{
		padding-left:1.3em;
	}
	.ppBlock > .wrapper > .inner dl dd > ul li	.notes > p{
		font-size:clamp(0.5rem, 1.2vw, 1.0rem);
		line-height:1.4;
		padding-left:1em;
		text-indent:-1em;
	}
}