@charset "utf-8";

/* intro --------------------------------------------- */

#base .intro{
	position: fixed;
	left: 0;
	top: 0;
	z-index:1100;
	width: 100%;
	overflow:hidden;
}
#base .intro.del{
	display:none;
}

#base .intro .secbg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow:hidden;
}
#base .intro.mov1 .secbg{
	-webkit-transition:transform 4.5s linear;
	-o-transition:transform 4.5s linear;
	transition:transform 4.5s linear;
	transform:scale(1.05);
}

#base .intro .secbg .secbg2{
	position: absolute;
	left:calc(50% - 720px);
	top:calc(50% - 405px);
	width:1440px;
	height:810px;
}

#base .intro .secbg .secbg2 .op1 img{
	position: absolute;
	left:518px;
	top: 0;
	width:922px;
	height:810px;
}
#base .intro.mov2 .secbg .secbg2 .op1 img{
	/* 25/30 */
	-webkit-transition:left 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335), filter 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335);
	-o-transition:left 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335), filter 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335);
	transition:left 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335), filter 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform 0.833333s cubic-bezier(0.6, 0.04, 0.98, 0.335);
	left:1720px;
	filter:blur(40px);
	transform: scale(2.35);
	transform-origin:0% 50%;
}

#base .intro .secbg .secbg2 .op2 img{
	position: absolute;
	right:-10px;
	top: 0;
	width:1450px;
	height:810px;
}
#base .intro.mov2 .secbg .secbg2 .op2 img{
	/* 34/30 */
	-webkit-transition:right 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s, filter 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s, transform 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s;
	-o-transition:right 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s, filter 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s, transform 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s;
	transition:right 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s, filter 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s, transform 1.133333s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0.03s;
	right:1441px;
	filter:blur(40px);
	transform: scale(2.35);
	transform-origin:100% 50%;
}

#base .intro .secbg .secbg2 .op3 img{
	position: absolute;
	left:380px;
	top: 0;
	width:1060px;
	height:810px;
}
#base .intro.mov2 .secbg .secbg2 .op3 img{
	/* 42/30 */
	-webkit-transition:left 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s, filter 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s, transform 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s;
	-o-transition:left 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s, filter 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s, transform 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s;
	transition:left 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s, filter 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s, transform 1.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s;
	left:2013px;
	filter:blur(40px);
	transform: scale(2.35);
	transform-origin:0% 50%;
}

#base .intro .secbg .secbg2 .op4 img{
	position: absolute;
	right:401px;
	top: 0;
	width:1039px;
	height:810px;
}
#base .intro.mov2 .secbg .secbg2 .op4 img{
	/* 49/30 */
	-webkit-transition:right 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s, filter 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s, transform 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s;
	-o-transition:right 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s, filter 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s, transform 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s;
	transition:right 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s, filter 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s, transform 1.633333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s;
	right:1875px;
	filter:blur(40px);
	transform: scale(2.35);
	transform-origin:100% 50%;
}

#base .intro .secbg .secbg2 .op5 img{
	position: absolute;
	left:490px;
	top: 0;
	width:950px;
	height:810px;
}
#base .intro.mov2 .secbg .secbg2 .op5 img{
	/* 55/30 */
	-webkit-transition:left 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s, filter 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s, transform 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s;
	-o-transition:left 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s, filter 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s, transform 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s;
	transition:left 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s, filter 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s, transform 1.833333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s;
	left:2701px;
	filter:blur(40px);
	transform: scale(2.35);
	transform-origin:0% 50%;
}

#base .intro .secbg .secbg2 .op6 img{
	position: absolute;
	right:401px;
	top: 0;
	width:1039px;
	height:810px;
}
#base .intro.mov2 .secbg .secbg2 .op6 img{
	/* 60/30 */
	-webkit-transition:right 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s, filter 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s, transform 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s;
	-o-transition:right 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s, filter 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s, transform 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s;
	transition:right 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s, filter 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s, transform 2.0s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s;
	right:2384px;
	filter:blur(40px);
	transform: scale(2.35);
	transform-origin:100% 50%;
}

#base .intro .secbg .secbg2 .op7 img{
	position: absolute;
	left:459px;
	top: 0;
	width:981px;
	height:810px;
}
#base .intro.mov2 .secbg .secbg2 .op7 img{
	/* 64/30 */
	-webkit-transition:left 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s, filter 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s, transform 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s;
	-o-transition:left 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s, filter 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s, transform 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s;
	transition:left 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s, filter 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s, transform 2.133333s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s;
	left:3641px;
	filter:blur(40px);
	transform: scale(2.35);
	transform-origin:0% 50%;
}

#base .intro .secbg .secbg2 .del img{
	display:none;
}

#base .intro .sectxt{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width:160px;
	height:250px;
	
	width:176px;
	height:275px;
	
	width:270px;
	height:270px;
	
	width:240px;
	height:240px;
	
	margin:auto;
}

#base .intro .sectxt .txt{
	position: absolute;
	left: 0;
	top: 0;
	opacity:0;
	filter:blur(10px);
	width:100%;
	height:100%;
}

#base .intro.mov1 .sectxt .txt1{
	-webkit-transition:opacity 1.0s ease-in-out, filter 1.0s ease-in-out;
	-o-transition:opacity 1.0s ease-in-out, filter 1.0s ease-in-out;
	transition:opacity 1.0s ease-in-out, filter 1.0s ease-in-out;
}
#base .intro.mov1 .sectxt .txt2{
	-webkit-transition:opacity 1.0s ease-in-out 0.3s, filter 1.0s ease-in-out 0.3s;
	-o-transition:opacity 1.0s ease-in-out 0.3s, filter 1.0s ease-in-out 0.3s;
	transition:opacity 1.0s ease-in-out 0.3s, filter 1.0s ease-in-out 0.3s;
}
#base .intro.mov1 .sectxt .txt3{
	-webkit-transition:opacity 1.0s ease-in-out 0.6s, filter 1.0s ease-in-out 0.6s;
	-o-transition:opacity 1.0s ease-in-out 0.6s, filter 1.0s ease-in-out 0.6s;
	transition:opacity 1.0s ease-in-out 0.6s, filter 1.0s ease-in-out 0.6s;
}
#base .intro.mov1 .sectxt .txt{
	opacity:1.0;
	filter:blur(0);
}
#base .intro.mov1 .sectxt.del .txt{
	-webkit-transition:opacity 1.5s ease-in-out;
	-o-transition:opacity 1.5s ease-in-out;
	transition:opacity 1.5s ease-in-out;
	opacity:0;
}

#base .intro .sectxt .txt img{
	width:100%;
	height:100%;
}

@media all and (max-width: 767px){
#base .intro .sectxt{
	width:225px;
	height:225px;
	width:195px;
	height:195px;
}
}

@media all and (max-height: 500px){
#base .intro .sectxt{
	width:225px;
	height:225px;
	width:195px;
	height:195px;
}
}

#base .intro .skip{
	position:absolute;
	right:0;
	bottom:55px;
	
	-webkit-transition:opacity .3s linear;
	-o-transition:opacity .3s linear;
	transition:opacity .3s linear;
}
#base .intro .skip.vw{
}
#base .intro .skip.del{
	opacity:0;
	pointer-events:none;
}

#base .intro .skip .btn{
	position:relative;
	width:80px;
	width:70px;
	width:64px;
	
	cursor:pointer;
	-webkit-transition:opacity .15s linear;
	-o-transition:opacity .15s linear;
	transition:opacity .15s linear;
}
#base.device_pc .intro .skip .btn:hover{
	opacity:0.4;
}

