@charset "UTF-8";
/* CSS Document */
/* =============================================
share
================================================ */
.pc { display: block; }

.mb { display: none; }

a { color: #000000; }

a:hover { color: #777; }

p { line-height: 180%; color: #555; }

body { background: #004EA2; }

.center { margin: 0 auto; width: 920px; }

/*load*/
#loading { background: url(../img/loading.gif) no-repeat center white; background-size: 180px auto; position: fixed; width: 100%; height: 100%; z-index: 999; top: 0; }

#head.logo { width: 140px; height: 29.3px; position: absolute; right: 30px; top: 30px; z-index: 9; }

.main_img { width: 100%; height: auto; position: fixed; background: #004EA2; /* スライドショー */ }
.main_img .rslides { position: relative; list-style: none; overflow: hidden; padding: 0; margin: 0 auto; width: 100%; max-width: 100%; z-index: 1; }
.main_img .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100% !important; max-width: 100% !important; left: 0; top: 0; }
.main_img .rslides li:first-child { position: relative; display: block; float: left; }
.main_img .rslides img { height: auto; float: left; width: 100%; border: 0; }

#anime_copy { padding-top: 82.4%; position: relative; z-index: 2; }
#anime_copy #animation_container { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 2; }
#anime_copy canvas { position: absolute; z-index: 2; display: block; }
#anime_copy #animation_container, #anime_copy canvas, #anime_copy #dom_overlay_container { width: 100% !important; height: auto !important; }

section { padding: 80px 0; }

.bg { background: url(../img/content_bg.png) no-repeat center top; background-size: cover; position: relative; z-index: 3; }

.image1, .image2 { z-index: 1; position: relative; transition: 1s ease; margin: -5% 0 -20%; }
.image1 img, .image2 img { width: 100%; height: auto; display: block; }

.image.anime { margin: 0% 0 -30%; }

section#overview { position: relative; margin-top: -20%; text-align: center; color: white; padding: 80px 0; }
section#overview #copy { margin-bottom: 40px; }
section#overview #copy img { margin: auto; }
section#overview p { font-size: 105%; color: white; }

.sns_btn { text-align: left; vertical-align: top; margin-bottom: 30px; }
.sns_btn iframe { height: 20px; }

section#ad p, article#concept p { color: white; }
section#ad .title:after, section#ad .title:before, section#ad .title span:after, section#ad .title span:before, article#concept .title:after, article#concept .title:before, article#concept .title span:after, article#concept .title span:before { border-color: white; }

article#concept { position: relative; }
article#concept p { margin-bottom: 0; padding-bottom: 40px; }
article#concept .left, article#concept .right { display: block; position: absolute; width: 105px; background: no-repeat center; background-size: auto 100%; opacity: 0; transition: .5s; -webkit-transition: .5s; -o-transition: .5s; -ms-transition: .5s; }
article#concept .left { background-image: url(../img/concept_pic1.png); height: 210px; left: 120px; bottom: 0; }
article#concept .left.anime { left: 20px; opacity: 1; }
article#concept .right { background-image: url(../img/concept_pic2.png); height: 185px; right: 120px; bottom: 5px; }
article#concept .right.anime { right: 20px; opacity: 1; }

section#video { text-align: center; color: white; padding: 0 0 50px; }
section#video #play { margin-bottom: 100px; }
section#video #copy { margin-bottom: 50px; }
section#video p { line-height: 180%; font-size: 105%; margin: 50px auto; }
section#video #video_cont { width: 920px; padding-bottom: 518px; position: relative; margin: auto; }
section#video #video_cont #video_player { position: absolute; left: 0; width: 100%; height: 100%; }
section#video .video_list { overflow: hidden; margin-top: 50px; }
section#video .video_list li { float: left; text-align: center; font-size: 90%; line-height: 130%; width: 23%; }
section#video .video_list li:not(:first-child) { margin-left: 2.5%; }
section#video .video_list img { display: block; margin-bottom: 10px; width: 100%; height: auto; }
section#video .video_list a { text-decoration: none; color: white; }

section#cast { position: relative; z-index: 2; background: white; }
section#cast .prof { position: relative; padding-left: 290px; }
section#cast .prof b { font-weight: bold; display: block; font-size: 120%; margin-bottom: 30px; }
section#cast .prof img { width: 240px; height: auto; position: absolute; left: 0; top: 0; }
section#cast .prof span { display: block; font-weight: bold; margin-bottom: 10px; }
section#cast .prof p { margin-bottom: 30px; font-size: 95%; }
section#cast .prof_cont { padding-left: 25px; border-left: 2px solid black; }
section#cast .comment { margin: 30px auto 50px; padding: 30px; background: #E5EBF3; }
section#cast .comment b { font-size: 105%; color: #004EA2; margin-bottom: 10px; }
section#cast .comment p { color: #004EA2; margin: auto; }

section#ad { background: #004EA2; position: relative; z-index: 1; }
section#ad ul { overflow: hidden; }
section#ad ul li { float: left; margin-right: 50px; width: 240px; vertical-align: middle; }
section#ad ul li:last-child { width: 340px; margin-right: 0; margin-top: 90px; }
section#ad ul img { width: 100%; height: auto; border: solid 1px white; vertical-align: middle; box-sizing: border-box; }

section#works { background: #E5EBF3; position: relative; z-index: 1; }
section#works ul { overflow: hidden; }
section#works ul li { text-align: center; float: left; width: 280px; margin-left: 40px; margin-bottom: 40px; color: #555; line-height: 130%; font-size: 75%; }
section#works ul li:first-child, section#works ul li:nth-child(4) { margin-left: 0; }
section#works ul img { width: 100%; height: auto; display: block; margin-bottom: 10px; }
section#works a { text-decoration: none; }

.title { padding: 20px 0; width: 360px; margin: 0 auto 40px; text-align: center; position: relative; transform: skew(-20deg); -webkit-transform: skew(-20deg); -o-transform: skew(-20deg); -ms-transform: skew(-20deg); }
.title:before, .title:after, .title span:before, .title span:after { content: ""; display: block; position: absolute; top: 1%; width: 0px; height: 0%; border: 1px solid black; border-radius: 100px; transition: 1.2s; -webkit-transition: 1.2s; -o-transition: 1.2s; -ms-transition: 1.2s; }
.title:after { left: 0; height: 90%; }
.title:before { right: 0; height: 90%; }
.title span:after { top: 0; left: 1.8%; width: 95%; }
.title span:before { bottom: 0; right: 1.8%; top: auto; width: 95%; }

.title.anime:before, .title.anime:after { transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); }

.title img { transform: skew(20deg); -webkit-transform: skew(20deg); -o-transform: skew(20deg); -ms-transform: skew(20deg); }

footer { text-align: center; padding: 80px 0 30px; position: relative; z-index: 1; background: white; }
footer .blue_btn a { display: block; text-align: center; background: #004EA2; width: 500px; margin: auto; padding: 20px 0; transform: skew(-20deg); -webkit-transform: skew(-20deg); -o-transform: skew(-20deg); -ms-transform: skew(-20deg); position: relative; }
footer .blue_btn a:after { content: ""; display: block; width: 23px; height: 18px; background: url(../img/yazirushi.svg) no-repeat center; transform: skew(20deg); -webkit-transform: skew(20deg); -o-transform: skew(20deg); -ms-transform: skew(20deg); position: absolute; right: 20px; top: 50%; margin-top: -9px; }
footer .blue_btn a img { width: 200px; transform: skew(20deg); -webkit-transform: skew(20deg); -o-transform: skew(20deg); -ms-transform: skew(20deg); }
footer .blue_btn a:hover { background: black; }
footer small { font-size: 80%; }
footer .logo { margin: 60px auto; }

#totop { width: 150px; height: 50px; position: fixed; right: -90px; bottom: 40px; transform: skew(-20deg); -webkit-transform: skew(-20deg); -o-transform: skew(-20deg); -ms-transform: skew(-20deg); background: #004EA2; z-index: 999; overflow: hidden; }
#totop a { display: block; position: absolute; width: 100%; height: 100%; }
#totop a::after { content: ''; display: block; position: absolute; width: 20px; height: 20px; top: 15px; left: 22px; background: url(../img/yazirushi.svg) no-repeat center left; transform: skew(20deg) rotate(-90deg); -webkit-transform: skew(20deg) rotate(-90deg); -o-transform: skew(20deg) rotate(-90deg); -ms-transform: skew(20deg) rotate(-90deg); }
#totop:hover { background: black; }