@charset "UTF-8";
header > h1 {
	display: none;
}

*::-ms-backdrop, header > h1.fadein {
	/* IE11 */
	display: block!important;
	visibility:visible;
}

*::-ms-backdrop, header > h1.fadeout {
	/* IE11 */
	display: block!important;
	visibility:hidden;
}

main {
	width: 100%;
	max-width: 1100px;
	/*height: 100vh;*/
	/*overflow: hidden;*/
	/*overflow-y: scroll;*/
	/*padding: 50px 0 0;*/
	padding: 20px 0 0;
	background-color: #171717;
	/*position: fixed;*/
	top: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	margin: 0 auto;
}
main .base {
	width: 100%;
	max-width: 1100px;
	/*height: calc(100vh - 50px);*/
	/*min-height: 640px;*/
	margin: 0 auto;
	position: -webkit-sticky;
	position: sticky;
	top: 50px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;/*
	-webkit-align-items: flex-end;
	align-items: flex-end;*/
}
main .base .base_img {
	width: 100%;
	z-index: 0;
	overflow: hidden;
	position: relative;
}
main .base .base_img img {
	width: 100%;
	display: block;
	transform: scale(1.05);
	animation:img_trans 1000ms ease-out 1000ms forwards;
}
@keyframes img_trans{
	0%{filter: brightness(100%);transform: scale(1.05);}
	45%{filter: brightness(100%);}
	50%{filter: brightness(150%);transform: scale(1);}
	55%{filter: brightness(100%);}
	100%{filter: brightness(100%);transform: scale(1);}
}
main .base .main_text {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 0;
	padding: 0 0 140px;
}


*::-ms-backdrop, main .base .main_text {
	/* IE11 */
	left: 0;
	bottom: 0;
}


main .base .main_text::before {
	content: "";
	position: absolute;
	top: -10%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 2px;
	height: 100px;
	background-color: #FFF;
	transform: rotate(0);
	animation:bar_trans 1000ms ease-out 1000ms forwards;
}
@keyframes bar_trans{
	0%{opacity:1;transform: rotate(0);}
	25%{opacity:1;transform: rotate(0);}
	50%{opacity:1;transform: rotate(-45deg);}
	75%{opacity:0.5;transform: rotate(-45deg);}
	100%{opacity:0;transform: rotate(-45deg);}
}
main .base .main_text > h2 {
	font-size: 64px;
	text-align: center;
	line-height: 1;
	margin: 0 0 20px;
	transform: scaleX(0);
	opacity: 0;
	/*animation:main_trans 1500ms ease-out 2000ms forwards;*/
	animation:main_trans 1000ms linear 1500ms forwards;
}
main .base .main_text > h2 > img {
	width: calc(100% - 80px);
	max-width: 900px;
	display: block;
	margin: 0 auto;
}
@keyframes main_trans{
	0%{transform: scaleX(0);opacity: 0;}
	25%{transform: scaleX(0,5);opacity: 0.5;}
	50%{transform: scaleX(0.75);opacity: 1;}
	75%{transform: scaleX(1);opacity: 1;}
	100%{transform: scaleX(1);opacity: 1;}
}
main .base .main_text > p {
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Noto Serif SC', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', メイリオ, Meiryo, serif;
	opacity: 0;
	animation:text_trans 500ms ease-out 2000ms forwards;
}
@keyframes text_trans{
	0%{opacity:0;color: rgba(255,255,255,0);right: -20%;}
	50%{opacity:1;color: rgba(255,255,255,0.425);right: -10%;}
	100%{opacity:1;color: rgba(255,255,255,0.85);right: 0;}
}






/*--------------------------------------------------------------------------*/

