/*-----------
reset
-----------*/
* {margin: 0;padding: 0; box-sizing: border-box;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

li{list-style: none;}
/*-----------
body
-----------*/
body{
    color: var(--color);
    font-size: var(--font-size); 
    width: 100%; 
    line-height: 1.8; 
    font-family: "Zen Maru Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";
    font-optical-sizing: auto; 
    font-weight: 400;
    background: url(../images/dot_body.png) 50% 50% repeat;
}

body.black{background: #000;}
img{height: auto;}

@media screen and (max-width: 768px){
	body{width: 100%;}
	img{width: 100%;}
}

/*-----------
commone
-----------*/
a{color: var(--color-a);text-decoration: none;}
a:hover{text-decoration: underline;}
a:hover img{filter:alpha(opacity=1); -moz-opacity: 1; opacity: 1;}
a.nolink{pointer-events: none;cursor: default;}

/*flex box*/
.flex{display: flex; align-items: flex-start; flex-wrap: wrap;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}
.spacer {width: 100%; display: block;}

/*SP-on*/
.pc{display: block;}
.sp{display: none;}

@media screen and (max-width: 768px){
    .pc{display: none;}
    .sp{display: block;}
}
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}

/*-----------
ボタン
-----------*/
a.btn{
    position: relative;
    display: block;
    background: #93D3E5;
    background-size: .5em auto;
    color: var(--btn-color);
    text-align: center;
    padding: .8em 1em;
    max-width: var(--btn-max-w);
    width: 100%;
    text-decoration: none;
    border-radius: var(--border-radiue);
    font-weight: bold;
    z-index: 4;
    font-size: 110%;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
    border: 5px solid #3074A6;
    margin-left: auto;
    margin-right: auto;
}
a.btn::after {
  content: "▶";
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
  transition: 0.3s;
}
a.btn:hover { background: #3074A6; color: #FFF; }
a.btn:hover::after { transform: translateX(5px); }

/*---------
　Font
---------*/
/*Zen Maru Gothic*/
.zen-maru-gothic {
    font-family: "Zen Maru Gothic", sans-serif;
    font-style: normal;
    font-weight: 500;
  }
/*-----------
scroll
-----------*/
.window-scroll,.window-open{transform: translateY(100px); opacity: 0;}
.window-open.up,.window-scroll.up{animation: up01 1s ease forwards; transform: translateY(0); opacity: 1;}

@keyframes up01{
	0%{transform: translateY(100px); opacity: 0;}
}

/*-----------
Header
-----------*/
header {padding:1em 10px;position: relative;z-index: 50; width: 100%; height: 5vw;}
header.absolute{position: absolute; top:0; left: 0; width: 100%; height: 5vw; }
header .logo ul {
    display: flex;
    align-items: center;
}
header .logo ul li { margin: 0 1em 0 0; }
header .logo ul li:first-child img { width: auto; height: 45px; }

/*-----------
Sticker Animation
-----------*/
.animation_image {
    position: absolute !important;
    z-index: 900 !important;
}
.animation_image img {
    width: 100% !important;
    margin: 0 !important;
    animation: fuwafuwa 3s infinite;
}
@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(.5vw);
  }
  100% {
    transform: translateY(0px);
  }
}
#mv_textbox .animation_image:nth-of-type(2) { bottom: 10%; right: 0; width: 5vw;  }
#mv_textbox .animation_image:nth-of-type(3) { bottom: 1vw; right: 8%; width: 3vw;}

#mv_textbox .animation_image:nth-of-type(2) img { animation-delay: -0.5s; }
#mv_textbox .animation_image:nth-of-type(3) img { animation-delay: -1.2s; }

#mv_image .animation_image:nth-of-type(2) { top: 3%; right: 0; width: 10vw; }
#mv_image .animation_image:nth-of-type(3) { top: -1%; right: 10vw; width: 6vw;}
#mv_image .animation_image:nth-of-type(4) { top:12%; right: 6%; width: 4vw; }
#mv_image .animation_image:nth-of-type(5) { top:43%; left: 0; width: 6vw; }
#mv_image .animation_image:nth-of-type(6) { top:50%; left:5%; width: 8vw; }
#mv_image .animation_image:nth-of-type(7) { top:50%; left:-4%; width: 4vw; }
#mv_image .animation_image:nth-of-type(8) { top:48%; left:-4%; width: 2vw; }

