@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul, li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/**
 * Swiper 4.5.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2019 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 22, 2019 */
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-container-autoheight {
  height: auto;
}

.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal {
  touch-action: pan-y;
}

.swiper-container-wp8-horizontal > .swiper-wrapper {
  touch-action: pan-y;
}

.swiper-container-wp8-vertical {
  touch-action: pan-x;
}

.swiper-container-wp8-vertical > .swiper-wrapper {
  touch-action: pan-x;
}

.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}

.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #ffffff;
}

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000000;
}

.swiper-pagination-lock {
  display: none;
}

/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

/* -----------------------------------------------
 * デフォルト
 * ----------------------------------------------- */
html, body {
  width: 100%;
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  color: #000;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-family: noto-sans-cjk-jp, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  line-height: 1;
}

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

em {
  font-style: normal;
}

* {
  box-sizing: border-box;
}

/* -----------------------------------------------
 * 改行の PC/SP 制御
 * ----------------------------------------------- */
@media screen and (min-width: 768px) {
  .is-spdisp,
  .is_SP,
  .is_sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .is-pcdisp,
  .is_PC,
  .is_pc {
    display: none;
  }
}

/* -----------------------------------------------
 * 例外的処理のための表示制御
 * ----------------------------------------------- */
.is-hidden {
  visibility: hidden;
}

/* -----------------------------------------------
 * utility class
 * ----------------------------------------------- */
.u-font-italic {
  font-style: italic !important;
}

.u-font-palt {
  font-feature-settings: "palt" 1 !important;
}

/* -----------------------------------------------
 * ウィンドウ光彩
 * ----------------------------------------------- */
.c-shadow {
  position: fixed;
  z-index: 10002;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity .5s;
  will-change: opacity;
  opacity: 0;
}

.c-shadow.is-active {
  opacity: 1;
}

.c-shadow:before, .c-shadow:after {
  content: "";
  position: fixed;
  z-index: 100;
  pointer-events: none;
}

.c-shadow--l {
  width: 22px;
  height: 100%;
  top: -1px;
  left: -1px;
  background: url("/img/common/window_frame_left.png") repeat-y left top;
}

.c-shadow--r {
  width: 22px;
  height: 100%;
  top: -1px;
  right: -1px;
  background: url("/img/common/window_frame_right.png") repeat-y right top;
}

.c-shadow--t {
  width: 100%;
  height: 30px;
  background: url("/img/common/window_frame_top.png") repeat-x left top;
  left: -1px;
  top: -1px;
}

.c-shadow--b {
  width: 100%;
  height: 30px;
  background: url("/img/common/window_frame_btm.png") repeat-x left bottom;
  left: 0;
  bottom: -1px;
}

/* ウィンドウ枠の影 黄色バージョン */
.is-yellow .c-shadow--l {
  background-image: url("/img/common/window_frame_left_y.png");
}

.is-yellow .c-shadow--r {
  background-image: url("/img/common/window_frame_right_y.png");
}

.is-yellow .c-shadow--t {
  background-image: url("/img/common/window_frame_top_y.png");
}

.is-yellow .c-shadow--b {
  background-image: url("/img/common/window_frame_btm_y.png");
}

/* -----------------------------------------------
 * 構造
 * ----------------------------------------------- */
.l-wrapper {
  width: 100%;
  min-width: 1180px;
}

.l-container {
  min-height: 600px;
  padding: 0 0 100px;
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------
 * ページ遷移用 白カバー
 * ----------------------------------------------- */
.c-blind {
  background-color: #fff;
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translate3d(0, 0, 0);
  will-change: opacity;
}

.c-blind__inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  will-change: opacity;
  transform: translate3d(0, 0, 0);
}

.c-blind__effect {
  background-color: #d7e1e1;
  width: 150%;
  height: 100%;
  position: absolute;
  top: -50%;
  left: -25%;
  z-index: 1;
  will-change: opacity;
  transform: translate3d(0, 0, 0);
}

.c-blind__effect--2 {
  top: 50%;
}

.c-blind__effect--3,
.c-blind__effect--4 {
  opacity: .7;
}

.c-blind__effect--4 {
  top: 50%;
}

.c-blind.is-white .c-blind__effect {
  background-color: #fff;
}

.c-blind.is-active .c-blind__inner {
  opacity: 1;
}

.c-blind.is-active .c-blind__effect {
  background-color: #d7e1e1;
}

.svg-loading-wrap {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 93px;
  height: 113px;
  opacity: 0;
}

.svg-loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 93px;
  height: 113px;
}

.svg-loading-mask {
  width: 100%;
  height: 0;
  overflow: hidden;
  position: relative;
}

/* -----------------------------------------------
 * 背景の　!!マーク
 * ----------------------------------------------- */
.c-exc-mark {
  width: 100%;
  height: 472px;
  position: fixed;
  top: 45px;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.c-exc-mark__inner {
  width: 100%;
  max-width: 1180px;
  height: 100%;
  margin: auto;
  position: relative;
}

.c-exc-mark__inner:after {
  content: "";
  background: url("/img/common/bg_exc_mark.svg") no-repeat right top;
  width: 370px;
  height: 472px;
  position: absolute;
  right: -120px;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

/* -----------------------------------------------
 * sound gauge
 * ----------------------------------------------- */
.sound-gauge {
  width: 109px;
  height: 102px;
  position: fixed;
  bottom: 30px;
  right: 0;
  z-index: 120;
  pointer-events: none;
  -webkit-animation: svg-gauge-base .43s 0s ease-out infinite;
          animation: svg-gauge-base .43s 0s ease-out infinite;
}

.sound-gauge rect {
  transform-origin: 100% 50%;
}

@-webkit-keyframes svg-gauge-base {
  0% {
    transform: scale(1, 1.3);
  }
  10% {
    transform: scale(1, 1);
  }
  20% {
    transform: scale(1, 1.3);
  }
  30% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(1, 1.3);
  }
  50% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(1, 1.3);
  }
  70% {
    transform: scale(1, 1);
  }
  80% {
    transform: scale(1, 1.3);
  }
  90% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1.3);
  }
}

@keyframes svg-gauge-base {
  0% {
    transform: scale(1, 1.3);
  }
  10% {
    transform: scale(1, 1);
  }
  20% {
    transform: scale(1, 1.3);
  }
  30% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(1, 1.3);
  }
  50% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(1, 1.3);
  }
  70% {
    transform: scale(1, 1);
  }
  80% {
    transform: scale(1, 1.3);
  }
  90% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1.3);
  }
}

