@charset "utf-8";

/* ----------------------------------------------
	Base
---------------------------------------------- */
html {
	font-size: 62.5%;
}

body {
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
	line-height: 1.3;
	color: #333;
	background-color: #000;
  width: 100%;
 -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
  touch-action: manipulation; /*ダブルタップによるパンやズーム無効*/
}

html,
body {
	height: 100%;
}

img {
	width: 100%;
	height: auto;
}

img.csImg {
	opacity: 0.8;
}

img.opImg:hover {
  opacity: 0.7;
}


@media (max-width:992px){
img.opImg:hover {
  opacity: 1;
}
}


/* ----------------------------------------------
	a
---------------------------------------------- */
a {
	color: #333;
}
a:hover {
	color: #333;
}

.content__sp {
  display: none;
}

@media (max-width:992px){
.content__pc {
  display: none;
}
.content__sp {
  display: block;
}
}


/* ----------------------------------------------
  load
---------------------------------------------- */
.loading {
  width: 100%;
  height: 100%;
  transition: all 1s;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  opacity: 1;
  visibility: visible;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

.loading-animation{
  width: 100%;
  height: 100%;
  transition: all 1s;
  background: url("../img/top/load_bg.jpg") center center no-repeat #000;
	background-size: cover;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}

#l_box {
  position: absolute;
	left: 55.5%;
	top: 39.5%;
	width: 51%;
	transform: translate(-50%,-50%);
	/*top: 0;
	left: 0;
	transform: translate(0,0);
  opacity: 0.0;
	width: 100%;*/
}

@media (max-width:992px){
.loading-animation{
  width: 100%;
  height: 100%;
  transition: all 1s;
  background: url("../img/top/load_bg_sp.jpg") center center no-repeat #000;
	background-size: cover;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

#l_box {
  position: absolute;
	left: 54%;
	top: 43.5%;
	width: 88%;
	transform: translate(-50%,-50%);
}
}

/*
.loading.is-active {
	opacity: 1;
	visibility: visible;
}
.loading-animation {
	opacity: 1;
	visibility: visible;
}
#l_box {
	opacity: 1;
}
*/


/* ----------------------------------------------
	Page Layout
---------------------------------------------- */
#document {
	position: relative;
  overflow: hidden;
	width: 100%;
  /*display: none;*/
  display: block;
}

.sp_view #document {
  display: block;
  /*display: block;*/
}

#document.article {
	display: block;
}

@media (max-width:992px){
#document {
  display: block;
	min-width: inherit;
	min-width: initial;
}
}


.atari, #atari_sp {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
	z-index: 10;
}


/* ----------------------------------------------
	mainNav
---------------------------------------------- */
#to_header_base {
  position: absolute;
	z-index: -10;
}

#mainNav {
	position: fixed;
	left: 0px;
	top: 0%;
	/*background: url("../img/top/to_header_base.png");*/
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 100%;
  
  /*メニューアンカーの位置調整*/
  height: 8.0vw;
  
  margin-top: 0%;  
}

#mainNavInr {
	position: relative;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#mainNav #header {
  display: -webkit-box; 
  display: -ms-flexbox; 
	display: flex;
	-webkit-align-items: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	width: 71%;
}

#mainNav #header #headerLogo {
  position: absolute;
	width: 20.4%;
  left: 0.5%;
  top: 0%;
}

#mainNav #header #to_logo_base {
  position: absolute;
	width: 21.1%;
  left: 0%;
  top: 0%;
}

#mainNav .to_menu_new1 {
  position: absolute;
	width: 4.427%;
  left: 25.0%;
  top: 1.77vw;
}

#mainNav .to_menu_new2 {
  position: absolute;
	width: 4.427%;
  left: 38.7%;
  top: 1.77vw;
}

#mainNav .to_menu_new3 {
  position: absolute;
	width: 4.427%;
  left: 53.6%;
  top: 1.77vw;
}

#mainNav .to_menu_new4 {
  position: absolute;
	width: 4.427%;
  left: 65.2%;
  top: 1.77vw;
}



