@charset "UTF-8";
/* CSS Document */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scroll-padding-top: 60px;
}
body {
    font-size: 16px;
    line-height: 2.0;
    color: #222;
    background: #fff;
    font-family: YakuHanJP, "Noto Sans JP", serif;;
}
@media only screen and (max-width: 1024px) {
    body {
        font-size: 14px;
    }
}

a {
    color: #68B5E5;
}
a:hover {
    color: #0B5B8E;
}

img {
    width: 100%;
    max-width: 100%;
    vertical-align: bottom;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.4;
    padding: 0.2em 0;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}
h1 {
    font-size: 2.8em;
}
h2 {
    font-size: 2.4em;
}
h3 {
    font-size: 1.8em;
}
h4 {
    font-size: 1.2em;
}
h5 {
    font-size: 1.05em;
}
h6 {
    font-size: 1.0em;
}

/*　汎用クラス
**************************************************************/

/* 文字揃え */
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-just {
    text-align: justify;
}
.text-center {
    text-align: center;
}

/*テキスト装飾*/
.text-border-top {
    border-top: 1px solid;
}
.text-border-bottom {
    border-bottom: 1px solid;
}
.text-frame {
    line-height: 1.0 !important;
    border: 1px solid;
    padding: 0.25em 0.5em 0.3em 0.5em;
}
.inline-block {
    display: inline-block;
}
.text-s {
    font-size: 90%;
}
.text-ss {
    font-size: 80%;
}
.text-sss {
    font-size: 70%;
}
.text-l {
    font-size: 107%;
}
.text-ll {
    font-size: 115%;
}
.text-lll {
    font-size: 125%;
}
.text-llll {
    font-size: 135%;
}
.text-lllll {
    font-size: 150%;
}
.text-normal {
    font-weight: normal;
}
.text-bold {
    font-weight: bold;
}
.lh-narrow {
    line-height: 1.5;
}

/*リンクURL*/
.url {
    line-height: 1.5;
    word-break: break-all;
}

/*　マージン・パディング
**************************************************************/
/* マージン0 */
.margin-0 {
    margin: 0;
}
/* 左右マージン */
.mx-auto {
    margin-right: auto;
    margin-left: auto;
}
/* 左右余白 */
.px-0 {
    padding-right: 0;
    padding-left: 0;
}
.px-05 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.px-10 {
    padding-right: 1.0rem;
    padding-left: 1.0rem;
}
.px-15 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.px-20 {
    padding-right: 2.0rem;
    padding-left: 2.0rem;
}
.px-30 {
    padding-right: 3.0rem;
    padding-left: 3.0rem;
}
/* 上マージン */
.mt-0 { margin-top: 0!important; }
.mt-1 { margin-top: 1.0rem!important; }
.mt-2 { margin-top: 2.0rem!important; }
.mt-3 { margin-top: 3.0rem!important; }
.mt-4 { margin-top: 4.0rem!important; }
.mt-5 { margin-top: 5.0rem!important; }
/* 下マージン */ 
.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: 1.0rem!important; }
.mb-2 { margin-bottom: 2.0rem!important; }
.mb-3 { margin-bottom: 3.0rem!important; }
.mb-4 { margin-bottom: 4.0rem!important; }
.mb-5 { margin-bottom: 5.0rem!important; }
/* 左マージン */
.ml-0 { margin-left: 0!important; }
.ml-1 { margin-left: 1.0rem!important; }
.ml-2 { margin-left: 2.0rem!important; }
.ml-3 { margin-left: 3.0rem!important; }
.ml-4 { margin-left: 4.0rem!important; }
.ml-5 { margin-left: 5.0rem!important; }
/* 右マージン */
.mr-0 { margin-right: 0!important; }
.mr-1 { margin-right: 1.0rem!important; }
.mr-2 { margin-right: 2.0rem!important; }
.mr-3 { margin-right: 3.0rem!important; }
.mr-4 { margin-right: 4.0rem!important; }
.mr-5 { margin-right: 5.0rem!important; }
/* 上パディング */
.pt-0 { padding-top: 0!important; }
.pt-1 { padding-top: 1.0rem!important; }
.pt-2 { padding-top: 2.0rem!important; }
.pt-3 { padding-top: 3.0rem!important; }
.pt-4 { padding-top: 4.0rem!important; }
.pt-5 { padding-top: 5.0rem!important; }
/* 下パディング */ 
.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: 1.0rem!important; }
.pb-2 { padding-bottom: 2.0rem!important; }
.pb-3 { padding-bottom: 3.0rem!important; }
.pb-4 { padding-bottom: 4.0rem!important; }
.pb-5 { padding-bottom: 5.0rem!important; }
/* 左パディング */
.pl-0 { padding-left: 0!important; }
.pl-1 { padding-left: 1.0rem!important; }
.pl-2 { padding-left: 2.0rem!important; }
.pl-3 { padding-left: 3.0rem!important; }
.pl-4 { padding-left: 4.0rem!important; }
.pl-5 { padding-left: 5.0rem!important; }
/* 右パディング */ 
.pr-0 { padding-right: 0!important; }
.pr-1 { padding-right: 1.0rem!important; }
.pr-2 { padding-right: 2.0rem!important; }
.pr-3 { padding-right: 3.0rem!important; }
.pr-4 { padding-right: 4.0rem!important; }
.pr-5 { padding-right: 5.0rem!important; }