#base .intro .skip .btn p{
	font-weight:600;
	color:#FFFFFF;
	font-size:1.4em;
	letter-spacing:0.02em;
	padding-bottom:14px;
	white-space: nowrap;
}

#base .intro .skip .btn .icn{
}

#base .intro .skip .btn .icn img{
	position:absolute;
	right:12px;
	bottom:13px;
	width:14px;
	height:14px;
}

#base .intro .skip .btn .bdr{
	position:absolute;
	left:0;
	width:100%;
	height:1px;
	overflow:hidden;
	background:rgba(255,255,255,0.4);
	bottom:0;
}

@media all and (max-height: 550px){
#base .intro .skip{
	bottom:55px;
	
	bottom:45px;
}
}

@media all and (max-width: 767px),(max-height: 450px){
#base .intro .skip{
	bottom:35px;
}

#base .intro .skip .btn{
	width:67px;
	width:56px;
}

#base .intro .skip .btn p{
	font-size:1.6em;
	padding-bottom:14px;
	
	font-size:1.3em;
	padding-bottom:12px;
}

#base .intro .skip .btn .icn img{
	right:25px;
	bottom:14px;
	width:14px;
	height:14px;
	
	right:15px;
	bottom:11px;
	
	right:7px;
	bottom:11px;
}
}

/* HOME --------------------------------------------- */

#base .home{
	width: 100%;
	overflow:hidden;
}

#base .home .ttl{
	position: absolute;
	left:40px;
	bottom:45px;
	
	opacity:0;
	-webkit-transition: opacity .7s ease-in-out;
	-o-transition: opacity .7s ease-in-out;
	transition: opacity .7s ease-in-out;
}
#base .home .ttl.vw{
	opacity:1.0;
}

#base .home .ttl img{
	width:265px;
	height:255px;
}
#base.sp_typ2 .home .ttl img{
	width:200px;
	height:auto;
}

#base .home .rghbar{
	position: fixed;
	right:-102px;
	top: 0px;
	
	width: 100px;
	height: 100%;
	border-left:solid 1px rgba(255,255,255,0.3);
	
	-webkit-transition: right .5s cubic-bezier(0.76, 0, 0.24, 1);
	-o-transition: right .5s cubic-bezier(0.76, 0, 0.24, 1);
	transition: right .5s cubic-bezier(0.76, 0, 0.24, 1);
}
#base .home .rghbar.vw{
	right:0;
}
#base .home .rghbar.del{
	right:-102px;
}

#base .home .rghbar .txt{
	height: 100%;
}

#base .home .rghbar .txt .txt1{
	margin-top:35px;
	margin-bottom:18px;
	
	-webkit-transition:opacity .15s linear;
	-o-transition:opacity .15s linear;
	transition:opacity .15s linear;
}
#base.device_pc .home .rghbar .txt a:hover .txt1{
	opacity:0.4;
}

#base .home .rghbar .txt1 p{
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	
	font-weight:600;
	white-space: nowrap;
	color:#FFFFFF;
	font-size:1.1em;
	line-height:1.0;
	letter-spacing:0.05em;
	margin:0 auto;
}

#base .home .rghbar .txt .txt2{
	overflow:hidden;
	height:calc(100% - 300px);
	-webkit-transition:opacity .15s linear;
	-o-transition:opacity .15s linear;
	transition:opacity .15s linear;
}
#base.device_pc .home .rghbar .txt a:hover .txt2{
	opacity:0.4;
}

#base .home .rghbar .txt2 p{
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	
	font-weight:600;
	white-space: nowrap;
	text-overflow:ellipsis;
	color:#FFFFFF;
	font-size:1.7em;
	line-height:1.0;
	margin:0 auto;
}

#base .home .rghbar .scrl_txt{
	position: absolute;
	left:46px;
	bottom:128px;
	
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	white-space: nowrap;
	color:#FFFFFF;
	font-size:1.1em;
	line-height:1.0;
	letter-spacing:0.05em;
}

#base .home .rghbar .scrl{
	position: absolute;
	right: 49px;
	bottom: 30px;
	
	width: 2px;
	height: 90px;
	overflow: hidden;
	pointer-events: none;
}

#base .home .rghbar .scrl .bg{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.2);
}

#base .home .rghbar .scrl .ln{
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: rgba(255,255,255,1.0);
	animation-name: scrl_anime;
	animation-duration: 2.0s;
	animation-iteration-count: infinite;
}

@keyframes scrl_anime {
	0% {
		height: 0;
		top: 0;
	}
	
	55% {
		height: 0;
		top: 0;
		animation-timing-function: ease-in;
	}

	75% {
		height: 100%;
		top: 0;
	}

	80% {
		height: 100%;
		top: 0;
	}

	100% {
		height: 0;
		top: 100%;
		animation-timing-function: ease-out;
	}
}

@media all and (max-width: 767px){
#base .home .ttl{
	left:15px;
	bottom:25px;
}

#base .home .ttl img{
	width:200px;
	height:auto;
}

#base .home .rghbar{
	right:-62px;
	width:60px;
}
#base .home .rghbar.vw{
	right:0;
}
#base .home .rghbar.del{
	right:-62px;
}

#base .home .rghbar .txt{
}

#base .home .rghbar .txt .txt1{
	margin-top:25px;
	margin-bottom:12px;
}

#base .home .rghbar .txt1 p{
	font-size:1.1em;
}

#base .home .rghbar .txt .txt2{
	height:calc(100% - 245px);
}

#base .home .rghbar .txt2 p{
	font-size:1.5em;
}

#base .home .rghbar .scrl_txt{
	left:26px;
	bottom:96px;
	transform: scale(0.909090);
	transform-origin:50% 100%;
}

#base .home .rghbar .scrl{
	right:29px;
	bottom:20px;
	
	height:70px;
}
}

/* closed --------------------------------------------- */

#base .closed{
}

#base .closed .subsec{
}

#base .closed .subsec .txt{
	text-align:center;
}

#base .closed .subsec .txt .ja{
	font-weight:600;
	font-size:1.7em;
	line-height:2.0;
	letter-spacing:0.02em;
	color:#FFFFFF;
}

#base .closed .subsec .txt .ja a{
	text-decoration:underline;
	text-decoration-color:rgba(255,255,255,0.8);

	-webkit-transition:opacity .15s linear, text-decoration-color .15s linear;
	-o-transition:opacity .15s linear, text-decoration-color .15s linear;
	transition:opacity .15s linear, text-decoration-color .15s linear;
}
#base.device_pc .closed .subsec .txt .ja a:hover{
	text-decoration-color:rgba(255,255,255,0);
	opacity:0.4;
}

#base .closed .subsec .txt .en{
	font-size:1.2em;
	line-height:2.2;
	letter-spacing:0.03em;
	color:#FFFFFF;
	padding-top:25px;
}

#base .closed .subsec .txt .en a{
	text-decoration:underline;
	text-decoration-color:rgba(255,255,255,0.8);
	
	-webkit-transition:opacity .15s linear, text-decoration-color .15s linear;
	-o-transition:opacity .15s linear, text-decoration-color .15s linear;
	transition:opacity .15s linear, text-decoration-color .15s linear;
}
#base.device_pc .closed .subsec .txt .en a:hover{
	text-decoration-color:rgba(255,255,255,0);
	opacity:0.4;
}

@media all and (max-width: 767px){
#base .closed .subsec .txt .ja{
	font-size:1.5em;
}

#base .closed .subsec .txt .en{
	font-size:1.1em;
	line-height:2.2;
	padding-top:20px;
	padding-top:18px;
	transform: scale(0.909090);
	transform-origin:50% 0%;
}
}

/* art --------------------------------------------- */

#base .art{
	width: 100%;
	z-index:5;
}