@media (max-width:992px){
#mainNav {
  /*メニューアンカーの位置調整*/
	/*height: 14vw;仕切り分のマイナス*/
  height: 7.5vw;
}
  
#to_header_base_sp {
  position: absolute;
	z-index: -10;
}

#mainNavInr {
  -webkit-align-items: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
}

#mainNav #header {
  height: 100%;
	width: 100%;
}

#mainNav #header #headerLogo {
	width: 29.5%;
	top: -1vw;
	left: -.5%;
}
  
#mainNav #header #to_logo_base_sp {
  position: absolute;
	width: 24%;
	top: 0;
	left: 0;
}
  
}


/* ----------------------------------------------
	gnav
---------------------------------------------- */
#mainNav #headerGnav {
  position: absolute;
  /*display: -webkit-box; 
  display: -ms-flexbox; 
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;*/
	width: 100%;
	height: 8vw;
  /*left: 25.364%;
  top: 0vw;*/
}

#to_menu1,
#to_menu2 {
  height: auto;
	position: absolute;
	bottom: 18%;
}

#to_menu1 {
  width: 16.6%;
  left: 29%;
}

#to_menu2 {
  width: 25.5%;
  left: 46%;
}

#mainNav #headerGnav li:nth-of-type(n+2) {
  opacity: 0;
}

#mainNav #header #headerMenu {
	display: none;
}

@media (max-width:992px){
#mainNav #header #headerGnav{
  display: none;
}

#mainNav #header #headerMenu {
	display: block;
	width: 11.5%;
	position: absolute;
	left: 86.5%;
	top: 0.8vw;
}
}



/* ----------------------------------------------
	btnSnsWrap,companyBtn
---------------------------------------------- */
#btnSnsWrap {
  position: absolute;
	width: 15%;
	left: 74.5%;
	top: 1.4vw;
}

#btnSnsWrap .btnSns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

#btnSnsWrap .btnSns li {
	width: calc(100% / 3 - 4.5%);
	margin-right: 3%;
}

#btnSnsWrap .btnSns li:last-of-type {
  margin-right: 0;
}

#btnSnsWrap .btnSns li a {
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .5);
	display: block;
}
#btnSnsWrap .btnSns li a img {
	height: auto;
	width: 100%;
}

#btnSnsWrap .btnSns li a:hover img {
	box-shadow: 0px 0px 5px 3px rgba(253, 239, 120, 1), 0px 0px 5px 3px rgba(253, 239, 120, 0);
}

.companyBtn {
	position: absolute;
	width: 5.9%;
	left: 92%;
	top: 2.3vw;
}

.companyBtn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.companyBtn a {
  width: 100%;
  display: block;
}

.companyBtn ul li img {
	height: auto;
	pointer-events: none;
	width: 100%;
}


@media (max-width:992px){
#btnSnsWrap {
	width: 22.4%;
  left: 47%;
	top: 2vw;
	height: auto;
}
#btnSnsWrap .btnSns li {
	width: calc(100% / 3 - 3%);
}
#btnSnsWrap .btnSns li img {
	pointer-events: none;
}

.companyBtn {
	width: 11.6%;
	left: 72%;
	top: 2.9vw;
	height: auto;
}

.companyBtn ul {
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}

.companyBtn ul li img {
  pointer-events: none;
}
}



/* ----------------------------------------------
	areaMain/top
---------------------------------------------- */
#areaMain {
	position: relative;
	width: 100%;
}

#areaMain #sectionTop {
	position: relative;
}

#areaMain .sectionContents {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: url("../img/top/to_main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
  height: 60.83vw; /* 1920/1168 */
}

#to_chara {
  position: absolute;
	width: 100%;
  left: 0%;
  top: 0%;
  z-index: 10;
}

@media (max-width:992px){
#areaMain .sectionContents {
	background: none;
	height: auto;
}
}



/*スマホトップサイズ*/
/*750×1301*/

#to_word1 {
  position: absolute;
	width: 3.28%;
  left: 3.85%;
  top: 19.349%;
}