/*　loading画面
**************************************************************/
.loading {
    /*ローディング画面の縦横幅を画面いっぱいになるように指定*/
    width: 100vw;
    height: 100vh;
    /*ローディング画面の表示位置を固定*/
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*ローディング画面を0.5秒かけて非表示にする*/
    transition: all 0.5s linear;
    z-index: 999999;
  }
  
  /*ローディング画面を非表示にする*/
  .loading.loaded {
    /*0.5秒かけてopacityを0にする*/
    opacity: 0;
    visibility: hidden;
  }
  
  .loading-text {
    color: #5c8099;
    font-size: 1.0em;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
  }
  
  .spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #eee;
    border-left-color: #5c8099; 
    /* アニメーションを1秒かけて実行 */
    animation: spinner-rotation 1s linear infinite;
  }
  
  /* アニメーションの設定 */
  @keyframes spinner-rotation {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }

/*　Page Top ボタン
**************************************************************/
/*ボタンデザイン*/
#page-top a {
	display: block;
    font-size: 0;
    width: 32px;
    height: 32px;
    text-align: center;
    background: #4B99CB url("../images/btn_arrow.png") no-repeat center center;
    background-size:55%;
    border-radius:50%;
    position: relative;
}
#page-top a:hover {
	background:#555 url("../images/btn_arrow.png") no-repeat center center;
    background-size:55%;
}
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 5%;
	bottom:50px;
	z-index: 999;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}
p#page-top {
    margin-bottom:0;
}
/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
    from {
        opacity: 1;
      transform: translateY(0);
    }
    to {
        opacity: 1;
      transform: translateY(100px);
    }
}
@media screen and (max-width: 1024px) {
    #page-top {
        right: 15px;
    }
}

/*　way points Animation
**************************************************************/
.anm-fadeInUp {
    opacity: 0;
    transition: 1.0s;
    transform: translateY(30px);
}
.anm-fadeInUp.active {
    opacity: 1.0;
    transition: 1.0s;
    transform: translateY(0);
}

/*　Youtube 埋め込み
**************************************************************/
.youtube {
    width:100%;
    height:auto;
    position: relative;
    padding-bottom: 56.25%;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*　footer
**************************************************************/
footer {
    width: 100%;
    height: auto;
    font-size:15px;
    color: #000;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: #f7f7f7;
}
footer .footer-outer {
    padding: 30px 0;
}
footer .footer-logo-outer {
    text-align: center;
    margin: 1.2em 0 0.5em 0;
    display: block;
}
footer .copyright {
    font-size: 12px;
    color: #000;
    letter-spacing: 0.05em;
    line-height: 1.6;
}
footer .footer-logo-outer span.footer-logo {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

/* Global Navi
**************************************************************/
.nav-box {
    background: none;
    display:block;
    }
/*　ハンバーガーメニューボタン　*/
.hamburger {
    display : block;
    position: fixed;
    z-index : 1000;
    right : 16px;
    top   : 16px;
    width : 44px;
    height: 44px;
    cursor: pointer;
    text-align: center;
}
.hamburger span {
    display : block;
    position: absolute;
    width   : 90%;
    height  : 1px ;
    left    : 2px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
    top: 10%;
}
.hamburger span:nth-child(2) {
    top: 45%;
}
.hamburger span:nth-child(3) {
    top: 80%;
}
/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
    background : #222;
    top : 16px;
    left: 2px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
    display:none;
}
.hamburger.active span:nth-child(3) {
    background : #222;
    top: 16px;
    left:2px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
}
/* メニュー背景　*/
nav.globalMenuSp {
    position: fixed;
    z-index : 999;
    top  : 0;
    right : 0;
    color: #777;
    background: rgba(255,255,255,0.9);
    /*background: url("../images/menu_bg.png") no-repeat;*/
    /*background-size: cover;*/
    text-align: center;
    width: 320px;
    transform: translateX(100%);
    transition: all 0.6s;
}
nav.globalMenuSp ul {
      margin: 30px;
      padding: 0;
      display:block;
      text-align: left;
}
nav.globalMenuSp ul li {
    font-size: 1.2em;
    list-style-type: none;
    padding: 0 0 0 1.0em;
    width: 100%;
    transition: .4s all;
    border-bottom:1px dotted #777;
}
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
    background :#f5f5f5;
}
nav.globalMenuSp ul li a {
    display: block;
    color: #e06e6e;
    padding: 1em 0;
    text-decoration :none;
}
nav.globalMenuSp ul li a::before {
    content:"";
    display:inline-block;
    width:1.0em;
    height:1.0em;
    background:url(../images/marker-arrow-right.png) no-repeat;
    background-size: 100%;
    margin-right:8px;
    transform:translateY(0.1em);
}
/* クリックでjQueryで追加・削除 */
    nav.globalMenuSp.active {
    opacity: 100;
    display: block;
    transform: translateX(0);
}

