@charset "UTF-8";
/* CSS Document */

html{
	width:100%;
}
body{
	/* *font-size:small; */
	/* *font:x-small; */
	font-size:13px;
	color:#333333;
	line-height:1.2;
  font-family:"Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align:left;
	width:100%;
	margin:0px;
	padding:0px;
	-webkit-text-size-adjust:100%;
	background-color: #000;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Medium");
  font-weight:100;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Medium");
  font-weight:200;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Medium");
  font-weight:300;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Medium");
  font-weight:400;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Bold");
  font-weight:bold;
}
#wrap{
	position:relative;
	text-align:left;
	overflow:hidden;
	background-color: #fff;
}
h1,h2,h3,h4,h5,p,ul,ol,li,img,table,th,td,dl,dt,dd{
	margin:0px;
	padding:0px;
	font-size:14px;
}
li{
	list-style-type:none;
}
table{
	border-collapse:collapse;
}
p{
  line-height: 2;
}
a{
	cursor:pointer;
	color:#333333;
	text-decoration:none;
}
a{
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	-o-transition:opacity 0.2s;
	-ms-transition:opacity 0.2s;
	transition:opacity 0.2s;
}
a{
	-webkit-tap-highlight-color:transparent;
}
img{
	vertical-align:top;
	border:0;
	max-width:100%;
	height:auto;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
}
a img{
	vertical-align:bottom;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
	overflow:hidden;
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	-o-transition:opacity 0.2s;
	-ms-transition:opacity 0.2s;
	transition:opacity 0.2s;
}
input, 
textarea, 
select,
button,
label{
  outline:none;
	-webkit-tap-highlight-color:transparent;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
@media screen and (max-width: 750px) {
.pc{
	display: none;
}
.sp{
	display: block;
}
}


/* header
-----------------------------------------------*/
header{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
}
header .inner{
	overflow: hidden;
	padding: 30px 40px 0 40px;
}
header p{
	float: left;
	font-size: 0;
	margin-top: 12px;
	width: 400px;
	height: 27px;
	background-image: url("../img/log-hed_01.svg");
	background-size: 100% auto; 
	background-position: left top;
	background-repeat: no-repeat;
}
header a{
	overflow: hidden;
	position: relative;
	float: right;
	display: inline-block;
	color: #fff;
	font-size: 15px;
	border: 1px solid #fff;
	padding: 16px 35px 16px 20px;
}
header a:hover{
	opacity: 0.7;
}
header a::before{
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -6px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
@media screen and (max-width: 750px) {
header .inner{
	overflow: hidden;
	padding: 15px 20px 0 20px;
}
header p{
	margin-top: 4px;
	width: 100px;
	height: 27px;
	background-image: url("../img/log-hed_01_sp.svg");
}
header a{
	font-size: 11px;
	padding: 8px 25px 8px 10px;
}
header a::before{
	right: 10px;
}
}


/* main
-----------------------------------------------*/
#main{
	overflow: hidden;
	position: relative;
	background-color: #000;
	/* height: 100vh; */
	height: 960px;
	min-height: 600px;
	max-height: 960px;
	width: 120%;
	left: -10%;
}
#main .inner{
	overflow: hidden;
	position: absolute;
	height: 960px;
	width: 100%;
	top: 0;
	/* bottom: -10px; */
}
#main .img{
	position: absolute;
	left: 0;
	bottom: 0;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	opacity: 0;
}
@keyframes main_fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes photo00 {
  0% { transform: scale(.70) translateY(20px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes main_move {
  0% { transform: scale(.95) translateY(20px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes main_move_top {
  0% { transform: scale(.90) translateY(20px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes main_move_right {
  0% { transform: scale(.90) translate(-30px,30px); }
  100% { transform: scale(1) translate(0,0); }
}
@keyframes main_move_left {
  0% { transform: scale(.90) translate(30px,30px); }
  0% { transform: scale(.90) translate(30px,30px); }
  100% { transform: scale(1) translate(0,0); }
}
@keyframes main_logo_left {
  0% { transform: translateX(20px); }
  100% { transform: translateX(0,0); }
}
@keyframes main_logo_right {
  0% { transform: translateX(-20px); }
  100% { transform: translateX(0,0); }
}
#main .ink1.active,
#main .gra1.active{
  animation: .6s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in,main_move;
}
#main .ink2.active{
  animation: 1.2s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in,main_move;
}
#main .logo01.active{
  animation: 1.2s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in;
}
#main .logo02.active{
  animation: 1.2s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in,main_logo_left;
}
#main .logo03.active{
  animation: 1.2s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in,main_logo_right;
}
#main .photo00.active{
  animation: .3s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in,main_move,photo00;
}
#main .photo01.active,
#main .photo03.active,
#main .photo05.active,
#main .photo11.active{
  animation: .8s cubic-bezier(.26,1.09,.5,1.06) both;
  animation-name: main_fade_in,main_move_top;
}
#main .photo02.active,
#main .photo04.active,
#main .photo06.active,
#main .photo08.active,
#main .photo10.active{
  animation: .8s cubic-bezier(.26,1.09,.5,1.06) both;
  animation-name: main_fade_in,main_move_right;
}
#main .photo02.active,
#main .photo04.active,
#main .photo06.active,
#main .photo07.active,
#main .photo09.active{
  animation: .8s cubic-bezier(.26,1.09,.5,1.06) both;
  animation-name: main_fade_in,main_move_left;
}
#main .photo09.active,
#main .photo10.active{
	animation-delay: 0.03s;
}
#main .photo03.active,
#main .photo06.active{
	animation-delay: 0.05s;
}
#main .photo02.active,
#main .photo05.active{
	animation-delay: 0.07s;
}
#main .ink1{
	background-image: url("../img/bgi-main_ink1.png");
}
#main .ink2{
	background-image: url("../img/bgi-main_ink2.png");
}
#main .gra1{
	background:linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 1.0));
	height: 40%;
}
#main .photo00{
	background-image: url("../img/bgi-main_photo_00.png");
}
#main .photo01{
	background-image: url("../img/bgi-main_photo_01.png");
}
#main .photo02{
	background-image: url("../img/bgi-main_photo_02.png");
}
#main .photo03{
	background-image: url("../img/bgi-main_photo_03.png");
}
#main .photo04{
	background-image: url("../img/bgi-main_photo_04.png");
}
#main .photo05{
	background-image: url("../img/bgi-main_photo_05.png");
}
#main .photo06{
	background-image: url("../img/bgi-main_photo_06.png");
}
#main .photo07{
	background-image: url("../img/bgi-main_photo_07.png");
}
#main .photo08{
	background-image: url("../img/bgi-main_photo_08.png");
}
#main .photo09{
	background-image: url("../img/bgi-main_photo_09.png");
}
#main .photo10{
	background-image: url("../img/bgi-main_photo_10.png");
}
#main .photo11{
	background-image: url("../img/bgi-main_photo_11.png");
}
#main .logo01{
	background-image: url("../img/bgi-main_logo_01.png");
}
#main .logo02{
	background-image: url("../img/bgi-main_logo_02.png");
}
#main .logo03{
	background-image: url("../img/bgi-main_logo_03.png");
}