#base .art .subart{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	
	opacity:0;
	pointer-events:none;
	-webkit-transition:opacity 0.4s linear;
	-o-transition:opacity 0.4s linear;
	transition:opacity 0.4s linear;
}
#base .art .art1{
}
#base .art .subart.vw{
	opacity:1.0;
	pointer-events:auto;
}
#base .art .art1.vw{
}
#base .art .art1.del,
#base .art .art2.del,
#base .art .art3.del{
	opacity:0;
	pointer-events:none;
}
#base .art .art4.del{
	position:absolute;
	left:0;
	top:auto;
	bottom:0;
}

#base .art .subart .subsubart{
	position:relative;
	width:100%;
	height:100%;
}

/* bg */

#base .art .bg{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background:#222222;
}
#base .art .bg.del{
	position:absolute;
	top:auto;
	bottom:0;
}

#base .art .bg .subbg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow:hidden;
	
	opacity:0;
}
#base .art .bg .bg1{
	opacity:1.0;
	-webkit-transition:opacity 0.8s linear;
	-o-transition:opacity 0.8s linear;
	transition:opacity 0.8s linear;
}
#base .art .bg .bg1.dark{
	opacity:0.4;
}
#base .art .bg .bg2.vw,
#base .art .bg .bg3.vw,
#base .art .bg .bg4.vw{
	opacity:1.0;
}

#base .art .bg .bg1 .subsubbg{
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	height:100%;
	background: url(../img/sennoyoshiro/index.jpg) no-repeat 50% 50%;
	background-size: cover;
}

#base .art .bg .bg2 .subsubbg{
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	height:100%;
	background: url(../img/haru/index.jpg) no-repeat 50% 50%;
	background-size: cover;
}

#base .art .bg .bg3 .subsubbg{
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	height:100%;
	background: url(../img/tasogare/index.jpg) no-repeat 50% 50%;
	background-size: cover;
}

#base .art .bg .bg4 .subsubbg{
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	height:100%;
	background: url(../img/hotaru/index.jpg) no-repeat 50% 10%;
	background-size: cover;
}

/* info */

#base .art .info .ja{
	font-weight:600;
	font-size:1.7em;
	line-height:1.75;
	letter-spacing:0.04em;
	color:#FFFFFF;
}

#base .art .info .en{
	font-size:1.1em;
	line-height:1.75;
	letter-spacing:0.04em;
	color:rgba(255,255,255,0.9);
	margin-top:10px;
}

#base .art .info .btn{
	margin-top:33px;
}

#base .art .info .more{
	width:150px;
	
	-webkit-transition:opacity .15s linear;
	-o-transition:opacity .15s linear;
	transition:opacity .15s linear;
}
#base.device_pc .art .info a:hover .more{
	opacity:0.4;
}

#base .art .info .more p{
	color:#FFFFFF;
}
#base .art .info .more .txt1{
	font-size:1.8em;
	letter-spacing:0.0em;
	padding-bottom:3px;
}
#base .art .info .more .txt2{
	font-weight:500;
	opacity:0.8;
	font-size:1.1em;
	letter-spacing:0.08em;
	padding-bottom:17px;
	transform: scale(0.909090);
	transform-origin:0% 100%;
}

#base .art .info .more .icn{
	position:absolute;
	border:none;
	background:#FFFFFF;
	
	right:0;
	bottom:25px;
	width:15px;
	height:15px;
	animation-name: moreicn_anime1;
	animation-duration:3.0s;
	animation-iteration-count: infinite;
}

#base .art .info .more .icn img{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:15px;
	height:15px;
	
	right: 0;
	animation-name: moreicn_anime2;
	animation-duration:3.0s;
	animation-iteration-count: infinite;
}

@keyframes moreicn_anime1{
0% {
	right:0;
	bottom:25px;
	width:15px;
	height:15px;
}

76% {
	right:0;
	bottom:25px;
	width:15px;
	height:15px;
	animation-timing-function: ease-out;
}

81% {
	right:-4px;
	bottom:21px;
	width:23px;
	height:23px;
	animation-timing-function: ease-in-out;
}

88% {
	right:3px;
	bottom:28px;
	width:9px;
	height:9px;
}

93% {
	right:-2px;
	bottom:23px;
	width:19px;
	height:19px;
}

97% {
	right:1px;
	bottom:26px;
	width:13px;
	height:13px;
}

100% {
	right:0;
	bottom:25px;
	width:15px;
	height:15px;
}
}

@keyframes moreicn_anime2{
0% {
	left: 0;
	right: 0;
}

80% {
	left: 0;
	right: 0;
	animation-timing-function: ease-in;
}

89% {
	left: 0;
	right: -40px;
	opacity:1.0;
}
89.9% {
	left: 0;
	right: -40px;
	opacity:0;
}
90.1% {
	left: -40px;
	right: 0;
	opacity:0;
}
91% {
	opacity:1.0;
	left: -40px;
	right: 0;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

100% {
	left: 0;
	right: 0;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
}

#base .home .rghbar .scrl .ln{
}

#base .art .info .more .bdr{
	background:rgba(255,255,255,0.4);
}

#base .art .info .more .bdr .subbdr{
	position:absolute;
	left:0;
	top:0;
	width:0;
	height:1px;
	overflow:hidden;
	background:rgba(255,255,255,1.0);
	
	animation-name: morebdr_anime1;
	animation-duration: 3.0s;
	animation-iteration-count: infinite;
}
#base .art .info .more .bdr1 .subbdr{
	animation-delay: 0.2s;
}

@keyframes morebdr_anime1 {
	0% {
		width: 0;
		left: 0;
	}
	
	70% {
		width: 0;
		left: 0;
		animation-timing-function: ease-in;
	}

	83.33333% {
		width: 100%;
		left: 0;
	}

	86.66666% {
		width: 100%;
		left: 0;
	}

	100% {
		width: 0;
		left: 100%;
		animation-timing-function: ease-out;
	}
}

@media all and (max-height: 640px) and (min-width: 768px){
#base .art .info .btn{
	margin-top:30px;
}
}

@media all and (max-width: 767px){
#base .art .info .ja{
	font-size:1.3em;
	font-size:1.4em;
	line-height:1.6;
	letter-spacing:0.04em;
}

#base .art .info .en{
	font-size:1.1em;
	line-height:1.6;
	letter-spacing:0.04em;
	margin-top:7px;
}

#base .art .info .btn{
	margin-top:20px;
	margin-top:19px;
}

#base .art .info .more{
	width:120px;
}

#base .art .info .more .txt1{
	font-size:1.5em;
	padding-bottom:1px;
}
#base .art .info .more .txt2{
	font-size:1.1em;
	padding-bottom:16px;
	transform: scale(0.818181);
}

#base .art .info .more .icn{
	bottom:21px;
	width:13px;
	height:13px;
	
	animation-name: moreicn_anime1_sp;
	animation-duration:3.0s;
	animation-iteration-count: infinite;
}

#base .art .info .more .icn img{
	width:13px;
	height:13px;
	
	animation-name: moreicn_anime2_sp;
	animation-duration:3.0s;
	animation-iteration-count: infinite;
}
}

@keyframes moreicn_anime1_sp{
0% {
	right:0;
	bottom:21px;
	width:13px;
	height:13px;
}

76% {
	right:0;
	bottom:21px;
	width:13px;
	height:13px;
	animation-timing-function: ease-out;
}

81% {
	right:-4px;
	bottom:17px;
	width:21px;
	height:21px;
	animation-timing-function: ease-in-out;
}

88% {
	right:3px;
	bottom:24px;
	width:7px;
	height:7px;
}

93% {
	right:-2px;
	bottom:19px;
	width:17px;
	height:17px;
}

97% {
	right:1px;
	bottom:22px;
	width:11px;
	height:11px;
}

100% {
	right:0;
	bottom:21px;
	width:13px;
	height:13px;
}
}

