@charset "utf-8";

body{background: #1B282C;overflow-x: hidden;}
h1,h2,h3,h3,p{line-height: 1.5;}

.bg_white{background: #fff !important;}
.bg_F5F5F5{background: #f5f5f5 !important;}

.fcWhite{color: #fff;}

.link_border{text-decoration: underline !important;}
.link_border:hover{text-decoration: none !important;}

.hover_goRight span{transition: all 300ms;}
.hover_goRight span:hover{opacity: 0.8;}
.hover_goRight:hover span:after{
	overflow: hidden;
	animation: goRight 1s cubic-bezier(0.9, 0.1, 0.3, 0.9);
	animation-fill-mode: forwards;
}

@keyframes goRight{
	0%{opacity:0.6;transform: scale(0, 1);transform: translateX(-10px);}
	100%{opacity:1;transform: scale(1, 1);transform: translateX(0);}
}/* ----goRight */

.hover_goTop:hover span img{
	animation: goTop 1.5s cubic-bezier(0.9, 0.1, 0.3, 0.9);
	animation-iteration-count: infinite;
}

@keyframes goTop{
	0%{opacity:0;transform: translateY(20px);}
	100%{opacity:1;}
}/* ----goTop */

.hover_opacity{transition: 300ms;}
.hover_opacity:hover{opacity: 0.8;}

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

	.hover_goRight span:hover{opacity: 1;}
	.hover_opacity:hover{opacity: 1;}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ etc */

/* ############################### ttl */

.ttl_nml{
	text-align: center;
	padding-bottom: 20px;
}

.ttl_nml em{
	position: relative;
	font-size: 3.0rem;
	font-weight: bold;
	display: inline-block;
}

.ttl_nml em:before{
	content: '';
	position: absolute;
	display: block;
	background: #BF904A;
	bottom: -20px;
	left: 50%;
	margin-left: -20px;
	width: 40px;
	height: 2px;
	background-size: contain;
}

/* ############################### btn */

.btn_nml{
	display: inline-block;
	border: 1px solid #121318;
	text-align: center;
	position: relative;
	text-decoration: none;
}

.btn_nml:before{
	content: '';
	position: absolute;
	display: block;
	background: #121318;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-size: contain;
	transition: 300ms;
}

.btn_nml span{
	font-size: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 380px;
	height: 80px;
	padding: 40px;
	position: relative;
}

.btn_nml span:after{
	content: '';
	position: absolute;
	display: block;
	background: url(/common/img/arw_nml_r.png) no-repeat center;
	top: 50%;
	margin-top: -4px;
	right: 20px;
	width: 22px;
	height: 6px;
	background-size: contain;
}

.btn_nml.back span:after{
	content: '';
	position: absolute;
	display: block;
	background: url(/common/img/arw_nml_r.png) no-repeat center;
	top: 50%;
	margin-top: -4px;
	left: 20px;
	width: 22px;
	height: 6px;
	transform: scale(-1, 1);
	background-size: contain;
}

.btn_nml:hover:before{width: 100%;}
.btn_nml:hover span{color: #fff;}

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

	.btn_nml{
		display: block;
	}

	.btn_nml span{
		width: 100%;
	}

	}/* --- max-width:768px */

.icon_zoom{
	position: relative;
	display: block;
}

.icon_zoom:after{
	content: '';
	position: absolute;
	display: block;
	background: url(/common/img/icon_zoom.png) no-repeat center;
	bottom: 0;
	right: 0;
	width: 34px;
	height: 34px;
	background-size: contain;
}

/* ############################### tableBrown */

.tableBrown{
	width: 100%;
	margin-top: 25px;
}

.tableBrown th{
	border: 1px solid #fff;
	background: #BF904A;
	padding: 18px 10px;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	line-height: 1.5;
}

.tableBrown td{
	border: 1px solid #ddd;
	padding: 18px 10px;
	text-align: center;
	vertical-align: middle;
	line-height: 1.5;
	background: #fff;
}

.txt_red{
	color: #A01920;
}

.txt_red_b{
	color: #A01920;
	font-weight: bold;
}

.tableBrown.col2 td{width: calc(100% / 2);}
.tableBrown.col3 td{width: calc(100% / 3);}
.tableBrown.col4 td{width: calc(100% / 4);}
.tableBrown.col5 td{width: calc(100% / 5);}
.tableBrown.col6 td{width: calc(100% / 6);}

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

	.tableBrown{
		margin-top: 15px !important;
	}

	.tableBrown th{
		padding: 12px;
	}

	.tableBrown td{
		padding: 12px;
		width: 100%;
	}

	.tableBox{
		display: table;
		margin-top: 20px;
	}

	.tableBox li{
		display: table-cell;
		vertical-align: middle;
	}

	}/* --- max-width:768px */

/* ############################### tableInfo */

.tableInfo{
	width: 100%;
	margin-top: 25px;
}

.tableInfo tr{
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.tableInfo th{
	width: 250px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding: 15px 30px;
	font-weight: bold;
	position: relative;
}

.tableInfo td{
	position: relative;
	padding: 15px 30px;
	line-height: 1.5;
}

.tableInfo td:after{
	content: '';
	position: absolute;
	display: block;
	top: 20%;
	left: 0;
	width: 0;
	height: 60%;
	border-right: 1px solid #BF904A;
	background-size: contain;
	line-height: 1.5;
}

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

	.tableInfo{
		margin-top: 20px;
	}

	.tableInfo tr{
		display: block;
	}

	.tableInfo th{
		display: block;
		width: 100%;
		height: 100%;
		padding: 20px 0;
		position: relative;
	}

	.tableInfo th:after{
		content: '';
		position: absolute;
		display: block;
		bottom: 0;
		left: 24%;
		width: 52%;
		height: 0;
		border-bottom: 1px solid #BF904A;
		background-size: contain;
		line-height: 1.5;
	}

	.tableInfo td{
		display: block;
		padding: 30px 0;
	}

	.tableInfo td:after{
		display: none;
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ temp */

#testBlock{
	padding: 50px 0;
	background: #fff;
}

#testBlock .test_spans span{
	display: inline-block;
}

.ttl_temp{
	font-size: 5rem;
	border-bottom: 1px solid #333;
	margin-top: 50px;
}

.txt_temp{
	font-size: 1.6rem;
	margin-top: 20px;
	margin-bottom: 20px;
}

.testBox li{
	display: inline-block;
	background: #ddd;
	vertical-align: top;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ header */

header{
	z-index: 10;
	position: fixed;
	top: 0;
	width: 100%;
}

/* ############################### logoBlock */

header .logoBlock{
	background: #fff;
}

header .logoBlock .logoBox{
	display: table;
	width: 100%;
	height: 120px;
	padding: 0 30px;
}

header .logoBlock .logoBox dt{
	display: table-cell;
	vertical-align: middle;
	width: 90px;
}

header .logoBlock .logoBox dd{
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}

header .logoBlock .menuBox{
	display: table;
	margin: 0 0 0 auto;
}

header .logoBlock .menuBox li{
	display: table-cell;
	vertical-align: middle;
}

header .logoBlock .menuBox li.lang{
	padding-right: 60px;
}

header .logoBlock .menuBox li.lang a{
	font-size: 1.4rem;
	display: inline-block;
	margin: 0 10px;
}
header .logoBlock .menuBox li.lang a.is_active{color: #aaa;cursor: default;}

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

	header .logoBlock .logoBox{
		height: 60px;
		padding: 10px;
	}

	header .logoBlock .logoBox dt{
		width: 40px;
	}

	header .logoBlock .menuBox li.lang{
		padding-right: 40px;
	}

	}/* --- max-width:768px */

/* ############################### btn_gmenu */

#btn_gmenu,
#btn_gmenu span{
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}

#btn_gmenu{
	position: relative;
	width: 40px;
	height: 20px;
}

#btn_gmenu span{
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #333;
	border-radius: 2px;
}

#btn_gmenu span:nth-of-type(1){top: 0;}
#btn_gmenu span:nth-of-type(2){top: 9px;}
#btn_gmenu span:nth-of-type(3){bottom: 0;}

#btn_gmenu span:nth-of-type(1){animation: menuBar01 .75s forwards;}
@keyframes menuBar01{
	0%{transform: translateY(10px) rotate(45deg);}
	50%{transform: translateY(10px) rotate(0);}
	100%{transform: translateY(0) rotate(0);}
}

#btn_gmenu span:nth-of-type(2){transition: all .25s .25s;opacity: 1;}

#btn_gmenu span:nth-of-type(3){animation: menuBar02 .75s forwards;}
@keyframes menuBar02{
	0%{transform: translateY(-10px) rotate(-45deg);}
	50%{transform: translateY(-10px) rotate(0);}
	100%{transform: translateY(0) rotate(0);}
}

#btn_gmenu.is_active span:nth-of-type(1){animation: is_active_menuBar01 .75s forwards;}
@keyframes is_active_menuBar01{
	0%{transform: translateY(0) rotate(0);}
	50%{transform: translateY(10px) rotate(0);}
	100%{transform: translateY(10px) rotate(45deg);}
}

#btn_gmenu.is_active span:nth-of-type(2){opacity: 0;}

#btn_gmenu.is_active span:nth-of-type(3){animation: is_active_menuBar03 .75s forwards;}
@keyframes is_active_menuBar03{
	0%{transform: translateY(0) rotate(0);}
	50%{transform: translateY(-10px) rotate(0);}
	100%{transform: translateY(-9px) rotate(-45deg);}
}

/* ############################### menuBlock */

header .menuBlock{
	position: fixed;
	width: 100%;
	height: calc(100vh - 120px);
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	-ms-transition: opacity 500ms,left 500ms,visibility 500ms;
	transition: opacity 500ms,left 500ms,visibility 500ms;
	left: 120%;
}

header .menuBlock .menuBg{
	position: relative;
	background: rgba(255,255,255,0.8);
	width: 100%;
	height: 100%;
}

header .menuBlock nav{
	overflow: auto;
	background: #000;
	position: relative;
	width: 600px;
	height: 100%;
	padding: 50px 80px;
	visibility: hidden;
	opacity: 0;
	-ms-transition: opacity 1000ms 0.3s,left 1000ms 0.3s,visibility 1000ms 0.3s;
	transition: opacity 1000ms 0.3s,left 1000ms 0.3s,visibility 1000ms 0.3s;
	left: 100%;
}

header .menuBlock .menuBox li{
	visibility: hidden;
	opacity: 0;
	-ms-transform: translateX(100px);
	transform: translateX(100px);
}
header .menuBlock .menuBox li:nth-child(1){transition: all 1000ms 0.1s;}
header .menuBlock .menuBox li:nth-child(2){transition: all 1000ms 0.2s;}
header .menuBlock .menuBox li:nth-child(3){transition: all 1000ms 0.3s;}
header .menuBlock .menuBox li:nth-child(4){transition: all 1000ms 0.4s;}
header .menuBlock .menuBox li:nth-child(5){transition: all 1000ms 0.5s;}
header .menuBlock .menuBox li:nth-child(6){transition: all 1000ms 0.6s;}
header .menuBlock .menuBox li:nth-child(7){transition: all 1000ms 0.7s;}
header .menuBlock .menuBox li:nth-child(8){transition: all 1000ms 0.8s;}
header .menuBlock .menuBox li:nth-child(9){transition: all 1000ms 0.9s;}
header .menuBlock .menuBox li:nth-child(10){transition: all 1000ms 1.0s;}

header .menuBlock .btn_header{
	display: table;
	width: 100%;
	padding: 30px 0;
	border-bottom: 1px solid #707070;
	text-decoration: none;
}

header .menuBlock .btn_header span{
	display: table-cell;
	vertical-align: middle;
	font-size: 1.3rem;
	color: #fff;
	position: relative;
}

header .menuBlock .btn_header span:after{
	content: '';
	position: absolute;
	display: block;
	background: url(/common/img/arw_nml_r.png) no-repeat center;
	top: 50%;
	margin-top: -4px;
	right: 0;
	width: 22px;
	height: 6px;
	background-size: contain;
}

.is_menuOpened .menuBlock{
	visibility: visible;
	opacity: 1 !important;
	left: 0 !important;
}

.is_menuOpened .menuBlock nav{
	visibility: visible !important;
	opacity: 1 !important;
	left: calc(100% - 600px) !important;
}

.is_menuOpened .menuBlock .menuBox li{
	visibility: visible !important;
	opacity: 1 !important;
	-ms-transform: translateX(0) !important;
	transform: translateX(0) !important;
}

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

	header .menuBlock{
		height: calc(100vh - 60px);
	}

	header .menuBlock nav{
		width: 100%;
		height: 100%;
		padding: 30px 30px;
	}

	header .menuBlock .btn_header{
		padding: 0;
	}

	header .menuBlock .btn_header span{
		font-size: 1.6rem;
		height: 50px;
	}

	header .menuBlock .btn_header span:after{
		top: 25px;
		right: 20px;
		width: 15px;
		height: 4px;
		background-size: contain;
	}

	.is_menuOpened .menuBlock nav{
		visibility: visible !important;
		opacity: 1 !important;
		left: 0 !important;
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ main */

#main{
	z-index: 1;
	position: relative;
	display: block;
	padding-top: 120px;
	background: #fff;
}

#main.top{
	padding-top: 0;
}

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

	#main{
		padding-top: 60px;
	}

	}/* --- max-width:768px */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ contents */