#mv_image .animation_image:nth-of-type(2) img { animation-delay: -0.5s; }
#mv_image .animation_image:nth-of-type(3) img { animation-delay: -1.2s; }
#mv_image .animation_image:nth-of-type(4) img { animation-delay: -0.8s; }
#mv_image .animation_image:nth-of-type(5) img { animation-delay: -2.0s; }
#mv_image .animation_image:nth-of-type(6) img { animation-delay: -0.3s; }
#mv_image .animation_image:nth-of-type(7) img { animation-delay: -1.5s; }
#mv_image .animation_image:nth-of-type(8) img { animation-delay: -0.7s; }

#lead .animation_image:nth-of-type(2) { top: -20%; right: 0; width: 10vw; }
#lead .animation_image:nth-of-type(3) { bottom: -10%; left: -10vw; width: 6vw;}
#lead .animation_image:nth-of-type(4) { top:12%; right: -5%; width: 5vw; }
#lead .animation_image:nth-of-type(5) { top:-12%; right: -3%; width: 2vw; }

#lead .animation_image:nth-of-type(2) img { animation-delay: -0.5s; }
#lead .animation_image:nth-of-type(3) img { animation-delay: -1.2s; }
#lead .animation_image:nth-of-type(4) img { animation-delay: -0.8s; }
#lead .animation_image:nth-of-type(5) img { animation-delay: -2.0s; }

#preorder .animation_image:nth-of-type(1) { bottom: 0; right: 10%; width: 8vw; }
#preorder .animation_image:nth-of-type(2) { bottom: 30%; right: 7%; width: 2vw; }
#preorder .animation_image:nth-of-type(3) { bottom: 37%; right: 10%; width: 3vw;}

#preorder .animation_image:nth-of-type(1) img { animation-delay: -0.5s; }
#preorder .animation_image:nth-of-type(2) img { animation-delay: -1.2s; }
#preorder .animation_image:nth-of-type(3) img { animation-delay: -0.8s; }

#online .animation_image:nth-of-type(2) { bottom: 0; left: -8vw; width: 6vw; }
#online .animation_image:nth-of-type(3) { bottom: -4vw; left: -3.5vw; width: 5vw; }
#online .animation_image:nth-of-type(4) { bottom: -4vw; left: -5.5vw; width: 2vw;}
#online .animation_image:nth-of-type(5) { bottom: -2vw; left: -7vw; width: 1vw;}

#online .animation_image:nth-of-type(2) img { animation-delay: -0.5s; }
#online .animation_image:nth-of-type(3) img { animation-delay: -1.2s; }
#online .animation_image:nth-of-type(4) img { animation-delay: -0.8s; }
#online .animation_image:nth-of-type(5) img { animation-delay: -2.0s; }

#specifications .animation_image:nth-of-type(2) { bottom: -7vw; right: 0; width: 7vw; }
#specifications .animation_image:nth-of-type(3) { bottom: -2vw; right: 0; width: 3vw; }

#specifications .animation_image:nth-of-type(2) img { animation-delay: -1.2s; }
#specifications .animation_image:nth-of-type(3) img { animation-delay: -0.8s; }

@media (min-width: 1040px) {
  .animation_image {
    display: block !important;
  }
  @keyframes fuwafuwa {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(5px); }
    100% { transform: translateY(0px); }
  }

  #preorder .animation_image:nth-of-type(1) { right: 100px; width: 150px; } 
  #preorder .animation_image:nth-of-type(2) { right: 50px;  width: 50px; }
  #preorder .animation_image:nth-of-type(3) { right: 100px; width: 70px; }

  #online .animation_image:nth-of-type(2) { left: -120px; width: 100px; }
  #online .animation_image:nth-of-type(3) { bottom: -90px; left: -35px; width: 90px; }
  #online .animation_image:nth-of-type(4) { bottom: -80px; left: -75px; width: 30px; }
  #online .animation_image:nth-of-type(5) { bottom: -50px; left: -100px; width: 20px; }

  #specifications .animation_image:nth-of-type(2) { bottom: -120px; right: -50px; width: 120px; }
  #specifications .animation_image:nth-of-type(3) { bottom: -20px; right: -70px; width: 45px; }
}
@media (min-width: 450px) {
    .animation_image {
        display: none;
    }
    #mv_image img {
        width: 100% !important;
        margin-left: 0 !important;
    }
}
/*-----------
Heding
-----------*/
.heading {
  display: flex;  
  align-items: center; 
  justify-content: center;
  gap: 15px; 
  font-family: "Zen Maru Gothic", sans-serif;
  color: #2c6e9d; 
  font-size: 300%;
  font-weight: bold;
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
}
.heading span {
    background: url(../images/heart.png) 100% 50% no-repeat, url(../images/heart.png) 0 50% no-repeat;
    background-size: 40px auto;
    padding: 0 50px 10px 50px;
}
.heading::before,
.heading::after {
  content: '';
  flex-grow: 1; 
  height: 40px;
  border-top: 4px solid #2c6e9d;
  margin-top: 30px; 
}
.heading::before {
  border-left: 4px solid #2c6e9d;
}
.heading::after {
  border-right: 4px solid #2c6e9d;
}
#top_section .heading span {
    background: url(../images/flag.png) 0 50% no-repeat;
    background-size: 50px auto;
    padding: 0 0 10px 60px;
}
/*-----------
MV
-----------*/
#first-view {
    overflow-x: hidden;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-areas: "stack";
    /*height: 100%;*/
    /*min-height: 1400px;*/
}
#first-view-inner {
    /*position: absolute;*/
    grid-area: stack;
    position: relative;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
