@charset "UTF-8";
/*init*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs
*/
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/*lib*/
/**
 * define valiables
 * 各scssファイルでよく使う値を変数定義
 */
/**
 * easing
 */
/**
 * function
 * 値を返す
 */
/**
 * mixins
 * ブロックを返す
 */
/*
デバイス定義
 */
/*
スマホの文字指定専用（横幅640px想定）
font-sizeにvwを設定
 */
/*
clearfix
 */
/*
iOS smooth scroll
 */
/*
opacity
 */
/*
fade
 */
/**
 * initiallize
 * タグ自体のstyleを記述
 */
html {
  font-family: "YuGothic", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  color: #464646;
  word-wrap: break-word;
}

body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

a {
  text-decoration: none;
  color: #01499d;
}

a:hover {
  text-decoration: none;
}

img {
  vertical-align: bottom;
}

strong {
  font-weight: bold;
}

input {
  padding: 0;
  border: none;
  background: none;
}

input[type=text],
input[type=tel],
input[type=password],
input[type=email],
input[type=search],
input[type=url],
input[type=datetime],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
input[type=number],
select,
textarea {
  padding: 6px;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  background-color: #fff;
  border: solid 1px #c9c9c9;
  vertical-align: bottom;
}

input[type=text]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
input[type=datetime]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=month]::-webkit-input-placeholder,
input[type=week]::-webkit-input-placeholder,
input[type=time]::-webkit-input-placeholder,
input[type=datetime-local]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #e2e2e2;
}

input[type=text]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=search]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
input[type=datetime]:-ms-input-placeholder,
input[type=date]:-ms-input-placeholder,
input[type=month]:-ms-input-placeholder,
input[type=week]:-ms-input-placeholder,
input[type=time]:-ms-input-placeholder,
input[type=datetime-local]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #e2e2e2;
}

input[type=text]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=search]::-moz-placeholder,
input[type=url]::-moz-placeholder,
input[type=datetime]::-moz-placeholder,
input[type=date]::-moz-placeholder,
input[type=month]::-moz-placeholder,
input[type=week]::-moz-placeholder,
input[type=time]::-moz-placeholder,
input[type=datetime-local]::-moz-placeholder,
input[type=number]::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
  color: #e2e2e2;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=url]:focus,
input[type=datetime]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime-local]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
  background-color: #eef4fb;
}

input[type=radio],
input[type=checkbox] {
  margin: 0;
  vertical-align: -1px;
}

input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  cursor: pointer;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  vertical-align: bottom;
}

textarea {
  resize: vertical;
  vertical-align: bottom;
}

