/* 	header
============================== */
#header { width: 100%; background-color: rgba(231, 239, 244, .6); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image: url(../img/head_bg.png);}
#header2 { width: 100%; height: 100%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image: url(../img/head_bg.png); -webkit-transform: scale(-1, -1); transform: scale(-1, -1);}
#header a { box-sizing: border-box; width: 100%; height: 100%; display: block; padding: 1em 0;}
#header a:hover { opacity: .8;}
/*logo*/
#logo_sp { width: 80%; max-width: 700px; margin: 0 auto; display: block; -webkit-transform: scale(-1, -1); transform: scale(-1, -1);}
#logo { width: 100%; height: 0; padding-top: 19.047619047619048%; padding-top: -webkit-calc(200 / 1050 * 100%); padding-top: calc(200 / 1050 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block; -webkit-animation-name: logoimg; -webkit-animation-duration: 1s; animation-name: logoimg; animation-duration: 1s;}
@keyframes logoimg { 0% { opacity: 0; transform: scale(1.2);} 30% { opacity: 0; transform: scale(1.2);} 100%  { opacity: 1; transform: scale(1);}}
@-webkit-keyframes logoimg { 0% { opacity: 0; -webkit-transform: scale(1.2);} 30% { opacity: 0; -webkit-transform: scale(1.2);} 100%  { opacity: 1; -webkit-transform: scale(1);}}

/* 	nav
============================== */
#nav { padding: 1em 0;}
#menu_intro #mn_intro, #menu_cs #mn_cs, #menu_story #mn_story, #menu_chart #mn_chart { opacity: .75;}
#menu_intro #mn_intro .mnt, #menu_cs #mn_cs .mnt, #menu_story #mn_story .mnt, #menu_chart #mn_chart .mnt { color: rgba(5, 0, 88, 1); font-size: 102%;}
#menu_intro #mn_intro a, #menu_cs #mn_cs a, #menu_story #mn_story a, #menu_chart #mn_chart a { cursor: default; pointer-events: none;}