#to_bnr_link {
  position: absolute;
	width: 30.364%;
  left: 69.01%;
  top: 72.688%;
  z-index: 30;
}

@media (max-width:992px){
#to_bnr_link {
  position: absolute;
	width: 91.733%;
  left: 3.6%;
  top: 82.321%;
}
}



/* ----------------------------------------------
	mainNews
---------------------------------------------- */
#mainNews {
	background: url("../img/top/to_news.png");
	background-size: 100% auto;
	position: absolute;
	/*z-index: 1;*/
	left: 4.3%;
  top: 32%;
	width: 33%;
  height: 5.8vw;
	background-repeat: no-repeat;
  z-index: 11;
}

#mainNews .newsTxt {
	position: relative;
	width:  90%;
  height: 100%;
  left: 3%;
  overflow: hidden;
}

#mainNews .newsTxt p {
	white-space: nowrap;
  font-size: 1.1vw; 
  font-weight: 700;
	color: #fff;
	position: absolute;
	left: 1%;
	top: 71%;
	transform: translateY(-50%);
	/*text-align: center;
  text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;*/
}

#mainNews .newsTxt p .date {
	margin-right: 0.5em;
}

#mainNews .newsTxt p a {
	color: #f6f662;
}
#mainNews .newsTxt p a:hover {
	color: #f60000;
}


@media (max-width:992px){
#mainNews {
	background: url("../img/top/to_news_sp.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 85%;
	height: 6.2vw;
	left: 26%;
	top: 8.5%;
}

#mainNews .newsTxt {
	position: relative;
	width: 64%;
	height: 100%;
	top: -22%;
	left: 21%;
	overflow: hidden;
}

#mainNews .newsTxt p {
  font-size: 2.4vw;
}
  
}



/* ----------------------------------------------
	slider
---------------------------------------------- */
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 24.583%;
  position: absolute;
  left: 72.187%;
  top: 21.147%;
  z-index: 20;
}

.slider a {
  cursor: pointer;
}

.slider img {
  width: 24.7vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
  z-index: -10;
}

.slider .slick-slide {
	transform: scale(1.0);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.0;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}

.slick-prev {
  background-image:url("../img/common/top_arr01_pc_off.png?success-before"),url("../img/common/top_arr01_pc_on.png?success-after");
  background-size:contain,0 0;
  &::before,&::after{
    content:"";
    /*要素にbefore及びafterが指定されている*/
  }
  &:hover{
    background-size:0 0,contain;
  }
  background-repeat: no-repeat;
  position: absolute;/*絶対配置にする*/
  cursor: pointer;/*マウスカーソルを指マークに*/
  width: 19.5%;
  height: 16.0%;
  left: -1.5%;
  top: 42.7%;
  z-index: 10;
}

.slick-next {
  background-image:url("../img/common/top_arr02_pc_off.png?success-before"),url("../img/common/top_arr02_pc_on.png?success-after");
  background-size:contain,0 0;
  &::before,&::after{
    content:"";
    /*要素にbefore及びafterが指定されている*/
  }
  &:hover{
    background-size:0 0,contain;
  }
  background-repeat: no-repeat;
  position: absolute;/*絶対配置にする*/
  cursor: pointer;/*マウスカーソルを指マークに*/
  width: 19.5%;
  height: 16.0%;
  right: -1.5%;
  top: 42.7%;
  z-index: 10;
}

.slick-dots {
  display: none !important;
  text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*スマホ_slider*/
@media (max-width:992px){
  .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 77.066%;
    position: absolute;
    left: 12.4%;
    top: 54.419%;
    z-index: 20;
  }

  .slider a {
    cursor: pointer;
  }

  .slider img {
    width: 77.3vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
    z-index: -10;
  }
  
  .slick-prev {
    width: 19.0%;
    height: 25.0%;
    left: -4.5%;
    top: 34.7%;
    z-index: 10;
  }

  .slick-next {
    width: 19.0%;
    height: 25.0%;
    right: -4.5%;
    top: 34.7%;
    z-index: 10;
  }

 }