#main .confetti {
	width: 100%;
	height: 100%;
}
#main .confetti canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* z-index: 10; */
}
#main .fv_message {
	position: absolute;
	top: 80px;
	left: 53%;
	opacity: 0;
	transform: translateX(-50%);
	animation: .3s cubic-bezier(.210, .60, .350, 1) both;
	animation-name: main_fade_in;
	animation-delay: .8s;
}

@media screen and (max-width: 750px) {
	#main{
		min-height: 0;
		height: 350px;
		max-height: none;
		border-top: 60px solid #000;
	}
	#main .inner {
		height: 350px;
	}
	#main .fv_message {
		top: 0;
	}
	#main .confetti canvas {
		height: auto;
	}
}


/* main2
-----------------------------------------------*/
#main2{
	overflow: hidden;
	position: relative;
	background-color: #000;
	height: 100vh;
	min-height: 600px;
	max-height: 880px;
	width: 120%;
	left: -10%;
}
#main2 .inner{
	overflow: hidden;
	position: relative;
	height: 100%;
	width: 100%;
}
#main2 .img{
	position: absolute;
	left: 0;
	bottom: 0;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	opacity: 0;
	z-index: 1;
}
#main2 .bg{
	background-image: url("../img/bgi-main_bg_01.jpg");
	background-size: cover;
	background-position: center;
	transform: scale(1.1);
	transition: all 2s cubic-bezier(.210, .60, .350, 1);
}
#main2 .ink2{
	background-image: url("../img/bgi-main_ink2.png");
	opacity: 1;
}
#main2 .gra1{
	background:linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 1.0));
	height: 40%;
	opacity: 1;
}
#main2 .gra2{
	background:linear-gradient(rgba(0, 0, 0, .6),rgba(0, 0, 0, 0));
	height: 20%;
	bottom: auto;
	top: 0;
	opacity: 1;
}
#main2 .logo01{
	background-image: url("../img/bgi-main_logo_01.png");
}
#main2 .logo02{
	background-image: url("../img/bgi-main_logo_02.png");
}
#main2 .logo03{
	background-image: url("../img/bgi-main_logo_03.png");
}
#main2 .logo04{
	background-image: url("../img/bgi-main_logo_04.png");
}
#main2 .bg.active{
	transform: scale(1);
	opacity: 1;
}
#main2 .logo01.active{
  animation: 1.2s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in;
}
#main2 .logo02.active{
  animation: 1.2s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in,main_logo_left;
}
#main2 .logo03.active{
  animation: 1.2s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in,main_logo_right;
}
#main2 .logo04.active{
  animation: 1.2s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: main_fade_in;
}
@media screen and (max-width: 750px) {
#main2{
	min-height: 0;
	height: 380px;
	max-height: none;
}
}