@media screen and (max-width: 768px) {
    .hamburger {
        width: 28px;
        height: 28px;
    }
}
@media screen and (max-width: 600px) {
    .hamburger {
        top: 14px;
        right: 14px;
    }
}
@media screen and (max-width: 480px) {
    nav.globalMenuSp {
    width:100%
    }
}

/* PC・SP 表示・非表示
**************************************************************/
.pconly {
    display: inline-block;
}
.sponly {
    display: none;
}
@media screen and (max-width: 480px) {
    .pconly {
        display: none;
    }
    .sponly {
        display: inline-block;
    }
}

/**************************************************************
 Bye-Bye-Handの方程式
**************************************************************/
.bg-aqua {
    background: #f5fefe;
}
.bg-coral {
    background: #61AAD8;
}
.bg-pink {
    background: #BFDAEB;
}
.bg-brown {
    background:#0F386E;
    color: #fff;
}

.text-coral {
    color:#e06e6e;
}

/* Hero Space
**************************************************************/
#hero-space {
    background: #BFDAEB;
    position: relative;
}
#hero-space h1.title-logo {
    width: 24vw;
    height: auto;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 1vw;
    left: 1vw;
}
#hero-space h1.title-logo img {
    vertical-align: top;
}
@media screen and (max-width: 1440px) {
    #hero-space h1.title-logo {
        width: 40vw;
    }
}

#wrapper .js-header {
    background: none;
    transition: 0.5s ease-out;
    width:100%;
    height:120px;
    position:absolute;
    top: -120px;
    left: 0;
    z-index:997;
}
#wrapper .js-header.scrollActive-bg {
    width:100%;
    height:7vw;
    background: linear-gradient(rgba(32,140, 205, 50) 30%,rgba(69, 69, 155, 0));
    transition: 0.5s ease-out;
    position:fixed;
    top:0;
    left:0;
}
@media screen and (max-width: 1024px) {
    #wrapper .js-header.scrollActive-bg {
        height:9vw;
    }
}
@media screen and (max-width: 768px) {
    #wrapper .js-header.scrollActive-bg {
        height:10vw;
    }
}

#hero-space h1.js-logo {
    transition: 0.5s ease-out;
}
#hero-space h1.js-logo.scrollActive-logo {
    width:15vw;
    height:auto;
    transition: 0.5s ease-out;
}
@media screen and (max-width: 768px) {
    #hero-space h1.js-logo {
        top: 2vw;
        left: 2vw;
    }
    #hero-space h1.js-logo.scrollActive-logo {
        width: 20vw;
    }
}
@media screen and (max-width: 600px) {
    #hero-space h1.js-logo {
        width: 45vw;
    }
    #hero-space h1.js-logo.scrollActive-logo {
        width: 30vw;
    }
    #wrapper .js-header.scrollActive-bg {
        height: 12vw;
    }
}

/*メインビジュアル*/
#hero-space .main-visual {
    margin: 0;
    padding: 0;
}
.main-visual img.main-pc {
    display: block;
}
.main-visual img.main-sp {
    display: none;
}
@media screen and (max-width: 600px) {
    .main-visual img.main-pc {
        display: none;
    }
    .main-visual img.main-sp {
        display: block;
    }
}
/*メインビジュアル内のEP告知*/
#hero-space .ep-announce-space {
    width:70vw;
    height:auto;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 2vw;
    margin: 0 auto;
}
.ep-announce-space .ep-title::after {
    content: "";
    display: block;
    width: 30vw;
    height: 1px;
    background: #fff;
    margin: 15px auto 20px;
}
.ep-announce-space .shitsukoi-announce {
    width:30vw;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    #hero-space .main-visual {
        padding-bottom: 120px;
    }
    #hero-space .ep-announce-space {
        width:90vw;
        bottom: 5vw;
    }
    .ep-announce-space .shitsukoi-announce {
        width: 38vw;
    }
    .ep-announce-space .ep-title::after {
        width: 38vw;
    }
}
@media screen and (max-width: 600px) {
    #hero-space .ep-announce-space {
        width:94vw;
    }
    .ep-announce-space .ep-title::after {
        width: 40vw;
    }
    .ep-announce-space .shitsukoi-announce {
        width: 60vw;
    }
}