.sound-gauge.is-active .svg-sound-gauge__rect--1 {
  -webkit-animation: 4s 0s;
          animation: 4s 0s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--2 {
  -webkit-animation: 4s 0.04s;
          animation: 4s 0.04s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--3 {
  -webkit-animation: 4s 0.08s;
          animation: 4s 0.08s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--4 {
  -webkit-animation: 4s 0.12s;
          animation: 4s 0.12s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--5 {
  -webkit-animation: 4s 0.16s;
          animation: 4s 0.16s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--6 {
  -webkit-animation: 4s 0.2s;
          animation: 4s 0.2s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--7 {
  -webkit-animation: 4s 0.24s;
          animation: 4s 0.24s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--8 {
  -webkit-animation: 4s 0.28s;
          animation: 4s 0.28s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--9 {
  -webkit-animation: 4s 0.32s;
          animation: 4s 0.32s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--10 {
  -webkit-animation: 4s 0.36s;
          animation: 4s 0.36s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--11 {
  -webkit-animation: 4s 0.04s;
          animation: 4s 0.04s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--12 {
  -webkit-animation: 4s 0.08s;
          animation: 4s 0.08s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--13 {
  -webkit-animation: 4s 0.12s;
          animation: 4s 0.12s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--14 {
  -webkit-animation: 4s 0.16s;
          animation: 4s 0.16s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--15 {
  -webkit-animation: 4s 0.2s;
          animation: 4s 0.2s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--16 {
  -webkit-animation: 4s 0.24s;
          animation: 4s 0.24s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--17 {
  -webkit-animation: 4s 0.28s;
          animation: 4s 0.28s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--18 {
  -webkit-animation: 4s 32s;
          animation: 4s 32s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--19 {
  -webkit-animation: 4s 0.36s;
          animation: 4s 0.36s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--20 {
  -webkit-animation: 4s 0.4s;
          animation: 4s 0.4s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--21 {
  -webkit-animation: 4s 0.36s;
          animation: 4s 0.36s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--22 {
  -webkit-animation: 4s 0.52s;
          animation: 4s 0.52s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--1 {
  -webkit-animation: 3.4s 0.66s;
          animation: 3.4s 0.66s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--2 {
  -webkit-animation: 3s 0.32s;
          animation: 3s 0.32s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--3 {
  -webkit-animation: 4.4s 0.14s;
          animation: 4.4s 0.14s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--4 {
  -webkit-animation: 4.2s 0.18s;
          animation: 4.2s 0.18s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--5 {
  -webkit-animation: 3.2s 0.34s;
          animation: 3.2s 0.34s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--6 {
  -webkit-animation: 3.8s 0.14s;
          animation: 3.8s 0.14s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--7 {
  -webkit-animation: 3.4s 0.28s;
          animation: 3.4s 0.28s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--8 {
  -webkit-animation: 3s 0.52s;
          animation: 3s 0.52s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--9 {
  -webkit-animation: 3.8s 0.42s;
          animation: 3.8s 0.42s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--10 {
  -webkit-animation: 3.4s 0.48s;
          animation: 3.4s 0.48s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--11 {
  -webkit-animation: 4.2s 0.26s;
          animation: 4.2s 0.26s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--12 {
  -webkit-animation: 3.2s 0.36s;
          animation: 3.2s 0.36s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--13 {
  -webkit-animation: 4.4s 0.44s;
          animation: 4.4s 0.44s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--14 {
  -webkit-animation: 3.6s 0.48s;
          animation: 3.6s 0.48s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--15 {
  -webkit-animation: 2.8s 0.18s;
          animation: 2.8s 0.18s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--16 {
  -webkit-animation: 3.4s 0.24s;
          animation: 3.4s 0.24s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--17 {
  -webkit-animation: 4s 0.48s;
          animation: 4s 0.48s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--18 {
  -webkit-animation: 3s 0.56s;
          animation: 3s 0.56s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--19 {
  -webkit-animation: 4.2s 0.2s;
          animation: 4.2s 0.2s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--20 {
  -webkit-animation: 3.4s 0.6s;
          animation: 3.4s 0.6s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--21 {
  -webkit-animation: 3.8s 0.1s;
          animation: 3.8s 0.1s;
}

.sound-gauge.is-active .svg-sound-gauge__rect--22 {
  -webkit-animation: 3.2s 0.3s;
          animation: 3.2s 0.3s;
}

.sound-gauge.is-active rect {
  -webkit-animation-name: svg-gauge-1 !important;
          animation-name: svg-gauge-1 !important;
  -webkit-animation-timing-function: ease-out !important;
          animation-timing-function: ease-out !important;
  -webkit-animation-iteration-count: infinite !important;
          animation-iteration-count: infinite !important;
}

@-webkit-keyframes svg-gauge-1 {
  0% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  5% {
    transform: scale(1, 0.3);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  10% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  15% {
    transform: scale(1, 0.3);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  20% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  25% {
    transform: scale(1, 0.4);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  30% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  35% {
    transform: scale(1, 0.3);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  40% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  45% {
    transform: scale(1, 0.24);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  50% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  55% {
    transform: scale(1, 0.28);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  60% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  65% {
    transform: scale(1, 0.54);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  70% {
    transform: scale(1, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  75% {
    transform: scale(1, 0.66);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  80% {
    transform: scale(1, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  85% {
    transform: scale(1, 1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  90% {
    transform: scale(1, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  95% {
    transform: scale(1, 0.8);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  100% {
    transform: scale(1, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
}

@keyframes svg-gauge-1 {
  0% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  5% {
    transform: scale(1, 0.3);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  10% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  15% {
    transform: scale(1, 0.3);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  20% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  25% {
    transform: scale(1, 0.4);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  30% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  35% {
    transform: scale(1, 0.3);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  40% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  45% {
    transform: scale(1, 0.24);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  50% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  55% {
    transform: scale(1, 0.28);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  60% {
    transform: scale(1, 0.2);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  65% {
    transform: scale(1, 0.54);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  70% {
    transform: scale(1, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  75% {
    transform: scale(1, 0.66);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  80% {
    transform: scale(1, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  85% {
    transform: scale(1, 1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  90% {
    transform: scale(1, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  95% {
    transform: scale(1, 0.8);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  100% {
    transform: scale(1, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
}

/* -----------------------------------------------
 * scroll icon
 * ----------------------------------------------- */
.svg-scroll-line,
.svg-scroll-arrow,
.svg-scroll-curve {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-miterlimit: 4;
}

.svg-scroll-wheel {
  -webkit-animation: svg-scroll-wheel 8s ease-out 0s infinite;
          animation: svg-scroll-wheel 8s ease-out 0s infinite;
}

.svg-scroll-line {
  -webkit-animation: svg-scroll-line 8s ease-out 0s infinite;
          animation: svg-scroll-line 8s ease-out 0s infinite;
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
}

.svg-scroll-arrow {
  -webkit-animation: svg-scroll-arrow 8s ease-out 0s infinite;
          animation: svg-scroll-arrow 8s ease-out 0s infinite;
}

.svg-scroll-curve {
  -webkit-clip-path: url(#SVGID_1_);
          clip-path: url(#SVGID_1_);
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-miterlimit: 4;
  -webkit-animation: svg-scroll-curve 8s ease-out 0s infinite;
          animation: svg-scroll-curve 8s ease-out 0s infinite;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}

.ie .svg-scroll-wheel,
.ie .svg-scroll-line,
.ie .svg-scroll-arrow,
.ie .svg-scroll-curve {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  -webkit-animation: none;
          animation: none;
  display: block;
}

.ie .sns-menu__item--scroll {
  -webkit-animation: svg-scroll-iefix 5s ease-out 0s infinite !important;
          animation: svg-scroll-iefix 5s ease-out 0s infinite !important;
}

.ie .sns-menu__item--scroll svg {
  height: 51px;
}

@-webkit-keyframes svg-scroll-iefix {
  0% {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  5% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  85% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  90% {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  100% {
    opacity: 0;
  }
}

@keyframes svg-scroll-iefix {
  0% {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  5% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  85% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  90% {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes svg-scroll-wheel {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  12% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(0, 0, 0);
  }
  24% {
    transform: translate3d(0, 3px, 0);
  }
  28% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  77% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes svg-scroll-wheel {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  12% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(0, 0, 0);
  }
  24% {
    transform: translate3d(0, 3px, 0);
  }
  28% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  77% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes svg-scroll-line {
  0% {
    stroke-dashoffset: 60;
  }
  5% {
    stroke-dashoffset: 60;
  }
  12% {
    stroke-dashoffset: 40;
  }
  20% {
    transform: translate3d(0, 0, 0);
  }
  24% {
    transform: translate3d(0, 3px, 0);
  }
  28% {
    transform: translate3d(0, 0, 0);
  }
  60% {
    stroke-dashoffset: 40;
  }
  80% {
    stroke-dashoffset: 40;
  }
  87% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 20;
  }
}

@keyframes svg-scroll-line {
  0% {
    stroke-dashoffset: 60;
  }
  5% {
    stroke-dashoffset: 60;
  }
  12% {
    stroke-dashoffset: 40;
  }
  20% {
    transform: translate3d(0, 0, 0);
  }
  24% {
    transform: translate3d(0, 3px, 0);
  }
  28% {
    transform: translate3d(0, 0, 0);
  }
  60% {
    stroke-dashoffset: 40;
  }
  80% {
    stroke-dashoffset: 40;
  }
  87% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 20;
  }
}

@-webkit-keyframes svg-scroll-curve {
  0% {
    stroke-dashoffset: 240;
  }
  10% {
    stroke-dashoffset: 160;
  }
  30% {
    stroke-dashoffset: 160;
  }
  50% {
    stroke-dashoffset: 160;
  }
  75% {
    stroke-dashoffset: 160;
  }
  85% {
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dashoffset: 80;
  }
}

@keyframes svg-scroll-curve {
  0% {
    stroke-dashoffset: 240;
  }
  10% {
    stroke-dashoffset: 160;
  }
  30% {
    stroke-dashoffset: 160;
  }
  50% {
    stroke-dashoffset: 160;
  }
  75% {
    stroke-dashoffset: 160;
  }
  85% {
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dashoffset: 80;
  }
}

@-webkit-keyframes svg-scroll-arrow {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 0;
  }
  7% {
    transform: translate3d(0, -5px, 0);
    opacity: 0;
  }
  12% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  20% {
    transform: translate3d(0, 0, 0);
  }
  24% {
    transform: translate3d(0, 5px, 0);
  }
  28% {
    transform: translate3d(0, 0, 0);
  }
  80% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  85% {
    transform: translate3d(0, 3px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 3px, 0);
    opacity: 0;
  }
}

@keyframes svg-scroll-arrow {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 0;
  }
  7% {
    transform: translate3d(0, -5px, 0);
    opacity: 0;
  }
  12% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  20% {
    transform: translate3d(0, 0, 0);
  }
  24% {
    transform: translate3d(0, 5px, 0);
  }
  28% {
    transform: translate3d(0, 0, 0);
  }
  80% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  85% {
    transform: translate3d(0, 3px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 3px, 0);
    opacity: 0;
  }
}

/* -----------------------------------------------
 * home -> update banner
 * ----------------------------------------------- */
.update-banner {
  min-width: 178px;
  position: fixed;
  bottom: 100px;
  left: -178px;
  z-index: 100;
  transform: translate3d(0, 0, 0);
  transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: 0s;
  /* アップデート情報がある場合に付与する */
}

.update-banner:before {
  content: "";
  display: block;
  width: 86px;
  height: 80px;
  background: url("/img/common/topics_tri.svg") no-repeat left center;
  background-size: contain;
  position: relative;
  left: -36px;
}

.update-banner a {
  display: block;
}

.update-banner a:hover .update-banner__title {
  text-decoration: underline;
}

.update-banner.is-active {
  display: block;
  left: 0;
  transform: translate3d(0, 0, 0);
  transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.update-banner__inner {
  background: #000;
  color: #fff;
  padding: 15px 15px 15px 35px;
  max-width: 178px;
}

.update-banner__thumb {
  line-height: 0;
}

.update-banner__thumb img {
  max-width: 100%;
  object-fit: contain;
}

.update-banner__title {
  font-size: 1.3rem;
  line-height: 2.2rem;
  letter-spacing: .1em;
  margin-bottom: 10px;
}

.update-banner__date {
  font-family: stenciletta-solid, noto-sans-cjk-jp, sans-serif;
  font-size: 3.9rem;
  line-height: 3rem;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.update-banner__date-head {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2rem;
  letter-spacing: -.02em;
  margin-bottom: 6px;
  display: inline-block;
}

.update-banner__more {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-style: italic;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.7rem;
  position: absolute;
  bottom: 14px;
}

.update-banner__more:before {
  content: ">";
  display: block;
}

/* -----------------------------------------------
 * component -> more button
 * ----------------------------------------------- */
.c-rotate-btn {
  font-family: urbane, noto-sans-cjk-jp, sans-serif;
  font-size: 1.8rem;
  font-weight: 100;
  letter-spacing: .32em;
  white-space: nowrap;
  text-align: center;
  display: table;
  width: 150px;
  margin: 0 auto;
  transform: rotate(-45deg);
}

.c-rotate-btn a {
  display: block;
  transition: .2s;
}

.c-rotate-btn a:after {
  content: "";
  background: url("/img/common/icon_arrow_right_02.svg") no-repeat center top;
  background-size: contain;
  width: 147px;
  height: 12px;
  margin-top: 10px;
  display: block;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  transition: .2s;
}

.c-rotate-btn a:hover {
  text-indent: 6px;
}

.c-rotate-btn a:hover:after {
  transform: translate3d(10px, 0, 0);
}

/* -----------------------------------------------
 * component -> more button (page back)
 * ----------------------------------------------- */
.c-rotate-btn--pageback {
  font-size: 1.4rem;
  margin: 80px auto;
}

/* -----------------------------------------------
 * component -> modal
 * ----------------------------------------------- */
.c-modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10010;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  will-change: display;
}

.c-modal img {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.c-modal.is-active {
  display: block;
}

.c-modal__bg {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.c-modal__close {
  background: url("/img/common/btn_modal_close.svg") no-repeat center;
  background-size: contain;
  width: 132px;
  height: 96px;
  position: absolute;
  right: 50px;
  top: 50px;
  z-index: 100;
  cursor: pointer;
  transition: opacity .3s;
}

.c-modal__close:hover {
  opacity: .4;
}

.c-modal__copy {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1.8rem;
  position: absolute;
  left: 50px;
  bottom: 50px;
  z-index: 10;
}

.c-modal__outer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.c-modal__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-modal__document {
  display: none;
  width: 100%;
  max-width: 1100px;
}

/* -----------------------------------------------
 * [PC]units -> modal youtube
 * ----------------------------------------------- */
.c-modal__youtube {
  display: none;
  width: calc(100% - 400px);
  max-width: 1100px;
  margin: auto;
  position: relative;
}

.c-modal__youtube.is-active {
  display: block;
}

.c-modal__youtube iframe {
  line-height: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.c-modal__youtube__inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 56.25%;
  transform: translate3d(0, -50%, 0);
}

.c-modal__youtube__inner:before {
  background-color: #000;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 99.9%;
  z-index: 1;
}

.c-modal__youtube__inner:after {
  content: "";
  background: url("/img/common/modal_shadow.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  left: -10px;
  top: -10px;
  width: 106.22%;
  height: 110.22%;
  z-index: 0;
  pointer-events: none;
}

/* -----------------------------------------------
 * [PC]units -> modal image
 * ----------------------------------------------- */
.c-modal__image {
  display: none;
  text-align: center;
  width: 70%;
  max-width: 1100px;
  margin: auto;
  position: relative;
}

.c-modal__image:after {
  content: "";
  background: url("/img/common/modal_shadow.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  left: -10px;
  top: -10px;
  width: 106.22%;
  height: 110.22%;
  z-index: 0;
  pointer-events: none;
}

.c-modal__image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.c-modal__image.is-active {
  display: block;
}

/* -----------------------------------------------
 * [PC]units -> modal production
 * ----------------------------------------------- */
.c-modal__prod {
  font-weight: bold;
  width: 410px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
  display: none;
  padding: 60px 0;
}

.c-modal__prod.is-active {
  display: flex;
}

.prod-info {
  display: none;
}

.prod-info.is-active {
  display: block;
}

.prod-info__logo {
  text-align: center;
  position: relative;
}

.prod-info__logo:after {
  background-color: #fff;
  content: "";
  width: 190px;
  height: 190px;
  border-radius: 100px;
  opacity: .5;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate3d(-50%, -50%, 0);
}

.prod-info__logo img {
  position: relative;
  z-index: 1;
}

.prod-info__photo {
  margin: 60px auto 0;
  position: relative;
}

.prod-info__photo:after {
  content: "";
  background: url("/img/units/modal_photo_shadow.png") no-repeat center;
  background-size: contain;
  position: absolute;
  left: -10px;
  top: -10px;
  width: 457px;
  height: 253px;
  z-index: 0;
  pointer-events: none;
}

.prod-info__photo img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.prod-info__title {
  font-size: 1.8rem;
  letter-spacing: .48em;
  margin: 50px 0 0;
}

.prod-info__desc {
  font-size: 1.5rem;
  font-feature-settings: "palt" 1;
  line-height: 2.6rem;
  letter-spacing: .16em;
  text-align: justify;
  word-break: break-all;
  margin: 12px 0 0;
}

/* -----------------------------------------------
 * [PC]units -> modal cv
 * ----------------------------------------------- */
.cv-comment {
  display: none;
}

.cv-comment.is-active {
  display: block;
}

.cv-comment {
  font-weight: bold;
  position: relative;
}

.cv-comment__head {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
  width: 100%;
  position: absolute;
  top: -110px;
}

.cv-comment__box {
  width: 437px;
  display: flex;
  padding: 30px 0;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.cv-comment__photo {
  width: 108px;
}

.cv-comment__photo img {
  width: 100%;
  height: auto;
}

.cv-comment__textset {
  width: 330px;
  padding-left: 25px;
}

.cv-comment__name {
  font-size: 1.8rem;
  font-feature-settings: "palt" 1;
  letter-spacing: .05em;
}

.cv-comment__name span {
  font-size: 1.4rem;
  position: relative;
  top: -2px;
}

.cv-comment__text {
  font-size: 1.4rem;
  line-height: 2.6rem;
  text-align: justify;
  word-break: break-all;
  margin-top: 16px;
}

/* -----------------------------------------------
 * [PC]units -> modal voice_text
 * ----------------------------------------------- */
.voice-text {
  display: none;
}

.voice-text.is-active {
  display: block;
}

.voice-text {
  font-weight: bold;
  position: relative;
}

.voice-text__box {
  width: 437px;
  display: flex;
  padding: 30px 0;
}

.voice-text__textset {
  width: 70vw;
  margin: 20% auto;
}

.voice-text__text {
  font-size: 1.4rem;
  line-height: 2.6rem;
  text-align: justify;
  word-break: break-all;
  margin-top: 16px;
}

/* -----------------------------------------------
 * [PC]units -> modal voice2_text
 * ----------------------------------------------- */
.voice2-text {
  display: none;
}

.voice2-text.is-active {
  display: block;
}

.voice2-text {
  font-weight: bold;
  position: relative;
}

.voice2-text__box {
  width: 437px;
  display: flex;
  padding: 30px 0;
}

.voice2-text__textset {
  width: 70vw;
  margin: 20% auto;
}

.voice2-text__text {
  font-size: 1.4rem;
  line-height: 2.6rem;
  text-align: justify;
  word-break: break-all;
  margin-top: 16px;
}

/* -----------------------------------------------
 * [PC]modal -> discography
 * ----------------------------------------------- */
.c-modal__disco {
  font-weight: bold;
  width: 410px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
  display: none;
  padding: 60px 0;
}

.c-modal__disco.is-active {
  display: flex;
}

.disco-info {
  display: none;
}

.disco-info.is-active {
  display: block;
}

.disco-info__head {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
}

.disco-info-track {
  margin-top: 60px;
}

.disco-info-track__caption {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.disco-info-track__name {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.7rem;
  letter-spacing: .16em;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 11px 0 14px;
  margin-top: 4px;
  padding-left:2em;
  text-indent:-2em;
}

.disco-info__img {
  margin: 50px auto 0;
  display: table;
  position: relative;
}

.disco-info__img:after {
  content: "";
  background: url("/img/discography/modal_img_shadow.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  left: -10px;
  top: -10px;
  width: 110.27%;
  height: 129.37%;
  z-index: 0;
  pointer-events: none;
}

.disco-info__img img {
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.disco-info__title {
  font-size: 1.8rem;
  line-height: 2.7rem;
  letter-spacing: .48em;
  margin: 36px 0 0 0;
  padding-left: 16px;
  display: flex;
}

.disco-info__title.is-single {
  align-items: center;
}

.disco-info__title:before {
  content: "";
  background: url("/img/discography/icon_modal_1st.png") no-repeat center;
  background-size: contain;
  display: inline-block;
  width: 26px;
  height: 34px;
  z-index: 0;
  margin-right: 6px;
  pointer-events: none;
  position: relative;
  left: -15px;
  top: auto;
}

.disco-info__title.is-2nd:before {
  background: url("/img/discography/icon_modal_2nd.png") no-repeat center;
  background-size: contain;
  top: -2px;
}

.disco-info__edit p {
  font-size: 1.5rem;
  font-feature-settings: "palt" 1;
  line-height: 2.6rem;
  letter-spacing: .16em;
  text-align: justify;
  word-break: break-all;
  margin: 16px 0 0;
}

.disco-info__edit small {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-feature-settings: "palt" 1;
  letter-spacing: .16em;
  display: block;
  margin-left: 1em;
  text-indent: -1em;
}

.disco-info__edit p + small {
  margin-top: 34px;
}

/* -----------------------------------------------
 * [PC]component -> paging
 * ----------------------------------------------- */
.c-paging {
  text-align: center;
  display: table;
  margin: 0 auto 50px;
  position: relative;
}

.c-paging__list {
  display: inline-block;
  padding: 0;
  margin: 0 60px;
}

.c-paging__item {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  display: inline-block;
  margin: 0 12px;
  position: relative;
  transition: opacity .2s;
}

.c-paging__item a {
  color: #000;
  opacity: initial;
}

.c-paging__item:hover {
  opacity: .7;
}

.c-paging__item.is-current {
  pointer-events: none;
}

.c-paging__item.is-current:after {
  background-color: #000;
  content: "";
  width: 32px;
  height: 2px;
  position: absolute;
  top: 40%;
  left: 70%;
  transform: translate3d(-50%, -50%, 0) rotate(-60deg);
}

.c-paging__item.is-blank {
  pointer-events: none;
}

.c-paging__nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  position: relative;
  z-index: 10;
}

.c-paging__prev,
.c-paging__next {
  background: url("/img/common/slider_arrow.svg") no-repeat center;
  width: 87px;
  height: 12px;
  z-index: 0;
  cursor: pointer;
  transition: opacity .2s;
}

.c-paging__prev:hover,
.c-paging__next:hover {
  opacity: .6;
}

.c-paging__prev {
  margin: 0 0 6px -50px;
}

.c-paging__next {
  margin: 0 -50px 6px 0;
  transform: scale(-1, -1);
}

/* -----------------------------------------------
 * [PC]component -> sns share button
 * ----------------------------------------------- */
.c-sns-share {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}

.c-sns-share__title {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
}

.c-sns-share__list {
  display: flex;
}

.c-sns-share__item {
  margin-left: 60px;
}

.c-sns-share__item a {
  text-align: center;
  display: block;
  width: 30px;
  transition: opacity .3s;
}

.c-sns-share__item a:hover {
  opacity: .6;
}

/* -----------------------------------------------
 * common -> header
 * ----------------------------------------------- */
.header {
  display: block;
  width: 100%;
  max-width: 1180px;
  padding: 0;
  margin: 0 auto 64px;
}

.header__inner {
  padding-top: 90px;
  position: relative;
}

.header__logo {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: fixed;
  top: -2px;
  left: 0;
  right: 0;
  z-index: 100;
}

.header__logo img {
  width: 718px;
  height: auto;
}

/* -----------------------------------------------
 * common -> global menu
 * ----------------------------------------------- */
.global__list {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  display: block;
  width: 100%;
  margin: auto;
}

.global__item {
  display: inline-block;
  margin-right: 24px;
  position: relative;
}

.global__item a {
  position: relative;
}

.global__item a:before {
  background: url("/img/common/icon_menu_vertical.svg") no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  width: 12px;
  height: 14px;
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -6px, 0);
  transition: .2s;
}

.global__item a:hover:before {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.global__item.is-current a:before {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: none;
}

.global__item:last-child {
  margin-right: 0;
}

.global__item.is-blank a:after {
  background: url("/img/common/icon_blank.svg") no-repeat center;
  background-size: contain;
  content: "";
  display: inline-block;
  width: 14px;
  height: 11px;
  margin-left: 4px;
}

.global__item.is-disabled a, .global__item.is-disabled span {
  pointer-events: none;
  position: relative;
}

.global__item.is-disabled a:after, .global__item.is-disabled span:after {
  background-color: #000;
  content: "";
  display: block;
  width: calc(100% + 16px);
  height: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin: auto;
  transform: translate3d(-50%, 0, 0);
}

/* -----------------------------------------------
 * common -> 左側スクロール後メニュー
 * ----------------------------------------------- */
.global-fixed-btn {
  background-color: #000;
  width: 100px;
  height: 60px;
  position: fixed;
  left: 0;
  top: 70px;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transform: translate3d(-100%, 0, 0);
  transition: 0.4s cubic-bezier(0.97, 0, 0.175, 1);
}

.global-fixed-btn.is-active {
  transform: translate3d(0, 0, 0);
}

.global-fixed-btn:after {
  content: '';
  background: url("/img/common/hd_btn_menu_white.svg") no-repeat center;
  background-size: contain;
  width: 40px;
  height: 38px;
  z-index: 1000;
  display: inline-block;
  transition: opacity .3s;
}

.global-fixed-btn:hover:after {
  opacity: .7;
}

.global-fixed {
  background-color: #000;
  position: fixed;
  left: 0;
  top: 70px;
  z-index: 101;
  transform: translate3d(-100%, 0, 0);
  padding: 80px 30px 130px 50px;
  transition: 0.4s cubic-bezier(0.97, 0, 0.175, 1);
}

.global-fixed.is-active {
  transform: translate3d(0, 0, 0);
}

.global-fixed:after {
  content: '';
  background: url("/img/common/hd_menu_title.svg") no-repeat center;
  background-size: contain;
  width: 60px;
  height: 57px;
  position: absolute;
  right: 15px;
  bottom: 15px;
}

.global-fixed__close {
  background: url("/img/common/hd_btn_menu_close_white.svg") no-repeat center;
  background-size: contain;
  width: 46px;
  height: 33px;
  position: absolute;
  left: 30px;
  top: 15px;
  z-index: 1;
  cursor: pointer;
  transition: opacity .3s;
}

.global-fixed__close:hover {
  opacity: .7;
}

.global-fixed__list {
  color: #fff;
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  display: block;
  width: 100%;
}

.global-fixed__item {
  margin: 0 0 13px;
  position: relative;
}

.global-fixed__item a {
  display: inline-block;
  position: relative;
}

.global-fixed__item:last-child {
  margin-right: 0;
}

.global-fixed__item a:before {
  background: url("/img/common/icon_menu_horizontal_white.svg") no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  width: 14px;
  height: 12px;
  position: absolute;
  left: -19px;
  bottom: 0;
  top: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-6px, 0, 0);
  transition: .2s;
}

.global-fixed__item a:hover:before {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.global-fixed__item.is-current a:before {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: none;
}

.global-fixed__item.is-blank a:after {
  background: url("/img/common/icon_blank_white.svg") no-repeat center;
  background-size: contain;
  content: "";
  display: inline-block;
  width: 14px;
  height: 11px;
  margin-left: 6px;
}

.global-fixed__item.is-disabled a, .global-fixed__item.is-disabled span {
  pointer-events: none;
  position: relative;
}

.global-fixed__item.is-disabled a:after, .global-fixed__item.is-disabled span:after {
  background-color: #fff;
  content: "";
  display: block;
  width: calc(100% + 16px);
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin: auto;
  transform: translate3d(-50%, 0, 0);
}

/* -----------------------------------------------
 * common -> 右上shareメニュー
 * ----------------------------------------------- */
.sns-menu {
  position: fixed;
  right: 25px;
  top: 30px;
  z-index: 100;
  width: 30px;
}

.sns-menu__list {
  position: relative;
  z-index: 10;
}

.sns-menu__item {
  text-align: center;
  width: 30px;
  margin-bottom: 25px;
  will-change: opacity;
  transition: opacity .2s;
}

.sns-menu__item.is-disabled {
  opacity: 0;
  pointer-events: none;
}

.sns-menu__item--twitter {
  width: 30px;
  height: 25px;
}

.sns-menu__item--twitter svg {
  fill: #000;
  width: 30px;
  height: 29px;
  transition: fill .3s;
  transition-delay: .2s;
}

.sns-menu__item--twitter.is-active svg {
  fill: #fff;
}

.sns-menu__item--share svg {
  fill: #000;
  width: 22px;
  transition: .3s;
  transition-delay: .2s;
}

.sns-menu__item--share path {
  stroke: #000;
  stroke-width: 2px;
  transition: .3s;
  transition-delay: .2s;
}

.sns-menu__item--share.is-active svg {
  fill: #fff;
}

.sns-menu__item--share.is-active path {
  stroke: #fff;
}

.sns-menu__item--scroll svg {
  width: 22px;
}

/* -----------------------------------------------
 * common -> SNSメニュー
 * ----------------------------------------------- */
.header-share {
  display: none;
}

/* -----------------------------------------------
 * common -> SNSメニュー -> Twitterアカウント展開
 * ----------------------------------------------- */
.sns-menu-accounts {
  background-color: #000;
  color: #fff;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 0;
  width: 0;
  transform: translate3d(0, 0, 0);
  transition: 0.5s cubic-bezier(0.97, 0, 0.175, 1);
}

.sns-menu-accounts.is-active {
  width: 224px;
}

.sns-menu-accounts.is-active .sns-menu-accounts__inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.sns-menu-accounts__inner {
  transform: translate3d(-124px, 0, 0);
  padding: 52px 0 34px 32px;
  opacity: 0;
  transition: 0.5s cubic-bezier(0.97, 0, 0.175, 1);
}

.sns-menu-accounts__item {
  transition: opacity .3s;
}

.sns-menu-accounts__item:hover {
  opacity: .7;
}

.sns-menu-accounts__item + .sns-menu-accounts__item {
  margin-top: 24px;
}

.sns-menu-accounts__type {
  font-family: urbane, noto-sans-cjk-jp, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.2rem;
  letter-spacing: .24em;
}

.sns-menu-accounts__account {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 5px;
}

/* -----------------------------------------------
 * common -> SNSメニュー -> Shareボタン展開
 * ----------------------------------------------- */
.sns-menu-shares {
  background-color: #000;
  color: #fff;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 0;
  width: 0;
  transform: translate3d(0, 0, 0);
  transition: 0.5s cubic-bezier(0.97, 0, 0.175, 1);
}

.sns-menu-shares.is-active {
  width: 224px;
}

.sns-menu-shares.is-active .sns-menu-shares__inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.sns-menu-shares__inner {
  width: 224px;
  transform: translate3d(-124px, 0, 0);
  padding: 57px 0 34px 32px;
  opacity: 0;
  transition: 0.5s cubic-bezier(0.97, 0, 0.175, 1);
}

.sns-menu-shares__title {
  font-family: urbane, noto-sans-cjk-jp, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .24em;
}

.sns-menu-shares__list {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.4rem;
  letter-spacing: .05em;
  margin-top: 22px;
}

.sns-menu-shares__item {
  transition: opacity .3s;
}

.sns-menu-shares__item + .sns-menu-shares__item {
  margin-top: 18px;
}

.sns-menu-shares__item:hover {
  opacity: .7;
}

.sns-menu-shares__item a {
  display: block;
}

.sns-menu-shares__item a:before {
  content: "";
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 14px;
}

.sns-menu-shares__item--twitter a:before {
  background: url("/img/common/icon_twi_white.svg") no-repeat center;
  background-size: contain;
  width: 22px;
  height: 21px;
}

.sns-menu-shares__item--facebook a:before {
  background: url("/img/common/icon_fb_white.svg") no-repeat center;
  background-size: contain;
  width: 22px;
  height: 21px;
}

.sns-menu-shares__item--line a:before {
  background: url("/img/common/icon_line_white.svg") no-repeat center;
  background-size: contain;
  width: 22px;
  height: 21px;
}

/* -----------------------------------------------
 * common -> footer
 * ----------------------------------------------- */
.footer {
  background: #d7e1e1;
  padding: 120px 90px 60px;
  display: block;
  position: relative;
  z-index: 2;
}

/* ページトップ ---------------------------------------------- */
.footer__pagetop {
  width: 66px;
  height: 75px;
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  margin: auto;
  cursor: pointer;
}

.footer__pagetop:after {
  content: "";
  background: url("/img/common/icon_pagetop.svg") no-repeat center top;
  background-size: contain;
  width: 66px;
  height: 75px;
  display: block;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  transition: .3s;
}

.footer__pagetop:hover:after {
  transform: translate3d(0, -10px, 0);
  opacity: .5;
}
/* Youtubeアカウント紹介 ---------------------------------------------- */
.footer-youtube {
  width: 100%;
  max-width: 724px;
  margin: 0 auto 70px;
}

.footer-youtube__title {
  font-size: 1.7rem;
  letter-spacing: .44em;
  text-align: center;
  margin-bottom: 30px;
}

.footer-youtube__title span {
  font-family: urbane, noto-sans-cjk-jp, sans-serif;
  font-weight: normal;
  letter-spacing: .24em;
}

.footer-youtube__wrap {
  display: flex;
  justify-content: center;
}

.footer-youtube__center {
  width: 804px;
  padding: 0 50px;
  position: relative;
  /* 左右の垂直バー */
}

.footer-youtube__center:before, .footer-youtube__center:after {
  background: #000;
  content: "";
  width: 1px;
  height: 22px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.footer-youtube__center:before {
  left: 0;
}

.footer-youtube__center:after {
  right: 0;
}

.footer-youtube__center {
  justify-content: center;
}

.footer-youtube__item {
  text-align: left;
  position: relative;
}

.footer-youtube__item + .footer-youtube__item {
  margin-top: 10px;
}

.footer-youtube__item a {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}

.footer-youtube__item a:before {
  content: "";
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  margin-right: 15px;
}

.footer-youtube__item a:hover {
  opacity: .7;
}

.footer-youtube__item--main {
  padding-top: 4px;
}

.footer-youtube__item--main a:before {
  background-image: url("/img/common/youtube_icon_contents.png");
  flex-shrink: 0;
  width: 124px;
  height: 124px;
}

.footer-youtube__item-title {
  font-size: 1.5rem;
  font-weight: bold;
  white-space: nowrap;
  letter-spacing: .5em;
  margin-bottom: 20px;
}

.footer-youtube__type {
  font-family: urbane, noto-sans-cjk-jp, sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: .24em;
  white-space: nowrap;
  margin-bottom: 6px;
  display: block;
}

.footer-youtube__type--basic,
.footer-youtube__type--music {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.footer-youtube__account {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  display: block;
  text-align: center;
}

.footer-youtube__account--basic,
.footer-youtube__account--music {
  font-size: 1.7rem;
}
/* Twitterアカウント紹介 ---------------------------------------------- */
.footer-twi {
  width: 100%;
  max-width: 724px;
  margin: 0 auto 110px;
}

.footer-twi__title {
  font-size: 1.7rem;
  letter-spacing: .44em;
  text-align: center;
  margin-bottom: 50px;
}

.footer-twi__title span {
  font-family: urbane, noto-sans-cjk-jp, sans-serif;
  font-weight: normal;
  letter-spacing: .24em;
}

.footer-twi__wrap {
  display: flex;
}

.footer-twi__left {
  width: 402px;
  padding: 0 50px;
  position: relative;
  /* 左右の垂直バー */
}

.footer-twi__left:before, .footer-twi__left:after {
  background: #000;
  content: "";
  width: 1px;
  height: 22px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.footer-twi__left:before {
  left: 0;
}

.footer-twi__left:after {
  right: 0;
}

.footer-twi__right {
  width: 318px;
  padding: 0 50px;
  position: relative;
  /* 左右の垂直バー */
}

.footer-twi__right:after {
  background: #000;
  content: "";
  width: 1px;
  height: 22px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.footer-twi__item {
  text-align: left;
  position: relative;
}

.footer-twi__item + .footer-twi__item {
  margin-top: 10px;
}

.footer-twi__item a {
  display: flex;
  position: relative;
  align-items: center;
  transition: opacity .2s;
}

.footer-twi__item a:before {
  content: "";
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  margin-right: 15px;
}

.footer-twi__item a:hover {
  opacity: .7;
}

.footer-twi__item--main {
  padding-top: 4px;
}

.footer-twi__item--main a:before {
  background-image: url("/img/common/twitter_icon_contents.png");
  flex-shrink: 0;
  width: 66px;
  height: 66px;
}

.footer-twi__item--basic a:before,
.footer-twi__item--music a:before {
  width: 47px;
  height: 47px;
}

.footer-twi__item--basic a:before {
  background-image: url("/img/common/twitter_icon_basic.png");
}

.footer-twi__item--music a:before {
  background-image: url("/img/common/twitter_icon_music.png");
}

.footer-twi__item-title {
  font-size: 1.5rem;
  font-weight: bold;
  white-space: nowrap;
  letter-spacing: .5em;
  margin-bottom: 20px;
}

.footer-twi__type {
  font-family: urbane, noto-sans-cjk-jp, sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: .24em;
  white-space: nowrap;
  margin-bottom: 6px;
  display: block;
}

.footer-twi__type--basic,
.footer-twi__type--music {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.footer-twi__account {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  display: block;
}

.footer-twi__account--basic,
.footer-twi__account--music {
  font-size: 1.7rem;
}

/* フッター SHARE ---------------------------------------------- */
.footer-share {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}

.footer-share__title {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
}

.footer-share__list {
  display: flex;
}

.footer-share__item {
  margin-left: 60px;
}

.footer-share__item a {
  text-align: center;
  display: block;
  width: 30px;
  transition: opacity .3s;
}

.footer-share__item a:hover {
  opacity: .6;
}

/* フッターナビゲーション ---------------------------------------------- */
.footer-menu {
  margin-bottom: 30px;
}

.footer-menu__list {
  display: flex;
}

.footer-menu__item {
  font-size: 1.5rem;
  font-weight: bold;
}

.footer-menu__item a {
  transition: opacity .3s;
}

.footer-menu__item a:before {
  content: "> ";
}

.footer-menu__item a:hover {
  opacity: .6;
}

.footer-menu__item + .footer-menu__item {
  margin-left: 30px;
}

/* ロゴ、プライバシー、コピーライトなど ---------------------------------------------- */
.footer__logo-left {
  text-align: left;
  display: inline-block;
}

.footer__logo-happy {
  display: inline-block;
}

.footer__logo-cacalia {
  display: inline-block;
  margin-left: 20px;
}

.footer__privacy {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2.3rem;
  text-align: left;
  margin-left: 30px;
  display: inline-block;
  vertical-align: bottom;
}

.footer__copyright {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2.3rem;
  margin-left: 25px;
  display: inline-block;
  vertical-align: bottom;
}

.footer__logo-right {
  position: absolute;
  right: 90px;
  bottom: 60px;
  width: 216px;
}

.footer__logo-right a {
  display: block;
}

.footer__logo-right img {
  width: 100%;
  height: auto;
  pointer-events: none;
}

.footer__app-dl {
  margin-bottom: 90px;
}

.footer__app-dl ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.footer__app-dl ul li {
  width: 233px;
  margin-right: 13px;
}
.footer__app-dl ul li:last-child {
  margin-right: 0;
}

.footer__app-dl ul li a {
  opacity: 1;
  transition: opacity .2s;
}
.footer__app-dl ul li a:hover {
  opacity: .7;
}

.footer__app-dl ul li a img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

/* -----------------------------------------------
 * [PC]component -> page title
 * ----------------------------------------------- */
.c-page-title {
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.c-page-title-top {
  font-family: adrianna, noto-sans-cjk-jp, sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  display: block;
  margin-bottom: 23px;
}

.c-page-title-btm {
  line-height: 0;
}

@media screen and (max-width: 767px) {
  /* -----------------------------------------------
 * [SP] タップ時のハイライトを非表示
 * ----------------------------------------------- */
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  /* -----------------------------------------------
 * [SP] ウィンドウ光彩
 * ----------------------------------------------- */
  .c-shadow--l,
  .c-shadow--r {
    width: 13px;
    background-size: 100% auto;
  }
  .c-shadow--t,
  .c-shadow--b {
    height: 18px;
    background-size: auto 100%;
  }
  /* -----------------------------------------------
 * 構造
 * ----------------------------------------------- */
  .l-wrapper {
    min-width: 320px;
    overflow: hidden;
  }
  .l-container {
    padding: 0 0 90px;
  }
  /* -----------------------------------------------
 * [SP] ページ遷移用 白カバー
 * ----------------------------------------------- */
  /* -----------------------------------------------
 * [SP] 背景の　!!マーク
 * ----------------------------------------------- */
  .c-exc-mark {
    position: fixed;
    top: 71.09vw;
    height: 92.97vw;
    overflow: hidden;
  }
  .c-exc-mark__inner:after {
    width: 72.97vw;
    height: 92.97vw;
    right: -7.81vw;
    top: 0;
  }
  /* -----------------------------------------------
 * [SP] home -> sound gauge
 * ----------------------------------------------- */
  .sound-gauge {
    width: 31.88vw;
    height: 29.84vw;
    position: fixed;
    top: -14.84vw;
    bottom: auto;
    right: auto;
    left: 0;
  }
  .sound-gauge.is-fixed {
    position: fixed !important;
    top: -14.84vw !important;
  }
  #page-home .sound-gauge {
    width: 31.88vw;
    height: 29.84vw;
    position: absolute;
    bottom: auto;
    top: 97.19vw;
    right: auto;
    left: 0;
  }
  /* -----------------------------------------------
 * [SP] home -> update banner
 * ----------------------------------------------- */
  .update-banner {
    min-width: 0;
    bottom: 0;
    left: auto;
    right: -100%;
    /* アップデート情報がある場合に付与する */
  }
  .update-banner:before {
    width: 15.31vw;
    height: 14.38vw;
    position: absolute;
    left: auto;
    right: 0;
    top: -14.06vw;
    transform: scale(-1, 1);
  }
  .update-banner.is-active {
    display: block;
    right: 0;
    left: auto;
  }
  .update-banner__inner {
    padding: 4.69vw;
    display: flex;
    max-width: none;
  }
  .update-banner__title {
    font-size: 2.81vw;
    line-height: 4.38vw;
    text-decoration: underline;
    margin-bottom: 0;
    white-space: nowrap;
    margin-right: 1em;
  }
  .update-banner__title.is-wrap {
    white-space: normal;
  }
  .update-banner__thumb,
  .update-banner__date,
  .update-banner__date-head {
    display: none;
  }
  .update-banner__more {
    font-size: 3.13vw;
    line-height: 2.66vw;
    bottom: 4.69vw;
    right: 4.69vw;
    position: static;
    margin: auto 0 0 0;
  }
  /* -----------------------------------------------
 * component -> more button (page back)
 * ----------------------------------------------- */
  .c-rotate-btn--pageback {
    font-size: 3.75vw;
    margin: 12.5vw auto;
  }
  /* -----------------------------------------------
 * component -> modal
 * ----------------------------------------------- */
  .c-modal__close {
    width: 26.09vw;
    height: 18.44vw;
    right: 7.81vw;
    top: 7.81vw;
    transition: none;
  }
  .c-modal__close:hover {
    opacity: 1;
  }
  .c-modal__copy {
    font-size: 2.03vw;
    line-height: 2.81vw;
    left: 7.81vw;
    bottom: 7.81vw;
  }
  .c-modal__document {
    width: calc(100% - 15.63vw);
  }
  .c-modal__youtube {
    width: calc(100% - 15.63vw);
  }
  .c-modal__youtube__inner:after {
    background-image: url("/img/common/modal_shadow_sp.png");
    width: 109.22%;
    height: 112.22%;
    left: -1.56vw;
    top: 0vw;
  }
  .c-modal__image {
    width: calc(100% - 15.63vw);
  }
  .c-modal__image:after {
    background-image: url("/img/common/modal_shadow_sp.png");
    width: 109.22%;
    height: 112.22%;
    left: -1.56vw;
    top: 0vw;
  }
  /* -----------------------------------------------
 * [SP]units -> modal production
 * ----------------------------------------------- */
  .c-modal__prod {
    width: 76.25vw;
    top: -12.5vw;
  }
  .prod-info__logo {
    transform: scale(0.5);
    width: 29.69vw;
    height: 29.69vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    top: 3.13vw;
  }
  .prod-info__photo {
    margin: 3.13vw auto 0;
  }
  .prod-info__photo:after {
    left: -0.78vw;
    top: -0.78vw;
    width: 83.75vw;
    height: 45.63vw;
  }
  .prod-info__title {
    font-size: 3.28vw;
    margin: 7.81vw 0 0;
  }
  .prod-info__desc {
    font-size: 2.81vw;
    line-height: 4.69vw;
    margin: 2.5vw 0 0;
  }
  /* -----------------------------------------------
 * [SP]units -> cv
 * ----------------------------------------------- */
  .cv-comment__head {
    font-size: 4.69vw;
    top: -14.06vw;
  }
  .cv-comment__box {
    width: 76.25vw;
    padding: 4.69vw 0;
    margin: 0 auto;
  }
  .cv-comment__photo {
    width: 19.53vw;
  }
  .cv-comment__textset {
    width: 62.5vw;
    padding-left: 3.13vw;
  }
  .cv-comment__name {
    font-size: 3.28vw;
  }
  .cv-comment__name span {
    font-size: 2.5vw;
    top: -0.31vw;
    margin-top: 1.88vw;
  }
  .cv-comment__text {
    font-size: 2.81vw;
    line-height: 4.69vw;
    margin-top: 2.81vw;
  }
  /* -----------------------------------------------
 * [PC]modal -> discography
 * ----------------------------------------------- */
  .c-modal__disco {
    width: 76.25vw;
    margin: 0 auto;
    padding: 60px 0;
  }
  .c-modal__disco.is-active {
    display: flex;
  }
  .disco-info__head {
    font-size: 4.69vw;
  }
  .disco-info-track {
    margin-top: 10.94vw;
  }
  .disco-info-track__caption {
    font-size: 2.66vw;
  }
  .disco-info-track__name {
    font-size: 3.44vw;
    line-height: 4.22vw;
    padding: 1.88vw 0 1.88vw;
    margin-top: 0.63vw;
    padding-left:2em;
    text-indent:-2em;
  }
  .disco-info__img {
    width: 66.25vw;
    margin: 7.81vw auto 0;
  }
  .disco-info__img:after {
    position: absolute;
    left: -1.56vw;
    top: -1.56vw;
  }
  .disco-info__img img {
    width: 100%;
    max-width: 66.25vw;
  }
  .disco-info__title {
    font-size: 3.13vw;
    line-height: 4.22vw;
    margin: 8.75vw 0 3.75vw 0;
    align-items: flex-start;
    padding-left: 0;
  }
  .disco-info__title.is-single {
    align-items: center;
  }
  .disco-info__title:before {
    width: 3.91vw;
    height: 5.31vw;
    margin-right: 3.13vw;
    left: 0;
  }
  .disco-info__title.is-2nd:before {
    bottom: 4px;
  }
  .disco-info__edit p {
    font-size: 2.81vw;
    line-height: 4.53vw;
    margin: 2.5vw 0 0;
  }
  .disco-info__edit small {
    font-size: 2.66vw;
    line-height: 4.06vw;
  }
  .disco-info__edit p + small {
    margin-top: 10.94vw;
  }
  /* -----------------------------------------------
 * [SP]component -> paging
 * ----------------------------------------------- */
  .c-paging {
    margin: 9.38vw auto 15.63vw;
  }
  .c-paging__item {
    font-size: 4.38vw;
    transition: none;
    margin: 0;
  }
  .c-paging__item:hover {
    opacity: 1;
  }
  .c-paging__item + .c-paging__item {
    margin-left: 4.69vw;
  }
  .c-paging__item.is-current:after {
    width: 6.25vw;
    height: 0.31vw;
  }
  .c-paging__prev,
  .c-paging__next {
    background: url("/img/common/slider_arrow_sp.svg") no-repeat center;
    background-size: contain;
    width: 37.5vw;
    height: 3.13vw;
    transition: none;
  }
  .c-paging__prev:hover,
  .c-paging__next:hover {
    opacity: 1;
  }
  .c-paging__prev {
    margin: 0 0 2.5vw -21.88vw;
  }
  .c-paging__next {
    margin: 0 -21.88vw 2.5vw 0;
  }
  /* -----------------------------------------------
 * [SP]component -> sns share button
 * ----------------------------------------------- */
  .c-sns-share {
    justify-content: center;
    margin-bottom: 15.63vw;
    order: 2;
  }
  .c-sns-share__title {
    display: none;
  }
  .c-sns-share__item {
    margin-left: 0;
  }
  .c-sns-share__item + .c-sns-share__item {
    margin-left: 17.19vw;
  }
  .c-sns-share__item img {
    width: auto;
    height: 7.5vw;
  }
  .c-sns-share__item a {
    text-align: center;
    display: block;
    width: 30px;
    transition: none;
  }
  .c-sns-share__item a:hover {
    opacity: 1;
  }
  /* -----------------------------------------------
 * [SP] common -> header
 * ----------------------------------------------- */
  .header {
    max-width: 100%;
    margin: 0 auto;
  }
  .header__inner {
    padding: 12.5vw 0 6.25vw;
  }
  .header__inner.is-home {
    padding: 7.81vw 0 6.25vw;
  }
  .header__logo {
    background: url("/img/common/hd_logo_under_sp.svg") no-repeat center;
    background-size: contain;
    position: relative;
    top: auto;
    left: 0;
    right: 0;
    width: 53.13vw;
    height: 3.75vw;
    margin: auto;
  }
  .header__logo img {
    display: none;
  }
  .header__logo.is-home {
    background: url("/img/common/hd_logo_sp.svg") no-repeat center;
    background-size: contain;
    left: 6.25vw;
    right: auto;
    width: 65.16vw;
    height: 18.59vw;
    margin: 0;
  }
  /* -----------------------------------------------
 * [SP] common -> global menu
 * ----------------------------------------------- */
  .global {
    background: #fff;
    text-align: right;
    width: 0;
    height: 100%;
    position: fixed;
    left: 100vw;
    top: 0;
    z-index: 10000;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    padding-top: 29.69vw;
    padding-bottom: 12.5vw;
    transform: translate3d(0, 0, 0);
    transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .global.is-active {
    width: 100%;
    left: 0;
  }
  .global:after {
    content: '';
    background: url("/img/common/hd_menu_title_black.svg") no-repeat center;
    background-size: contain;
    width: 18.13vw;
    height: 16.56vw;
    position: absolute;
    top: 29.69vw;
    right: calc(100% - 25.94vw);
    opacity: 0;
    transition: opacity .1s;
    transition-delay: 0s;
  }
  .global.is-active:after {
    opacity: 1;
    transition: opacity .3s;
    transition-delay: .4s;
  }
  .global.is-active .global__list {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .global.is-active .header-share {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: .5s;
  }
  .global__close {
    background: url("/img/common/hd_btn_menu_close.svg") no-repeat center;
    background-size: contain;
    width: 12.34vw;
    height: 8.75vw;
    position: absolute;
    top: 9.38vw;
    right: 7.03vw;
    z-index: 1000;
  }
  .global__list {
    font-size: 4.06vw;
    width: auto;
    text-align: right;
    display: inline-block;
    padding: 0 7.81vw;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    opacity: 0;
    transform: translate3d(40px, 0, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s;
  }
  .global__item {
    text-align: left;
    display: flex;
    width: 100%;
    margin-right: 0;
    margin-bottom: 6.25vw;
  }
  .global__item:last-child {
    margin-right: 0;
  }
  .global__item a:before {
    background: url("/img/common/icon_menu_horizontal.svg") no-repeat center;
    background-size: contain;
    width: 14px;
    height: 12px;
    left: -19px;
    right: auto;
    bottom: 0;
    top: 0;
    transition: none;
  }
  .global-btn {
    background: url("/img/common/hd_btn_menu.svg") no-repeat center;
    background-size: contain;
    width: 12.19vw;
    height: 11.56vw;
    position: fixed;
    top: 7.81vw;
    right: 6.25vw;
    z-index: 1000;
  }
  /* -----------------------------------------------
 * [SP] common -> 左側スクロール後メニュー
 * ----------------------------------------------- */
  .global-fixed-btn,
  .global-fixed {
    display: none;
  }
  /* -----------------------------------------------
 * [SP] common -> 右上shareメニュー
 * ----------------------------------------------- */
  .sns-menu {
    position: static;
  }
  .sns-menu__list {
    position: static;
  }
  .sns-menu__item {
    display: none;
  }
  .sns-menu__item--scroll {
    width: 6.88vw;
    height: 12.5vw;
    display: none;
    position: absolute;
    top: 112.5vw;
    right: 7.81vw;
    z-index: 100;
    transform: translate3d(0, 0, 0);
    transition: opacity .2s, transform .2s;
  }
  .sns-menu__item--scroll.is-active {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  #page-home .sns-menu__item--scroll {
    display: block;
  }
  /* -----------------------------------------------
 * [SP]common -> SNSメニュー
 * ----------------------------------------------- */
  .header-share {
    margin-top: 9.38vw;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity .3s;
  }
  .header-share__list {
    display: flex;
    justify-content: flex-end;
    width: 68.75vw;
    margin: 0 7.81vw 0 auto;
  }
  .header-share__item + .header-share__item {
    margin-left: 15.63vw;
  }
  .header-share__item a {
    text-align: center;
    display: block;
    width: 30px;
  }
  .sns-menu-accounts,
  .sns-menu-shares {
    display: none !important;
  }
  /* -----------------------------------------------
 * [SP] common -> footer
 * ----------------------------------------------- */
  .footer {
    padding: 17.19vw 7.81vw 10.94vw;
  }
  .footer__inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  /* ページトップ ---------------------------------------------- */
  .footer__pagetop {
    width: 10.31vw;
    height: 11.72vw;
    top: -5.47vw;
  }
  .footer__pagetop:after {
    width: 10.31vw;
    height: 11.72vw;
    transition: none;
  }
  .footer__pagetop:hover:after {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  /* フッターロゴ ---------------------------------------------- */
  .footer__logo-right {
    text-align: center;
    position: relative;
    right: auto;
    bottom: auto;
    margin: 0 auto 9.38vw;
    width: 100%;
  }
  .footer__logo-right a {
    display: inline-block;
  }
  .footer__logo-right img {
    width: 57.81vw;
    height: auto;
    transition: none;
  }
  .footer__logo-right:hover img {
    transform: translate3d(0, 0, 0);
  }

  /* フッターアプリ導線 ---------------------------------------- */
  .footer__app-dl {
    padding-bottom: 14.53125vw;
    margin-bottom: 14.53125vw;
    border-bottom: 1px solid #000;
  }
  .footer__app-dl ul {
    justify-content: space-between;
  }
  .footer__app-dl ul li {
    width: 48%;
    margin: 0 auto;
  }
  .footer__app-dl ul li:last-child {
    display: none;
  }

  /* Youtubeアカウント紹介 ---------------------------------------------- */
  .footer-youtube {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 17.19vw;
    order: 3;
  }
  .footer-youtube__title {
    display: none;
  }
  .footer-youtube__wrap {
    display: block;
  }
  .footer-youtube__center {
    justify-content: center;
    display: flex;
    width: auto;
    padding: 0;
    /* 左右の垂直バー */
  }
  .footer-youtube__center:before, .footer-youtube__center:after {
    background: #000;
    content: "";
    width: 1px;
    height: 22px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .footer-youtube__center:before {
    left: 0;
  }
  .footer-youtube__center:after {
    right: 0;
  }
  .footer-youtube__item + .footer-youtube__item {
    margin-top: 0;
    margin-left: 4.69vw;
  }
  .footer-youtube__item a {
    transition: none;
  }
  .footer-youtube__item a:before {
    margin-right: 2.34vw;
  }
  .footer-youtube__item a:hover {
    opacity: 1;
  }
  .footer-youtube__item--main {
    display: block;
    padding: 0 2vw 0 21.88vw;
  }
  .footer-youtube__item--main a:before {
    content: none;
  }
  .footer-youtube__item--main:before {
    content: "";
    background: url("/img/common/youtube_icon_contents.png") no-repeat center top;
    background-size: contain;
    width: 20vw;
    height: 20vw;
    position: absolute;
    left: 0.8vw;
    top: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
  }
  .footer-youtube__text--main {
    position: relative;
    top: 0;
    width: 100%;
    display: flex;
    flex-flow: column;
  }
  .footer-youtube__type {
    font-size: 3.13vw;
    letter-spacing: .1em;
    margin-bottom: 10px;
    display: inline-block;
    text-align: center;
  }
  .footer-youtube__account {
    font-size: 3.28vw;
  }

  /* Twitterアカウント紹介 ---------------------------------------------- */
  .footer-twi {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 17.19vw;
    order: 3;
  }
  .footer-twi__title {
    display: none;
  }
  .footer-twi__wrap {
    display: block;
  }
  .footer-twi__left {
    width: auto;
    padding: 0;
    /* 左右の垂直バー */
  }
  .footer-twi__left:before, .footer-twi__left:after {
    background: #000;
    content: "";
    width: 1px;
    height: 22px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .footer-twi__left:before {
    left: 0;
  }
  .footer-twi__left:after {
    right: 0;
  }
  .footer-twi__right {
    width: auto;
    display: flex;
    justify-content: center;
    padding: 0 4.69vw;
    /* 左右の垂直バー */
  }
  .footer-twi__right:before {
    background: #000;
    content: "";
    width: 1px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .footer-twi__right:before, .footer-twi__right:after {
    height: 5.31vw;
  }
  .footer-twi__item + .footer-twi__item {
    margin-top: 0;
    margin-left: 4.69vw;
  }
  .footer-twi__item a {
    transition: none;
  }
  .footer-twi__item a:before {
    margin-right: 2.34vw;
  }
  .footer-twi__item a:hover {
    opacity: 1;
  }
  .footer-twi__item--main {
    display: block;
    padding: 0 4.69vw 0 21.88vw;
    margin-bottom: 6.25vw;
  }
  .footer-twi__item--main a:before {
    content: none;
  }
  .footer-twi__item--main:before {
    content: "";
    background: url("/img/common/twitter_icon_contents.png") no-repeat center top;
    background-size: contain;
    width: 13.44vw;
    height: 13.44vw;
    position: absolute;
    left: 4.69vw;
    top: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
  }
  .footer-twi__text--main {
    position: relative;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .footer-twi__item--basic a:before,
  .footer-twi__item--music a:before {
    width: 8.75vw;
    height: 8.75vw;
  }
  .footer-twi__item-title {
    font-size: 3.28vw;
    line-height: 1;
    letter-spacing: .3em;
    margin: 0 0 3.13vw;
  }
  .footer-twi__type {
    font-size: 3.13vw;
    letter-spacing: .1em;
    margin-bottom: 3px;
    display: inline-block;
  }
  .footer-twi__type--basic,
  .footer-twi__type--music {
    font-size: 2.81vw;
    margin-bottom: 3px;
    display: block;
  }
  .footer-twi__account {
    font-size: 3.28vw;
  }
  .footer-twi__account--basic,
  .footer-twi__account--music {
    font-size: 2.5vw;
  }
  /* フッター SHARE ---------------------------------------------- */
  .footer-share {
    justify-content: center;
    margin-bottom: 15.63vw;
    order: 2;
  }
  .footer-share__title {
    display: none;
  }
  .footer-share__item {
    margin-left: 0;
  }
  .footer-share__item + .footer-share__item {
    margin-left: 17.19vw;
  }
  .footer-share__item img {
    width: auto;
    height: 7.5vw;
  }
  .footer-share__item a {
    text-align: center;
    display: block;
    width: 30px;
    transition: none;
  }
  .footer-share__item a:hover {
    opacity: 1;
  }
  /* フッターナビゲーション ---------------------------------------------- */
  .footer-menu {
    margin-bottom: 4.69vw;
    order: 5;
  }
  .footer-menu__list {
    justify-content: space-between;
  }
  .footer-menu__item {
    font-size: 2.66vw;
  }
  .footer-menu__item a {
    transition: none;
  }
  .footer-menu__item a:hover {
    opacity: 1;
  }
  .footer-menu__item + .footer-menu__item {
    margin-left: 0;
  }
  /* ロゴ、プライバシー、コピーライトなど ---------------------------------------------- */
  .footer__logo-left {
    text-align: center;
    margin-bottom: 4.69vw;
    order: 4;
  }
  .footer__logo-left img {
    width: 100%;
    height: auto;
  }
  .footer__logo-happy {
    width: 27.81vw;
  }
  .footer__logo-cacalia {
    width: 24.38vw;
  }
  .footer__privacy {
    font-size: 2.5vw;
    line-height: 4.06vw;
    margin: 0 0 10px;
    order: 6;
  }
  .footer__copyright {
    font-size: 2.81vw;
    line-height: 1;
    text-align: left;
    margin-left: 0;
    order: 7;
  }
  /* -----------------------------------------------
 * [SP]component -> page title
 * ----------------------------------------------- */
  .c-page-title-top {
    font-size: 2.66vw;
    margin-bottom: 4px;
  }
}