/******************
[共通] 
******************/
* { vertical-align: baseline; }
html {  }
html, body { min-height: 100%; width: 100vw; margin: 0; padding: 0; }
body { background-color: rgba(255,249,238,1); color: rgba(74,57,46,1); font-family: 'Open Sans', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
.overflow-settings { overflow-y: scroll; overflow-x: hidden; position: relative; }
a { text-decoration: none; }
p { margin: 0; }
table th { font-weight: 300; }
table td { font-weight: 400; }
/* .showpc { display: block; } */
/* .showsp { display: none; } */
.fade-in { opacity: 0; transition: all .5s ease-in; transform: translateY(25px); }
.fade-in.appear { opacity: 1; transform: translateY(0); }
.nowrap { white-space: nowrap; }

/******************
[LOADING SCREEN] 
******************/
#loading-screen { position: fixed; top: 0; width: 100%; height: 100vh; background-color: rgba(255,249,238,1); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 1; max-height: 2000px; transition: opacity .5s ease .5s, height .1s linear 2s; }
#loading-screen img { width: 150px; opacity: 1; margin: 0; transition: opacity .5s ease, margin .1s linear 2s; }

/******************
[VIDEO SCREEN] 
******************/
#video-screen { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,249,238,.9); 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: 1px solid rgba(74,57,46,1); 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: 1px; width: 10px; top: 50%; left: 50%; margin: -0 0 0 -5px; background-color: rgba(74,57,46,1); 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); }

/******************
[LANGUAGE CHANGE] 
******************/
.language-change { overflow: hidden; display: block; position: absolute; width: 200px; height: 200px; top: -100px; right: -100px; background-color: rgba(74,57,46,1); transform: rotate(45deg); transition: opacity .2s ease; z-index: 997; }
.language-change:hover { opacity: .7; }
.language-change p { position: absolute; color: rgba(255,249,238,1); transform: rotate(-45deg); font-weight: 700; font-size: 16px; }
.language-change p.to-english-page { bottom: 15%; left: 32%; }
.language-change p.to-japanese-page { bottom: 16%; left: 37%; }
@media only screen and (min-width: 1000px) {
    .language-change { width: 300px; height: 300px; top: -150px; right: -150px; }
    .language-change p { font-size: 20px; }
    .language-change p.to-english-page { bottom: 15%; left: 36%; }
    .language-change p.to-japanese-page { bottom: 16%; left: 40%; }
}

/******************
[HEADER] 
******************/
#header { top: -140px; position: fixed; background-color: rgba(255,249,238,1); width: 100%; height: 140px; z-index: 998; transition: top .5s ease; }
/* [HEADER] OST TITLES */
#header .ost-titles { height: 70px; width: 100%; }
#header .ost-titles p {  margin: 6px 0; position: absolute; width: 100%; text-align: center; font-weight: 900; font-size: 20px; opacity: 0; transition: opacity .2s linear;}
#header .ost-titles p.active { opacity: 1; }
#header .ost-titles p#one-title { color: rgba(246,187,123,1); }
#header .ost-titles p#two-title { color: rgba(169,214,220,1); }
#header .ost-titles p#three-title { color: rgba(150,190,63,1); }
#header .ost-titles p#four-title { color: rgba(80,125,150,1); }
#header .ost-titles p#five-title { color: rgba(35,78,175,1); }
/* Adjustments for English Page */
.en #header .ost-titles p#four-title span { font-size: 13px; }
@media only screen and (min-width: 600px) {
    .en #header .ost-titles p#four-title span { font-size: 20px; }
}
/* [HEADER] OST BUTTONS */
#header .ost-buttons { height: 70px; width: 100%; text-align: center; }
#header .ost-buttons a { margin: 0 5px 10px 5px; height: 50px; width: 50px; display: inline-block; background-size: contain; border: 5px solid rgba(255,249,238,1); transition: border-color .2s linear; }
#header .ost-buttons a#one-button:hover, #header .ost-buttons a#one-button.active { border-color: rgba(246,187,123,1); }
#header .ost-buttons a#two-button:hover, #header .ost-buttons a#two-button.active { border-color: rgba(169,214,220,1); }
#header .ost-buttons a#three-button:hover, #header .ost-buttons a#three-button.active { border-color: rgba(150,190,63,1); }
#header .ost-buttons a#four-button:hover, #header .ost-buttons a#four-button.active { border-color: rgba(80,125,150,1); }
#header .ost-buttons a#five-button:hover, #header .ost-buttons a#five-button.active { border-color: rgba(35,78,175,1); }
#header .ost-buttons a#one-button {background-image: url(./resources/jacket-one.jpg);}
#header .ost-buttons a#two-button {background-image: url(./resources/jacket-two.jpg);}
#header .ost-buttons a#three-button {background-image: url(./resources/jacket-three.jpg);}
#header .ost-buttons a#four-button {background-image: url(./resources/jacket-four.jpg);}
#header .ost-buttons a#five-button {background-image: url(./resources/jacket-five.jpg);}

/******************
[CATCH COPY]
******************/
.catchcopy { height: 100vh; width: 90%; max-width: 700px; position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto 70px auto; color: rgba(74,57,46,1); }
.catchcopy h2 { font-size: 22px; letter-spacing: 1px; line-height: 40px; text-align: center; padding: 35px 0 10px 0; margin: 0; }
.catchcopy .scrollindicator { position: absolute; bottom: 10%; left: 50%; transform: translate(-50%,-50%); }
.catchcopy .scrollindicator span { display: block; width: 30px; height: 30px; border-bottom: 3px solid rgba(74,57,46,1); border-right: 3px solid rgba(74,57,46,1); transform: rotate(45deg); margin: -10px; animation: animate 2s infinite; }
.catchcopy .scrollindicator span:nth-child(2) { animation-delay: -0.2s; }
.catchcopy .scrollindicator span:nth-child(3) { animation-delay: -0.4s; }
@keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } }
/* Adjustments for English Page */
.en .catchcopy h2 { font-size: 17px; letter-spacing: 1px; line-height: 30px; }
@media only screen and (min-width: 600px) {
    .catchcopy h2 { font-size: 25px; letter-spacing: 2px; line-height: 45px; }
    .en .catchcopy h2 { font-size: 25px; letter-spacing: 1px; line-height: 45px; }
}

