@charset "UTF-8";
/*! Made with Bones: http://themble.com/bones :) */
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.

Helpful articles on Sass file organization:
http://thesassway.com/advanced/modular-css-naming-conventions

******************************************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/
body {
  margin: 0; }

/*********************
COLORS
*********************/
/****Font_Size****/
.text_ss {
  font-size: 10px;
  font-size: 0.625rem; }
  @media only screen and (min-width: 640px) {
    .text_ss {
      font-size: 12px;
      font-size: 0.75rem; } }

.text_s {
  font-size: 12px;
  font-size: 0.75rem; }
  @media only screen and (min-width: 640px) {
    .text_s {
      font-size: 14px;
      font-size: 0.875rem; } }

.text_m {
  font-size: 14px;
  font-size: 0.875rem; }
  @media only screen and (min-width: 640px) {
    .text_m {
      font-size: 16px;
      font-size: 1rem; } }

.text_l {
  font-size: 18px;
  font-size: 1.0625rem; }
  @media only screen and (min-width: 640px) {
    .text_l {
      font-size: 24px;
      font-size: 1.5rem; } }

.text_2l {
  font-size: 20px;
  font-size: 1.25rem; }
  @media only screen and (min-width: 640px) {
    .text_2l {
      font-size: 36px;
      font-size: 2.25rem; } }

.text_xl {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: bold; }
  @media only screen and (min-width: 640px) {
    .text_xl {
      font-size: 44px;
      font-size: 2.75rem; } }

.text_color {
  color: #fff; }

.text_gray {
  color: #999999; }

/*********************
MARGIN&PADDING
*********************/
:root {
  --mgpd_tg: 3px;
  --mgpd_ss: 8px;
  --mgpd_s: 15px;
  --mgpd_m: 30px;
  --mgpd_l: 60px; }

@media only screen and (min-width: 640px) {
  :root {
    --mgpd_tg: 5px;
    --mgpd_ss: 10px;
    --mgpd_s: 20px;
    --mgpd_m: 35px;
    --mgpd_l: 110px; } }
.pd_tg {
  padding: 5px;
  padding: var(--mgpd_tg); }

.pd_ss {
  padding: 10px;
  padding: var(--mgpd_ss); }

.pd_s {
  padding: 20px;
  padding: var(--mgpd_ss); }

.pd_m {
  padding: 35px;
  padding: var(--mgpd_m); }

.pd_l {
  padding: 110px;
  padding: var(--mgpd_l); }

.pt_s {
  padding-top: 20px;
  padding-top: var(--mgpd_ss); }

.pt_m {
  padding-top: 35px;
  padding-top: var(--mgpd_m); }

.pt_l {
  padding-top: 110px;
  padding-top: var(--mgpd_l); }

.pb_s {
  padding-bottom: 20px;
  padding-bottom: var(--mgpd_ss); }

.pb_m {
  padding-bottom: 35px;
  padding-bottom: var(--mgpd_m); }

.pb_l {
  padding-bottom: 110px;
  padding-bottom: var(--mgpd_l); }

.mg_tg {
  margin: 5px;
  margin: var(--mgpd_tg); }

.mg_ss {
  margin: 10px;
  margin: var(--mgpd_ss); }

.mg_s {
  margin: 20px;
  margin: var(--mgpd_s); }

.mg_m {
  margin: 35px;
  margin: var(--mgpd_m); }

.mg_l {
  margin: 110px;
  margin: var(--mgpd_l); }

.mb_tg {
  margin-bottom: 5px;
  margin-bottom: var(--mgpd_tg); }

.mb_ss {
  margin-bottom: 10px;
  margin-bottom: var(--mgpd_ss); }

.mb_s {
  margin-bottom: 20px;
  margin-bottom: var(--mgpd_s); }

.mb_m {
  margin-bottom: 35px;
  margin-bottom: var(--mgpd_m); }

.mb_l {
  margin-bottom: 110px;
  margin-bottom: var(--mgpd_l); }

.pb_tg {
  padding-bottom: 5px;
  padding-bottom: var(--mgpd_tg); }

.pb_ss {
  padding-bottom: 10px;
  padding-bottom: var(--mgpd_ss); }

.pb_s {
  padding-bottom: 20px;
  padding-bottom: var(--mgpd_s); }

.pb_m {
  padding-bottom: 35px;
  padding-bottom: var(--mgpd_m); }

.pb_l {
  padding-bottom: 110px;
  padding-bottom: var(--mgpd_l); }

/*********************
TRANSITION
*********************/
/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
.gra {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9200+0,ffe1a5+100 */
  background: #ff9200;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #ff9200 0%, #ffe1a5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #ff9200 0%, #ffe1a5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #ff9200 0%, #ffe1a5 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9200', endColorstr='#ffe1a5',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

.trans_xl {
  -webkit-transition-duration: 2.6s;
  -webkit-animation-duration: 2.6s;
  animation-duration: 2.6s;
  transition-duration: 2.6s;
  -webkit-animation-duration: 2.6s;
  animation-duration: 2.6s; }

.trans_l {
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

.trans_m {
  -webkit-transition-duration: 1.4s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  transition-duration: 1.4s;
  transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s; }

.trans_s {
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s; }

input::placeholder, textarea::placeholder {
  color: #fff; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #fff; }
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #fff; }

/*********************
IMPORTING MODULES
Modules are reusable blocks or elements we use throughout the project.
We can break them up as much as we want or just keep them all in one.
I mean, you can do whatever you want. The world is your oyster. Unless
you hate oysters, then the world is your peanut butter & jelly sandwich.
*********************/
/* Scss Document */
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box; }

.menu-trigger {
  position: relative;
  width: 30px;
  height: 27px; }

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fc5db1;
  border-radius: 1px; }

.black.menu-trigger span {
  background-color: #fff; }

.menu-trigger span:nth-of-type(1) {
  top: 0; }

.menu-trigger span:nth-of-type(2) {
  width: 66%;
  top: 12.5px;
  right: 0;
  left: auto; }

.menu-trigger span:nth-of-type(3) {
  width: 33%;
  bottom: 0;
  right: 0;
  left: auto; }

.menu-trigger span:nth-of-type(1) {
  -webkit-animation: menu-bar01 .75s forwards;
  animation: menu-bar01 .75s forwards; }

@-webkit-keyframes menu-bar01 {
  0% {
    -webkit-transform: translateY(12.5px) rotate(45deg); }
  50% {
    -webkit-transform: translateY(12.5px) rotate(0); }
  100% {
    -webkit-transform: translateY(0) rotate(0); } }
@keyframes menu-bar01 {
  0% {
    transform: translateY(12.5px) rotate(45deg); }
  50% {
    transform: translateY(12.5px) rotate(0); }
  100% {
    transform: translateY(0) rotate(0); } }
.menu-trigger span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1; }

.menu-trigger span:nth-of-type(3) {
  -webkit-animation: menu-bar02 .75s forwards;
  animation: menu-bar02 .75s forwards; }

@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(-12.5px) rotate(-45deg); }
  50% {
    -webkit-transform: translateY(-12.5px) rotate(0); }
  100% {
    -webkit-transform: translateY(0) rotate(0); } }
@keyframes menu-bar02 {
  0% {
    transform: translateY(-12.5px) rotate(-45deg); }
  50% {
    transform: translateY(-12.5px) rotate(0); }
  100% {
    transform: translateY(0) rotate(0); } }
.drawer-open .menu-trigger span:nth-of-type(1) {
  -webkit-animation: active-menu-bar01 .75s forwards;
  animation: active-menu-bar01 .75s forwards; }

@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0); }
  50% {
    -webkit-transform: translateY(12.5px) rotate(0); }
  100% {
    -webkit-transform: translateY(12.5px) rotate(45deg); } }