@keyframes moreicn_anime2_sp{
0% {
	left: 0;
	right: 0;
}

80% {
	left: 0;
	right: 0;
	animation-timing-function: ease-in;
}

89% {
	left: 0;
	right: -40px;
	opacity:1.0;
}
89.9% {
	left: 0;
	right: -40px;
	opacity:0;
}
90.1% {
	left: -40px;
	right: 0;
	opacity:0;
}
91% {
	opacity:1.0;
	left: -40px;
	right: 0;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

100% {
	left: 0;
	right: 0;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
}

/* art1 */

#base .art .art1 .ttl{
	position:absolute;
	left:50px;
	top:65px;
}

#base .art .art1 .info{
	position:absolute;
	left:60px;
	bottom:60px;
}

#base .art .art1 .info .ja,
#base .art .art1 .info .en,
#base .art .art1 .info .more p{
	text-shadow:rgba(0,0,0,0.8) 0 0 20px;
}

#base .art .art1 .athr{
	position:absolute;
	right:50px;
	bottom:50px;
}

@media all and (max-height: 640px) and (min-width: 768px){
#base .art .art1 .ttl{
	top:40px;
}

#base .art .art1 .ttl img{
	transform: scale(0.9);
	transform-origin:0% 0%;
}

#base .art .art1 .info{
	bottom:45px;
}

#base .art .art1 .athr{
	bottom:35px;
}
}

@media all and (max-width: 767px){
#base .art .art1 .ttl{
	left:15px;
	top:50px;
}

#base .art .art1 .ttl img{
	transform: scale(0.75);
	transform: scale(0.7);
	transform-origin:0% 0%;
}

#base .art .art1 .info{
	left:20px;
	bottom:35px;
}

#base .art .art1 .info .en{
	transform: scale(0.909090);
	transform-origin:0% 0%;
}

#base .art .art1 .athr{
	right:13px;
	bottom:30px;
}

#base .art .art1 .athr img{
	transform: scale(0.78.75);
	transform: scale(0.75);
	transform-origin:100% 100%;
}
}

/* art2 */
#base .art .art2 .ttl{
	position:absolute;
	left:50px;
	bottom:50px;
}

#base .art .art2 .info{
	position:absolute;
	right:60px;
	bottom:60px;
}

#base .art .art2 .info .ja,
#base .art .art2 .info .en,
#base .art .art2 .info .more p{
	text-shadow:rgba(0,0,0,1.0) 0 0 20px;
}

#base .art .art2 .info .ja,
#base .art .art2 .info .en{
	text-align:right;
}

#base .art .art2 .info .more{
	margin-left:auto;
}

#base .art .art2 .athr img{
	position:absolute;
	left:23%;
	top:0;
	bottom:0;
	margin:auto;
}

@media all and (max-height: 640px) and (min-width: 768px){
#base .art .art2 .ttl{
	bottom:35px;
}

#base .art .art2 .ttl img{
	transform: scale(0.9);
	transform-origin:50% 100%;
}

#base .art .art2 .info{
	bottom:45px;
}
}

@media all and (max-width: 767px){
#base .art .art2 .ttl{
	left:15px;
	bottom:27px;
}

#base .art .art2 .ttl img{
	transform: scale(0.7);
	transform-origin:0% 100%;
}

#base .art .art2 .info{
	right:20px;
	bottom:35px;
}

#base .art .art2 .info .en{
	transform: scale(0.909090);
	transform-origin:100% 0%;
}

#base .art .art2 .athr{
	position:absolute;
	right:13px;
	top:25px;
}

#base .art .art2 .athr img{
	position:static;
	transform: scale(0.75);
	transform-origin:100% 0;
}
}

/* art3 */
#base .art .art3 .ttl{
	position:absolute;
	right:50px;
	bottom:50px;
}

#base .art .art3 .info{
	position:absolute;
	left:60px;
	bottom:60px;
}

#base .art .art3 .athr{
	position:absolute;
	right:50px;
	top:50px;
}

@media all and (max-height: 640px) and (min-width: 768px){
#base .art .art3 .ttl{
	bottom:35px;
}

#base .art .art3 .ttl img{
	transform: scale(0.9);
	transform-origin:100% 100%;
}

#base .art .art3 .info{
	bottom:45px;
}

#base .art .art3 .athr{
	top:35px;
}
}

@media all and (max-width: 767px){
#base .art .art3 .ttl{
	right:15px;
	bottom:30px;
}

#base .art .art3 .ttl img{
	transform: scale(0.7);
	transform-origin:100% 100%;
}

#base .art .art3 .info{
	left:20px;
	bottom:35px;
}

#base .art .art3 .info .en{
	transform: scale(0.909090);
	transform-origin:0% 0%;
}

#base .art .art3 .athr{
	right:13px;
	top:25px;
}

#base .art .art3 .athr img{
	position:static;
	transform: scale(0.75);
	transform-origin:100% 0%;
}
}

/* art4 */
#base .art .art4 .ttl{
	position:absolute;
	left:calc(71.73611111% - 51px);
	top:calc(54.8148% - 92px);
}
#base.sp_typ2 .art .art4 .ttl{
}

#base .art .art4 .info{
	position:absolute;
	right:60px;
	bottom:60px;
}

#base .art .art4 .info .ja,
#base .art .art4 .info .en,
#base .art .art4 .info .more p{
	text-shadow:rgba(0,0,0,0.8) 0 0 20px;
}

#base .art .art4 .info .ja,
#base .art .art4 .info .en{
	text-align:right;
}

#base .art .art4 .info .more{
	margin-left:auto;
}

#base .art .art4 .athr{
	position:absolute;
	left:50px;
	top:65px;
}

@media all and (max-width: 1200px) and (min-width: 768px){
#base .art .art4 .ttl{
	left:auto;
	right:300px;
}
}

@media all and (max-height: 640px) and (min-width: 768px){
#base .art .art4 .ttl img{
	transform: scale(0.9);
	transform-origin:50% 50%;
}

#base .art .art4 .info{
	bottom:45px;
}

#base .art .art4 .athr{
	top:50px;
}
}

@media all and (max-width: 767px){
#base .art .art4 .ttl,
#base.sp_typ2 .art .art4 .ttl{
	left:calc(65.6% - 51px);
	top:calc(38.48% - 92px);
}

#base .art .art4 .ttl img{
	transform: scale(0.7);
	transform-origin:50% 50%;
}

#base .art .art4 .info{
	right:20px;
	bottom:35px;
}

#base .art .art4 .athr{
	left:13px;
	left:18px;
	top:45px;
}

#base .art .art4 .athr img{
	transform: scale(0.75);
	transform-origin:0% 0%;
}
}

#base .art .bg .grd{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	opacity:0;
}
#base .art .bg .grd_art1{
	opacity:1.0;
}

#base .art .bg .grd .sub{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
}

#base .art .bg .grd_art1 .sub:nth-child(1){ background:rgba(51,51,51,0.1); }
#base .art .bg .grd_art1 .sub:nth-child(2){ background:linear-gradient(45deg, rgba(51,51,51,0.3) 20%, rgba(51,51,51,0) 30%); }
#base .art .bg .grd_art1 .sub:nth-child(3){ background:linear-gradient(270deg, rgba(51,51,51,0.3) 3%, rgba(51,51,51,0) 35%); }
#base .art .bg .grd_art1 .sub:nth-child(4){ background:linear-gradient(225deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0) 10%); }
#base .art .bg .grd_art1 .sub:nth-child(5){ background:linear-gradient(135deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0) 10%); }