/******************
[HISTORY]
******************/
.history { width: 90%; max-width: 700px; display: block; margin: 0 auto 70px auto; color: rgba(74,57,46,1); }
.history h2 { font-size: 20px; text-align: center; padding: 35px 0 10px 0; margin: 0; }
.history .sakuhin { display: flex; justify-content: space-evenly; margin: 25px 0 0 0; cursor: pointer; }
.history .sakuhin .image { width: 45%; max-width: 300px; }
.history .sakuhin .image img { width: 100%; }
.history .sakuhin .broadcastyear { width: 45%; max-width: 300px; font-size: 20px; display: flex; justify-content: center; align-items: center; text-align: center; }
.history .sakuhin .broadcastyear span.year { font-weight: 900; font-size: 31px; }
@media only screen and (max-width: 600px) {
    .en .history .sakuhin .broadcastyear { font-size: 18px; }
}

/******************
[SEPARATOR]
******************/
.separator { width: 100%; height: 15px; background-color: rgba(255,249,238,1); }

/******************
[SOUNDTRACKS] 
******************/
/* [SOUNDTRACKS] (背景の色) */
/* [SOUNDTRACKS] (背景の色) one */
section#one .jacket-title-link-description, section#one .musiclist { background-image: linear-gradient(to bottom right, rgb(246,187,123), rgb(241, 173, 100)); }
section#one .information-video { background-image: linear-gradient(to bottom right, rgba(253,242,156,1), rgb(251, 238, 141)); }
/* [SOUNDTRACKS] (背景の色) two */
section#two .jacket-title-link-description, section#two .musiclist { background-image: linear-gradient(to bottom right, rgba(169,214,220,1),rgb(155, 212, 219)); }
section#two .information-video { background-image: linear-gradient(to bottom right, rgba(241,190,184,1), rgb(238, 177, 170)); }
/* [SOUNDTRACKS] (背景の色) three */
section#three .jacket-title-link-description, section#three .musiclist { background-image: linear-gradient(to bottom right, rgba(150,190,63,1), rgb(149, 184, 74)); }
section#three .information-video { background-image: linear-gradient(to bottom right, rgba(246,145,48,1), rgb(245, 146, 53)); }
/* [SOUNDTRACKS] (背景の色) four */
section#four .jacket-title-link-description, section#four .musiclist { background-image: linear-gradient(to bottom right, rgba(80,125,150,1), rgb(71, 121, 148)); }
section#four .information-video { background-image: linear-gradient(to bottom right, rgba(10,11,24,1), rgb(9, 10, 24)); }
/* [SOUNDTRACKS] (背景の色) five */
section#five .jacket-title-link-description, section#five .musiclist { background-image: linear-gradient(to bottom right, rgba(35,78,175,1), rgb(26, 71, 175)); }
section#five .information-video { background-image: linear-gradient(to bottom right, rgba(252,235,187,1), rgb(251, 229, 170)); }
/* [SOUNDTRACKS] ジャケ写 */
section .jacket-title-link-description { padding-top: 70px;}
section .jacket-title-link-description img { display: block; margin: 0 auto; width: 90%; max-width: 600px; box-shadow: 2px 2px 5px black; }
/* [SOUNDTRACKS] タイトル */
section .jacket-title-link-description .ost-title { margin: 35px auto 25px auto; max-width: 450px; }
section .jacket-title-link-description h1 { font-weight: 900; text-align: center; margin: 0 auto; }
section .jacket-title-link-description h1.ost { opacity: .5; }
/* [SOUNDTRACKS] タイトル (サイズ) one */
section#one .jacket-title-link-description h1.title { font-size: 20px; line-height: 30px; }
section#one .jacket-title-link-description h1.ost { font-size: 20px; letter-spacing: 4px; }
@media only screen and (min-width: 600px) {
    section#one .jacket-title-link-description h1.title { font-size: 25px; line-height: 35px; }
    section#one .jacket-title-link-description h1.ost { font-size: 25px; letter-spacing: 5px; }
}
/* Adjustments for English Page */
.en section#one .jacket-title-link-description h1.ost { letter-spacing: 0; }
@media only screen and (min-width: 600px) {
    .en section#one .jacket-title-link-description h1.ost { letter-spacing: 0; }
}
/* [SOUNDTRACKS] タイトル (サイズ) two */
section#two .jacket-title-link-description h1.title { font-size: 60px; line-height: 70px; }
section#two .jacket-title-link-description h1.ost { font-size: 16px; }
/* Adjustments for English Page */
.en section#two .jacket-title-link-description h1.title { font-size: 40px; line-height: 50px; }
.en section#two .jacket-title-link-description h1.ost { font-size: 20px; }
/* [SOUNDTRACKS] タイトル (サイズ) three */
section#three .jacket-title-link-description h1.title { font-size: 33px; line-height: 43px; }
section#three .jacket-title-link-description h1.ost { font-size: 24px; }
@media only screen and (min-width: 600px) {
    section#three .jacket-title-link-description h1.title { font-size: 39px; line-height: 49px; }
    section#three .jacket-title-link-description h1.ost { font-size: 29px; }
}
/* Adjustments for English Page */
.en section#three .jacket-title-link-description h1.title { font-size: 33px; line-height: 43px; }
.en section#three .jacket-title-link-description h1.ost { font-size: 20px; }
/* [SOUNDTRACKS] タイトル (サイズ) four */
section#four .jacket-title-link-description h1.title { font-size: 23px; line-height: 33px; }
section#four .jacket-title-link-description h1.ost { font-size: 22px; letter-spacing: 2px; }
@media only screen and (min-width: 600px) {
    section#four .jacket-title-link-description h1.title { font-size: 27px; line-height: 37px; }
    section#four .jacket-title-link-description h1.ost { font-size: 27px; }
}
/* Adjustments for English Page */
.en section#four .jacket-title-link-description h1.title { font-size: 22px; line-height: 32px; }
.en section#four .jacket-title-link-description h1.ost { font-size: 20px; letter-spacing: 0; }
/* [SOUNDTRACKS] タイトル (サイズ) 砂漠の歌 */
section#five .jacket-title-link-description h1.title { font-size: 56px; line-height: 66px; }
section#five .jacket-title-link-description h1.ost { font-size: 23px; }
@media only screen and (min-width: 600px) {
    section#five .jacket-title-link-description h1.title { font-size: 60px; line-height: 70px; }
    section#five .jacket-title-link-description h1.ost { font-size: 25px; }
}
/* Adjustments for English Page */
.en section#five .jacket-title-link-description h1.title { font-size: 30px; line-height: 40px; }
.en section#five .jacket-title-link-description h1.ost { font-size: 20px; }
/* [SOUNDTRACKS] タイトル (色) */
section#one .jacket-title-link-description h1 { color: rgba(74,57,46,1); }
section#two .jacket-title-link-description h1 { color: black; }
section#three .jacket-title-link-description h1 { color: white; }
section#four .jacket-title-link-description h1 { color: rgba(253,247,222,1); }
section#five .jacket-title-link-description h1 { color: rgba(252,235,187,1); }
/* [SOUNDTRACKS] リンク */
section .jacket-title-link-description .link { display: flex; flex-wrap: wrap; justify-content: center; }
section .jacket-title-link-description .link .h-button { display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; width: 250px; height: 45px; font-size: 25px; font-weight: 700; margin: 10px; }
section .jacket-title-link-description .link .h-button .text { position: relative; color: transparent; background-repeat: repeat; background-size: 200%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; transition: background-position 300ms; }
section .jacket-title-link-description .link .h-button::before { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; transform: scale3d(1,1,1); transition: transform 300ms; }
/* [SOUNDTRACKS] リンク (色) one */
section#one .jacket-title-link-description .link .h-button { border: 5px solid rgba(253,242,156,1); }
section#one .jacket-title-link-description .link .h-button .text { background-image: linear-gradient(90deg,rgba(74,57,46,1) 0%, rgba(74,57,46,1) 50%, rgba(253,242,156,1) 50%, rgba(253,242,156,1) 100%);}
section#one .jacket-title-link-description .link .h-button::before { background: rgba(253,242,156,1); }
/* [SOUNDTRACKS] リンク (色) two */
section#two .jacket-title-link-description .link .h-button { border: 5px solid rgba(241,190,184,1); }
section#two .jacket-title-link-description .link .h-button .text { background-image: linear-gradient(90deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(241,190,184,1) 50%, rgba(241,190,184,1) 100%); }
section#two .jacket-title-link-description .link .h-button::before { background: rgba(241,190,184,1); }
/* [SOUNDTRACKS] リンク (色) three */
section#three .jacket-title-link-description .link .h-button { border: 5px solid rgba(246,145,48,1); }
section#three .jacket-title-link-description .link .h-button .text { background-image: linear-gradient(90deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,145,48,1) 50%, rgba(246,145,48,1) 100%); }
section#three .jacket-title-link-description .link .h-button::before { background: rgba(246,145,48,1); }
/* [SOUNDTRACKS] リンク (色) four */
section#four .jacket-title-link-description .link .h-button { border: 5px solid rgba(10,11,24,1); }
section#four .jacket-title-link-description .link .h-button .text { background-image: linear-gradient(90deg,rgba(210,239,249,1) 0%, rgba(210,239,249,1) 50%, rgba(10,11,24,1) 50%, rgba(10,11,24,1) 100%); }
section#four .jacket-title-link-description .link .h-button::before { background: rgba(10,11,24,1); }
/* [SOUNDTRACKS] リンク (色) five */
section#five .jacket-title-link-description .link .h-button { border: 5px solid rgba(252,235,187,1); }
section#five .jacket-title-link-description .link .h-button .text { background-image: linear-gradient(90deg,rgba(35,78,175,1) 0%, rgba(35,78,175,1) 50%, rgba(252,235,187,1) 50%, rgba(252,235,187,1) 100%); }
section#five .jacket-title-link-description .link .h-button::before { background: rgba(252,235,187,1); }
/* [SOUNDTRACKS] リンク (情報) */
section .jacket-title-link-description .link .h-button:hover > .text { background-position: 100% 0; }
section .jacket-title-link-description .link .h-button:hover::before { transform-origin: 100% 0; transform: scale3d(0,1,1); }
section .jacket-title-link-description p.link-information { text-align: center; font-size: small; opacity: .9; margin: 10px auto 35px auto; }
section#one .jacket-title-link-description p.link-information { color: rgba(74,57,46,1); }
section#two .jacket-title-link-description p.link-information { color: black; }
section#three .jacket-title-link-description p.link-information { color: white; }
section#four .jacket-title-link-description p.link-information { color: rgba(253,247,222,1); }
section#five .jacket-title-link-description p.link-information { color: rgba(252,235,187,1); }
/* [SOUNDTRACKS] 商品説明 */
section .jacket-title-link-description p.product-description { display: block; margin: 0 auto; padding: 0 0 70px 0; width: 80%; max-width: 600px; font-size: 16px; }
section#one .jacket-title-link-description p.product-description { color: rgba(74,57,46,1); }
section#two .jacket-title-link-description p.product-description { color: black; }
section#three .jacket-title-link-description p.product-description { color: white; }
section#four .jacket-title-link-description p.product-description { color: rgba(253,247,222,1); }
section#five .jacket-title-link-description p.product-description { color: rgba(252,235,187,1); }
/* [SOUNDTRACKS] 商品情報、宣伝動画 */
section .information-video { padding: 70px 0; }
/* [SOUNDTRACKS] 商品情報 */
section .information-video table { width: 90%; max-width: 600px; margin: 0 auto; border-collapse: collapse; }
section#one .information-video table { color: rgba(74,57,46,1); }
section#two .information-video table { color: rgba(0,0,0,1); }
section#three .information-video table { color: rgba(255,255,255,1); }
section#four .information-video table { color: rgba(210,239,249,1); }
section#five .information-video table { color: rgba(35,78,175,1); }
section .information-video table tr th { text-align: left; width: 120px; padding: 15px 0 0 0; font-size: 16px; }
section .information-video table tr td { font-size: 16px; }
section .information-video table tr.bottom-break td, section .information-video table tr.bottom-break th { padding: 15px 0; }
section .information-video table tr.bottom-break.single th { padding: 15px 0; }
section .information-video table tr th.small-text { font-size: 14px; }
section .information-video table tr td.small-text { font-size: 14px; }
section#one .information-video table tr.bottom-break { border-bottom: 1px solid rgba(74,57,46, 0.5); }
section#two .information-video table tr.bottom-break { border-bottom: 1px solid rgba(0, 0, 0, 0.5); }
section#three .information-video table tr.bottom-break { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
section#four .information-video table tr.bottom-break { border-bottom: 1px solid rgba(210,239,249, 0.5); }
section#five .information-video table tr.bottom-break { border-bottom: 1px solid rgba(35,78,175, 0.5); }
section .information-video table tr a { text-decoration: underline; }
section .information-video table tr a:hover { text-decoration: none; }
section#one .information-video table tr a { color: rgba(74,57,46,1); }
/*
section#two .information-video table tr a { color: ; }
section#three .information-video table tr a { color: ; }
section#four .information-video table tr a { color: ; }
section#five .information-video table tr a { color: ; }
*/
/* [SOUNDTRACKS] 宣伝動画 */
/* new VIDEO */
section .information-video .video { width: 90%; max-width: 600px; margin: 0 auto 55px auto; }
section .information-video .video .video-container { overflow: hidden; width: 100%; padding-top: 56.25%; position: relative; cursor: pointer; }
section .information-video .video .video-container img.playicon { width: 48px; height: 48px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 3; }
section .information-video .video .video-container img.img { position: absolute; top: 0; right: 0; transform: scale(1.01); width: calc(100% + 1px); transition-duration: 0.2s; z-index: 1; pointer-events: auto; object-fit: cover; height: 100%; }
section .information-video .video .video-container img.img:hover { transform: scale(1.05) rotate(0.1deg); opacity: .8; }
/* [SOUNDTRACKS] MUSIC LIST */
section .musiclist { padding: 60px 0; }
section#one .musiclist { color: rgba(74,57,46,1); }
section#two .musiclist { color: black; }
section#three .musiclist { color: white; }
section#four .musiclist { color: rgba(253,247,222,1); }
section#five .musiclist { color: rgba(252,235,187,1); }
section .musiclist ul { max-width: 600px; }
section .musiclist ul.tracks { list-style-type: none; display: block; width: 90%; margin: 0 auto; position: relative; padding: 0; }
section .musiclist ul.tracks li { margin: 5px 0; padding: 5px 0; display: flex; position: relative; }
section#one .musiclist ul.tracks li { border-bottom: 1px solid rgba(74,57,46, 0.5); }
section#two .musiclist ul.tracks li { border-bottom: 1px solid black; }
section#three .musiclist ul.tracks li { border-bottom: 1px solid white; }
section#four .musiclist ul.tracks li { border-bottom: 1px solid rgba(253,247,222,1); }
section#five .musiclist ul.tracks li { border-bottom: 1px solid rgba(252,235,187,1); }
section .musiclist ul.tracks li .number { width: 35px; }
section .musiclist ul.tracks li span { opacity: .5; }

/******************
[FOOTER] 
******************/
.footer { margin: 70px 0 0 0; }
.footer .footer-link { display: block; width: 90%; max-width: 300px; height: 150px; margin: 0 auto 25px auto; background-color: rgba(74,57,46,1); transition: background-color .2s ease-in; border-radius: 10px; }
.footer .footer-link:hover { background-color: rgb(53, 22, 1); }
.footer .footer-link a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.footer .footer-link a img { width: 85%; }
.footer .copyright p { text-align: center; padding: 20px; font-size: 12px; font-weight: 300; }