@charset "UTF-8";
/*
	1)	初期設定
	2)	header
	3)	footer
	4)	main
*/
/*============================================================================================================
	初期設定
============================================================================================================*/
body { color: #000; -webkit-text-size-adjust: 100%; line-height: 1.75; letter-spacing: .7px; }

div, h1, h2, h3, h4, h5, p, li, dl, dt, dd, th, td, article, header, footer, nav, span, a { -webkit-box-sizing: border-box; box-sizing: border-box; }

a { color: inherit; text-decoration: none; }

img { height: auto; width: 100%; max-width: 100%; line-height: 100%; vertical-align: bottom; }

em { font-style: normal; }

h1, h2, h3, h4, h5 { line-height: 1.4; margin: 0; word-wrap: break-word; }

p, li, td, th, dt, dd { font-size: 14px; line-height: 1.75; margin: 0; word-wrap: break-word; }

table { width: 100%; border-collapse: collapse; }

th, td { text-align: left; font-weight: normal; vertical-align: top; word-break: break-all; }

ul, ol { padding: 0; margin: 0; }

.cf:after { content: ""; display: block; clear: both; }

.close { opacity: 0.5;}

/*------------------------------------------
	フォント
------------------------------------------*/
body { font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }

/*------------------------------------------
	枠 / 背景
------------------------------------------*/
/*
#loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; background: #f64cb7; z-index: 9999; }
#loading { display: block; position: absolute; top: 45%; left: 0; right: 0; margin: 0 auto; width: 80px; height: 80px; text-align: center; color: #fff; z-index: 9999; }
*/

.wrap { margin: 0 auto; background-color: #f64cb7; animation: bg-color 6s infinite step-start; -webkit-animation: bg-color 6s infinite step-start; overflow: hidden; position: relative;}
.inner { width: 100%; margin: 0 auto; }

/*============================================================================================================
	header
============================================================================================================*/

header { position: fixed; z-index: 999; right: 0; top: 0;}
header .inr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%;}

header nav{ display: none; height: 100%; padding-top: 15.6vw; position: fixed; right: 0; top: 0; width: 100%; z-index: 999; }
header nav .menu { background-color: rgba(255,255,255,0.9); margin: 0; padding: 0; line-height: 0;}
header nav .menu li{ border-bottom: 1px solid #ec55b4;}
header nav .menu li:last-child{ border-bottom: 0;}
header nav .menu li a{ display: block; height: 100%; width: 100%;}
header nav .enq { background: rgba(236,85,180,0.9); border-bottom: 1px solid #f69dcb;}
header nav li img { height: auto; width: 100%;}

/*開閉ボタン*/
header #nav_toggle{ display: block; position: relative; height: 15.666vw; width: 15.666vw; margin-left: auto; z-index: 1000; border-bottom: 1px solid #ec55b4;}
header #nav_toggle p { position: absolute; right: 0; top: 0; width: 15.666vw; height: 15.666vw;}

/*開閉ボタン OPEN*/
.open #nav_toggle { background-color: rgba(255,255,255,0.9); position: fixed; right: 0; top: 0; width: 100%;}
.open #nav_toggle div{ background: url(../img/nav/nav-menu-on.png) no-repeat; background-size: 100%; width: 15.666vw; height: 15.666vw; margin-left: auto;} 
.open #nav_toggle img { opacity: 0;}

.share { background: rgba(236,85,180,0.9); height: 100%;}
.share ul { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4.3vw 0; border-bottom: 1px solid #f69dcb;}
.share .txt { line-height: 1; }
.share .txt img { width: 80px; }
.share .item { color: #fff; margin-left: 20px; }
.share .item.fb .fab { font-size: 50px; }
.share .item.tw .fab { font-size: 50px; }
.share .item.ln { width: 50px; }

/*============================================================================================================
	footer
============================================================================================================*/
footer { background: rgba(240, 122, 196, 1); height: auto; padding: 8vw 0; width: 100%;}
footer .ft-wrap { margin: 0 auto; width: 90%;}
footer .ft-wrap .box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; justify-content: space-between;}
footer .ft-wrap .box li:nth-child(1) { height: auto; width: 26vw;}
footer .ft-wrap .box li:nth-child(2) { height: auto; width: 10vw;}
footer .ft-wrap .box li:nth-child(3) { height: auto; width: 8vw;}
footer .ft-wrap .box li:nth-child(4) { height: auto; width: 30vw;}
footer .ft-wrap .copy { height: auto; margin: 5vw auto 0; width: 100%;;}

/*============================================================================================================
	contents
============================================================================================================*/
.contents { padding-top: 80px;}
.main { padding: 0 0 35px; position: relative; overflow: hidden; z-index: 1;}
.main .siteTtl { text-align: center; position: relative; z-index: 5;}
.main .siteTtl img { height: auto; width: 100%; }
.main .imgCharaBox { text-align: center; margin: 28% auto -21%; position: relative; z-index: 2;}
.main .bgTxt { position: absolute; top: 15px; left: 0; right: 0; margin: auto; z-index: 1; text-align: center; }
.main .bgTxt img { position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 90%; }

/* 文字切り替え */
.main .bgTxt .img01 { opacity: 1; animation: bgTxt-change1 1.5s infinite step-start; -webkit-animation: bgTxt-change1 1.5s infinite step-start; }
.main .bgTxt .img02 { opacity: 0; animation: bgTxt-change2 1.5s infinite step-start; -webkit-animation: bgTxt-change2 1.5s infinite step-start; }

@-webkit-keyframes bgTxt-change1 { 0% { opacity: 1; }
  50% { opacity: 0; } }
@keyframes bgTxt-change1 { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-webkit-keyframes bgTxt-change2 { 0% { opacity: 0; }
  50% { opacity: 1; } }
@keyframes bgTxt-change2 { 0% { opacity: 0; }
  50% { opacity: 1; } }

/* Movie */
.movie { margin: 4vw auto 0; position: relative; text-align: center; width: 90%; z-index: 5;}
.movie h2 { height: auto; width: 75.55vw;}
.movie h2 img { height: auto; width: 100%;}
.movie iframe { height: 49vw; margin: 0 auto; text-align: center; width: 100%;}
.movie h2 { margin: 5vw auto 4vw;}

/* About */
.about { background: #6495d0; padding: 10vw 0 20vw; text-align: center;}
.about .txt { margin: 10vw auto 13vw;}
.about li:nth-child(n + 2) { margin-top: 13vw;}

/* chara */
.chara { background: url(../img/character/bg.jpg) top left; position: relative; padding: 15vw 0 5vw;}
.chara h2 { position: absolute; margin: 0 auto; top: -7vw; text-align: center; width: 100%;}
.chara .thumb{
  margin: 3.3333vw auto 0;
  width: 93.3333vw;
  position: relative;
  z-index: 1;
}
.chara .slider{
  position: relative;
  z-index: 0;
}
.chara .slider .slick-next,
.chara .slider .slick-prev{
  top: 27%;
  z-index: 10;
  width: 9vw;
  height: 17.7vw;
}
.chara .slider .slick-next{ right: 3.5vw; }
.chara .slider .slick-prev{ left: 3.5vw; }
.chara .thumb .slick-slide {
  width: 22.1% !important;
}
.chara .thumb .slick-slide {
  margin-right: 2.85%;
}
.chara .thumb .slick-list {
  margin-right: -2.85%;  /* ガター分ネガティブマージン */
}
.chara .thumb li.thumb-1{
  background: url(../img/character/nav/chara01_off.png)no-repeat top / contain;
}
.chara .thumb li.thumb-2{
  background: url(../img/character/nav/chara02_off.png)no-repeat top / contain;
}
.chara .thumb li.thumb-3{
  background: url(../img/character/nav/chara03_off.png)no-repeat top / contain;
}
.chara .thumb li.thumb-4{
  background: url(../img/character/nav/chara04_off.png)no-repeat top / contain;
}
.chara .thumb li img{ opacity: 0; }

.thumb .slick-current .thumb-1 img,
.thumb .slick-current .thumb-2 img,
.thumb .slick-current .thumb-3 img,
.thumb .slick-current .thumb-4 img { opacity: 1;}
.chara .slider{ margin-top: -12vw; }

/* buy */
.buy { background: #e59f19 top left; position: relative; padding: 20vw 0 5vw;}
.buy h2 { position: absolute; margin: 0 auto; top: -7vw; text-align: center; width: 100%;}
.buy .inr { margin: 0 auto; width: 90%;}
.buy .inr .btn { margin: 0 auto 8vw; width: 82vw;}
.buy .inr .btn li:nth-child(n + 2) { margin-top: 8vw;}
.buy .inr .btn img { height: auto; width: 100%;}
.buy .spec { height: auto; margin-bottom: 2vw; width: 100%;}
.buy ul.enq { margin-left: 3vw; width: 100%;}
.buy .enq li { height: 4.533vw;}
.buy .enq li:nth-child(n + 2) { margin-top: 2vw;}
.buy .enq li img { height: 100%; width: auto;}


.buy .share { background: none; height: auto;}
.buy .share ul { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 8vw; border-bottom: none;}
.buy .share .txt { line-height: 1; }
.buy .share .txt img { width: 84px; }
.buy .share .item { color: #fff; margin-left: 20px; }
.buy .share .item.fb .fab { font-size: 45px; }
.buy .share .item.tw .fab { font-size: 45px; }
.buy .share .item.ln { width: 45px; }


/*# sourceMappingURL=style.css.map */