#base .art .bg .grd_art2 .sub:nth-child(1){ background:rgba(51,51,51,0.0); }
#base .art .bg .grd_art2 .sub:nth-child(2){ background:linear-gradient(315deg, rgba(51,51,51,0.3) 9%, rgba(51,51,51,0) 20%); }
#base .art .bg .grd_art2 .sub:nth-child(3){ background:linear-gradient(45deg, rgba(51,51,51,0.3) 10%, rgba(51,51,51,0) 27%); }

#base .art .bg .grd_art4 .sub:nth-child(1){ background:linear-gradient(315deg, rgba(51,51,51,0.3) 9%, rgba(51,51,51,0) 20%); }
#base .art .bg .grd_art4 .sub:nth-child(2){ background:linear-gradient(135deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0) 10%); }

@media all and (max-width: 767px){
#base .art .bg .grd_art1 .sub:nth-child(1){ background:rgba(51,51,51,0.1); }
#base .art .bg .grd_art1 .sub:nth-child(2){ background:linear-gradient(45deg, rgba(51,51,51,0.3) 20%, rgba(51,51,51,0) 45%); }
#base .art .bg .grd_art1 .sub:nth-child(3){ background:linear-gradient(270deg, rgba(51,51,51,0.3) 8%, rgba(51,51,51,0) 45%); }
#base .art .bg .grd_art1 .sub:nth-child(4){ background:linear-gradient(225deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0) 20%); }
#base .art .bg .grd_art1 .sub:nth-child(5){ background:linear-gradient(135deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0) 20%); }

#base .art .bg .grd_art2 .sub:nth-child(1){ background:rgba(51,51,51,0.15); }
#base .art .bg .grd_art2 .sub:nth-child(2){ background:linear-gradient(315deg, rgba(51,51,51,0.3) 20%, rgba(51,51,51,0) 45%); }
#base .art .bg .grd_art2 .sub:nth-child(3){ background:linear-gradient(45deg, rgba(51,51,51,0.3) 10%, rgba(51,51,51,0) 27%); }
#base .art .bg .grd_art2 .sub:nth-child(4){ background:linear-gradient(225deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0) 20%); }
#base .art .bg .grd_art2 .sub:nth-child(5){ background:linear-gradient(135deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0) 20%); }

#base .art .bg .grd_art4 .sub:nth-child(1){ background:linear-gradient(315deg, rgba(51,51,51,0.2) 20%, rgba(51,51,51,0) 45%); }
#base .art .bg .grd_art4 .sub:nth-child(2){ background:linear-gradient(135deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0) 20%); }
}

/* pager */
#base .art .pager{
	position:absolute;
	right:0;
	top:0;
}
#base .art .pager.fxd{
	position:fixed;
}
#base .art .pager.del{
	position:absolute;
	top:auto;
	bottom:0;
}

#base .art .pager ul{
	position:absolute;
	right:25px;
	top:calc(50% - 60px);
	margin:auto;
}

#base .art .pager ul li{
	width:30px;
	height:30px;
}

#base .art .pager ul li .btn{
	position:relative;
	width:30px;
	height:30px;
	cursor:pointer;
}
#base .art .pager ul li .btn.slct{
	pointer-events:none;
}

#base .art .pager ul li .btn .subbtn{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	
	overflow:hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	width:6px;
	height:6px;
	background:#FFFFFF;
}
#base .art .pager ul li .btn.slct .subbtn{
	background:rgba(255,255,255,0);
	border:solid 2px #FFFFFF;
}

@media all and (max-width: 767px){
#base .art .pager ul{
	right:7px;
	top:calc(50% - 52px);
}

#base .art .pager ul li{
	width:26px;
	height:26px;
}

#base .art .pager ul li .btn{
	width:26px;
	height:26px;
}
}

/* history --------------------------------------------- */

#base .history{
}

#base .history .pct1{
	width:37.5%;
}

#base .history .pct1 img{
	width:100%;
	height:auto;
	position:relative;
	z-index:15;
}

@media all and (max-width: 767px){
#base .history .pct1{
	width:84%;
}
}

#base .history .cont{
	position:relative;
	padding-top:140px;
	padding-top:10vw;
	padding-bottom:18.75vw;
	padding-bottom:calc(16.5vw - 3.0vw);
}

#base .history .subcont_{
	position:relative;
	width:83.33333%;
	margin:0 auto;
}

#base .history .subcont{
	width:100%;
	display:table;
}

@media all and (max-width: 767px){

#base .history .cont{
	padding-top:18.5vw;
	padding-bottom:0;
}

#base .history .subcont_{
	width:100%;
}

#base .history .subcont{
}
}

#base .history .subcont .subcont1{
	display:table-cell;
	vertical-align:middle;
	width:38.33333%;
	position:relative;
	padding-top:11.11111vw;
}

#base .history .subcont .subcont1 .ttl{
	position:absolute;
	left:0;
	top:-87px;
	width:82.6%;
}
#base .history .subcont .subcont1 .ttl.blk{
	z-index:10;
}
#base .history .subcont .subcont1 .ttl.wht{
	z-index:20;
	height:87px;
	overflow:hidden;
}

#base .history .subcont .subcont1 .ttl .subttl{
	position:absolute;
	left:calc(50% + 12px);
	left:50%;
	top:0;
}

#base .history .subcont .subcont1 .ttl .subttl .subsubttl{
	width:100px;
	position:relative;
}
#base .history .subcont .subcont1 .ttl .ttl1 .subsubttl{
	left:7px;
}
#base .history .subcont .subcont1 .ttl .ttl2 .subsubttl{
	right:107px;
}

#base .history .subcont .subcont1 .ttl .ttl1 .subsubttl .ja{
	text-align:left;
	margin-left:0;
	margin-right:auto;
}
#base .history .subcont .subcont1 .ttl .ttl2 .subsubttl .ja{
	text-align:right;
	margin-left:auto;
	margin-right:0;
}
#base .history .subcont .subcont1 .ttl .subttl .subsubttl .ja{
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	
	white-space: nowrap;
	color:#191919;
	font-size:4.0em;
	letter-spacing:0.02em;
}
#base .history .subcont .subcont1 .ttl.wht .subttl .subsubttl .ja{
	color:#FFFFFF;
}

#base .history .subcont .subcont1 .ttl .subttl .subsubttl .ja .katakana{
	letter-spacing:-0.12em;
	letter-spacing:-0.07em;
}
#base .history .subcont .subcont1 .ttl .subttl .subsubttl .ja .katakana2{
	letter-spacing:-0.15em;
}
#base .history .subcont .subcont1 .ttl .subttl .subsubttl .ja .katakana3{
	letter-spacing:-0.2em;
}

#base .history .subcont .subcont1 .ttl .subttl .subsubttl .en{
	position:absolute;
	right:2px;
	bottom:-77px;
	text-align:right;
	color:#191919;
	opacity:0.8;
	
	font-size:1.2em;
	letter-spacing:0.04em;
	line-height:1.75;
}
#base .history .subcont .subcont1 .ttl.wht .subttl .subsubttl .en{
	color:#FFFFFF;
}

@media all and (max-width: 1400px) and (min-width: 1200px){
#base .history .subcont .subcont1{
	vertical-align:top;
	padding-top:calc(11.11111vw + 100px);
}
}

@media all and (max-width: 1199px) and (min-width: 768px){
#base .history .subcont .subcont1{
	vertical-align:top;
	padding-top:calc(11.11111vw + 140px);
}
}