@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0); }
  50% {
    transform: translateY(12.5px) rotate(0); }
  100% {
    transform: translateY(12.5px) rotate(45deg); } }
.drawer-open .menu-trigger span:nth-of-type(2) {
  opacity: 0; }

.drawer-open .menu-trigger span:nth-of-type(3) {
  width: 100%;
  -webkit-animation: active-menu-bar03 .75s forwards;
  animation: active-menu-bar03 .75s forwards; }

@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0); }
  50% {
    -webkit-transform: translateY(-12.5px) rotate(0); }
  100% {
    -webkit-transform: translateY(-12.5px) rotate(-45deg); } }
@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0); }
  50% {
    transform: translateY(-12.5px) rotate(0); }
  100% {
    transform: translateY(-12.5px) rotate(-45deg); } }
/******************************************************************
Site Name:
Author:

Stylesheet: Button Styles

Buttons are a pretty important part of your site's style, so it's
important to have a consistent baseline for them. Use this stylesheet
to create all kinds of buttons.

Helpful Links:
http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/

******************************************************************/
/*********************
BUTTON DEFAULTS
We're gonna use a placeholder selector here
so we can use common styles. We then use this
to load up the defaults in all our buttons.

Here's a quick video to show how it works:
http://www.youtube.com/watch?v=hwdVpKiJzac

*********************/
/*
An example button.
You can use this example if you want. Just replace all the variables
and it will create a button dependant on those variables.
*/
/*********************
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*********************/
/******************************************
COMMON
******************************************/
@font-face {
  font-family: 'fot';
  src: url("../font/FOT-CometStd-B.otf"); }
.fot {
  font-family: 'fot'; }

