@charset "UTF-8";
/*==============================================

    THEME CONCEPT

==============================================*/
.concept .l-header {
	z-index: 25;
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#fullpage {
	opacity: 0;
	-webkit-transition: opacity .5s ease 0s;
	transition: opacity .5s ease 0s;
}

.js-active#fullpage {
	opacity: 1;
}

.t-head {
	position: relative;
	margin-bottom: 1.5em;
	padding-left: 1.25em;
	font-weight: bold;
	font-size: 1.28571rem;
	line-height: 1.44444;
}

@media screen and (min-width: 769px) {
	.t-head {
		font-size: 1.33333rem;
		line-height: 1.5;
	}
}

.t-head::before {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	width: 5px;
	height: 100%;
	background-color: #ca186c;
}

.t-movie video {
	width: 100%;
	outline: none;
}

@media screen and (min-width: 840px) {

	.t-movie.mw520 {
		max-width: 520px;
		margin:0 auto;
	}
	
}

.c-h1 {
	line-height: 1;
}
.c-lead {
	margin-top: 2em;
}

@media screen and (max-width: 768px){
	.c-hero--xy__center {
		top: 60%;
	}
}
@media screen and (min-width: 769px){
	.c-hero--xy__center {
		top: 45%;
	}
	.c-hero__bg {
		height: 640px
	}
}


/*==============================================
    9-1. CONCEPT MESSAGE SECTIOIN
==============================================*/
.t-section {
	position: relative;
	width: 100%;
	margin: auto;
	overflow: hidden;
}

@media screen and (min-width: 769px) {
	.t-section {
		max-width: 1400px;
		margin: 0 auto;
	}
}

.t-section--1 {
	background: transparent url(../../concept/image/img_message_page01_sp.jpg) no-repeat scroll center center;
	background-size: cover;
}

@media screen and (min-width: 769px) {
	.t-section--1 {
		background: transparent url(../../concept/image/img_message_page01_pc.jpg) no-repeat scroll center center;
	}
}

.t-section--2 {
	background: transparent url(../../concept/image/img_message_page02_sp.jpg) no-repeat scroll center center;
	background-size: cover;
}

@media screen and (min-width: 769px) {
	.t-section--2 {
		background: transparent url(../../concept/image/img_message_page02_pc.jpg) no-repeat scroll bottom center;
	}
}

.t-section--3 {
	background: transparent url(../../concept/image/img_message_page03_sp.jpg) no-repeat scroll center center;
	background-size: cover;
}

@media screen and (min-width: 769px) {
	.t-section--3 {
		background: transparent url(../../concept/image/img_message_page03_pc.jpg) no-repeat scroll center center;
	}
}

.t-section--4 {
	background: transparent url(../../concept/image/img_message_page04_sp.jpg) no-repeat scroll center center;
	background-size: cover;
}

@media screen and (min-width: 769px) {
	.t-section--4 {
		background: transparent url(../../concept/image/img_message_page04_pc.jpg) no-repeat scroll center center;
	}
}

.t-section--5 {
	background: transparent url(../../concept/image/img_message_page05_sp.jpg) no-repeat scroll center center;
	background-size: cover;
}

@media screen and (min-width: 769px) {
	.t-section--5 {
		background: transparent url(../../concept/image/img_message_page05_pc.jpg) no-repeat scroll center center;
	}
}

.t-section--6 {
	background: #ffffff none no-repeat scroll center center;
	background-size: cover;
}

.t-pp-nav--frame {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 769px) {
	.t-pp-nav--frame {
		max-width: 1400px;
		min-width: 1000px;
	}
}

.t-section__next {
	opacity: 1;
	position: absolute;
	width: 30px;
	top: calc(50% + 180px);
	right: 18px;
	-webkit-transition: all 1s ease .4s;
	transition: all 1s ease .4s;
}

@media screen and (min-width: 480px) {
	.t-section__next {
		top: calc(50% + 160px);
	}
}

@media screen and (min-width: 769px) {
	.t-section__next {
		top: calc(50% + 210px);
		right: 20px;
	}
}

.t-section__next a {
	color: #ffffff;
}

.active.t-section .t-section__next {
	opacity: 1;
}

/*==============================================
    9-2. CONCEPT MESSAGE SECTIOIN PHRASE
==============================================*/
.t-section--1 .t-section__phrase {
	position: absolute;
	top: calc(48px + 8%);
	left: 10%;
}

@media screen and (min-width: 480px) {
	.t-section--1 .t-section__phrase {
		top: calc(48px + 15%);
	}
}

@media screen and (min-width: 769px) {
	.t-section--1 .t-section__phrase {
		top: calc(64px + 14%);
	}
}

.t-section--2 .t-section__phrase {
	position: absolute;
	top: calc(48px + 8%);
	left: 10%;
}

@media screen and (min-width: 480px) {
	.t-section--2 .t-section__phrase {
		top: calc(48px + 15%);
	}
}