/* 	contents
============================== */
h2 { width: 100%; display: block; position: relative; z-index: 10;}
h2:before, h2:after { content: ""; display: table;}
h2:after { clear: both;}
h2::after { content: ""; display: block; clear: both;}
h3 { color: rgba(102, 198, 242, 1); font-size: 120%; font-family: lithos-pro, sans-serif; padding-top: 2em;}
.h3s { padding-top: .5em;}
#con_title { width: 28%; display: block; margin: -2em auto 0 auto; color: rgba(0, 152, 221, 1);}
#con_title .img { width: 100%; height: 0; padding-top: 72.5%; padding-top: -webkit-calc(290 / 400 * 100%); padding-top: calc(290 / 400 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block; position: relative;}
#con_title .con_tt { width: 100%; letter-spacing: -.05em; font-size: 140%; line-height: 130%; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); display: block;}
#con_title .jt { font-family: toppan-bunkyu-midashi-go-std, sans-serif; line-height: 100%;}
#con_title .jts { letter-spacing: -.25em; line-height: 110%; display: block; font-size: 84%;}
#con_title .et { font-size: 50%; opacity: .65; font-family: lithos-pro, sans-serif; line-height: 100%;}
.contents { box-sizing: border-box; width: 98%; max-width: 820px; margin: 0 auto; padding: 1.5em 1em; margin-bottom: -2em; position: relative; top: -1.2em; z-index: 20; color: rgba(0, 82, 194, 1); background: radial-gradient(circle, transparent 20%, rgba(238, 249, 255, 1) 20%, rgba(238, 249, 255, 1) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgba(238, 249, 255, 1) 20%, rgba(238, 249, 255, 1) 80%, transparent 80%, transparent) 50px 50px, linear-gradient(rgba(255, 255, 255, 1) 4px, transparent 4px) 0 -2px, linear-gradient(90deg, rgba(255, 255, 255, 1) 4px, rgba(238, 249, 255, 1) 4px) -2px 0; background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;}
.catch_txt {width: 100%; letter-spacing: .05em; font-size: 150%; line-height: 150%; color: rgba(0, 152, 221, 1); text-align: center; padding: .5em 0; font-weight: bold;}
.con_txt { box-sizing: border-box; width: 98%; margin: 0 auto; padding: .5em 0; text-align: left; line-height: 180%; letter-spacing: .04em; text-align: justify; text-justify: inter-ideograph;}
/*_cs*/
.con_txt table { width: 90%; margin: 0 auto; border: 0; text-align: center; font-size: 100%;}
.con_txt table:first-child { margin-bottom: 1em;}
.con_txt table td { text-align: center; letter-spacing: .5em; padding-bottom: 1em;}
.con_txt table td .udl { padding-left: .5em; background: linear-gradient(transparent 70%, rgba(102, 198, 242, .25) 70%);}
.con_txt .cast_tbl { width: auto;}
.con_txt .cast_tbl th { text-align: right; padding-right: .75em; padding-bottom: .5em; line-height: 120%; color: rgba(75, 147, 216, 1); letter-spacing: .15em;}
.con_txt .cast_tbl th a { text-decoration: underline; text-decoration-color: #aaa;}
.con_txt .cast_tbl td { text-align: left; padding-bottom: .5em;}
.con_txt .staff_tbl th { text-align: right; padding-right: .25em; padding-bottom: 1em; vertical-align: top; font-size: 96%; color: rgba(80, 152, 221, 1); letter-spacing: .15em; white-space: nowrap;}
.con_txt .staff_tbl td { text-align: left; vertical-align: top; line-height: 160%; letter-spacing: .25em;}
.scon_txt { box-sizing: border-box; width: 100%; max-width: 700px; margin: .5em auto; padding: .75em 1em; text-align: left; font-size: 90%; line-height: 150%; letter-spacing: .04em; text-align: justify; text-justify: inter-ideograph; background: rgba(255, 255, 255, .75); color: rgba(80, 152, 221, 1); border: 2px dashed rgba(0, 152, 221, .5);}
.sub_con { box-sizing: border-box; width: 100%; max-width: 700px; margin: .5em auto 1em auto; padding: .5em; border: 2px solid rgba(0, 152, 221, .25); -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-image:  linear-gradient(30deg, rgba(0, 152, 221, .15) 12%, transparent 12.5%, transparent 87%, rgba(0, 152, 221, .15) 87.5%, rgba(0, 152, 221, .15)), linear-gradient(150deg, rgba(0, 152, 221, .15) 12%, transparent 12.5%, transparent 87%, rgba(0, 152, 221, .15) 87.5%, rgba(0, 152, 221, .15)), linear-gradient(30deg, rgba(0, 152, 221, .15) 12%, transparent 12.5%, transparent 87%, rgba(0, 152, 221, .15) 87.5%, rgba(0, 152, 221, .15)), linear-gradient(150deg, rgba(0, 152, 221, .15) 12%, transparent 12.5%, transparent 87%, rgba(0, 152, 221, .15) 87.5%, rgba(0, 152, 221, .15)), linear-gradient(60deg, rgba(0, 152, 221, .15) 25%, transparent 25.5%, transparent 75%, rgba(0, 152, 221, .15) 75%, rgba(0, 152, 221, .15)), linear-gradient(60deg, rgba(0, 152, 221, .15) 25%, transparent 25.5%, transparent 75%, rgba(0, 152, 221, .15) 75%, rgba(0, 152, 221, .15)); background-size: 40px 70px; background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px; position: relative; z-index: 100;}
.sub_con dl { background: rgba(255, 255, 255, .85); margin-top: .75em; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.sub_con dl:first-child { margin-top: 0;}
.sub_con dt { padding: .75em .5em; text-align: center; color: rgba(80, 152, 221, 1); font-size: 120%; letter-spacing: .1em; border-bottom: 2px dotted rgba(0, 152, 221, .5);}
.sub_con dt .stxt { font-size: 80%; color: rgba(0, 152, 221, .75); letter-spacing: 0;}
.sub_con dd { padding: 1em; text-align: left; color: rgba(40, 112, 181, 1); letter-spacing: .15em; line-height: 160%;}
/*for_W480-*/
@media all and (min-width: 480px) {
.contents { padding: 1em 1em 1.5em 1em; margin-bottom: -2.5em; position: relative; top: -2em;}
}
/*for_W640-*/
@media all and (min-width: 640px) {
#con_title .con_tt { font-size: 160%;}
#con_title { width: 24%;}
.sub_con dt { padding: .75em;}
.sub_con dd { padding: 1.5em;}
.con_txt table td { font-size: 110%;}
}
/*for_W768-*/
@media all and (min-width: 768px) {
#con_title .con_tt { font-size: 180%;}
.contents { padding: 1.5em 1em 1em 1em; top: -2.2em;}
.con_txt { padding: 1.5em 2em; font-size: 90%;}
.sub_con { font-size: 90%;}
.sub_con dd { padding: 1.5em 2em;}
.con_txt .staff_tbl th { padding-left: 2em;}
.con_txt table td { font-size: 120%; letter-spacing: .75em;}
.con_txt .cast_tbl th { padding-left: 3em;}
.con_txt .staff_tbl td { line-height: 180%; letter-spacing: .25em;}
}
/*intro*/
#intro_imgsp { box-sizing: border-box; width: 100%; max-width: 720px; border: 1px solid rgba(0, 152, 221, .8); background: rgba(255, 255, 255, 1); padding: .5em; margin: 1em auto;}
#intro_img { width: 100%; height: 0; padding-top: 59.333333333333333%; padding-top: -webkit-calc(712 / 1200 * 100%); padding-top: calc(712 / 1200 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}

/* 	photo
============================== */
.photo { width: 96%; margin: .5em auto 1em auto; text-align: center; user-select:none; -webkit-user-select:none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag: none; -webkit-touch-callout: none;}
.daigae { margin: 0 auto;}
.photo img { width: 100%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
.prgimg100100 img, .prgimg100100-90 img { max-width: 100%;}
.prgimg10090 img { max-width: 90%;}
.prgimg10080 img { max-width: 80%;}
.prgimg10070 img { max-width: 70%;}
.prgimg10060 img { max-width: 60%;}
.prgimg10050 img { max-width: 50%;}
/*for_W768-*/
@media all and (min-width: 768px) {
.photo { width: 90%; max-width: 900px;}
.prgimg100100-90 img { max-width: 90%;}
}

/* 	sns
============================== */
#sns_bg { padding-bottom: 60px; position: relative; overflow: hidden;}
#chari_sp { width: 40%; max-width: 180px; position: absolute; bottom: 0; left: 100%; animation-name: slidein; animation-duration: 3s; animation-fill-mode:forwards; z-index: 10;}
#chari { width: 100%; height: 0; padding-top: 38.596491228070175%; padding-top: -webkit-calc(132 / 342 * 100%); padding-top: calc(132 / 342 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
@keyframes slidein { 100%  { left: 31%;}}
@-webkit-keyframes slidein { 100%  { left: 31%;}}
#sns_set { width: 90%; max-width: 600px; display: block; margin: .75em auto 0 auto;}
#sns_set:before, #sns_set:after { content: ""; display: table;}
#sns_set:after { clear: both;}
#sns_set::after { content: ""; display: block; clear: both;}
/*_twitter*/
#twitter_sp { width: 80%; max-width: 500px; height: 60px; margin: 0 auto;}
#twitter_sp a { box-sizing: border-box; width: 100%; height: 100%; display: block; position: relative; z-index: 20; padding: 3px;}
#twitter_sp a:hover { opacity: .8;}
#twitter_sp .lnkol { width: 100%; height: 100%; margin: 0 auto; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: relative; z-index: 10;}
#twitter_sp .mark { width: 30px; height: 30px; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image: url(../img/ico_x.png); position: absolute; top: 15px; right: 10px;}
#twitter_sp .lnkol a:hover { opacity: .8;}
/*_instagram*/
#instagram_sp { width: 80%; max-width: 500px; height: 60px; margin: .75em auto 0 auto;}
#instagram_sp a { box-sizing: border-box; width: 100%; height: 100%; display: block; position: relative; z-index: 20; padding: 3px;}
#instagram_sp a:hover { opacity: .8;}
#instagram_sp .lnkol { width: 100%; height: 100%; margin: 0 auto; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: relative; z-index: 10;}
#instagram_sp .mark { width: 30px; height: 30px; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image: url(../img/ico_instagram.png); position: absolute; top: 15px; right: 10px;}
#instagram_sp .lnkol a:hover { opacity: .8;}
/*for_W640-*/
@media all and (min-width: 640px) {
#twitter_sp, #instagram_sp { width: 47%; margin: 0 0 0 1.5%; float: left;}
#twitter_sp { width: 50%; margin: 0 auto; float: none;} /*none_instagram*/
@keyframes slidein { 100%  { left: 36%;}}
@-webkit-keyframes slidein { 100%  { left: 36%;}}
}
/*for_W768-*/
@media all and (min-width: 768px) {
@keyframes slidein { 100%  { left: 72%;}}
@-webkit-keyframes slidein { 100%  { left: 72%;}}
}