.text_pink {
  color: #fc5db1 !important; }
  .text_pink a {
    color: #fc5db1 !important; }

body {
  font-family: sans-serif;
  color: #fff;
  font-size: 14px;
  font-size: 0.875rem;
  font-feature-settings: "palt";
  letter-spacing: .02rem;
  line-height: 1.8;
  overflow-x: hidden;
  background-color: #000;
  background: url("../images/bg.png") repeat; }
  @media only screen and (min-width: 640px) {
    body {
      font-size: 16px;
      font-size: 1rem; } }
  body a, body button {
    color: #fff;
    -webkit-transition-duration: 1.4s;
    -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    transition-duration: 1.4s;
    transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }
    body a:hover, body button:hover {
      color: #e6e6e6; }
    body a:focus, body button:focus {
      color: #e6e6e6; }
  body button {
    cursor: pointer; }

*:focus {
  outline: none; }

i {
  padding-right: 5px;
  padding-right: var(--mgpd_tg); }

strong {
  font-weight: bold; }

p, .p {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.8;
  margin-bottom: 20px;
  margin-bottom: var(--mgpd_s); }
  @media only screen and (min-width: 640px) {
    p, .p {
      font-size: 16px;
      font-size: 1rem; } }

h1, .h1 {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: bold;
  font-weight: bold;
  line-height: 1.6; }
  @media only screen and (min-width: 640px) {
    h1, .h1 {
      font-size: 44px;
      font-size: 2.75rem; } }

h2, .h2 {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.6; }
  @media only screen and (min-width: 640px) {
    h2, .h2 {
      font-size: 36px;
      font-size: 2.25rem; } }

h3, .h3 {
  font-size: 18px;
  font-size: 1.0625rem;
  font-weight: bold;
  line-height: 1.7; }
  @media only screen and (min-width: 640px) {
    h3, .h3 {
      font-size: 24px;
      font-size: 1.5rem; } }

h4, .h4 {
  font-size: 14px;
  font-size: 0.875rem;
  letter-spacing: 2px; }
  @media only screen and (min-width: 640px) {
    h4, .h4 {
      font-size: 16px;
      font-size: 1rem; } }

h5, .h5 {
  font-size: 14px;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 2px; }
  @media only screen and (min-width: 640px) {
    h5, .h5 {
      font-size: 16px;
      font-size: 1rem; } }

.titleXY {
  line-height: 1.8;
  letter-spacing: 0.1rem; }

.titleY {
  line-height: 1.8; }

.titleX {
  letter-spacing: 0.2rem; }

.titleE {
  font-family: 'gillsans';
  font-weight: 900;
  font-size: 36px;
  font-size: 2.25rem;
  font-weight: bold;
  letter-spacing: .12rem;
  letter-spacing: 0.06rem; }
  @media only screen and (min-width: 640px) {
    .titleE {
      font-size: 64px;
      font-size: 4rem;
      letter-spacing: .2rem; } }

.pc_only {
  display: none; }

.tb_only {
  display: none; }

.sp_only {
  display: block; }

.pctb_only {
  display: none; }

.sptb_only {
  display: block; }

.p_relative {
  position: relative; }

.h100 {
  min-height: 100vh; }

.none {
  display: none; }

.o_hidden {
  overflow: hidden; }

.m_auto {
  margin: 0 auto; }

.m_none {
  margin: 0; }

.i_block {
  display: inline-block; }

.hover {
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s; }
  .hover:hover {
    color: #fc5db1; }

.border_b {
  border-bottom: 3px solid #000; }

.w100 {
  width: 100%; }

.pointer {
  cursor: pointer; }

.o_hidden {
  overflow: hidden; }

.text_ss {
  font-size: 10px;
  font-size: 0.625rem; }
  @media only screen and (min-width: 640px) {
    .text_ss {
      font-size: 12px;
      font-size: 0.75rem; } }

.text_s {
  font-size: 12px;
  font-size: 0.75rem; }
  @media only screen and (min-width: 640px) {
    .text_s {
      font-size: 14px;
      font-size: 0.875rem; } }

.text_m {
  font-size: 14px;
  font-size: 0.875rem; }
  @media only screen and (min-width: 640px) {
    .text_m {
      font-size: 16px;
      font-size: 1rem; } }

.text_l {
  font-size: 18px;
  font-size: 1.0625rem; }
  @media only screen and (min-width: 640px) {
    .text_l {
      font-size: 24px;
      font-size: 1.5rem; } }

.text_xl {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: bold; }
  @media only screen and (min-width: 640px) {
    .text_xl {
      font-size: 44px;
      font-size: 2.75rem; } }

.text_white {
  color: #fff !important; }

.text_bold {
  font-weight: bold !important; }

.text_center {
  text-align: center; }

.text_left {
  text-align: left; }

.text_right {
  text-align: right; }

.text_normal {
  font-weight: normal; }

.text_primary {
  color: #fc5db1; }

.bg_primary {
  background-color: #fc5db1; }

.bg_light_gray {
  background-color: #f4f4f4; }

.bg_gray {
  background-color: #cccccc; }

.bg_black {
  background-color: #000; }

.bg_white {
  background-color: #fff; }

.flex_center {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center; }

.sp_text_ss {
  font-size: 10px;
  font-size: 0.625rem; }
  @media only screen and (min-width: 640px) {
    .sp_text_ss {
      font-size: 12px;
      font-size: 0.75rem; } }

.sp_text_s {
  font-size: 12px;
  font-size: 0.75rem; }
  @media only screen and (min-width: 640px) {
    .sp_text_s {
      font-size: 14px;
      font-size: 0.875rem; } }

.sp_text_m {
  font-size: 14px;
  font-size: 0.875rem; }
  @media only screen and (min-width: 640px) {
    .sp_text_m {
      font-size: 16px;
      font-size: 1rem; } }

.sp_text_2l {
  font-size: 18px;
  font-size: 1.0625rem; }
  @media only screen and (min-width: 640px) {
    .sp_text_2l {
      font-size: 24px;
      font-size: 1.5rem; } }

.sp_text_xl {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: bold; }
  @media only screen and (min-width: 640px) {
    .sp_text_xl {
      font-size: 44px;
      font-size: 2.75rem; } }

.sp_text_center {
  text-align: center; }

.sp_text_left {
  text-align: left; }

.sp_text_right {
  text-align: right; }

.sp_text_normal {
  font-weight: normal; }

.secWrap {
  padding-bottom: 110px;
  padding-bottom: var(--mgpd_l); }

.front {
  position: relative;
  z-index: 100; }

#container {
  position: fixed; }

#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1100; }

/******************************************
ANIMATION
******************************************/
.wow {
  animation-delay: .4s;
  -webkit-animation-delay: .4s;
  transition-delay: .4s;
  -webkit-transition-delay: .4s; }

.clip_L {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0); }

.clip_L.animated {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  opacity: 1; }

.clip_R {
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%); }

.clip_R.animated {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  opacity: 1; }

.fade_L {
  transform: translate(-20px, 0); }

.fade_L.animated {
  transform: translate(0, 0);
  opacity: 1; }

.fade_R {
  transform: translate(20px, 0); }

.fade_R.animated {
  transform: translate(0, 0);
  opacity: 1; }

.fade_T {
  transform: translate(0, -20px); }

.fade_T.animated {
  transform: translate(0, 0);
  opacity: 1; }

.fade_B {
  transform: translate(0, 20px); }

.fade_B.animated {
  transform: translate(0, 0);
  opacity: 1; }

.opacity {
  opacity: 0; }

.opacity.animated {
  opacity: 1; }

.delay_1 {
  transition-delay: 1s; }

.delay_2 {
  transition-delay: 1.2s; }

.delay_3 {
  transition-delay: 2.6s; }

.delay_4 {
  transition-delay: 3.2s; }

.delay_5 {
  transition-delay: 5.6s; }

/*========================================================
HEAD
========================================================*/
.gnWrap {
  width: 100%;
  text-align: left;
  position: fixed;
  z-index: 20;
  background: #000;
  padding: 4px 0; }
  .gnWrap .gn {
    display: inline-block;
    padding: 4px;
    font-size: 12px;
    font-size: 0.75rem; }
    @media only screen and (min-width: 640px) {
      .gnWrap .gn {
        font-size: 14px;
        font-size: 0.875rem; } }
  .gnWrap .gn_lan {
    padding: 0;
    width: 70px;
    position: fixed;
    right: 0;
    top: 0;
    transform: scale(1); }

.drawer-nav {
  background-color: #000;
  padding: 35px;
  padding: var(--mgpd_m);
  z-index: 100; }

.drawer-hamburger {
  padding: 0 !important;
  width: 80px !important; }

/*========================================================
MAHIN
========================================================*/
.content_wrap {
  position: relative;
  z-index: 10; }

.shops .content_wrap {
  padding-top: 80px; }

.dot_overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(../images/dot_overlay.png);
  z-index: 5; }

.parallax-mirror {
  z-index: 10 !important; }

#container {
  opacity: 0;
  -webkit-transition-duration: 1.4s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  transition-duration: 1.4s;
  transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s; }
  #container.animated {
    opacity: 1; }

#main {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 20; }

.main_text01 {
  width: 14%; }

.main_text02 {
  width: 23%;
  margin-bottom: -12px; }

.main_text03 {
  width: 20%;
  margin-bottom: -12px; }

.main_text04 {
  width: 500px;
  max-width: 80%;
  margin-bottom: 100px; }

.main_en .main_text01 {
  width: 12%; }
.main_en .main_text02 {
  width: 45%;
  margin-bottom: -7px; }
.main_en .main_text03 {
  width: 35%;
  margin-bottom: -7px; }
.main_en .main_text04 {
  width: 500px;
  max-width: 80%;
  margin-bottom: 100px; }
.main_en .text_01_en {
  position: relative;
  left: -26%;
  margin-left: -12%; }

.main_textWrap {
  position: relative;
  transform: translateY(150px); }

.main_copyWrap {
  opacity: 1;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s; }
  .main_copyWrap.animated {
    opacity: 0; }

.main_titleWrap {
  width: 100%;
  height: 100vh;
  position: relative; }
  .main_titleWrap.animated .top_bg {
    transform: scale(1); }
  .main_titleWrap .top_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: scale(1.1);
    transition-duration: 8s;
    background: url("../images/head_img_bg.png") no-repeat center center/cover; }
  .main_titleWrap .cell {
    max-width: 1200px; }
  .main_titleWrap .title_img {
    width: 100%;
    transform: scale(6);
    transition-timing-function: cubic-bezier(1, 0, 0, 1.01); }
    .main_titleWrap .title_img.animated {
      transform: scale(1); }
  .main_titleWrap .bnr_wrap {
    width: 200px; }

.title {
  z-index: 200; }

@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, 0); }
  25% {
    -webkit-transform: translate(0, -3px); }
  75% {
    -webkit-transform: translate(0, 3px); }
  100% {
    -webkit-transform: translate(0, 0); } }
@keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, 0); }
  25% {
    -webkit-transform: translate(0, -3px); }
  75% {
    -webkit-transform: translate(0, 3px); }
  100% {
    -webkit-transform: translate(0, 0); } }