#mv {
    background: url(../images/dot.png) 50% 50% repeat;
    width: 100%;
    /*height: 100vh;*/
    /*max-height: 100vh;*/
    min-height: 768px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 150px 0;
    box-shadow: 0px 5px 5px -5px #777777;
}
#mv_inner {
    width: 100%;
    background: url(../images/dot_w.png) 50% 50% repeat;
    padding: 50px 0 50px 50%;
    z-index: 1;
    box-shadow: 0px 5px 5px -5px #777777;
}
#mv_image {
    width: 40%;
    grid-area: stack;
    position: relative;
    padding: 50px;
    margin: 50px 0 0 5%;
    z-index: 2;
}
#mv_image img {
    width: calc(100% + 100px);
    margin-left: -50px;
    margin-top: -50px;
    margin-bottom: -50px;
}
#mv_image_bg {
    background: #93D3E5;
    border-radius: 50px;
    box-shadow: 0px 5px 5px -5px #777777;
}
.pup_logo { display: block; margin: 0 auto 1.5em auto; }
#mv_textbox {
    width: 80%;
    position: relative;
    z-index: 30;
    text-align: center;
}
h1 {
    letter-spacing: -.2vw;
    font-size: 3vw;
    width: 80%;
    margin: 0 auto .3em auto ;
    font-weight: 900;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
}
h1 span {
    font-size: 7vw;
    display: block;
    line-height: 7vw;
}
#first-view a.btn{
    font-size: 120%;
    max-width: 540px;
    margin: 0 auto;
}
#first-view .fab {
    align-items: center;
    justify-content: center;
    margin: 1.5em 0 0 0;
}
#first-view .fab p {
    font-size: 120%;
    font-weight: bold;
    margin: 0 1em 0 0;
}
#first-view .social li {
    margin: 0 1em 0 0;
}
#first-view .social a{width: 50px;}

#EN h1 {
    font-size: 2.5vw;
}
#EN h1 span {
    font-size: 5.5vw;
    line-height: 5vw;
}
#EN .pup_logo {
    margin-bottom: 0;
}
/*-----------
#lead 
-----------*/
#lead {
    padding: 50px 0 50px 50%;
}
#lead .inner {
    position: relative;
    z-index: 101;
    width: calc(100% - 10vw);
}
.concept_textbox {
    text-align: center;
    background: #FFF;
    box-shadow: 0px 5px 5px -5px #777777;
    border-radius: 60px;
    padding: 10px;
    margin: 50px 0 0 -10vw;
    z-index: 100;
}
.textbox_inner {
    border: 5px solid #3074A6;
    border-radius: 55px;
    padding: 10%;
    color: #3074A6;
}
.concept_textbox h2 {
    font-size: 250%;
    font-weight: 900;
    margin: 0 0 .8em 0;
}
.concept_textbox p {
    font-size: 140%;
    line-height: 1.4em;
    margin: 0 0 1em;
    font-weight: bold;
}
.concept_textbox p span {
    color: #93D3E5;
}
@media screen and (max-width: 1600px){ 
    .textbox_inner {
        padding: 30px 8%;
    }
    .concept_textbox h2 {
        font-size: 200%;
    }
    #mv {
        padding: 100px 0;
    }
 }
