/* ---------------------- common ---------------------- */

:root { --main_pink: #ff2cc5;}

body {
    font-family: 'Noto Sans JP','Noto Sans Display',"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    background:url(../images/back_pc.jpg) repeat-y top 7% center / 100%;
}

picture { display: block;}

#page { overflow: hidden;}

.pc_only { display: block;}

.sp_only {display: none;}

.content_wrapper {
    width: 100%;
    background: url(../images/top_deco_pc.png) no-repeat top center / 100%, url(../images/back_pc.jpg) repeat-y top / 100%;
    padding-top: 30%;
}

.inner_wrapper { 
    max-width: 1152px;
    width: 60%;
    margin: 0 auto;
    padding-bottom: 7%;
}

.main_navi {
    /* max-width: 1152px; */
    width: 60%;
    margin: 0 auto 5%;
}

.main_navi ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0.9vw;
    font-weight: 700;
}

.main_navi ul li {
    width: 10%;
    text-align: center;
    padding-bottom: 2%;
}

.main_navi ul li a {
    display: block;
    padding-bottom: 10%;
    width: 100%;
    position: relative;
}

.main_navi ul li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: all .2s;
    transform: scale(1, 1);
    transform-origin: center top;
}

.main_navi ul li a:hover::after { transform: scale(0, 0);}

#header {
    background: url(../images/top_deco_pc.png) no-repeat top center / 100%;
    width: 100%;
    padding-top: 15.62%;
    position: relative;
}

#header h1 {
    position: absolute;
    width: 30%;
    top: 25%;
    left: calc(50% - 15%);
    transition: all .2s;
}

#header h1 img { width: 100%;}

#header h1:hover { opacity: .6;}

#page h2 {
    color: var(--main_pink);
    width: 100%;
    position: relative;
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 300;
    font-size: 3.1vw;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.2rem;
    margin-bottom: 5%;
}

#page h2::before,
#page h2::after {
    content: "";
    position: absolute;
    top: 40%;
    display: block;
    width: 38%;
    height: 2px;
    background-color: var(--main_pink);
}

#page h2::before { left: 0;}

#page h2::after { right: 0;}

#page h2 span {
    display: flex;
    flex-direction: column;
}

#page h2 span::after {
    display: block;
    content: attr(data-caption);
    font-weight: 700;
    font-size: 30%;
    bottom: 0;
    letter-spacing: 0.1rem !important;
}

#page-top {
    position: fixed;
    bottom: 3%;
    right: 1%;
    width: 8%;
    height: auto;
}

#page-top img { max-width: 100%;}
/* ---------------------- common ---------------------- */


/* ---------------------- top ---------------------- */
#home_header { 
    width: 100%;
    position: relative;
}

#home_header div {
    position: relative;
    width: 100%;
    padding-top: 43.48%;
    background: url(../images/main_img_pc.jpg) no-repeat top center / 100%;
}

#home_header h1, #home_header p { 
    position: absolute;
    right: 2%;
}

#home_header h1 {
    width: 40%;
    top: 3.5%;
}

#home_header p {
    width: 29%;
    bottom: 2%;
}

#home_header h1 img ,
#home_header p img { width: 100%;}

#home_header .main_navi,
.delivery {
    position: absolute !important;
    bottom: -25%;
    left: calc(50% - 30%);
    margin-bottom: 0 !important;
}

.delivery {
    width: 45%;
    bottom: -48%;
    left: calc(50% - 22.5%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.delivery li { width: 48%;}

.delivery li a {
    display: block;
    width: 100%;
    transition: all .2s;
}

.delivery li a img { width: 100%;}

.delivery li a:hover { opacity: .7;}

.delivery li div { 
    background: none !important;
    padding-top: 0 !important;
}

.delivery li div, .delivery li div img { width: 100% !important;}
/* ---------------------- top ---------------------- */


/* ---------------------- sns ---------------------- */
#sns, #trailer, #collabo { margin-bottom: 15%;}

#sns ul {
    width: 30%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#sns ul li { 
    width: 25%;
    transition: all .2s;
}

#sns ul li img { width: 100%;}

#sns ul li:hover { opacity: .7;}
/* ---------------------- sns ---------------------- */


/* ---------------------- sns ---------------------- */
#collabo p, #collabo picture, #collabo picture img { width: 100%;}

#collabo p { 
    transition: all .2s;
    margin-bottom: 2%;
}