/* ttl
-----------------------------------------------*/
.ttl{
	text-align: center
}
.ttl strong{
	display: inline-block;
	position: relative;
}
.ttl strong span{
	position: relative;
	z-index: 1;
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 62px;
	line-height: 1;
}
.ttl strong::before{
	content: "";
	display: block;
	position: absolute;
	bottom: -6px;
	left: 10%;
	z-index: 0;
	width: 0;
	height: 15px;
	background-color: #fff100;
}
.ttl h2{
	font-size: 18px;
	margin-top: 15px;
}
@keyframes ttl_anime {
  0% { width: 0; }
  100% { width: 80%; }
}
.ttl.fade strong::before{
  animation: .4s cubic-bezier(0.445, 0.05, 0.55, 0.95) both;
  animation-name: ttl_anime;
}
@media screen and (max-width: 750px) {
.ttl strong span{
	font-size: 36px;
}
.ttl h2{
	font-size: 14px;
	margin-top: 15px;
}
}


/* lead2
-----------------------------------------------*/
#lead2{
	background-color: #fff100;
}
#lead2 .inner{
	padding: 60px 40px;
}
#lead2 h1{
	text-align: center;
	font-size: 28px;
	line-height: 1.8;
}
@media screen and (max-width: 1000px) {
#lead2 .inner{
	padding: 60px 40px;
}
#lead2 h1{
	font-size: 22px;
}
}
@media screen and (max-width: 750px) {
#lead2 .inner{
	padding: 40px 20px;
}
#lead2 h1{
	font-size: 16px;
}
}


/* lead
-----------------------------------------------*/
#lead{
	overflow: hidden;
	position: relative;
	height: 800px;
	background-color: #000;
}
#lead::before{
	content: "";
	background: url("../img/bgi-lead_01.jpg") center;
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
#lead::after{
	content: "";
	background:linear-gradient(90deg,rgba(0, 0, 0, .9),rgba(0, 0, 0, .9),rgba(0, 0, 0, .7),rgba(0, 0, 0, .5),rgba(0, 0, 0, 0.0));
	width: 70%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
