/*-----------
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{
    background: url(../images/bg.jpg) 0 0 no-repeat;
    background-attachment: fixed;
    color: var(--color);
    font-size: var(--font-size); 
    width: 100%; 
    line-height: 1.8; 
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-optical-sizing: auto; 
    font-weight: 400;
    overflow-x: hidden;
}
img{height: auto;}

@media screen and (max-width: 650px){
	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: 650px){
    .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;
  }
}
@keyframes floatInOut {
  0%   { opacity: 0; transform: scale(0.7) rotate(var(--rot)); }
  20%  { opacity: 1; transform: scale(1)   rotate(var(--rot)); }
  80%  { opacity: 1; transform: scale(1)   rotate(var(--rot)); }
  100% { opacity: 0; transform: scale(0.7) rotate(var(--rot)); }
}
/*-----------
ボタン
-----------*/
a.btn{
    position: relative;
    display: block;
    background: url(../images/commone/arrow_white.png) 95% 50% no-repeat #292424;
    background-size: .5em auto;
    border: 5px solid #E0DBCF;
    color: var(--btn-color);
    text-align: center;
    padding: 1em;
    max-width: var(--btn-max-w);
    width: 92%;
    margin: 0 auto;
    text-decoration: none;
    border-radius: var(--border-radiue);
    font-weight: bold;
    z-index: 4;
    font-size: 120%;
    transition: 0.3s;
}
a.btn:hover { 
    background: url(../images/commone/arrow_white.png) 96% 50% no-repeat #834248;
    background-size: .5em auto;
    box-shadow: 0px 0px 25px 15px #ffffff8e;
}
/*---------
　Font
---------*/
.noto-serif-jp{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
}
/*-----------
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:8px;position: relative;z-index: 50; width: 100%; height: 5vw;}
header .inner { padding: 1em;}
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; }
header .logo ul li:last-child img { width: auto; height: 50px; }

/*-----------
MV
-----------*/
#mv-wrapper {
    position: relative;
}
#mv{
    position: relative;
    height: 100vh;
    min-height: 768px;
    max-height: 1200px;
    z-index: 1;
}
#mv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  background: linear-gradient(to bottom, transparent, rgba(131, 66, 72, 0.8));
  pointer-events: none;
  z-index: 2;
} 
#mv_inner {
    background: url(../images/mv.jpg) 50% 0 no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100vh;
    min-height: 768px;
    max-height: 1200px;
    padding: 0 6%;
}
#mv_inner img.main {
    /*min-width: 330px;
    width: 25%;*/
    height: 105vh;
    max-height: 1200px;
    width: auto;
    position: absolute;
    right: 6%;
    top: 4em;
    z-index: 3;
}
#mv-wrapper .catch {
	-webkit-mask-image: linear-gradient(to right, #000 40%, transparent 60%);
	        mask-image: linear-gradient(to right, #000 40%, transparent 60%);
	-webkit-mask-size: 250% 100%;
	        mask-size: 250% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	        mask-position: 100% 0;
	animation: catch_soft_wipe 1.8s ease-out 0.6s both;
}
@keyframes catch_soft_wipe {
	to {
		-webkit-mask-position: 0 0;
		        mask-position: 0 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	#mv-wrapper .catch { animation: none; }
}
h1 {
    color: #fff;
    font-size: 3vw;
    text-shadow: 0px 0px 15px rgba(243, 152, 0, 0.7);
    margin-bottom: 100px;
}
h1 img {
    display: block;
    max-width: 280px;
    width: 100%;
    height: auto;
    text-shadow: none;
    margin-bottom: 20px;
}
h1 span {
    margin-top: 20px;
    font-size: 40%;
    display: block;
    text-shadow: none;
    font-weight: 200;
    letter-spacing: .5em;
    background: #0000003a;
    text-align: center;
    border: 1px solid #FFF;
}
#stickybar {
    position: fixed;
    bottom: 0;
    background: #e0dbcf73;
    width: 100%;
    z-index: 9999;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: 0.3s ease-in;
}
#stickybar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 350px;
    margin: 15px auto;
    background: url(../images/commone/arrow_white.png) 95% 50% no-repeat,#292424;
    background-size: .5em auto;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
    padding: .5em 0;
    border: 3px solid #fff;
}
#stickybar a:hover { 
    background: url(../images/commone/arrow_white.png) 97% 50% no-repeat, #834248;
    background-size: .5em auto;
}
#stickybar a span {
    font-weight: bold;
    letter-spacing: .1em;
    text-rendering: optimizeLegibility;
    line-height: 1em;
}
#stickybar a span.small { 
    font-size: 70%;
    line-height: 1em;
    margin-bottom: .3em
 }