em {
  font-style: italic;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

blockquote {
  background-color: #EEEFFF;
  padding: 1em 1em 1em 3em;
  position: relative;
  border-left: 3px solid #666;
}

blockquote:before {
  content: "“";
  font-size: 600%;
  line-height: 1em;
  color: #999;
  position: absolute;
  left: 0;
  top: 0;
}

::-moz-selection {
  background: #d4dcd6;
  /* Safari */
}

::selection {
  background: #d4dcd6;
  /* Safari */
}

::-moz-selection {
  background: #d4dcd6;
  /* Firefox */
}

.pci {
  display: inline;
}

@media only screen and (max-width: 750px) {
  .pci {
    display: none;
  }
}

.spi {
  display: none;
}

@media only screen and (max-width: 750px) {
  .spi {
    display: inline;
  }
}

.pc {
  display: block;
}

@media only screen and (max-width: 750px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}

@media only screen and (max-width: 750px) {
  .sp {
    display: block;
  }
}

.cr {
  cursor: default;
}

.fade {
  transition: opacity 0.1s ease-in-out 0s;
}

.fade:hover {
  opacity: 0.7;
}

.bgcolor_none {
  background-color: transparent !important;
}

.no_breadcrumbsIcon:after {
  content: "" !important;
  display: inline-block;
  margin: 0 5px;
}

.cf:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

/* IE6 */
* html .cf {
  zoom: 1;
}

/* IE7 */
*:first-child + html .cf {
  zoom: 1;
}

.noBorder {
  border: none !important;
}

/*parts*/
/*elements*/
.product {
  background: url(../img/product_sp.png);
  background-size: contain;
  padding: 0 7.5%;
  @inlude cf;
}

@media only screen and (min-width: 751px) {
  .product {
    text-align: center;
    background: url(../img/product_pc.png);
    background-size: cover;
    padding: 13px 0;
  }
}

.product .package {
  width: 30.46875%;
  padding: 22px 0;
  float: left;
}

@media only screen and (min-width: 751px) {
  .product .package {
    display: inline-block;
    width: 156px;
    float: none;
    padding: 43px 17px 43px 0;
  }
}

.product .info {
  width: 62.5%;
  font-size: 0;
  float: right;
  padding: 22px 0;
}

@media only screen and (min-width: 751px) {
  .product .info {
    width: 296px;
    display: inline-block;
    float: none;
    padding-left: 17px;
  }
}

.product .info .info_text {
  padding-bottom: 12px;
}

.product .info .link {
  text-align: right;
}

.product .info .link .link_amiibo {
  width: 21.08434%;
  display: inline-block;
}

.product .info .link .cero {
  width: 15.66265%;
  display: inline-block;
  padding: 0 2.1875%;
}

.product .info .link .download {
  width: 53.31325%;
  display: inline-block;
}

.back_to_top {
  width: 67.03125%;
  margin: 10% auto 0;
}

.back_to_top img {
  border: 2px solid #000;
}

@media only screen and (min-width: 751px) {
  .back_to_top img {
    padding: 1px 0;
  }
}

@media only screen and (min-width: 751px) {
  .back_to_top {
    width: 245px;
    margin: 60px auto 0;
  }
  .back_to_top img:hover {
    border: 2px solid #db0000;
  }
}

.bottom_link ul {
  width: 67.03125%;
  margin: 0 auto;
  list-style: none;
  padding-top: 10%;
}

@media only screen and (min-width: 751px) {
  .bottom_link ul {
    width: 680px;
    font-size: 0;
    padding-top: 50px;
  }
}

.bottom_link ul li {
  margin-bottom: 20px;
}

@media only screen and (min-width: 751px) {
  .bottom_link ul li {
    width: 210px;
    display: inline-block;
  }
}

@media only screen and (min-width: 751px) {
  .bottom_link ul li:nth-child(even) {
    margin: 0 18px;
  }
}

.bottom_link ul li:last-child {
  margin-bottom: 32.5px;
}

@media only screen and (min-width: 751px) {
  .bottom_link ul li:last-child {
    margin-bottom: 46px;
  }
}

.bottom_link ul li img {
  border: 2px solid #000;
}

@media only screen and (min-width: 751px) {
  .bottom_link ul li img {
    padding: 1px 1px;
  }
}

.bottom_link ul li img:hover {
  border: 2px solid #db0000;
}

.bottom_link .sns {
  font-size: 0;
  text-align: center;
  padding-bottom: 35.5px;
}

.bottom_link .sns .twitter {
  width: 12.34375%;
  display: inline-block;
  padding-right: 2.34375%;
}

@media only screen and (min-width: 751px) {
  .bottom_link .sns .twitter {
    width: 54px;
    padding-right: 10px;
  }
}

.bottom_link .sns .facebook {
  width: 12.34375%;
  display: inline-block;
  padding-left: 2.34375%;
}

@media only screen and (min-width: 751px) {
  .bottom_link .sns .facebook {
    width: 54px;
    padding-left: 10px;
  }
}

.footer .bottom_gif {
  width: 64.0625%;
  margin: 0 auto;
}

@media only screen and (min-width: 751px) {
  .footer .bottom_gif {
    width: 605px;
  }
}

.footer .footer_nav {
  font-size: 12px;
  background-color: #000;
  padding: 15px 0;
}

@media only screen and (min-width: 751px) {
  .footer .footer_nav {
    font-size: 15px;
    padding: 19px 0;
  }
}

.footer .footer_nav .siteLinks {
  text-align: center;
  color: #fff;
  line-height: 15px;
  font-weight: bold;
}

.footer .footer_nav .siteLinks a {
  color: #fff;
}

.footer .footer_inner {
  font-size: 12px;
  padding: 15px 0;
}

@media only screen and (min-width: 751px) {
  .footer .footer_inner {
    padding: 19px 0;
  }
}

@media only screen and (min-width: 751px) {
  .footer .footer_inner .footer_wrap {
    width: 953px;
    margin: 0 auto;
  }
}

.footer .footer_inner .footer_wrap .footer_link {
  text-align: center;
  font-weight: bold;
}

@media only screen and (min-width: 751px) {
  .footer .footer_inner .footer_wrap .footer_link {
    font-size: 15px;
  }
}

.footer .footer_inner .footer_wrap .footer_link a {
  color: #000;
}

.top {
  background: url(../img/top_bg_sp.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 20px;
}

@media only screen and (min-width: 751px) {
  .top {
    background: url(../img/top_bg_pc.png) center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 0;
  }
}

.top .top_logo .top_left {
  float: left;
  width: 9.53125%;
  padding: 3.125% 0 0 0;
}

@media only screen and (min-width: 751px) {
  .top .top_logo .top_left {
    width: 52px;
    padding-left: 17px;
  }
}

.top .top_logo .top_right {
  float: right;
  width: 27.96875%;
  padding-right: 4.375%;
  padding: 4.0625% 0 0 0;
}

@media only screen and (min-width: 751px) {
  .top .top_logo .top_right {
    width: 151px;
    padding-right: 13px;
  }
}

.top h1 {
  width: 79.21875%;
  margin: 0 auto;
  position: relative;
}

.top h1#top_main {
  visibility: hidden;
}

@media only screen and (min-width: 751px) {
  .top h1 {
    width: 492px;
    margin-top: -120px;
  }
}

.top h1 img {
  margin-top: -75px;
}

.top h1 .tm {
  width: 5.625%;
  position: absolute;
  bottom: 0;
  right: -6%;
}

@media only screen and (min-width: 751px) {
  .top .button {
    position: relative;
    text-align: center;
    width: 820px;
    margin: 30px auto 0;
  }
  .top .button img {
    width: auto;
  }
  .top .button > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 2px;
    z-index: 10;
  }
}