#lead .inner{
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	padding: 180px 40px 0;
}
#lead .txt{
	max-width: 590px;
	text-align: center;
	padding-right: 200px;
}
#lead .txt h2{
	padding: 0 20px;
	margin: 0 auto;
}
#lead .txt p{
	font-size: 16px;
	line-height: 2.5;
	color: #fff;
	text-align: left;
	margin-top: 30px;
}
@keyframes lead_bg {
  0% { opacity: 0;transform: scale(1.1); }
  100% { opacity: 1;transform: scale(1); }
}
@keyframes lead_h2 {
  0% { opacity: 0;transform: scale(1.1); }
  100% { opacity: 1;transform: scale(1); }
}
@keyframes lead_p {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#lead::before{
	opacity: 0;
}
#lead.fade::before{
  animation: .6s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: lead_bg;
}
#lead .txt h2{
	opacity: 0;
}
#lead.fade .txt h2{
  animation: 1s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: lead_h2;
	animation-delay: .6s;
}
#lead .txt p{
	opacity: 0;
}
#lead.fade .txt p{
  animation: 1s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: lead_p;
	animation-delay: 1.0s;
}
@media screen and (max-width: 750px) {
#lead{
	height: auto;
}
#lead::after{
	background:linear-gradient(90deg,rgba(0, 0, 0, .8),rgba(0, 0, 0, .8));
	width: 100%;
}
#lead .inner{
	padding: 60px 20px;
}
#lead .txt{
	max-width: 100%;
	padding-right: 0;
}
#lead .txt h2{
	padding: 0 20px;
	max-width: 320px;
}
#lead .txt p{
	font-size: 13px;
	line-height: 2.5;
	margin-top: 20px;
}
}


/* gallery
-----------------------------------------------*/
#gallery{
	background-color: #fff100;
}
#gallery ul{
	font-size: 0;
	border-top: 1px solid #fff100;
	border-bottom: 1px solid #fff100;
}
#gallery ul li{
	overflow: hidden;
	position: relative;
	display: inline-block;
	width: 20%;
	box-sizing: border-box;
}
#gallery ul li::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid #fff100;
	box-sizing: border-box;
	z-index: 1;
}
#gallery ul li:nth-child(5n)::before{
	border-right: none !important;
}
#gallery ul li:nth-child(5n+1)::before{
	border-left: none !important;
}
#gallery ul li img{
	width: 100%;
	opacity:0;
}
#gallery ul li{
	position: relative;
}
@keyframes gallery_anime {
  0% { transform: scale(.90); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
#gallery ul li.fade img{
  animation: .5s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: gallery_anime;
}


/* info
-----------------------------------------------*/
#info{
	position: relative;
	background: url("../img/bgi-info_01.svg") center;
	background-size: cover;
}
#info .inner{
	overflow: hidden;
	max-width: 1180px;
	margin: 0 auto;
	padding: 80px 40px;
}
#info .inner > div{
	float: left;
	width: 50%;
	box-sizing: border-box;
}
#info .subTtl{
	text-align: center;
}
#info .subTtl strong{
	font-family: 'Oswald', sans-serif;
	font-size: 46px;
}
#info .subTtl h2{
	font-size: 16px;
	margin-top: 5px;
}
#info #news{
	padding-right: 50px;
}
#info #news ul{
	max-width: 510px;
	margin: 20px auto 0;
}
#info #news ul li{
	margin-top: 10px;
	background-color: #fff;
}
#info #news ul li:first-child{
	margin-top: 0;
}
#info #news ul li a:hover{
	opacity: 0.7;
}
#info #news table{
	max-width: 510px;
	margin: 20px auto 0;
	border-top: 1px solid #333;
}
#info #news table tr{
	border-bottom: 1px solid #333;
}
#info #news table th,
#info #news table td{
	vertical-align: top;
	border-bottom: 1px solid #333;
	line-height: 1.5;
}
#info #news table th{
	padding: 15px 20px;
}
#info #news table td{
	padding: 15px 10px 15px 0;
}
#info #news table td a{
	word-wrap: break-word;
}
#info #news table td a:hover{
	text-decoration: underline;
}
#info #photo{
	padding-left: 50px;
}
#info #photo .subTtl{
	color: #fff;
}
#info #photo ul{
	max-width: 510px;
	margin: 20px auto 0;
}
#info #photo ul li{
	margin-top: 5px;
}
#info #photo ul li:first-child{
	margin-top: 0;
}
#info #photo ul li a{
	display: table;
	width: 100%;
}
#info #photo ul li a:hover{
	opacity: 0.7;
}
#info #photo ul li a span{
	display: table-cell;
	vertical-align: top;
	background-color: #fff100;
	color: #333;
	padding: 25px;
	font-size: 16px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
	white-space: nowrap;
}
#info #photo ul li a strong{
position: relative;
	display: table-cell;
	vertical-align: top;
	background-color: #fff;
	padding: 25px 40px 25px 20px;
	font-size: 16px;
	width: 100%;
}
#info #photo ul li a strong::before{
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -6px;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
@media screen and (max-width: 1000px) {
#info .inner{
	padding: 60px 40px;
}
#info .subTtl strong{
	font-size: 38px;
}
#info .subTtl h2{
	font-size: 16px;
	margin-top: 5px;
}
}
@media screen and (max-width: 750px) {
#info{
	background: none;
}
#info .inner{
	padding: 0;
}
#info .inner > div{
	float: none;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 20px;
}
#info #news{
	background-color: #fff100;
	padding: 40px 20px;
}
#info #news table th,
#info #news table td{
	font-size: 13px;
}
#info #news table th{
	padding: 15px 10px 15px 10px;
}
#info #news table td{
	padding: 15px 0 15px 0;
}
#info #photo{
	background-color: #000;
	padding: 40px 20px;
}
#info .subTtl strong{
	font-size: 36px;
}
#info .subTtl h2{
	font-size: 14px;
}
#info #photo ul li a span{
	padding: 20px;
	font-size: 13px;
}
#info #photo ul li a strong{
	padding: 20px 40px 20px 20px;
	font-size: 13px;
}
}