#stickybar.visible { opacity: 1; }
#EN #stickybar a span { letter-spacing: normal; }
#mv a.btn{
    font-size: 120%;
    max-width: 540px;
}
.catch {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: auto;
    width: 85%;
    height: auto;
    z-index: 3;
}
/*-----------
    LEAD
-----------*/
#lead {
    position: relative;
    background: url(../images/lead_bg.jpg) 50% 0 no-repeat;
    background-size: cover;
    padding: 100px 0;
}
#lead .inner {
    width: 96%;
    margin: 0 auto;
}
.lead_image {
    display: flex;
    justify-content: space-between;
}
#lead .lead_l {
	position: relative;
	width: 50%;
	z-index: 2;
}
#lead .lead_l img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	z-index: 2;
}
/* フィギュア背面の白い二重枠 */
#lead .lead_bg {
	position: absolute;
	top: 12%;
	left: 0;
    right: 0;
	width: 50%;
	height: 80%;
    margin: auto;
	background:#fff;
	border: 1px solid #9E9275;
	outline: 8px solid #fff;
	box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
	z-index: 1;
}

#lead .lead_r {
	position: relative;
	flex: 1;
}
#lead .lead_detail {
	position: absolute;
	width: 60%;
	aspect-ratio: 222 / 95;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(80, 60, 50, 0.12);
}
#lead .lead_detail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: blur(14px);
	transform: scale(1.08);
	transition:
		opacity 1s ease,
		filter 1.4s ease,
		transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
#lead .lead_detail.is_show img {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}
#lead .lead_detail_02 img {
	transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	#lead .lead_detail img {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}
/* 画像内側の細い白枠 */
#lead .lead_detail::after {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	pointer-events: none;
}
#lead .lead_detail_01 {
	top: 20%;
	left: 0;
}
#lead .lead_detail_02 {
	top: 46%;
	left: 27%;
}
#lead .lead {
	position: absolute;
	right: 8%;
	bottom: 15%;
	z-index: 3;
	font-size: 1.8vw;
	font-weight: 800;
	line-height: 1.9;
	letter-spacing: 0.04em;
	text-align: right;
	color: #3a3330;
	text-shadow:
		0 0 6px rgba(255, 255, 255, 1),
		0 0 12px rgba(255, 255, 255, 0.9);
}
#lead .lead span {
	font-size: 1.2em;
	font-weight: 700;
}

#lead .lead_deco {
	position: absolute;
	width: 36%;
	height: 35px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 64'%3E%3Cpath fill='%23fff' d='M29 0C30 26 31 29 58 32C31 35 30 38 29 64C28 38 27 35 0 32C27 29 28 26 29 0Z'/%3E%3C/svg%3E") no-repeat left 0 top 3px / 29px 32px;
	pointer-events: none;
	z-index: 1;
}
#lead .lead_deco::before,
#lead .lead_deco::after {
	content: "";
	position: absolute;
	right: 0;
	height: 2px;
	background: #fff;
}
#lead .lead_deco::before {
	top: 0;
	left: 32px;
}
#lead .lead_deco::after {
	top: 12px;
	left: 115px;
}
 
#lead .lead_deco_top {
	top: 50px;
	right: 0;
}
/* 左下は左右反転 */
#lead .lead_deco_bottom {
	bottom: 50px;
	left: 0;
	transform: scaleX(-1);
}
  
#lead .lead_image {
	position: relative;
	display: flex;
	min-height: 820px;
}


/*-----------
    POINT
-----------*/
#point_wrap { 
    position: relative;
    text-align: center;
}
#point_wrap .inner { margin: 5em auto;}
#point_wrap h2 {
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    padding: 2em 0;
    font-size: 200%;
}
#point_wrap .inner p.lead {
    margin-top: 2em;
    font-size: 140%;
}
#point_wrap .inner p span {
    font-size: 170%; 
}
#point .inner{
    position: relative;
    max-width: 1920px;
    width: 96%;
    z-index: 1;
}
#point .special_text {
    margin: 0 0 4em 0;
}
#point .box{ line-height: 1;}
#point .box a{display: block; }

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

