/******************
[共通] 
******************/
* { vertical-align: baseline; }
html, body { min-height: 100%; width: 100vw; margin: 0; padding: 0; overscroll-behavior-y: none; scroll-snap-type: y proximity; }
body { font-family: 'Open Sans', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: rgb(23,41,71);  }
a { text-decoration: none; cursor: pointer; }
p { margin: 0; }
section { display: none; position: fixed; top: 0; overflow: hidden; width: 100vw; height: 100vh; align-items: center; justify-content: center; opacity: 0; transform: scale(.7); filter: blur(5px); }



/******************
パソコンのみ
******************/
.scroll .background { position: fixed; width: 100vw; height: 100vh; background-image: url(./resources/bg.jpg); background-position: center; background-size: cover; }
.scroll .marker { position: relative; width: 100vw; height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; }

/******************
スマホのみ
******************/
.sp-scroll .sp-background { position: fixed; width: 100vw; height: 100vh; background-image: url(./resources/bg.jpg); background-position: center; background-size: cover; }
.sp-scroll .marker { position: relative; width: 100vw; height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; }

/**************************
パソコン版とスマホ版切り替え
**************************/
.sp-only{display:none;}
@media only screen and (max-width:1080px){ .pc-only{ display: none; } .sp-only{ display: block; } html, body { scroll-snap-type: y mandatory; } }

/***************************************************
****************************************************
****************************************************
パソコン版ＳＴＡＲＴ
****************************************************
****************************************************
***************************************************/

/******************
SCROLL INDICATOR
******************/
#scrollindicator { position: absolute; bottom: 10%; left: 50%; transform: translate(-50%,-50%); }
#scrollindicator span { display: block; width: 30px; height: 30px; border-bottom: 5px solid rgb(23,41,71); border-right: 5px solid rgb(23,41,71); transform: rotate(45deg); margin: -10px; animation: scollanimation 2s infinite; filter: drop-shadow(1px 1px 1px black); border-radius: 5px; }
#scrollindicator span:nth-child(2) { animation-delay: -0.2s; }
#scrollindicator span:nth-child(3) { animation-delay: -0.4s; }
@keyframes scollanimation { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } }


/******************
INTRO TEXT
******************/
section#introtext p { font-size: 3vw; text-align: center; filter: drop-shadow(1px 1px 1px rgb(175,188,209)); font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; }

/******************
INTRO LOGO
******************/
section#intrologo img { display: block; width: 500px; filter: drop-shadow(1px 1px 1px rgb(175,188,209)); }

/******************
キリテとは？
******************/
section#about .container { display: flex; }
section#about .container img { height: 500px; }
section#about .container img.jacket { margin-right: 25px; }
section#about .container .text h1 { height: 35px; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; color: rgb(23,41,71); filter: drop-shadow(1px 1px 1px rgb(175,188,209)); font-size: 30px; margin: 0 0 10px 0; }
section#about .container .text h1 span img { height: 35px; }
section#about .container .text p { width: 490px; padding-top: 15px; border-top: 2px solid rgb(167,39,31); }

/******************
CREATOR COMMENT
******************/
section.creator { transform: scale(1); height: 45vh; }
section.creator#creator-mitsuda { margin-top: 5vh; margin-left: -100px; }
section.creator#creator-kato { margin-top: 50vh; margin-left: 100px; }
section.creator .text { width: 490px; }
section.creator#creator-mitsuda .text { margin: 0 0 0 25px; }
section.creator#creator-kato .text { margin: 0 25px 0 0; }
section.creator .text h1 { font-family: "Noto Serif JP", serif; font-size: 35px; margin: 15px 0 15px 0; border-bottom: 2px solid rgb(167,39,31); }
section.creator .text h1 span { color: rgb(167,39,31); }
@media only screen and (max-height: 725px) {
    section.creator img { width: 150px; }
    section.creator .text { width: 725px; }
}

/******************
ROOT
******************/
section#root { transform: scale(1); }
section#root .container { width: 100%; }

section#root .container .container { display: flex; margin: 0 auto; width: 77%; justify-content: space-evenly; }
section#root .container .container a img { width: 400px; box-shadow: 1px 1px 3px black; }
section#root .container .container a .cover { z-index: 2; position: absolute; width: 0; height: 359px; background-color: rgb(23,41,71); display: flex; justify-content: center; align-items: center; color: rgb(213, 219, 238); font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; font-size: 40px; transition: all .3s; }
section#root .container .container a .cover p { opacity: 0; transition: all .3s; }
section#root .container .container a#album:hover #album-cover { width: 400px; }
section#root .container .container a#album:hover #album-cover p { opacity: 1; }
section#root .container .container a#book:hover #book-cover { width: 400px; }
section#root .container .container a#book:hover #book-cover p { opacity: 1; }
section#root .container .container a#album p#album-cover-text.disappear { opacity: 0; }
section#root .container .container a#book p#book-cover-text.disappear { opacity: 0; }