/* ----------------------------------------------
	top_footer/footer
---------------------------------------------- */
#top_footer, 
#footer {
  position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
  height: 7.447vw;
	box-sizing: border-box;
	background-image: url("../img/common/to_footer_base.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
	/*padding-top: 0.28%;*/
  z-index: 20;
}

#top_footer.active {
  display: none;
}

#top_footerInr,
#footerInr {
	position: relative;
	width: auto;
	overflow: visible;
  display:-webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  /*padding: 0 0.76% 0 1.39%;*/
  top: 1.0vw;
}


/*indexBanner*/
.indexBanner {
  position: absolute;
  /*display: -webkit-box; 
  display: -ms-flexbox; 
	display: flex;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;*/
  left: 74.739%;
  top: 2.3vw;
	width: 24.2%;
}

/*storeBlk*/
.indexBanner .storeBlk {
	position: relative;
}

.indexBanner .storeBlk .ttl {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}

.indexBanner .storeBlk select {
	position: absolute;
	top: 0;
	left: 40.434%;
	width: 29.0%;
	height: 36.62%;
	padding: 0 0 0 1.99%;
	margin-top: 4.0%;
	border-radius: 2px;
	border: none;
	outline: none;
	outline-offset: 0;
	font-size: 0.9vw;
	font-weight: 600;
	color: #000;
	background-color: #fff;
	background-image: url("../img/common/store_arw.png");
	background-position: 89.52% center;
	background-repeat: no-repeat;
	background-size: 7.5% auto;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2); */
	/* -moz-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2); */
	/*box-shadow: 0 0 3px 3px rgba(209,118,203,1);*/
	box-sizing: border-box;
}

.indexBanner .storeBlk select::-ms-expand {
	display: none;
}

.indexBanner .storeBlk select:focus,
.indexBanner .storeBlk select option,
.indexBanner .storeBlk select:focus option {
	border: 0;
	outline: none;
	outline-offset: 0;
}

.indexBanner .storeBlk input {
	display: block;
	position: absolute;
	top: -3%;
	left: 75%;
	width: 18.8%;
	height: 41.5%;
  margin-top: 4.9%;
	/*
	padding-top: 9.97%;*/
	/* border: 0; */
	border: none;
	outline: none;
	outline-offset: 0;
	overflow: hidden;
	vertical-align: top;
	background-color: transparent;
	background-image: url("../img/top/to_search_btn.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
	/*box-shadow: 0 0 3px 3px rgba(209,118,203,1);*/

}

/* ----------------------------------------------
		sectionInfo
---------------------------------------------- */
#sectionInfo {
	padding-top: 7.5vw;
	padding-bottom: 6vw;
	position: relative;
}
@media (max-width:992px) {
	#sectionInfo {
		padding-top: 11.5vw;
		padding-bottom: 0;
	}
}
#sectionInfo .infoBg {
	background-attachment: fixed;
	background-image: url("../img/info/info_bg.jpg");
	background-repeat: no-repeat;
	background-position: center 40%;
	background-size: cover;
	height: calc(100% - 7.5vw);
	position: fixed;
	top: 7.5vw;
	left: 0;
	width: 100%;
	z-index: -1;
}
@media (max-width:992px) {
	#sectionInfo .infoBg {
		height: calc(100% - 11.5vw);
		top: 11.5vw;
	}
}
#sectionInfo .main {
	margin-right: auto;
	margin-left: auto;
	max-width: 1400px;
	width: 76%;
}

#sectionInfo .mainShadow {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 1%, rgba(255, 255, 255, 1) 2%, rgba(255, 255, 255, 1) 98%, rgba(255,255,255,.3) 99%, rgba(255,255,255,0) 100%);
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1440px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 79%;
	z-index: -1;
}

@media (max-width:992px) {
    #sectionInfo .main {
        width: 100%;
    }
}

/* ----------------------------------------------
	page-top
---------------------------------------------- */
#page-top a img {
	width: 7vw;
	max-width: 135px;
	min-width: 67.5px;
	height: auto;
}
#page-top a {
	max-width: 135px;
	min-width: 67.5px;
	right: 1.5vw;
	bottom: .5vw;
	width: 7vw;
}
#page-top a:hover {
	opacity: .8;
}