@media screen and (max-width: 1300px){ 
    #lead {
        padding: 50px 0 ;
    }
    .concept_textbox {
      margin: 50px auto;
    }
    #lead .inner {
        width: 92%;
        margin: 0 auto;
    }
    #lead .animation_image:nth-of-type(3) {
        left: 0;
    }
    #mv {
        padding: 70px 0;
    }
 }
 @media screen and (max-width: 1040px){ 
    #mv {
        height: auto;
    }
 }
/*-----------
#point
-----------*/
#point {
    display: flex;
}
#point #point_title {
    display: flex;
    align-items: center;
    margin: 0 0 2em 0;
}
#point #point_title h2 {
    margin: 0 1em 0 0;
}
#point #point_title p {
    font-size: 110%;
}
#point .inner{max-width: 1200px; width: 92%; margin: 0 auto;}
#point .special_text {
    font-size: 160%;
    font-weight: bold;
    margin: 0 0 4em 0;
}
#point .box_wrap{ }
#point .box{ line-height: 1;}
#point .box a{display: block; }

#point .column-1{width: 100%;}
#point .column-2{width: calc((100% - 40px) / 2);}
#point .column-3{width: calc((100% - 60px) / 3);}

#point .img_wrap{ justify-content: space-between; }
#point .img_wrap dt{ border-radius: 60px; overflow: hidden; box-shadow: 0px 5px 5px -5px #777777; }

#point .img_wrap a:hover img { transform:scale(1.05); }
#point .img_wrap a img { transition: 0.3s; }
#point dt{margin-top: 20px; } 
#point dd{
    line-height: 2;
    margin-top: 1em;
    font-size: 90%;
    font-weight: bold;
    background: #fff;
    padding: 6px;
    border-radius: 100px;
    text-align: center;
    min-height: 100px;
    box-shadow: 0px 5px 5px -5px #777777;
}
#point dd p{
    width: 100%;
    border: 5px solid #3074A6;
    padding: 6px 1.5em;
    border-radius: 100px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#EN #point dd{line-height: 1.6;}
#point .img_wrap img {
    display: block;
}
/*-----------
Product
-----------*/
#product{
    width: 100%;
    padding: 100px 0 0 0;
    margin: -15px 0 0 0;
    position: relative;
}

#comparison{border: none; padding: 0; max-width: 1500px; width: 80%; margin: 20% auto 0;}

/*-----------
Preorder
-----------*/
#preorder { padding: 3em 0; max-width: 1200px; width: 92%; margin: 0 auto; position: relative; }
#preorder h2{text-align: center;font-size:160%; font-weight: bold; margin: 0 0 1em 0;}
#preorder p.date{text-align: center; font-size: 200%; font-weight: bold; margin: 0 0 1em 0;}