#ttlBlock{
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	background: #1b1e25 url(/common/img/bg_ttl_main.jpg) no-repeat right center;
	background-size: cover;
	min-width: 1200px;
	height: 200px;
}

#ttlBlock .ttl_main{
	color: #fff;
	font-size: 4.4rem;
	text-align: center;
}

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

	#ttlBlock{
		z-index: 1;
		background: #1b1e25 url(/common/img/bg_ttl_main.jpg) no-repeat right center;
		background-size: auto 100%;
		min-width: 0;
		height: 150px;
	}

	#ttlBlock .ttl_main{
		font-size: 3.0rem;
		width: 100%;
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ contentsBlock */

.contents > .inner_pad{
	width: 1200px;
	margin: auto;
}

.contents > .inner_nopad{
	width: 1200px;
	margin: auto;
}

.contents > .inner_nopad_1450{
	width: 1450px;
	margin: auto;
}

#contentsBlock{
	z-index: 1;
	padding: 95px 0 0;
}

#contentsSubBlock{
	z-index: 1;
	padding: 95px 0 0;
}

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

	.contents > .inner_pad{
		width: 100%;
		padding: 0 20px;
		margin: auto;
	}

	.contents > .inner_nopad{
		width: 100%;
		margin: auto;
	}

	.contents > .inner_nopad_1450{
		width: 100%;
		margin: auto;
	}

	#contentsSubBlock{
		z-index: 1;
		padding: 50px 0 0;
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ lastBlock */