#collabo p:hover { opacity: .7;}
/* ---------------------- sns ---------------------- */


/* ---------------------- trailer ---------------------- */
#trailer .movie {
    position: relative;
    width: 90%;
    aspect-ratio: 16/9;
    margin: 0 auto 5% auto;
    overflow: hidden;
 }

#trailer .tvo-video {
    position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     right: 0;
}

#trailer p { 
    color: var(--main_pink);
    text-align: center;
    font-weight: 700;
}

#trailer p:first-of-type { 
    font-size: 1.8vw;
    margin-bottom: 2%;
}

#trailer p:nth-of-type(2) { 
    font-size: 1.5vw;
    margin-bottom: 3%;
}

#trailer p:last-of-type {
    width: 40%;
    margin: 0 auto;
    border: solid 2px var(--main_pink);
    border-radius: 50px;
    font-size: 1.1vw;
    background-color: transparent;
    transition: all .2s;
}

#trailer p:last-of-type:hover { 
    background-color: var(--main_pink);
    color: #fff;
}

#trailer p:last-of-type a {
    display: block;
    width: 100%;
    padding: 6%;
}
/* ---------------------- trailer ---------------------- */


/* ---------------------- intro ---------------------- */
#intro p { text-align: center;}

#intro p, #intro picture { width: 100%;}

#intro picture img { width: 85%;}

#intro p:first-of-type { margin-bottom: 4%;}

#intro p:last-of-type {
    font-size: 1.1vw;
    line-height: 2;
}
/* ---------------------- intro ---------------------- */

/* ---------------------- story ---------------------- */
#story p:first-of-type,
#story p:nth-of-type(2) {
    color: var(--main_pink);
    text-align: center;
    font-weight: 700;
}

#story p:first-of-type { 
    font-size: 1.8vw;
    margin-bottom: 2%;
}

#story p:nth-of-type(2) { 
    font-size: 1.5vw;
    margin-bottom: 3%;
}

#story p:last-of-type {
    font-size: 1.1vw;
    line-height: 2;
    text-align: justify;
    margin-bottom: 5%;
}

#story .scene_photo {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 12%;
}

#story .scene_photo p {
    margin: 0 !important;
}

#story .scene_photo p img,
#story .recent_story ul li img { width: 100%;}

#story h3 {
    width: 100%;
    text-align: center;
    font-size: 1.5vw;
    font-weight: 700;
    margin-bottom: 3%;
}

#story .recent_story ul {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

#story .recent_story p { 
    text-align: center;
    font-size: 1.5vw;
    font-weight: 700;
    color: #000;
}

#story .recent_story a {
    display: block;
    width: 100%;
    transition: all .2s;
}

#story .recent_story a:hover { opacity: .7;}

#story .story_top {
    width: 40%;
    margin: 0 auto;
    font-size: 1.1vw !important;
}

#story .story_top a {
    display: block;
    width: 100%;
    padding: 3%;
    color: var(--main_pink);
    border: solid 2px var(--main_pink);
    border-radius: 50px;
    background-color: transparent;
    transition: all .2s;
}

#story .story_top a:hover {
    background-color: var(--main_pink);
    color: #fff !important;
    opacity: 1 !important;
}
/* ---------------------- story ---------------------- */


/* ---------------------- cast ---------------------- */
#cast section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-bottom: 7%;
    margin-bottom: 7%;
    border-bottom: dotted 1px #000;
}

#cast section:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

#cast figure {
    display: block;
    width: 35%;
}

#cast figure img { width: 100%;}

#cast .detail_txt { width: 60%;}

#cast h3 {
    font-size: 2vw;
    font-weight: 700;
    margin-bottom: 2%;
    color: var(--main_pink);
    line-height: 1;
}