#point .img_wrap{justify-content: space-between;}
#point .img_wrap a{ border: 2px solid #FFF; }
#point dt{
    margin-top: 20px;
    margin: 0 2%;
    overflow: hidden;
}
#point dd{line-height: 2; margin: 1em 4% 0 4%; font-size: 100%; font-weight: normal; }
/*-----------
    PRODUCT
-----------*/
#product{
    width: 100%;
    position: relative;
    margin-top: 150px;
}
#comparison{border: none; padding: 0; max-width: 1500px; width: 80%; margin: 20% auto 0;}
/*-----------
Preorder
-----------*/
.preorder_wrap {
    padding: 80px 0;
    background-color: #FFF;
}
.preorder {
    max-width: 1100px;
    background: url(../images/line.png) 50% 0 no-repeat, url(../images/line.png) 50% 100% no-repeat;
    background-size: 90% auto;
    padding: 80px 0;
    margin: 0 auto;

}
.preorder h2{text-align: center;font-size:140%; font-weight: 400; margin: 0 0 20px 0;}
.preorder p.date{text-align: center; font-size: 200%; font-weight: bold; margin: 0 0 20px 0;}
.preorder p.countdown{text-align: center; margin: 0 0 1em 0;}
.preorder p.countdown span{font-size: 200%; font-weight: bold;}
.preorder .btn{margin-top: 3rem;}
/*-----------
Slider
-----------*/
.swiper_wrap {
    position: relative;
    padding-bottom: 40px;
    text-align: center;
}
.swiper_wrap::after {
    background: #FFF;
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 455px;
    z-index: 0;
    bottom: 0;
}
.swiper-horizontal {padding-bottom: 5px !important;}
.swiper-slide { 
    height: auto !important;
    overflow: hidden;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
  }
.swiper-slide:hover img { transform:scale(1.05); }
.swiper-pagination{position: relative!important; bottom: 0!important; margin-top: 1em;}
.swiper-pagination-bullet{background: #9E9275!important; opacity: 1!important;width: 13px!important; height: 8px!important; border-radius: 100px!important;}
.swiper-pagination-bullet-active{width: 22px!important; background: #292424!important;}

.swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8) !important;
    transform-origin: center bottom;
    align-self: flex-end;
}
.swiper-slide-active,
.swiper-slide-duplicate-active  {
    transform: scale(1) !important;
    transform-origin: center bottom;
}
.swiper-wrapper {
    align-items: flex-end;
}
/*-----------
online
-----------*/
#online {width: 90%; max-width: 1000px; padding: 50px 50px 0 50px; margin: 0 auto; }
#online h3{font-size: 1.4em; margin-top: 2em;}
#online p{margin-top: 1em; line-height: 1.5em;}
#online a.btn {
    margin-top: 3rem;
    background-image: url(../images/commone/arrow_white.png);
    background-color: #9E9275;
    color: #fff;
    border: 1px solid #9E9275;
    outline: none;
    box-shadow: none;
    max-width: 400px;
    padding: .7em 1em;
}
#online a.btn:hover{
    background-image: url(../images/commone/arrow_white.png);
    background-color: #292424;
    color: #fff;
}

/*-----------
Specifications
-----------*/
#specifications{
    background: #ffffff9d;
    padding: 100px 0;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 90;
}
.specifications_inner {
    max-width: 1000px;
    margin: 0 auto;
}
#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: 1px solid #292424;}
#specifications dt{ width: 200px; float: left; padding-left: 0; text-align: right; font-weight: bold;}
#specifications dt span{padding: 0 .5em .1em .5em;  display: inline-block;}