/*　Contents
**************************************************************/
.contents-block {
    width: 100%;
    margin: 0;
    padding: 50px 0;
}
@media screen and (min-width: 1600px) {
    .contents-block {
        padding: 100px 0;
    }
}
@media screen and (max-width: 600px) {
    .contents-block {
        padding: 30px 0;
    }
}
.contents-outer {
    width: 100%;
}
.contents-inner {
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
    padding: 1.0em 0;
}
.column-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.column-box .col-30,
.column-box .col-50,
.column-box .col-70,
.column-box .col-100 {
    padding: 0 2.5%;
}
.column-box .col-30 {
    width: calc(100% / 3); 
}
.column-box .col-50 {
    width: 50%; 
}
.column-box .col-70 {
    width: 70%; 
}
.column-box .col-100 {
    width: 100%; 
}

@media screen and (max-width: 1024px) {
    .column-box .col-sp-50 {
        width: 50%;
    }
}
@media screen and (max-width: 600px) {
    .column-box .col-50 {
        width: 100%; 
    }
    .column-box .col-sp-50 {
        width: 50%;
    }
    .column-box .col-sp-70 {
        width: 70%;
    }
    .column-box .col-sp-100 {
        width: 100%; 
    }
}
@media screen and (max-width: 480px) {
    .column-box .col-sp-50 {
        width: 100%;
    }
}

/*　Section
**************************************************************/
h2.section-title {
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
}
h2.section-title img {
    width: 40%;
    height: auto;
}
@media screen and (max-width: 768px) {
    h2.section-title img {
        width: 70%;
    }
}
@media screen and (max-width: 480px) {
    h2.section-title img {
        width: 85%;
    }
}

/*　Contents 装飾
**************************************************************/
/* RELEASE */
.release-date {
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid;
}
.release-title {
    font-size: 2.0em;
}
.release-title span.artist-name-sub {
    font-size: 65%;
}
.ep-circle {
    width: 2.0em;
    height: 2.0em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 50%;
    color: #fff;
    font-weight: bold;
    line-height: 1.0;
    letter-spacing: 0;
    background: #000;
    border-radius: 50vh;
    margin-right: 0.5em;
    vertical-align: 0.2em;
}
.release-type {
    font-size: 50%;
    color: #fff;
    font-weight: bold;
    line-height: 1.0;
    background: #000;
    padding: 0.15em 1.0em 0.3em;
    border-radius: 50vh;
}
.text-ruby {
    line-height: 2.0;
}
[data-ruby] {
	position: relative;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -1.2em;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 0.35em;
    text-align: center;
}

/* URLリンク */
dl.url-link-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    line-height: 1.0;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
dl.url-link-list dt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.5em;
    height: 2.0em;
    font-size: 90%;
    font-weight: normal;
    text-align:center;
    border: 1px solid;
    margin-right: 0.5em;
}
dl.url-link-list dd {
    width: calc(100% - 8.5em);
}

/* リンクボタン */
a.link-btn-down {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85em;
    font-weight: normal;
    line-height: 1.0;
    border: 1px solid;
    padding: 0.5em 0.7em;
}
a.link-btn-down::after {
    content: "";
    display: inline-block;
    width: 1.0em;
    height: 1.0em;
    background: url("../images/btn_arrow_down_pink.png") no-repeat;
    background-size: 1.0em;
    margin-left: 0.25em;
}
a.link-btn-down:hover {
    color: #fff;
    background: #BFDAEB;
}
a.link-btn-down:hover::after {
    content: "";
    display: inline-block;
    width: 1.0em;
    height: 1.0em;
    background: url("../images/btn_arrow_down_white.png") no-repeat;
    background-size: 1.0em;
    margin-left: 0.25em;
}

/* INFORMATION / LIVE / EVENT */
h4.info-title {
    font-size: 1.35em;
    padding: 1.2em 0.3em;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-bottom: 1.0em;
}
.text-frame-black {
    display: inline-block;
    color: #fff;
    background: #000;
    line-height: 1.0;
    padding: 0.25em 1.0em 0.4em;
    border-radius: 50vh;
}

/* OFFICIAL SITE LIST*/
dl.official-link-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 0.9em;
    line-height: 1.4;
    margin: 1.0em 0 1.5em 0;
}
dl.official-link-list dt {
    display: flex;
    align-items: center;
    min-width: 12em;
    margin-right: 1.0em;
    margin-bottom: 0.5em;
}
dl.official-link-list dd {
    width: calc(100% - 13em);
    margin-bottom: 0.5em;
}