#preorder .btn{margin-top: 1rem;}
.preorder_tokuten {
    max-width: 1000px;
    background: #FFF;
    margin: .5em auto 5em auto;
    position: relative;
    border-radius: 20px;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
.preorder_tokuten .inner {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 2em 0;
    display: flex;
    justify-content: space-between;
}
.preorder_tokuten img {
    width: 400px;
    display: block;
    border-radius: 100%;
}
.preorder_tokuten .text_box {
    margin: 0 0 0 2.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    text-align: center;
}
.preorder_tokuten .text_box h2 {
    width: 100%;
}
.preorder_tokuten .text_box h2 img {
    width: 100%;
    height: auto;
    border-radius: inherit;
}
.preorder_tokuten .text_box .tokuten_text {
    min-height: 150px;
    background: url(../images/heart_bottom.png) 95% 90% no-repeat;
    background-size: 20% auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.preorder_tokuten .text_box .tokuten_text p {
    font-size: 140%;
    font-weight: bold;
}
.preorder_tokuten .text_box .tokuten_text p.size {
    font-size: 100%;

}
.preorder_tokuten .text_box ul { margin: 1.5em 0; }
.preorder_tokuten .text_box .btn { margin: 0; }
.preorder_tokuten img.line_top,
.preorder_tokuten img.line_bottom {
    width: 100%;
    position: absolute;
}
.preorder_tokuten img.line_top { top: -.5em; }
.preorder_tokuten img.line_bottom { bottom: -.6em; }
.preorder_tokuten a.btn {
    font-size: 100%;
}
/*-----------
Slider
-----------*/
.swiper-horizontal {
    padding-bottom: 5px !important;
}
.swiper-slide { 
    height: auto !important;
    overflow: hidden;
    border-radius: 60px; 
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
  }
.swiper-slide:hover img { transform:scale(1.05); }
.swiper-pagination-bullet-active{ background: var(--slider-page)!important; }
.slide-pagination-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between !important;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
  }
.swiper-button-prev,
.swiper-button-next {
    width: 60px !important; 
    height: 60px !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px; 
    opacity: 1 !important;
    transition: 0.3s;
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
}
.swiper-button-prev::after,
.swiper-button-next::after {
    display: none !important;
    content: "" !important;
}
.swiper-button-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 6 L8 10.5 Q6 12 8 13.5 L14 18 Q16 19 16 17 L16 7 Q16 5 14 6 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.swiper-button-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 L16 10.5 Q18 12 16 13.5 L10 18 Q8 19 8 17 L8 7 Q8 5 10 6 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media screen and (max-width: 768px) {
    .swiper-button-prev,
    .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
        background-size: 40px; /* 矢印サイズ */
    }
}
#bottom_section {
    position: relative;
}
/*-----------
online
-----------*/
#online {width: 90%; max-width: 1000px; border-radius: 60px; background: #FFF; margin: 0 auto 5em auto; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);  padding: 8px;}
#online .inner {padding: 50px; border: 5px solid #3074A6; border-radius: 55px; }
#online hr{border: 2px solid #3074A6; margin: 25px 0; width: 100%; border-width: 2px 0 0 0 ;}
#online h3{font-size: 1.4em; font-weight: bold; background: #93D3E5; display: inline-block; color: #3074A6; padding: 0 1em; border: solid 3px #3074A6; border-radius: 100px;}
#online p{margin-top: 1em; font-weight: bold; line-height: 1.5em;}

/*-----------
Specifications
-----------*/
#specifications{
    width: 90%;
    max-width: 1000px;
    background-size: cover;
    margin: 5em auto;
    position: relative;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);  
    padding: 8px;
    background: #FFF;
    border-radius: 60px; 
}
#specifications h2 {
    width: 40%;
}
#specifications h2 img {
    width: 100%;
    height: auto;
}
#specifications .specifications_inner {
    border: 5px solid #3074A6;
    border-radius: 55px;
    padding: 50px;
}
#specifications dl,
#specifications dt,
#specifications dd{box-sizing: border-box;}

#specifications dl{margin-top: 0; position: relative;font-weight: 500;}
#specifications dt,
#specifications dd{padding: 10px 30px 0 10px;line-height: 1.5;}
#specifications dd{ margin-left: 200px; padding-bottom: 10px; padding-left: 30px;  border-left: 2px solid #3074A6;}
#specifications dt{ width: 200px; float: left; padding-left: 0; text-align: right; font-weight: bold;}
#specifications dt span{padding: 0 .5em .1em .5em; background: #93D3E5; display: inline-block; color: #3074A6; border: solid 3px #3074A6; border-radius: 100px;}
#specifications dd:after {content: ''; display: block; clear: both;}
#EN #specifications dt span {
    font-size: 92%;
}
/*-----------
footer
-----------*/
footer{
    border-width: 1px 0 0 0;
    position: relative;
    padding-top: 3em;
    padding-bottom: 40px;
}
footer .inner.flex{width: 100%; margin: 0 auto; flex-wrap: wrap;justify-content: space-between;}
.share_area { text-align: center; }
.share_area p {
    font-weight: bold;
    font-size: 140%;
    margin: 0 auto 1em auto;
}
.share_area p img {
    width: 100%;
    height: auto;
}
.logo_wrap {
    margin: 3em 0 ;
    text-align: center;
}
.logo_wrap a { display: inline-block; margin: 0 .5em; }
.logo_wrap a img { max-width: 100%; height: 50px;}
.logo_wrap a:last-child img { max-width: 100%; height: 60px;}
.copyright_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 0 1em 0;
}
.copyright{text-align: left; font-size: .8em; text-align: center;  margin: 0 .5em;}
.copyright span{vertical-align: middle;}
.copyright span img{width: 45px;}
.copyright:last-child {  margin-top: 1em; }

footer .social{justify-content: center; align-items: center; margin: 0 auto;}
footer .social li{width: 50px; line-height: 0; margin-left: .6em; margin-right: .6em;}
footer .social li img{height: auto; width: 100%;}
footer .social a {margin-left: 0; width: 50px;}