/* photoModal
-----------------------------------------------*/
.photoModal{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -1;
	opacity: 0;
	-webkit-transition:opacity 0.2s;
	-ms-transition:opacity 0.2s;
	transition:opacity 0.2s;
}
.photoModal .modalBg{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
}
.photoModal.open{
	z-index: 100;
	opacity: 1;
}
.photoModal .slider{
	margin-left: 5px;
	margin-right: 5px;
}
.photoModal .modalClose{
	display: inline-block;
  width: 45px;
  height: 45px;
	position: absolute;
	right: 20px;
	top: 20px;
  border: 1px solid rgba(0,0,0,.1);
  cursor: pointer;
	transition: opacity .2s;
}
.photoModal .modalClose:hover{
	opacity: .6;
}
.photoModal .modalClose::before,
.photoModal .modalClose::after {
	display: block;
  content: "";
  position: absolute;
  top: 20px;
	right: 2px;
  width: 40px;
  height: 6px;
  margin: 0;
  background: #fff100;
}
.photoModal .modalClose::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.photoModal .modalClose::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.photoModal .inner{
	position:relative;
	top: 50%;
	max-width: 970px;
	margin: 0 auto;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 0 80px;
}
.photoModal.min{
	overflow-y:scroll;
}
.photoModal.min .inner{
	top:0;
	-webkit-transform:translateY(0);
  transform:translateY(0);
	-ms-transform:translateY(0);
	margin-top:30px;
	margin-bottom:30px;
}
.photoModal .sliderNavi {
	position: static;
	margin: 10px 0 0 0;
}
.photoModal .sliderNavi li{
	margin-left: 5px;
	margin-right: 5px;
}
.photoModal .sliderNavi .slick-arrow{
	position: absolute;
	top: 50%;
	margin-top: -6px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	font-size: 0;
	width: 40px;
	height: 40px;
	border-top: 12px solid  #fff100;
	border-left: 12px solid  #fff100;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: opacity 0.2s;
}
.photoModal .sliderNavi .slick-arrow:hover{
	opacity: .6;
}
.photoModal .sliderNavi .slick-prev{
	left: 20px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.photoModal .sliderNavi .slick-next{
	right: 20px;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}
@media screen and (max-width: 1200px) {
.photoModal .modalClose{
  width: 35px;
  height: 35px;
}
.photoModal .sliderNavi .slick-arrow{
	width: 30px;
	height: 30px;
	border-top: 8px solid  #fff100;
	border-left: 8px solid  #fff100;
}
.photoModal .sliderNavi .slick-prev{
	left: 30px;
}
.photoModal .sliderNavi .slick-next{
	right: 30px;
}
}
@media screen and (max-width: 750px) {
.photoModal .modalClose{
	width: 30px;
	height: 30px;
	right: 8px;
	top: 10px;
}
.photoModal .modalClose:hover{
	opacity: .6;
}
.photoModal .modalClose::before,
.photoModal .modalClose::after {
  top: 10px;
  width: 25px;
  height: 4px;
}
.photoModal .inner{
	padding: 0 40px;
}
.photoModal .sliderNavi .slick-arrow{
	width: 15px;
	height: 15px;
	border-top: 5px solid  #fff100;
	border-left: 5px solid  #fff100;
}
.photoModal .sliderNavi .slick-prev{
	left: 20px;
}
.photoModal .sliderNavi .slick-next{
	right: 20px;
}
}


/* message
-----------------------------------------------*/
#message .inner{
	max-width: 1180px;
	margin: 0 auto;
	padding: 100px 40px;
}
#message #board{
	position: relative;
	margin-top: 40px;
}
#message #board::before{
	content: "";
	background: url("../img/item-message_01.svg") center no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	padding: 8px;
	position: absolute;
	left: -8px;
	top: -8px;
	z-index: 1;
	pointer-events: none;
}
#message #board #zoom{
	position: absolute;
	bottom: 45px;
	left: 50%;
	z-index: 2;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
  transform: translateX(-50%);
	pointer-events: none;
}
#message #board .slider li{
	position: relative;
}
#message #board .slider li a{
	display: block;
}
#message .sliderNavi{
	margin-top: 40px;
	text-align: center;
}
#message .sliderNavi .slick-track{
	width: auto !important;
	transform: translate3d(0, 0, 0) !important;
}
#message .sliderNavi li{
	width: auto !important;
	float: none;
	display: inline-block;
  outline: 0;
	cursor: pointer;
	padding: 5px 40px;
	border-left: 1px solid #1a1a1a;
	font-weight: bold;
	font-size: 14px;
	-webkit-transition: background 0.2s;
	-ms-transition: background 0.2s;
	transition: background 0.2s;
}
#message .sliderNavi li:last-child{
	border-right: 1px solid #1a1a1a;
}
#message .sliderNavi li.slick-current{
	background-color: #fff100;
}
@keyframes board_anime {
  0% { width: 100%; }
  100% { width: 0; }
}
#message #board::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #fff100;
	box-sizing: border-box;
}
#message #board.fade::after{
  animation: .5s cubic-bezier(0.445, 0.05, 0.55, 0.95) both;
  animation-name: board_anime;
}
@media screen and (max-width: 1000px) {
#message #board #zoom{
	bottom: 30px;
}
}
@media screen and (max-width: 750px) {
#message .inner{
	padding: 60px 20px;
}
#message #board{
	position: relative;
	margin-top: 30px;
}
#message #board #zoom{
	bottom: 20px;
	width: 80px;
}
#message .sliderNavi{
	margin-top: 30px;
}
#message .sliderNavi li{
	padding: 5px 20px;
	font-size: 13px;
}
}


