@charset "utf-8";
/* CSS Document */
/* ----------------------------------------------- */
/* 
-------------------------------------------------- */
.sec {}
.sec .wrap {
	
}
.sec .wrap .ttl {}
.sec .wrap .jp {}
.sec .wrap .ul--tag {}
.sec .wrap .ul--tag li {}
.sec .wrap .ul--tag li::before {}
.sec .wrap .ul--tag li:first-of-type::before {}
.sec .wrap .btn {
	
}
.sec .wrap .btn span {}
.sec .wrap .btn a {}
.sec .wrap .btn a span {}


.sec {}
.sec .ttl { margin-bottom: .26em; font-weight: normal; font-size:min(3.3vw, 5.5em);}
.sec .jp { font-size:min(2vw, 3em); font-weight: bold; }
.sec .ul--tag { display: flex; margin: 2.7em 0 0; }
.sec .ul--tag li { position: relative; font-size:1.5em;}
.sec .ul--tag li::before { content: '・';}
.sec .ul--tag li:first-of-type::before { content: '';}
.sec .btn { margin-top: 2.7em;}
.sec .btn span { 
	display: inline-block; 
	width:120px; height: 40px; 
	font-size:1.5em; text-align: center; color: #fff; line-height: 40px;
	border: 2px solid #fff;
}
.sec .btn a {}
.sec .btn a span {
	border: none;
	background:rgba(255,255,255,.6);
	color: #101c17;
	transition: .4s all;
}
.sec .btn a:hover span { background:rgba(255,255,255,.88);}

.inner--wide .ttl,
.inner--wide .jp,
.inner--wide .ul--tag li { color: #fff;}


@media (min-width: 769px) {
/* PC用 */
	main .inner {
		position: relative;
		display: flex;
		flex-wrap: wrap;
	}
	.sec { 
		width:50%; height: 100vh;
		/*aspect-ratio: 1 / 1;*/ /* 正方形 */
	}
	.sec02, .sec03, .sec04 { 
		width:100%; 
		/*aspect-ratio: 2 / 1;*/
	}
	
	.sec .wrap { padding:120px 50px 50px;}
}

@supports (-webkit-touch-callout: none) {
	html, body {
		height: 100%;
		overflow: hidden;
	}
}
@media (max-width: 768px) {
/* tablet用 */
	:root {
	  --vh: 1vh;
	}
	
	.sec { 
		width:100%; /*height: 50%;*/
		/*aspect-ratio: 1 / 1;*/ /* 正方形 */
		height: calc(var(--vh, 1vh) * 50);
		height: calc( var(--vh) * 50 );
	}
	.sec02, .sec03, .sec04 { 
		width:100%; /*height: 100vh;*/
		/*aspect-ratio: 1 / 1.8;*/
		height: calc(var(--vh, 1vh) * 100);
		height: calc( var(--vh) * 100 );
	}
	
	
	.sec .wrap { padding:15.5% 5.3% 5.3%;}
	.sec06 .wrap, .sec08 .wrap { padding-top: 5.3%; }
	
	.sec .ttl { margin-bottom: 0.75em; font-size:2.4em;}
	.sec .jp { font-size:1.4em;}
	.sec .ul--tag { margin:2em 0;}
	.sec .ul--tag li { font-size:1.2em;}
	
	.sec .btn { margin-top: 1.8em;}
	.sec .btn span {
		width:90px; height:30px;
		font-size: 1.2em; line-height: 30px;
	}
	.sec .btn > span { line-height: 26px;}
}

/* wrap--txt
-------------------------------------------------- */
.wrap--txt {
	position: relative;
	display: flex; align-items: center;
	padding: 0 5.5% ;	
}
.wrap--txt h1, .wrap--txt h2, .wrap--txt p { text-align: left !important;}

@media (min-width: 769px) {
/* PC用 */
	.wrap--txt { 
		padding: 5.5%;
		box-sizing: border-box;
	}
	.wrap--txt .wrap--txt--inner {
		/* margin-top:50%;
		transform: translateY(-50%); */
	}
	.wrap--txt h1 {
		width:37.626262%;
		margin-bottom: 2em;
	}
	.wrap--txt h2 {
		font-size:min(3vw, 6em); 
		font-weight: normal; 
		line-height: 1.1; 
		letter-spacing: .075em;
	}
	.wrap--txt p {
		margin-top: 1.5em;
		font-size:min(.88vw, 1.8em); 
		font-weight: normal; 
		line-height: 1.6; 
		letter-spacing: .075em;
	}
}
@media (max-width: 768px) {
/* tablet用 */
	.wrap--txt h1 {
		/*padding-top: 23%;*/
		width:37.626262%;
	}
	.wrap--txt h2 {
		margin-top: 1em;
        font-size: min(7vw, 2.6em);
        font-weight: normal;
        line-height: 1.5;
		letter-spacing: .075em;
	}
	.wrap--txt p {
		margin-top: 1.5em;
		font-size:min(3.4vw, 1.8em); 
		font-weight: normal; 
		line-height: 1.45; 
		letter-spacing: .075em;
	}
}

/* 
-------------------------------------------------- */
.sec01 {
	background: url("../img/img_00.jpg") center center no-repeat;
	background-size: cover;
}
.sec05 {
	background: url("../img/img_04.jpg") center center no-repeat;
	background-size: cover;
}
.sec06 {
	background: url("../img/img_05.jpg") center center no-repeat;
	background-size: cover;
}
.sec07 {
	background: url("../img/img_06.jpg") center center no-repeat;
	background-size: cover;
}
.sec08 {
	background: url("../img/img_07.jpg") center center no-repeat;
	background-size: cover;
}
@media (min-width: 769px) {
/* PC用 */
	.sec02 {
		background: url("../img/img_01_pc.jpg") center center no-repeat;
		background-size: cover;
	}
	.sec03 {
		background: url("../img/img_02_pc.jpg") center center no-repeat;
		background-size: cover;
	}
	.sec04 {
		background: url("../img/img_03_pc.jpg") center center no-repeat;
		background-size: cover;
	}
}
@media (max-width: 768px) {
/* tablet用 */
	.sec02 {
		background: url("../img/img_01_sp.jpg") center center no-repeat;
		background-size: cover;
	}
	.sec03 {
		background: url("../img/img_02_sp.jpg") center center no-repeat;
		background-size: cover;
	}
	.sec04 {
		background: url("../img/img_03_sp.jpg") center center no-repeat;
		background-size: cover;
	}
}

/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* PC用 */
}
@media (max-width: 768px) {
/* tablet用 */
}