@media only screen and (min-width: 751px) and (min-width: 751px) {
  .top .button > div.manga:after {
    content: url(../img/nav_cheek_01.png);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
  }
}

@media only screen and (min-width: 751px) {
  .top .button > div.story {
    margin-top: 30px;
  }
}

@media only screen and (min-width: 751px) and (min-width: 751px) {
  .top .button > div.story:after {
    content: url(../img/nav_cheek_02.png);
    position: absolute;
    top: 54%;
    left: 55%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
  }
}

@media only screen and (min-width: 751px) and (min-width: 751px) {
  .top .button > div.stage:after {
    content: url(../img/nav_cheek_03.png);
    position: absolute;
    top: 60%;
    left: 45%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
  }
}

@media only screen and (min-width: 751px) and (min-width: 751px) {
  .top .button > div.amiibo {
    margin-top: 55px;
    margin-left: 20px;
  }
  .top .button > div.amiibo:after {
    content: url(../img/nav_cheek_04.png);
    position: absolute;
    top: 45%;
    left: 48%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
  }
}

@media only screen and (max-width: 750px) {
  .top .button {
    padding-top: 20px;
    position: relative;
  }
  .top .button .button_wrap .manga {
    width: 37.65625%;
    display: inline-block;
    margin-right: 8.59375%;
    margin-left: 0.78125%;
  }
  .top .button .button_wrap .stage {
    width: 38.75%;
    display: inline-block;
  }
  .top .button .button_wrap_02 {
    text-align: right;
    padding-right: 4.6875%;
  }
  .top .button .button_wrap_02 .story {
    width: 36.875%;
    display: inline-block;
    margin-right: 7.03125%;
  }
  .top .button .button_wrap_02 .amiibo {
    width: 28.90625%;
    display: inline-block;
  }
}

.top .top_bottom {
  text-align: center;
  font-size: 0;
  padding-top: 20px;
}

@media only screen and (min-width: 751px) {
  .top .top_bottom {
    max-width: 995px;
    margin: 0 auto;
    position: relative;
    padding-top: 0;
    text-align: left;
    margin-top: -90px;
  }
}

.top .top_bottom .hakodume {
  width: 43.75%;
  display: inline-block;
}