/******************
青い枝 - 共通
******************/
section#blue-branch { z-index: 20; width: 100vw; height: 100vh; background-color: rgb(23,41,71); color: rgb(245,245,245); }
/* ×ボタン */
section#blue-branch .container { position: relative; }
section#blue-branch .container a.close-button { position: absolute; top: 20px; right: 7px; width: 40px; height: 40px; z-index: 99; display: none; }
section#blue-branch .container a.close-button svg { transition: transform 0.2s; }
section#blue-branch .container a.close-button:hover { cursor: pointer; }
section#blue-branch .container a.close-button:hover svg { transform: scale(0.7); }
/* メニュー */
section#blue-branch #blue-branch-navigation h1 { text-align: center; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; color: white; filter: drop-shadow(1px 1px 1px rgb(23,41,71)); font-size: 50px; border-right: 1px solid rgba(23,41,71,.3); margin: 0 0 50px 0; }
section#blue-branch #blue-branch-navigation h1 span { display: none; }

/******************
枝 - 共通
******************/
section .branch { display: flex; margin: 0 auto; justify-content: space-evenly; }
section .branch .image, section .branch .text { max-height: 400px; max-width: 600px; }
section .branch .image img { height: 95%; width: auto; margin: 0 auto; display: block; filter: drop-shadow(1px 1px 1px black); transform: translateZ(0); }
section .branch .text { overflow-y: auto; mask-image: linear-gradient(to bottom, black 75%, transparent 100%) ; -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%); }
section .branch .text::-webkit-scrollbar { width: 10px; }
section .branch .text p { margin: 0 0 15px 0; }

/******************
枝 - 物語
******************/
section#blue-branch #branch-book { width: 600px; display: none; }
section#blue-branch #branch-book p.excerpt-header { text-align: center; margin-bottom: 35px; font-size: 25px; font-weight: 700; }

/******************
枝 - 音楽
******************/
section#blue-branch #branch-album { width: 600px; display: none; }
section#blue-branch #branch-album .text a { display: block; text-align: center; margin-bottom: 35px; font-size: 25px; font-weight: 700; transition: color .2s; }
section#blue-branch #branch-album .text a:hover { cursor: pointer; color: rgb(167,39,31); }
section#blue-branch #branch-album .text ul { width: 600px; }
section#blue-branch #branch-album .text ul.disc { list-style-type: none; display: block; margin: 35px auto 5px auto; z-index: 2; position: relative; }
section#blue-branch #branch-album .text ul.disc li { display: flex; font-weight: 700; font-size: 20px; z-index: 2; position: relative; }
section#blue-branch #branch-album .text ul.disc li .spacing { width: 28px; }
section#blue-branch #branch-album .text ul.tracks { list-style-type: none; display: block; margin: 0 auto; z-index: 2; position: relative; padding: 0; }
section#blue-branch #branch-album .text ul.tracks li { margin: 5px 0; padding: 5px 0 10px 0; display: flex; z-index: 2; position: relative; }
section#blue-branch #branch-album .text ul.tracks li { border-bottom: 1px solid white; }
section#blue-branch #branch-album .text ul.tracks li .number { width: 10%; text-align: right; margin-right: 10px; }
section#blue-branch #branch-album .text ul.tracks li .title { width: 90%; }
section#blue-branch #branch-album .text ul.tracks li span { opacity: .5; }
section#blue-branch #branch-album .text p { text-align: center; font-size: 16px; }
section#blue-branch #branch-album .text p.music-list-information { margin: 0 auto; }
/*
@media only screen and (max-width:725px) {
    section#blue-branch #branch-album ul { max-width: 310px; }
}
*/

section#blue-branch #branch-album .container { width: 100%; margin: 0 auto; }
section#blue-branch #branch-album .container .video-container:nth-child(1) { margin-bottom: 25px; }
section#blue-branch #branch-album .container .video-container { overflow: hidden; width: 100%; padding-top: 56.25%; position: relative; cursor: pointer; background-color: white; clip-path: inset(0px round 10px); }
section#blue-branch #branch-album .container .video-container img.playicon { width: 48px; height: 48px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 3; }
section#blue-branch #branch-album .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: inset(10px round 100px); }
section#blue-branch #branch-album .container .video-container:hover img.img { clip-path: inset(10px round 10px); transform: scale(1.02); opacity: .9;}
/* Video Modal START */
#video-screen { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(23,41,71); 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 { 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); }
/* Video Modal END */

