トップ >>
@charset "UTF-8";
/* -- all -- */
/* -- sns -- */
.sns-wrap {
margin: 5px 0 5px 3px !important;
}
.sns-wrap .fb-like {
margin-top: -2px !important;
}
.sns-wrap .line {
display: inline-block;
margin-top: -2px !important;
padding-left: 5px\9 !important;
line-height: 0;
}
.tokusetsu {
width: 720px;
margin: 0;
padding: 0;
background-color: #f0f5f8;
color: #222222 !important;
font-family: ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, ‘Meiryo UI’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;
font-size: 62.5% !important;
line-height: 1 !important;
text-align: center;
overflow: hidden;
}
.tokusetsu a {
text-decoration: none !important;
-webkit-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.tokusetsu a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: alpha(opacity=70);
}
.tokusetsu div, .tokusetsu p, .tokusetsu h3 {
margin: 0 !important;
padding: 0 !important;
}
/* -- top -- */
.tokusetsu .top {
position: relative;
width: 100%;
padding: 20px !important;
border-bottom: 5px solid #ffffff;
background-color: #cbedff;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
-ms-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
-o-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
}
.tokusetsu .top:before {
display: inline-block;
position: absolute;
top: 25px;
left: 30px;
width: 63px;
height: 51px;
background: url(../imgs/bird.png) no-repeat left top;
background-size: contain;
content: "";
}
.tokusetsu .top h3 {
position: relative;
padding: 3px !important;
left: 80px;
color: #1da1f2 !important;
font-size: 1.3em;
font-size: 13px !important;
font-weight: bold;
text-align: left;
letter-spacing: -0.5px;
}
.tokusetsu .top h3:before {
display: block;
top: -37px;
width: 151px;
height: 37px;
margin: 3px 0 !important;
background: url(../imgs/twitter.png) no-repeat left top;
background-size: contain;
content: "";
}
.tokusetsu .top p {
display: inline-block;
position: absolute;
bottom: 15px;
right: 30px;
height: 25px;
padding: 0 20px !important;
background-color: #fffca1;
color: #66c5ff;
font-size: 1.3em;
font-size: 13px !important;
font-weight: bold;
line-height: 26px !important;
-webkit-border-radius: 12.5px;
-ms-border-radius: 12.5px;
-moz-border-radius: 12.5px;
-o-border-radius: 12.5px;
border-radius: 12.5px;
}
/* -- main -- */
.tokusetsu .main {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 20px auto !important;
text-align: center;
}
.tokusetsu .main a {
display: inline-block;
width: 46%;
margin: 10px 8px !important;
background-color: #ffffff;
cursor: pointer;
vertical-align: top;
-webkit-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.2);
-ms-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.2);
-o-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.2);
box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.2);
}
.tokusetsu .main a:hover {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: alpha(opacity=100);
-webkit-box-shadow: 0px 0px 5px 0px rgba(29, 161, 242, 0.5);
-ms-box-shadow: 0px 0px 5px 0px rgba(29, 161, 242, 0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(29, 161, 242, 0.5);
-o-box-shadow: 0px 0px 5px 0px rgba(29, 161, 242, 0.5);
box-shadow: 0px 0px 5px 0px rgba(29, 161, 242, 0.5);
}
.tokusetsu .main .contents {
position: relative;
padding-bottom: 10px !important;
background-color: #ffffff;
text-align: left;
overflow: hidden;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.tokusetsu .main > .contents {
display: inline-block;
width: 46%;
margin: 10px 8px !important;
}
.tokusetsu .main .charaani, .tokusetsu .main .jsb, .tokusetsu .main .toys, .tokusetsu .main .hisoku, .tokusetsu .main .game, .tokusetsu .main .caw {
position: relative;
}
.tokusetsu .main .charaani:before, .tokusetsu .main .jsb:before, .tokusetsu .main .toys:before, .tokusetsu .main .hisoku:before, .tokusetsu .main .game:before, .tokusetsu .main .caw:before {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-top: 30.34% !important;
content: "";
}
.tokusetsu .main .charaani:before {
background: url(../imgs/t_head_charaani.jpg) no-repeat left top;
background-size: contain;
}
.tokusetsu .main .jsb:before {
background: url(../imgs/t_head_jsb2.jpg) no-repeat left top;
background-size: contain;
}
.tokusetsu .main .caw:before {
background: url(../imgs/t_head_caworks.jpg) no-repeat left top;
background-size: contain;
}
.tokusetsu .main .toys:before {
background: url(../imgs/t_head_toys.jpg) no-repeat left top;
background-size: contain;
}
.tokusetsu .main .hisoku:before {
background: url(../imgs/t_head_hisoku.jpg) no-repeat left top;
background-size: contain;
}
.tokusetsu .main .game:before {
background: url(../imgs/t_head_game2.jpg) no-repeat left top;
background-size: contain;
}
.tokusetsu .main .contents img {
position: absolute;
top: 80px;
left: 10px;
width: 80px;
height: 80px;
border: 2px solid #ffffff;
background-color: #ffffff;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.tokusetsu .main .contents dl {
margin: 15px 10px 15px 100px !important;
text-align: left;
}
.tokusetsu .main .contents dl dt {
color: #222222 !important;
font-size: 1.6em;
font-size: 16px !important;
font-weight: bold;
}
.tokusetsu .main .contents dl dd {
color: #1da1f2 !important;
font-size: 1.3em;
font-size: 13px !important;
}
.tokusetsu .main .contents p {
margin: 10px !important;
padding: 15px 5px 0 !important;
border-top: 1px solid #e7ecf0;
color: #222222 !important;
font-size: 1.2em;
font-size: 12px !important;
line-height: 1.6 !important;
}
.tokusetsu .main .dummy {
background: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/* -- link -- */
.tokusetsu .link {
width: 100%;
padding: 25px 5px 20px !important;
background-color: #ffffff;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
-ms-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
-o-box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
box-shadow: 0px 0px 5px 0px rgba(136, 136, 136, 0.5);
}
.tokusetsu .link a {
display: inline-block;
width: 120px;
height: 50px;
margin: 0 8px !important;
color: #ffffff !important;
font-size: 1.3em;
font-size: 13px !important;
font-weight: bold;
text-align: center;
line-height: 52px !important;
-webkit-border-radius: 1px;
-ms-border-radius: 1px;
-moz-border-radius: 1px;
-o-border-radius: 1px;
border-radius: 1px;
}
.tokusetsu .link a.facebook {
background-color: #3b5997;
-webkit-box-shadow: 1px 1px 0px 2px #2d4372;
-ms-box-shadow: 1px 1px 0px 2px #2d4372;
-moz-box-shadow: 1px 1px 0px 2px #2d4372;
-o-box-shadow: 1px 1px 0px 2px #2d4372;
box-shadow: 1px 1px 0px 2px #2d4372;
}
.tokusetsu .link a.line {
background-color: #25af01;
-webkit-box-shadow: 1px 1px 0px 2px #249704;
-ms-box-shadow: 1px 1px 0px 2px #249704;
-moz-box-shadow: 1px 1px 0px 2px #249704;
-o-box-shadow: 1px 1px 0px 2px #249704;
box-shadow: 1px 1px 0px 2px #249704;
}
.tokusetsu .link a.google {
background-color: #dc4b3a;
-webkit-box-shadow: 1px 1px 0px 2px #ab3a2a;
-ms-box-shadow: 1px 1px 0px 2px #ab3a2a;
-moz-box-shadow: 1px 1px 0px 2px #ab3a2a;
-o-box-shadow: 1px 1px 0px 2px #ab3a2a;
box-shadow: 1px 1px 0px 2px #ab3a2a;
}
.tokusetsu .link a.instagram {
background-color: #bf36a0;
-webkit-box-shadow: 1px 1px 0px 2px #9b187d;
-ms-box-shadow: 1px 1px 0px 2px #9b187d;
-moz-box-shadow: 1px 1px 0px 2px #9b187d;
-o-box-shadow: 1px 1px 0px 2px #9b187d;
box-shadow: 1px 1px 0px 2px #9b187d;
}
.tokusetsu .link a.weibo {
background-color: #e75b16;
-webkit-box-shadow: 1px 1px 0px 2px #c03f00;
-ms-box-shadow: 1px 1px 0px 2px #c03f00;
-moz-box-shadow: 1px 1px 0px 2px #c03f00;
-o-box-shadow: 1px 1px 0px 2px #c03f00;
box-shadow: 1px 1px 0px 2px #c03f00;
}
/* -- backtop -- */
.tokusetsu .backtop {
position: fixed;
z-index: 9999;
bottom: 10px;
right: 10px;
}
.tokusetsu .backtop a {
display: block;
position: relative;
width: 60px;
height: 60px;
background-color: rgba(136, 136, 136, 0.95);
text-align: center;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.tokusetsu .backtop a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: alpha(opacity=70);
}
.tokusetsu .backtop i {
margin: 10px auto !important;
color: #ffffff !important;
font-size: 4em;
}