/* ----------------------------------------------
	スマホフッター
---------------------------------------------- */
@media (max-width:992px){
#top_footer {
  display: none;
}

#footer {
  position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
  height: 61.333vw;
	/*box-sizing: border-box;*/
	background-image: url("../img/common/to_footer_base_sp.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
  margin-top: -2vw;
  padding-top: 0.0%;
}

#footerInr {
  width: 100%;
  height: 100%;
  top: 0
}

#footer .indexBanner {
  position: absolute;
  left: 3.866%;
  top: 7vw;
	width: 92.266%;
}

#footer .indexBanner li {
	margin-right: 0;
	width: 48.46%;
}

#footer .indexBanner li:nth-child(1) {
	width: 100%;
	margin: 0 auto;
}

#footer .indexBanner li:nth-of-type(n+2) {
	margin-top: 1.83%;
}

#footer .indexBanner li:nth-child(even) {
	margin-right: 2.11%;
}

.indexBanner .storeBlk select {
	left: 40.629%;
	width: 29.477%;
	height: 35.833%;
	margin-top: 4.5%;
	font-size: 3.7vw;
	background-size: 8.05% auto;
}

.indexBanner .storeBlk input {
	left: 74.5%;
	width: 19.5%;
  height: 41.5%;
	margin-top: 4.5%;
	box-shadow: none;
}
}

/* ----------------------------------------------
	complete
---------------------------------------------- */
#top_footer .to_complete,
#footer .to_complete {
  position: absolute;
	width: 8.1%;
	left: 59.583%;
  top: 2.3vw;
}

@media (max-width:992px){
#footer .to_complete {
  position: absolute;
	width: 32.666%;
	left: 23.6%;
  top: 23.5vw;
}
}

background-color: aqua;

/* ----------------------------------------------
	smaslo
---------------------------------------------- */
#top_footer .to_smaslo,
#footer .to_smaslo {
  position: absolute;
	width: 4.5%;
	left: 69.531%;
  top: 1.77vw;
}

#top_footer .to_smapachi,
#footer .to_smapachi {
  position: absolute;
	width: 4.375%;
	left: 68.906%;
  top: 2.2vw;
}

@media (max-width:992px){
#footer .to_smaslo {
  position: absolute;
	width: 18.133%;
	left: 57.866%;
  top: 24.133vw;
}
  
#footer .to_smapachi {
  position: absolute;
	width: 16.8%;
	left: 59.466%;
  top: 24vw;
}

}



/* ----------------------------------------------
	caution
---------------------------------------------- */
#top_footer .to_caution,
#footer .to_caution {
  position: absolute;
	width: 25.4%;
	left: 32%;
  top: 2.9vw;
}

@media (max-width:992px){
#footer .to_caution {
  position: absolute;
	width: 91.2%;
	left: 4.4%;
  top: 41.5vw;
}
}


/* ----------------------------------------------
	copyright
---------------------------------------------- */
#top_footer .to_copyright,
#footer .to_copyright {
  position: absolute;
	width: 27.2%;
	left: 3.5%;
  top: 3.8vw;
}

@media (max-width:992px){
#footer .to_copyright {
  position: absolute;
	width: 86.4%;
	left: 6.8%;
  top: 54vw;
}
}



/* ----------------------------------------------
	modal
---------------------------------------------- */
.modal {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-image: url("../img/common/mv_modal_bg_pc.jpg");
  background-size: cover;
  background-position: center center;
}

@media (max-width:992px){
.modal {
	/*background-image: url("../img/common/mv_modal_bg_sp.jpg");
  background-repeat: no-repeat !important;
  background-position: cover !important;*/
	background-image: url("../img/common/mv_modal_bg_sp.jpg");
  background-size: cover;
  background-position: center;
}

#modalGnav {
	background-image: url("../img/common/mv_modal_bg_sp.jpg");
}
}

.nonScroll {
	background-color: transparent;
	height: calc(100vh + 1px);
	width: 1px;
}