@media only screen and (min-width: 751px) {
  .top .top_bottom .hakodume {
    width: 150px;
    display: none;
    padding-right: 5px;
    padding-top: 60px;
  }
}

@media only screen and (min-width: 751px) {
  .top .top_bottom .top_gif {
    width: 276px;
    float: right;
  }
}

.sub_top {
  padding-top: 11.5px;
  padding: 11.5px 4.84375%;
  zoom: 1;
}

.sub_top:before, .sub_top:after {
  display: block;
  height: 0;
  visibility: hidden;
  content: "\0020";
}

.sub_top:after {
  clear: both;
}

@media only screen and (min-width: 751px) {
  .sub_top {
    padding: 0;
  }
}

@media only screen and (min-width: 751px) {
  .sub_top .sub_top__wrapper {
    margin: 0 auto;
    padding: 7px 0;
    position: relative;
    width: 970px;
    text-align: center;
    height: 62px;
  }
}

.sub_top .sub_top__wrapper .hakodume {
  width: 43.75%;
  display: inline-block;
  padding-right: 2%;
  display: none;
}

@media only screen and (min-width: 751px) {
  .sub_top .sub_top__wrapper .hakodume {
    width: 150px;
    display: inline-block;
    padding-right: 5px;
    position: absolute;
    left: 0px;
    top: -10px;
  }
}

.sub_top .sub_top__wrapper .top_informationBtn {
  width: 58.75%;
  display: inline-block;
  padding-bottom: 10px;
}

@media only screen and (min-width: 751px) {
  .sub_top .sub_top__wrapper .top_informationBtn {
    width: 241px;
    display: inline-block;
    padding-left: 0;
  }
  .sub_top .sub_top__wrapper .top_informationBtn_kabegami {
    width: 308px;
    display: inline-block;
    padding-left: 20px;
  }
  .sub_top .sub_top__wrapper .top_informationBtn a,
  .sub_top .sub_top__wrapper .top_informationBtn_kabegami a {
    position: relative;
    z-index: 10;
  }
}

.sub_top .time {
  display: inline-block;
  width: 60.9375%;
  float: left;
}

@media only screen and (min-width: 751px) {
  .sub_top .time {
    float: none;
    width: 520px;
  }
}

.sub_top .time .release_text {
  padding-top: 13%;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .release_text {
    padding-top: 5px;
  }
}

.sub_top .time .time_start {
  width: 53.33333%;
  padding-bottom: 8px;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .time_start {
    width: 156px;
    display: inline-block;
    padding-bottom: 0;
  }
}

.sub_top .time .countdown {
  color: #000000;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown {
    width: 340px;
    display: inline-block;
  }
}

.sub_top .time .countdown .day {
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown .day {
    font-size: 40px;
  }
}

.sub_top .time .countdown .day_img {
  display: inline-block;
  width: 4.35897%;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown .day_img img {
    width: 17px;
  }
}

.sub_top .time .countdown .hours {
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown .hours {
    font-size: 40px;
  }
}

.sub_top .time .countdown .hours_img {
  display: inline-block;
  width: 5.38462%;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown .hours_img img {
    width: 15px;
  }
}

.sub_top .time .countdown .minute {
  display: inline-block;
  font-weight: bold;
  font-size: 16x;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown .minute {
    font-size: 40px;
  }
}

.sub_top .time .countdown .minute_img {
  display: inline-block;
  width: 5.64103%;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown .minute_img img {
    width: 22px;
  }
}

.sub_top .time .countdown .seconds {
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown .seconds {
    font-size: 40px;
  }
}

.sub_top .time .countdown .seconds_img {
  display: inline-block;
  width: 5.64103%;
}

@media only screen and (min-width: 751px) {
  .sub_top .time .countdown .seconds_img img {
    width: 21px;
  }
}

.sub_top .sound {
  position: relative;
  width: 30%;
  float: right;
  border: 2px solid #000;
  border-radius: 5px;
}

@media only screen and (min-width: 751px) {
  .sub_top .sound {
    width: 116px;
    float: none;
    position: absolute;
    top: 13px;
    right: 0px;
  }
}