#EN #specifications dt span {
    font-size: 92%;
}
#EN #specifications dt span {
    width: 250px;
}
#EN #specifications dd {
    margin-left: 270px;
}
/*-----------
footer
-----------*/
#footer_wrap {
    background: url(../images/waku_01.png) 10px 10px no-repeat, url(../images/waku_02.png) calc(100% - 10px) 10px no-repeat,
    url(../images/waku_03.png) 10px calc(100% - 100px) no-repeat, url(../images/waku_04.png) calc(100% - 10px) calc(100% - 100px) no-repeat,  url(../images/bg_miku.png) 50% 0 no-repeat;
    background-size: 120px auto, 120px auto, 120px auto, 120px auto, auto 100%;
    padding: 120px 100px;
    padding: 5em 0 60px 0;
}
footer{
    border-width: 1px 0 0 0;
    position: relative;
    padding: 3em;
}
footer .inner.flex{width: 100%; margin: 0 auto; flex-wrap: wrap;justify-content: space-between;}
.share_area { text-align: center; }
.share_area p {
    width: 120px;
    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 {
    padding: 0 0 1em 0;
}
.copyright{text-align: left; font-size: .8em; text-align: center;  margin: 0 .5em; font-weight: normal;}
.copyright span{vertical-align: middle;}
.copyright span img{width: 3.5em; margin-left: .4em;}

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



/*-----------
responsive
-----------*/
@media screen and (max-width: 1024px){

}
@media screen and (max-width: 650px){
    body::before {
    content: "";
    position: fixed;
    inset: 0;
    height: 100lvh;
    background: url(../images/bg.jpg) center / cover no-repeat;
    z-index: -1;
    }

    a.btn,
    a.btn:hover { 
        background-size: .6em auto;
        margin: 20px auto 0 auto !important;
        font-size: 100%;
        border-radius: 10px;
        border: 4px solid #E0DBCF;
    }
    a.btn:hover { 
        box-shadow: 0px 0px 15px 5px #ffffff8e;
    }
    /*-----------
    Header
    -----------*/
	header .logo .logo_gsc img { height: 32px !important; }

    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
    -----------*/
    #mv_inner {
        background: url(../images/mv_sp.jpg) 50% 0 no-repeat;
        background-size: cover;
        align-items: end;
        justify-content: center;
    }

    #mv-wrapper .catch { width: 92%; }
    #mv::after { height: 40%; }
    h1 { 
        margin-bottom: 150px;
        font-size: 7vw;
        text-align: center;
        z-index: 5;
        position: relative;
     }

    h1 img {
        max-width: 280px;
        width: 80%;
        margin: 0 auto 20px auto;
    }

    #point_wrap h2 {
        padding-left: 2%;
        padding-right: 2%;
        margin-top: -50px;
    }
    #stickybar {
        height: auto;
        padding: 1em 0;
    }
    #stickybar a {
        width: 86%;
        font-size: 110%;
        max-width: inherit;
        height: auto;
        margin: 0 auto;
        padding: .8em 0;
    }
    /*-----------
    #lead
    -----------*/
	#lead {
		padding: 90px 0 90px;
	}
	#lead::before {
		width: 45%;
	}
	#lead::after {
		width: 40%;
	}
	#lead .inner::before {
		right: calc(45% - 5px);
		top: -17px;
	}
	#lead .inner::after {
		left: calc(40% - 5px);
		bottom: -35px;
	}
 
	#lead .lead_image {
		flex-direction: column;
		min-height: 0;
	}
	#lead .lead_l {
		width: 92%;
		margin: 0 auto;
	}
 
	#lead .lead_r {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 24px;
	}
	#lead .lead_detail {
		position: relative;
		top: auto;
		left: auto;
		width: 85%;
	}
	#lead .lead_detail_02 {
		margin-left: auto;
	}
 
	#lead .lead {
		position: static;
		margin-top: 28px;
		font-size: 0.875rem;
        text-align: center;
	}
    /*-----------
    #point
    -----------*/
    #point_wrap {background-size: 50% auto, auto;}
    #point {
        position: relative;
        max-height: inherit;
        height: auto;
    }
    .points-list {
        width: 100%;
        padding: 2.5em 2%;
    }
    #EN #point dd p {
        display: inline;
    }
    /*-----------
    product
    -----------*/
    #product_wrap {
        background-size: 100% auto;
    }
    #product {
        position: relative;
        height: auto;
        min-height: auto;
        margin-top: 80px;
    }
    .swiper-horizontal {
        padding-bottom: 10% !important;
    }
    .swiper::after {
        height: 40%;
    }
    .swiper_wrap::after {
        height: 50%;
    }

    #point_wrap .inner { margin: 4em auto; }
    #point .column-3{width: calc((100%) / 2);}
    #point dl { margin-bottom: 2em; }
    #point dl:last-child { margin-bottom: 0; }
    #point dd{font-size: 100%; }
    #specifications{width: 92%; padding: 0;}
    .specifications_inner {padding: 5em 10%;background-size: 20% auto;}
    #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%; }
    #bottom_section {padding-bottom: 100px;}
    /*-----------
    preorder_fixd
    -----------*/
    .preorder_wrap { padding: 0 0 50px 0; }
    .preorder {
        width: 92%;
        margin: 0 auto;
        padding: 60px 0;
        background: url(../images/line_sp.png) 50% 0 no-repeat, url(../images/line_sp.png) 50% 100% no-repeat;
        background-size: 100% auto;

    }

    .preorder h2,
    .preorder p.date {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .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%;
    }
    #EN #specifications dt span {width: auto; }
    #EN #specifications dd {margin-left: 0;}
    /*-----------
    footer
    -----------*/
    footer{padding: 2em 2%;}
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}
    #footer_wrap {
        background-size: 100px auto, 100px auto, 100px auto, 100px auto, auto 100%;
        background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 100px), calc(100% - 10px) calc(100% - 100px), 60% 0 ;
    }
    /*-----------
    Online
    -----------*/
    #online {
        width: 92%;
        padding: 2em 0 0 0;
    }
    #online h3 { font-size: 1.3em; }

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

}