@charset "UTF-8";
@import "destyle.css";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap');


/* format v1.1 */

/* ----------------------------------------
	Common
---------------------------------------- */
html { font-size:17px; font-weight:300; }
html { overflow-y:scroll; } /* スクロールバーを常に表示させる。基本的にはfancybox向けの対策。 */
body { font-family:'Noto Sans JP','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif; }
div#body > section#header div.header-title-area h1 { font-family:'M PLUS 1p','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif; font-weight:700; }
body { color:#CCC; }
div#body div#search-dialog,
div#body div#side-menu          { z-index:300; }
div#body > a#goto-top           { z-index:250; }
div#body header#site-header     { z-index:200; }
div#body > section#main section.movies div.movie figure { z-index:150; }
div#body section#header,
div#body section#main h2,
div#body section#main section,
div#body footer { z-index:100; position:relative; }
/* div#body figure { z-index:150; position:relative; } */

span.pc { display:inline !important; }
span.smartphone { display:none !important; }

.magenta { color:#E4007F; }
.justify { text-align:justify; }
.center { text-align:center; }
.left { text-align:left; }
.right { text-align:right; }
.hidden { display:none; }
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; line-height:1; overflow:hidden; }
.grecaptcha-badge { visibility: hidden; }

img { max-width:100%; height:auto; }

div#body { /* padding-top:60px; */ background-color:#000; } /* グローバルヘッダーぶんの高さを追加 */
body.finished div#body { background-color:#01325F; }
div#body section { position:relative; }
div#body div.container { max-width:1310px; margin:0 auto; text-align:center; }
div#body div.row { display:flex; justify-content:center; flex-wrap:wrap; margin:0px auto; }
div#body div.row > * { margin:25px 25px; }
span.under-1024 { display:none; }
span.upper-1024 { display:inline; }


/* ----------------------------------------
	Goto Top
---------------------------------------- */
div#body > a#goto-top { right:20px; bottom:20px; display:block; position:fixed; color:#000; opacity:0.8; width:40px; height:40px;  }
div#body > a#goto-top div { width:100%; height:100%; text-align:center; font-size:25px; transform:rotate(90deg); }
div#body > a#goto-top div:before { position:absolute; top:7px; left:8px; }
div#body > a#goto-top:hover { text-decoration:none; opacity:1.0; }


/* ----------------------------------------
	Sitewide Message
---------------------------------------- */
div#sitewide-message { width:100%; height:50px; background-color:#000; color:#FFF; }
div#sitewide-message p { text-align:center; line-height:50px; }


/* ----------------------------------------
	Site Header
---------------------------------------- */
div#body header#site-header div.container { padding:0 25px; }
div#body header#site-header { position:fixed; top:0; width:100%; transition:.3s; }
div#body header#site-header div.navigation-bar { /* position:fixed; */ width:100%; height:60px; }
div#body header#site-header div.navigation-bar div.container { display:flex; justify-content:space-between; } /* space-betweenで小要素を左右の端に配置する。 */
div#body header#site-header div.navigation-bar div.module-left a { display:inline-block; line-height:60px; }
div#body header#site-header div.navigation-bar div.module-left img { vertical-align:middle; margin-top:-4px; }
div#body header#site-header div.navigation-bar div.module-right { text-align:right; }
div#body header#site-header div.navigation-bar div.module-right div.sign div.header,
div#body header#site-header div.navigation-bar div.module-right div.sign div.value,
div#body header#site-header div.navigation-bar div.module-right div.username { display:inline-block; height:30px; line-height:29px; margin:15px 0; padding:0 10px; font-size:0.70rem; letter-spacing:1px; color:#FFF; }
div#body header#site-header div.navigation-bar div.module-right div.sign div.header { background-color:#F98200; border-radius:5px 0 0 5px; } 
div#body header#site-header div.navigation-bar div.module-right div.sign div.value { background-color:#002342; border-radius: 0 5px 5px 0; }
div#body header#site-header div.navigation-bar div.module-right div.username { background-color:#002342; border-radius:5px; }

div#body header#site-header div.navigation-bar div.module-right div.sign.transparent { diplay:none; opacity:0; transition:.3s; }
div#body header#site-header div.navigation-bar div.module-right div.username.transparent { opacity:0; transition:.3s; }
div#body header#site-header div.navigation-bar div.module-right div.username.none { display:none; }
div#body header#site-header div.navigation-bar div.module-right div.sign.visible { display:inline-block; opacity:1; transition:.3s; }

div#body header#site-header.black div.navigation-bar { background-color:rgba(0,0,0,0.7); border-bottom:solid 1px #555; }
div#body header#site-header.black div.navigation-bar div.module-left img.logo-white { display:inline; }
div#body header#site-header.black div.navigation-bar div.module-left img.logo-black { display:none; }

div#body header#site-header.transparent div.navigation-bar { background-color:transparent; border-bottom-width:0; }
div#body header#site-header.transparent div.navigation-bar div.module-left img.logo-white { display:inline; }
div#body header#site-header.transparent div.navigation-bar div.module-left img.logo-black { display:none; }

div#body header#site-header.hide { transform:translateY(-100%); }


/* ----------------------------------------
	Header
---------------------------------------- */
div#body > section#header { background-color:#01325F; color:#FFF; padding-top:120px; padding-bottom:10px; }
div#body > section#header:after { position:absolute; content:""; width:100%; height:220px; bottom:-220px; background-color:#01325F; }
div#body > section#header div.header-title-area { position:relative; }
div#body > section#header div.header-title-area div.decoration { margin-bottom:10px; }
div#body > section#header div.header-title-area h1 { position:relative; margin-bottom:65px; text-align:center; font-size:3.11rem; line-height:1.2em; letter-spacing:0.05em; }
div#body > section#header div.header-title-area h1:after { content:""; position:absolute; bottom:0px; left:50%; margin-left:-25px; margin-bottom:-35px; width:50px; height:3px; background-color:#FFF; }
div#body > section#header div.message { margin:0 auto; padding:0 25px; max-width:700px; line-height:2.0; text-align:justify; }
div#body > section#header div.sign { disdplay:block; margin-top:50px; }
div#body > section#header div.sign div.header,
div#body > section#header div.sign div.value,
div#body > section#header div.sign div.canvas { display:inline-block; height:60px; line-height:57px; font-size:0.88rem; letter-spacing:1px; color:#FFF; }
div#body > section#header div.sign div.header { width:100px; background-color:#F98200; border-radius:8px 0 0 8px; }
div#body > section#header div.sign div.value { width:160px; background-color:#002342; border-radius: 0 8px 8px 0; }
div#body > section#header div.sign div.canvas { width:210px; background-color:#F98200; border-radius:8px; font-size:1.2rem; font-weight:700; letter-spacing:4px; }
div#body > section#header a { font-weight:700; color:#F98200; }
div#body > section#header a:hover { text-decoration:underline; }


/* ----------------------------------------
	Main
---------------------------------------- */
div#body > section#main { padding:40px 0; }

div#body > section#main h2 { margin:75px 25px 25px 25px; position:relative; text-align:left; font-size:2.0rem; font-weight:700; color:#FFF; line-height:1.5; letter-spacing:0.1em; }
div#body > section#main h2:before { z-index:110; position:absolute; content:""; top:50%; left:0; width:100%; height:3px; background-color:#FFF; }
div#body > section#main h2 span { z-index:150; position:relative; padding-right:10px; background-color:#000; }
div#body > section#main h2:first-child { margin-top:25px; }
div#body > section#main h2:first-child span { background-color:#01325F; } /* first-of-type */
div#body > section#main h3 { margin-bottom:20px; text-align:justify; font-size:1.5rem; font-weight:700; line-height:1.5; color:#FFF; }

div#body > section#main section.movies div.movie { max-width:605px; background-color:#202020; }
div#body > section#main section.movies div.movie figure { position:relative; }
div#body > section#main section.movies div.movie figure.eval a { position:relative; display:block; width:100%; height:100%; cursor:default; }
div#body > section#main section.movies div.movie figure.eval a:before { content:""; display:block; position:absolute; width:100%; height:100%; top:0; background-color:#000; opacity:0; transition:.3s; }
div#body > section#main section.movies div.movie figure.eval a:after { content:"正規版でご覧ください"; display:block; position:absolute; width:100%; top:50%; margin-top:-12px; left:0; color:#FFF; font-size:1.5rem; opacity:0; transition:.3s;　}
div#body > section#main section.movies div.movie figure.eval a:hover::before { opacity:.7; }
div#body > section#main section.movies div.movie figure.eval a:hover::after { opacity:1; }
div#body > section#main section.movies div.movie div.description { position:relative; padding:30px 30px; }
div#body > section#main section.movies div.movie div.description h1 { margin-bottom:20px; text-align:justify; font-size:1.5rem; font-weight:700; line-height:1.5; color:#FFF; }
div#body > section#main section.movies div.movie div.description p { font-size:0.88rem; text-align:justify; line-height:2.0; }
div#body > section#main section.movies div.movie div.description:after { content:""; position:absolute; width:135px; height:110px; right:30px; top:0; margin-top:-5px; }
div#body > section#main section.movies div.movie.pg0 div.description:after { background:url(../imgs/bg-number-00.svg) no-repeat transparent 50% 0; }
div#body > section#main section.movies div.movie.pg1 div.description:after { background:url(../imgs/bg-number-01.svg) no-repeat transparent 50% 0; }
div#body > section#main section.movies div.movie.pg2 div.description:after { background:url(../imgs/bg-number-02.svg) no-repeat transparent 50% 0; }
div#body > section#main section.movies div.movie.pg3 div.description:after { background:url(../imgs/bg-number-03.svg) no-repeat transparent 50% 0; }
div#body > section#main section.movies div.movie.pg4 div.description:after { background:url(../imgs/bg-number-04.svg) no-repeat transparent 50% 0; }
div#body > section#main section.movies div.movie.pg5 div.description:after { background:url(../imgs/bg-number-05.svg) no-repeat transparent 50% 0; }

div#body > section#main section.info { margin:25px 25px; padding:15px 15px; border-color:#222; border-style:solid; border-width:1px; border-radius:8px; }
div#body > section#main section.info { font-size:0.88rem; }
div#body > section#main section.info hr { padding:15px 0; }
div#body > section#main section.info div.content { display:table; } 
div#body > section#main section.info div.content div.left { display:table-cell; vertical-align:middle; width:210px; font-weight:700; line-height:1.5; color:#FFF; }
div#body > section#main section.info div.content div.right { display:table-cell; vertical-align:middle; }
div#body > section#main section.info div.content div.left div.header { padding:10px 0px 10px 15px; }
div#body > section#main section.info div.content.usage {  }
div#body > section#main section.info div.content.usage div.right ul { display:flex; flex-wrap:wrap; }
div#body > section#main section.info div.content.usage div.right ul li { display:flex; margin:10px 15px 10px 15px; }
div#body > section#main section.info div.content.usage div.right ul li div.mark { display:flex; justify-content:center; align-items:center; width:40px; height:40px; text-align:center;  border-width:1px; border-color:#222; border-style:solid; border-radius:5px; }
div#body > section#main section.info div.content.usage div.right ul li div.description { display:block; padding-left:15px; line-height:40px; }
div#body > section#main section.info div.content.download div.right { text-align:left; font-weight:700; color:#1081B4; } 
div#body > section#main section.info div.content.download div.right a { display:block; padding:15px 15px; width:100%; height:100%; border-radius:5px; transition:.3s; }
div#body > section#main section.info div.content.download div.right a:hover { background-color:#222; transition:.3s; }
div#body > section#main section.info div.content.download div.right a.eval:hover { cursor:default; }
div#body > section#main section.info div.content.download div.right a.eval:hover p { text-decoration:line-through; }
div#body > section#main section.info div.content.download div.right a * { display:inline-block; vertical-align:middle; }
div#body > section#main section.info div.content.download div.right a img { margin-right:15px; }

div#body > section#main section.standard { padding:15px 15px; }
div#body > section#main section.standard div.message { margin:0 auto; padding:0 25px; max-width:700px; line-height:2.0; text-align:justify; }
div#body > section#main section.standard div.message a { text-decoration:underline; }
div#body > section#main section.standard div.message p {}
div#body > section#main section.standard div.message div.note > * { margin:30px 0; padding:15px 20px; font-size:0.8rem; background-color:#111; border-radius:5px; }
div#body > section#main section.standard div.message *:last-child { margin-bottom:0 !important; }
div#body > section#main section.standard div.button { display:inline-block; margin:50px 10px 0 10px; }
div#body > section#main section.standard div.button a { display:block; /*height:50px; line-height:48px;*/ font-size:0.88rem; font-weight:bold; letter-spacing:0.1em; color:#333; background-color:#FFF; padding:13px 30px 15px 30px; border-width:2px; border-style:solid; border-color:#111; border-radius:25px; transition:.5s;  }
div#body > section#main section.standard div.button a:hover { text-decoration:none; /* background-color:#000; */ opacity:0.7; }
div#body > section#main section.standard div.button-white-enclosed a { color:#FFF; background-color:transparent; border-color:#FFF; }
div#body > section#main section.standard div.button-white-enclosed a:hover { background-color:#FFF; color:#000; opacity:1; }

div#body > section#main section.theater { margin-top:20px; margin-bottom:40px; }
div#body > section#main section.theater div.screen { position:relative; width:100%; min-height:600px; height:calc(-200px + 100vh); background-color:#202020; display:flex; justify-content:center; align-items:center; }
div#body > section#main section.theater div.screen figure { position:relative; max-width:100%; max-height:100%; height:100%; aspect-ratio:16 / 9; margin-left:auto; margin-right:auto; }
div#body > section#main section.theater div.screen figure > div { width:100%; height:100%; }


/* ----------------------------------------
	Footer
---------------------------------------- */
div#body > footer { padding-top:50px; padding-bottom:30px; }
div#body > footer div.copyright { font-size:0.88rem; text-align:center; }


/* ----------------------------------------
	width:1350px
---------------------------------------- */
@media screen and (max-width:1350px) {
div#body div.container { margin-right:20px; margin-left:20px; }
div#body > section#main section.movies div.movie { max-width:none; width:calc(50% - 50px); }
div#body > section#main section.movies div.movie figure img { width:100%; }
}


/* ----------------------------------------
	width:12000px * For theater
---------------------------------------- */
@media screen and (max-width:1200px) {
div#body > section#main section#theater div.screen { min-height:auto; width:100%; height:auto; aspect-ratio:16 / 9; }
div#body > section#main section#theater div.screen figure { width:100%; height:auto; }
}


/* ----------------------------------------
	width:1024px
---------------------------------------- */
@media screen and (max-width:1024px) {
span.under-1024 { display:inline; }
span.upper-1024 { display:none; }
div#body > section#main section.info div.content div.left { display:block; width:auto; }
div#body > section#main section.info div.content div.right { display:block; } 
}


/* ----------------------------------------
	iPad width:860px
---------------------------------------- */
@media screen and (max-width:860px) {
}


/* ----------------------------------------
	iPad width:860px * For theater
---------------------------------------- */
@media screen and (max-width:860px) {
div#body > section#main section#theater div.theater-description { margin-left:25px; margin-right:25px; }
}


/* ----------------------------------------
	iPad width:768px
---------------------------------------- */
@media screen and (max-width: 768px) {
span.pc { display:inline !important; }
div#body > a#goto-top { display:none; }
div#body > section#header div.intro,
div#body > section#main section.standard p { max-width:none; }
div#body div.row { display:block; }
div#body div.row > * { margin:50px 25px; }
div#body > section#main section.movies div.movie { width:calc(100% - 50px); }
}


/* ----------------------------------------
	width:680px
---------------------------------------- */
@media screen and (max-width:680px) {
div#body > section#header div.header-title-area div.decoration img { width:268px; }
div#body > section#header div.header-title-area h1 { font-size:2.5rem; }
}


/* ----------------------------------------
	iPhone width:568px
---------------------------------------- */
@media screen and (max-width:568px) {
html { font-size:15px; }

span.pc, li.pc { display:none !important; }
span.smartphone { display:inline !important; }

div#body div.container { margin-right:0px; margin-left:0px; }
div#body div.row > * { margin:50px 0px; }
div#body > section#header { padding-top:120px; }
div#body > section#header div.header-title-area h1 { font-size:2.35rem; }
div#body > section#main section.movies div.movie { width:100%; }
/* div#body > section#main section.info div.content.download div.right a p { margin-top:10px; } */
}