@charset "utf-8";
/*################################################

---------------- ブレイクポイント ----------------

記述：モバイルファースト
ブレイクポイント：640px,960px,1280px
640px未満：				スマホ
640px以上960未満：	タブレット
960px以上：				PC
1280px:可変サイズの最大値

----------------- フォントサイズ -----------------
【px指定】
body：320～1280pxの間で14～18pxまで流動的に可変　←基準

------------- テーマカラー： #c53a1d -------------
上記カラーを置換するとテーマカラーを変更できます。

################################################*/

/*============= 【base】 ==============*/
html {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  /*font-family: 'Noto Sans JP', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'sans-serif';*/
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  font-size: calc(14px + ((1vw - 3.2px) * 0.42));
  line-height: 1.5;
  color: #fff;
}

* {
  margin: 0 auto;
  padding: 0;
  word-break: break-all;
  list-style-type: none;
  border-style: none;
  font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

header {
  min-height: 40vw;
  background: #ccc;
}

header img {
  width: 100%;
}

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

a:hover {
  opacity: 0.5;
  transition: 0.2s;
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

main>section:nth-child(even) {
  background: #262626;
}

main>section:nth-child(odd) {
  background: #211614;
}

.content-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(32px + ((1vw - 3.2px) * 3.33)) calc(16px + ((1vw - 3.2px) * 1.67));
}

.content-wrap>*:not(:last-child) {
  margin-bottom: calc(32px + ((1vw - 3.2px) * 3.33));
}

.content-title {
  text-align: center;
}

.content-title h2 {
  display: inline-block;
  position: relative;
  font-size: calc(28px + ((1vw - 3.2px) * 2.92));
  letter-spacing: .1em;
  line-height: 1;
}

.content-title h2 span {
  display: block;
  font-size: 30%;
}

.content-title h2:before,
.content-title h2:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.4em;
  background-image: url(../img/title/deco.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.content-title h2:before {
  left: -1.8em;
}

.content-title h2:after {
  right: -1.7em;
}

.content-header {
  font-size: calc(18px + ((1vw - 3.2px) * 0.63));
}

.content-header>h3 {
  margin-bottom: 24px;
}

.content-header span {
  font-size: 70%;
}

.content-body>*:not(:last-child) {
  margin-bottom: calc(16px + ((1vw - 3.2px) * 1.67));
}

.popup {
  display: block;
}

.link,
.update-box a {
  color: #ff9218;
}

.list {
  font-size: 90%;
  padding-left: 1em;
  text-indent: -1em;
}

.btn>a {
  display: block;
  padding: 8px;
  font-size: 90%;
  text-align: center;
  color: #fff;
  border: 2px solid #c53a1d;
}

.d-flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: flex-start;
}

.d-flex .btn {
  flex: 1 0 320px;
  padding: 8px;
}

.col2 {
  width: 50%;
}

.col5 {
  width: 20%;
}

.brpc {
  display: none;
}

.brsp {
  display: block;
}

.youtube-wrap {
  width: 100%;
  margin-bottom: 15px;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /*アスペクト比 16:9の場合の縦幅*/
  margin: 0px auto;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.comingsoon {
  font-size: 1.1em;
  text-align: center;
}

/*============= 【menu】 ==============*/
.drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  z-index: 100;
}

.drawer-checkbox {
  display: none;
}

.drawer-icon {
  position: fixed;
  border-radius: 50%;
  bottom: 4px;
  right: 8px;
  display: block;
  height: 50px;
  width: 50px;
  z-index: 4;
  cursor: pointer;
}

.drawer-icon-hum {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: block;
  height: 3px;
  width: 36px;
  border-radius: 2px;
  background: #555;
  margin: auto;
}

.drawer-icon-hum:first-child {
  transform: translateY(-15px);
}

.drawer-icon-hum:nth-child(2) {
  transform: translateY(-5px);
}

.drawer-icon-hum:nth-child(3) {
  transform: translateY(5px);
}

.drawer-icon-hum:last-child {
  transform: translateY(15px);
}

.drawer-menu {
  position: fixed;
  top: 0;
  left: -100vw;
  max-width: 100%;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #fefefe;
  background: #222;
  z-index: 3;
}

.drawer-menu-lists {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

.drawer-menu-list {
  font-size: calc(16px + ((1vw - 3.2px) * 0.21));
  margin-bottom: 8px;
  font-weight: 700;
  color: #ff9218;
}

.drawer-menu-list span {
  display: block;
  font-size: 80%;
  color: #fff;
}

.drawer-checkbox:checked~.drawer-icon .drawer-icon-hum:nth-child(2),
.drawer-checkbox:checked~.drawer-icon .drawer-icon-hum:nth-child(3) {
  background: transparent;
}

.drawer-checkbox:checked~.drawer-icon .drawer-icon-hum:first-child {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.drawer-checkbox:checked~.drawer-icon .drawer-icon-hum:last-child {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.drawer-checkbox:checked~.drawer-menu {
  left: 0;
}

.drawer-icon .drawer-icon-hum,
.drawer-menu {
  -webkit-transition: all .3s;
  transition: all .3s;
}

.sns-wrap {
  justify-content: flex-end;
  width: 57%;
  /* height: 100%; */
  padding: 0;
  margin-top: 2%;
}

.sns-icon {
  height: 38px;
  margin: 0;
  padding: 4px 4px;
}

.logo {
  position: absolute;
  bottom: 00px;
  left: 10px;
  width: 100px;

}

/*============= 【update】 ==============*/

.update-drawer-checkbox {
  display: none;
}

.update-drawer-label {
  position: fixed;
  top: 15px;
  right: 0;
  z-index: 50;
}

.update-drawer-label-text {
  position: relative;
  padding: 10px 15px;
  font-size: 14px;
  background: #333;
  border-bottom: 4px solid #c53a1d;
}

.update-drawer-label-line {
  position: absolute;
  right: 0;
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #c53a1d;
}

.update-drawer-menu {
  position: fixed;
  top: 0;
  left: -100vw;
  max-width: 100%;
  width: 100vw;
  height: 100vh;
  background: #222;
  z-index: 3;
}

.update-wrap {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
}

.update-wrap h2 {
  margin-bottom: 8px;
  padding-left: 6px;
  font-size: 16px;
  border-left: 6px solid #c53a1d;
}

.update-wrap-inner {
  height: 60vh;
  padding: 16px;
  background: #000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

.update-box {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dotted;
}

.update-box-date {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 8px;
  font-size: 12px;
  background: #c53a1d;
  border-radius: 2px;
}

.update-box-body {
  font-size: 14px;
}

.update-drawer-label-line:first-of-type {
  width: 100%;
  transform: translateY(4px);
}

.update-drawer-label-line:nth-of-type(2) {
  width: 80%;
  transform: translateY(12px);
}

.update-drawer-label-line:nth-of-type(3) {
  width: 60%;
  transform: translateY(20px);
}

.update-drawer-label-line:last-of-type {
  width: 40%;
  transform: translateY(28px);
}

.update-drawer-checkbox:checked~.update-drawer-label .update-drawer-label-text {
  transform: translateX(5px);
}

.update-drawer-checkbox:checked~.update-drawer-label .update-drawer-label-line {
  width: 30%;
}

.update-drawer-checkbox:checked~.update-drawer-menu {
  left: 0;
}


.update-drawer-label-text,
.update-drawer-label-line,
.update-drawer-menu {
  -webkit-transition: all .3s;
  transition: all .3s;
}


/*============= 【introduction】 ==============*/
#introduction {
  text-align: center;
  font-weight: 700;
  /*background: linear-gradient(-15deg, rgba(255, 63, 0, 0.8), rgba(209, 255, 24, 0.8));*/
}

#introduction h2 {
  font-size: calc(20px + ((1vw - 3.2px) * 3.75));
}

#introduction h2 span {
  display: block;
}

#introduction p {
  font-size: calc(14px + ((1vw - 3.2px) * 1.46));
}

/*============= 【about】 ==============*/
#about .lead {
  text-align: center;
  font-size: calc(18px + ((1vw - 3.2px) * 1.88));
  font-weight: 700;
  line-height: 1.6;
}