/* voice
-----------------------------------------------*/
#voice .inner{
	position: relative;
	z-index: 1;
}
#voice .inner{
	padding: 0 40px;
}
#voice .txt{
	position: relative;
	z-index: 2;
	background-image: url("../img/bgi-voice_01.png");
	background-size: 100% 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 100px 0;
	text-align: center;
}
#voice .txt h3{
	font-size: 40px;
}
#voice .txt a{
	display: block;
	width: 440px;
	margin: 30px auto 0;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 24px;
	box-sizing: border-box;
	padding: 30px 0;
	font-weight: bold;
}
#voice .txt a:hover{
opacity: 0.7;
}
#voice .txt a span{
	position: relative;
	display: inline-block;
	padding-right: 40px;
}
#voice .txt a span::before{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	display: inline-block;
	width: 30px;
	height: 28px;
	background: url("../img/ico-voice_01.svg") no-repeat;
	background-size: cover;
}
@keyframes voice_anime {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
#voice .txt{
	position: relative;
}
#voice.fade .txt{
  animation: .6s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: voice_anime;
}
@media screen and (max-width: 1000px) {
#voice .inner{
padding: 0 20px;
}
#voice .txt{
	padding: 80px 0;
}
#voice .txt h3{
	font-size: 32px;
}
#voice .txt a{
	width: 350px;
	font-size: 22px;
	margin: 20px auto 0;
	padding: 25px 0;
}
#voice .txt a span::before{
	width: 25px;
	height: 24px;
}
}
@media screen and (max-width: 750px) {
#voice .txt{
	padding: 50px 0;
}
#voice .txt h3{
	font-size: 20px;
}
#voice .txt a{
	width: 280px;
	font-size: 15px;
}
#voice .txt a span{
	padding-right: 35px;
}
}