.sub_top .sound:before {
  content: "";
  background: url(../img/sound_name.png) no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  position: absolute;
  top: -15px;
  left: -23px;
}

.sub_top .sound .sound_header {
  font-size: 10px;
  height: 1.2em;
  border-bottom: 2px solid #000;
  text-align: center;
}

@media only screen and (min-width: 751px) {
  .sub_top .sound .sound_header {
    font-size: 12px;
  }
}

.sub_top .sound .sound_header p {
  padding-top: 2%;
  font-weight: bold;
}

.sub_top .sound .sound_vol {
  padding: 4% 19%;
  cursor: pointer;
}

.to_top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 10%;
}

@media only screen and (max-width: 750px) {
  .to_top {
    bottom: 43px;
  }
}

@media only screen and (min-width: 751px) {
  .to_top {
    width: 50px;
  }
}

.to_top img {
  width: 100%;
}

.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 100;
  top: 0;
  left: 0;
  background: #FFF;
  display: block;
}

.loading .load_text {
  position: absolute;
  width: 100%;
  top: 40%;
  text-align: center;
}

@media only screen and (max-width: 750px) {
  .loading .load_text img {
    width: 80%;
  }
}

.loading .start_audioBtn {
  position: absolute;
  bottom: 100px;
  right: 100px;
}

.wrap img {
  width: 100%;
}

.wrap .top {
  background: transparent url("../img/top_bg_pc.png") no-repeat scroll center center/cover;
}

@media only screen and (max-width: 750px) {
  .wrap .top {
    background: url(../img/top_bg_sp.png) center center;
    background-size: cover;
    padding-bottom: 5%;
  }
}

@media only screen and (min-width: 751px) {
  .wrap .top > div {
    background: transparent url("../img/top_bg-bot_pc.png") repeat-x scroll bottom center;
  }
}

.wrap .main {
  background: url(../img/main_bg_sp.png);
  background-size: cover;
}

@media only screen and (min-width: 751px) {
  .wrap .main {
    background: url(../img/main_bg_pc.png);
    background-size: cover;
    border-bottom: 6px solid #000;
  }
}

.wrap .main .main_video {
  width: 91%;
  padding: 2%;
  text-align: center;
  background: url(../img/top_bg_movie.png);
  background-size: cover;
  margin: 26.5px auto 31px;
}

@media only screen and (min-width: 751px) {
  .wrap .main .main_video {
    width: 616px;
    padding: 8px;
    margin: 52px auto 68px;
  }
}

.wrap .main .main_video .video_inner {
  width: 100%;
  margin: 0 auto;
  height: auto;
  position: relative;
  padding-top: 56.3%;
}

@media only screen and (min-width: 751px) {
  .wrap .main .main_video .video_inner {
    width: 616px;
  }
}