/*-----------
responsive
-----------*/
@media screen and (max-width: 768px){
    a.btn,
    a.btn:hover { 
        background-size: .6em auto;
        margin: 1.5em auto 0 auto !important;
    }
    /*-----------
    Header
    -----------*/

    header .logo .logo_gsc{max-width: 100%; width: 80%;}

    header .logo ul li:first-child img { width: auto; height: 9vw; }

    header .right_wrap.flex{position: absolute; z-index: 100; width: 100%; left: 0; top: -200px; height: 200px; background: rgba(255,255,255,0.8); flex-direction: column; margin: 0; justify-content: center; align-items: center;transition: all 0.2s linear;}
    header .right_wrap.flex.active{top:0;transition: all 0.2s linear;}

    header .social { display: none; }
    header .right_wrap .language,
    header .right_wrap .social{width: 100%;justify-content: center; flex-wrap: wrap; font-size:1.2em; }
    header .language li.text,
    header .social li.text{width: 100%; text-align: center; margin-top: 1em; margin-bottom: 1em;}
    header .social li.text{margin-top: 2em;}
    header .language li{padding: 0 1em;}
    header .language li:first-of-type{border: none;}

    header .menu_btn{width: 30px; height: 30px; display: block;position: relative; z-index: 200;}
    header .menu_btn:hover{cursor: pointer;}
    header .menu_btn span{position: absolute; background: #000; width: 100%; height: 2px; display: block; right: 0; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn span::after,
    header .menu_btn span::before{content: ""; position: absolute; right: 0; height: 2px; background: #000; display: block;}
    header .menu_btn span::after{width: 100%; top: -10px;-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn span::before{width: 100%; bottom: -10px;-webkit-transition: .2s ease;transition: .2s ease;}
    
    header .menu_btn.active span::after{transform: rotate(45deg);width: 30px; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn.active span::before{transform: rotate(-45deg); width: 30px; bottom: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn.active span{background:transparent;-webkit-transition: .2s ease;transition: .2s ease;}

    /*-----------
    MV
    -----------*/
    #first-view {
        min-height: inherit;
        display: block;
    }
    #first-view-inner {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 800px;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }
    #mv{
        height: 100vh;
        justify-content: end;
        padding: 0;
    }
    #mv_inner {
        width: 100%;
        flex-direction: column;
        padding: 0 2%;
        position: relative;
        z-index: 1000;
    }
    #mv_inner {
        padding: 3em 0;
    }
    #mv_image {
        width: 100%;
        margin: 0 auto;
        background: url(../images/dot.png) 50% 50% repeat;
        position: absolute;
        height: 100vh;
        min-height:750px;
        overflow: hidden;
    }
    .pup_logo { 
        width: 40%;
        max-width: 247px;
    }
    #mv_textbox {
        width: 100%;
        z-index: 1000;
    }
    h1 {
        font-size: 6vw;
        width: 92%;
        margin: 0 auto;        
    }
    h1 span {
        font-size: 12vw;
        line-height: 12vw;
    }
    #EN h1 {
        font-size: 6vw;
    }
    #EN h1 span {
       font-size: 12vw;
        line-height: 12vw;
    }
    #EN .pup_logo {
        margin-bottom: 0;
    }
    #first-view a.btn{
        width: 94%;
        padding: .8em .3em;
    }
    #first-view .fab {
        display: none;
    }
    #lead {
        padding: 3em 0;
    }
    .concept_textbox {
        margin: 0 auto;
    }
    .textbox_inner {
        padding: 2em 4%;
    }
    .concept_textbox h2 {
        font-size: 150%;
    }
    .concept_textbox p {
        font-size: 110%;
    }
    #mv_image {
        padding: 10vw;
    }

    /*-----------
    #point
    -----------*/
    #point .inner  { width: 92%; margin: 0 auto; }
    #point .column-3{width: 100%;}
    #point dd { font-size: 110%; }
    /*-----------
    product
    -----------*/
    #product {
        position: relative;
        height: auto;
        min-height: auto;
        padding: 5em 0;
        margin: -1vw 0 0 0;
        }

    #specifications{width: 92%;}
    #specifications .specifications_inner {padding: 50px 2em;}
    #specifications dl {width: 100%; margin: 0 auto;}
    #specifications dl::after {background: none;}
    #specifications dt{float: none;width: 100%; padding: 0 0 .5em; margin-top: 2em; text-align: center;}
    #specifications dt:first-of-type{margin-top: 1em;}
    #specifications dd{width: 100%; margin-left: 0; padding: 0; border: none; text-align: center;}
    #EN #specifications dt span { font-size: 100%; }

    /*-----------
    preorder_fixd
    -----------*/
    #preorder {
        width: 92%;
        margin: 0 auto 5em auto;
        padding: 0;
    }
    #preorder h2,
    #preorder p.date {
        width: 100%;
        margin: 0 auto;
    }
    #preorder_tokuten .text_box h2 img {
        width: 80%; 
    }
    #EN .preorder_tokuten .text_box h2 img {
        width: 100%; 
    }
    .preorder_tokuten {
        width: 92%;
        margin: 0 auto 5em auto;
    }
    .preorder_tokuten .inner {
        flex-direction: column;
        padding: 2em 0;
    }
    .preorder_tokuten img {
        display: block;
        margin: 0 auto;
        width: 92%;
    }
    .preorder_tokuten .text_box {
        margin: 0 0 1em 0;
        width: 100%;
        background-position: 90% 75%;
    }
    .preorder_tokuten .text_box p {
        background-position: 95% 100%;
    }
    #specifications h2 { width: 80%;}
    /*-----------
    footer
    -----------*/
    footer{padding-top: 2em;}
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}
    /*-----------
    Online
    -----------*/
    #online {
        width: 92%;
    }
    #online .inner {
        padding: 2em;
    }
    #online h3 { 
        font-size: 110%;
        padding: 0 1em;
     }

    .logo_wrap{margin: 3em auto;}
    .copyright{text-align: center;}
    .copyright_wrap { display: block; }
    .copyright span img { width: 3.5em; }


}