#lastBlock{
	z-index: 1;
	padding: 110px 0 115px;
}

.bannerBox{
	display: block;
	width: 100%;
	font-size: 0;
	position: relative;
}
.bannerBox::after{content:"";display:table;clear:both;}

.bannerBox > li{
	display: inline-block;
	width: 50%;
}

.bannerBox > li a{
	display: block;
	width: 100%;
	height: 338px;
	overflow: hidden;
	position: relative;
}

.bannerBox > li a .bg{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 35px 0;
	background-size: contain !important;
	transition: 0.3s ease-out;
}

.bannerBox > li a:hover .bg{transform: scale(1.5);filter: blur(2px);}

/* 3-1 36ぷらす3とは */
.bannerBox > li.about a .bg{background: url(/common/img/ban_about.jpg) no-repeat center;}
/* 3-2 車両の紹介 */
.bannerBox > li.about_787 a .bg{background: url(/common/img/ban_about_787.jpg) no-repeat center;}
/* 3-3 運行ルート・ダイヤ */
.bannerBox > li.about_dia a .bg{background: url(/common/img/ban_about_dia.jpg) no-repeat center;}
/* 3-4 運転カレンダー */
.bannerBox > li.about_calendar a .bg{background: url(/common/img/ban_about_calendar.jpg) no-repeat center;}
/* 4-1 ご乗車のご案内 */
.bannerBox > li.guidance a .bg{background: url(/common/img/ban_guidance.jpg) no-repeat center;}
/* 4-2 ランチ付きプランのご紹介 */
.bannerBox > li.guidance_lunch a .bg{background: url(/common/img/ban_guidance_lunch.jpg) no-repeat center;}
/* 4-3 グリーン席プランのご紹介（木） */
.bannerBox > li.guidance_green a .bg{background: url(/common/img/ban_guidance_green.jpg) no-repeat center;}
/* 5-1 ストーリーとエピソード */
.bannerBox > li.story a .bg{background: url(/common/img/ban_story.jpg) no-repeat center;}
/* 6-1 車内の過ごし方 */
.bannerBox > li.spend a .bg{background: url(/common/img/ban_spend.jpg) no-repeat center;}
/* 6-2 ビュッフェ取扱商品の紹介 */
.bannerBox > li.spend_buffet a .bg{background: url(/common/img/ban_spend_buffet.jpg) no-repeat center;}
/* 6-3 コト体験の紹介 */
.bannerBox > li.spend_experience a .bg{background: url(/common/img/ban_spend_experience.jpg) no-repeat center;}
/* 7-1 ご予約・お問い合わせ */
.bannerBox > li.reserve a .bg{background: url(/common/img/ban_reserve.jpg) no-repeat center;}
/* 8-1 よくあるご質問 */
.bannerBox > li.faq a .bg{background: url(/common/img/ban_faq.jpg) no-repeat center;}
/* 9-1 ご予約・お問い合わせ（JTB連携） */
.bannerBox > li.web-reserve a .bg{background: url(/common/img/ban_web-reserve.jpg) no-repeat center;}
/* 9-2 空席照会・お申し込み */
.bannerBox > li.web-reserve_reserve a .bg{background: url(/common/img/ban_web-reserve_reserve.jpg) no-repeat center;}
/* 9-3 代理店ログイン */
.bannerBox > li.agency a .bg{background: url(/common/img/ban_agency.jpg) no-repeat center;}
/* 10-1 世界一の「わ」の仲間たち */
.bannerBox > li.circle a .bg{background: url(/common/img/ban_circle.jpg) no-repeat center;}
/* 11-1 “世界一のわ”に参加しませんか */
.bannerBox > li.flag a .bg{background: url(/common/img/ban_flag.jpg) no-repeat center;}
/* 3-2 車両の紹介　トップ */
.bannerBox > li.about_787_top a .bg{background: url(/common/img/ban_about_787_top.jpg) no-repeat center;}
/* 3-3 運行ルート・ダイヤ トップ */
.bannerBox > li.about_dia_top a .bg{background: url(/common/img/ban_about_dia_top.jpg) no-repeat center;}
/* 3-4 運転カレンダー トップ */
.bannerBox > li.about_calendar_top a .bg{background: url(/common/img/ban_about_calendar_top.jpg) no-repeat center;}