.wrap .main .main_video .video_inner iframe {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.wrap .main .main_video .video_inner .replace_image {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

@media only screen and (min-width: 751px) {
  .wrap .contents {
    background: url(../img/content_bg.png) center center;
    background-size: cover;
  }
}

.wrap .contents .contents_title {
  padding-top: 26.5px;
  width: 87.65625%;
  margin: 0 auto;
  padding: 26.5px 0 37.5px;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .contents_title {
    width: 554px;
    padding: 51px 0 62px;
  }
}

.wrap .contents .box {
  width: 95.625%;
  margin: 0 auto;
  margin-bottom: 41px;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box {
    width: 716px;
    background-color: #ffffff;
  }
}

.wrap .contents .box.box_01 {
  position: relative;
}

.wrap .contents .box.box_01 .hakonews {
  width: 39.6875%;
}

.wrap .contents .box.box_01 .hakoboy_gif {
  width: 14.0625%;
  position: absolute;
  bottom: 100%;
  right: 0;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box.box_01 .hakoboy_gif {
    top: -53px;
    width: 90px;
  }
}

.wrap .contents .box.box_02 .video_02 {
  font-size: 0;
  text-align: center;
  padding-bottom: 24px;
}

.wrap .contents .box.box_02 .video_02 .video_left {
  display: inline-block;
  width: 34.6875%;
  padding-right: 3.4375%;
}

.wrap .contents .box.box_02 .video_02 .video_right {
  display: inline-block;
  width: 46.71875%;
}

.wrap .contents .box.box_03 {
  position: relative;
}

.wrap .contents .box.box_03 .box_top-03__tab {
  height: 84px;
  padding-top: 20px;
  zoom: 1;
}

.wrap .contents .box.box_03 .box_top-03__tab:before, .wrap .contents .box.box_03 .box_top-03__tab:after {
  display: block;
  height: 0;
  visibility: hidden;
  content: "\0020";
}

.wrap .contents .box.box_03 .box_top-03__tab:after {
  clear: both;
}

@media only screen and (max-width: 750px) {
  .wrap .contents .box.box_03 .box_top-03__tab {
    height: auto;
  }
}

.wrap .contents .box.box_03 .box_top-03__tab li {
  float: left;
  height: 53px;
  width: 173px;
}

@media only screen and (max-width: 750px) {
  .wrap .contents .box.box_03 .box_top-03__tab li {
    height: auto;
    list-style: none;
    margin-bottom: 20px;
    width: 25%;
  }
}

.wrap .contents .box.box_03 .box_top-03__tab li.w2 {
  width: 180px;
}

@media only screen and (max-width: 750px) {
  .wrap .contents .box.box_03 .box_top-03__tab li.w2 {
    width: 25%;
  }
}

.wrap .contents .box.box_03 .box_top-03__content .video_inner {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding-top: 56.3%;
}

.wrap .contents .box.box_03 .box_top-03__content .video_inner.pw1 {
  background: url(../img/video/images/stage1.png) no-repeat center center;
  background-size: contain;
}

.wrap .contents .box.box_03 .box_top-03__content .video_inner.pw2 {
  background: url(../img/video/images/stage2.png) no-repeat center center;
  background-size: contain;
}

.wrap .contents .box.box_03 .box_top-03__content .video_inner.pw3 {
  background: url(../img/video/images/stage3.png) no-repeat center center;
  background-size: contain;
}

.wrap .contents .box.box_03 .box_top-03__content .video_inner.pw4 {
  background: url(../img/video/images/stage4.png) no-repeat center center;
  background-size: contain;
}

.wrap .contents .box.box_03 .box_top-03__content .video_inner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
  border-bottom: 4px solid #000;
  box-sizing: border-box;
  background-color: #000;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box.box_03 .box_top-03__content .video_inner video {
    border-left: 8px solid #000;
    border-right: 8px solid #000;
    border-bottom: 8px solid #000;
  }
}

.wrap .contents .box.box_03 .box_top-03__content .explanation_txt {
  font-size: 19px;
  font-weight: bold;
  padding: 24px 60px;
  text-align: center;
}

@media only screen and (max-width: 750px) {
  .wrap .contents .box.box_03 .box_top-03__content .explanation_txt {
    font-size: 16px;
    line-height: 1.3;
    padding: 16px 5px;
  }
}

.wrap .contents .box.box_03 .hakoboy_gif {
  width: 9.375%;
}

.wrap .contents .box .box_top {
  position: relative;
  cursor: pointer;
}

.wrap .contents .box .box_top.close:after {
  content: " ";
  background: url(../img/ac_button_down.png) no-repeat;
  background-size: cover;
  width: 8.4375%;
  padding-top: 8.125%;
  position: absolute;
  bottom: 24%;
  right: 5%;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box .box_top.close:after {
    padding-top: 38px;
    width: 38px;
    right: 3%;
  }
}

.wrap .contents .box .box_top.open:after {
  content: " ";
  background: url(../img/ac_button_up.png) no-repeat;
  background-size: cover;
  width: 8.4375%;
  padding-top: 8.125%;
  position: absolute;
  bottom: 24%;
  right: 5%;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box .box_top.open:after {
    padding-top: 38px;
    width: 38px;
    right: 3%;
  }
}

.wrap .contents .box .box_top .ac_button {
  width: 8.125%;
  position: absolute;
  bottom: 24%;
  right: 5%;
}

.wrap .contents .box .box_inner {
  border-left: 2.5px solid #000;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  display: none;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box .box_inner {
    border-left: 5px solid #000;
    border-right: 5px solid #000;
    border-bottom: 5px solid #000;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 0;
    display: none;
  }
}