@media screen and (max-width: 480px){
    a.btn,
    a.btn:hover { 
        letter-spacing: -0.5px;
    }
    #mv_image img {
        width: calc(130% + 100px);
    }
    #mv_textbox .animation_image:nth-of-type(2) { bottom: 17vw; right: 0; width: 10vw;  }
    #mv_textbox .animation_image:nth-of-type(3) { bottom: 15vw; right: 8%; width: 8vw;}

    #mv_image .animation_image:nth-of-type(2) { top: 12vw; right: 2vw; width: 20vw; }
    #mv_image .animation_image:nth-of-type(3) { top: 2vw; right: 20vw; width: 15vw;}
    #mv_image .animation_image:nth-of-type(4) { top:12%; right: 6%; width: 9vw; }
    #mv_image .animation_image:nth-of-type(5) { top:43%; left: 0; width: 16vw; }
    #mv_image .animation_image:nth-of-type(6) { top:54%; left:5vw; width: 18vw; }
    #mv_image .animation_image:nth-of-type(7) { top:50%; left:2vw; width: 8vw; }
    #mv_image .animation_image:nth-of-type(8) { top:48%; left:0; width: 4vw; }

    #lead .animation_image:nth-of-type(2) { top: -10vw; right: 0; width: 20vw; }
    #lead .animation_image:nth-of-type(3) { bottom: -5vw; left: 0; width: 14vw;}
    #lead .animation_image:nth-of-type(4) { top:8vw; right: -3vw; width: 10vw; }
    #lead .animation_image:nth-of-type(5) { top:0; right: -3vw; width: 5vw; }

    #preorder .animation_image:nth-of-type(1) { bottom: -17vw; right: 5%; width: 18vw; }
    #preorder .animation_image:nth-of-type(2) { bottom: -30vw; right: 0; width: 5vw; }
    #preorder .animation_image:nth-of-type(3) { bottom: -26vw; right: 4%; width: 8vw;}

    #online .animation_image:nth-of-type(2) { bottom: -9vw; left: -2%; width: 16vw; }
    #online .animation_image:nth-of-type(3) { bottom: -12vw; left: 15%; width: 14vw; }
    #online .animation_image:nth-of-type(4) { bottom: -14vw; left: 10%; width: 6vw;}
    #online .animation_image:nth-of-type(5) { bottom: -12vw; left: 5%; width: 4vw;}

    #specifications .animation_image:nth-of-type(2) { bottom: -7vw; right: 0; width: 18vw; }
    #specifications .animation_image:nth-of-type(3) { bottom: 7vw; right: 0; width: 8vw; }


}