#cast .role_name {
    font-size: 1.1vw;
    font-weight: 700;
    margin-bottom: 2%;
    color: var(--main_pink);
    line-height: 1;
}

#cast .role_detail,
.comment_profile p {
    font-size: 1vw;
    font-weight: 500;
}

#cast .role_detail { margin-bottom: 7%;}

.comment_profile_hd {
    font-size: 1.1vw;
    font-weight: 700;
    margin-bottom: 1%;
    line-height: 1; 
}

.comment_profile p { 
    line-height: 1.5;
    text-align: justify;
}

.comment_profile:first-of-type { margin-bottom: 7%;}

#cast .comment_profile p { text-align: justify;}
/* ---------------------- cast ---------------------- */


/* ---------------------- original ---------------------- */
#original h2::before,
#original h2::after { width: 35% !important;}

#original .author {
    display: flex;
    flex-direction: column-reverse;
}

#original h3 {
    width: 100%;
    font-size: 2vw;
    font-weight: 700;   
    line-height: 1;
    margin-bottom: 2%;
    text-align: center;
    color: var(--main_pink);
}

#original .book_detail {
    font-size: 1.1vw;
    font-weight: 700;
    color: var(--main_pink);
    line-height: 1.7;
    margin-bottom: 6%;
    text-align: center;
}

#original .author_img {
    display: flex;
    justify-content: center;
    margin-bottom: 3.5%;
}

#original .author_img figure {
    display: block;
    width: 35%;
}

#original .author_img figure img { width: 100%;}

#original .author_img figure:first-of-type { margin-right: 2.5%;}

#original .comment_profile_hd {
    font-size: 1.3vw;
    font-weight: 700;
    margin-bottom: 1%;
    line-height: 1; 
    text-align: center;
}

#original .comment_profile p { 
    text-align: center;
    font-size: 1.1vw;
    line-height: 1.7;
}
/* ---------------------- original ---------------------- */


/* ---------------------- theme song ---------------------- */
#theme_song h2::before,
#theme_song h2::after { width: 31% !important;}

#theme_song section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-bottom: 7%;
    margin-bottom: 7%;
    border-bottom: dotted 1px #000;
}

#theme_song section:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

#theme_song .detail_txt { width: 45%;}

#theme_song figure {
    display: block;
    width: 52%;
}

#theme_song figure img { width: 100%;}

#theme_song h3 {
    font-size: 1.3vw;
    font-weight: 700;
    color: var(--main_pink);
    margin-bottom: 2%;
}

#theme_song .song_name {
   font-size: 2vw; 
   font-weight: 700;
   line-height: 1;
   color: var(--main_pink);
   margin-bottom: 2%;
}

#theme_song .song_name span { font-size: 70%;}

#theme_song .label {
    font-size: 1.1vw;
    font-weight: 700;
    color: var(--main_pink);
    margin-bottom: 10%;
}
/* ---------------------- theme song ---------------------- */


/* ---------------------- outline ---------------------- */
#outline dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 0.9vw;
}

#outline dt, #outline dd {
    padding: 2% 0;
    border-bottom: solid 1px #000;
    display: flex;
    align-items: center;
}

#outline dt {
    font-weight: 700;
    width: 25%;
    padding-left: 1%;
}

#outline dd {
    width: 75%;
    font-weight: 500;
    line-height: 2;
}

#outline a {
    text-decoration: underline;
    color: blue;
}
/* ---------------------- outline ---------------------- */


/* ---------------------- news ---------------------- */
#news article {
    padding: 5%;
    background-color: rgba(255, 255, 255, .9);
    box-shadow:  5px 5px 10px #c8ff3c,
                -5px -5px 10px #c8ff3c,
                -5px -5px 10px #c8ff3c,
                5px 5px 10px #c8ff3c;
    margin-bottom: 15%;
}

#news h3 {
    width: 100%;
    font-size: 2vw;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 5%;
    text-transform: uppercase;
}

#news h3 span { color: #ff2cc5;}

#news h3 .present_ttl { 
    color: #000;
    font-size: 85%;
    /* position: relative; */
    display: block;
    margin-bottom: 2%;
    width: 100%;
    padding: 0.5% 1%;
    border: solid 1px #000;
    text-transform: capitalize;
}