/* template */
.bannerBox > li.xxx a .bg{background: url(/common/img/ban_xxx.jpg) no-repeat center;}

/* other */
.bannerBox > li.layout a .bg{background: url(/common/img/ban_layout.jpg) no-repeat center;}
.bannerBox > li.date a .bg{background: url(/common/img/ban_date.jpg) no-repeat center;}
.bannerBox > li.car a .bg{background: url(/common/img/ban_car.jpg) no-repeat center;}


.bannerBox > li .ttl{
	position: absolute;
	top: 35px;
	left: 0;
}

.bannerBox > li .ttl em{
	position: relative;
	font-size: 2.4rem;
	font-family:'游明朝',YuMincho,'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','HG明朝E','メイリオ',Meiryo,serif;
	color: #fff;
	padding-left: 50px;
}

.bannerBox > li .ttl:before{
	content: '';
	position: absolute;
	display: block;
	background: #BF904A;
	top: 50%;
	margin-top: -2px;
	left: 0;
	width: 30px;
	height: 2px;
	background-size: contain;
}

.bannerBox > li .ttl span{
	font-size: 2.4rem;
}

.bannerBox > li .fade_chr{
	position: absolute;
	color: #fff;
	font-size: 1.6rem;
	left: 50px;
	bottom: -40px;
	visibility: hidden;
	transition: 0.2s 0.2s ease-out;
}