/******************
OBTAIN
******************/
section#obtain { transform: scale(1); }

section#obtain .container img.sp-only { display: none; }

section#obtain .container  { margin-top: 65px; margin-bottom: 65px; text-align: center; }
section#obtain .container a { text-align: center; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; color: rgb(23,41,71); font-size: 50px; padding: 20px 15px 20px 20px; border-radius: 10px; box-shadow: 0px 0px 0px 4px rgba(23, 41, 71, 1); }
section#obtain .container a { transition: font-size .3s, padding .3s, box-shadow .2s; }
section#obtain .container a:hover { font-size: 55px; padding: 10px 10px 10px 15px; box-shadow: 0px 0px 0px 7px rgba(23, 41, 71, 1); }

section#obtain .container ul { margin: 50px auto; list-style-type: none; padding: 0; width: 250px; }
section#obtain .container ul li { display: flex; justify-content: space-between; margin: 3px 0; }
section#obtain .container ul li span:nth-child(1) { opacity: .7; }
section#obtain .container ul li span:nth-child(2) { opacity: .5; }

section#obtain .footer { position: absolute; bottom: 0; width: 100%; margin-top: 50px; }
section#obtain .footer .logos { text-align: center;}
section#obtain .footer .logos a { display: block; margin: 10px 0; }
section#obtain .footer .logos a img { height: 30px; transition: opacity .2s; }
section#obtain .footer .logos a:hover img { opacity: .7; }
section#obtain .footer p { text-align: center; font-size: 10px; margin: 0 0 10px 0; }

/***************************************************
****************************************************
****************************************************
スマホ版ＳＴＡＲＴ
****************************************************
****************************************************
***************************************************/

/******************
SCROLL INDICATOR
******************/
#sp-scrollindicator { position: absolute; top: 75vh; left: 50%; transform: translate(-50%,-50%); }
#sp-scrollindicator span { display: block; width: 30px; height: 30px; border-bottom: 5px solid rgb(23,41,71); border-right: 5px solid rgb(23,41,71); transform: rotate(45deg); margin: -10px; animation: scollanimation 2s infinite; filter: drop-shadow(1px 1px 1px black); border-radius: 5px; }
#sp-scrollindicator span:nth-child(2) { animation-delay: -0.2s; }
#sp-scrollindicator span:nth-child(3) { animation-delay: -0.4s; }
@keyframes scollanimation { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } }

/******************
INTRO TEXT
******************/
section#sp-introtext p { font-size: 5vw; text-align: center; filter: drop-shadow(1px 1px 1px rgb(175,188,209)); font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; }

/******************
INTRO LOGO
******************/
section#sp-intrologo img { display: block; margin: 0 auto; width: 90%; max-width: 500px; filter: drop-shadow(1px 1px 1px rgb(175,188,209)); }

/******************
キリテとは？
******************/
section#sp-about .container { display: flex; }
section#sp-about .container img { height: 500px; }
section#sp-about .container img.jacket { display: none; }
section#sp-about .container .text h1 { height: 35px; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; color: rgb(23,41,71); filter: drop-shadow(1px 1px 1px rgb(175,188,209)); font-size: 30px; margin: 0 0 10px 0; }
section#sp-about .container .text h1 span img { height: 35px; }
section#sp-about .container .text p { width: 90%; margin: 0 auto; max-width: 490px; padding-top: 15px; border-top: 2px solid rgb(167,39,31); } 

/******************
CREATOR COMMENT
******************/
section.sp-creator { transform: scale(1); align-items: center; justify-content: center; }
section.sp-creator#sp-creator-mitsuda { margin-left: 100px; }
section.sp-creator#sp-creator-kato { margin-left: -100px; }
section.sp-creator .container .container { display: flex; margin: 0 auto 15px auto; width: 90%; }
section.sp-creator#sp-creator-mitsuda .container { justify-content: left; }
section.sp-creator#sp-creator-kato .container { justify-content: right; }
section.sp-creator .container .container img { height: 250px; }
section.sp-creator .container .container h1 { font-family: "Noto Serif JP", serif; font-size: 35px; writing-mode: vertical-rl; text-orientation: upright; }
section.sp-creator#sp-creator-mitsuda .container .container h1 { border-left: 2px solid rgb(167,39,31); margin: 0 0 0 15px; }
section.sp-creator#sp-creator-kato .container .container h1 { border-right: 2px solid rgb(167,39,31); margin: 0 15px 0 0; }
section.sp-creator .container .container h1 span { color: rgb(167,39,31); }
section.sp-creator .text { width: 90%; margin: 0 auto; max-width: 490px; }