.bnr_wrap {
  position: relative; }
  .bnr_wrap .bnr_02 {
    -webkit-animation: fuwafuwa 3s infinite linear alternate;
    animation: fuwafuwa 3s infinite linear alternate;
    left: 0; }
  .bnr_wrap img {
    position: absolute;
    bottom: 0; }

.info_wrap {
  background: #000;
  border: 4px solid #fc5db1;
  padding: 20px;
  padding: var(--mgpd_s);
  padding-top: 100px;
  transform: translateY(-130px); }

.Visit_Store_Page {
  background-color: #fc5db1;
  border-radius: 6px; }

.bnr_wrap {
  width: 300px;
  z-index: 1000;
  right: 0;
  bottom: 0; }
  .bnr_wrap .bnr_01 {
    position: relative; }

/*========================================================
TWITTER
========================================================*/
#twitter {
  position: relative; }

.item_01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 130px; }

.twi_icon {
  width: 120px; }

.twitter-timeline {
  background: #000; }

/*========================================================
TWITTER COSTUM
========================================================*/
#twitter-widget-0 {
  width: 600px !important; }

.timeline-Widget {
  background: transparent !important; }

/*========================================================
STORY
========================================================*/
#story {
  position: relative; }

.item_02 {
  position: absolute;
  bottom: 200px;
  right: 0;
  width: 50px; }