/*============= 【event】 ==============*/
.event-box {
  padding: calc(16px + ((1vw - 3.2px) * 1.67)) calc(8px + ((1vw - 3.2px) * 0.83));
  border: 4px solid #b1904f;
  background-color: #111;
}

.event-img {
  margin-bottom: calc(16px + ((1vw - 3.2px) * 1.67));
}

.event-box-header {
  position: relative;
  margin-bottom: calc(16px + ((1vw - 3.2px) * 1.67));
  text-align: center;
}

.event-box-header h3 {
  font-size: calc(16px + ((1vw - 3.2px) * 1.67));
  margin-bottom: 8px;
}

.event-box-header h3+p {
  display: block;
  font-size: 90%;
  margin-bottom: 8px;
}

.event-box-header:after {
  content: "";
  display: block;
  min-width: 40px;
  width: 6%;
  height: 4px;
  margin: calc(8px + ((1vw - 3.2px) * 0.83)) auto 0;
  background: #b1904f;
}

.event-box-header-logo {
  justify-content: center;
}

.event-box-header-logo a {
  width: 25%;
  margin: 0;
  padding: 4px;
}

.event-information {
  max-width: 600px;
}

.event-information-box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  border: 2px solid #780000;
  margin-bottom: calc(8px + ((1vw - 3.2px) * 0.83));
}

