@charset "utf-8";
@charset "utf-8";
.stellarnav,.stellarnav li{position:relative;line-height:normal}.stellarnav{width:100%;z-index:9900}.stellarnav a{color:#777}.stellarnav ul{margin:0;padding:0;text-align:center}.stellarnav li{list-style:none;display:block;margin:0;padding:0;vertical-align:middle}.stellarnav li a{padding:15px;display:block;text-decoration:none;color:#777;font-size:inherit;font-family:inherit;box-sizing:border-box;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out}.stellarnav.light a,.stellarnav.light li a{color:#000}.stellarnav>ul>li{display:inline-block}.stellarnav>ul>li>a{padding:20px 40px}.stellarnav ul ul{top:auto;width:220px;position:absolute;z-index:9900;text-align:left;display:none;background:#ddd}.stellarnav.light,.stellarnav.light ul ul{background:rgba(255,255,255,1)}.stellarnav li li{display:block}.stellarnav ul ul ul{top:0;left:220px}.stellarnav>ul>li:hover>ul>li:hover>ul{opacity:1;visibility:visible;top:0}.stellarnav>ul>li.drop-left>ul{right:0}.stellarnav li.drop-left ul ul{left:auto;right:220px}.stellarnav.dark,.stellarnav.dark ul ul{background:rgba(0,0,0,1)}.stellarnav.dark a,.stellarnav.dark li a{color:#FFF}.stellarnav.fixed{position:fixed;width:100%;top:0;left:0;z-index:9999}body.stellarnav-noscroll-x{overflow-x:hidden}.stellarnav li.has-sub>a:after{content:'';margin-left:10px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #FFF;display:inline-block}.stellarnav .dd-toggle,.stellarnav li.call-btn-mobile,.stellarnav li.location-btn-mobile,.stellarnav.hide-arrows li li.has-sub>a:after,.stellarnav.hide-arrows li.drop-left li.has-sub>a:after,.stellarnav.hide-arrows li.has-sub>a:after{display:none}.stellarnav li li.has-sub>a:after{margin-left:10px;float:right;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #FFF;position:relative;top:4px}.stellarnav li.drop-left li.has-sub>a:after{float:left;margin-right:10px;border-left:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #FFF}.stellarnav .call-btn-mobile,.stellarnav .close-menu,.stellarnav .location-btn-mobile,.stellarnav .menu-toggle{display:none;text-transform:uppercase;text-decoration:none}.stellarnav .dd-toggle{position:absolute;top:0;right:0;padding:0;width:48px;height:48px;text-align:center;z-index:9999;border:0}.stellarnav.desktop li.has-sub a{padding-right:5px}.stellarnav.desktop.hide-arrows li.has-sub a{padding-right:15px}.stellarnav.mobile>ul>li>a.dd-toggle{padding:0}.stellarnav svg{fill:currentColor;width:1em;height:1em;position:relative;top:2px}.stellarnav a.dd-toggle .icon-plus{box-sizing:border-box;transition:transform .3s;width:12px;height:100%;position:relative;vertical-align:middle;display:inline-block}.stellarnav a.dd-toggle .icon-plus:after,.stellarnav a.dd-toggle .icon-plus:before{content:'';display:block;height:0;top:50%;border-bottom:solid 3px #777;position:absolute;width:12px}.stellarnav a.dd-toggle .icon-plus:before{transform:rotate(90deg);transition:width .3s}.stellarnav li.open>a.dd-toggle .icon-plus{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}.stellarnav.light a.dd-toggle .icon-plus:after,.stellarnav.light a.dd-toggle .icon-plus:before{border-color:#000}.stellarnav.dark a.dd-toggle .icon-plus:after,.stellarnav.dark a.dd-toggle .icon-plus:before{border-color:#FFF}.stellarnav .icon-close{box-sizing:border-box;width:12px;height:12px;position:relative;display:inline-block}.stellarnav .icon-close:after,.stellarnav .icon-close:before{content:'';display:block;width:12px;height:0;top:50%;border-bottom:solid 3px #777;position:absolute}.stellarnav .icon-close:before{transform:rotate(45deg)}.stellarnav .icon-close:after{transform:rotate(-45deg)}.stellarnav.light .icon-close:after,.stellarnav.light .icon-close:before{border-color:#000}.stellarnav.dark .icon-close:after,.stellarnav.dark .icon-close:before{border-color:#FFF}.stellarnav .call-btn-mobile,.stellarnav .close-menu,.stellarnav .location-btn-mobile,.stellarnav .menu-toggle{padding:15px;box-sizing:border-box}.stellarnav .menu-toggle span.bars{display:inline-block;margin-right:7px;position:relative;top:3px}.stellarnav .menu-toggle span.bars span{display:block;width:15px;height:2px;border-radius:6px;background:#777;margin:0 0 3px}.stellarnav .full{width:100%}.stellarnav .half{width:50%}.stellarnav .third{width:33%;text-align:center}.stellarnav .location-btn-mobile.third{text-align:center}.stellarnav .location-btn-mobile.half{text-align:right}.stellarnav.light .half,.stellarnav.light .third{border-left:1px solid rgba(0,0,0,.15)}.stellarnav.light.left .half,.stellarnav.light.left .third,.stellarnav.light.right .half,.stellarnav.light.right .third{border-bottom:1px solid rgba(0,0,0,.15)}.stellarnav.light .half:first-child,.stellarnav.light .third:first-child{border-left:0}.stellarnav.dark .half,.stellarnav.dark .third{border-left:1px solid rgba(255,255,255,.15)}.stellarnav.dark.left .half,.stellarnav.dark.left .third,.stellarnav.dark.right .half,.stellarnav.dark.right .third{border-bottom:1px solid rgba(255,255,255,.15)}.stellarnav.dark.left .menu-toggle,.stellarnav.dark.right .menu-toggle,.stellarnav.light.left .menu-toggle,.stellarnav.light.right .menu-toggle{border-bottom:0}.stellarnav.dark .half:first-child,.stellarnav.dark .third:first-child{border-left:0}.stellarnav.light .menu-toggle span.bars span{background:#000}.stellarnav.dark .menu-toggle span.bars span{background:#FFF}.stellarnav.mobile,.stellarnav.mobile.fixed{position:static}.stellarnav.mobile ul{position:relative;display:none;text-align:left;background:rgba(221,221,221,1)}.stellarnav.mobile.active>ul,.stellarnav.mobile>ul>li{display:block}.stellarnav.mobile.active{padding-bottom:0}.stellarnav.mobile>ul>li>a{padding:15px}.stellarnav.mobile ul ul{position:relative;opacity:1;visibility:visible;width:auto;display:none;-moz-transition:none;-webkit-transition:none;-o-transition:color 0 ease-in;transition:none}.stellarnav.mobile ul ul ul{left:auto;top:auto}.stellarnav.mobile li.drop-left ul ul{right:auto}.stellarnav.mobile li a{border-bottom:1px solid rgba(255,255,255,.15)}.stellarnav.mobile>ul{border-top:1px solid rgba(255,255,255,.15)}.stellarnav.mobile.light li a{border-bottom:1px solid rgba(0,0,0,.15)}.stellarnav.mobile.light>ul{border-top:1px solid rgba(0,0,0,.15)}.stellarnav.mobile li a.dd-toggle,.stellarnav.mobile.light li a.dd-toggle{border:0}.stellarnav.mobile .call-btn-mobile,.stellarnav.mobile .close-menu,.stellarnav.mobile .dd-toggle,.stellarnav.mobile .location-btn-mobile,.stellarnav.mobile .menu-toggle{display:inline-block}.stellarnav.mobile li.call-btn-mobile{border-right:1px solid rgba(255,255,255,.1);box-sizing:border-box}.stellarnav.mobile li.call-btn-mobile,.stellarnav.mobile li.location-btn-mobile{display:inline-block;width:50%;text-transform:uppercase;text-align:center}.stellarnav.mobile li.call-btn-mobile.full,.stellarnav.mobile li.location-btn-mobile.full{display:block;width:100%;text-transform:uppercase;border-right:0;text-align:left}.stellarnav.mobile.light ul{background:rgba(255,255,255,1)}.stellarnav.mobile.dark ul{background:rgba(0,0,0,1)}.stellarnav.mobile.dark ul ul{background:rgba(255,255,255,.08)}.stellarnav.mobile.light li.call-btn-mobile{border-right:1px solid rgba(0,0,0,.1)}.stellarnav.mobile.top{position:absolute;width:100%;top:0;left:0;z-index:9999}.stellarnav.mobile li li.has-sub>a:after,.stellarnav.mobile li.drop-left li.has-sub>a:after,.stellarnav.mobile li.has-sub>a:after{display:none}.stellarnav.mobile.left>ul,.stellarnav.mobile.right>ul{position:fixed;top:0;bottom:0;width:100%;max-width:280px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.stellarnav.mobile.right>ul{right:0}.stellarnav.mobile.left .close-menu,.stellarnav.mobile.right .close-menu{display:inline-block;text-align:right}.stellarnav.mobile.left>ul{left:0}.stellarnav.mobile.left .call-btn-mobile.half,.stellarnav.mobile.left .call-btn-mobile.third,.stellarnav.mobile.left .close-menu.half,.stellarnav.mobile.left .close-menu.third,.stellarnav.mobile.left .location-btn-mobile.half,.stellarnav.mobile.left .location-btn-mobile.third,.stellarnav.mobile.right .call-btn-mobile.half,.stellarnav.mobile.right .call-btn-mobile.third,.stellarnav.mobile.right .close-menu.half,.stellarnav.mobile.right .close-menu.third,.stellarnav.mobile.right .location-btn-mobile.half,.stellarnav.mobile.right .location-btn-mobile.third{text-align:center}.stellarnav.mobile.left .menu-toggle.half,.stellarnav.mobile.left .menu-toggle.third,.stellarnav.mobile.right .menu-toggle.half,.stellarnav.mobile.right .menu-toggle.third{text-align:left}.stellarnav.mobile.left .close-menu.third span,.stellarnav.mobile.right .close-menu.third span{display:none}.stellarnav.desktop li.mega ul ul{background:0 0;width:auto}.stellarnav.desktop li.mega li{display:inline-block;vertical-align:top;margin-left:-4px}.stellarnav.desktop li.mega li li{display:block;position:relative;left:4px}.stellarnav.desktop>ul>li.mega{position:inherit}.stellarnav.desktop>ul>li.mega>ul{width:100%}.stellarnav.desktop>ul>li.mega>ul li.has-sub ul{display:block;position:relative;left:auto}.stellarnav.desktop>ul>li.mega>ul>li{padding-bottom:15px;box-sizing:border-box}.stellarnav.desktop li.mega li li a{padding:5px 15px}.stellarnav.desktop li.mega li.has-sub a:after{display:none}.stellarnav.desktop>ul>li.mega>ul>li>a{color:#ff0}@media only screen and (max-width :768px){.stellarnav{overflow:hidden;display:block}.stellarnav ul{position:relative;display:none}}@media only screen and (max-width :420px){.stellarnav.mobile .call-btn-mobile.third span,.stellarnav.mobile .location-btn-mobile.third span{display:none}}
  html,
body,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
font-weight: normal;
font-style: normal;
} body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", "Osaka",sans-serif;
margin:0;
}
#ca_bg::before {
content:'';
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/sd_ca_haikei.png) center/cover no-repeat;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
-webkit-background-size: cover;
vertical-align: bottom;
}
img{
height:auto;
max-width:100%;
}
ul {
padding:0;
list-style: none;
}
.hide {
display: none;
}
.hidden {
visibility: hidden;
}
.loading {
position: relative;
top: 100px;
text-align: center;
}
#contents.date{
color: white;
font-size: 0.9em;
position: relative;
text-align: right;
}
#contents.ca_chara{
visibility: hidden;
position:relative;
margin:0 auto;
width:1000px;
display:block;
}
.ca_wrap{
width:100%;
margin:0 auto;
}
#sd_ca_parameter{
position:relative;
display:flex;
color:white;
}
.icon_voice_group{
position:relative;
width:26.1%;
}
.status_group {
position:relative;
width:73.9%;
}
.status_group ul li{
display:table-cell;
vertical-align: middle;
font-size: 29px;
font-weight: bolder;
}
.status_group ul li > span {
font-weight: bolder;
}
.sg_first, .sg_second{
width:100%;
display:flex;
}
.sg_box_1_1 {
display: flex;
width: 44.1%;
height: 146px;
box-sizing: border-box;
padding: 16px 0 0;
}
.sg_box_1_2 {
width: 55.9%;
display: flex;
height: 146px;
}
.sg_box_2_1 {
width: 44.1%;
display: flex;
height: 120px;
}
.sg_box_2_2 {
width: 55.9%;
display: flex;
height: 120px;
}
.type_icon {
padding:0 9px 0 0;
width:50px;
}
.atp_dfp_hp {
padding-right: 10px;
position:relative;
padding-top:3px;
}
.atp_dfp_hp ul:nth-child(1){
top: -3px;
position: relative;
}
.atp_dfp_hp ul:nth-child(2){
top: -7px;
position: relative;
}
.atp_dfp_hp ul:nth-child(3){
top: -11px;
position: relative;
}
.atp_dfp_hp ul li{
padding-right: 13px;
line-height:34px;
}
.atp_dfp_hp ul li:nth-child(2){
position: relative;
top: -2px;
}
.atp_dfp_hp ul li img {
width:38px;
}
.status_item ul li{
line-height: 40px;
padding: 0 22px 0 2px;
box-sizing: border-box;
}
.status_value ul li{
line-height: 40px;
padding: 0 22px 0 2px;
box-sizing: border-box;
}
.status_item ul li:nth-child(2),
.status_value ul li:nth-child(2){
padding:0;
}
.chara_icon{
position:relative;
display:block;
float:left;
width:100%;
box-sizing:border-box;
}
.chara_icon img{
width: 216px;
margin: 0 auto;
position: relative;
display: block;
}
.voice_actor {
text-align:center;
}
.voice_actor p {
font-size:20px;
font-weight:bold;
color:#f9de04;
}
.voice_actor span{
font-weight:bold;
color:#fff;
margin-left:2px;
}
.box1{
width:74%;
position:relative;
display:table-cell;
float:left;
}
.box1 img{
height:auto;
}
.box1 span{
position:absolute;
font-size:29px;
font-weight:bolder;
color:white;
}
.box1 table{
border-collapse: collapse;
border-spacing: 0;
}
.box1 table td{
position:relative;
}
.box1 table.no1{
width:100%;
margin-top:15px;
}
.no1 tr{
height:40px;
}
.no1 span{
top:-1px;
}
td.area7p{
width:6%;
}
td.area8p{
width:8%;
}
td.area85p{
width:85%;
}
.box2 table td{
position:relative;
}
.box2 table.no2{
width:100%;
margin-top:10px;
}
.no2 tr{
height:38px;
}
.no2 span{
top:-4px;
}
td.area28p{
width:28%;
}
td.area16p{
width:16%;
}
.sd_ca_type{
width:20%;
display:block;
float:left;
}
.sd_ca_attack_p, .sd_ca_deffence_p, .sd_ca_hit_p{
height:33%;
left:8%;
position:absolute;
float:left;
margin-bottom:-10px;
}
.sd_ca_attack_p{
top:1px;
}
.sd_ca_deffence_p{
top:42px;
}
.sd_ca_hit_p{
top:85px;
}
.box2 {
position:relative;
display:table-cell;
float:left;
width:74%;
}
.box2 img{
float:left;
}
.box2 span{
position:absolute;
font-size:28px;
font-weight:bolder;
width:max-content;
color:white;
}
.sd_ca_cost_p, .sd_ca_summon_c, .sd_ca_attack_c{
position:relative;
float:left;
width:100%;
height:20%;
}
.box3 {
width:37%;
top:30px;
position:relative;
float:left;
}
.box3 img{
float:left;
width:55%;
}
.box3 span{
position:absolute;
font-size:28px;
font-weight:bolder;
width:max-content;
}
.sd_ca_speed_p, .sd_ca_target_area{
position:relative;
float:left;
width:100%;
height:20%;
}
.sd_ca_speed_p span{
top:-2px;
}
.sd_ca_chara_comment{
position: relative;
height: 60px;
width: 99%;
background: #000;
border-radius: 45px;
border: solid 4px #b0b0b0;
box-sizing: border-box;
margin: 17px auto;
}
.sd_ca_chara_comment span{
font-size: 22px;
color: white;
line-height: 52px;
margin-left: 23px;
}
.skill_movie_group, .urawaza_movie_group, .gachiskill_group {
display:flex;
padding:0 20px;
box-sizing: border-box;
}
.skill_box, .urawaza_box, .gachiskill_box{
position:relative;
width:45%;
}
.skill_box ul, .urawaza_box ul, .gachiskill_box ul, .ability_box{
list-style: none;
}
.skill_box span, .urawaza_box span, .gachiskill_box span, .ability_box{
font-size:20px;
color:white;
}
.skill_box p, .ability_box{
font-size:20px;
font-weight:bolder;
margin:0;
color:white;
}
.urawaza_box p,
.gachiskill_box p{
font-size:20px;
margin:0;
color:white;
}
.urawaza_box p.urawaza_remarks,
.gachiskill_box p.gachiskill_detail,
.kibun_box p.kibun_remarks {
font-size:20px;
margin:20px 0 0 0;
color:white;
}
.kibun_box .kibun_remarks_last p{
margin-top: 30px;
}
.kibun_box p.remarks_increase{
font-size:20px;
margin:20px 0 0 0;
color:#ff99cc;
}
.kibun_box p.remarks_decrease{
font-size:20px;
margin:20px 0 0 0;
color:#66ccff;
}
.skill_box p span,
.urawaza_box p span,
.urawaza_box p.urawaza_remarks span,
.gachiskill_box p span,
.gachiskill_box p.gachiskill_detail span,
.kibun_box p.kibun_remarks span {
font-size:20px;
}
.skill_box p span, .ability_box p span{
color:#ff2500;
}
.ability_box {
position:relative;
padding: 0 20px;
}
.ability_box span{
color:#fff;
}
.movie_box {
position:relative;
width:55%;
}
.movie_box .mov_thumbnail {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 464px;
height: 258px;
overflow: hidden;
border: solid 5px #b28a4c;
box-shadow:0 0 5px rgba(0, 0, 0, 0.6);
cursor:pointer;
}
.movie_box .mov_thumbnail img {
position: relative;
top: -44px;
width: 100%;
z-index:1;
}
.movie_box .mov_thumbnail_btn::after {
content:'';
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/mov_yicon_btn.png) no-repeat;
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
right:0;
margin:auto;
display: block;
z-index:2;
} body.modal-open {
height: 100vh;
overflow-y: hidden;
}
body.modal-open .contents{
left:-9px;
}
.modalbox {
display:none;
}
.modalbox.popup{
display:block;
}
.modalbox-overlay {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
z-index: 1000;
cursor: pointer;
}
.video-container {
position: fixed;
width: 700px;
overflow: hidden;
height: 450px;
top: -10%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.video-container iframe {
width:100%;
height:90%;
}
.batsu_wrap{
text-align:right;
}
#batsu {
position: relative;
width: 20px;
height: 20px;
margin: 6px auto;
display: inline-block;
}
#batsu::before, #batsu::after {
position: absolute;
top: 8px;
left: 0;
content: "";
display: block;
width: 20px;
border-top: 4px solid #fff;
}
#batsu::before {
transform: skewY(-45deg);
}
#batsu::after {
transform: skewY(45deg);
}
.line {
margin:20px auto;
}
.sd_ca_skill_title, .sd_ca_urawaza_title, .sd_ca_gachiskill_title{
width:100%;
}
.kibun .sd_ca_kibun_subtitle {
padding-top: 20px;
padding-left: 20px;
}
.sd_ca_skill_subtitle span,
.sd_ca_urawaza_subtitle span,
.sd_ca_gachiskill_subtitle span,
.kibun_box .sd_ca_kibun_subtitle span,
.ability_box .sd_ca_ability_subtitle span {
width:100%;
font-weight:bolder;
font-size:28px; position:relative;
}
.sd_ca_ability_title{
width:100%;
} .sd_ca_chara_details,
.sd_ca_chara_kibun{
position:relative;
padding:18px 0px 0px 0px;
}
.sd_ca_chara_details img.clickbtn,
.sd_ca_chara_kibun img.clickbtn{
position:absolute;
width:57px;
top:-12px;
left:43px;
} .cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #ffffff;
}
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_actab label {
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0px;
}
div.cp_actab label img{
position:relative;
left:50px;
}
div.cp_actab label span{
color:#ffe404;
left:75px;
position:relative;
}
.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
color: #333333;
}
.cp_actab .cp_actab-content p {
margin: 20px;
}
.cp_actab .cp_actab-content p.kibun_remarks_last {
margin-top: 55px;
} .cp_actab input:checked ~ .cp_actab-content {
max-height: none;
} .cp_actab label::after {
line-height: 3;
position: absolute;
top: 0;
left: 30px;
display: block;
width: 25px;
height: 25px;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
content: '';
background-image:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/sd_ca_detail_arrow.png);
background-repeat:no-repeat;
background-size:100%;
}
.cp_actab input[type=checkbox]:checked + label::after {
transform: rotate(90deg);
}
.cp_actab-content span{
font-size:20px;
color:white;
} .box6{
position:relative;
display:block;
overflow:hidden;
}
.box6 ul{
list-style: none;
}
.box6 li{
width:100%;
float:left;
padding:10px;
}
.box6 li a{
float:left;
}
.box6 img, .box7 img{
float:left;
z-index:10;
width:100%;
}
.ca_nashi img{
width:110px;
padding-top:30px;
}
.ca_chara_list{
width:12%;
float:left;
}
.box7{
position:relative;
display:block;
overflow:hidden;
}
.box7 li{
width:100%;
float:left;
padding:0px 0px 10px 15px;
background-color:#a3dc98;
}
.box7 div.ca_chara_list:hover {
cursor: pointer;
background-color: rgba(0,0,255,0.2);
}
.box6,
.box7 {
content-visibility: auto;
}
.box6 {
contain-intrinsic-size: 2200px;
}
.box7 {
contain-intrinsic-size: 620px;
}
.ca_tokusyu_wrap img {
cursor: pointer;
}
.ca_tokusyu_wrap.hideChara {
position: absolute;
top: -9999px;
}
.ca_popup div.modal-wrap{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:500px;
height:500px;
border:2px solid #fff;
background-color:rgba(31, 21, 16, 0.95);
margin:auto;
display:flex;
border-radius:50px;
font-weight:bold;
font-size:25px;
color:white;
cursor: default;
}
.ca_popup div img{
opacity:1.0;
}
.ca_popup .modal-bg{
display:block;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.57);
position:fixed;
top:0;
left:0;
z-index:60;
}
.ca_popup span{
position:relative;
top:20px;
left:-90px;
display:block;
}
.ca_popup .modal-wrap img{
display:block;
z-index:100;
}
.ca_popup .modal-wrap div{
display:block;
z-index:100;
position:absolute;
}
.ca_chara_area{
top:15px;
left:175px;
}
.ca_chara_area img{
width:120px;
}
.ca_close_btn{
top: 20px;
width: 60px;
right: 20px;
cursor:pointer;
}
.ca_chara_link{
bottom:15px;
right:15px;
}
.ca_chara_link a{
display:block;
width: 150px;
height: 46px;
}
.ca_text_area{
padding: 20px 10px 0px 25px;
top: 140px;
margin: 0 auto;
overflow: hidden;
width: 92%;
height: 55%;
letter-spacing: 1.5px;
}
.selected div.modal-wrap{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:400px;
height:400px;
border:2px solid #fff;
border-radius:25px;
background-color:rgba(59,42,33,0.8);
margin:auto;
display:flex;
align-items:center;
justify-content:center;
border-radius:50px;
font-weight:bold;
font-size:27px;
color:white;
}
.selected div img{
position:relative;
top:-110px;
left:85px;
z-index:100;
opacity:1.0;
}
.selected .modal-bg{
display:block;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position:fixed;
top:0;
left:0;
z-index:60;
}
.selected span{
position:relative;
top:20px;
left:-90px;
display:block;
}
.i_mark_icon{
position:relative;
background-image:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/sd_ca_info_mark.png);
background-size:100%;
width:40px;
height:40px;
z-index:50;
left:0px;
top:24px;
}
.modal-wrap{
z-index:1000;
}
.modal-wrap img{
display:none;
}
.modal-wrap div{
display:none;
}
.selected .modal-wrap img{
display:block;
z-index:100;
position:absolute;
top:5px;
}
.selected .modal-wrap div{
display:block;
z-index:100;
position:absolute;
top:214px;
text-align:left;
width:100%;
padding-left:20px;
}
.modal-wrap img{
pointer-events: none;
}
li.tokui_title{
float:left;
background-color:#fc4641;
padding:7px;
height:87px;
}
li.tokui_title img,
li.nigate_title img,
li.tokushu_title img {
float:left;
width:226px;
padding-top:4px;
}
li.tokui_title div,
li.nigate_title div,
li.tokushu_title div {
position:relative;
top:45px;
}
li.tokui_title div img,
li.nigate_title div img,
li.tokushu_title div img {
position:absolute;
width:31px;
left:4px;
top:5px;
}
li.tokui_title div span,
li.nigate_title div span,
li.tokushu_title div span {
position:absolute;
left:36px;
top:12px;
color:white;
font-weight:bolder;
}
.tokui_subtitle, .nigate_subtitle{
width:100%;
height:50px;
}
li.nigate_title{
float:left;
background-color:#233dff;
padding:7px;
height:87px;
}
li.tokushu_title{
float:left;
padding:10px;
background-color:#44e000;
position:relative;
height:87px;
}
li.tokushu_title span{
position:absolute;
bottom:15px;
left:20px;
}
li.tokushu_title div span {
color: #000;
font-weight: bolder;
}
.tokui:nth-child(odd){
background-color:#ff9191 !important;
}
.tokui:nth-child(even){
background-color:#ffbcc8 !important;
}
.nigate:nth-child(odd){
background-color:#5ba8ff !important;
}
.nigate:nth-child(even){
background-color:#95c7ff !important;
}
.tokushu{
background-color:#a3dc98 !important;
}
.tokui_subtitle img, .nigate_subtitle img{
width:315px;
float:left;
}
.ca_nashi{
display:block;
height:100px;
}
.ca_footer{
width:100%;
background:black;
text-align:center;
padding: 18px 8px 18px;
box-sizing:border-box;
margin-top:100px;
}
.ca_footer div.footer_aso{
width:240px;
margin:0 auto;
padding:10px 0 20px;
}
.ca_footer div.footer_aso a{
text-decoration:none;
}
.ca_footer p{
font-size:10px;
color:white;
width:max-content;
margin:0 auto;
}
.ca_footer span{
font-size:10px;
}
.ca_footer a:link,.ca_footer a:visited{
color:white;
}
.ca_footer a:hover{
opacity: 0.7;
}
#ca_back_btn {
position: absolute;
top: 120px;
right: 20px;
width: 65px;
z-index:100;
}
#ca_back_btn.m-fixed{
position:fixed;
top: 20px;
}
#ca_top_btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 65px;
z-index:100;
}
.footerLogo {
width:72px;
margin:0 auto 12px;
}
.cr_asobism, .cr_pictoy {
position: relative;
display:block;
font-size:10px;
font-family: Helvetica, Arial, Doroid Sans, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.cr_asobism {
margin-bottom:2px;
}  @media screen and (max-width: 1024px) and (min-width: 901px){
#contents .date{
font-size: 0.8em;
}
#contents.ca_chara{
width:90%;
}
.box1 span{
font-size:29px;
}
.box1 table.no1{
margin-top:10px;
}
.no1 span{
top:-3px;
}
.no1 tr{
height:37px;
}
.sd_ca_attack_p, .sd_ca_deffence_p, .sd_ca_hit_p{
height:31%;
left:12%;
}
.sd_ca_attack_p{
top:10px;
}
.sd_ca_deffence_p{
top:64px;
}
.sd_ca_hit_p{
top:120px;
}
.box2 {
top:0px;
}
.box2 img{
}
.box2 span{
left:20%;
font-size:22px;
}
.box2 table.no2{
margin-top:2px;
}
.no2 span{
top:0px;
}
.no2 tr{
height:30px;
}
.sd_ca_cost_p{
}
.sd_ca_cost_p span{
top:-6px;
}
.sd_ca_attack_c span{
top:-2px;
}
.sd_ca_summon_c span{
top:-2px;
}
.sd_ca_speed_p span{
top:-5px;
}
.sd_ca_target_area span{
top:-5px;
}
.box3 {
top:25px;
}
.box3 img{
width:57%;
}
.box3 span{
font-size:26px;
}
.sd_ca_chara_comment{
height: 56px;
width: 100%;
margin: 15px auto;
}
.sd_ca_chara_comment span{
font-size: 22px;
line-height: 48px;
}
.ca_chara_list{
width:14%;
}
.ca_footer div.footer_aso{
width:240px;
margin:0 auto;
padding:10px 0 20px;
} .chara_icon img{
width:200px;
}
.voice_actor p {
font-size:17px;
}
.type_icon {
padding:0 4px 0 0;
}
.atp_dfp_hp ul li {
padding-right:9px;
font-size:29px;
}
.sg_box_1_1, .sg_box_1_2{
height:140px;
}
.status_item ul li {
line-height: 35px;
font-size: 24px;
}
.status_value ul li{
line-height: 35px;
font-size: 24px;
}
.status_item ul li:first-child,
.status_value ul li:first-child {
width:188px;
}
.sg_box_2_1 {
height:115px;
}
.sg_box_2_2 {
height:115px;
}
.movie_box .mov_thumbnail {
width:395px;
height:220px;
}
.movie_box .mov_thumbnail img {
top:-38px;
}
}  @media screen and (max-width: 900px) and (min-width: 737px){
#contents .date{
font-size: 0.4em;
}
#contents.ca_chara{
position:relative;
width:80%;
}
.box1{
width:69%;
}
.box1 span{
font-size:19px;
}
.no1 tr{
height:29px;
}
.no1 span{
top:0px;
}
.no2 tr{
height:29px;
}
.no2 span{
top:3px;
}
.sd_ca_attack_p, .sd_ca_deffence_p, .sd_ca_hit_p{
left:11%;
}
.sd_ca_attack_p {
top:-2px;
}
.sd_ca_deffence_p {
top:30px;
}
.sd_ca_hit_p {
top:65px;
}
.box2{
top:0px;
width:69%;
}
.box2 span ,.box3 span{
font-size:17px;
}
.sd_ca_cost_p, .sd_ca_summon_c, .sd_ca_attack_c{
width:68%;
height:10%;
}
.sd_ca_speed_p, .sd_ca_target_area{
width:68%;
height:10%;
}
.sd_ca_chara_details img.clickbtn,
.sd_ca_chara_kibun img.clickbtn{
left:28px;
}
li.tokui_title img, li.nigate_title img, li.tokushu_title img{
width:200px;
}
.tokui_subtitle img, .nigate_subtitle img{
width:250px;
}
.cp_actab label::after{
left:20px;
top:-2px;
}
div.cp_actab label img{
left:30px;
width:128px;
}
.sd_ca_chara_kibun div.cp_actab label img{
left:30px;
width:auto;
}
.i_mark_icon{
width:36px;
height:36px;
left:-3px;
top:15px;
}
.ca_chara_list{
width:16%;
float:left;
}
.ca_nashi img{
width:88px;
padding-top:32px;
}
#ca_back_btn {
position: absolute;
top: 120px;
right: 20px;
width:60px;
}
#ca_top_btn {
position: fixed;
bottom: 20px;
right: 20px;
width:60px;
}
.ca_footer p{
font-size:10px;
}
.ca_footer div.footer_aso{
width:240px;
margin:0 auto;
padding:10px 0 20px;
text-align:center;
} .chara_icon img {
width:156px;
}
.voice_actor p {
font-size:12px;
}
.type_icon {
width:40px;
padding: 0 5px 0 0;
}
.atp_dfp_hp {
padding-top:3px;
}
.atp_dfp_hp ul li {
width:31px;
font-size:21px;
line-height:26px;
padding-right:8px;
}
.atp_dfp_hp ul li img {
width:31px;
}
.status_group ul li{
font-size:21px;
}
.sg_box_1_1 {
height:111px;
padding: 10px 0 0;
}
.sg_box_1_2 {
height:111px;
}
.sg_box_2_1,
.sg_box_2_2 {
height:85px;
}
.status_item ul li,
.status_value ul li {
line-height:26px;
font-size:20px;
}
.status_item ul li:first-child,
.status_value ul li:first-child {
padding:0 10px 0 2px;
width:120px;
}
.sd_ca_chara_comment{
border:solid 3px #b0b0b0;
height: 40px;
margin:7px auto;
}
.sd_ca_chara_comment span{
font-size: 18px;
line-height: 34px;
}
.sd_ca_skill_title img,
.sd_ca_ability_title img,
.sd_ca_urawaza_title img,
.sd_ca_gachiskill_title img{
width:115px;
}
.sd_ca_chara_details .cp_actab img,
.sd_ca_chara_kibun .cp_actab label img{
height: 22px;
}
.sd_ca_skill_subtitle span,
.ability_box .sd_ca_ability_subtitle span,
.sd_ca_urawaza_subtitle span,
.sd_ca_gachiskill_subtitle span,
.kibun_box .sd_ca_kibun_subtitle span {
font-size:22px; }
.skill_box , .urawaza_box, .gachiskill_box{
width:56%;
padding-right: 15px;
box-sizing: border-box;
}
.movie_box {
width:44%;
}
.skill_box span,
.ability_box,
.urawaza_box p,
.urawaza_box p.urawaza_remarks,
.gachiskill_box p,
.gachiskill_box p.gachiskill_detail,
.kibun_box p.kibun_remarks{
font-size:18px;
}
.sd_ca_skill_subtitle span,
.kibun_box .sd_ca_kibun_subtitle span {
font-size:22px;
}
.cp_actab-content span {
font-size:18px;
}
.movie_box .mov_thumbnail {
width: 230px;
height: 128px;
border: solid 4px #b28a4c;
}
.movie_box .mov_thumbnail img {
top:-23px;
}
}  @media screen and (max-width: 736px) and (min-width: 481px){
#contents .date{
font-size: 0.2em;
padding-top:20px;
}
#contents.ca_chara{
position:relative;
margin:0 auto;
width:100%;
max-width:480px;
}
.chara_list{
position:relative;
display:block;
}
.chara_list li{
float:left;
width:20%;
}
td.area8p{
width:12%;
}
td.area7p{
width:9%;
}
.box1 span{
font-size:17px;
}
.box1 table.no1{
width: 100%;
margin-top: 31px;
}
.sd_ca_type{
width:30px;
}
.sd_ca_attack_p, .sd_ca_deffence_p, .sd_ca_hit_p{
left:14.5%;
height:30%;
}
.box2{
width:100%;
}
.box2 span, .box3 span{
font-size:17px;
}
.no1 span{
top:3px;
}
.no2 span{
top:0px;
}
.sd_ca_chara_comment{
height:6vw;
}
.sd_ca_deffence_p{
top:22px;
}
.sd_ca_hit_p{
top:43px;
}
.sd_ca_cost_p{
height:17px;
}
.sd_ca_summon_c {
height:17px;
}
.no1 tr{
height:16px;
}
.no2 tr{
height:16px;
}
.box4 img{
width:23%;
}
.area7p{
width:9%;
}
.box4 span, .box5 span, .kibun span {
font-size:16px;
}
.box4 p{
font-size:14px;
}
.box4 p span{
font-size:13px;
}
.skill_box span,
.ability_box,
.urawaza_box p,
.urawaza_box p.urawaza_remarks,
.gachiskill_box p,
.gachiskill_box p.gachiskill_detail,
.kibun_box p.kibun_remarks {
font-size:16px;
} .sd_ca_chara_comment span{
top:4px;
font-size:15px;
}
.ca_newbtn{
width:30px;
height:15px;
top:34px;
}
.tokui_subtitle, .nigate_subtitle{
height:30px;
}
.ca_nashi{
height:35px;
}
.i_mark_icon{
width:32px;
height:32px;
left:-2px;
top:14px;
}
div.cp_actab label img{
position:relative;
left:22px;
height:20px;
width:auto;
}
div.cp_actab label span{
color:#ffe404;
left:58px;
top:0px;
font-size:11px;
}
.cp_actab label::after{
top:-1px;
left:16px;
width:20px;
height:20px;
}
.sd_ca_chara_details img.clickbtn,
.sd_ca_chara_kibun img.clickbtn{
left:18px;
}
li.tokui_title,
li.nigate_title,
li.tokushu_title {
padding:5px;
}
li.tokui_title img,
li.nigate_title img,
li.tokushu_title img {
width:160px;
}
li.tokui_title,
li.nigate_title,
li.tokushu_title {
height:60px;
}
li.tokui_title div,
li.nigate_title div,
li.tokushu_title div {
top:30px;
}
li.tokui_title div img,
li.nigate_title div img,
li.tokushu_title div img {
width:22px;
left:2px;
top:7px;
}
li.tokui_title div span,
li.nigate_title div span,
li.tokushu_title div span {
left:24px;
top:11px;
font-size:12px;
}
.tokui_subtitle .nigate_subtitle {
height:25px;
}
.tokui_subtitle img, .nigate_subtitle img{
width:200px;
}
li.tokushu_title{
height:60px;
padding:5px;
}
.sd_ca_speed_p{
height:20px;
}
.ca_popup div.modal-wrap{
width:400px;
height:300px;
font-size:17px;
}
.ca_close_btn{
width:50px;
}
.ca_chara_area{
top:5px;
left:153px;
}
.ca_chara_link{
width:100px;
bottom: 6px;
right: 20px;
}
.ca_chara_link a{
width: 100px;
eight: 31px;
}
.ca_chara_link img{
width: 100px;
}
.ca_text_area{
top:110px;
padding:0px 20px 0px 20px;
width:90%;
height:52%;
}
.ca_chara_area img{
width:90px;
}
.ca_footer p{
font-size:10px;
}
.ca_footer div.footer_aso{
width:240px;
margin:0 auto;
padding:10px 0 20px;
}
.box2 table.no2{
margin-top:5px;
}
.ca_chara_list{
width:19%;
}
.ca_nashi img{
width:47px;
padding-top:9px;
}
#ca_back_btn {
position: absolute;
top: 102px;
right: 20px;
width:55px;
}
#ca_top_btn {
position: fixed;
bottom: 20px;
right: 20px;
width:55px;
} .icon_voice_group{
width:auto;
}
.chara_icon {
width:26%;
}
.chara_icon img {
width:100%;
}
.voice_actor {
text-align:left;
position:absolute;
margin:31vw 0 0 2px;
}
.voice_actor p{
font-size:17px;
}
.status_group {
position:absolute;
width:100%;
}
.status_group ul li {
font-size:19px;
}
.voice_actor {
text-align: left;
position: absolute;
margin: 134px 0 0 12px;
}
.sg_box_1_1{
display: flex;
width: 74%;
height: auto;
box-sizing: border-box;
padding: 34px 0 20px;
margin-left: 26%;
}
.type_icon {
width:41px;
padding:0 3px 0 0;
}
.atp_dfp_hp {
position:relative;
top:1px;
}
.atp_dfp_hp ul li {
padding-right:4px;
line-height: 27px;
width:31px;
}
.atp_dfp_hp ul li:nth-child(2){
position:relative;
top:-3px;
}
.atp_dfp_hp ul li img {
width:31px;
}
.sg_box_1_2 {
width: auto;
height: auto;
display: block;
}
.sg_second {
width: 100%;
display: flex;
padding: 0 9px;
box-sizing: border-box;
margin-top: 10px;
}
.sg_box_2_1{
width: 44%;
height: 18vw;
}
.status_item ul li{
width: 61px;
line-height:26px;
}
.status_value ul li{
width: 111px;
line-height:26px
}
.status_item ul li:first-child, .status_value ul li:first-child{
width: 136px;
padding: 0 7px 0 2px;
}
.sg_box_2_2{
width: 56%;
height: 18vw;
}
.sd_ca_chara_comment {
border: solid 2px #b0b0b0;
height: 28px;
margin: 0 auto;
width: 97%;
}
.sd_ca_chara_comment span {
line-height: 24px;
}
.skill_box, .urawaza_box, .gachiskill_box {
width:100%;
}
.skill_movie_group, .urawaza_movie_group, .gachiskill_group {
width:100%;
display:block;
}
.sd_ca_skill_subtitle span,
.kibun_box .sd_ca_kibun_subtitle span {
font-size:17px;
}
.sd_ca_skill_title, .sd_ca_urawaza_title, .sd_ca_gachiskill_title {
width:101px;
}
.sd_ca_skill_subtitle span,
.sd_ca_urawaza_subtitle span,
.kibun_box .sd_ca_kibun_subtitle span {
font-size:18px;
}
.sd_ca_urawaza_subtitle span,
.sd_ca_gachiskill_subtitle span,
.ability_box .sd_ca_ability_subtitle span, .sd_ca_kibun_subtitle span {
font-size:18px;
}
.sd_ca_kibun_text {
margin-top: 20px;
}
.sd_ca_skill_text span, .sd_ca_urawaza_text p, .sd_ca_gachiskill_text p, .sd_ca_kibun_text p{
font-size:16px;
}
.sd_ca_ability_title {
width:101px;
} .movie_box {
width:100%;
}
.movie_box {
width: 100%;
box-sizing: border-box;
padding: 20px 0;
}
.movie_box .mov_thumbnail {
position: relative;
width: 395px;
height: 220px;
}
.movie_box .mov_thumbnail img {
top: -38px;
}
#sd_ca_parameter {
position: relative;
display: block;
height: 257px;
}
.line{
margin: 10px auto;
}
}  @media screen and (max-width: 480px){
#contents.ca_chara{
position:relative;
width:98%;
}
.chara_list{
position:relative;
display:block;
}
.chara_list li{
float:left;
width:20%;
}
.box1{
width:70%;
}
.box1 span{
font-size:18px;
}
.box1 table.no1{
margin-top:30px;
}
td.area8p{
width:14%;
}
td.area7p{
width:11%;
}
td.area85p{
width:75%;
}
.no1 tr{
height:25px;
}
.no1 span{
top:1px;
}
.no2 span{
top:-2px;
}
.no2 tr{
height:20px;
}
td.area28p{
width:29%;
}
td.area16p{
width:13%;
}
table.no2{
margin-top:5px;
}
.sd_ca_type{
width:30px;
}
.sd_ca_attack_p, .sd_ca_deffence_p, .sd_ca_hit_p{
left:8.5%;
height:30%;
}
.box2{
top:-1px;
width:100%;
}
.box2 table.no2{
margin-top:0px;
padding:10px;
}
.box2 span{
font-size:15px;
}
.sd_ca_deffence_p{
top:22px;
}
.sd_ca_hit_p{
top:43px;
}
.box3{
top:10px;
}
.box3 img{
width:55%;
}
.box3 span{
font-size:11px;
}
.sd_ca_cost_p{
height:17px;
}
.sd_ca_summon_c {
height:17px;
}
.line{
margin:10px auto;
}
.box4 img{
width:26%;
}
.box4 p{
font-size:15px;
}
.box4 p span{
font-size:15px;
}
.box4 span, .box5 span, .kibun span {
font-size:14px;
}
.sd_ca_skill_subtitle span,
.kibun_box .sd_ca_kibun_subtitle span {
font-size:17px;
} div.cp_actab label img{
position:relative;
left:30px;
height:18px;
}
div.cp_actab label span{
color:#ffe404;
left:60px;
top:-2px;
font-size:12px;
}
.cp_actab label::after{
top:0px;
left:19px;
width:20px;
height:20px;
}
.sd_ca_chara_details img.clickbtn,
.sd_ca_chara_kibun img.clickbtn{
width:48px;
top:-5px;
left:25px;
}
.i_mark_icon{
width: 25px;
height: 25px;
left: -3px;
top: 10px;
}
.ca_newbtn{
width:40px;
height:20px;
top:47px;
}
li.tokui_title,
li.nigate_title,
li.tokushu_title {
height:50px;
}
li.tokui_title img,
li.nigate_title img,
li.tokushu_title img {
width:40%;
}
li.tokui_title,
li.nigate_title,
li.tokushu_title {
height: 15.46vw;
}
li.tokui_title div,
li.nigate_title div,
li.tokushu_title div{
top:30px;
}
li.tokui_title div img,
li.nigate_title div img,
li.tokushu_title div img{
width:23px;
left:4px;
top:5px;
}
li.tokui_title div span,
li.nigate_title div span,
li.tokushu_title div span {
left:28px;
top:10px;
font-size:12px;
}
.tokui_subtitle, .nigate_subtitle{
height: 10.7vw;
}
.tokui_subtitle img, .nigate_subtitle img{
width:55%;
}
.sd_ca_speed_p{
height:20px;
}
.ca_popup div.modal-wrap{
width:325px;
height:325px;
font-size:18px;
bottom:35vw;
}
.ca_chara_area{
top:10px;
left:112px;
}
.ca_chara_list{
width:19%;
}
.ca_text_area{
padding:15px 15px 0px 25px;
width:87%;
top:100px;
letter-spacing:1.2px;
font-size:15px;
}
li.tokushu_title{
height:64px;
}
.ca_nashi{
height:48px;
}
.ca_nashi img{
width:18%;
padding-top:12px;
}
.ca_chara_link{
right:17px;
bottom:5px;
}
.ca_chara_link a{
width:125px;
height:38px;
}
.ca_chara_link img{
width:125px;
}
.ca_footer p{
font-size:10px;
}
.ca_footer div.footer_aso{
width:240px;
}
.ca_chara_area img{
width:84px;
}
#ca_back_btn {
position: absolute;
top: 102px;
right: 20px;
width:45px;
}
#ca_top_btn {
position: fixed;
bottom: 10px;
right: 20px;
width:45px;
} .status_group{
width:100%;
}
#sd_ca_parameter {
position: relative;
display: block;
height: 55vw;
max-height:340px;
}
.icon_voice_group{
position:relative;
width:auto;
}
.chara_icon {
width:30%;
}
.chara_icon img {
width:100%;
}
.voice_actor {
text-align: left;
position: absolute;
margin: 31vw 0 0 2px;
}
.voice_actor p {
font-size: 13px;
padding:3px 0 0 10px;
}
.status_group {
position:absolute;
width:auto;
}
.sg_first {
width:100%;
display:block;
}
.sg_second {
width: 100%;
display: flex;
padding: 0 10px;
box-sizing: border-box;
margin-top: 10px;
}
.sg_box_1_1 {
display: flex;
width: 69.5%;
height: auto;
box-sizing: border-box;
padding: 8.8vw 0 4vw;
margin-left: 30.5%;
}
.type_icon {
width:9.626vw;
padding: 0 0.5vw 0 0;
}
.sg_box_1_2 {
width: auto;
height: auto;
display: block;
}
.atp_dfp_hp ul li {
font-size:18px;
padding-right: 1vw;
line-height: 6.68vw;
}
.atp_dfp_hp ul li img {
width:7.49vw;
}
.sg_box_2_1 {
width:44%;
height: 18vw;
}
.sg_box_2_2 {
width:56%;
height: 18vw;
}
.status_item ul li {
font-size:15px;
line-height: 20px;
padding: 0 3px 0 2px;
}
.status_value ul li {
font-size:15px;
line-height: 20px;
width: 30vw;
padding: 0 3px 0 0;
}
.status_item ul li:first-child {
width: 26.5vw;
}
.status_value ul li:first-child {
width: 37vw;
}
.sd_ca_chara_comment {
border: solid 1px #b0b0b0;
height:6.6vw;
margin:10px auto;
width:97%
}
.sd_ca_chara_comment span {
line-height: 5.6vw;
font-size:13px;
margin-left:12px;
position:relative;
top:-3px;
}
.movie_box .mov_thumbnail {
width:90%;
}
.skill_movie_group, .urawaza_movie_grou {
display:block;
min-height:auto;
}
.skill_box, .urawaza_box, .gachiskill_box {
width:100%;
}
.sd_ca_skill_title,
.sd_ca_ability_title,
.sd_ca_urawaza_title,
.sd_ca_gachiskill_title {
width:26%;
}
.movie_box {
width: 100%;
box-sizing: border-box;
padding: 20px 0;
}
.movie_box .mov_thumbnail {
position:relative;
width:95%;
height: 45.8vw;
}
.movie_box .mov_thumbnail img {
top:-8.25vw;
}
.skill_box span,
.ability_box,
.urawaza_box p,
.urawaza_box p.urawaza_remarks,
.gachiskill_box p,
.gachiskill_box p.gachiskill_detail,
.kibun_box p.kibun_remarks{
font-size:14px;
display:block;
}
.skill_box .sd_ca_skill_subtitle span,
.urawaza_box .sd_ca_urawaza_subtitle span,
.gachiskill_box .sd_ca_gachiskill_subtitle span,
.ability_box .sd_ca_ability_subtitle span, .kibun_box .sd_ca_kibun_subtitle span {
font-size:17px;
margin-left: 1px;
}
#batsu {
width:16px;
height:16px;
}
#batsu::before, #batsu::after {
width:16px;
}
}
@media screen and (max-width:390px) {
.sd_ca_chara_comment {
margin:10px auto;
}
.sg_box_1_1 {
padding: 8.8vw 0 2vw;
}
}
@media screen and (max-width:365px) {
.status_item ul li:nth-child(2), .status_value ul li:nth-child(2){
font-size:14px;
}
.sd_ca_chara_comment span{
font-size:12px
}
} .video-container {
width: 89.856%;
max-width: 590px;
height: 59.664vw;
max-height: 370px;
top: -20%;
}
@media screen and (min-width:415px) {
.video-container {
top: 0;
}
}
@media screen and (min-width:1024px) {
.video-container {
max-width:812px;
max-height:520px;
}
.skill_movie_group, .urawaza_movie_grou {
min-height:275px;
}
} @media screen and (min-width:375px) and (max-width:480px) {
.chara_icon {
width:110px;
}
.ca_wrap {
width:100%;
max-width:375px;
}
.voice_actor {
margin:114px 0 0 2px;
}
.sg_box_1_1 {
margin-left:112px;
padding:31px 0 7px;
}
.type_icon {
width:36px;
padding:0 2px 0 0;
}
.atp_dfp_hp {
padding-top:1px;
}
.atp_dfp_hp ul li{
padding-right:4px;
line-height:25px
}
.atp_dfp_hp ul:nth-child(1){
top:-1px;
}
.atp_dfp_hp ul:nth-child(2){
top:-6px;
}
.atp_dfp_hp ul li:nth-child(2){
position:relative;
top:-2px;
}
.atp_dfp_hp ul li img {
width:28px;
}
.status_item ul li:first-child {
width:99px;
}
.status_value ul li:first-child {
width: 138px;
}
.status_value ul li {
width:118px;
}
#sd_ca_parameter {
width:355px;
height:200px;
}
.sd_ca_chara_comment {
height:23px;
}
.sd_ca_chara_comment span {
line-height:21px;
}
.movie_box .mov_thumbnail {
width:312px;
height:172px;
}
.movie_box .mov_thumbnail img{
top:-31px;
}
}
@media screen and (min-width:481px) {
.ca_wrap {
width:100%;
max-width:100%;
max-width:initial;
}
}
  html,