@media all and (max-width: 767px){

#base .history .subcont .subcont1{
	display:table-cell;
	vertical-align:middle;
	width:38.33333%;
	position:relative;
	padding-top:11.11111vw;
	
	display:block;
	width:auto;
	padding-top:0;
	height:160px;
}

#base .history .subcont .subcont1 .ttl{
	position:absolute;
	left:0;
	top:-87px;
	width:82.6%;
	
	width:75%;
	top:-72px;
}
#base .history .subcont .subcont1 .ttl.wht{
	z-index:20;
	height:87px;
	overflow:hidden;
	
	height:72px;
}

#base .history .subcont .subcont1 .ttl .subttl{
	position:absolute;
	left:calc(50% + 12px);
	left:50%;
	top:0;
}

#base .history .subcont .subcont1 .ttl .subttl .subsubttl{
	width:100px;
	position:relative;
}
#base .history .subcont .subcont1 .ttl .ttl1 .subsubttl{
	left:7px;
}
#base .history .subcont .subcont1 .ttl .ttl2 .subsubttl{
	right:107px;
}

#base .history .subcont .subcont1 .ttl .ttl1 .subsubttl .ja{
	text-align:left;
	margin-left:0;
	margin-right:auto;
}
#base .history .subcont .subcont1 .ttl .ttl2 .subsubttl .ja{
	text-align:right;
	margin-left:auto;
	margin-right:0;
}
#base .history .subcont .subcont1 .ttl .subttl .subsubttl .ja{
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	
	white-space: nowrap;
	color:#191919;
	font-size:4.0em;
	letter-spacing:0.02em;
	
	font-size:3.4em;
}
#base .history .subcont .subcont1 .ttl.wht .subttl .subsubttl .ja{
	color:#FFFFFF;
}

#base .history .subcont .subcont1 .ttl .subttl .subsubttl .ja .katakana{
	letter-spacing:-0.12em;
	letter-spacing:-0.07em;
}
#base .history .subcont .subcont1 .ttl .subttl .subsubttl .ja .katakana2{
	letter-spacing:-0.15em;
}
#base .history .subcont .subcont1 .ttl .subttl .subsubttl .ja .katakana3{
	letter-spacing:-0.2em;
}

#base .history .subcont .subcont1 .ttl .subttl .subsubttl .en{
	position:absolute;
	right:2px;
	bottom:-77px;
	text-align:right;
	color:#191919;
	opacity:0.8;
	
	font-size:1.2em;
	letter-spacing:0.04em;
	line-height:1.75;
	
	font-size:1.1em;
}
#base .history .subcont .subcont1 .ttl.wht .subttl .subsubttl .en{
	color:#FFFFFF;
}
}

#base .history .subcont .subcont1 .txt1{
	width:82.6%;
	
	font-size:1.5em;
	letter-spacing:0.02em;
	line-height:2.0;
}

@media all and (max-width: 767px){
#base .history .subcont .subcont1 .txt1{
	display:none;
}
}

#base .history .subcont .subcont2{
	display:table-cell;
	vertical-align:middle;
	width:35%;
	position:relative;
	padding-top:11.11111vw;
}

#base .history .subcont .subcont2 .pct{
	position:relative;
	z-index:10;
	
}

#base .history .subcont .subcont2 .pct .pct2{
}

#base .history .subcont .subcont2 .pct .pct2 img{
	width:100%;
	height:auto;
}

#base .history .subcont .subcont2 .pct .pct3{
	width:100%;
}

#base .history .subcont .subcont2 .pct .pct3 img{
	position:absolute;
	left:calc(100% - 2.77777vw);
	bottom:calc(100% - 2.77777vw);
	width:76%;
	height:auto;
}

@media all and (max-width: 1400px) and (min-width: 768px){

#base .history .subcont .subcont2{
	vertical-align:top;
	padding-top:11.11111vw;
}
}

@media all and (max-width: 767px){

#base .history .subcont .subcont2{
	display:table-cell;
	vertical-align:middle;
	width:35%;
	position:relative;
	padding-top:11.11111vw;
	
	display:block;
	width:auto;
	width:calc(100% - 25px);
	margin-left:auto;
	padding-top:0;
	z-index:5;
}

#base .history .subcont .subcont2 .pct{
	position:relative;
}

#base .history .subcont .subcont2 .pct .pct2 img{
	width:100%;
	height:auto;
	
	width:73.846%;
	width:68.57%;
}

#base .history .subcont .subcont2 .pct .pct3{
	width:100%;
}

#base .history .subcont .subcont2 .pct .pct3 img{
	position:absolute;
	left:calc(100% - 2.77777vw);
	bottom:calc(100% - 2.77777vw);
	width:76%;
	height:auto;
	
	left:auto;
	bottom:auto;
	right:0;
	top:-90px;
	width:40%;
}
}

#base .history .subcont .subcont3{
	display:table-cell;
	vertical-align:middle;
	width:auto;
	position:relative;
	padding-top:11.11111vw;
}

#base .history .subcont .subcont3 .txt2_ja{
	display:none;
}

#base .history .subcont .subcont3 .txt2{
	width:84.375%;
	width:92.8%;
	margin-left:auto;
	
}

#base .history .subcont .subcont3 .txt2 p{
	color:#666666;
	font-size:1.1em;
	letter-spacing:0.04em;
	line-height:2.2;
	
	transform: scale(0.909090);
	transform-origin:100% 50%;
}

@media all and (max-width: 1400px) and (min-width: 1200px){
#base .history .subcont .subcont3{
	vertical-align:top;
	padding-top:calc(11.11111vw + 100px);
}

#base .history .subcont .subcont3 .txt2 p{
	transform-origin:100% 0%;
}

#base .history .subcont .subcont3 .btn{
	bottom:-60px;
}
}

@media all and (max-width: 1199px) and (min-width: 768px){
#base .history .subcont .subcont3{
	vertical-align:top;
	padding-top:calc(11.11111vw + 140px);
}

#base .history .subcont .subcont3 .txt2 p{
	transform-origin:100% 0%;
}

#base .history .subcont .subcont3 .btn{
	bottom:-60px;
}
}

@media all and (max-width: 767px){

#base .history .subcont .subcont3{
	display:table-cell;
	vertical-align:middle;
	width:auto;
	position:relative;
	padding-top:11.11111vw;
	
	display:block;
	width:auto;
	padding-top:0;
	width:calc(100% - 45px);
	margin-left:25px;
}

#base .history .subcont .subcont3 .txt2_ja{
	display:block;
	padding-top:20px;
	padding-bottom:12px;
}

#base .history .subcont .subcont3 .txt2_ja p{
	color:#333333;
	font-size:1.3em;
	letter-spacing:0.02em;
	line-height:2.0;
}

#base .history .subcont .subcont3 .txt2{
	width:84.375%;
	width:92.8%;
	margin-left:auto;
	
	width:auto;
	margin-left:0;
}

#base .history .subcont .subcont3 .txt2 p{
	color:#666666;
	font-size:1.1em;
	letter-spacing:0.04em;
	line-height:2.2;
	
	transform: scale(0.909090);
	transform-origin:100% 50%;
	
	width:110%;
	transform: scale(0.909090);
	transform-origin:0% 0%;
}
}

#base .history .cont .btn{
	position:absolute;
	left:0;
	bottom:0;
}
	
#base .history .cont .btn .more{
	-webkit-transition:opacity .15s linear;
	-o-transition:opacity .15s linear;
	transition:opacity .15s linear;
}
#base.device_pc .history .cont .btn a:hover .more{
	opacity:0.4;
}

#base .history .cont .credit{
	position:absolute;
	right:0;
	bottom:-90px;
	bottom:-100px;
	
	text-align:right;
	line-height:2.0;
}