.sto_textWrap {
  overflow: hidden; }

.sto_bg {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; }
  .sto_bg img {
    max-width: 150%;
    margin-left: -25%; }

.sto_text {
  position: relative;
  z-index: 100; }
  .sto_text.fot {
    text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
    text-shadow: 2px 2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000, -2px -2px 1px #000; }

/*========================================================
CHARACTER
========================================================*/
#character {
  position: relative;
  overflow: hidden;
  padding-bottom: 10px; }

.item_03 {
  position: absolute;
  bottom: -100px;
  left: 0px;
  width: 130px; }

.cha_01 {
  position: relative; }

.item_04 {
  position: absolute;
  bottom: 10px;
  right: 0px;
  width: 100px; }

.cha01_text img {
  margin-top: -250px; }

/*========================================================
CHARACTER SLIDER
========================================================*/
.slider_wrap {
  position: relative; }
  .slider_wrap::before {
    content: "";
    padding-top: 100%;
    width: 100%;
    display: inline-block;
    background-color: #000;
    transform: rotate(-45deg);
    position: absolute; }

.slider_main .main_item .main_img {
  width: 55%;
  margin: 0 auto;
  transform: scale(1.1);
  opacity: 0;
  -webkit-transition-duration: 1.4s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  transition-duration: 1.4s;
  transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  position: relative;
  z-index: 1; }
.slider_main .main_item .main_text {
  width: 90%;
  margin: 0 auto;
  margin-top: 0;
  /*margin-top: -140px;*/
  position: relative;
  z-index: 100;
  transform: translateX(40px);
  opacity: 0;
  -webkit-transition-duration: 1.4s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  transition-duration: 1.4s;
  transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s; }
.slider_main .main_item.slick-current .main_img {
  transform: scale(1);
  opacity: 1;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  animation: clipactive 1.4s cubic-bezier(1, 0, 0, 1) 0s forwards; }
.slider_main .main_item.slick-current .main_text {
  transform: translateX(0px);
  opacity: 1; }

@keyframes clipactive {
  10% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); }
  100% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); } }
