@charset "utf-8";

/* =reset
------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a{
margin:0;
padding:0;
}

fieldset,img{
  border:0;
}
address,caption,cite,code,dfn,em,th,var{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
p{
text-justify:inter-ideograph;
margin: 0;
}

header, section, article, footer, article, aside, time ,nav { display: block; }

ul{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
figure {
display: block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}

/* =base
------------------------------------------------------------------------------------------*/
* { box-sizing: border-box; }
body { color: #fff; counter-reset: number 0;font-family: "Kaisei Decol", "Noto Serif JP", 'Noto Sans JP', 'Noto Sans', "メイリオ","Meiryo","MS PGothic",sans-serif; font-feature-settings : "palt"; font-size: 16px; line-height: 1.8em; letter-spacing: 1.4px; overflow-x: hidden;}
img { vertical-align: bottom; }
a { color: #FF98EA; text-decoration: none; outline: none; }
a:hover {text-decoration: none; opacity: .7;}
a:hover img { opacity: 0.8; filter: alpha(opacity=80); }

/* =header
------------------------------------------------------------------------------------------*/
header { background: transparent; display: table; position: relative; top: 0; width: 100%; z-index: 2; }
header .header-wrap { display: table; margin: 0 auto; padding: 1em 1em .8em; width: 100%; position: relative; z-index: 1;}
header .left { display: table-cell; line-height: 1em; vertical-align: middle; width: 16%; }
header .right { display: table-cell; margin: .5em 0; vertical-align: middle; width: 84%; }
header h1 { font-size: 10px; line-height: 1em; text-align: right; }
header .logo-eplus { width: 100px; }
header .logo-eplus img { width: 100%; }

/* =foot
-----------------------------------------------------------------------------------------*/
footer { background-color: #19375A; color: #fff; width: 100%; position: relative; z-index: 1; padding: 30px 0;font-family: 'Noto Sans JP', 'Noto Sans JP IE', sans-serif;}
footer .section-wrap { margin: 0 auto; }
footer p { font-size: 12px; margin-bottom: .6em;  text-align: center;}
footer i { display: inline-block; margin-top: -8px; }
footer .table-box .box02:first-child { text-align: right; width: 41%; }
footer .table-box .box02:last-child { padding-left: 1%; text-align: left; width: 59%; }


  /* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top { margin: 0; position: fixed; right: 100px; bottom: 50px; text-align: center; z-index: 10; }
.page_top a { display: block; transition: all .2s; width: 95px; }
.page_top a img{width: 100%;}

/* = sp nav
------------------------------------------------------------------------------------------*/
.sp-nav { display: none; }

/* = wrap
------------------------------------------------------------------------------------------*/
/* main用のwrap */
.main-wrap {display: block; width: 100%;overflow-x: hidden;}

.section-wrap img { vertical-align: bottom; }
.section-wrap p:not(:last-of-type) { margin-bottom: 1em; }

/* = breadcrumb
------------------------------------------------------------------------------------------*/
.breadcrumb { margin: 0 auto 3vw ; max-width: 1000px; width: 92%;  position: relative; z-index: 1;}
.breadcrumb li { color: #eee; display: inline; }
.breadcrumb li a { font-size: 14px; line-height: 1.2em; text-decoration: underline; color: #eee;}
.breadcrumb li:not(:last-child)::after { content: " > "; color: #eee; }

/* = parts
------------------------------------------------------------------------------------------*/
.pc-none { display: none; }
.sp-none { display: block; }

/* 横並びbox */
.clearfix::after,
.float-box::after { content: ""; clear: both; display: block; }
.float-box { width: 102%; }
.float-box .box01 { width: 98%; }
.float-box .box02,
.float-box .box03,
.float-box .box04 { float: left; margin: 0 2% 5% 0; }
.float-box .box02 { width: 48%; }
.float-box .box03 { width: 31.3%; }
.float-box .box04 { width: 23%; }
.float-box .box01 img,
.float-box .box02 img,
.float-box .box03 img,
.float-box .box04 img { width: 100%; }
.table-box { display: table; width: 100%; }
.table-box .box02,
.table-box .box03,
.table-box .box04 { display: table-cell; vertical-align: middle; }
.table-box .box02 { width: 50%; }
.table-box .box03 { width: 33.3%; }
.table-box .box04 { width: 25%; }
.table-box .box02 img,
.table-box .box03 img,
.table-box .box04 img { width: 100%; }

/* font */
.moreless { font-size: .8em; line-height: 1.4em; }
.less { font-size: .9em; line-height: 1.4em; }
.mid { font-size: 1.1em; line-height: 1em; }
.big { font-size: 1.2em; line-height: 1em; }
.bigger { font-size: 1.3em; line-height: 1em; }
.biggest { font-size: 1.5em; line-height: 1em; }
.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.font-minchou { font-family: "ＭＳ 明朝",serif; font-weight: normal; }
.font-yu-minchou { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-weight: normal; }
.font-italic { font-style: italic; }
.font-noto-gothic{font-family: 'Noto Sans JP', 'Noto Sans JP IE', sans-serif; }
.font-noto-minchou{font-family: 'Noto Serif JP', serif;}
.font-rubik{font-family: 'Kaisei Decol', sans-serif; }
.copyright { font-size: 12px; }

/* textColor */
.text-red { color: #cc0000; }
.text-white { color: #fff; }
.text-black { color: #000; }
.text-pink{color: #E990B1;}
.sat { color: #0b5792; }
.sun { color: #a63646; }

/* textAlign */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* margin */
.mb-05vw { margin-bottom: .5vw !important; }
.mb-1vw { margin-bottom: 1vw !important; }
.mb-2vw { margin-bottom: 2vw !important; }
.mb-3vw { margin-bottom: 3vw !important; }
.mb-4vw { margin-bottom: 4vw !important; }
.mb-5vw { margin-bottom: 5vw !important; }
.mb-6vw { margin-bottom: 6vw !important; }
.mb-7vw { margin-bottom: 7vw !important; }
.mb-8vw { margin-bottom: 8vw !important; }
.mb-9vw { margin-bottom: 9vw !important; }
.mb-10vw { margin-bottom: 10vw !important; }
.mb-01em { margin-bottom: .1em !important; }
.mb-02em { margin-bottom: .2em !important; }
.mb-03em { margin-bottom: .3em !important; }
.mb-04em { margin-bottom: .4em !important; }
.mb-05em { margin-bottom: .5em !important; }
.mb-06em { margin-bottom: .6em !important; }
.mb-07em { margin-bottom: .7em !important; }
.mb-08em { margin-bottom: .8em !important; }
.mb-09em { margin-bottom: .9em !important; }
.mb-1em { margin-bottom: 1em !important; }
.mb-2em { margin-bottom: 2em !important; }

/* linkButtonBased */
.link-button a { box-sizing: border-box; display: block; border-radius: 100px; font-size: 22px; font-weight: bold; line-height: 1em; margin: 0 auto; padding: .8em 0 .7em; position: relative; text-align: center; transition: .1s; width: 90%; max-width: 550px;}
.link-button a:hover { text-decoration: none; }
.link-button a:active { box-shadow: none; /*transform: translate3d(4px, 4px, 0);*/ }
.spice-button a { background: #cc0000; box-shadow: 4px 4px 0 rgba(153,0,0,1); font-size: 26px; }
.spice-button a:hover { color: #cc0000; }

/* linkButtonColor */
.link-button a { background: #f16baa; color: #fff; }
.link-button a:hover { }
.link-button a:active {}

/* 16:9 wrap(youteubeとか) */
.video-outer-wrap { margin: 0 auto 3vw; width: 60%; }
.video-wrap { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0px; width: 100%; }
.video-wrap iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.video-wrap img { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 100%; }

/* playButton */
.play-button::before { content: ""; border: 3px solid rgba(255,255,255,.5); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); width: 75px; height: 75px; transition: .15s; z-index: 1; }
.play-button::after { content: ""; border: 23px solid transparent; border-left: 35px solid rgba(255,255,255,.5); position: absolute; top: 50%; left: calc(50% + 17px); transform: translate3d(-50%,-50%,0);transition: .15s;  }
.play-button:hover::before { border: 3px solid rgba(255,255,255,1); }
.play-button:hover::after {  border-left: 35px solid rgba(255,255,255,1); }

/* periodBox */
.period-box { background: #f8f8f8; border: 1px solid #cc0000; box-sizing: border-box; color: #cc0000; font-size: 26px; font-weight: bold; line-height: 1.4em; margin: 0 auto 2vw; padding: 1em 0; text-align: center; width: 80%; }

/* bottomLineBased */
.solid-line { border-bottom: 1px solid #fff; }
.dotted-line { border-bottom: 1px dotted #fff; }
.dashed-line { border-bottom: 1px dashed #fff; }

/* bottomLinePadding */
.solid-line,
.dotted-line,
.dashed-line { padding-bottom: 1em; }

/* textList(div等で囲む) */
p.text-list,
.text-list ul li { padding: 0 0 .2em 1.1em; position: relative; }
p:not(:last-of-child).text-list { margin-bottom: 1em; }
.text-list ul li:not(:last-of-child) { margin-bottom: .4em; }
p.text-list::before,
.text-list ul li::before { content: "※"; position: absolute; left: 0; }
p.text-list-dotted::before,
.text-list-dotted ul li::before { content: "・"; }
p.text-list-circle::before,
.text-list-circle ul li::before { content: "●"; }
p.text-list-square::before,
.text-list-square ul li::before { content: "■"; }
p.text-list-counter,
.text-list-counter ul li { padding-left: 5.1em; }
p.text-list-counter::before,
.text-list-counter ul li::before { counter-increment: number 1; content: "" counter(number) ""; }

/* linkOff */
.link-off a { background: #ccc; border: none; box-shadow: none; pointer-events: none; }
.link-off a::after { display: none !important; }

/* smartphone
------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
  /* =base
  ------------------------------------------------------------------------------------------*/
  body { font-size: 14px; line-height: 1.6em; }

  /* =header
  ------------------------------------------------------------------------------------------*/
  header .header-wrap { padding: .4em .6em .4em; }
  header .left,
  header .right { display: block; width: 100%; }
  header .left { margin-bottom: .5em; }
  header .right { margin: 0; }
  header h1 { text-align: left;}
  header .logo-eplus { width: 60px; }

  /* =pagetop
  ------------------------------------------------------------------------------------------*/
  .page_top{ display: none; }

  /* = sp nav
  ------------------------------------------------------------------------------------------*/
.sp-nav { display: block; }
.btn-gnav{ position: fixed; top: 25px; right: 15px; width: 50px; height: 20px; display: block; z-index: 9998;}
.btn-gnav span{position: absolute; width: 100%; height: 2px; background: #fff; border-radius: 10px; transition: all 400ms;}
.btn-gnav.open span{ background: #19375A;}
.btn-gnav .topline{top: 0;}
.btn-gnav .bottomline{top: 10px;}
.btn-gnav.open .topline{ transform: translateY(10px) rotate(-135deg);}
.btn-gnav.open .bottomline{transform: translateY(0px) rotate(135deg);}
.menu{position: fixed; top: 0; right: -100%; width: 100%; height: 100%; z-index: 2; transition: 0.5s; float: none; margin-right: 0;}
.menu.open{right: -10%; z-index: 1000; transition: 0.5s;}
.menu-list{ position: static; height: 100%; display: block;padding: 90px 0 0 0px;background-color: rgba(255, 255, 255, 0.9);}
.menu-list li{}
.menu-list li a{ color: #19375A; font-size: 20px; display: block; font-weight: bold; line-height: 1.4em; padding: 13px 0 13px 20px;}
.menu-list li a::after {content: none;}
.menu-list li a .first{ color: #fff;}
.menu-list .nav-link-button-img a{ display: block; box-sizing: border-box; max-width: 250px;}
.menu-list .nav-link-button-img a img{width: 100%;}


  /* = parts
  ------------------------------------------------------------------------------------------*/
  .pc-none { display: block; }
  .sp-none { display: none; }

  /* box */
  .float-box,
  .float-box .box01,
  .float-box .box02,
  .float-box .box03 { width: 100%; }
  .float-box .box02,
  .float-box .box03 { float: none; margin: 0 0 5% 0; }
  .float-box .box04 { width: 48%; }
  .table-box .box02,
  .table-box .box03 { display: block; width: 100%; }
  .table-box .box04 { width: 50%; }

  /* textAlign */
  .sp-text-left { text-align: left; }
  .sp-text-right { text-align: right; }
  .sp-text-center { text-align: center; }

  /* margin */
  .sp-mb-05vw { margin-bottom: .5vw !important; }
  .sp-mb-1vw { margin-bottom: 1vw !important; }
  .sp-mb-2vw { margin-bottom: 2vw !important; }
  .sp-mb-3vw { margin-bottom: 3vw !important; }
  .sp-mb-4vw { margin-bottom: 4vw !important; }
  .sp-mb-5vw { margin-bottom: 5vw !important; }
  .sp-mb-6vw { margin-bottom: 6vw !important; }
  .sp-mb-7vw { margin-bottom: 7vw !important; }
  .sp-mb-8vw { margin-bottom: 8vw !important; }
  .sp-mb-9vw { margin-bottom: 9vw !important; }
  .sp-mb-10vw { margin-bottom: 10vw !important; }

  /* linkButton */
  .link-button a { font-size: 16px; text-decoration: none; width: 90%; }

  /* 16:9 wrap(youteubeとか) */
  .video-outer-wrap { width: 92%; }

  /* periodBox */
  .period-box { font-size: 18px; line-height: 1.2em; margin-bottom: 4vw; padding: .6em 0; width: 90%; }

  /* textList(div等で囲む) */
  .text-list p,
  .text-list ul li { padding-bottom: .3em; }
}
/*add*/

/* = FixedBg
------------------------------------------------------------------------------------------*/
body::before {content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background:url(../images/page_background.jpg) center top no-repeat #488ace; background-size:cover; }
main img{width: 100%;}
.text-link{text-decoration: underline;}
.text-link:hover{text-decoration: none;}
.section-wrap{ padding: 180px 0;}
.content-wrap:not(:last-of-type){margin-bottom: 80px;}
.flex-box{ display: flex; flex-direction: row; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-start; width: 100%; position: relative;}
.flex-box .box02{max-width: 48%; flex-basis: 48%; margin-right: 4%;}
.flex-box .box02:nth-of-type(2n){margin-right: 0;}
.flex-box .box03{max-width: 31.3%; flex-basis: 31.3%;  margin-right: 3%;}
.flex-box .box03:last-of-type{margin-right: 0;}
.flex-box .box04{max-width: 23.5%; flex-basis: 23.5%; margin-right: 2%;}
.flex-box .box04:last-of-type{margin-right: 0;}
.flex-box.pc-reverse{flex-direction: row-reverse;}
.marker-text{ background: linear-gradient(transparent 50%, #fffc00 0%);}
.text-link{text-decoration: underline;}
.text-link:hover{text-decoration: none;}
.indent-text{padding-left: 1.1em; text-indent: -1.1em;}
.min-text{font-size: 14px; line-height: 1.4em;}
.mid-text{font-size: 22px; line-height: 1.4em;}

.wrap-1200px{max-width: 1200px; width: 92%; margin: 0 auto; position: relative;}
.wrap-1000px{max-width: 1000px; width: 92%; margin: 0 auto; position: relative;}
.wrap-600px{max-width: 600px; width: 92%; margin: 0 auto; position: relative;}

.main-wrap img{width: 100%;}

.bg-figure{background:#fed79f; position: relative;}
.bg-catch{background:#FED79F; position: relative;}
.bg-schedule{position: relative; background-image: url(../images/bg_sche.svg); background-color: #1e507f; background-size: 30px;}
.bg-about{position: relative; background-image: url(../images/bg_dot.svg); background-color: #1e507f; background-size: 30px;}
.bg-other{position: relative;}
.bg-checker{position: absolute; content: ""; width: 100%; height: 100%;background: linear-gradient(45deg, #4d2006 25%, transparent 25%, transparent 75%, #4d2006 75%), linear-gradient(45deg, #4d2006 25%, transparent 25%, transparent 75%, #4d2006 75%);background-size: 40px 40px;background-position: 0 0, 20px 20px;}
/*.bg-dot{position: absolute; content: ""; width: 100%; height: 100%;background-image: radial-gradient(rgba(28,72,116,1) 27%, transparent 27%),radial-gradient(rgba(28,72,116,1) 27%, transparent 27%); background-size: 40px 40px;background-position: 0 0, 20px 20px;}*/
.bg-dot{position: relative; background-image: url(../images/bg_dot.svg); background-color: #1e507f; background-size: 30px;}
.bg-top,
.bg-bottom{position: absolute; content: ""; left: 50%; transform: translate3d(-50%,0,0); width: 1920px; height: 23px; background-size: contain; background-repeat: repeat-x; z-index: 1;}
.bg-top{top: 0px; background-image: url(../images/bg_top.svg);}
.bg-bottom{bottom: 0px; background-image: url(../images/bg_bottom.svg);}
/*.bg-bottom.top-bottom{top: -1px; bottom: initial;}*/
.bg-snow02{background-image: url(../images/snow_02.png);width: 100%; height: 100%; background-repeat: no-repeat;background-size: cover;  position: absolute; content: "";/*-webkit-animation: verticalLoopCenter 85s linear 0s infinite forwards; animation: verticalLoopCenter 85s linear 0s infinite forwards;*/ top: 0; opacity: .3;}


.sec-h{text-align: center; position: relative; font-size: 100px; line-height: 1em; margin-bottom: 1.2em; padding-bottom: 35px;}
.sec-h::before{text-align: center; display: block;  width: 100%; position: absolute; left: 0; bottom: 0; font-size: 30px; line-height: 1em; content:attr(data-text)""; font-weight: bold;}
/*.sec-h::after{ position: absolute; content: ""; background-size: contain; background-repeat: no-repeat; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); z-index: 0;}*/
/*.sec-h.type-a::after{background-image: url(../images/h_ob_center_a.png);width: 989px; height: 256px;}*/
/*.sec-h.type-b::after{background-image: url(../images/h_ob_center_b.png);width: 1029px; height: 299px;}*/
.sec-h .sec-h-inner{position: relative; display: inline-block; z-index: 1;}
.sec-h .sec-h-inner::before,
.sec-h .sec-h-inner::after{position: absolute; content: ""; background-size: contain; background-repeat: no-repeat; width: 225px; height: 155px; top: calc(50% - -40px); transform: translate3d(0,-50%,0);}
.sec-h .sec-h-inner::before{left: -250px;}
.sec-h .sec-h-inner::after{right: -250px;}
.sec-h.type-a .sec-h-inner::before{background-image: url(../images/h_ob_a.svg);}
.sec-h.type-a .sec-h-inner::after{background-image: url(../images/h_ob_a.svg); transform: translate3d(0,-50%,0)scale(-1,1);}
.sec-h.type-b .sec-h-inner::before{background-image: url(../images/h_ob_l_b.png);}
.sec-h.type-b .sec-h-inner::after{background-image: url(../images/h_ob_r_b.png);}

.box-text{position: relative;}
.box-text .box-inner{display: inline-block; background-color: #19375A; position: relative;padding: 0.5em 50px 0.7em; box-sizing: border-box; border-bottom: 3px solid #fff;}
.box-text .box-inner::before{position: absolute; content: ""; background-size: contain; background-repeat: no-repeat; width: 50px; height: 78px; top:-23px; left: -35px; background-image: url(../images/box_ob.svg); z-index: 1;}
.box-s{position: absolute; content: "";background-size: contain; background-repeat: no-repeat; width: min(39px,3.3vw); height: calc(100% + 3px); top:0; background-image: url(../images/box_side.svg); z-index: -1;}
.box-sl{left: -8.1%;}
.box-sr{right: -8.2%; transform: scale(-1,1);}
@media screen and (max-width: 768px){
.section-wrap{padding: 25vw 0;}
.content-wrap:not(:last-of-type){margin-bottom: 12vw;}
.flex-box {}
.flex-box .box02{max-width: 100%; flex-basis: 100%; margin-right: 0%; }
.flex-box .box02:nth-of-type(2n){margin-right: 0;}
.flex-box .box03{max-width: 100%; flex-basis: 100%; margin-right: 0%; }
.flex-box .box03:last-of-type{margin-right: 0;}
.flex-box .box04{max-width: 49%; flex-basis: 49%; margin-right: 2%; }
.flex-box .box04:last-of-type{margin-right: 0;}
.flex-box .box04:nth-of-type(2n){margin-right: 0;}
.flex-box.pc-reverse{flex-direction: row;}
.min-text{font-size: 12px; line-height: 1.4em;}
.mid-text{font-size: 16px; line-height: 1.4em;}

.bg-top,
.bg-bottom{width: 100vw;}
.bg-top{}
.bg-bottom{}
.bg-bottom.top-bottom{}
.sec-h{font-size: 42px;padding-bottom: 20px;}
.sec-h::before{ font-size: 16px;}
.sec-h.type-a::after{width: 310px; height: 80px;}
.sec-h.type-b::after{width: 310px; height: 90px;}
.sec-h .sec-h-inner::before,
.sec-h .sec-h-inner::after{ width: 90px; height: 62px; top: calc(50% - -15px);}
.sec-h .sec-h-inner::before{left: -100px;}
.sec-h .sec-h-inner::after{right: -100px;}

.box-text{}
.box-text .box-inner{padding: 0.5em 20px 0.7em;}
.box-text .box-inner::before{ width: 40px; height: 62px; top:-14px; left: -31px;}
.box-s{ width: 25px;}
.box-sl{left: -8.8%;}
.box-sr{right: -8.9%;}
}

/* = main-img
------------------------------------------------------------------------------------------*/
#main-img {position: relative;background: url(../images/main_background.jpg) center top no-repeat; width: 92%; max-width: 1720px; margin: 0 auto 17vw; border-radius: 20px; max-height: 1300px; z-index: 1; background-size: cover; height: 57vw;}
#main-img .main-inner{position: relative; max-width: 1600px; width: 92%; margin: 0 auto; padding-bottom: 57vw;}
#main-img img { width: 100%; }
#main-img figure{position: relative; width: 100%;}
#main-img h2,
#main-img .miku,
#main-img .chara{position: absolute;}
#main-img .ttl{position: absolute;z-index: 5; left: -6%; bottom: 0;}
#main-img h2{position: absolute; z-index: 5; max-width: 728px; width: 38.7vw; left: -6%; bottom: 20%;}
#main-img .miku{max-width: 1284px; width: 47vw; top: 2.5vw; left: 50%; transform: translate3d(-50%,0,0); z-index: 1;}
#main-img .chara{max-width: 346px; width: 15.4vw; z-index: 2; right: 23%; top: 0; }
#main-img .main-button{max-width: 277px; width: 14.4vw; z-index: 5; display: block; transition-duration: .3s; position: absolute; right: -5%; bottom: 19%;}
#main-img .main-button:hover { transform: translate3d(0,-10px,0); filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6)); opacity: 1;}
#main-img .main-button:hover img{opacity: 1;}
@media screen and (max-width: 768px){
#main-img { height: 116vw; margin-top: 20px; margin:20px auto 25vw; }
#main-img .main-inner{padding: 0;}
#main-img h2{ width: 100%;left: 50%; transform: translate3d(-50%,0,0);  bottom: -6%;}
#main-img .miku{width: 90vw; top: 5vw; margin: 0 auto; position: relative;}
#main-img .chara{width: 34vw; right: -5%; top: -3%;}
#main-img .main-button{width: 30vw; position: absolute; left: initial; right: -5vw; bottom: 22vw;}
}


/* = figure
------------------------------------------------------------------------------------------*/
/*#cnv{position: absolute; width: 100%; height: 100%; z-index: 0;}*/
/*.fig-bg{width: 100%; background-repeat: repeat-x;background-size: 2500px auto;  position: absolute; content: ""; opacity: .1;}
.loop-a{background-image: url(../images/fig_bg_a.jpg); animation: HorizontalLoopRtoL 30s linear 0s infinite forwards; height:356px;}
.loop-b{background-image: url(../images/fig_bg_b.jpg); animation: HorizontalLoopLtoR 30s linear 0s infinite forwards; height:326px; top: 356px;}
.loop-c{background-image: url(../images/fig_bg_c.jpg); animation: HorizontalLoopRtoL 30s linear 0s infinite forwards; height:326px; top: 682px;}
.loop-d{background-image: url(../images/fig_bg_d.jpg); animation: HorizontalLoopLtoR 30s linear 0s infinite forwards; height:326px; top: 1008px;}
.loop-e{background-image: url(../images/fig_bg_e.jpg); animation: HorizontalLoopRtoL 30s linear 0s infinite forwards; height:326px; top: 1334px;}
.loop-f{background-image: url(../images/fig_bg_b.jpg); animation: HorizontalLoopLtoR 30s linear 0s infinite forwards; height:326px; top: 1660px;}
.loop-g{background-image: url(../images/fig_bg_c.jpg); animation: HorizontalLoopRtoL 30s linear 0s infinite forwards; height:326px; top: 1986px;}
.loop-h{background-image: url(../images/fig_bg_d.jpg); animation: HorizontalLoopLtoR 30s linear 0s infinite forwards; height:326px; top: 2312px;}

@keyframes HorizontalLoopLtoR {
  0% {
    background-position: -100vw 0vw;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes HorizontalLoopRtoL {
  0% {
    background-position: 100vw 0vw;
  }
  100% {
    background-position: 0 0;
  }
}*/
#figure .fig-name{ color: #fff; font-weight: bold; text-align: center; box-sizing: border-box; margin-bottom: .6em;font-size: min(36px,3vw); line-height: 1.4em;}
#figure .fig-sub{font-size: 22px; display: block; line-height: 1em;}
#figure .flex-box .text-box{width: 44%; margin-right: 8%;}
#figure .flex-box .img-box{width: 48%;}
#figure .price{ position: relative; padding-bottom: 2em; margin-bottom: 2em;}
#figure .price::after{position: absolute; content: ""; background-image: url(../images/border.svg); width: 100%; height: 12px; background-size: contain; background-repeat: repeat-x; left: 50%; transform: translate3d(-50%,0,0); bottom: 0;}
#figure .price .price-text{ line-height: 1.6em; display: block; font-size: 28px; font-weight: bold; text-align: center; text-shadow: 0px 3px 0px #19375A;}
#figure .price .yen{ font-size: 86px; line-height: 1em;}
#figure .price .tax{font-size: 28px; line-height: 1em; font-weight: bold; text-shadow: none;}
#figure .fig-comment{font-size: 20px; line-height: 1.6em;}
#figure .period-wrap{display: flex; flex-wrap: wrap; width: 100%; color: #fff;}
#figure .period-wrap .box02{width: 48%; margin-right: 4%; background-color: #19375A; box-sizing: border-box; padding: 40px 25px;}
#figure .period-wrap .box02:nth-of-type(2n){margin-right: 0;}
#figure .fig-h{position: relative;color: #fff; font-weight: bold; font-size: 22px; line-height: 1em; z-index: 1;margin-bottom: 1.4em; text-align: center;}
#figure .fig-h .fig-h-inner{position: relative;}
#figure .fig-h .fig-h-inner::before,
#figure .fig-h .fig-h-inner::after{position: absolute; content: ""; background-repeat: no-repeat; background-size: contain; width: 44px; height: 39px; top: 50%; transform: translate3d(0,-50%,0); background-image: url(../images/fig_ob.svg);}
#figure .fig-h .fig-h-inner::before{ left: -70px;}
#figure .fig-h .fig-h-inner::after{ right: -70px; transform: translate3d(0,-50%,0)scale(-1,1);}
#figure .period-wrap .inner-h{font-size: 20px; font-weight: bold; line-height: 1.4em; margin-bottom: 1.2em; position: relative; text-align: center;}
@media screen and (max-width: 1000px){
#figure .flex-box .img-box{width: 100%; margin: 0 auto 70px; order: 1;}
#figure .flex-box .text-box{width: 100%; margin:0 auto; order: 2;}
#figure .period-wrap .box02{width: 100%; margin: 0 auto 30px;padding: 35px 20px;}
#figure .period-wrap .box02:nth-of-type(2n){margin: 0;}
}
@media screen and (max-width: 768px){
#figure .fig-name{font-size: 24px;}
#figure .fig-sub{font-size: 14px;}
#figure .flex-box .img-box{ margin: 0 auto 35px;}
#figure .period-wrap .box02{margin: 0 auto 25px;padding: 35px 20px;}
#figure .price::after{ height: 8px;}
#figure .price .price-text{font-size: 18px;}
#figure .price .yen{font-size: 50px;}
#figure .price .tax{font-size: 14px;}
#figure .fig-comment{font-size: 16px;}
#figure .fig-h{font-size: 18px;}
#figure .fig-h .fig-h-inner::before,
#figure .fig-h .fig-h-inner::after{width: 28px; height: 25px;}
#figure .fig-h .fig-h-inner::before{left: -40px;}
#figure .fig-h .fig-h-inner::after{right: -40px;}
#figure .period-wrap .inner-h{font-size: 16px;}
}


/* = schedule
------------------------------------------------------------------------------------------*/
.chara-ob{position: absolute; left: 4%; bottom: -5%; z-index: 2; max-width: 344px; width: 17.8vw;webkit-animation: walkChar 1s linear 0s normal infinite; animation: walkChar 1s linear 0s normal infinite;}
@keyframes walkChar{
    0%{transform:translate(0,10px)}
    8%{transform:translate(0,3px)}
   25%{transform:translate(0,0)}
   43%{transform:translate(0,3px)}
   50%{transform:translate(0,10px)}
   58%{transform:translate(0,-1px)}
   75%{transform:translate(0,-4px)}
   93%{transform:translate(0,-1px)}
  100%{transform:translate(0,10px)}
}
#schedule{ position: relative;}
#schedule .sec-h{}
#schedule .sche-note {margin-bottom: 5em; position: relative;font-family: 'Noto Sans JP', 'Noto Sans JP IE', sans-serif; }
#schedule .sche-note li{padding-left: 1.1em; text-indent: -1.1em; text-align: center;}
#schedule .content-wrap:not(:last-of-type){margin-bottom: 50px;}
#schedule .inner-content-wrap:not(:last-of-type){margin-bottom: 20px;}
#schedule .sche-box{display: flex; width: 100%; flex-wrap: wrap; }
#schedule .sche-box .box01{width: 100%; background-color: #19375A; display: flex; flex-wrap: wrap;  background-image: url(../images/sche_ob_r.svg);background-position: center right 30px; background-repeat: no-repeat; background-size: 5%; border: 1px solid #fff;}
#schedule .sche-box .box01:not(:last-of-type){ margin-bottom: 30px;}
#schedule .sche-h{text-align: center; position: relative; font-size: 30px; line-height: 1em; padding: .6em 0em .6em; font-weight: bold;color: #19375A; background-color: #fff;border-radius:0 0 52px 0; width: 17%;}
/*#schedule .sche-h::after{position: absolute; width: 100%; height: 100%; content: ""; top: 50%; right: -100%; transform: translate3d(0,-50%,0); background-size: contain; background-repeat: no-repeat; background-image: url(../images/sche_tri.png);}*/
#schedule .sche-h .mid{font-size: 20px; line-height: 1em; }
#schedule .sche-h .min{font-size: 14px; line-height: 1em; }
#schedule .sche-detail{width: 83%;box-sizing: border-box; padding:0 110px 0 7%;display: flex; align-items: center;font-family: 'Noto Sans JP', 'Noto Sans JP IE', sans-serif;}
#schedule .sche-detail li{}
#schedule .period-h{display: inline-block; border-radius: 100px; color: #fff; line-height: 1em; font-size: 14px; font-weight: bold; text-align: center; padding: 0.6em 1.2em; margin-bottom: 0.6em;}
#schedule .period{ color: #fff; font-weight: bold; font-size: 18px; line-height: 1.5em;}
#schedule .period-p .period-h{background-color: #E990B1;}
#schedule .period-p .period{color: #E990B1;}
#schedule .period-b .period-h{background-color: #575588;}
#schedule .period-b .period{color: #575588;}
#schedule .link-button-img{max-width: 280px; margin: 0 auto; display: block; transition: .3s;}
#schedule .link-button-img:hover{ transform: translate3d(0,-10px,0); filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6)); opacity: 1;}
#schedule .link-button-img:hover img{opacity: 1;}
@media screen and (max-width: 768px){
.chara-ob{width: 45vw; left: -8%; bottom: -4%;}
@keyframes walkChar{
    0%{transform:translate(0,5px)}
    8%{transform:translate(0,2px)}
   25%{transform:translate(0,0)}
   43%{transform:translate(0,2px)}
   50%{transform:translate(0,5px)}
   58%{transform:translate(0,-2px)}
   75%{transform:translate(0,-3px)}
   93%{transform:translate(0,-2px)}
   100%{transform:translate(0,5px)}
}
#schedule .sche-note { width: 92%; margin: 0 auto 2em;}
#schedule .sche-note li{ text-align: left;}
#schedule .content-wrap:not(:last-of-type){margin-bottom: 35px;}
#schedule .inner-content-wrap:not(:last-of-type){margin-bottom: 20px;}
#schedule .sche-box .box01{background-image: none;}
#schedule .sche-box .box01:not(:last-of-type){ margin-bottom: 30px;}
#schedule .sche-h{font-size: 24px;width: 100%; border-radius: 0 0 32px 0; background-size: 30px; background-position: 2% 40%; background-image: url(../images/sche_ob_r.svg); background-repeat: no-repeat;}
#schedule .sche-h::after{ content: none; }
#schedule .sche-h .mid{font-size: 16px;}
#schedule .sche-h .min{font-size: 14px;}
#schedule .sche-detail{width: 100%;padding: 25px 20px;}
#schedule .period-h{font-size: 14px; padding: 0.6em 1.2em; margin-bottom: 0.6em;}
#schedule .period{font-size: 18px;}
#schedule .link-button-img{width: 60%;}
}


/* = intro
------------------------------------------------------------------------------------------*/
#intro{padding: 320px 0 180px; position: relative; background-image: url(../images/hokkaido.svg); background-position: center top 28%; background-repeat: no-repeat; background-size: 20%;}
#intro .content-wrap:not(:last-of-type){margin-bottom: 130px;}
#intro .in-h{font-size: 26px; line-height: 2em; margin-bottom: 1em; text-align: center; position: relative; z-index: 1; font-weight: bold;}
#intro .in-inner{position: relative; display: inline-block;}
#intro .in-inner::before,
#intro .in-inner::after{position: absolute; content: ""; background-image: url(../images/catch_ob.svg); top: -115px; width: 349px; height: 193px; background-repeat: no-repeat; background-size: contain;}
#intro .in-inner::before{left: -150px;}
#intro .in-inner::after{right: -150px; transform: scale(-1,1);}
#intro .in-h .jump{font-size: 44px; position: relative; line-height: 1em;}
#intro .in-h .txt-red{color: #C40800;}
#intro .comment{font-size: 18px; line-height: 1.8em; text-align: center;}
#intro .of-h{ font-weight: bold; text-align: center; box-sizing: border-box; margin-bottom: .6em; font-size: 26px; line-height: 1.4em;}
#intro .of-h.box-text .box-inner{padding: 0.9em 40px 1.1em;}
#intro .of-h.box-text .box-inner .box-s{ width: min(39px, 4.8vw);}
#intro .of-h.box-text .box-inner .box-sl{left: -28px;}
#intro .of-h.box-text .box-inner .box-sr{right: -28px;}
@media screen and (max-width: 768px){
#intro{padding: 35vw 0 25vw; background-size: 70%; background-position: center top 15%;}
#intro .content-wrap:not(:last-of-type){margin-bottom: 40px;}
#intro .in-h{font-size: 20px;}
#intro .in-inner::before,
#intro .in-inner::after{top: -65px; width: 150px; height: 83px;}
#intro .in-inner::before{left: -70px;}
#intro .in-inner::after{right: -70px;}
#intro .in-h .jump{font-size: 24px;}
#intro .comment{font-size: 16px; text-align: left;}
#intro .of-h{font-size: 14px;}
#intro .of-h.box-text .box-inner{padding: 0.9em 10px 1.1em;}
#intro .of-h.box-text .box-inner .box-s{ width: 16px;}
#intro .of-h.box-text .box-inner .box-sl{left: -15px;}
#intro .of-h.box-text .box-inner .box-sr{right: -15px;}
}

/* = about
------------------------------------------------------------------------------------------*/
#about{/*padding:9vw 0; position: relative; overflow: hidden; color: #fff;*/}
/*#about::before{ position: absolute; content: ""; background-image: url(../images/miku.png); opacity: 0.2; max-width: 2276px; max-height: 3066px; top: -10%; left: -50%; background-repeat: no-repeat; z-index: 0; background-size: contain; width: 136vw; height: 170vw;}*/
#about .sec-h{font-size: 60px; margin-bottom: 2em; z-index: 1; padding-bottom: 50px;}
#about .sec-h .jump{font-size: 72px; margin: 0 -0.5em 0 -0.5em;}
#about .sec-h .txt-beige{color: #F2CE6E;}
#about .sec-h::after{content: none;}
#about .flex-box{align-items: center;}
#about .img-box{width: 48%; margin-right: 4%; position: relative;}
#about .about-ob{position: absolute;}
#about .about-ob01{max-width: 202px;top: -9px; right: -14px; z-index: 2;}
#about .about-ob02{max-width: 129px;bottom: 8px; left: -2px;z-index: 1;}
#about .text-box{width: 48%; position: relative;}
/*#about .text-box::before{position: absolute; content: ""; background-image: url(../images/about_ob.png); background-position: center; background-size: contain; background-repeat: no-repeat; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); width: 612px; height: 558px; z-index: 0;}*/
#about .comment{ position: relative;z-index: 1;  line-height: 2em;}
/* animation */
#about .about-miku-img{animation: verticalimg 2.6s ease-in-out infinite alternate;}
#about .about-ob01{animation: horizontal 1s ease-in-out infinite alternate; animation-duration: 5.1s;}
#about .about-ob02{animation: vertical 1.4s ease-in-out infinite alternate;}

/*@keyframes horizontal {
    0% { transform:translateX( -20px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-15px); }
  100% { transform:translateY(  0px); }
}
@keyframes verticalimg {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}*/
@media screen and (max-width: 768px){
#about{padding-left: 17vw 0;}
#about::before{content: none;}
#about .sec-h{font-size: 26px;padding-bottom: 30px;}
#about .sec-h .jump{font-size: 38px;}
#about .img-box{width: 90%; margin: 0 auto 40px ;}
#about .about-ob01{max-width: 128px;}
#about .about-ob02{max-width: 69px;}
#about .text-box{width: 100%; }
/*#about .text-box::before{width: 100%; height: 92%;}*/
}

/* = other
------------------------------------------------------------------------------------------*/
#other .other-h{ position: relative; font-size: 36px; line-height: 1.4em; text-align: center; font-weight: bold; margin-bottom: 1em;}
/*#other .other-h::before{position: absolute; content: ""; top: 0; left: 50%; transform: translate3d(-50%,0,0); width: 94px; height: 35px; background-image: url(../images/form_ob.png); background-size: cover; background-repeat: no-repeat; background-size: contain;}*/
#other .other-h .other-inner{position: relative;}
#other .other-h .other-inner::before,
#other .other-h .other-inner::after{position: absolute; content: ""; background-repeat: no-repeat; background-size: contain; width: 44px; height: 39px; top: 50%; transform: translate3d(0,-50%,0); background-image: url(../images/fig_ob.svg);}
#other .other-h .other-inner::before{ left: -50px;}
#other .other-h .other-inner::after{ right: -50px; transform: translate3d(0,-50%,0)scale(-1,1);}
#other .obi-txt{ color: #fff; font-weight: bold; text-align: center; box-sizing: border-box; margin-bottom: .6em; font-size: 20px; line-height: 1.4em;}
#other .obi-txt.box-text .box-inner{padding: 0.9em 100px 1.1em;}
#other .obi-txt.box-text .box-inner .box-s{ width: min(39px, 4.8vw);}
#other .obi-txt.box-text .box-inner .box-sl{left: -22px;}
#other .obi-txt.box-text .box-inner .box-sr{right: -22px;}
@media screen and (max-width: 768px){
#other .other-h{ font-size: 18px;}
#other .other-h .other-inner::before,
#other .other-h .other-inner::after{width: 25px; height: 22px;}
#other .other-h .other-inner::before{ left: -32px;}
#other .other-h .other-inner::after{ right: -32px;}
#other .obi-txt{font-size: 16px;}
#other .obi-txt.box-text .box-inner{padding: 0.9em 80px 1.1em;}
#other .obi-txt.box-text .box-inner .box-s{ width: 18px;}
#other .obi-txt.box-text .box-inner .box-sl{left: -17px;}
#other .obi-txt.box-text .box-inner .box-sr{right: -17px;}
}

/* = foot
------------------------------------------------------------------------------------------*/
#foot{text-align: center; font-size: 14px; line-height: 1.4em;}
#foot img{width: 100%;}
#foot .footer-content-wrap:not(:last-of-type){margin-bottom: 30px;}
#foot .logo-wrap{display: flex; flex-wrap: wrap; width: 100%;}
#foot .logo-miku{display: block; width: 40%; margin-right: 4%;}
#foot .logo-snowmiku{display: block; width: 56%;}
#foot .logo-piapro{width: 53px; margin-left: .6em;}
#foot .logo-eplus{width: 41px; display: block; margin:0 auto; }
@media screen and (max-width: 768px){
#foot .footer-content-wrap:not(:last-of-type){margin-bottom: 20px;}
}


/*slick-theme.css*/
/* Slider */
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus {outline: none; }
.slick-list.dragging {cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after {display: table; content: ''; }
.slick-track:after {clear: both; }
.slick-loading .slick-track {visibility: hidden; }

.slick-slide {display: none; float: left; height: 100%; min-height: 1px; border-radius: 13px; overflow: hidden;}
[dir='rtl'] .slick-slide {float: right; }
.slick-slide img {display: block; }
.slick-slide.slick-loading img {display: none; }
.slick-slide.dragging img {pointer-events: none; }
.slick-initialized .slick-slide {display: block; }
.slick-loading .slick-slide {visibility: hidden; }
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden {display: none; }

ul {margin: 0; padding: 0; }
.layout {width: 100%; margin: 0 auto 30px; position: relative;z-index: 1;}
.layout a {}
.slide {display: none; }
.slide li {list-style: none; }
.slide.slick-initialized {display: block; }
.slick-dots {width: 92%; margin: 15px auto 0; justify-content: center; display: flex;}
.slick-dots li {list-style: none; display: inline-block; cursor: pointer; vertical-align: middle; /*width: 24%;*/ margin-right: 1%; transition: .2s;}
.slick-dots li:last-of-type {margin-right: 0;}
.slick-dots li img {width: 100%; height: auto; opacity: .7; outline: none; transition: .2s; border: 2px solid #fff; box-sizing: border-box; border-radius: 10px;}
.slick-dots li img:hover {opacity: 1;}
.slick-dots li.slick-active img {opacity: 1;}
.slick-prev,
.slick-next{position: absolute; content: ""; background-repeat: no-repeat; width: 107px; height: 66px; top: 40%; transform: translateY(-50%); z-index: 5; transition-duration: .3s; background-size: contain;}
.slick-prev {background-image: url(../images/arrow_l.svg); left: -40px;}
.slick-next {background-image: url(../images/arrow_r.svg); right: -40px;}
.slick-prev:hover {left: -45px; opacity: 1;}
.slick-next:hover {right: -45px; opacity: 1;}

.slick-list.draggable{ border-radius: 0px; width: 100%; }
.slick-list.draggable img{ border: 8px solid #fff; box-sizing: border-box; border-radius: 13px;}
.slick-list.draggable li{position: relative;}
.slick-list.draggable li .triangle {position: absolute; content: ""; width: 90px; height: 90px; background-color: #fff; border-radius: 100%;}
.slick-list.draggable li .tr-tl {top: -50px; left: -50px;}
.slick-list.draggable li .tr-br {bottom: -50px; right: -50px;}
.slick-list.draggable li:focus{outline: none;}

.slick-dots li{overflow: hidden;}
.slick-dots li img{opacity: .7;}
.slick-dots li.slick-active img {opacity: 1;}

@media screen and (max-width: 768px){
.layout {width: 96%; margin: 0 auto 0px;max-width: 650px;}
.slick-list.draggable{ width: 100%; }
.slick-list.draggable img{}

.slick-dots { bottom: 0%; right: auto; left: auto; margin: 15px auto 0;}
.slick-dots li{overflow: hidden;}
.slick-dots li img{opacity: .7;}
.slick-dots li.slick-active img {opacity: 1;}

.slick-prev,
.slick-next{ width: 55px; height: 36px;}
.slick-prev { left: -15px;}
.slick-next { right: -15px;}
.slick-prev:hover {left: -20px;}
.slick-next:hover {right: -20px;}
}

/*animation*/

.fade-content{opacity: 1; transform: none; transition-duration: 1s;}

/* animation */
/*#about .about-miku-img{animation: verticalimg 2.2s ease-in-out infinite alternate;}

@keyframes verticalimg {
    0% { transform:translateY(-15px); }
  100% { transform:translateY(  0px); }
}*/
.fade-content{opacity: 1; transform: none; transition-duration: 1s;filter: blur(0px);}
.fromBottom{opacity: 0; transform: translate3d(0,35px,0);filter: blur(8px);}

#main-img h2.fade-content{transition-duration: 1.1s;}
#main-img .miku.fade-content{transition-duration: 1.2s;}
#main-img .chara.fade-content{transition-duration: 1.2s;}
#main-img .main-button.fade-content{transition-duration: .3s; filter: initial;}

#main-img h2.fadeIn{opacity: 0; transform: scale(1.08);}
#main-img .miku.fromRight{opacity: 0; transform: translate3d(-45%,0,0);}
#main-img .chara.fromLeft{opacity: 0; transform: translate3d(-30px,0,0);}
#main-img .main-button.fromBottom{opacity: 0; transform: translate3d(0,20px,0);}

@media screen and (max-width: 768px){
#main-img h2.fadeIn{opacity: 0; left: 50%; transform: translate3d(-50%, 0, 0)scale(1.08);}
}

/*animation*/
#loading {width: 100vw; height: 100vh; transition: all 1s; background-color: #E990B1; position: fixed; top: 0; left: 0; z-index: 9999; }
.loaded {opacity: 0; visibility: hidden;}
.spinner {max-width: 794px;position: relative; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 92%;}
.spinner img{width: 100%;}

@media screen and (max-width: 768px){

}
/*-----------------------------------
snow_block
-----------------------------------*/
.snow_block{position: fixed;
  width: 100%;
  z-index: -1;
}
.snow_block .bg-snow{
  position: relative;
  opacity: .3;
}
.snow_block .bg-snow img{
  position: absolute;
}
.snow_block .bg-snow img:nth-child(2n+1){
  max-width: 100px; width:6vw; /*花びらのサイズ*/
}
.snow_block .bg-snow img:nth-child(2n){
  max-width: 80px; width:5vw;/*花びらのサイズ*/
}

@media screen and (max-width: 768px){
.snow_block .bg-snow img:nth-child(2n+1){
 width:10vw; /*花びらのサイズ*/
}
.snow_block .bg-snow img:nth-child(2n){
 width:8vw;/*花びらのサイズ*/
}
}

/*-----------------------------------
パーツの表示位置
-----------------------------------*/
img.parts_01{top: 20vw; left: 5%;}
img.parts_02{top: 40vw; left: 12%;}
img.parts_03{top: 10vw; left: 15%;}
img.parts_04{top: 20vw; left: 22%;}
img.parts_05{top: 50vw; left: 25%;}
img.parts_06{top: 49vw; left: 28%;}
img.parts_07{top: 11vw; left: 35%;}
img.parts_08{top: 0; left: 40%;}
img.parts_09{top: 25vw; left: 43%;}
img.parts_10{top: 15vw; left: 50%;}
img.parts_11{top: 20vw; left: 55%;}
img.parts_12{top: 40vw; left: 60%;}
img.parts_13{top: 15vw; left: 63%;}
img.parts_14{top: 35vw; left: 70%;}
img.parts_15{top: 5vw; left: 75%;}
img.parts_16{top: 7vw; left: 81%;}
img.parts_17{top: 60vw; left: 85%;}
img.parts_18{top: 9vw; left: 90%;}
img.parts_19{top: 24vw; left: 93%;}


/*-----------------------------------
舞い散るアニメーション
回転しつつ上から下へ
-----------------------------------*/
@keyframes snowparts {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,50px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,100px)  rotate(100deg);
    }
    70% {
      transform:translate(-40px,150px) rotate(50deg);
      opacity: .8;
    }
    90% {
      transform:translate(-60px,200px) rotate(0deg);
    }
    100% {
      transform:translate(-70px,230px);
      opacity: 0;
    }
}

.bg-snow img {
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_11,img.parts_16,img.parts_19{
  animation: snowparts linear 9.6s infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
img.parts_01,img.parts_07,img.parts_08{
  animation: snowparts linear 7s infinite;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
img.parts_04,img.parts_10,img.parts_13{
  animation: snowparts linear 7s infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
img.parts_02,img.parts_05{
  animation: snowparts linear 10s infinite;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{
  animation: snowparts linear 12s infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  animation: snowparts linear 5s infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{
  animation: snowparts linear 9s infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
img.parts_15,img.parts_18{
  animation: snowparts linear 8s infinite;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}