.bannerBox > li a:hover .fade_chr{
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	animation-name: typing;
	animation-duration: 2.3s;
	animation-delay: 0.3s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
/*	animation: typing 2.3s steps(31,end);*/
/*	animation: typing 1s steps(100, end);*/
	visibility: visible;
	bottom: 35px;
}

.bannerBox.col3 > li{width: calc(100% / 3);}
.bannerBox.col3 > li a{height: 300px;}
.bannerBox.col3 > li a .bg{background-size: cover !important;}
.bannerBox.col3 > li .ttl em{font-size: 2.6rem;}

	@keyframes typing {
		0% {width: 0;}
		80% {width: 90%;}
		100% {width: 100%;}
	}/* ---typing */

#lastBlock .bannerBox{
	margin-bottom: 110px;
}

#lastBlock .bttn{
	text-align: center;
}

#btn_top{
	display: inline-block;
	width: 90px;
}

#btn_top span{
	display: block;
}

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

	#lastBlock{
		padding: 100px 0 80px;
	}

	.bannerBox{
		display: block;
	}

	.bannerBox > li{
		display: block;
		width: 100%;
	}

	.bannerBox > li a{
		display: block;
		width: 100%;
		height: 52vw;
		transition: none;
	}

	.bannerBox > li a .bg{
		padding: 3vw 0;
		background-size: cover !important;
		transition: none !important;
	}

	.bannerBox > li a:hover .bg{
		transform: none;
		filter: none;
		background-size: cover !important;
	}

	.bannerBox > li .ttl{
		top: 3vw;
	}

	.bannerBox > li .ttl em{
		font-size: 1.8rem;
		padding-left: 35px;
		position: relative;
	}

	.bannerBox > li .ttl:before{
		content: '';
		position: absolute;
		display: block;
		background: #BF904A;
		top: 50%;
		margin-top: -2px;
		left: 0;
		width: 20px;
		height: 2px;
		background-size: contain;
	}

	.bannerBox > li .ttl span{
		font-size: 1.6rem;
	}

	.bannerBox > li .fade_chr{
		animation: none !important;
		transition: none !important;
		font-size: 1.4rem;
		left: 35px;
		bottom: 2vw;
		visibility: hidden;
	}

	.bannerBox > li a:hover .fade_chr{
		visibility: hidden;
	}

	.bannerBox.col3 > li{width: 100%;}
	.bannerBox.col3 > li a{height: 52vw;}
	.bannerBox.col3 > li .ttl em{font-size: 2.4rem;}

	#lastBlock .bannerBox{
		margin-bottom: 80px;
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ footer */