/******************
ROOT
******************/
section#sp-root { transform: scale(1); }
section#sp-root .container { width: 100%; }

section#sp-root .container .container { margin: 0 auto; width: 100%; }
section#sp-root .container .container a img { width: 340px; margin: 0 auto; display: block; box-shadow: 1px 1px 3px black; }
section#sp-root .container .container a#sp-album img { margin-bottom: 15px; }
section#sp-root .container .container a .cover { z-index: 2; position: absolute; left: calc(50% - 170px); transform: translateX(calc(-50%)); width: 0; height: 305px; background-color: rgb(23,41,71); display: flex; justify-content: center; align-items: center; color: rgb(213, 219, 238); font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; font-size: 40px; transition: all .3s; }
section#sp-root .container .container a .cover p { opacity: 0; transition: all .3s; }
/*
section#sp-root .container .container a#sp-album:hover #sp-album-cover { width: 340px; }
section#sp-root .container .container a#sp-album:hover #sp-album-cover p { opacity: 1; }
section#sp-root .container .container a#sp-book:hover #sp-book-cover { width: 340px; }
section#sp-root .container .container a#sp-book:hover #sp-book-cover p { opacity: 1; }
*/
section#sp-root .container .container a#sp-album p#sp-album-cover-text.disappear { opacity: 0; }
section#sp-root .container .container a#sp-book p#sp-book-cover-text.disappear { opacity: 0; }

/******************
青い枝 - 共通
******************/
section#sp-blue-branch { z-index: 20; width: 100vw; height: 100vh; background-color: rgb(23,41,71); color: rgb(245,245,245); }
/* ×ボタン */
section#sp-blue-branch .container { position: relative; width: 90%; max-width: 600px; }
section#sp-blue-branch .container a.close-button { position: absolute; top: 20px; right: 7px; width: 40px; height: 40px; z-index: 99; display: none; }
section#sp-blue-branch .container a.close-button svg { transition: transform 0.2s; }
section#sp-blue-branch .container a.close-button:hover { cursor: pointer; }
section#sp-blue-branch .container a.close-button:hover svg { transform: scale(0.7); }
/* メニュー */
section#sp-blue-branch #sp-blue-branch-navigation h1 { text-align: center; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; color: white; filter: drop-shadow(1px 1px 1px rgb(23,41,71)); font-size: 50px; border-right: 1px solid rgba(23,41,71,.3); margin: 0 0 50px 0; }
section#sp-blue-branch #sp-blue-branch-navigation h1 span { display: none; }

/******************
枝 - 共通
******************/
section .sp-branch { display: flex; margin: 0 auto; justify-content: space-evenly; }
section .sp-branch .image, section .sp-branch .text { max-height: 400px; max-width: 600px; }
section .sp-branch .image img { height: 95%; width: auto; margin: 0 auto; display: block; filter: drop-shadow(1px 1px 1px black); transform: translateZ(0); }
section .sp-branch .text { overflow-y: auto; mask-image: linear-gradient(to bottom, black 75%, transparent 100%) ; -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%); }
/* section .sp-branch .text::-webkit-scrollbar { width: 10px; } */
section .sp-branch .text p { margin: 0 0 15px 0; }

/******************
枝 - 物語
******************/
section#sp-blue-branch #sp-branch-book { width: 100%; display: none; }
section#sp-blue-branch #sp-branch-book p.excerpt-header { text-align: center; margin-bottom: 35px; font-size: 15px; font-weight: 700; }
section#sp-blue-branch #sp-branch-book p { font-size: 15px; }