.event-information-box-header,
.event-information-box-body {
  width: 100%;
  padding: calc(4px + ((1vw - 3.2px) * 0.21));
}

.event-information-box-header {
  background: #780000;
}

.event-box-footer .btn>a {
  margin: calc(8px + ((1vw - 3.2px) * 0.83)) 0 0;
  border: 2px solid #780000;
  background-color: #780000;
}

/*============= 【store-event】 ==============*/
.storeevent-img-wrap {
  justify-content: center;
}

.storeevent-img {
  width: 50%;
  padding: 4px;
}

.storeevent-header-eyebrow {
  max-width: 60%;
  text-align: center;
  margin-bottom: 24px;
}

/*============= 【movie】 ==============*/
.movie-box-img,
.movie-box-text {
  margin-bottom: calc(16px + ((1vw - 3.2px) * 1.67));
}

.movie-box .btn {
  margin-top: 16px;
}

.movie-box .btn a {
  color: #fff;
  border: 2px solid #111;
  background-color: #111;
}

.brand-box {
  margin-bottom: 16px;
  padding: 8px;
  border-bottom: 1px solid #fff;
}

.brand-box img {
  max-width: 60%;
  margin-bottom: 16px;
}

/*============= 【sale】 ==============*/
.sale-body .btn>a {
  font-weight: 700;
  background-color: #c53a1d;
}
.sale-body .campaign-txt span {
font-size:80%;
}
.sale-box {
  margin-bottom: 40px;
}

/*============= 【campaign】 ==============*/
.campaign-wrap {
  align-items: flex-start;
  margin: -8px;
}

.campaign-box {
  padding: 8px;
  margin: 0;
  margin-bottom: calc(16px + ((1vw - 3.2px) * 1.67));
}

.campaign-box-inner {
  padding: calc(16px + ((1vw - 3.2px) * 1.67)) calc(8px + ((1vw - 3.2px) * 0.83));
  border: 4px solid #b1904f;
  background-color: #111;
}

.campaign-box-header img {
  margin-bottom: calc(8px + ((1vw - 3.2px) * 0.83));
}

.campaign-box-header h3 {
  font-size: 24px;
}

.campaign-box-body p {
  font-size: 120%;
}

.tw-wrap {
  align-items: flex-start;
  justify-content: center;
}

.tw-box {
  width: 100%;
  margin: 0;
}

.tw-box-inner {
  padding: 8px;
}

twitter-widget {
  width: 100% !important;
}

.campaign-information-box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  border: 2px solid #b1904f;
  margin-bottom: calc(16px + ((1vw - 3.2px) * 0.83));
}

.campaign-information-box-header,
.campaign-information-box-body {
  width: 100%;
  padding: calc(4px + ((1vw - 3.2px) * 0.21));
}

.campaign-information-box-header {
  background: #b1904f;
}

.campaign-information-box-body {
  background: #111;
}

/*============= 【product】 ==============*/
.product-wrap {
  align-items: flex-start;
  justify-content: space-between;
}

.product-box {
  width: 100%;
  padding: calc(16px + ((1vw - 3.2px) * 1.67)) calc(8px + ((1vw - 3.2px) * 0.83));
  border: 4px solid #c53a1d;
  background-color: #333;
  margin-left: 0;
  margin-right: 0;
}

.product-box:not(:last-child) {
  margin-bottom: calc(16px + ((1vw - 3.2px) * 1.67));
}

.product-box-header img {
  margin-bottom: calc(8px + ((1vw - 3.2px) * 0.83));
}

