@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;
}
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;
}
}