/* ale
-----------------------------------------------*/
#ale{
	overflow: hidden;
	position: relative;
	z-index: 0;
	margin-top: -70px;
	background-color: #000;
}
#ale::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image:url(../img/bgi-ale_01.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;
}
@keyframes ale_bg {
  0% { opacity: 0;transform: scale(1.05); }
  100% { opacity: 1;transform: scale(1); }
}
#ale::before{
	opacity: 0;
}
#ale.fade::before{
  animation: .6s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: ale_bg;
}
#ale .inner{
	max-width: 1180px;
	margin: 0 auto;
	padding: 150px 50px 100px;
	text-align: center;
}
#ale .inner h3{
	margin: 0 auto;
	padding: 0 60px;
	display:inline-block;
	position:relative;
	color: #ffed00;
	font-size: 40px;
	opacity: 0;
}
#ale .inner h3:before{
	content:"";
	position:absolute;
	top: 0;
	left: 0;
	background-image:url(../img/ico-ale_01.svg);
	background-repeat:no-repeat;
	background-size: cover;
	display: inline-block;
	width: 50px;
	height: 60px;
}
#ale .inner h3:after{
	content:"";
	position:absolute;
	top: 0;
	right: 0;
	background-image:url(../img/ico-ale_02.svg);
	background-repeat:no-repeat;
	background-size: cover;
	display: inline-block;
	width: 50px;
	height: 60px;
}
@keyframes ale_txt {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
#ale.fade .inner h3{
  animation: .6s cubic-bezier(.210, .60, .350, 1) both;
  animation-name: ale_txt;
}
#ale ul{
	margin-top: 25px;
	text-align: left;
}
#ale ul li{
	font-size: 0;
	margin: 0 10px;
  outline: 0;
}
#ale ul li .box{
	display: inline-block;
	vertical-align: top;
	width: 32%;
	background-color: #fff100;
	margin:  2% 2% 0 0;
	border-radius: 6px;
}
#ale ul li .box:nth-child(3n){
	margin-right: 0;
}
#ale ul li .box .txt{
	box-sizing: border-box;
	padding: 30px 30px 25px 30px;
	font-weight: bold;
}
#ale ul li .box .txt p{
	font-size: 13px;
}
#ale ul li .box .name{
	overflow: hidden;
	box-sizing: border-box;
	padding: 15px 0;
	margin: 0 30px;
	border-top: 1px solid #1a1a1a;
}
#ale ul li .box .name strong{
	float: left;
	font-size: 13px;
}
#ale ul li .box .name span{
	float: right;
	font-size: 13px;
	font-weight: bold;
}
#ale .slick-arrow{
	position: absolute;
	top: 50%;
	margin-top: -6px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	font-size: 0;
	width: 40px;
	height: 40px;
	border-top: 12px solid  #fff100;
	border-left: 12px solid  #fff100;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: opacity 0.2s;
}
#ale .slick-arrow:hover{
	opacity: .6;
}
#ale .slick-prev{
	left: -40px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#ale .slick-next{
	right: -40px;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}
#ale .slick-dots{
	position: absolute;
	bottom: -65px;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