footer{
	position: relative;
	z-index: 1;
	background: #1B282C;
}

footer .menuBlock{
	background: #121318 url(/common/img/bg_footer.png) no-repeat center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 465px;
	flex-wrap: wrap;
	flex: auto;
}

footer .menuBlock .menuBox{
	margin: auto;
	width: 1200px;
	min-width: 1200px;
}

footer .menuBlock .menuBox li{
	padding: 35px 10px;
	display: inline-block;
}

footer .menuBlock .btn_footer{
	display: block;
	width: 205px;
	border-bottom: 1px solid #707070;
	padding-bottom: 15px;
	text-decoration: none;
}

footer .menuBlock .btn_footer span{
	display: block;
	font-size: 1.3rem;
	color: #fff;
	position: relative;
}

footer .menuBlock .btn_footer span:after{
	content: '';
	position: absolute;
	display: block;
	background: url(/common/img/arw_nml_r.png) no-repeat center;
	top: 50%;
	margin-top: -4px;
	right: 0;
	width: 22px;
	height: 6px;
	background-size: contain;
}

footer .copyBlock{
	padding: 38px 0;
	border-top: 1px solid #707070;
}

footer .copy{
	text-align: center;
	color: #fff;
}

footer .desk{
	text-align: center;
	color: #fff;
	font-size: 1.4rem;
	margin-bottom: 20px;
}