.product-box-header h3 {
  font-size: calc(16px + ((1vw - 3.2px) * 1.67));
}

.product-box-body {
  margin-top: calc(16px + ((1vw - 3.2px) * 1.67));
}

.product-box-body p {
  font-size: 120%;
}

.product-box-body>*:not(:last-child) {
  margin-bottom: 16px;
}

.product-gallery {
  margin: 0 -8px;
}

.product-gallery a {
  width: 50%;
  padding: 8px;
}

/*============= 【feature】 ==============*/

.feature-wrap {
  justify-content: space-between;
}

#storeevent .content-wrap ul:nth-of-type(n+2):nth-of-type(-n+3) {
  margin: -8px -8px 50px -8px;
}

#storeevent .content-wrap ul:nth-of-type(n+2):nth-of-type(-n+3) .feature {
  width: calc(100%/2);
  margin-bottom: 0px;
  padding: 8px 8px;
  z
}

#storeevent .content-wrap ul:nth-of-type(1) .feature a {
  margin: 0;
  color: #7fb9d4;
}

#storeevent .content-wrap ul:nth-of-type(1) .feature a:hover {
  opacity: 0.5;
  transition: 0.2s;
}


#storeevent .booth-content-hdr.d-flex {
  flex-wrap: wrap;
  align-items: center;
  margin: -10px -10px 40px -10px;
}

.booth-content-hdr p span {
  font-size: 80%;
}

#storeevent .booth-content-hdr.d-flex div,
#storeevent .booth-content-hdr.d-flex a,
#storeevent .booth-content-hdr>img {
  width: 100%;
  padding: 10px;
}



.feature {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.feature>a {
  display: block;
  margin-bottom: 10px;
}


.feature>p {
  font-size: 90%;
}

.feature {
  margin-bottom: calc(16px + ((1vw - 3.2px) * 1.67));
}

/*.booth-content-hdr {
  margin-bottom: 50px !important;
}*/

.feature figure.d-flex {
  flex-wrap: wrap;
}



#campaign .feature {
  width: 100%;
}

#campaign .feature h3 {
  margin-bottom: 30px;
}

.campaign-txt {
  margin-bottom: 20px;
}

#campaign figure {
  margin: -15px;
}

#campaign figure>* {
  padding: 15px;
}

/*============= 【history】 ==============*/
.history-wrap {
  justify-content: space-between;
}

.history {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.history {
  margin-bottom: calc(8px + ((1vw - 3.2px) * 0.83));
}


/*============= 【store】 ==============*/
#store {
  background-color: #222;
}

.store-wrap {
  align-items: flex-start;
}

.store {
  margin: 0 0 calc(16px + ((1vw - 3.2px) * 1.67));
}

.store-img {
  margin-bottom: calc(8px + ((1vw - 3.2px) * 0.83));
}

.store-img-main {
  margin-bottom: calc(4px + ((1vw - 3.2px) * 0.42));
}

.store-img-sub ul {
  margin: -2px;
}

.store-img-sub li {
  width: 20%;
  padding: 2px;
}

.store-title,
.booth-content-title,
#campaign .feature h3 {
  margin-bottom: calc(8px + ((1vw - 3.2px) * 0.83));
  padding-left: 8px;
  border-left: 8px solid #c53a1d;
}

.store-title-main,
.booth-content-title {
  font-size: 140%;
  font-weight: bold;
}

.store-info {
  margin-bottom: calc(8px + ((1vw - 3.2px) * 0.83));
}

.store-button {
  margin-bottom: calc(4px + ((1vw - 3.2px) * 0.42));
  width: 48%;
}

/*============= 【footer】 ==============*/
footer {
  position: relative;
  height: 10vh;
  margin-bottom: 56px;
  background: #000;
}


.footer-logo,
.footer-pagetop {
  position: absolute;
  top: 50%;
}

.footer-logo {
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60%;
}

.footer-pagetop {
  right: 5vw;
  transform: translateY(-40%);
  width: calc(32px + ((1vw - 3.2px) * 0.83));
  color: #c53a1d;
}

/*============= 【action】 ==============*/
.link:hover,
.update-box a:hover {
  filter: hue-rotate(180deg);
}

.jsShow {
  transition: opacity .3s, visibility .3s;
  opacity: 0;
  visibility: hidden;
}