/* ----------------------------------------------
	modalGnav
---------------------------------------------- */
#modalGnav {
	display: none;
}

/*#modalGnav .gnavHead {
	width: 69.73%;
	margin: 9.2% auto 0;
}*/

#modalGnav .gnavLogo {
	position: absolute;
	top: 1%;
	left: 2%;
	width: 30%;
}

#modalGnav .gnavBlock {
	width: 100%;
	position: absolute;
  top: 53%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  /*max-width: 60%;*/
	/*padding: 30.0% 0 0;*/
}

#modalGnav ul#gnav li {
	position: relative;
  padding-bottom: 10%;
}

#modalGnav ul#gnav li a,
#modalGnav ul#gnav li p {
	display: block;
	text-align: center;
	width: 100%;
}

#modalGnav ul#gnav li a img,
#modalGnav ul#gnav li p img {
	margin: 0 auto;
}

#modalGnav ul#gnav .gnavTop img {
	width: 64.1%;
}

#modalGnav ul#gnav .gnavTokucho img {
	width: 59%;
}

#modalGnav ul#gnav .gnavChara img {
	width: 91%;
}

#modalGnav .gnavBtn {
	margin: 0 auto;
	width: 20%;
}

#modalGnav .to_menu_new_sp1 {
  position: absolute;
	width: 25.111%;
  left: -2.666%;
  top: 52px;
  z-index: -1;
}

#modalGnav .to_menu_new_sp2 {
  position: absolute;
	width: 25.111%;
  left: -2.666%;
  top: 170px;
  z-index: -1;
}

#modalGnav .to_menu_new_sp3 {
  position: absolute;
	width: 25.111%;
  left: 1.7%;
  top: 272px;
  z-index: -1;
}

#modalGnav .to_menu_new_sp4 {
  position: absolute;
	width: 25.111%;
  left: 10.5%;
  top: 370px;
  z-index: -1;
}

/* ----------------------------------------------
	modalMovie
---------------------------------------------- */
#modalMovie {
	background-size: auto 100%;
  overflow: auto;
}

#modalMovie .movieBlock {
	position: absolute;
	width: 62%;
  /*margin-top: 5%;
	background-color: #000;
	left: 50%;
	transform: translate(-50%, -50%);
	transform: translateX(-50%);*/
  left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
  margin-top: -3%
}

#modalMovie .movieBlock .movieBox {
	box-shadow: 0px 0px 10px 0 rgba(255, 255, 0, 1), 0px 0px 10px 0 rgb(255, 255, 0);
	position: relative;
	height: 0px;
	padding-bottom: 56.37%;
	overflow: hidden;
}

#modalMovie .movieBlock::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  background-color: #000;
  z-index: 0;
}

#modalMovie .movieBlock::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  background: rgb(0,151,73);
  /*background: linear-gradient(175deg,  rgb(0,180,255) 20%,rgb(245,0,202) 50%,rgb(255,7,0) 81%);*/
	filter: blur(10px);
  z-index: -1;
}

#modalMovie .movieBlock .movieBox iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#modalMovie .movieBtn {
	position: absolute;
  width: 11%;
	left: 50%;
  margin-left: -5.5%;
  margin-top: 3%;
	/*top: 0;
	width: 6.666%;
	transform: translateX(-50%);
	margin-top: 44%;*/
}

#modalMovie .movieBtn a {
	display: block;
}


@media (max-width:992px){
#modalMovie {
	background-repeat: repeat-y;
	background-size: 100% auto;
}
#modalMovie .movieBlock {
	position: absolute;
	width: 92%;
  margin-top: -10%
}
  
#modalMovie .movieBtn {
	position: absolute;
  width: 20%;
  margin-left: -10%;
	/*top: 0;
	width: 6.666%;
	transform: translateX(-50%);
	margin-top: 44%;*/
}

/*
#modalMovie .movieBlock {
	width: 90.75vw !important;
  margin-top: 30%;
}

#modalMovie .movieBtn {
	width: 19vw;
	margin-top: 84%;
*/
}