#base .history .cont .credit .txt1{
	font-size:1.1em;
	letter-spacing:0.04em;
	
	transform: scale(1.05);
	transform-origin:100% 100%;
	opacity:0.9;
}

#base .history .cont .credit .txt2{
	font-size:1.1em;
	letter-spacing:0.0em;
	opacity:0.85;
}

#base .history .cont .credit .slash{
	display:inline-block;
	transform: scaleX(0.6);
	transform-origin:0% 0%;
}

#base .history .cont .pct4{
	position:absolute;
	z-index:5;
	right:calc(8.33333% + 22.22222% + 29.16666% - (3.0vw * 1.0));
	bottom:0;
	width:16.5vw;
}

#base .history .cont .pct4 img{
	width:100%;
	height:auto;
}

@media all and (max-width: 767px){

#base .history .cont .btn{
	position:static;
	margin-top:0px;
	padding-left:25px;
}

#base .history .cont .btn .more{
	margin-left:auto;
	margin-left:0;
}

#base .history .cont .credit{
	left:0;
	right:auto;
	bottom:calc(-8px - (180px - 45px));
	
	padding-top:17px;
	width:calc(100% - 55px - 180px);
	margin-left:25px;
	
	text-align:left;
	line-height:1.8;
	
	transform: scale(0.9);
	transform-origin:0% 0%;
}

#base .history .cont .credit .txt1{
	transform: scale(1.05);
	transform-origin:0% 0%;
}

#base .history .cont .credit .txt2{
	padding-top:3px;
	width:111.11111%;
}

#base .history .cont .pct4{
	bottom:0;
	width:100%;
	left:0;
}

#base .history .cont .pct4 img{
	position:absolute;
	width:180px;
	right:0;
	top:-45px;
}
}

/* collection --------------------------------------------- */

#base .collection{
}

#base .collection .ttl{
	text-align:center;
	padding-top:5.55555vw;
	padding-top:5.0vw;
	padding-top:160px;
	padding-bottom:50px;
}

#base .collection .ttl .ttl1{
	color:#191919;
	font-size:3.5em;
	letter-spacing:0.02em;
}

#base .collection .ttl .ttl2{
	font-size:1.2em;
	letter-spacing:0.04em;
	opacity:0.9;
	padding-top:20px;
}

@media all and (max-width: 767px){
#base .collection .ttl{
	padding-top:5.55555vw;
	padding-top:5.0vw;
	padding-bottom:50px;
	
	padding-top:100px;
	padding-top:160px;
	padding-top:230px;
	padding-bottom:25px;
}

#base .collection .ttl .ttl1{
	font-size:3.0em;
}

#base .collection .ttl .ttl2{
	font-size:1.1em;
	padding-top:18px;
}
}

#base .collection .cont ul li{
	position:relative;
}

#base .collection .cont ul li .pct{
	width:75%;
}
#base .collection .cont ul li:nth-child(2n+1) .pct{
	margin-left:auto;
}
#base .collection .cont ul li:nth-child(2n) .pct{
}

#base .collection .cont ul li .pct .pct2{
	display:none;
}

#base .collection .cont ul li .pct img{
	width:100%;
	height:auto;
}

#base .collection .cont ul li .txt{
	position:absolute;
	top:0;
	width:25%;
	height:100%;
	
}
#base .collection .cont ul li:nth-child(2n+1) .txt{
	left:0;
}
#base .collection .cont ul li:nth-child(2n) .txt{
	right:0;
}

#base .collection .cont ul li .txt .subtxt{
	display:table;
	width:100%;
	height:100%;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt{
	display:table-cell;
	vertical-align:middle;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt{
	width:61.11111%;
	margin:0 auto;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt1{
	width:calc(100% + 5px);
	font-weight:600;
	color:#191919;
	font-size:2.1em;
	letter-spacing:0.02em;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt2{
	width:calc(100% + 5px);
	font-size:1.1em;
	letter-spacing:0.04em;
	padding-top:13px;
	opacity:0.9;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt3{
	width:calc(100% + 5px);
	font-size:1.5em;
	letter-spacing:0.02em;
	line-height:2.0;
	padding-top:45px;
	padding-bottom:12px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt4{
	width:calc(110% + 5px);
	color:#666666;
	font-size:1.1em;
	letter-spacing:0.02em;
	line-height:2.0;
	transform: scale(0.909090);
	transform-origin:0% 0%;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt5{
	padding-top:45px;
	font-weight:600;
	font-size:1.3em;
	letter-spacing:0.04em;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .btn{
	padding-top:53px;
	
	-webkit-transition:opacity .15s linear;
	-o-transition:opacity .15s linear;
	transition:opacity .15s linear;
}
#base.device_pc .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .btn a:hover .more{
	opacity:0.4;
}

@media all and (max-width: 1300px){
#base .collection .cont ul li .pct .pct1{
	display:none;
}

#base .collection .cont ul li .pct .pct2{
	display:block;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt{
	width:71.42857%;
	margin:0 auto;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt1{
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt2{
	padding-top:13px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt3{
	padding-top:45px;
	padding-bottom:12px;
	
	padding-top:25px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt4{
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt5{
	padding-top:45px;
	
	padding-top:15px;
	padding-top:12px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .btn{
	padding-top:53px;
	
	padding-top:23px;
	padding-top:20px;
}
}


@media all and (min-width: 768px) and (max-width: 1120px){
#base .collection .cont ul li .pct{
	width:calc(100% - 280px);
}

#base .collection .cont ul li .txt{
	width:280px;
	
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt{
	width:calc(100% - 80px);
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt1{
	font-size:2.1em;
	
	font-size:1.9em;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt2{
	font-size:1.1em;
	padding-top:13px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt3{
	font-size:1.5em;
	padding-top:45px;
	padding-bottom:12px;
	
	font-size:1.4em;
	padding-top:25px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt4{
	font-size:1.1em;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt5{
	font-size:1.3em;
	padding-top:45px;
	
	font-size:1.2em;
	padding-top:15px;
}
}

@media all and (max-width: 767px){

#base .collection .cont ul li .pct{
	width:100%;
}

#base .collection .cont ul li .pct img{
	width:100%;
	height:auto;
}

#base .collection .cont ul li .txt{
	position:static;
	width:calc(100% - 45px);
	height:auto;
	margin-left:25px;
	padding-bottom:50px;
}
#base .collection .cont ul li:nth-last-child(1) .txt{
	padding-bottom:0px;
}

#base .collection .cont ul li .txt .subtxt{
	height:auto;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt{
	width:100%;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt1{
	font-size:1.8em;
	padding-top:24px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt2{
	padding-top:11px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt3{
	font-size:1.3em;
	padding-top:21px;
	padding-bottom:7px;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt4{
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .txt5{
	padding-top:13px;
	font-size:1.1em;
	text-align:right;
}

#base .collection .cont ul li .txt .subtxt .subsubtxt .subsubsubtxt .btn{
	padding-top:18px;
	display:table;
	margin-left:auto;
}
}

#base .collection .credit{
	padding-right:15px;
	padding-top:17px;
	
	text-align:right;
	line-height:2.0;
}

#base .collection .credit .txt1{
	font-size:1.1em;
	letter-spacing:0.04em;
	
	transform: scale(1.05);
	transform-origin:100% 100%;
	opacity:0.9;
}

#base .collection .credit .txt2{
	font-size:1.1em;
	letter-spacing:0.0em;
	opacity:0.85;
}

#base .collection .credit .slash{
	display:inline-block;
	transform: scaleX(0.6);
	transform-origin:0% 0%;
}

@media all and (max-width: 767px){
#base .collection .credit{
	padding-right:0;
	padding-top:17px;
	padding-top:35px;
	width:calc(100% - 45px);
	margin-left:25px;
	
	text-align:left;
	line-height:1.8;
	
	transform: scale(0.9);
	transform-origin:0% 0%;
}

#base .collection .credit .txt1{
	transform: scale(1.05);
	transform-origin:0% 0%;
}

#base .collection .credit .txt2{
	padding-top:3px;
	width:111.11111%;
}
}

/* column --------------------------------------------- */

#base .column{
	padding:220px 0 240px;
	padding:230px 0 200px;
	padding:230px 0 220px;
}

#base .column .subsec .subsubsec ul{
	display:table;
	width:100%;
	position:relative;
	
	-webkit-transition:opacity .2s linear;
	-o-transition:opacity .2s linear;
	transition:opacity .2s linear;
}
#base.device_pc .column a:hover .subsec .subsubsec ul{
	opacity:0.65;
}

#base .column .subsec .subsubsec ul li{
	display:table-cell;
	width:20%;
	position:relative;
}

#base .column .subsec .subsubsec ul li .thum{
}

#base .column .subsec .subsubsec ul li .thum img{
	width:100%;
	height:auto;
}

#base .column .subsec .subsubsec ul li .cont{
	position:absolute;
	left:0;
	top:0;
	background:url(../img/common/txr2.jpg);
	width:100%;
	height:100%;
}

#base .column .subsec .subsubsec ul li .cont .subcont{
	width:calc(100% - 14px);
	height:calc(100% - 14px);
	margin:7px;
	box-sizing: border-box;
	border:solid 1px rgba(0,0,0,0.5);
	display:table;
}