.jsShow.isShow {
  opacity: 1;
  visibility: visible;
}


  #storeevent .content-wrap .feature-wrap .feature {
    width: calc(100%/1);
    margin-bottom: 0px;
    padding: 10px;
  }
/*============= 【media query】 ==============*/
@media (min-width:640px) {
  .tw-box {
    width: 50%;
  }

  .store-wrap {
    margin: -8px;
  }

  .store {
    width: 50%;
    padding: 8px;
  }

  .feature figure.d-flex img,
  .feature figure.d-flex figcaption {
    width: 50%;
  }

  
  #storeevent .content-wrap .feature-wrap .feature {
    width: calc(100%/3);
    margin-bottom: 0px;
  }
}


@media (min-width:960px) {
  .brpc {
    display: block;
  }

  .brsp {
    display: none;
  }

  .content-header>p,
  .content-header>h3 {
    text-align: center;
  }

  header,
  main,
  footer {
    margin-left: 100px;

  }

  .drawer {
    top: 0;
    right: unset;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: 100px;
  }

  .drawer-bg {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .drawer-icon {
    right: unset;
    left: 50px;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .drawer-menu {
    left: -200px;
    max-width: 100%;
    width: 300px;
    overflow-y: auto;
    z-index: -3;
    outline: 10px solid #c53a1d;
    filter: drop-shadow(1px 1px 2px #666);
  }

  .drawer-menu-lists {
    padding-top: 150px
  }

  .drawer-menu-list {
    transition: .2s;
  }

  .drawer-menu-list:hover {
    padding-left: 6px;
    border-left: 6px solid #c53a1d;
  }

  .drawer-checkbox:checked~.drawer-menu {
    left: 100px;
  }

  .logo {
    top: 20px;
    left: 40px;
    bottom: unset;
    width: 240px;
    border-radius: 8px;
    background-color: #fff;
  }

  .sns-wrap {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 100px;
    align-items: flex-end;
    height: 18%
  }

  .sns-icon {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 30px;
  }

  .update-drawer-menu {
    left: -200px;
    width: 300px;
  }

  .update-wrap {
    top: 60%;
  }

  .update-drawer-checkbox:checked~.update-drawer-menu {
    left: 100px;
  }

  #about p {
    font-size: 120%
  }

  .event-img,
  .event-text {
    width: 50%;
  }

  .event-img {
    margin: 0;
  }

  .event-text,
  .movie-box-text,
  .storeevent-text-wrap {
    padding-left: calc(8px + ((1vw - 3.2px) * 0.83));
  }

  .storeevent-img {
    padding: 8px;
    margin: 0;
  }


  .release>* {
    width: 100%;
  }

  .release>*:first-child {
    margin-bottom: 16px;
  }

  .release .d-flex {
    justify-content: space-between;
  }

  .release .d-flex>* {
    width: 49%;
    margin: 0;
  }

  .release .d-flex>*:first-child {
    margin: 0;
  }

  .event-box-footer .btn>a:hover {
    filter: brightness(1.1);
  }

  .feature-wrap,
  .history-wrap {
    margin: -8px;
  }

  .feature,
  .history {
    width: 50%;
    padding: 8px;
  }


  #storeevent .content-wrap ul:nth-of-type(n+2):nth-of-type(n-3) .feature {

    margin-bottom: 0px;
  }

  #storeevent .booth-content-hdr.d-flex div,
  #storeevent .booth-content-hdr.d-flex a,
  #storeevent .booth-content-hdr>img {
    width: 50%;
  }

  .pc-col2 {
    width: 50%;
  }

  .pc-col3 {
    width: 33.3%;
    width: calc(100%/3);
  }

  .pc-col3 p {
    font-size: 100%;
  }

  .tw-box {
    width: 33.3%;
    width: calc(100% / 3);
    padding: 10px;
  }

  .product-gallery a {
    width: 25%;
  }

  .store {
    width: 33.3%;
    width: calc(100% / 3);
  }

  footer {
    margin-bottom: 0;
  }
}

@media (min-width:1280px) {
  body {
    font-size: 18px;
  }

  .content-wrap {
    padding: 64px 32px;
  }

}

/*1280px + 300px(update width)*/
@media (min-width:1580px) {

  header,
  main,
  footer {
    margin-left: 410px;
  }



  .update-drawer-label {
    display: none;
  }

  .update-drawer-menu {
    left: 110px;
  }
}

.event-box-footer {}