.slider_nav {
  width: 80%;
  margin: auto; }
  .slider_nav .nav_item {
    opacity: .6;
    transform: scale(0.9);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s; }
    .slider_nav .nav_item.slick-current {
      opacity: 1;
      transform: scale(1); }

/*========================================================
MOVIE
========================================================*/
.movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden; }

.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*========================================================
shops.html
========================================================*/
.shop_list {
  margin: 0 auto;
  max-width: 980px; }
  .shop_list li {
    border: 4px solid #fc5db1;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px;
    padding: var(--mgpd_ss); }
  .shop_list .shop_amazon {
    border-color: #f79502;
    background: linear-gradient(310deg, #232e3d, #f79502, #0b285e, #38a1dc);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite; }
  .shop_list .shop_nis {
    border-color: #414DA1;
    background: linear-gradient(310deg, #AB3C64, #272461, #414DA1, #E5233B);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite; }

.shops .bnr_wrap {
  position: relative;
  margin: 0 auto 35px;
  margin: 0 auto var(--mgpd_m);
  max-width: 60%; }
  .shops .bnr_wrap .bnr_01 {
    position: relative; }
  .shops .bnr_wrap .bnr_02 {
    -webkit-animation: fuwafuwa 3s infinite linear alternate;
    animation: fuwafuwa 3s infinite linear alternate;
    left: 0; }
  .shops .bnr_wrap img {
    position: absolute;
    bottom: 0;
    padding: 0; }
.shops .shop_link_btn {
  max-width: 200px; }

.shop_item_img {
  width: 80%; }

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 11%; }
  50% {
    background-position: 100% 90%; }
  100% {
    background-position: 0% 11%; } }
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 11%; }
  50% {
    background-position: 100% 90%; }
  100% {
    background-position: 0% 11%; } }
@keyframes AnimationName {
  0% {
    background-position: 0% 11%; }
  50% {
    background-position: 100% 90%; }
  100% {
    background-position: 0% 11%; } }
/*========================================================
FOOTER
========================================================*/
footer {
  width: 100%;
  position: relative;
  padding-top: 20px; }
  footer img {
    width: 100%; }
  footer .footer_text img {
    width: 300px; }
  footer .footer_bnr img {
    width: 100px; }
  footer .footer_staff {
    width: 100%; }

.footer_shops {
  z-index: -1; }
  .footer_shops img {
    position: absolute;
    bottom: 0;
    z-index: 0;
    width: 100%; }
  .footer_shops .footer_shops_inner {
    position: relative;
    z-index: 10; }

/*========================================================
system
========================================================*/
.system_wrap {
  padding-top: 80px; }
  .system_wrap .system_title_num {
    position: absolute;
    margin-top: -50px;
    max-width: 329px;
    width: 170px;
    -webkit-animation: fuwafuwa 3s infinite linear alternate;
    animation: fuwafuwa 3s infinite linear alternate; }
  .system_wrap .system_title_text {
    max-width: 658px;
    width: 100%; }
  .system_wrap .system_text {
    position: relative;
    z-index: 100;
    max-width: 820px;
    display: inline-block;
    padding: 20px;
    border: 2px solid #fc5db1;
    border-radius: 8px;
    background-color: #000; }
    .system_wrap .system_text p {
      margin: 0; }
  .system_wrap .system_img_wrap {
    position: relative; }
    .system_wrap .system_img_wrap:after {
      display: inline-block;
      content: url("../images/system_bg_obj.png");
      position: absolute;
      top: 10%;
      right: -50px;
      z-index: -2; }
  .system_wrap .system_img {
    width: 90%;
    position: relative;
    box-shadow: 0px 0px 10px 10px rgba(252, 93, 177, 0.5); }
    .system_wrap .system_img.system_01_img_L {
      width: 90%; }
    .system_wrap .system_img.system_01_img_R {
      width: 90%;
      transform: translateY(-20px);
      z-index: -1; }
  .system_wrap .system_video_box {
    position: relative;
    margin-top: -10px;
    margin-left: auto;
    width: 90%;
    background: url("../images/system_video_box.jpg") no-repeat center center/cover;
    border-radius: 8px;
    padding: 10px; }
    .system_wrap .system_video_box video {
      max-width: 100%;
      border-radius: 8px; }

#system_01 .system_video_box {
  width: 100%;
  margin-top: 10px; }

.system_world .text_left {
  font-size: 16px;
  font-size: 1rem; }

.bnr_wrap_en {
  margin-bottom: 0 !important; }