#base .column .subsec .subsubsec ul li .cont .subcont .ttl{
	display:table-row;
}

#base .column .subsec .subsubsec ul li .cont .subcont .ttl .sub{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	height:auto;
	position:relative;
}

#base .column .subsec .subsubsec ul li .cont .subcont .ttl .sub .ja{
	font-size:3.5em;
	color:#191919;
	letter-spacing:0.02em;
	padding-top:2px;
}

#base .column .subsec .subsubsec ul li .cont .subcont .ttl .sub .en{
	font-size:1.2em;
	letter-spacing:0.04em;
	padding-top:20px;
}

#base .column .subsec .subsubsec ul li .cont .subcont .ttl .sub .bdr{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:calc(100% - 24px);
	height:1px;
	overflow:hidden;
	background:rgba(0,0,0,0.25);
}

#base .column .subsec .subsubsec ul li .cont .subcont .btn{
	display:table-row;
}

#base .column .subsec .subsubsec ul li .cont .subcont .btn .sub{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	height:81px;
	position:relative;
}

#base .column .subsec .subsubsec ul li .cont .subcont .btn .sub p{
	font-weight:600;
	font-size:1.6em;
	color:#191919;
	letter-spacing:0.04em;
	padding-right:20px;
}

#base .column .subsec .subsubsec ul li .cont .subcont .btn .sub .icn{
	position:absolute;
	left:90px;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:19px;
	height:19px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	overflow:hidden;
	box-sizing: border-box;
	border:solid 1px rgba(0,0,0,0.3);
}

#base .column .subsec .subsubsec ul li .cont .subcont .btn .sub .icn img{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:15px;
	height:15px;
}

@media all and (min-width: 1600px){
#base .column .subsec{
	overflow:visible;
	height:auto;
}
}

@media all and (max-width: 1600px) and (min-width: 1501px){
#base .column .subsec{
	overflow:hidden;
	position:relative;
	width:100%;
	height:320px;
}

#base .column .subsec .subsubsec{
	position:absolute;
	top:0;
	left:calc(50% - 800px);
	width:1600px;
	height:320px;
}

#base .column .subsec .subsubsec img{
}
}

@media all and (max-width: 1500px) and (min-width: 1401px){
#base .column .subsec{
	overflow:hidden;
	position:relative;
	width:100%;
	height:300px;
}

#base .column .subsec .subsubsec{
	position:absolute;
	top:0;
	left:calc(50% - 750px);
	width:1500px;
	height:300px;
}
}

@media all and (max-width: 1400px) and (min-width: 1301px){
#base .column .subsec{
	overflow:hidden;
	position:relative;
	width:100%;
	height:280px;
}

#base .column .subsec .subsubsec{
	position:absolute;
	top:0;
	left:calc(50% - 700px);
	width:1400px;
	height:280px;
}
}

@media all and (max-width: 1300px) and (min-width: 1201px){
#base .column .subsec{
	overflow:hidden;
	position:relative;
	width:100%;
	height:260px;
}

#base .column .subsec .subsubsec{
	position:absolute;
	top:0;
	left:calc(50% - 650px);
	width:1300px;
	height:260px;
}
}

@media all and (max-width: 1200px) and (min-width: 668px){
#base .column .subsec{
	overflow:hidden;
	position:relative;
	width:100%;
	height:240px;
}

#base .column .subsec .subsubsec{
	position:absolute;
	top:0;
	left:calc(50% - 600px);
	width:1200px;
	height:240px;
}
}

@media all and (max-width: 667px){
#base .column{
	padding:40px 0 110px;
	padding:85px 0 85px;
}

#base .column .subsec .subsubsec ul li{
	display:block;
	width:50%;
}
#base .column .subsec .subsubsec ul li:nth-child(1),
#base .column .subsec .subsubsec ul li:nth-child(5){
	float:right;
}
#base .column .subsec .subsubsec ul li:nth-child(2),
#base .column .subsec .subsubsec ul li:nth-child(4){
	float:left;
}
#base .column .subsec .subsubsec ul li:nth-child(3){
	position:absolute;
	z-index:10;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width:56vw;
	height:56vw;
	width:50vw;
	height:50vw;
}

#base .column .subsec .subsubsec ul li .cont .subcont .ttl .sub .ja{
	font-size:2.5em;
	padding-top:0px;
}

#base .column .subsec .subsubsec ul li .cont .subcont .ttl .sub .en{
	font-size:1.1em;
	padding-top:13px;
}

#base .column .subsec .subsubsec ul li .cont .subcont .ttl .sub .bdr{
	width:calc(100% - 20px);
}

#base .column .subsec .subsubsec ul li .cont .subcont .btn .sub{
	height:55px;
}

#base .column .subsec .subsubsec ul li .cont .subcont .btn .sub p{
	font-size:1.2em;
	padding-right:8px;
}

#base .column .subsec .subsubsec ul li .cont .subcont .btn .sub .icn{
	left:80px;
	width:17px;
	height:17px;
}
}

#base .column .credit{
	padding-right:15px;
	padding-top:17px;
	
	text-align:right;
	line-height:2.0;
}

#base .column .credit .txt1{
	font-size:1.1em;
	letter-spacing:0.04em;
	
	transform: scale(1.05);
	transform-origin:100% 100%;
	opacity:0.9;
}

#base .column .credit .txt2{
	font-size:1.1em;
	letter-spacing:0.0em;
	opacity:0.85;
}

#base .column .credit .slash{
	display:inline-block;
	transform: scaleX(0.6);
	transform-origin:0% 0%;
}

@media all and (max-width: 767px){
#base .column .credit{
	padding-right:0;
	padding-top:20px;
	width:calc(100% - 45px);
	margin-left:25px;
	
	text-align:left;
	line-height:1.8;
	
	transform: scale(0.9);
	transform-origin:0% 0%;
}

#base .column .credit .txt1{
	transform: scale(1.05);
	transform-origin:0% 0%;
}

#base .column .credit .txt2{
	padding-top:3px;
	width:111.11111%;
}
}