body,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
font-weight: normal;
font-style: normal;
}
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", "Osaka",sans-serif;
}
img{
height:auto;
max-width:100%;
vertical-align: bottom;
}
.hide {
display: none;
}
.hidden {
visibility: hidden;
}
#ca_bg::before {
content:'';
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/sd_ca_haikei.png) center/cover no-repeat;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
-webkit-background-size: cover;
vertical-align: bottom;
}
#contents .date{
color: #ffffff;
font-size: 0.9em;
position: relative;
}
#contents.ca_ichiran{
position:relative;
margin:0 auto;
padding-top:40px;
width:1000px;
}
.ca_wrap{
width:100%;
margin:0 auto;
min-height:73vh;
}
.ca_title{
width:100%;
margin:0 auto;
}
.ca_title img{
position:relative;
display:block;
width:57.5%;
margin:0 auto;
}
.ca_menu{
position:relative;
display:block;
overflow:auto;
margin:35px auto 5px;
}
.ca_menu ul{
list-style: none;
display:flex;
}
.ca_menu li {
width: 16.6%;
height: 6.85vw;
max-height: 76px;
padding: 0 0.5%;
box-sizing: border-box;
position:relative;
}
.ca_menu li:hover {
opacity: 0.7;
cursor: pointer;
}
.chara_list{
position:relative;
display:block;
overflow:auto;
}
.chara_list ul {
list-style: none;
min-height: 430px;
}
.chara_list li{
float:left;
width:12.5%;
position:relative;
}
.chara_list li:hover {
background-color: rgba(255,0,0,0.2);
}
.ca_newbtn{
position:absolute;
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/sd_ca_newbtn.png) no-repeat;
background-size:contain;
width:54px;
height:28px;
z-index:100;
left:0px;
top:20px;
}
#ca_back_btn {
position: absolute;
top: 120px;
right: 20px;
width: 65px;
z-index:100;
}
#ca_back_btn.m-fixed{
position:fixed;
top: 20px;
}
#ca_top_btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 65px;
z-index:100;
}
.ca_footer{
width:100%;
background:black;
margin-top:100px;
position:relative;
text-align:center;
padding: 18px 8px 18px;
box-sizing:border-box;
}
.ca_footer p{
font-size:14px;
color:white;
width:max-content;
margin:0 auto;
}
.ca_footer span{
font-size:10px;
}
.ca_footer a:link,.ca_footer a:visited{
color:white;
}
.ca_footer a:hover{
opacity: 0.7;
}
.ca_footer p{
font-size:10px;
color:white;
width:max-content;
margin:0 auto;
}
.ca_footer span{
font-size:10px;
}
.ca_footer a:link,.ca_footer a:visited{
color:white;
}
.footerLogo {
width:72px;
margin:0 auto 12px;
}
.cr_asobism, .cr_pictoy {
position: relative;
display:block;
font-size:10px;
font-family: Helvetica, Arial, Doroid Sans, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.cr_asobism {
margin-bottom:2px;
}
.cost-all::after,
.cost-01::after,
.cost-02::after,
.cost-03::after,
.cost-04::after,
.cost-05::after {
content:'';
width:100%;
height:100%;
display:block;
}
.ca_menu ul li a {
position: absolute;
display: block;
width: 90%;
height: 80%;
left: 0;
right: 0;
margin: auto;
}
.cost-all::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_all_btn.png) no-repeat;
background-size:contain;
}
.cost-all.active::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_all_btn_m.png) no-repeat;
background-size:contain;
}
.cost-01::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_01_btn.png) no-repeat;
background-size:contain;
}
.cost-01.active::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_01_btn_m.png) no-repeat;
background-size:contain;
}
.cost-02::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_02_btn.png) no-repeat;
background-size:contain;
}
.cost-02.active::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_02_btn_m.png) no-repeat;
background-size:contain;
}
.cost-03::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_03_btn.png) no-repeat;
background-size:contain;
}
.cost-03.active::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_03_btn_m.png) no-repeat;
background-size:contain;
}
.cost-04::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_04_btn.png) no-repeat;
background-size:contain;
}
.cost-04.active::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_04_btn_m.png) no-repeat;
background-size:contain;
}
.cost-05::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_05_btn.png) no-repeat;
background-size:contain;
}
.cost-05.active::after {
background:url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/cost_05_btn_m.png) no-repeat;
background-size:contain;
}  @media screen and (max-width: 1024px) and (min-width: 901px){
#contents .date{
font-size: 0.8em;
}
#contents.ca_ichiran{
width:90%;
}
.ca_title{
width:100%;
margin:0 auto;
}
.ca_title img{
position:relative;
display:block;
width:57.5%;
margin:0 auto;
}
.ca_menu{
position:relative;
display:block;
}
.ca_menu li{
float:left;
width:16.5%;
}
.chara_list{
position:relative;
display:block;
}
.chara_list li{
float:left;
width:112px;
}
.ca_newbtn {
width:47px;
height:24px;
}
}  @media screen and (max-width: 900px) and (min-width: 737px){
#contents .date{
font-size: 1.0em;
padding-bottom:20px;
}
#contents.ca_ichiran{
position:relative;
margin:20px auto;
width:80%;
}
.ca_title{
width:100%;
margin:0 auto;
}
.ca_title img{
position:relative;
display:block;
width:100%;
margin:0 auto;
}
.ca_menu{
position:relative;
display:block;
margin-top:20px;
}
.ca_menu li{
float:left;
width:16.5%;
}
.chara_list{
position:relative;
display:block;
}
.chara_list li{
float:left;
width:16.5%;
}
#ca_back_btn {
position: absolute;
top: 120px;
right: 20px;
width:60px;
}
#ca_top_btn {
position: fixed;
bottom: 20px;
right: 20px;
width:60px;
}
.ca_newbtn{
width: 40.41%;
height: 18.67%;
max-width: 48px;
max-height: 25px;
}
}  @media screen and (max-width: 736px) and (min-width: 481px){
#contents .date{
font-size: 0.7em;
padding-bottom:10px;
}
#contents.ca_ichiran{
position:relative;
margin:25px auto 0;
width:70%;
padding-top:10px;
}
.ca_title{
width:100%;
}
.ca_title img{
position:relative;
display:block;
width:100%;
margin:0 auto;
}
.ca_menu{
position:relative;
display:block;
margin-top:15px;
}
.chara_list ul {
min-height: auto;
}
.ca_menu li {
float:left;
width:16.5%;
}
.ca_menu li:hover {
opacity: 1;
}
.chara_list{
position:relative;
display:block;
}
.chara_list li{
float:left;
width:20%;
}
#ca_back_btn {
position: absolute;
top: 102px;
right: 20px;
width:55px;
}
#ca_top_btn {
position: fixed;
bottom: 20px;
right: 20px;
width:55px;
}
.ca_newbtn{
width: 38.83%;
height: 17.96%;
max-width: 40px;
max-height: 21px;
top: 18px;
}
.ca_footer p{
font-size:10px;
}
}  @media screen and (max-width: 480px) {
#contents.ca_ichiran{
position:relative;
margin:10px auto;
width:98%;
padding-top:10px;
}
#contents .date{
font-size: 0.7em;
}
.ca_title{
width:100%;
margin-top:20px;
}
.ca_title img{
width:95%;
}
.ca_menu{
position:relative;
display:block;
margin-top:15px;
}
.chara_list ul {
min-height: auto;
}
.ca_menu li{
float:left;
width:16.5%;
}
.ca_menu li:hover {
opacity: 1;
}
.chara_list{
position:relative;
display:block;
}
.chara_list ul {
min-height: auto;
}
.chara_list li{
float:left;
width:20%;
position:relative;
}
.ca_newbtn{
top: 15px;
width: 39.34%;
height: 17.71%;
max-width: 37px;
max-height: 19px;
}
#ca_back_btn {
position: absolute;
top: 102px;
right: 20px;
width:45px;
}
#ca_top_btn {
position: fixed;
bottom: 10px;
right: 20px;
width:45px;
}
.ca_footer p{
font-size:10px;
}
.footerLogo {
margin:3px auto 9px;
}
} .scroll-prevent {
overflow: hidden;
}
#h_contents {
width:100%;
background:rgba(0,0,0,0.45);
}
#h_contents .stellarnav {
display:block;
}
.stellarnav .h-logo-sp {
width: 160px;
margin: 10px auto;
padding: 0;
display: none!important;
}
.stellarnav .menu-toggle span.bars {
display: inline-block;
margin: 0;
position: relative;
top: 3px;
}
.stellarnav.dark.left .menu-toggle,
.stellarnav.dark.right .menu-toggle,
.stellarnav.light.left .menu-toggle,
.stellarnav.light.right .menu-toggle {
background: #fff;
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 60px;
border-radius: 50%;
padding: 20px;
z-index: 1001;
}
.stellarnav.mobile.left ul,
.stellarnav.mobile.right ul {
border: none;
max-width: 100%;
margin: 0 auto;
background: url(https://www.asobism.co.jp/social/shirodora/img/base/patan.png) #fff center center;
z-index: 10000;
}
.stellarnav.mobile.light li {
font-size: 0;
}
.stellarnav.mobile.light li a {
padding: 5px 0;
border: none;
background: url(https://www.asobism.co.jp/social/shirodora/img/base/header-menu-kusari.png) no-repeat bottom center;
background-size: contain;
}
.stellarnav.mobile.light li:nth-child(3) {
margin-top: 60px;
background-size: contain;
}
.stellarnav.mobile.light li:nth-child(7) a {
background: none;
}
.stellarnav.mobile.light .line {
height: 10px;
background: transparent url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/header-menu-line.png) no-repeat top center;
background-size: contain;
margin-top: 40px;
}
.stellarnav.mobile.light .line + li {
padding-top: 10px;
}
.stellarnav.mobile.light li:first-child a,
.stellarnav.mobile.light li.h-logo-sp,
.stellarnav.mobile.light li.h-logo-sp a {
border: none;
background: none;
margin-right: auto;
margin-left: auto;
padding: 0;
}
.stellarnav.mobile ul.floatMenu-dl {
display: flex;
justify-content: center;
align-items: center;
width: calc(100% - 56px);
margin-top: 10px;
max-width: 560px;
}
.stellarnav.mobile > ul > li > a {
padding: 0 0 0 20px;
}
.stellarnav.mobile .floatMenu-dl li {
display:block;
}
.stellarnav.mobile .floatMenu-dl li:first-child {
width: 45%;
}
.stellarnav.mobile .floatMenu-dl li:nth-child(2) {
width: 55%;
}
.stellarnav.mobile.light .floatMenu-dl li a {
background: none;
padding: 5px;
}
.stellarnav .menu-toggle span.bars {
margin: 0;
}
.stellarnav .menu-toggle span.bars span {
width: 20px;
height: 3px;
}
.stellarnav .icon-close {
width: 40px;
height: 45px;
}
.stellarnav .icon-close:after,
.stellarnav .icon-close:before {
width: 30px;
}
.stellarnav.mobile.left .close-menu,
.stellarnav.mobile.right .close-menu {
position: absolute;
right: 0;
width: auto;
z-index: 1002;
}
.stellarnav .sNav-menu a{
display: flex;
justify-content: center;
align-items: center;
min-height: 65px;
height: 13vw;
}
.stellarnav .sNav-menu-text{
min-height: 20px;
height: 4vw;
padding-bottom: 1vw;
}
.sNav{
padding-bottom: 60px!important;
}
#sNav-btn{
max-width: 400px;
margin: 0 auto;
padding: 0 30px;
}
#sNav-btn img{
width: 100%;
height: auto;
}
#sNav-btn a{
display: block;
background: none;
margin-top: 8px;
padding: 0;
}
@media screen and (min-width:1023px){
.stellarnav{
display:none !important;
}
}
.mainHeader {
max-width: 1020px;
width: 100%;
}
.mainHeader ul {
display: flex;
align-items: center;
padding: 0;
box-sizing: border-box;
}
.mainHeader li:first-child { } .mainHeader li.h-logo {
display: block;
width: 160px;
height: 62px;
margin: 10px auto;
padding: 0;
}
.mainHeader-nav {
display: none;
}
#h_contents li.h-logo-sp {
display: block;
width: 160px;
margin: 10px auto;
padding: 0;
}
#h_contents .apply-floatmenu-dl {
padding: 25px;
}
#h_contents .floatMenu-dl li {
width: 45%;
}
#h_contents .floatMenu-dl li:nth-child(2) {
width: 55%;
}
@media screen and (min-width: 1024px) {
#h_contents .stellarnav {
display:none;
}
.mainHeader .menu {
display: flex;
align-items: flex-start;
width: 757px;
height: 61px;
padding: 0;
box-sizing: border-box;
background: url(//info-cf.asobism.co.jp/corpsite_wp/wp-content/themes/asobism/images/shirodora/chara_aishou/bg_header_menu_black.png) no-repeat;
}
.mainHeader .menu > li {
height: 61px;
text-indent: -9999px;
}
.mainHeader .menu > .news {
width: 122px;
}
.mainHeader .menu > .chara {
width: 187px;
}
.mainHeader .menu > .movie {
width: 132px;
}
.mainHeader .menu > .special {
width: 147px;
}
.mainHeader .menu > .qa {
width: 110px;
}
.mainHeader .menu > li a {
display: block;
height: 61px;
}
.mainHeader {
display: block;
max-width: 1020px;
background: none;
width: 100%;
max-height: 90px;
margin: 0 auto;
padding: 0;
}
.mainHeader li.h-logo {
height: 70px;
width: auto;
margin: 0 auto 0 0;
}
.mainHeader .logo {
height: 70px;
vertical-align: top;
}
.mainHeader ul {
display: flex;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
}
.mainHeader > ul {
padding: 10px 0;
}
.mainHeader a img:hover{
opacity: 0.7;
}
.mainHeader .h-logo{
flex-shrink: 0;
margin-right: 10px!important;
}
.mainHeader-nav{
display: flex;
align-items: center;
justify-content: space-between;
}
.mainHeader-nav-sns{
display: flex;
align-items: center;
}
.mainHeader-nav-sns div{
margin-left: 6px;
}
} .footerBg {
margin-top: 16px;
background: #000;
color: #fff;
font-size: 12px;
font-family: Meiryo, Osaka, "Hiragino Kaku Gothic Pro", "MS P Gothic", sans-serif;
content-visibility: auto;
contain-intrinsic-size: 600px;
}
.footerNav {
background: #000;
padding: 10px;
font-size:12px;
}
.footerNav ul {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 480px;
margin: 10px auto;
}
.footerDl{
display:block;
flex-wrap:nowrap;
order: 1;
}
.footerDl li{
width:45%;
}
.footerDl li:first-child{
margin-right:10px;
}
.footerDl li:nth-child(2){
width:55%;
}
.footerInfo {
display: flex;
justify-content: flex-start;
align-items: flex-start;
max-width: 350px;
width:100%;
margin: 0 auto;
order: 2;
}
.footerInfo ul {
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
max-width:290px;
margin: 0 0 0 10px;
display: table;
}
.footerInfo li span{
display:table-cell;
}
.footerInfo li span:first-child {
width:4.1em;
}
.footerInfo div img {
margin-top:4px;
}
.footerMenu {
background: #000;
}
.footerMenu li{
background: #000;
border-bottom: 1px solid #bdbdbd;
}
.footerMenu li:nth-child(1){
border-top: 1px solid #bdbdbd;
}
.footerMenu li a {
position: relative;
display: block;
padding: 12px 24px 12px 12px;
text-decoration: none;
color: #fff;
}
.footerMenu li a:before,
.footerMenu li a:after {
position: absolute;
top: 50%;
right: 5px;
display: block;
content: "";
width: 12px;
height: 3px;
background: #888;
border-radius: 4px;
}
.footerMenu li a:before {
margin-top: -4px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.footerMenu li a:after {
margin-top: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.mainFooter.mainFooter {
margin: 0 auto 0;
text-align: center;
padding: 18px 8px 18px;
background: #000;
}
.mainFooter img:hover {
opacity: 0.6;
}
@media screen and (min-width: 980px) {
.footerInfo {
order: 1;
max-width: inherit;
}
.footerInfo .shirodora-ico,
.footerInfo .shirodora-ico > img {
width: 64px;
}
.footerInfo .shirodora-ico {
margin-right: 5px;
}
.footerNav {
display: flex;
width: 980px;
margin: auto;
padding: 20px 5px 20px 20px;
box-sizing: border-box;
}
.footerNav ul {
max-width: inherit;
}
.footerNav ul.footerDl {
max-width: 400px;
order: 2;
margin: auto;
vertical-align: top;
}
.footerNav ul.footerDesc {
max-width: 450px;
}
.footerMenu {
margin-top:-1px;
padding-bottom: 21px;
}
.footerMenu ul {
display: flex;
flex-wrap:nowrap;
justify-content: center;
align-items: center;
width: 100%;
margin:0 auto;
}
.footerMenu ul li {
margin: 0 5px;
}
.footerMenu li,
.footerMenu li:nth-child(1) {
border: none;
}
.footerMenu li a {
color: #b4b4b4;
border-bottom: 1px solid #b4b4b4;
text-decoration: none;
-webkit-transition: border-color 0.3s, color 0.3s;
transition: border-color 0.3s, color 0.3s;
padding:0;
}
.footerMenu li a::before {
margin-top:0;
transform:none;
-webkit-transform: none;
position:relative;
top: auto;
right: auto;
display:inline;
width:auto;
height:auto;
background:none;
border-radius: 0;
}
.footerMenu li a::after {
display:none;
}
.footerMenu li a:hover {
color: #ff0;
border-color: #ff0;
}
.mainFooter {
margin: -1px auto 0;
}
}