footer .desk a{
	color: #fff;
	text-decoration: none;
}

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

	footer .menuBlock{
		background: #121318 url(/common/img/bg_footer.png) no-repeat right center;
		background-size: cover;
		height: auto;
	}

	footer .menuBlock .menuBox{
		width: auto;
		min-width: 0;
		font-size: 0;
	}

	footer .menuBlock .menuBox li{
		padding: 0;
		display: inline-block;
		width: 50%;
	}

	footer .menuBlock .btn_footer{
		display: table;
		width: 100%;
		border-bottom: 1px solid #707070;
		border-right: 1px solid #707070;
		padding-bottom: 0;
	}
	footer .menuBlock li:nth-child(even) .btn_footer{border-right: none;}

	footer .menuBlock .btn_footer span{
		display: table-cell;
		vertical-align: middle;
		line-height: 1.5;
		color: #fff;
		padding: 0 40px 0 20px;
		height: 80px;
	}

	footer .menuBlock .btn_footer span:after{
		top: 38px;
		margin-top: -3px;
		right: 20px;
		width: 15px;
		height: 4px;
		background-size: contain;
	}

	footer .copyBlock{
		padding: 20px;
		border: none;
	}

	footer .copy{
		font-size: 1.2rem;
	}

	footer .desk{
		font-size: 1.2rem;
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ mvsBlock */

#mvsBlock{
	position: relative;
	z-index: 2;
}

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


	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ leadBox */

#mvsBlock .leadBox{
	display: table;
	width: 1200px;
	position: absolute;
	bottom: 0;
	left: calc(50% - 600px);
}

#mvsBlock .leadBox > .inner{
	padding: 28px 25px 28px 25px;
	position: relative;
	display: block;
	font-size: 1.8rem;
	background: #fff;
}

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

	#mvsBlock .leadBox{
		display: table;
		width: calc(100% - 40px);
		position: absolute;
		bottom: 0;
		left: 20px;
	}

	#mvsBlock .leadBox > .inner{
		padding: 20px;
		position: relative;
		display: block;
	}

	}/* --- max-width:768px */

/* ############################### itemArea */

.itemArea .itemListBox{
	font-size: 0;
}

.itemArea .itemListBox > li{
	display: inline-block;
	vertical-align: top;
	width: 580px;
	margin: 100px 40px 0 0;
}
.itemArea .itemListBox > li:nth-child(even){margin-right: 0;}

.itemArea .itemListBox > li a{
	display: block;
}
.itemArea .itemListBox > li a:hover{opacity: 0.8;}

.itemArea .itemListBox .img{
	z-index: 1;
}

.itemArea .itemListBox .infoBox{
	padding: 50px 60px;
	background: #fff;
	width: 83%;
	margin: -40px auto 0;
	position: relative;
	z-index: 2;
}

