/*******************************************
基礎
*******************************************/
* { vertical-align: baseline; }
html, body { overflow-y: scroll; overflow-x: hidden; width: 100vw; margin: 0; padding: 0; background-color: black; color: white; }
body { font-family: 'Open Sans', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
section { width: 100vw; margin-bottom: 50px; position: relative; z-index: 2; }
.section { width: 100vw; margin-bottom: 50px; position: relative; z-index: 2; }
a { text-decoration: none; color: white; }
h1, h2 { text-align: center; }
h1 { margin: 0 auto 25px auto; }
h2 { margin: 25px auto; }
.fade-in { opacity: 0; transition: all .5s ease-in; transform: translateY(25px); }
.fade-in.appear { opacity: 1; transform: translateY(0); }
img.background-ornament { z-index: 0; position: absolute; display: block; }
/* スマホ調整 */
@media only screen and (max-width:725px) {
    .pconly { display: none !important; }
}

/*******************************************
[VIDEO SCREEN] 
*******************************************/
#video-screen { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(244,0,158,1); cursor: pointer; }
#video-screen.active { display: table; }
#video-screen .video-box { display: table-cell; vertical-align: middle; }
#video-screen .video-box .video-holder { position: relative; padding-bottom: calc(56.25% * 0.90); width: 90%; height: 0; margin: 0 auto; }
@media only screen and (min-width: 1000px) { 
    #video-screen .video-box .video-holder { padding-bottom: calc(56.25% * 0.70); width: 70%; }
}
#video-screen .video-box .video-holder iframe { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#video-screen .video-box .video-holder iframe.active { display: block; }
#video-screen .video-box .video-holder .close-video-screen-button { position: absolute; z-index: 2; top: -48px; right: 0; display: inline-block; width: 40px; height: 40px; background: transparent; overflow: hidden; border-radius: 50%; border: 2px solid white; cursor: pointer; outline: none; }
#video-screen .video-box .video-holder .close-video-screen-button:before, #video-screen .video-box .video-holder .close-video-screen-button:after { content: ''; position: absolute; height: 2px; width: 10px; top: 50%; left: 50%; margin: -0 0 0 -5px; background-color: white; border-radius: 5px; }
#video-screen .video-box .video-holder .close-video-screen-button:before { transform: rotate(45deg); }
#video-screen .video-box .video-holder .close-video-screen-button:after { transform: rotate(-45deg); }

/*******************************************
HEADER
*******************************************/
#header { background-color: #e0009e; top: -50px; position: fixed; width: 100vw; height: 50px; z-index: 3; transition: top .5s ease; }
#header .nav { margin: 0 0 0 30px; }
#header .nav a { line-height: 49px; font-size: 20px; font-weight: 700; margin: 0 15px 0 0; opacity: .3; transition: opacity .3s ease; }
#header .nav a:hover { opacity: 1; }
#header .nav a.active { opacity: 1; }
#header .nav #language { float: right; }
#header .nav #language a { margin: 0 10px 0 0; }
/* スマホ調整 */
@media only screen and (max-width:725px) {
    #header .nav { margin: 0 0 0 15px; }
    #header .nav a { font-size: 15px; margin: 0 5px 0 0; }
}

/*******************************************
TOP
*******************************************/
#top { margin-bottom: 0; }
#top img { width: 100%; display: block; }
#top img.logo { position: absolute; bottom: 0; width: 50%; margin: 0 auto; left: 50%; transform: translateX(-50%); }
/* スマホ調整 */
@media only screen and (max-width:725px) {
    #top img.logo { width: 75%; }
}

/*******************************************
INTRODUCTION
*******************************************/
#introduction { background-image: url(./resources/top_2.jpg); background-position: top; background-size: contain; background-repeat: no-repeat; }
#introduction h1 { color: white; -webkit-text-stroke: 5px #e0009e; paint-order: stroke fill; filter: drop-shadow(2px 2px 0 #5489f6); }
#introduction h1 { font-size: 50px; letter-spacing: 5px; }
#introduction h2 { font-size: 25px; letter-spacing: 5px; }
#introduction h2 span.pink { color: white; filter: drop-shadow(2px 2px 0 #e0009e); }
#introduction h2 span.blue { color: white; filter: drop-shadow(2px 2px 0 #5489f6); }
#introduction a { display: block; background-color: #e0009e; width: 400px; height: 100px; margin: 0 auto 25px auto; text-align: center; clip-path: polygon(0 0, 90% 0, 100% 40%, 100% 100%, 10% 100%, 0 60%); }
#introduction a .container { background-color: #5489f6; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: all .2s ease; clip-path: polygon(2.5% 50%, 12.5% 10%, 87.5% 10%, 97.5% 50%, 97.5% 50%, 87.5% 90%, 12.5% 90%, 2.5% 50%); }
#introduction a .container p { font-size: 25px; font-weight: 900; transition: all .2s ease; }
#introduction a:hover .container { clip-path: polygon(2.5% 10%, 2.5% 10%, 87.5% 10%, 97.5% 50%, 97.5% 90%, 97.5% 90%, 12.5% 90%, 2.5% 50%); }
#introduction a:hover .container p { font-size: 30px; }
#introduction p.price { text-align: center; font-size: small; color: rgba(255,255,255,.5); }
#introduction p { max-width: 650px; margin: 0 auto; }
/* 英語版調整 */
#introduction h1.en, #introduction h2.en { letter-spacing: 0; }
#introduction h1.en { font-size: 25px; }
/* スマホ調整 */
@media only screen and (max-width:725px) {
    #introduction a { width: auto; }
    #introduction h1 { font-size: 30px; margin: 0 0 10px 0; }
    #introduction a { transform: scale(.7); margin: 0 auto 10px auto; }
    #introduction p { max-width: 310px; }
}

/*******************************************
SCREENSHOT
*******************************************/
#screenshot { display: flex; margin: 50px 0; height: 200px; border-top: 10px solid #e0009e; border-bottom: 10px solid #5489f6; }
#screenshot .image-carousel ul { display: flex; list-style-type: none; padding-left: 0; margin: 0; }
#screenshot .image-carousel ul li { width: 100%; }
#screenshot .image-carousel ul li img { display: block; height: 200px; }
#screenshot.paused { animation-play-state: paused !important; }

/* length edit */
/*
＜SP計算式＞
number of images x 355.5px x 2 = #screenshot width
number of images x 13s = image-carousel-movement seconds
＜PC計算式＞
number of images x 711px x 2 = #screenshot width
number of images x 20s = image-carousel-movement seconds
*/
#screenshot.game { width: 7110px; animation: image-carousel-movement 130s linear infinite; }
/* animation */
@keyframes image-carousel-movement { 
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* PC size */
@media only screen and (min-width: 1000px) {
    #screenshot { height: 400px; }
    #screenshot .image-carousel ul li img { height: 400px; }
    #screenshot.game { width: 14220px; animation: image-carousel-movement 200s linear infinite; }
}

/*******************************************
INFORMATION
*******************************************/
#information .image-container { display: block;  margin: 0 auto 25px auto; max-width: 550px; border: 10px solid #e0009e; border-radius: 10px; box-shadow: #5489f6 7px 7px 0; }
#information .image-container img { display: block; width: 100%; }
#information table { width: 90%; max-width: 650px; margin: 0 auto; border-collapse: collapse; }
#information table tr th { text-align: left; width: 120px; padding: 15px 0 0 0; font-size: 16px; }
#information table tr td { font-size: 16px; }
#information table tr.bottom-break td, #information table tr.bottom-break th { padding: 0 0 15px 0; } 
#information table tr.bottom-break.single th { padding: 15px 0 15px 0; }
#information table th.tabletitle { padding: 25px 0 10px 0; text-align: center; }
#information table td.tablesubtitle { font-weight: 700; }
#information table th.tablelist { padding: 8px 0 0 0; width: 25px; }
#information table tr.bottom-break th.tablelist { padding: 8px 0 15px 0; }
#information table tr th.small-text { font-size: 14px; }
#information table tr td.small-text { font-size: 14px; }
#information table tr td img { width: 100%; }
#information table tr.bottom-break { border-bottom: 3px solid #e0009e; }
/* スマホ調整 */
@media only screen and (max-width:725px) {
    #information .image-container { max-width: 310px; }
    #information table { max-width: 310px; }
}

/*******************************************
VIDEO
*******************************************/
#video .container { width: 90%; max-width: 650px; margin: 0 auto; }
#video .container .video-container:nth-child(1) { margin-bottom: 25px; }
#video .container .video-container { overflow: hidden; width: 100%; padding-top: 56.25%; position: relative; cursor: pointer; background-color: #e0009e; clip-path: polygon(0 0, 93% 0, 100% 12.44%, 100% 100%, 7% 100%, 0 87.56%); }
#video .container .video-container img.playicon { width: 48px; height: 48px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 3; }
#video .container .video-container img.img { position: absolute; top: 0; right: 0; transform: scale(1.01); width: 100%; transition-duration: 0.2s; z-index: 1; pointer-events: auto; object-fit: cover; height: 100%; clip-path: polygon(9% 3.56%, 91% 3.56%, 98% 16%, 98% 84%, 91% 96.44%, 9% 96.44%, 2% 84%, 2% 16%); }
#video .container .video-container:hover img.img { clip-path: polygon(2% 3.56%, 91% 3.56%, 98% 16%, 98% 96.44%, 98% 96.44%, 9% 96.44%, 2% 84%, 2% 3.56%); transform: scale(1.02); opacity: .9;}

/*******************************************
ARTIST
*******************************************/
#artist .container { max-width: 650px; margin: 0 auto 15px auto; display: flex; justify-content: space-evenly; align-items: center; }
#artist .container .container { position: relative; cursor: pointer; height: 400px; border: 5px solid #5489f6; background-color: #5489f6; border-radius: 10px; transition: all .2s ease; }
#artist .container .container h4 { position: absolute; top: 15px; left: 15px; margin: 0; font-size: 25px; }
#artist .container .container img { height: 100%; border-radius: 5px; clip-path: polygon(0 25%, 100% 5%, 100% 100%, 0 100%); }
#artist .container .container:hover { box-shadow: #e0009e 3px 3px 0; transform: scale(1.05); }
#artist .container .container .text { position: absolute; bottom: 5%; }
#artist .container .container .text h2, #artist .container .container .text h3, #artist .container .container h4 { -webkit-text-stroke: 5px #5489f6; paint-order: stroke fill; text-align: center; margin: 0; transition: all .2s ease; }
#artist .container .container .text h2 { font-size: 40px; letter-spacing: 4px; }
#artist .container .container .text h3 { font-size: 14px; letter-spacing: 1px; }
#artist .container .container:hover .text h2, #artist .container .container:hover .text h3, #artist .container .container:hover h4 { filter: drop-shadow(2px 2px 0 #e0009e); }
/* 英語版調整 */
#artist .container .container h4.en { text-align: left; font-size: 16px; }
#artist .container .container .text h2.en { font-size: 25px; letter-spacing: 0; }
/* スマホ調整 */
@media only screen and (max-width:725px) {
    #artist .container { max-width: 310px; flex-direction: column; }
}

/*******************************************
MUSIC LIST
*******************************************/
#musiclist ul { max-width: 650px; }
#musiclist ul.disc { list-style-type: none; display: block; width: 90%; margin: 35px auto 5px auto; z-index: 2; position: relative; }
#musiclist ul.disc li { display: flex; font-weight: 700; font-size: 20px; z-index: 2; position: relative; }
#musiclist ul.disc li .spacing { width: 28px; }
#musiclist ul.tracks { list-style-type: none; display: block; width: 90%; margin: 0 auto; z-index: 2; position: relative; padding: 0; }
#musiclist ul.tracks li { margin: 5px 0; padding: 5px 0 10px 0; display: flex; z-index: 2; position: relative; }
#musiclist ul.tracks li { border-bottom: 3px solid #5489f6; }
#musiclist ul.tracks li .number { width: 35px; }
#musiclist ul.tracks li span { opacity: .5; }
#musiclist p { text-align: center; font-size: 16px; }
#musiclist p.music-list-information { width: 90%; margin: 0 auto; }
/* スマホ調整 */
@media only screen and (max-width:725px) {
    #musiclist ul { max-width: 310px; }
}

/*******************************************
FOOTER
*******************************************/
#footer { position: relative; z-index: 2; margin-top: 115px; }
#footer a { display: block; cursor: pointer; transition: all .2s ease; }
#footer a:hover { transform: scale(1.05); }
#footer a img { max-height: 75px; margin: 75px auto 0 auto; display: block; }
#footer p { text-align: center; font-size: 10px; opacity: .5; margin: 150px 0 0 0; }
/* スマホ調整 */
@media only screen and (max-width:725px) {
    #footer a img { max-width: 310px; }
}