@charset "UTF-8";

body {
	font-family: "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,"MS UI Gothic","Tahoma","Lucida Grande","ヒラギノ丸ゴ Pro W4",sans-serif;
/*
	font-family: MyYuGothicM,YuGothic,"Yu Gothic","ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,"MS UI Gothic","Tahoma","Lucida Grande","ヒラギノ丸ゴ Pro W4",sans-serif;
*/
}

@font-face {
	font-family: 'MyYuGothicM';
	font-weight: normal;
	src: local('YuGothic-Medium'),local('Yu Gothic Medium'),local('YuGothic-Regular');
}

@font-face {
	font-family: 'MyYuGothicM';
	font-weight: bold;
	src: local('YuGothic-Bold'),local('Yu Gothic');
}

@font-face {
	font-family: 'MyYuGothicM';
	font-weight: bolder;
	src: local('YuGothic-Bold'),local('Yu Gothic');
}


.appBtn{margin-top:30px;text-align:center;}
.appBtn .btnRD{width:600px;padding:30px 0!important;}
.appBtn .fs25{font-size:25px!important;}
/* .mv
------------------------------------------------------------ */
.mv {
	position: relative;
	width: 100%;
	min-width: 950px;
}

.mv .mv-bg {
	position: relative;
	z-index: 0;
	opacity: 0;
}

.mv.on .mv-bg {
	opacity: 1.0;
	transition: opacity 2000ms 350ms linear;
}

.mv .mv-bg ul {
	position: relative;
	z-index: 0; 
}

.mv .mv-bg ul li {
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}


.mv .movie {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.mv .movie .container {
	position: absolute;
	z-index: 0;
	box-sizing: border-box;
}

.mv .movie .container iframe {
	width: 100%;
	height: 100%;
}

.mv .movie .layer {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}


.mv .mvInr {
	position: absolute;
	z-index: 9;
	left: 0;
	right: 0;
	width: 950px;
	height: 100%;
	margin: 0 auto;
}

.mv .logo_special {
	position: absolute;
	left: 0;
	top: 20px;
	z-index: 10;
}

.mv .head {
	position: relative;
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}

.mv .head .head-container {
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	padding-top: 60px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 1000ms 2350ms linear;
}

.mv.on .head .head-container {
	opacity: 1.0;
}

.mv .head .head-container h1 {
}

.mv .head .head-container .mv-copy {
}

.mv .head .head-container .mv-anchor {
	margin-top: 30px;
}

.mv .head .head-container .mv-anchor a {
}

.mv .head .head-container .mv-anchor a:hover {
	opacity: 0.5;
}

/*
.mv .head .head-container .mv-anchor a img {
	animation: scroll_icon 1350ms 0ms linear infinite;
}
*/

@keyframes scroll_icon {
	0%		{ opacity: 0; transform: translateY(-15px); }
	40%		{ opacity: 1.0; transform: translateY(0); }
	80%		{ opacity: 0; transform: translateY(15px); }
	100%	{ opacity: 0; transform: translateY(15px); }
}


/* .main-contents
------------------------------------------------------------ */
.main-contents {
	position: relative;
	padding-top: 110px;
	background-image: url(../img/bg_concept.png);
	background-repeat: no-repeat;
	background-position: center 660px;
	/*background-position: center 265px;*/
}


/* .gnav
------------------------------------------------------------ */
.gnav {
	position: absolute;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 950px;
	background-color: #efeeea;
}

.gnav.fix {
	position: fixed;
	left: 0;
	top: 0;
}

.gnav ul {
	width: 830px;
	margin: 0 auto;
}

.gnav ul li {
	float: left;
	margin-right: 20px;
	font-size: 0;
}

.gnav ul li:last-child {
	margin-right: 0;
}

.gnav ul li.current {
	border-bottom: #cc0000 solid 4px;
}

.gnav ul li a {
	display: block;
	opacity: 0.4;
	border-bottom: rgba(204,0,0,0.00) solid 4px;
	transition: 200ms;
}

.gnav ul li a:hover {
	opacity: 1.0;
	border-bottom: rgba(204,0,0,1.00) solid 4px;
}

.gnav ul:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}