/******************
枝 - 音楽
******************/
section#sp-blue-branch #sp-branch-album { width: 100%; display: none; }
section#sp-blue-branch #sp-branch-album .text a { display: block; text-align: center; margin-bottom: 35px; font-size: 25px; font-weight: 700; transition: color .2s; }
section#sp-blue-branch #sp-branch-album .text a:hover { cursor: pointer; color: rgb(167,39,31); }
section#sp-blue-branch #sp-branch-album .text ul { width: 100%; margin: 0 auto;}
section#sp-blue-branch #sp-branch-album .text ul.disc { list-style-type: none; display: block; margin: 35px auto 5px auto; z-index: 2; position: relative; }
section#sp-blue-branch #sp-branch-album .text ul.disc li { display: flex; font-weight: 700; font-size: 20px; z-index: 2; position: relative; }
section#sp-blue-branch #sp-branch-album .text ul.disc li .spacing { width: 28px; }
section#sp-blue-branch #sp-branch-album .text ul.tracks { list-style-type: none; display: block; margin: 0 auto; z-index: 2; position: relative; padding: 0; }
section#sp-blue-branch #sp-branch-album .text ul.tracks li { margin: 5px 0; padding: 5px 0 10px 0; display: flex; z-index: 2; position: relative; }
section#sp-blue-branch #sp-branch-album .text ul.tracks li { border-bottom: 1px solid white; }
section#sp-blue-branch #sp-branch-album .text ul.tracks li .number { width: 10%; text-align: right; margin-right: 10px; }
section#sp-blue-branch #sp-branch-album .text ul.tracks li .title { width: 90%; }
section#sp-blue-branch #sp-branch-album .text ul.tracks li span { opacity: .5; }
section#sp-blue-branch #sp-branch-album .text p { text-align: center; font-size: 16px; }
section#sp-blue-branch #sp-branch-album .text p.music-list-information { margin: 0 auto; }

section#sp-blue-branch #sp-branch-album .container { width: 100%; margin: 0 auto; }
section#sp-blue-branch #sp-branch-album .container .video-container:nth-child(1) { margin-bottom: 25px; }
section#sp-blue-branch #sp-branch-album .container .video-container { overflow: hidden; width: 100%; padding-top: 56.25%; position: relative; cursor: pointer; background-color: white; clip-path: inset(0px round 10px); }
section#sp-blue-branch #sp-branch-album .container .video-container img.playicon { width: 48px; height: 48px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 3; }
section#sp-blue-branch #sp-branch-album .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: inset(10px round 100px); }
section#sp-blue-branch #sp-branch-album .container .video-container:hover img.img { clip-path: inset(10px round 10px); transform: scale(1.02); opacity: .9;}

/* Video Modal START */
#sp-ideo-screen { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(23,41,71); cursor: pointer; }
#sp-video-screen.active { display: table; }
#sp-video-screen .video-box { display: table-cell; vertical-align: middle; }
#sp-video-screen .video-box .video-holder { position: relative; padding-bottom: calc(56.25% * 0.90); width: 90%; height: 0; margin: 0 auto; }
#sp-video-screen .video-box .video-holder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#sp-video-screen .video-box .video-holder iframe.active { display: block; }
#sp-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; }
#sp-video-screen .video-box .video-holder .close-video-screen-button:before, #sp-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; }
#sp-video-screen .video-box .video-holder .close-video-screen-button:before { transform: rotate(45deg); }
#sp-video-screen .video-box .video-holder .close-video-screen-button:after { transform: rotate(-45deg); }
/* Video Modal END */

/******************
OBTAIN
******************/
section#sp-obtain { transform: scale(1); }
section#sp-obtain .container  { margin-top: 65px; margin-bottom: 65px; text-align: center; }

section#sp-obtain .container img.sp-only { width: 250px; margin: 0 auto 45px auto; filter: drop-shadow(1px 1px 1px black); }

section#sp-obtain .container a { text-align: center; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; color: rgb(23,41,71); font-size: 30px; padding: 20px 15px 20px 20px; border-radius: 10px; box-shadow: 0px 0px 0px 4px rgba(23, 41, 71, 1); }
section#sp-obtain .container a { transition: font-size .3s, padding .3s, box-shadow .2s; }
section#sp-obtain .container a:hover { font-size: 35px; padding: 10px 10px 10px 15px; box-shadow: 0px 0px 0px 7px rgba(23, 41, 71, 1); }

section#sp-obtain .container ul { margin: 40px auto 75px auto; list-style-type: none; padding: 0; width: 160px; font-size: 10px; }
section#sp-obtain .container ul li { display: flex; justify-content: space-between; }
section#sp-obtain .container ul li span:nth-child(1) { opacity: .7; }
section#sp-obtain .container ul li span:nth-child(2) { opacity: .5; }

section#sp-obtain .footer { position: absolute; bottom: 0; width: 100%; margin-top: 50px; }
section#sp-obtain .footer .logos { text-align: center;}
section#sp-obtain .footer .logos a { display: block; margin: 10px 0; }
section#sp-obtain .footer .logos a img { height: 30px; transition: opacity .2s; }
section#sp-obtain .footer .logos a:hover img { opacity: .7; }
section#sp-obtain .footer p { text-align: center; font-size: 10px; margin: 0 0 10px 0; }