/* ----------------------------------------------
	z-index
---------------------------------------------- */

#load {
	z-index: 1000;
}
.modal {
	z-index: 999;
}
#pageToTop {
	z-index: 998;
}
#mainNav {
	z-index: 997;
}
#footer {
  z-index: 995;
}
#areaMain #contents .sectionTtl {
	/*z-index: 10;*/
}
#mainNav #header #headerLogo {
	z-index: 800;
}
#mainNav #header #to_logo_base {
	z-index: 700;
}
#mainNavInr::after {
	z-index: 799;
}

/* ----------------------------------------------
	mainSlide
---------------------------------------------- */
#mainSlide {
	position: absolute;
	left: 11%;
	top: 21%;
	width: 19.5%;
	margin-top: 13.2%;
}

.slide-button {
	aspect-ratio: 1 / 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	z-index: 10;
	position: absolute;
	margin-top: 48%;
	cursor: pointer;
	width: 37%;
}

#mainSlide .prev.slide-button {
	background-image: url("../img/top/top_arr_prev_off.png");
	left: -39%;
}

#mainSlide .prev.slide-button:hover {
	background-image: url("../img/top/top_arr_prev_on.png");
}

#mainSlide .next.slide-button {
	background-image: url("../img/top/top_arr_next_off.png");
	right: -39%;
}

#mainSlide .next.slide-button:hover {
	background-image: url("../img/top/top_arr_next_on.png");
}

#mainSlide a {
	display: block;
	cursor: pointer;
}

#mainSlide ul li {
	position: relative;
	padding: 2% 0;
}

#mainSlide ul li {
	position: absolute;
	width: 100%;
	top: 0;
	line-height: 0;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	transition-property: z-index, transform;
	transform: scale(0.5);
	z-index: -1;
}

@media all and (-ms-high-contrast: none) {
	#mainSlide ul li {
		transition-property: transform;
	}
}

#mainSlide ul li.neighbor {
	z-index: 2;
	/*filter: grayscale(60%);*/
}

#mainSlide ul .neighbor .slide-mask {
	background: rgba(0, 0, 0, .3);
	height: 100%;
	mix-blend-mode: darken;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#mainSlide ul li.current {
	transform: scale(1);
	z-index: 3;
}

#mainSlide ul li.neighbor.next {
	transform: scale(0.825) translateX(50%);
}

#mainSlide ul li.neighbor.prev {
	transform: scale(0.825) translateX(-50%);
}

#mainSlide ul li a,
#mainSlide ul li div {
	position: relative;
	box-shadow: 0px 0px 5px 0px #000000;
}

#mainSlide ul li .bnrDummy {
	box-shadow: none;
}

#mainSlide ul li.current a:hover {
	box-shadow: 0px 0px 20px 7px rgba(255, 255, 255, 1), 0px 0px 20px 7px rgb(255, 255, 0);
	/*filter: brightness(120%);*/
}

#mainSlide ul li.current a::after {
	position: absolute;
	background: url(../img/top/main_slide_frame01.png);
	background-size: 100% 100%;
	content: "";
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

@media (max-width:992px) {
	#mainSlide {
		left: 27.5%;
		width: 45%;
		margin-top: 70%;
	}

	.slide-button {
		margin-top: 47%;
		width: 36%;
	}

	.slide-button img {
		pointer-events: none;
	}

	#mainSlide .prev.slide-button {
		background-image: url("../img/top/top_arr_prev_on.png");
		left: -39%;
	}

	#mainSlide .next.slide-button {
		background-image: url("../img/top/top_arr_next_on.png");
		right: -39%;
	}

	#mainSlide ul li {
		padding: 0;
	}

	#mainSlide ul li.current a:hover {
		box-shadow: 0px 0px 5px 0px #000000;
	}

	#mainSlide ul li.neighbor.prev {
		transform: scale(0.79) translateX(-70%);
	}

	#mainSlide ul li.neighbor.next {
		transform: scale(0.79) translateX(70%);
	}
}
/*パネル用クラス*/

.pdisplay {
	pointer-events: none;

}