@media screen and (min-width: 769px) {
	.t-section--2 .t-section__phrase {
		top: calc(64px + 14%);
	}
}

.t-section--3 .t-section__phrase {
	position: absolute;
	top: calc(48px + 20%);
	left: 10%;
}

@media screen and (min-width: 769px) {
	.t-section--3 .t-section__phrase {
		top: calc(64px + 34%);
	}
}

.t-section--4 .t-section__phrase {
	position: absolute;
	top: calc(48px + 8%);
	left: 10%;
}

@media screen and (min-width: 480px) {
	.t-section--4 .t-section__phrase {
		top: calc(48px + 15%);
	}
}

@media screen and (min-width: 769px) {
	.t-section--4 .t-section__phrase {
		top: calc(64px + 14%);
	}
}

.t-section--5 .t-section__phrase {
	position: absolute;
	top: calc(48px + 50%);
	left: 10%;
}

@media screen and (min-width: 769px) {
	.t-section--5 .t-section__phrase {
		top: calc(64px + 34%);
	}
}

.t-section__phrase {
	color: #ffffff;
	-webkit-transition: all .5s ease .5s;
	transition: all .5s ease .5s;
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "メイリオ", serif;
	font-weight: 400;
	font-size: 1.07143rem;
	line-height: 2.33333;
}

@media screen and (min-width: 769px) {
	.t-section__phrase {
		font-size: 1.4rem;
		line-height: 2.09524;
	}
}

.t-section .t-section__phrase {
	opacity: 0;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all .8s ease .4s;
	transition: all .8s ease .4s;
}

.active.t-section .t-section__phrase {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/*==============================================
    9-3. CONCEPT MESSAGE SECTIOIN LAST CONTENT
==============================================*/
.t-section__content {
	width: 54%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media screen and (min-width: 480px) {
	.t-section__content {
		width: 42%;
	}
}

@media screen and (min-width: 769px) {
	.t-section__content {
		width: 344px;
		top: calc(55px + 42%);
	}
}

.t-section__content__logo {
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	margin-bottom: 3em;
	-webkit-transition: all .6s ease .6s;
	transition: all .6s ease .6s;
}

@media screen and (min-width: 769px) {
	.t-section__content__logo {
		margin-bottom: 4em;
	}
}

.t-section__content__onemore {
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	text-align: center;
	display: block;
	margin-bottom: 1em;
	-webkit-transition: all .6s ease .8s;
	transition: all .6s ease .8s;
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "メイリオ", serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
}

@media screen and (min-width: 769px) {
	.t-section__content__onemore {
		margin-bottom: 1.5em;
		font-size: 1.2rem;
		line-height: 1.5;
	}
}

.t-section__content__backhome {
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	text-align: center;
	display: block;
	-webkit-transition: all .6s ease .8s;
	transition: all .6s ease .8s;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
}

@media screen and (min-width: 769px) {
	.t-section__content__backhome {
		font-size: 0.93333rem;
		line-height: 1.5;
	}
}

.t-section__content__backhome span {
	position: relative;
}

.t-section__content__backhome span::before {
	content: '';
	background: transparent url(../../concept/image/icon_arrow_black_left.png) no-repeat scroll center center;
	background-size: cover;
	width: 4px;
	height: 8px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: -16px;
}

.active.t-section .t-section__content__logo {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.active.t-section .t-section__content__onemore {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.active.t-section .t-section__content__backhome {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/*==============================================
    9-X. CONCEPT LYAOUT & COMPONENT(PREDEFINED)
==============================================*/
.t-pagenation--cover {
	z-index: 20 !important;
	position: fixed;
	width: 100%;
	top: 44%;
	right: auto;
	opacity: 1;
}

@media screen and (min-width: 769px) {
	.t-pagenation--cover {
		z-index: 20;
		position: fixed;
		width: 100%;
		max-width: 1400px;
		top: 50%;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
}

.t-pagenation {
	position: absolute;
	right: 2em;
}

.t-pagenation li {
	list-style-type: none;
	margin-bottom: 24px;
}

.t-pagenation a {
	display: block;
	width: 8px;
	height: 8px;
	border: 1px solid #ffffff;
	border-radius: 100px;
	cursor: pointer;
}

.t-pagenation a.active {
	background: #ffffff;
}



.movie-box {
	width:100%;
	margin:0 auto 50px;
}
.movie-box .t-movie{
	position:relative;
}
.movie-box .t-movie .playicon {
	content: '';
	display:none;
	width: 100%;
	height: 100%;
	margin:auto;
	background: url(../../concept/image/icon_play.png) no-repeat 50% 50% ;
	background-size: 72px auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index:10;
}
.movie-box .t-movie.off .playicon {
	display:block;
}
.movie-box video{
	width:100%;
	outline: none;
}

@media screen and (min-width: 769px) {

	.movie-box {
		width:90%;
		margin-bottom:100px;
	}

}