@charset "UTF-8";
/*-------------------------------------------------------------------
リセット
/*-------------------------------------------------------------------*/
*, *:before, *:after {
  box-sizing: border-box;
}

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 {
  background: transparent;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  letter-spacing: 0.03em;
}

body {
  font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
  /* safari hover対策 */
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1.6;
  width: 100%;
}

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

ul, ol {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

a {
  color: inherit;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: baseline;
}

ins {
  background-color: #ffff99;
  color: #000000;
  text-decoration: none;
}

mark {
  background-color: #ffff99;
  color: #000000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

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

li {
  list-style: none;
}

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

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

input, select {
  vertical-align: middle;
}

img {
  line-height: 1;
  vertical-align: bottom;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  outline: none;
  padding: 0;
}

*, *:before, *:after {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.sp {
  display: none !important;
}

.sp_inline {
  display: none;
}

.pc_inline {
  display: inline;
}

@media screen and (min-width: 768px) {
  .imgalpha {
    cursor: pointer;
    transition: opacity 0.6s;
  }
  .imgalpha:hover {
    opacity: 0.6 !important;
  }
}
/*-------------------------------------------------------------------
common
/*-------------------------------------------------------------------*/
.sp_only {
  display: none;
}

@media screen and (max-width: 768px) {
  body {
    min-width: 100%;
  }
  img {
    height: auto;
    width: 100%;
  }
  .sp,
  .sp_only {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  .pc_only {
    display: none !important;
  }
  .sp_inline {
    display: inline !important;
  }
  .pc_inline {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .wrap {
    max-width: 100vw;
    overflow: hidden;
  }
}
/*-------------------------------------------------------------------
ボタン
/*-------------------------------------------------------------------*/
svg {
  pointer-events: none;
}

img {
  width: 100%;
}

.inner {
  width: 100%;
  max-width: 66.6666666667vw;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .inner {
    width: 100%;
    max-width: 89.7435897436vw;
  }
}

.ribbon {
  pointer-events: none;
  width: 100vw;
}

.secTtl {
  display: flex;
  flex-direction: column;
  gap: 0.2083333333vw;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 3.6458333333vw;
  background-image: url(../img/secTtl_line01.webp);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 1.4583333333vw;
  padding-left: 2.2916666667vw;
  padding-top: 0.3125vw;
  margin-left: 4.1666666667vw;
}
.secTtl.red_line {
  background-image: url(../img/secTtl_line02.webp);
}
@media screen and (max-width: 768px) {
  .secTtl {
    background-size: 4.6153846154vw 100%;
    padding-left: 7.1794871795vw;
    padding-top: 1.5384615385vw;
    margin-left: 0;
  }
}
.secTtl .secTtl_en {
  color: #383838;
  font-family: Montserrat;
  font-size: 1.3020833333vw;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  letter-spacing: 0.1302083333vw;
}
@media screen and (max-width: 768px) {
  .secTtl .secTtl_en {
    color: #383838;
    font-family: Montserrat;
    font-size: 4.1025641026vw;
    font-weight: 200;
    letter-spacing: 0.4102564103vw;
  }
}
.secTtl .secTtl_ja {
  color: #77769A;
  font-family: "Noto Sans JP";
  font-size: 2.6041666667vw;
  font-style: normal;
  font-weight: 100;
  line-height: normal;
  letter-spacing: 0.2604166667vw;
}
@media screen and (max-width: 768px) {
  .secTtl .secTtl_ja {
    color: #77769A;
    font-size: 8.2051282051vw;
    letter-spacing: 0.8205128205vw;
  }
}
.secTtl .secTtl_ja::first-letter {
  color: #77769A;
  font-size: 3.6458333333vw;
  font-style: normal;
  font-weight: 100;
  line-height: normal;
  letter-spacing: 0.3645833333vw;
}
@media screen and (max-width: 768px) {
  .secTtl .secTtl_ja::first-letter {
    color: #77769A;
    font-size: 11.5384615385vw;
    letter-spacing: 0.8205128205vw;
  }
}

.ribbon_wrap {
  position: relative;
}
.ribbon_wrap .ribbon_bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110vw;
  z-index: -1;
}
.ribbon_wrap .ribbon_bg svg {
  width: 100%;
}
.reveal-x {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 0%→100%にアニメートするカスタムプロパティ */
  --mw:0%;
  -webkit-mask-size: var(--mw) 100%;
  mask-size: var(--mw) 100%;
  -webkit-mask-position: left top;
  mask-position: left top;
  will-change: -webkit-mask-size, mask-size;
  overflow: hidden;
  border-radius: 16px;
}

/* 右→左 版 */
.reveal-x-rtl {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 0%→100% に伸ばす（右端から広がる） */
  --mw: 0%;
  -webkit-mask-size: var(--mw) 100%;
  mask-size: var(--mw) 100%;
  -webkit-mask-position: right top;
  mask-position: right top;
  will-change: -webkit-mask-size, mask-size;
}

.will-change,
.mv_img,
.reveal_img {
  will-change: transform, opacity, clip-path, -webkit-mask-size, mask-size;
}

.modaal-close {
  color: #b93d0c;
}

/* 初期は非表示（FOUC防止） */
.branding_page_inner {
  opacity: 0;
  visibility: hidden;
  overflow-x: hidden;
  transition: opacity 0.6s ease;
  transition-delay: 0.6s;
}

/* すべて読み込まれたら表示 */
.is-loaded .branding_page_inner {
  opacity: 1;
  visibility: visible;
}

/* ユーザーが簡易表示を希望している場合はアニメ無効化 */
@media (prefers-reduced-motion: reduce) {
  .branding_page {
    transition: none;
  }
}
.ribbon svg {
  width: 100%;
}

.branding_page {
  background-image: url(../img/page_bg01.webp);
}

/*-------------------------------------------------------------------
LP
/*-------------------------------------------------------------------*/
/* デモ用: リボンの塗りと輪郭 */
#ribbonFill {
  fill: #ff4d6d;
}

#ribbonStroke {
  stroke: #ff8da3;
  stroke-width: 10;
  fill: none;
  stroke-linecap: round;
}

/* マスクに使う描画ストローク（太めにして塗りが“描かれて”見える） */
#drawPath {
  stroke: #fff;
  stroke-width: 38;
  stroke-linecap: round;
  fill: none;
}

/* “端っこ”のガイド（動く丸） */
.end {
  fill: #ffd6de;
}

.knot {
  fill: #ffb3c1;
}

/* 背景SVG（全ページの背面に固定） */
.bg {
  position: absolute;
  top: 26.0416666667vw;
  width: 100%;
  left: 0;
  /* 画面全体 */
  z-index: 0;
  pointer-events: none;
  z-index: 100;
}

/* デモ用：十分なスクロール量 */
/* --- デバッグHUD --- */
.hud {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 12px;
  line-height: 1.5;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.hud label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meter {
  width: 260px;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
}

.bar.p {
  background: #00D5FF;
}

/* p: 水色 */
.bar.d {
  background: #FF6A3D;
}

/* d: オレンジ */
.ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tick {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: #fff;
  opacity: 0.7;
}

.legend {
  font-size: 11px;
  opacity: 0.85;
  display: flex;
  gap: 10px;
}

.dot {
  fill: #FF6A3D;
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.keydot {
  fill: #fff;
  stroke: #333;
  stroke-width: 1.5;
  opacity: 0.9;
}

.keyline {
  stroke: rgba(255, 255, 255, 0.5333333333);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* CSS変数をトランジション可能に（クラス付与で“ふわっ”） */
@property --edge {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -60%;
}
:root {
  --angle: 315deg;
  /* 斜め方向。逆向きなら 315deg などに */
  --spread: 34%;
  /* ぼかし幅（大きいほど淡い） */
}

body {
  margin: 0;
  background: #0e0f12;
  color: #e8edf4;
  font: 16px/1.7 system-ui, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.wrap {
  max-width: 1000px;
  margin: auto;
  padding: 12vh 20px;
}

.spacer {
  height: 40vh;
}

/* ===== 対象 ===== */
/* 斜めグラデの“くっきり版” */
/* 逆版：右下→左上へ“表示される” */
/* maskを逆にした版（右下→左上へ表示） */
.reveal,
.reveal_img img {
  z-index: 0;
  -webkit-mask-image: url(../img/mask.webp);
  mask-image: url(../img/mask.webp);
  mask-mode: alpha;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: auto 200%;
  mask-size: auto 200%;
  opacity: 0;
  will-change: all;
}

.reveal_cont {
  opacity: 0;
  transition: all 1s ease;
  will-change: all;
}
.reveal_cont.on {
  opacity: 1;
}

.reveal.on,
.reveal_img.on img {
  animation: 2.6s mask-animation cubic-bezier(0, 0.4, 0.48, 1) 0s forwards;
}
@keyframes mask-animation {
  0% {
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  to {
    -webkit-mask-position: center 0%;
    mask-position: center 0%;
    -webkit-mask-size: auto 500%;
    mask-size: auto 500%;
    opacity: 1;
  }
}
/*-------------------------------------------------------------------
header
/*-------------------------------------------------------------------*/
body {
  position: relative;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
header .header_logo {
  width: 10.3125vw;
  margin: 2.34375vw auto 0 2.2916666667vw;
  display: block;
}
@media screen and (max-width: 768px) {
  header .header_logo {
    width: 33.5897435897vw;
    margin: 6.4102564103vw auto 0 5.1282051282vw;
  }
}
header .header_logo img {
  width: 100%;
  height: 100%;
}

/*-------------------------------------------------------------------
mv
/*-------------------------------------------------------------------*/
.mv {
  position: relative;
  margin-bottom: 7.0833333333vw;
}
@media screen and (max-width: 768px) {
  .mv {
    height: 289.2307692308vw;
    margin-bottom: 37.1794871795vw;
  }
}
.mv .ribbon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  margin-top: -0.5208333333vw;
  width: 100%;
  z-index: 100;
}
@media screen and (max-width: 768px) {
  .mv .ribbon {
    top: 50%;
    margin-top: -76.9230769231vw;
  }
}
.mv .mv_ttl {
  width: 28.9583333333vw;
  top: 20.8333333333vw;
  left: 31.25vw;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .mv .mv_ttl {
    width: 85.1282051282vw;
    top: 66.6666666667vw;
    right: 1.2820512821vw;
    left: auto;
  }
}
.mv .mv_top {
  display: flex;
  justify-content: space-between;
  gap: 1.4583333333vw;
  margin-left: 1.4583333333vw;
  margin-right: 1.4583333333vw;
  padding-top: 2.4479166667vw;
}
.mv .mv_top .mv_img01 {
  width: 29.1666666667vw;
  margin-top: 8.8541666667vw;
}
@media screen and (max-width: 768px) {
  .mv .mv_top .mv_img01 {
    width: 66.6666666667vw;
    position: absolute;
    right: 0vw;
    bottom: 0vw;
  }
}
.mv .mv_top .mv_img02 {
  width: 24.0104166667vw;
}
@media screen and (max-width: 768px) {
  .mv .mv_top .mv_img02 {
    width: 61.0256410256vw;
    position: absolute;
    right: 0vw;
    top: 173.5897435897vw;
  }
}
.mv .mv_top .mv_img03 {
  width: 16.40625vw;
  margin-top: 1.5625vw;
}
@media screen and (max-width: 768px) {
  .mv .mv_top .mv_img03 {
    width: 36.4102564103vw;
    position: absolute;
    left: 0vw;
    top: 167.1794871795vw;
  }
}
.mv .mv_top .mv_img04 {
  width: 23.0208333333vw;
  margin-top: 2.8645833333vw;
}
@media screen and (max-width: 768px) {
  .mv .mv_top .mv_img04 {
    width: 54.6153846154vw;
    position: absolute;
    left: 0vw;
    top: 207.6923076923vw;
  }
}
.mv .mv_top .mv_img05 {
  width: 18.0208333333vw;
  margin-top: 1.1979166667vw;
  margin-right: 0;
  margin-left: auto;
  margin-bottom: 5.2083333333vw;
}
@media screen and (max-width: 768px) {
  .mv .mv_top .mv_img05 {
    width: 42.8205128205vw;
    position: absolute;
    right: 0vw;
    top: 220.5128205128vw;
  }
}
.mv .mv_bottom {
  display: flex;
  justify-content: space-between;
  gap: 1.4583333333vw;
  margin-left: 1.4583333333vw;
  margin-right: 1.4583333333vw;
  margin-top: -0.3645833333vw;
}
.mv .mv_bottom .mv_img06 {
  width: 18.0208333333vw;
  margin-bottom: 1.5625vw;
  margin-right: 0;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .mv .mv_bottom .mv_img06 {
    width: 30.7692307692vw;
    position: absolute;
    left: 0vw;
    margin-bottom: 0;
    bottom: 6.4102564103vw;
  }
}
.mv .mv_bottom .mv_img07 {
  width: 23.59375vw;
}
@media screen and (max-width: 768px) {
  .mv .mv_bottom .mv_img07 {
    width: 30.7692307692vw;
    position: absolute;
    left: 0vw;
    margin-bottom: 0;
    bottom: 25.641025641vw;
  }
}
.mv .mv_bottom .mv_img08 {
  width: 21.9791666667vw;
  margin-top: 7.2916666667vw;
}
@media screen and (max-width: 768px) {
  .mv .mv_bottom .mv_img08 {
    display: none;
  }
}
.mv .mv_bottom .mv_img09 {
  width: 48.4895833333vw;
  margin-top: 5.7291666667vw;
}
@media screen and (max-width: 768px) {
  .mv .mv_bottom .mv_img09 {
    width: 89.7435897436vw;
    position: absolute;
    left: 0vw;
    top: 110.2564102564vw;
  }
}

/*-------------------------------------------------------------------
intro
/*-------------------------------------------------------------------*/
.intro {
  margin-bottom: 7.0833333333vw;
}
@media screen and (max-width: 768px) {
  .intro {
    margin-bottom: 26.9230769231vw;
  }
}
.intro .intro_ttl {
  color: #383838;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 1.6145833333vw;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.15625vw;
  margin-bottom: 4.6875vw;
}
@media screen and (max-width: 768px) {
  .intro .intro_ttl {
    font-size: 7.9487179487vw;
    margin-bottom: 14.1025641026vw;
    letter-spacing: 0.7948717949vw;
  }
}
.intro .intro_txt {
  color: #383838;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 1.3020833333vw;
  font-style: normal;
  font-weight: 300;
  line-height: 280%;
  /* 70px */
  letter-spacing: 0.1302083333vw;
  position: relative;
}
.intro .intro_txt .small {
  font-size: 0.9895833333vw;
}
@media screen and (max-width: 768px) {
  .intro .intro_txt .small {
    font-size: 3.0769230769vw;
  }
}
@media screen and (max-width: 768px) {
  .intro .intro_txt {
    font-size: 4.1025641026vw;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    line-height: 220%;
    letter-spacing: 0.3076923077vw;
  }
}
.intro .intro_img01 {
  width: 22.9166666667vw;
  position: absolute;
  right: 0vw;
  top: 1.0416666667vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.intro .intro_img01.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  .intro .intro_img01 {
    display: none;
  }
}
.intro .intro_img02 {
  width: 19.2708333333vw;
  position: absolute;
  left: 0vw;
  bottom: 1.5625vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.intro .intro_img02.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  .intro .intro_img02 {
    display: none;
  }
}
.intro .ribbon_bg01 {
  top: 40%;
}
@media screen and (max-width: 768px) {
  .intro .ribbon_bg01 {
    top: 81%;
  }
}

/*-------------------------------------------------------------------
gallery
/*-------------------------------------------------------------------*/
.gallery {
  margin-bottom: 7.65625vw;
}
@media screen and (max-width: 768px) {
  .gallery {
    margin-bottom: 10.2564102564vw;
  }
}
.gallery .ribbon_bg02 {
  top: 55%;
}
@media screen and (max-width: 768px) {
  .gallery .ribbon_bg02 {
    display: none;
  }
}
.gallery .ribbon_bg03 {
  top: 80%;
}
@media screen and (max-width: 768px) {
  .gallery .ribbon_bg03 {
    display: none;
  }
}
.gallery .gallery_boxTtl {
  color: #383838;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.09375vw;
  margin-bottom: 1.0416666667vw;
}
@media screen and (max-width: 768px) {
  .gallery .gallery_boxTtl {
    font-size: 4.1025641026vw;
    font-weight: 300;
    letter-spacing: 0.4102564103vw;
    margin-bottom: 3.0769230769vw;
  }
}
.gallery .gallery_boxWrap {
  width: 44.7916666667vw;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .gallery .gallery_boxWrap {
    width: 100%;
  }
}
.gallery .gallery_boxWrap_bottom {
  display: flex;
  justify-content: space-between;
  gap: 3.125vw;
  margin-top: 3.90625vw;
}
@media screen and (max-width: 768px) {
  .gallery .gallery_boxWrap_bottom {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .gallery .gallery_boxWrap_bottom .gallery_box {
    margin-top: 7.6923076923vw;
  }
}
.gallery .gallery_boxWrap_bottom .gallery_box:first-child {
  margin-top: 4.1666666667vw;
}
@media screen and (max-width: 768px) {
  .gallery .gallery_boxWrap_bottom .gallery_box:first-child {
    margin-top: 7.6923076923vw;
  }
}

.gallery_boxWrap_top .gallery_box {
  width: 44.7916666667vw;
}
@media screen and (max-width: 768px) {
  .gallery_boxWrap_top .gallery_box {
    margin-top: 10.2564102564vw;
    width: 100%;
  }
}

.gallery_box {
  width: 20.8333333333vw;
}
@media screen and (max-width: 768px) {
  .gallery_box {
    width: 100%;
  }
}
.gallery_box .gallery_boxImg {
  overflow: hidden;
  position: relative;
  overflow: hidden;
  display: block;
}
.gallery_box .gallery_boxImg img {
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.gallery_box > img {
  transform: scale(1.1);
  transition: transform 6s cubic-bezier(0.2, 0.6, 0.2, 1);
  transform-origin: center;
}
.gallery_box .gallery_boxImg:hover {
  background-color: #fff;
}
.gallery_box .gallery_boxImg:hover > img {
  transform: scale(1.1) !important;
  opacity: 0.8;
  border: #E00003 solid 1px;
}
.gallery_box .gallery_boxImgIcon {
  position: absolute;
  bottom: 1.5625vw;
  right: 1.5625vw;
  width: 3.3854166667vw;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .gallery_box .gallery_boxImgIcon {
    width: 12.8205128205vw;
    bottom: 2.5641025641vw;
    right: 2.5641025641vw;
  }
}
.gallery_box.on .gallery_boxImg > img {
  transform: scale(1);
}

/*-------------------------------------------------------------------
song
/*-------------------------------------------------------------------*/
.song {
  position: relative;
  margin-bottom: 11.9791666667vw;
  display: block;
}
@media screen and (max-width: 768px) {
  .song {
    margin-bottom: 10.2564102564vw;
  }
}
.song .secTtl {
  margin-left: -7.2916666667vw;
  position: relative;
}
@media screen and (max-width: 768px) {
  .song .secTtl {
    margin-bottom: 20.5128205128vw;
    margin-left: 0;
  }
}
.song .song_inner {
  width: 73.4375vw;
  margin: 0 auto;
  padding: 4.6875vw 12.5vw 1.0416666667vw;
  background: rgba(255, 255, 255, 0.6);
  position: relative;
}
@media screen and (max-width: 768px) {
  .song .song_inner {
    width: 100vw;
    padding: 7.6923076923vw 5.1282051282vw 0;
    background: none;
  }
}
.song .songwriting {
  color: #383838;
  font-family: "Noto Sans JP";
  font-size: 1.0416666667vw;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.1041666667vw;
  position: absolute;
  bottom: 0.78125vw;
  left: 17.7083333333vw;
}
@media screen and (max-width: 768px) {
  .song .songwriting {
    font-size: 4.1025641026vw;
    letter-spacing: 0.5641025641vw;
    bottom: -11.5384615385vw;
    left: 6.4102564103vw;
  }
}
.song .songwriting .songwriting_name {
  font-size: 1.3541666667vw;
  letter-spacing: 0.1354166667vw;
}
@media screen and (max-width: 768px) {
  .song .songwriting .songwriting_name {
    font-size: 5.641025641vw;
    letter-spacing: 0.4102564103vw;
  }
}
.song .song_info {
  margin-bottom: 4.1666666667vw;
}
@media screen and (max-width: 768px) {
  .song .song_info {
    margin-bottom: 14.1025641026vw;
  }
}
.song .song_infoLyric {
  color: #818181;
  font-family: "Noto Sans JP";
  font-size: 1.5104166667vw;
  font-style: normal;
  font-weight: 300;
  line-height: 270%;
  /* 78.3px */
  letter-spacing: 0.1510416667vw;
  width: 46.1979166667vw;
  height: 25.2604166667vw;
  position: relative;
  background-size: cover;
  background-image: url(../img/song_infoLyricBg01_pc.svg);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .song .song_infoLyric {
    font-size: 4.6153846154vw;
    font-weight: 300;
    padding-top: 7.6923076923vw;
    line-height: 270%;
    letter-spacing: 0.4615384615vw;
    width: 89.6833333333vw;
    height: 124.8115384615vw;
    background-size: cover;
    background-image: url(../img/song_infoLyricBg01_sp.svg);
  }
}
.song .song_author {
  width: 33.3333333333vw;
}
@media screen and (max-width: 768px) {
  .song .song_author {
    width: 100%;
  }
}
.song .song_author .song_authorName {
  color: #383838;
  font-family: "Noto Sans JP";
  font-size: 1.71875vw;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.171875vw;
  margin-bottom: 2.0833333333vw;
}
@media screen and (max-width: 768px) {
  .song .song_author .song_authorName {
    font-size: 7.6923076923vw;
    letter-spacing: 0.7692307692vw;
    text-align: center;
    margin-bottom: 10.2564102564vw;
  }
}
.song .song_author .song_authorTxt {
  color: #383838;
  font-family: "Noto Sans JP";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 300;
  line-height: 200%;
  /* 36px */
  letter-spacing: 0.09375vw;
}
@media screen and (max-width: 768px) {
  .song .song_author .song_authorTxt {
    font-size: 4.1025641026vw;
    letter-spacing: 0.4102564103vw;
  }
}
.song .song_authorImg01 {
  width: 15.9375vw;
  margin-right: -6.7708333333vw;
}
@media screen and (max-width: 768px) {
  .song .song_authorImg01 {
    width: 78.4615384615vw;
    margin: 15.3846153846vw auto 0;
  }
}
.song .song_authorWrap {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .song .song_authorWrap {
    display: block;
  }
}
.song .song_img01 {
  width: 15.625vw;
  position: absolute;
  left: -5.9895833333vw;
  top: 3.4895833333vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.song .song_img01.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  .song .song_img01 {
    display: none;
  }
}
.song .song_img02 {
  width: 16.40625vw;
  position: absolute;
  right: -10.9375vw;
  top: 0vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.song .song_img02.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  .song .song_img02 {
    display: none;
  }
}
.song .song_img03 {
  width: 15.625vw;
  position: absolute;
  left: -12.7604166667vw;
  bottom: -3.125vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.song .song_img03.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  .song .song_img03 {
    display: none;
  }
}
.song .song_img04 {
  width: 15.625vw;
  position: absolute;
  right: -11.71875vw;
  bottom: -14.21875vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.song .song_img04.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  .song .song_img04 {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .song .ribbon_bg04 {
    top: 39%;
  }
}
@media screen and (max-width: 768px) {
  .song .ribbon_bg05 {
    top: 30%;
  }
}

/*-------------------------------------------------------------------
narrator
/*-------------------------------------------------------------------*/
.narrator {
  position: relative;
  margin-bottom: 14.3229166667vw;
  padding-left: 6.25vw;
}
@media screen and (max-width: 768px) {
  .narrator {
    margin-bottom: 25.641025641vw;
    padding-left: 0vw;
  }
}
.narrator .secTtl {
  margin-left: 1.0416666667vw;
  margin-bottom: 3.125vw;
}
@media screen and (max-width: 768px) {
  .narrator .secTtl {
    margin-bottom: 10.2564102564vw;
    margin-left: 0vw;
  }
}
.narrator .narrator_box {
  display: flex;
  justify-content: center;
  padding-right: 2.0833333333vw;
  gap: 4.6875vw;
}
@media screen and (max-width: 768px) {
  .narrator .narrator_box {
    display: block;
    padding-right: 0vw;
  }
}
.narrator .narrator_txt {
  width: 33.6458333333vw;
  color: #383838;
  font-family: "Noto Sans JP";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 300;
  line-height: 190%;
  /* 34.2px */
  letter-spacing: 0.09375vw;
}
@media screen and (max-width: 768px) {
  .narrator .narrator_txt {
    width: 89.7435897436vw;
    font-size: 4.1025641026vw;
    line-height: 190%;
    letter-spacing: 0.4102564103vw;
  }
}
.narrator .narrator_img {
  width: 15.9375vw;
}
@media screen and (max-width: 768px) {
  .narrator .narrator_img {
    width: 78.4615384615vw;
    margin: 12.8205128205vw auto 0;
  }
}
.narrator .ribbon_bg06 {
  top: 5%;
}
@media screen and (max-width: 768px) {
  .narrator .ribbon_bg06 {
    top: 29%;
  }
}
.narrator .narrator_img01 {
  width: 18.2291666667vw;
  position: absolute;
  left: 0.5208333333vw;
  bottom: 22.9166666667vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.narrator .narrator_img01 img {
  background-color: #fff;
}
.narrator .narrator_img01.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  .narrator .narrator_img01 {
    display: none;
  }
}
.narrator .ribbon_bg06 {
  top: 35%;
}
@media screen and (max-width: 768px) {
  .narrator .ribbon_bg06 {
    top: 26%;
  }
}
.narrator .ribbon_bg09 {
  top: 80%;
}
/*-------------------------------------------------------------------
cover
/*-------------------------------------------------------------------*/
.cover {
  margin-bottom: 7.8125vw;
  display: block;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cover {
    margin-bottom: 33.3333333333vw;
  }
}
.cover .secTtl {
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .cover .secTtl {
    margin-bottom: 10.2564102564vw;
  }
}
.cover .inner {
  width: 54.0104166667vw;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .cover .inner {
    width: 89.7435897436vw;
  }
}
.cover .cover_contImg {
  width: 15.9375vw;
}
@media screen and (max-width: 768px) {
  .cover .cover_contImg {
    width: 78.4615384615vw;
    margin: 15.3846153846vw auto 15.3846153846vw;
  }
}
.cover .cover_top {
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cover .cover_top {
    display: block;
  }
}
.cover .cover_txt {
  width: 33.3333333333vw;
  color: #383838;
  font-family: "Noto Sans JP";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 300;
  line-height: 200%;
  /* 36px */
  letter-spacing: 0.0729166667vw;
}
@media screen and (max-width: 768px) {
  .cover .cover_txt {
    width: 89.7435897436vw;
    color: #383838;
    font-family: "Noto Sans JP";
    font-size: 4.1025641026vw;
    font-style: normal;
    font-weight: 300;
    line-height: 200%;
    /* 32px */
    letter-spacing: 0.4102564103vw;
    margin-bottom: 25.641025641vw;
  }
}
.cover .cover_aside {
  margin-top: 2.0833333333vw;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cover .cover_aside {
    margin-top: 5.1282051282vw;
  }
}
.cover .cover_aside .cover_asideTtl {
  color: #383838;
  font-family: "Noto Sans JP";
  font-size: 1.71875vw;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.171875vw;
  margin-bottom: 1.8229166667vw;
}
@media screen and (max-width: 768px) {
  .cover .cover_aside .cover_asideTtl {
    color: #383838;
    font-family: "Noto Sans JP";
    font-size: 7.6923076923vw;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.7692307692vw;
    display: table;
    margin: 0 auto 7.6923076923vw;
  }
}
.cover .cover_aside .cover_asideTxt {
  color: #383838;
  font-family: "Noto Sans JP";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 300;
  line-height: 200%;
  /* 36px */
  letter-spacing: 0.0833333333vw;
}
@media screen and (max-width: 768px) {
  .cover .cover_aside .cover_asideTxt {
    color: #383838;
    font-family: "Noto Sans JP";
    font-size: 4.6153846154vw;
    font-style: normal;
    font-weight: 300;
    line-height: 200%;
    /* 36px */
    letter-spacing: 0.4615384615vw;
  }
}
.cover .cover_img01 {
  width: 16.6666666667vw;
  position: absolute;
  right: -18.75vw;
  top: -17.7083333333vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.cover .cover_img01 img {
  background-color: #fff;
}
.cover .cover_img01.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
.cover .cover_img02 {
  width: 16.6666666667vw;
  position: absolute;
  left: -22.65625vw;
  bottom: 0vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.cover .cover_img02 img {
  background-color: #fff;
}
.cover .cover_img02.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
.cover .cover_img03 {
  width: 20.8333333333vw;
  position: absolute;
  right: -22.9166666667vw;
  bottom: 11.4583333333vw;
  transition: all 2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.cover .cover_img03 img {
  background-color: #fff;
}
.cover .cover_img03.on {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  transition-delay: 1s;
}
.cover .ribbon_bg07 {
  top: 75%;
}
@media screen and (max-width: 768px) {
  .cover .ribbon_bg07 {
    top: 26.5%;
  }
}
@media screen and (max-width: 768px) {
  .cover .ribbon_bg08 {
    top: 84%;
  }
}

/*-------------------------------------------------------------------
narrator
/*-------------------------------------------------------------------*/
.narrator .gallery_box {
  width: 27.34375vw;
}
.narrator .gallery_boxTtl {
  color: #383838;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.09375vw;
  margin-bottom: 1.0416666667vw;
}
@media screen and (max-width: 768px) {
  .narrator .gallery_boxTtl {
    font-size: 4.1025641026vw;
    font-weight: 300;
    letter-spacing: 0.4102564103vw;
    margin-bottom: 3.0769230769vw;
  }
}
.narrator .gallery_boxWrap {
  width: 44.7916666667vw;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .narrator .gallery_boxWrap {
    width: 100%;
  }
}
.narrator .gallery_boxWrap_bottom {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 3.6458333333vw;
  margin-top: 0vw;
  margin-left: -5.7291666667vw;
}
@media screen and (max-width: 768px) {
  .narrator .gallery_boxWrap_bottom {
    display: block;
    margin-left: 0;
    margin-top: 15.3846153846vw;
  }
}
@media screen and (max-width: 768px) {
  .narrator .gallery_boxWrap_bottom .gallery_box {
    margin-top: 7.6923076923vw;
    width: 89.7435897436vw;
    margin-left: auto;
    margin-right: auto;
  }
}
.narrator .gallery_boxWrap_bottom .gallery_box:last-child {
  margin-top: 5.7291666667vw;
}
@media screen and (max-width: 768px) {
  .narrator .gallery_boxWrap_bottom .gallery_box:last-child {
    margin-top: 7.6923076923vw;
  }
}

/*-------------------------------------------------------------------
footer
/*-------------------------------------------------------------------*/
.footer {
  background: #DFD9CC;
  width: 100%;
  height: 3.125vw;
  margin: 0 auto;
  font-size: 1.0416666667vw;
  font-weight: 400;
  line-height: 190%;
  letter-spacing: 3px;
  color: #383838;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .footer {
    font-size: 3.8461538462vw;
    letter-spacing: 0.4102564103vw;
    height: 15.3846153846vw;
  }
}

.modaal-close:after,
.modaal-close:before {
  background: #F38DAB;
}

.song {
  -webkit-user-select: none;
  /* Chrome, Safari */
  -moz-user-select: none;
  /* Firefox */
  /* IE/Edge */
  user-select: none;
}/*# sourceMappingURL=style.css.map */