#news .news_main_img { 
    width: 100%;
    text-align: center;
    margin-bottom: 1%;
}

#news .main_img01 { width: 100%;}

#news .copyright {
    width: 100%;
    text-align: center;
    font-size: 0.8vw;
    margin-bottom: 6%;
}

#news dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 0.9vw; 
    margin-bottom: 3.5%
}

#news dt, #news dd {
    padding: 2% 0;
    border-bottom: solid 1px #000;
    align-items: center;
}

#news dt {
    font-weight: 700;
    width: 25%;
    padding-left: 1%;
    line-height: 2;
}

#news dd {
    width: 75%;
    font-weight: 500;
    line-height: 2;
    text-align: justify;
}

#news dd p:first-of-type { margin-bottom: 5%;}

#news .step01 a, #news dd ul li a {
    color: #ff2cc5;
    text-decoration: underline;
}

#news .step01 a:hover,
#news dd ul li a:hover { text-decoration: none;}

#news .step02 { margin-bottom: 2%;}

#news .step02_tw span {
    font-size: 80%;
    line-height: 1.5;
    display: inline-block;
}

#news dd ul li {
    margin-bottom: 2%;
    padding-left: 3%;
    position: relative;
    line-height: 1.5;
}

#news dd ul li::before {
    position: absolute;
    top: 0.8em;
    left: 0;
    content: "";
    display: block;
    width: 1.5%;
    height: 0.5px;
    background-color: #000;
}

#news .form_link {
    width: 55%;
    margin: 0 auto;
    background-color: #ff2cc5;
    border: solid 2px #ff2cc5;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: 1.1vw;
    font-weight: 700;
    line-height: 3.7;
    transition: all .2s;
}

#news .form_link:hover {
    background-color: #fff;
    color: #ff2cc5;
}

#news .form_link a { 
    display: block;
    width: 100%;
}


#news .item_intro {
    font-size: 1.2vw;
    text-align: center;
    line-height: 1.7;
    margin-top: 5%;
    margin-bottom: 6%;
}

#news .item_intro span {
    font-weight: 900;
    color: #ff2cc5;
}

#news h4 {
    font-size: 1.2vw;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 1%;
}

#news h4 span { font-size: 110%;}

#news h5 {
    text-align: center;
    font-size: 1vw;
    font-weight: 700;
    margin-top: 8%;
    margin-bottom: 2%;
    position: relative;
}

#news h5::before,
#news h5::after {
    position: absolute;
    display: block;
    content: "";
    height: 2px;
    width: 30%;
    background-color: #000;
    top: calc(50% - 1px);
}

#news h5::before {left: 0;}

#news h5::after {right: 0;}

#news .book_buy_link {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#news .book_buy_link p {
    width: 47%;
    border-radius: 50px;
    color: #fff;
    text-align: center;
    font-size: 1vw;
    transition: all .2s;
}

#news .book_buy_link p a { 
    display: block;
    width: 100%;
    padding: 4%;
}

#news .book_buy_link p:first-of-type {
    background-color: #F3A847;
    border: solid 2px #F3A847;
    margin-right: 3%;
}

#news .book_buy_link p:first-of-type:hover {
    background-color: #fff;
    color: #F3A847;
}

#news .book_buy_link p:last-of-type {
    background-color: #0085CD;
    border: solid 2px #0085CD;
}

#news .book_buy_link p:last-of-type:hover {
    background-color: #fff;
    color: #0085CD;
}

#news .book_buy_link .dvd_reserve {
    background-color: #ff2cc5 !important;
    border: solid 2px #ff2cc5 !important;
}

#news .book_buy_link .dvd_reserve:hover {
    background-color: #fff !important;
    color: #ff2cc5 !important;
}

#news .caution {
    margin: 1% auto 3%;
    font-size: 0.9vw;
    text-align: right;
}
/* ---------------------- news ---------------------- */

.jstream-eqPlayer,
.eq-h5_player {
	width: 100% !important;
	height: 100% !important;
}