.itemArea .itemListBox .infoBox .name{
	font-size: 2.4rem;
	font-weight: bold;
	display: block;
}

.itemArea .itemListBox .infoBox .category{
	font-size: 1.8rem;
	display: block;
	margin-top: 10px;
}

.itemArea .itemListBox .infoBox .txt{
	font-size: 1.6rem;
	display: block;
	margin-top: 30px;
}

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

	.itemArea .itemListBox > li{
		display: block;
		width: 100%;
		margin: 0;
	}

	.itemArea .itemListBox .infoBox{
		padding: 25px 30px;
		width: 84%;
		margin: -20px auto 60px;
	}
	.itemArea .itemListBox > li:last-child .infoBox{margin-bottom: 0;}

	.itemArea .itemListBox .infoBox .name{
		font-size: 1.8rem;
	}

	.itemArea .itemListBox .infoBox .category{
		font-size: 1.6rem;
		margin-top: 10px;
	}

	.itemArea .itemListBox .infoBox .txt{
		font-size: 1.4rem;
		margin-top: 20px;
	}

	}/* --- max-width:768px */

/* ############################### itemTopBox */

.itemArea .itemTopBox > li{
	width: 100%;
	margin: 100px 0 0;
}

.itemArea .itemTopBox > li > div{
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.itemArea .itemTopBox > li a:hover{opacity: 0.8;}

.itemArea .itemTopBox .img{
	width: 1100px;
	z-index: 1;
	display: block;
}

.itemArea .itemTopBox .infoBox{
	display: block;
	padding: 90px 60px 90px 10px;
	background: #fff;
	width: 350px;
	position: relative;
	z-index: 2;
}

.itemArea .itemTopBox .infoBox:before{
	content: '';
	position: absolute;
	display: block;
	background: #fff;
	top: 0;
	left: -50px;
	width: 50px;
	height: 100%;
	background-size: contain;
}

.itemArea .itemTopBox li:nth-child(even) .img{
	order: 2;
	z-index: 1;
}

.itemArea .itemTopBox li:nth-child(even) .infoBox{
	padding: 90px 10px 90px 60px;
	background: #fff;
	z-index: 2;
	order: 1;
}

.itemArea .itemTopBox li:nth-child(even) .infoBox:before{display: none;}

.itemArea .itemTopBox li:nth-child(even) .infoBox:after{
	content: '';
	position: absolute;
	display: block;
	background: #fff;
	top: 0;
	right: -50px;
	width: 50px;
	height: 100%;
	background-size: contain;
}

.itemArea .itemTopBox .infoBox .name{
	font-size: 2.4rem;
	font-weight: bold;
	display: block;
}

.itemArea .itemTopBox .infoBox .txt{
	font-size: 1.6rem;
	display: block;
	margin-top: 30px;
}

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

	.itemArea .itemTopBox > li{
		display: block;
		width: 100%;
		margin: 0;
	}

	.itemArea .itemTopBox > li > div{
		display: block;
		position: relative;
	}

	.itemArea .itemTopBox .img{
		width: 100%;
		z-index: 1;
		display: block;
	}

	.itemArea .itemTopBox li:nth-child(even) .img{
		order: 2;
		z-index: 2;
	}

	.itemArea .itemTopBox .infoBox{
		padding: 25px 30px;
		width: 84%;
		margin: -20px auto 60px;
	}
	.itemArea .itemTopBox .infoBox:before{display: none !important;;}
	.itemArea .itemTopBox .infoBox:after{display: none !important;;}

	.itemArea .itemTopBox li:nth-child(even) .infoBox{
		padding: 25px 30px;
		z-index: 1;
		order: 1;
	}

	.itemArea .itemTopBox .infoBox .name{
		font-size: 1.8rem;
	}

	.itemArea .itemTopBox .infoBox .txt{
		font-size: 1.4rem;
		margin-top: 20px;
	}

	}/* --- max-width:768px */