main .content {
	position: relative;
	padding: 100vh 0 0;
	padding: 720px 0 0;
	padding: 80px 0 0;
	z-index: 2;
}
main .content::before {
	content: "";
	width: 100%;
	height: 80px;
	position: absolute;
	top: 0px;
	left: 0;
	background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
	background: linear-gradient(rgba(0,0,0,1), #171717);
}
main .content .listsetarea {
	position: relative;
	padding: 0 40px;
	background-color: #171717;
}
main .content .listsetarea::before {
	content: "";
	display: block;
	width: 1px;
	height: 160px;
	position: absolute;
	left: calc(50% - .5px);
	top: -160px;
	background-color: #646464;
}
main .content .listsetarea section {
	position: relative;
	display: none;
	padding: 0;
}
main .content .listsetarea section:last-child {
	padding: 0 0 80px;
}
main .content .listsetarea section:last-child::after {
	content: "";
	display: block;
	width: 1px;
	height: 80px;
	position: absolute;
	left: calc(50% - .5px);
	top: calc(100% - 80px);
	background-color: #646464;
}
main .content .listsetarea section.active {
	display: block;
	padding: 0 0 80px;
}
section .cont {
	display: block;
	position: relative;
	margin: 0 0 80px;
}
section .cont:last-child {
	margin: 0;
}
section .cont::after {
	content: "";
	display: block;
	width: 1px;
	height: 80px;
	position: absolute;
	left: calc(50% - .5px);
	top: 100%;
	background-color: #646464;
}
section .cont > .top {
	position: relative;
	overflow: hidden;
}
section .cont > .top .img_box {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
}
section .cont > .top .img_box img {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	display: block;
}
section .cont > .top .img_box .copy {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 20px;
	font-size: 10px;
	color: #FFF;
	line-height: 20px;
	display: block;
}
section .cont.even > .top .img_box .copy {
	right: auto;
	left: 0;
}
section .cont > .top .over_text {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color: #FFF;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: flex-end;
	align-content: flex-end;
	padding: 0 0 0 63%;
}
section .cont.even > .top .over_text {
	padding: 0 0 0 13.5%;
}
section .cont > .top .over_text > strong {
	width: 100%;
	font-size: 32px;
	line-height: 1.6;
	font-weight: bold;
	position: relative;
	z-index: 2;
	margin: 0 0 30px;
	font-family: 'ヒラギノ角ゴ ProN W3';
}
section .cont > .top .over_text > strong::before {
	position: absolute;
	top: 0;
	left: 5px;
	z-index: -1;
	content: "";
	width: 1px;
	height: 70px;
	transform: rotate(-45deg);
	background-color: #640102;
}
section .cont > .top .over_text > h3 {
	font-weight: normal;
	font-size: 14px;
	line-height: 2;
	width: 100%;
}
section .cont > .top .over_text > h4 {
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	width: 100%;
	margin: 0 0 45px;
}
section .cont > .text {
	background-color: #000;
	padding: 10px 60px;
	color: #FFF;
	font-size: 13px;
	line-height: 2;
}
main .content .more_btn {
	position: relative;
	padding: 80px 0 0;
	background-color: #171717;
}
main .content .more_btn::before {
	content: "";
	display: block;
	width: 1px;
	height: 80px;
	position: absolute;
	left: calc(50% - .5px);
	bottom: calc(100% - 80px);
	background-color: #646464;
}
main .content .more_btn > a {
	display: block;
	border: 1px solid #3e3e3e;
	color: #FFF;
	line-height: 40px;
	font-size: 24px;
	font-family: 'Times New Roman', Times, serif;
	text-align: center;
	width: 100px;
	margin: 80px auto 0;
}
main .content .more_btn > a:hover {
	color: #ac0300;
	border: 1px solid #ac0300;
}











/*--------------------------------------------------------------------------*/




@media screen and (max-width:834px){
/*main {
	padding: 0;
}*/
main .base .base_img > img {
	width: 100%;
	height: calc(100vh - 50px);
	-webkit-object-fit: cover;
	object-fit: cover;
	-webkit-object-position: center center;
	object-position: center top;
}
main .base .main_text {
	padding: 0 0 20vh;
}
main .base .main_text > h2 {
	font-size: 40px;
}
main .base .main_text > h2 > img {
	max-width: 500px;
}
main .base .main_text > p {
	font-size: 13px;
}
main .base .main_text > p > span {
	display: inline-block;
}
main .content .listsetarea {
	padding: 0;
}
section .cont.even > .top .over_text,
section .cont > .top .over_text {
	padding: 0 45px;
}

section .cont > .top .over_text > strong {
	font-size: 42px;
	line-height: 1;
}
section .cont > .top .over_text > strong::before {
	display: none;
}
section .cont > .top .over_text > h3 {
	font-size: 24px;
	margin: 0 0 10px;
}
section .cont > .top .over_text > h4 {
	font-size: 24px;
	margin: 0 0 30px;
	line-height: 1.1;
}
section .cont > .text {
	padding: 10px 20px;
}

}















@media screen and (max-width:414px){
section .cont.even > .top .over_text,
section .cont > .top .over_text {
	padding: 10px;
}

section .cont > .top .over_text > strong {
	margin: 0;
	font-size: 22px;
}
section .cont > .top .over_text > strong::before {
	display: none;
}
section .cont > .top .over_text > h3 {
	font-size: 18px;
	margin: 0;
}
section .cont > .top .over_text > h4 {
	font-size: 14px;
	margin: 0;
}
section .cont > .text {
	padding: 10px 20px 0;
}
}

@media screen and (max-width:412px){

@media screen and (max-width:375px){

@media screen and (max-width:360px){

@media screen and (max-width:320px){

/*--------------------------------------------------------------------------*/

}
}
}
}