/* .snav
------------------------------------------------------------ */
.snav {
	position: fixed;
	z-index: 99;
	right: -50px;
	top: 0;
	transition: right 350ms 0ms ease-in-out;
}

.snav.on {
	right: 0;
}

.snav ul {
}

.snav ul li {
	margin-bottom: 10px;
}

.snav ul li:last-child {
	margin-bottom: 0;
}

.snav ul li a {
	transition: 200ms;
}

.snav ul li a:hover {
	opacity: 0.5;
}


/* .concept
------------------------------------------------------------ */
.concept {
	text-align: center;
	height: 980px;
	/*height: 585px;*/
	padding-top: 90px;
	box-sizing: border-box;
}

.concept .concept-txt {
	margin-bottom: 60px;
}

.concept .concept-txt > p {
	font-size: 18px;
	font-weight: bolder;
	line-height: 1.8em;
	letter-spacing: 0.1em;
	color: #1f120b;
	margin-bottom: 20px;
	opacity: 0;
	transition: opacity 500ms 0ms linear;
}

.concept .concept-txt > p.on {
	opacity: 1.0;
}

.concept .concept-txt > p:last-of-type {
	margin-bottom: 0;
}

.concept .movie-head {
	font-size: 34px;
	font-weight: bolder;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	color: #1f120b;
	opacity: 0;
	transition: opacity 500ms 0ms linear;
}

.concept .movie-head.on {
	opacity: 1.0;
}

.concept .btn-movie {
	width: 560px;
	height: 315px;
	margin: 0 auto;
	margin-top: 80px;
	background-color: #ffffff;
	opacity: 0;
	transition: opacity 500ms 0ms linear;
}

.concept .btn-movie.on {
	opacity: 1.0;
}

.concept .btn-movie a {
	display: block;
	position: relative;
	outline: none;
	opacity: 1.0;
	transition: 0.2s;
}

.concept .btn-movie a:hover {
	opacity: 0.6;
}

.concept .btn-movie a img.btn_icon {
	position: absolute;
	left: calc(50% - 45px);
	top: calc(50% - 45px);
}


/* .lifestage
------------------------------------------------------------ */
.lifestage {
	position: relative;
	width: 100%;
	min-width: 950px;
	height: 3560px;
	overflow: hidden;
	box-sizing: border-box;
	background-image: url(../img/bg_lifestage.png);
	background-repeat: repeat-x;
	background-position: center center;
}

.lifestage .lifestageInr {
	position: relative;
	z-index: 9;
	width: 950px;
	margin: 0 auto;
	text-align: center;
	padding-top: 230px;
	box-sizing: border-box;
}

.lifestage section {
	position: relative;
	height: 800px;
	padding-top: 62px;
	box-sizing: border-box;
}

.lifestage section .head {
	position: relative;
	z-index: 9;
	margin: 0 auto;
	font-size: 0;
}

.lifestage section.clm-1 .head {
	width: 386px;
}

.lifestage section.clm-2 .head {
	width: 449px;
}

.lifestage section.clm-3 .head {
	width: 386px;
}

.lifestage section.clm-4 .head {
	width: 506px;
}

.lifestage section .head h1 {
	position: relative;
	z-index: 1;
	margin-bottom: 16px;
}