/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 640px) {
  /******************************************
  COMMON
  ******************************************/
  body {
    line-height: 1.8;
    letter-spacing: .05rem; }

  .pc_only {
    display: none; }

  .tb_only {
    display: block; }

  .sp_only {
    display: none; }

  .pctb_only {
    display: block; }

  .sptb_only {
    display: block; }

  .text_ss {
    font-size: 10px;
    font-size: 0.625rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .text_ss {
      font-size: 12px;
      font-size: 0.75rem; } }

@media only screen and (min-width: 640px) {
  .text_s {
    font-size: 12px;
    font-size: 0.75rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .text_s {
      font-size: 14px;
      font-size: 0.875rem; } }

@media only screen and (min-width: 640px) {
  .text_m {
    font-size: 14px;
    font-size: 0.875rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .text_m {
      font-size: 16px;
      font-size: 1rem; } }

@media only screen and (min-width: 640px) {
  .text_l {
    font-size: 18px;
    font-size: 1.0625rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .text_l {
      font-size: 24px;
      font-size: 1.5rem; } }

@media only screen and (min-width: 640px) {
  .text_2l {
    font-size: 20px;
    font-size: 1.25rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .text_2l {
      font-size: 36px;
      font-size: 2.25rem; } }

@media only screen and (min-width: 640px) {
  .text_xl {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: bold; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .text_xl {
      font-size: 44px;
      font-size: 2.75rem; } }

@media only screen and (min-width: 640px) {
  .tb_text_ss {
    font-size: 10px;
    font-size: 0.625rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .tb_text_ss {
      font-size: 12px;
      font-size: 0.75rem; } }

@media only screen and (min-width: 640px) {
  .tb_text_s {
    font-size: 12px;
    font-size: 0.75rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .tb_text_s {
      font-size: 14px;
      font-size: 0.875rem; } }

@media only screen and (min-width: 640px) {
  .tb_text_m {
    font-size: 14px;
    font-size: 0.875rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .tb_text_m {
      font-size: 16px;
      font-size: 1rem; } }

@media only screen and (min-width: 640px) {
  .tb_text_l {
    font-size: 18px;
    font-size: 1.0625rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .tb_text_l {
      font-size: 24px;
      font-size: 1.5rem; } }

@media only screen and (min-width: 640px) {
  .tb_text_2l {
    font-size: 20px;
    font-size: 1.25rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .tb_text_2l {
      font-size: 36px;
      font-size: 2.25rem; } }

@media only screen and (min-width: 640px) {
  .tb_text_xl {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: bold; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .tb_text_xl {
      font-size: 44px;
      font-size: 2.75rem; } }

@media only screen and (min-width: 640px) {
  .tb_text_center {
    text-align: center; }

  .tb_text_left {
    text-align: left; }

  .tb_text_right {
    text-align: right; }

  .tb_text_normal {
    font-weight: normal; }

  .readText p {
    line-height: 2.3; }

  .listText p {
    line-height: 1.8;
    letter-spacing: .05rem; }

  .btn_m {
    font-size: 14px;
    font-size: 0.875rem; } }
  @media only screen and (min-width: 640px) and (min-width: 640px) {
    .btn_m {
      font-size: 16px;
      font-size: 1rem; } }

@media only screen and (min-width: 640px) {
  .gnWrap {
    width: 100%;
    text-align: right;
    background: #000;
    padding: 10px 90px 10px 0; }
    .gnWrap .gn {
      padding: 0 20px;
      font-size: 18px;
      font-size: 1.0625rem; } }
    @media only screen and (min-width: 640px) and (min-width: 640px) {
      .gnWrap .gn {
        font-size: 24px;
        font-size: 1.5rem; } }

@media only screen and (min-width: 640px) {
  .main_titleWrap .top_bg {
    background: transparent; }

  .main_text01 {
    width: 84px; }

  .main_text02 {
    width: 174px;
    margin-bottom: -12px; }

  .main_text03 {
    width: 146px;
    margin-bottom: -12px; }

  .main_text04 {
    width: 500px; }

  .main_en .main_text01 {
    width: 78px; }
  .main_en .main_text02 {
    width: 270px;
    margin-bottom: -18px; }
  .main_en .main_text03 {
    width: 220px;
    margin-bottom: -18px; }
  .main_en .main_text04 {
    width: 500px; }
  .main_en .text_01_en {
    position: relative;
    left: -170px;
    margin-left: -64px; }

  .main_titleWrap {
    top: -50px; }
    .main_titleWrap img {
      width: 880px; }

  .parallax-mirror {
    z-index: 10 !important;
    opacity: 0;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
    .parallax-mirror.animated {
      opacity: 1;
      transition: opacity 1.4s linear;
      animation: polygons .8s ease-in-out forwards; }

  @keyframes polygons {
    10% {
      -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
    100% {
      -webkit-clip-path: polygon(50% 0%, 75% 0, 100% 0, 100% 58%, 100% 100%, 50% 100%, 0 100%, 0 57%, 0 0, 25% 0);
      clip-path: polygon(50% 0%, 75% 0, 100% 0, 100% 58%, 100% 100%, 50% 100%, 0 100%, 0 57%, 0 0, 25% 0); } }
  .twi_icon {
    width: 200px; }

  .sto_bg {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    z-index: 0; }
    .sto_bg img {
      max-width: 100%;
      margin-left: 0%; }

  .sto_textWrap {
    overflow: visible; }

  .item_01 {
    width: 300px; }

  .item_02 {
    width: 140px; }

  .item_03 {
    width: 300px; }

  .item_04 {
    width: 240px; }

  .slider_main .main_item .main_img {
    display: inline-block;
    width: 48%; }
  .slider_main .main_item .main_text {
    display: inline-block;
    width: 50%;
    margin-top: 0; }

  footer .footer_text img {
    width: 500px; }
  footer .footer_bnr img {
    width: 250px; }
  footer .footer_staff {
    bottom: 50px; }

  .shop_list li {
    padding: 35px;
    padding: var(--mgpd_m); }

  .system_wrap {
    padding-top: 0; }
    .system_wrap .system_title_num {
      position: static;
      margin-top: 0;
      max-width: 329px;
      width: 29%; }
    .system_wrap .system_title_text {
      max-width: 658px;
      width: 70%; }
    .system_wrap .system_video_box {
      width: 100%;
      margin: 0; } }
/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 1024px) {
  /******************************************
  COMMON
  ******************************************/
  .pc_only {
    display: block; }

  .tb_only {
    display: none; }

  .sp_only {
    display: none; }

  .pctb_only {
    display: block; }

  .sptb_only {
    display: none; }

  .text_ss {
    font-size: 10px;
    font-size: 0.625rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .text_ss {
      font-size: 12px;
      font-size: 0.75rem; } }

@media only screen and (min-width: 1024px) {
  .text_s {
    font-size: 12px;
    font-size: 0.75rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .text_s {
      font-size: 14px;
      font-size: 0.875rem; } }

@media only screen and (min-width: 1024px) {
  .text_m {
    font-size: 14px;
    font-size: 0.875rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .text_m {
      font-size: 16px;
      font-size: 1rem; } }

@media only screen and (min-width: 1024px) {
  .text_l {
    font-size: 18px;
    font-size: 1.0625rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .text_l {
      font-size: 24px;
      font-size: 1.5rem; } }

@media only screen and (min-width: 1024px) {
  .text_2l {
    font-size: 20px;
    font-size: 1.25rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .text_2l {
      font-size: 36px;
      font-size: 2.25rem; } }

@media only screen and (min-width: 1024px) {
  .text_xl {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: bold; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .text_xl {
      font-size: 44px;
      font-size: 2.75rem; } }

@media only screen and (min-width: 1024px) {
  .pc_text_ss {
    font-size: 10px;
    font-size: 0.625rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .pc_text_ss {
      font-size: 12px;
      font-size: 0.75rem; } }

@media only screen and (min-width: 1024px) {
  .pc_text_s {
    font-size: 12px;
    font-size: 0.75rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .pc_text_s {
      font-size: 14px;
      font-size: 0.875rem; } }

@media only screen and (min-width: 1024px) {
  .pc_text_m {
    font-size: 14px;
    font-size: 0.875rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .pc_text_m {
      font-size: 16px;
      font-size: 1rem; } }

@media only screen and (min-width: 1024px) {
  .pc_text_l {
    font-size: 18px;
    font-size: 1.0625rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .pc_text_l {
      font-size: 24px;
      font-size: 1.5rem; } }

@media only screen and (min-width: 1024px) {
  .pc_text_2l {
    font-size: 20px;
    font-size: 1.25rem; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .pc_text_2l {
      font-size: 36px;
      font-size: 2.25rem; } }

@media only screen and (min-width: 1024px) {
  .pc_text_xl {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: bold; } }
  @media only screen and (min-width: 1024px) and (min-width: 640px) {
    .pc_text_xl {
      font-size: 44px;
      font-size: 2.75rem; } }

@media only screen and (min-width: 1024px) {
  .pc_text_center {
    text-align: center; }

  .pc_text_left {
    text-align: left; }

  .pc_text_right {
    text-align: right; }

  .pc_text_normal {
    font-weight: normal; }

  .btn_m i {
    position: absolute;
    display: block;
    opacity: 0;
    transform: translate(-20px, 6px);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.67, 0, 0, 1);
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s; }
  .btn_m:hover i {
    opacity: 1;
    transform: translate(-14px, 6px); }

  .bnr_wrap {
    width: 360px; }

  .cha01_text img {
    margin-top: 0px; }

  .slider_wrap {
    max-width: 90%;
    margin: 0 auto; }

  .slider_main .main_item .main_img {
    width: 34%; }
  .slider_main .main_item .main_text {
    width: 40%; }

  .slick-arrow {
    transform: translate(0, -50%) scale(2) !important; }
    .slick-arrow.slick-prev {
      margin-left: -20px; }
    .slick-arrow.slick-next {
      margin-right: -20px; }

  .shop_item_img {
    width: 100%; } }

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