#ale .slick-dots li{
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 0;
	cursor: pointer;
	margin: 0 10px 0 0;
	transition: opacity 0.2s;
}
#ale .slick-dots li:hover{
	opacity: .6;
}
#ale .slick-dots li:last-child{
	margin: 0;
}
#ale .slick-dots li:first-child:last-child{
	display: none;
}
#ale .slick-dots li button {
	position: absolute;
	top:0;
	left:0;
	font-size: 0;
	line-height: 0;
	width: 13px;
	height: 13px;
	cursor: pointer;
	border: 0;
	border-radius:50%;
	text-align: center;
	opacity: .6;
	padding: 0;
	background-color: #fff100;
	-webkit-font-smoothing: antialiased;
}
#ale .slick-dots li.slick-active button{
	opacity: 1;
}
@media screen and (max-width: 1320px) {
#ale .slick-arrow{
	width: 30px;
	height: 30px;
	border-top: 8px solid  #fff100;
	border-left: 8px solid  #fff100;
}
#ale .slick-prev{
	left: -30px;
}
#ale .slick-next{
	right: -30px;
}
}
@media screen and (max-width: 750px) {
#ale{
	margin-top: -70px;
}
#ale .inner{
	padding: 100px 30px 70px;
}
#ale .inner h3{
	padding: 0 30px;
	font-size: 18px;
}
#ale .inner h3:before{
	width: 25px;
	height: 30px;
}
#ale .inner h3:after{
	width: 25px;
	height: 30px;
}
#ale ul{
	margin-top: 10px;
}
#ale ul li .box{
	margin: 10px 0 0 0;
	display: block;
	width: 100%;
	border-radius: 4px;
}
#ale ul li .box .txt{
	padding: 12px 15px;
}
#ale ul li .box .txt p{
	font-size: 12px;
}
#ale ul li .box .name{
	padding: 8px 0px;
	margin: 0 15px;
}
#ale ul li .box .name strong{
	left: 20px;
	font-size: 12px;
}
#ale ul li .box .name span{
	right: 20px;
	font-size: 12px;
}
#ale .slick-arrow{
	width: 18px;
	height: 18px;
	border-top: 5px solid  #fff100;
	border-left: 5px solid  #fff100;
	top: 50%;
	margin-top: -1px;
}
#ale .slick-prev{
	left: -15px;
}
#ale .slick-next{
	right: -15px;
}
#ale .slick-dots{
	bottom: -50px;
}
}
/* links
-----------------------------------------------*/
#links .inner{
	max-width: 1180px;
	margin: 0 auto;
	padding: 100px 40px;
}
#links p{
	font-size: 16px;
	text-align: center;
	margin-top: 30px;
}
#links ul{
	font-size: 0;
	margin-top: 30px;
}
#links ul li{
	display: inline-block;
	vertical-align: top;
	width: 32%;
	margin-right: 2%;
}
#links ul li:nth-child(3n){
	margin-right: 0;
}
#links ul li a{
	display: block;
}
#links ul li a:hover{
opacity: 0.7;
}
@media screen and (max-width: 750px) {
#links .inner{
	padding: 60px 20px;
}
#links p{
	font-size: 13px;
	margin-top: 20px;
}
#links ul{
max-width: 250px;
margin: 10px auto 0;
}
#links ul li{
	width: 100%;
	margin: 5px 0 0 0;
}
#links ul li:first-child{
	margin-top: 0;
}
}


/* sns
-----------------------------------------------*/
#sns{
	background-color:  #fff100;
}
#sns .inner{
	padding: 40px 40px;
}
#sns ul{
	font-size: 0;
	text-align: center;
}
#sns ul li{
	display: inline-block;
	vertical-align: top;
	margin: 0 30px;
}
#sns ul li a{
	display: block;
}
#sns ul li a:hover{
opacity: 0.7;
}
#sns ul li a img{
	display: block;
	margin: 0 auto;
}
#sns ul li a span{
	display: block;
	font-size: 14px;
	font-weight: bold;
	margin-top: 6px;
}
@media screen and (max-width: 750px) {
#sns .inner{
	padding: 25px 20px;
}
#sns ul li{
	margin: 0 10px;
}
#sns ul li a img{
	height: 25px;
}
#sns ul li a span{
	font-size: 10px;
	margin-top: 4px;
}
}

/* footer
-----------------------------------------------*/
footer{
	background-color: #000;
	text-align: center;
	padding: 30px 40px;
}
footer p{
	color: #fff;
	font-size: 12px;
}
@media screen and (max-width: 750px) {
footer{
	padding: 20px 20px;
}
footer p{
	font-size: 10px;
}
}

/* Slider */
.slick-slider{
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list{
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus{
	outline: none;
}
.slick-list.dragging{
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list{
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.slick-track{
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.slick-track:before,.slick-track:after{
	display: table;
	content: '';
}
.slick-track:after{
	clear: both;
}
.slick-loading .slick-track{
	visibility: hidden;
}
.slick-slide{
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
[dir='rtl'] .slick-slide{
	float: right;
}
.slick-slide img{
	display: block;
}
.slick-slide.slick-loading img{
	display: none;
}
.slick-slide.dragging img{
	pointer-events: none;
}
.slick-initialized .slick-slide{
	display: block;
}
.slick-loading .slick-slide{
	visibility: hidden;
}
.slick-vertical .slick-slide{
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
	display: none;
}