.wrap .contents .box .box_inner.box_inner_01 {
  background-color: #000;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box .box_inner.box_inner_01 {
    background-color: none;
  }
}

.wrap .contents .box .box_inner .menu {
  width: 20.16129%;
  float: left;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box .box_inner .menu {
    width: 94px;
    float: none;
    display: inline-block;
  }
}

.wrap .contents .box .box_inner .menu .video_button {
  position: relative;
  cursor: pointer;
}

.wrap .contents .box .box_inner .menu .video_button.off:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  left: 0;
  top: 0;
}

.wrap .contents .box .box_inner .video {
  width: 79.03226%;
  float: right;
  margin-top: 8%;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box .box_inner .video {
    width: 608px;
    display: inline-block;
    float: none;
    margin-top: 0;
  }
}

.wrap .contents .box .box_inner .video .video_inner {
  position: relative;
  padding-top: 56.3%;
}

.wrap .contents .box .box_inner .video .video_inner .hako_video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0px;
}

.wrap .contents .box .box_inner .video .video_inner.pw1 {
  background: url(../img/video/images/power1.png) no-repeat center center;
  background-size: contain;
}

.wrap .contents .box .box_inner .video .video_inner.pw2 {
  background: url(../img/video/images/power2.png) no-repeat center center;
  background-size: contain;
}

.wrap .contents .box .box_inner .video .video_inner.pw3 {
  background: url(../img/video/images/power3.png) no-repeat center center;
  background-size: contain;
}

.wrap .contents .box .box_inner .video .video_inner.pw4 {
  background: url(../img/video/images/power4.png) no-repeat center center;
  background-size: contain;
}

.wrap .contents .box .box_inner .video_text {
  width: 79.03226%;
  float: right;
  padding-top: 8%;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box .box_inner .video_text {
    width: 100%;
    padding-top: 0;
  }
}

.wrap .contents .box .box_inner h2 {
  text-align: center;
  padding: 17.5px 20.5px;
  line-height: 18px;
  font-size: 12px;
}

@media only screen and (min-width: 751px) {
  .wrap .contents .box .box_inner h2 {
    font-size: 17px;
  }
}

.wrap .contents .box .box_inner h2 span {
  color: #dc0000;
}

.wrap .footer .footer_inner .footer_wrap {
  background-color: #fff;
}

@media only screen and (min-width: 751px) {
  .wrap .footer .footer_inner .footer_wrap {
    width: 953px;
    margin: 0 auto;
  }
}

.wrap .footer .footer_inner .footer_wrap .footer_link {
  text-align: center;
  color: #000;
}

@media only screen and (min-width: 751px) {
  .wrap .footer .footer_inner .footer_wrap .footer_link {
    font-size: 15px;
    float: left;
  }
}

.wrap .footer .footer_inner .footer_wrap .footer_link a {
  color: #000;
}

.wrap .footer .footer_inner .footer_wrap .copyright {
  color: #000;
  text-align: center;
  padding-top: 13px;
  font-weight: bold;
  font-size: 11px;
}

@media only screen and (min-width: 751px) {
  .wrap .footer .footer_inner .footer_wrap .copyright {
    float: right;
    padding: 0;
    font-size: 13px;
  }
}

.to_top {
  bottom: 10px;
}


@media only screen and (min-width: 751px) {
  #discountArea {
    width:100%;
    background:#ff7b00;
    text-align: center;
  }
  #discountArea .discount_pc{
    display: inline-block;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    height: auto;
    vertical-align: bottom;
  }
  #discountArea .discount_sp{
    display: none;
  }
  #discountArea a{
    display: inline-block;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 10;
  }

  #discountArea a:after{
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    opacity: 0;
  }
  .no-touchevents #discountArea a:after{
    transition: opacity 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  .no-touchevents #discountArea a:hover:after{
    opacity: 0.25;
  }

}
@media screen and (max-width: 750px) {
  #discountArea {
    width:100%;
    background:#ff7b00;
    text-align: center;
  }
  #discountArea .discount_pc{
    display: none;
  }
  #discountArea .discount_sp{
    display: inline-block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  #discountArea a{
    display: inline-block;
    width: 100%;
    text-align: center;
    position: relative;
  }
}