.lifestage section .head h1 .numbering {
	margin-bottom: 6px;
	opacity: 0;
	transform: translateY(-60px);
	transition: opacity 350ms 0ms linear, transform 1000ms 0ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lifestage section.on .head h1 .numbering {
	opacity: 1.0;
	transform: translateY(0);
}

.lifestage section .head h1 .ttl {
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 350ms 0ms linear, transform 1000ms 0ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lifestage section.on .head h1 .ttl {
	opacity: 1.0;
	transform: translateY(0);
}

.lifestage section .head .txt {
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: opacity 500ms 0ms linear;
}

.lifestage section.on .head .txt {
	opacity: 1.0;
}

.lifestage section .head .bg {
	position: absolute;
	z-index: 0;
	/*opacity: 0;
	transition: opacity 350ms 0ms linear;*/
}

/*.lifestage section.on .head .bg {
	opacity: 1.0;
}*/

.lifestage section.clm-1 .head .bg {
	left: -114px;
	top: -4px;
	width: 180px;
	height: 198px;
	background: url(../img/bg_lifestage-ttl_01.png) left top no-repeat;
}

.lifestage section.clm-2 .head .bg {
	left: 380px;
	top: -22px;
	width: 158px;
	height: 177px;
	background: url(../img/bg_lifestage-ttl_02.png) left top no-repeat;
}

.lifestage section.clm-3 .head .bg {
	left: -86px;
	top: -8px;
	width: 162px;
	height: 156px;
	background: url(../img/bg_lifestage-ttl_03.png) left top no-repeat;
}

.lifestage section.clm-4 .head .bg {
	left: 398px;
	top: -14px;
	width: 165px;
	height: 193px;
	background: url(../img/bg_lifestage-ttl_04.png) left top no-repeat;
}

.lifestage section .pics {
	position: relative;
	z-index: 0;
	height: 442px;
	box-sizing: border-box;
}

.lifestage section .pics figure {
	position: absolute;
	opacity: 0;
	transform: scale(1.35 ,1.35);
	transition: opacity 350ms 0ms linear, transform 800ms 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lifestage section.on .pics figure {
	opacity: 1.0;
	transform: scale(1.0 ,1.0);
}

.lifestage section.clm-1 .pics figure.pic-1 {
	z-index: 3;
	left: 104px;
	top: 20px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-1 .pics figure.pic-2 {
	z-index: 1;
	left: 580px;
	top: -12px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-1 .pics figure.pic-3 {
	z-index: 2;
	left: 624px;
	top: 166px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-2 .pics figure.pic-1 {
	z-index: 3;
	left: 338px;
	top: 12px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-2 .pics figure.pic-2 {
	z-index: 2;
	left: 102px;
	top: -8px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-2 .pics figure.pic-3 {
	z-index: 1;
	left: 64px;
	top: 166px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-3 .pics figure.pic-1 {
	z-index: 3;
	left: 98px;
	top: 22px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-3 .pics figure.pic-2 {
	z-index: 1;
	left: 610px;
	top: 22px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-3 .pics figure.pic-3 {
	z-index: 2;
	left: 574px;
	top: 190px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-4 .pics figure.pic-1 {
	z-index: 3;
	left: 350px;
	top: 20px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-4 .pics figure.pic-2 {
	z-index: 2;
	left: 68px;
	top: 34px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section.clm-4 .pics figure.pic-3 {
	z-index: 1;
	left: 136px;
	top: 208px;
	transition-delay: 1250ms, 1000ms;
}

.lifestage section .foot {
	position: relative;
	opacity: 0;
	/*transform: translateY(80px);*/
}

.lifestage section.on .foot {
	opacity: 1.0;
	transform: translateY(0);
	transition: opacity 500ms 1600ms linear/*, transform 800ms 1600ms cubic-bezier(0.215, 0.61, 0.355, 1)*/;
}

.lifestage section .foot a {
	position: relative;
	display: block;
	width: 250px;
	height: 50px;
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 0;
}

.lifestage section .foot a .btn-lb {
	position: relative;
	z-index: 9;
	width: 250px;
	height: 50px;
	box-sizing: border-box;
	border: #000000 solid 1px;
	background-color: #ffffff;
	transform: translate(0, 0);
	transition: 0.35s;
}

.lifestage section .foot a:hover .btn-lb {
	border-color: rgba(0,0,0,0.00);
	background-color: #231815;
	transform: translate(6px, 6px);
}

.lifestage section .foot a .btn-lb img {
	position: relative;
	z-index: 9;
	transition: 0.35s;
}

.lifestage section .foot a .btn-lb img.off {
	opacity: 1.0;
}

.lifestage section .foot a .btn-lb img.on {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

.lifestage section .foot a:hover .btn-lb img.off {
	opacity: 0;
}

.lifestage section .foot a:hover .btn-lb img.on {
	opacity: 1.0;
}

.lifestage section .foot a .bg {
	position: absolute;
	z-index: 0;
	left: 6px;
	top: 6px;
	width: 250px;
	height: 50px;
	box-sizing: border-box;
	background: url(../img/btn_lifestage-base.png) left top no-repeat;
	/*transform: translate(-6px, -6px);*/
}

/*.lifestage section.on .foot a .bg {
	transform: translate(0, 0);
	transition: transform 850ms 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}*/


.lifestage section .foot .bg-map {
	position: absolute;
}

.lifestage section.clm-1 .foot .bg-map {
	right: 200px;
	top: -36px;
}

.lifestage section.clm-2 .foot .bg-map {
	right: 200px;
	top: -36px;
}

.lifestage section.clm-3 .foot .bg-map {
	right: 216px;
	top: -36px;
}

.lifestage section.clm-4 .foot .bg-map {
	right: 216px;
	top: -36px;
}



/* .bg-lifestage
------------------------------------------------------------ */
.lifestage .bg-lifestage {
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: 0;
	width: 950px;
	height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.lifestage .bg-lifestage .lines {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.lifestage .bg-lifestage .lines figure {
	position: absolute;
	overflow: hidden;
}

.lifestage .bg-lifestage .lines figure.line-h-right {
	left: 1150px;
	top: 206px;
	/*width: calc(100% - 675px);*/
	height: 56px;
	background: url(../img/parts_lifestage_line-h_right.png) left center repeat-x;
}

.lifestage .bg-lifestage .lines figure.line-h-1 {
	right: -200px;
	top: 206px;
	width: 1295px;
	height: 56px;
}

.lifestage .bg-lifestage .lines figure.line-v-1 {
	left: -200px;
	top: 262px;
	width: 76px;
	height: 745px;
}

.lifestage .bg-lifestage .lines figure.line-h-2 {
	left: -200px;
	top: 1007px;
	width: 1295px;
	height: 55px;
}

.lifestage .bg-lifestage .lines figure.line-v-2 {
	right: -200px;
	top: 1062px;
	width: 76px;
	height: 744px;
}

.lifestage .bg-lifestage .lines figure.line-h-3 {
	right: -200px;
	top: 1806px;
	width: 1295px;
	height: 56px;
}

.lifestage .bg-lifestage .lines figure.line-v-3 {
	left: -200px;
	top: 1862px;
	width: 76px;
	height: 744px;
}

.lifestage .bg-lifestage .lines figure.line-h-4 {
	left: -200px;
	top: 2606px;
	width: 1295px;
	height: 55px;
}

.lifestage .bg-lifestage .lines figure.line-v-4 {
	right: -200px;
	top: 2661px;
	width: 76px;
	height: 745px;
}

.lifestage .bg-lifestage .lines figure.line-h-5 {
	right: -200px;
	top: 3406px;
	width: 2350px;
	height: 55px;
}

.lifestage .bg-lifestage .lines figure img {
	position: absolute;
	top: 0;
}

.lifestage .bg-lifestage .lines figure img.side-r {
	right: 0;
}

.lifestage .bg-lifestage .lines figure img.side-l {
	left: 0;
}

.lifestage .bg-lifestage .icos {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.lifestage .bg-lifestage .icos figure {
	position: absolute;
}

.lifestage .bg-lifestage .icos figure.ico-1-1 {
	left: -101px;
	top: 277px;
}

.lifestage .bg-lifestage .icos figure.ico-2-1 {
	left: -84px;
	top: 897px;
}

.lifestage .bg-lifestage .icos figure.ico-2-2 {
	right: -41px;
	top: 956px;
}

.lifestage .bg-lifestage .icos figure.ico-2-3 {
	right: -105px;
	top: 1087px;
}

.lifestage .bg-lifestage .icos figure.ico-3-1 {
	right: -51px;
	top: 1668px;
}

.lifestage .bg-lifestage .icos figure.ico-3-2 {
	left: -44px;
	top: 1723px;
}

.lifestage .bg-lifestage .icos figure.ico-4-1 {
	left: -83px;
	top: 2497px;
}

.lifestage .bg-lifestage .icos figure.ico-4-2 {
	right: -41px;
	top: 2508px;
}

.lifestage .bg-lifestage .icos figure.ico-4-3 {
	right: -89px;
	top: 3260px;
}

.lifestage .bg-lifestage .icos figure.ico-4-4 {
	left: -87px;
	top: 3334px;
}


.lifestage .bg-lifestage .airplanes {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.lifestage .bg-lifestage .airplanes figure {
	position: absolute;
	opacity: 0;
	transition-property: all;
	transition-duration: 800ms;
	transition-delay: 0ms;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lifestage .bg-lifestage .airplanes figure.airplane-1 {
	right: 194px;
	top: 206px;
	transform: translateX(100px);
	transition-delay: 250ms;
}

.lifestage .bg-lifestage .airplanes figure.airplane-2 {
	left: 222px;
	top: 1007px;
	transform: translateX(-100px);
	transition-delay: 250ms;
}

.lifestage .bg-lifestage .airplanes figure.airplane-3 {
	right: 762px;
	top: 1806px;
	transform: translateX(100px);
	transition-delay: 850ms;
}

.lifestage .bg-lifestage .airplanes figure.airplane-4 {
	left: 303px;
	top: 2606px;
	transform: translateX(-100px);
	transition-delay: 350ms;
}

.lifestage .bg-lifestage .airplanes figure.airplane-5 {
	right: 131px;
	top: 3406px;
	transform: translateX(100px);
	transition-delay: 200ms;
}

.lifestage .bg-lifestage .airplanes figure.on {
	opacity: 1.0;
	transform: translateX(0);
}


/* .cv
------------------------------------------------------------ */
.contents .cv {
	padding: 80px 0 80px 0;
	text-align: center;
	position: relative;
}

.contents .cv:after {
	background: url(../common/img/bg_cv.jpg) center center no-repeat;
	background-size: 100% auto;
	content: "";
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	opacity: 0.4;
}

.contents .cv .txt {
	font-size: 32px;
	font-weight: bolder;
	line-height: 1.5em;
	color: #1f120b;
	margin-bottom: 25px;
	position: relative;
	z-index: 2;
}
.contents .cv .appBtn {
	position: relative;
	z-index: 2;
}

.contents .cv a {
	transition: 200ms;
}

.contents .cv a:hover {
	opacity: 0.5;
}


/* .campaign
------------------------------------------------------------ */
.contents .campaign {
	text-align: center;
	background-color: #efedea;
}

.contents .campaign a {
	display: block;
	padding: 80px 0 80px 0;
}
.bnr-clm .col {
    display: table-cell;
    padding: 0 15px;
    vertical-align: top;
}

/* .copyright
------------------------------------------------------------ */
footer .copyright small {
	width: 100%;
	text-align: center;
}


/* .mfp
------------------------------------------------------------ */
.mfp-bg {
	opacity: 0;
	transition: all 0.2s ease-out;
}

.mfp-bg.mfp-ready {
	opacity: 0.8;
}

.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-wrap .mfp-content {
	opacity: 0;
	transition: all 0.2s ease-out;
}

.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1.0;
}

.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

.col_wid270 {
	width: 270px !important;
}

.clm_wid570 {
	width: 570px !important;
	margin: 0 auto;
}