/*
Theme Name: sakatsuku
Text Domain: sakatsuku
Version: 1.0
*/
html,body{max-width:480px; font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size:15px; padding:0; margin:0 auto; color:#2b2b2b;}
header{padding:5px 0; background:#000;background-size:contain;}
header div{font-size:13px;max-width:480px; margin:auto; padding-left:10px;}
header div .site-icon{vertical-align:middle;}
header a{color:#000; text-decoration:none; text-shadow:1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;; font-weight:bold;}
header a:visited{color:#000;}
header h1{font-size:13px; margin:0; padding:0;}

footer{font-size:12px; line-height:30px; background:#292929; color:#cccccc; padding:8px 0;text-align:center;}
footer a{color:#efefef;}

nav{max-width:480px; margin:0 auto 3px;}
nav ul{width:100%;padding:0; margin:0; display:table; table-layout:fixed;}
nav li{width:calc(99% / 3); display:table-cell; display:inline-block; text-align:center; font-size:.75em; border-bottom:1px solid #ddd;}
nav li:nth-child(2),nav li:nth-child(5),nav li:nth-child(8),nav li:nth-child(11){border-right:1px solid #ddd;border-left:1px solid #ddd;}
nav li a{display:block; padding:7px 0; color:#181f23; font-weight:bold;}
nav li a:hover{background:#efefef;}

.bbp-attachments-form{display:inline !important;}


img{max-width:98%;}
li{list-style-type:none;}
table{width:100%;display: table;margin-bottom:8px;}
th{text-align:center;background: #f2f2f2;color: #111;padding:4px;}
td{padding:4px;}
td img{vertical-align:middle;}
table,th,td{border-collapse: collapse;border:1px solid #d1d1d1;}
dd{margin-bottom:5px;}

.table_fix{table-layout:fixed}
.align-center{text-align:center;}
.align-left{text-align:left;}

.breadcrumb {padding:0;margin: 0 ;-webkit-overflow-scrolling: touch;overflow-x: auto;background:#ededed;}
.breadcrumb::-webkit-scrollbar {height: 2px;}
.breadcrumb::-webkit-scrollbar-thumb {border-radius: 3px;background: #999;}
.breadcrumb ul {display: table; padding-inline-start:10px;margin-block-start:5px;margin-block-end:5px;}
.breadcrumb ul li {font-size: 12px;display: table-cell;white-space: nowrap;vertical-align: middle;padding-right: 26px;position: relative;}
.breadcrumb ul li:last-child {padding-right: 0;}
.breadcrumb ul li:last-child:after {display: none;}
.breadcrumb ul li:after {position: absolute;display: block;content: '';content: ">";top: 3px;right: 8px;}
.breadcrumb.no-scroll ul {display: block;}
.breadcrumb.no-scroll ul li {display: inline-block;margin-bottom: 12px;white-space: normal;}
.breadcrumb.no-scroll ul li:after {top: -4px;}

h1.article{padding:0 5px;font-size:24px; margin:10px 0 5px;white-space:word-wrap;}
h1.article .category_title{font-size:12px; color:#8c8c8c; display:block;}

.single_area{padding:0 8px;}
.single_area h2{color:#fff; background:#383838;padding:12px 8px;font-size:24px;margin:8px 0;}
.single_area h3{font-size:17px; position: relative;padding: 1em 1em 1em 1.5em;line-height: 1.4em;color: #446689;border-top: dotted 1px gray;border-bottom: dotted 1px gray;background: #fffff4;border-left:none;  margin:10px 0;}
.single_area h3::before{font-family: "Font Awesome 5 Free";content: "\f1e3";font-weight: 900;position: absolute;font-size: 1.05em;left: 0.35em;top: 0.9em;color: #446689;}
.single_area h4{font-size:15px; position: relative;line-height: 2;display: inline-block;background:#fff5f5; font-weight:bold; margin:5px 0; padding:4px 5px;}
.single_area h4:before, h4:after{position: relative;font-family: "Font Awesome 5 Free";font-weight: 900;display: inline-block;font-size: 1.0em;color: #ff4040;}
.single_area h4::before {content:"\f053";font-weight: 900;padding-right: 0.3em;padding-left: 0.3em;}
.single_area h4::after {content:"\f054";font-weight: 900;padding-left: 0.3em;padding-right: 0.3em;}
.single_area h5{font-size:13px; font-weight:bold; margin-top:8px; color:black;background:#f8fff7;padding:0 0 0 5px;}
.single_area h5::before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:'\f0a4'; margin-right:5px; color:green;}
.single_area p,td{line-height:1.8em; padding:6px 3px;}

.data{font-size:12px; color:#787878;}
.description{font-size:10px; color:#787878;}
.chara-img{background:#efefef;}
.status th, .status td{padding:5px 0; line-height:12px;}
.list_character td{font-size:13px;line-height:13px; padding:2px 4px;}
.info_box{padding:8px; border:1px solid #ccc; border-radius:5px; line-height:1.5em; background:#f7f7f7;}
.info_box1{padding:8px; border:1px solid #37aecc; border-radius:5px; line-height:1.5em; background:#ebfbff;}
.info_box2{padding:8px; border:1px solid #41cc37; border-radius:5px; line-height:1.5em; background:#eeffeb;}
.info_box3{padding:8px; border:1px solid #cc375c; border-radius:5px; line-height:1.5em; background:#ffebec;}
.info_box4{padding:8px; border:1px solid #cc375c; border-radius:5px; line-height:1.5em; background:#ffebec;}
.info_box li,.info_box1 li,.info_box2 li,.info_box3 li,.info_box4 li{margin-top:4px;}

.new_chara{padding-inline-start: 0;}
.new_chara li{width:24%;display:inline-block;vertical-align:top;margin-bottom:12px;text-align:center;font-size:11px;line-height:13px; position: relative;}
.new_chara li img{width:80px;}

.pagenav{text-align:center; border:1px solid #DDD; background-color:#FFF; border-radius:5px; margin-bottom:10px; padding:15px 0;}
.pagenav .disabled{background-color:#4169e1; color:#fff; display:inline-block; border:1px solid #4169e1; margin:0 5px; padding:4px 7px;}
.pagenav a{color:#222; display:inline-block; border:1px solid #4169e1; margin:0 3px 3px; padding:4px 7px;}
.pagenav a:hover,.single .pagenav a:hover{background-color:#4169e1; color:#fff; text-decoration:none;}

.search_head{padding:8px 5px;}
.search_head input[type=search] {-webkit-appearance: none;display: inline-block;margin-right: 0;padding: 10px;width:85%;height: 40px;font-size: 100%;box-sizing: border-box;border: 1px solid #ccc;border-right: none;}
.search_head input[type=submit] {-webkit-appearance: none;display: inline-block;padding: 0 10px;color: #fff;width: 50px;height: 40px;font-size: 100%;vertical-align: top;border: none;border-radius: 0 5px 5px 0;background: #1f76e2;}

.search_box{padding:8px 5px;}
.search_box .field{width:60%;}
.search_box input[type=search] {-webkit-appearance: none;display: inline-block;margin-right: 0;padding: 10px;width:85%;height: 40px;font-size: 100%;box-sizing: border-box;border: 1px solid #ccc;}
.search_box input[type=submit] {-webkit-appearance: none;display: inline-block; margin:10px auto; color: #fff;width: 150px;height: 40px;font-size: 100%;vertical-align: top;border: none;border-radius: 5px;background: #1f76e2;}

.contents_list h2{color:#000; font-size:1.2em; background:#fff; text-shadow:none; margin:0 0 5px; padding:6px 5px 0; border:none;}
.contents_list{background:transparent; padding:5px 0; border-radius:5px;}
.contents_list::before{content:'';}
.contents_list ul {border: solid 2px #e91e63;padding: 0 0.5em;position: relative;background:#fffafc; border-radius:5px;}
.contents_list ul li {line-height: 1.5;padding: 0.5em 0 0.5em 2em;border-bottom: dashed 1px silver;list-style-type: none; font-size:13px;}
.contents_list ul li:before {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f105";position: absolute;left : 1.5em;color: #e91e63;}
.contents_list ul li.top{line-height: 1.5;padding: 0.5em 0 0.5em 1.4em;border-bottom: dashed 1px silver;list-style-type: none;}
.contents_list ul li.top:before {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f138";position: absolute;left : 0.5em;color: #e91e63;}
.contents_list ul li:last-of-type {border-bottom: none;}

.sidemenu_box_top{font-size:1.3em;color:#fff; font-weight:bold; background:#383838; padding:12px 8px; margin:0;}
.sidemenu_box{font-size:1.3em;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);}
.sidemenu_title{font-weight:bold; margin:0; padding:8px 0 8px 8px; background:#ebebeb;}
.sidemenu_subtitle{font-weight:bold; margin:0; padding:5px 0 5px 7px; border-left:10px solid #383838; border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8;}
.sidemenu_lisk_list{margin:0;padding:0;}
.sidemenu_lisk_list li{font-weight:bold; margin:0; padding:10px 5px 10px 14px; border-bottom:1px solid #d8d8d8;}
.sidemenu_lisk_list li a{color:#1379b8;}
.sidemenu_lisk_list li:last-child{border:none;}
.sidemenu_opcl{margin:0;padding:0;}
.sidemenu_opcl label{display:block;margin:0;padding : 13px 12px;font-weight: bold;cursor :pointer;transition: all 0.05s;}
.sidemenu_opcl label:before{content:'＋';font-family: 'FontAwesome';padding-right: 8px;}
.sidemenu_opcl input{display: none;}
.sidemenu_opcl .open_area{height:0;margin:0;padding:0;overflow: hidden;opacity:0;transition:0.05s;}
.opcl_area:checked + label + .open_area{height:auto;padding:0 0 0 5px;opacity:1; border-top:1px solid #d8d8d8;}
.opcl_area:checked + label:before{content: '―';}

.pagetop {position: fixed;bottom: 30px;right: 5px;}
.pagetop a {display: block;background-color: #ccc;text-align: center;color: #222;font-size: 10px;text-decoration: none;padding: 5px;filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;}
.pagetop a:hover {display: block;background-color: #b2d1fb;text-align: center;color: #fff;font-size: 10px;text-decoration: none;padding:5px;filter:alpha(opacity=50);-moz-opacity: 0.8;opacity: 0.8;}

.tocomment {position: fixed;bottom: 30px;left: 5px;}
.tocomment a {display: block;background-color: #ccc;text-align: center;color: #222;font-size: 10px;text-decoration: none;padding: 5px;filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;}
.tocomment a:hover {display: block;background-color: #b2d1fb;text-align: center;color: #fff;font-size: 10px;text-decoration: none;padding:5px;filter:alpha(opacity=50);-moz-opacity: 0.8;opacity: 0.8;}

.icon_size3{font-size:24px;}

span.info_genre{width:30px; text-align:center; display:inline-block; color:#fff; text-shadow:#000 1px 1px 0,#000 -1px -1px 0,#000 -1px 1px 0,#000 1px -1px 0,#000 0 1px 0,#000 0 -1px 0,#000 -1px 0 0,#000 1px 0 0; border-radius:5px;padding:2px 5px;}
span.fw{background:#9ae67a}
span.mf{background:#ffcc00}
span.df{background:#6dc2e9}
span.gk{background:#eb6968}
td.fw,td.fw{color:#fff; background:#008000; padding:0;}
td.mf,td.mf{color:#fff; background:#ec6800; padding:0;}
td.df,td.df{color:#fff; background:#0000ff; padding:0;}
td.gk,td.gk{color:#fff; background:#dc143c; padding:0;}
.gray{color:#636363;}
.purple{color:purple;}
.red{color:red}
.blue{color:#00f}
.green{color:green}
.yellow{color:#ff6e00}
.bold{font-weight:bold;}
.normal{font-weight:normal;}
.font10{font-size:10px;}
.font11{font-size:11px;}
.font11l{font-size:11px; line-height:15px;}
.font12{font-size:12px;}
.font13{font-size:13px;}
.fontx2{font-size:2em; line-height:2em;}
.info_howto{text-align:right;}
.valign_top,.valign_top td{vertical-align:top;}

.youtube iframe{width: 100%;}
.black_bg{color:#fff; background: black;}
.red_bg{color:#fff; background: red;}
.blue_bg{color:#fff; background: blue;}
.green_bg{color:#fff; background: green;}
.orange_bg{color:#fff; background:#ff8800;}
.yellow_bg{color:#fff; background:#ffea00;}
.accessory td,.accessory th{font-size:12px; padding:1px 4px;}
.accessory img{width:48px; height:62px;}
.formation_table td{padding:2px;}

.posi_area{margin:0;}
.posi_area td{padding-top:7px;}
.posi_area .red{color:#fff; background: red;}
.posi_area .ora{color:#fff; background:#ff8800;}
.posi_area .yel{color:#fff; background:#ffea00;}

span.rank_bg{width:80px; text-align:center; display:inline-block; color:#fff; text-shadow:#000 1px 1px 0,#000 -1px -1px 0,#000 -1px 1px 0,#000 1px -1px 0,#000 0 1px 0,#000 0 -1px 0,#000 -1px 0 0,#000 1px 0 0; border-radius:5px;padding:10px 5px;}
.font_x2{font-size:2em;}
span.rank_bg a{color:#fff;}
.font_x2{font-size:2em;}

#comments{padding:10px;}
#comments  .comment-form-comment{font-size:1.3em; line-height:1.2em;}
#comment_text{display:block; width:80%; height:150px;}
.comment{margin-bottom:20px;}
.comment .comment-date{margin:0;}
.comment .comment-date .comment-number{font-size:2em; font-weight:bold;}
.comment .comment-date .comment-time{font-size:12px;}
.comment .comment-date .comment-author{color:green; font-size:14px; font-weight:bold;}
.comment .comment_text{padding:3px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background:#efefef;}
.comment .comment_text p{margin:10px;}
.comment-respond h3,.comment-reply-title{display:none;}

.shareList2 {list-style:none;display: flex;flex-wrap:wrap;margin:0;padding:0 0 0 8px;}
.shareList2__item {height:30px;line-height:30px;width:30px;margin:5px 0 0 5px;text-align:center;}
.shareList2__link {display:block;color:#ffffff;text-decoration: none;border-radius: 5px;}
.shareList2__link::before{font-size:16px;display:block;transition: ease-in-out .2s;border-radius: 5px;}
.shareList2__link.icon-twitter{background:#55acee;}
.shareList2__link.icon-facebook{background:#3B5998;}
.shareList2__link.icon-google-plus{background:#dd4b39;}
.shareList2__link.icon-hatebu{background:#008FDE;}
.shareList2__link.icon-pocket{background:#EB4654;}
.shareList2__link.icon-feedly{background:#6cc655;}
.shareList2__link.icon-pinterest{background:#cb2027;}
.shareList2__link.icon-linkedin{background:#0e76a8;}
.shareList2__link.icon-line{background:#1dcd00;}
.shareList2__link.icon-rss{background:#ff9900;}

.bbp-author-name::before{content:"名前：";}
.bbp-author-name{font-weight:bold; color:blue;}
.bbp-topic-started-by a{text-decoration:none;}
.bbp-reply-content{padding-left:15px;}
.bbp-author-role{display:none;}
.bbp-attachments-form{display:inline !important;}
#bbp-container{padding:5px;}
#bbpress-forums div.bbp-the-content-wrapper div.quicktags-toolbar {display: none;}

a.btn {width:100%;font-size:1.2em;position: relative; background: #f5f5f5; -webkit-transform: translateZ(0); display: inline-block; box-sizing: border-box; border: 1px solid; border-radius: 3rem; margin:8px 0; padding: 1.2rem 0 1.2rem 0; color: inherit; text-align: center; line-height: 1; box-shadow: 0 2px 0 #614f38;text-decoration: none;}
.table_td_min td,.table_td_min th{padding:3px;}
.bbp-form legend + p label[for=bbp_anonymous_author] {display: none;}
.bbp-form legend + p:before {content: "名前(任意)";display: block;}

table.scroll {display: block;overflow-x: scroll;white-space: nowrap;-webkit-overflow-scrolling: touch;}
table.scroll tbody {font-size:12px;text-align:center;width: 100%;display:table;}
table.scroll th:first-child{height:2em;position:sticky;left:0;}
table.scroll th:nth-of-type(2) {height:2em;position:sticky;left:57px;}
table.scroll td {padding:2px 6px;}
table.scroll .padding_zero {padding:0;}
table.scroll .black{color:white;background:black;}
table.scroll .red{color:white;background: red;}
table.scroll .blue{color:white;background: blue;}
table.scroll .yellow{color:white;background:#ED551B;}
table.scroll .rank{font-size:8px; color:#666; background: whitesmoke;}
table.scroll .green{color:white;background: green;}

.pagination {clear: both;padding: 20px 0;position: relative;font-size: 14px;line-height: 1em;text-align: center;}
.pagination-box {display: inline-block;}
.pagination span, .pagination a {display: block;float: left;margin: 2px 2px 2px 0;padding: 10px 14px 10px 14px;text-decoration: none;width: auto;color: #fff;background: #47BEA0;border-radius: 50%;}
.pagination span.page-of {background: none;color: #47BEA0;}
.pagination a:hover{color: #47BEA0;background: #F9D635;}
.pagination .current{padding: 10px 14px 10px 14px;color: #47BEA0;background: #F9D635;}
@media only screen and (max-width: 450px) {.pagination {font-size: 12px;line-height: 12px;}
.pagination span, .pagination a {padding: 7px 10px 7px 10px;}
.pagination .current{padding: 7px 10px 7px 10px;}}

.bbs-template{line-height:1.5em;}
.bbs-template dl{padding:0; margin:0;}
.bbs-template dt{color:darkgray; padding:0; margin:0;}
.bbs-template dd{padding:0 0 25px; margin:15px 4px 25px; border-bottom:1px solid darkgray;}

.bbs-loop{padding:0; margin-bottom:25px; border-bottom:1px solid #dcdcdc;}
.bbs-loop li{display: inline-block; margin-bottom:8px;}
.bbs-loop li:nth-of-type(1n) {width:205px; color:#999; }
.bbs-loop li:nth-of-type(2n) {width:calc(100% - 205px); color:#999; text-align:right;}
.bbs-loop li:nth-of-type(2n) a{text-decoration:none; color:#999;}
.bbs-loop li:nth-of-type(3n) {width:305px; font-size:1.3em; font-weight:bold; color:#000;}
.bbs-loop li:nth-of-type(4n) {color:red; width:calc(100% - 305px); text-align:right;}
.bbs-loop div{color:#666; background:#efefef; padding:10px; border-radius:10px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin:8px 0 15px;}
.bbs-loop p{margin:5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bbs-loop .bbp-author-name{display:none;}

.mark_red{background: linear-gradient(transparent 60%, #ffc0cb 60%);}
.mark_blue{background: linear-gradient(transparent 60%, #afeeee 60%);}
.mark_green{background: linear-gradient(transparent 60%, #bfff7f 60%);}
.mark_yellow{background: linear-gradient(transparent 60%, #ffbf7f 60%);}
.mark_gray{background: linear-gradient(transparent 60%, darkgray 60%);}

.up-box{width: 48%;position: relative;display: inline-block;}
.up-box .top-left {font-size: 22px;font-weight: bold;text-shadow:2px 2px 0px #000,-2px 2px 0px #000,-2px -2px 0px #000,2px -2px 0px #000;position: absolute;top: -4px;left: 4px;}
.up-box .rank-ss, .rank-SS{color: #ff1493 !important;}
.up-box .rank-s, .rank-S{color: #ff1493 !important;}
.up-box .rank-A{color: orange !important;}
.up-box .rank-B{color: orange !important;}
.up-box .rank-C{color: orange !important;}
.up-box .rank-D{color: orange !important;}
.up-box .rank-E{color: orange !important;}
.up-box .rank-F{color: orange !important;}
.up-cons td{padding:1px;}
.up-cons span.rank_bg{width:90px; text-align:center; display:inline-block; color:#fff; text-shadow:#000 1px 1px 0,#000 -1px -1px 0,#000 -1px 1px 0,#000 1px -1px 0,#000 0 1px 0,#000 0 -1px 0,#000 -1px 0 0,#000 1px 0 0; border-radius:5px;padding:1px 3px;}
.list_character td div.up-box{width: 33%;}
.list_character td div.up-box .top-left {font-size: 14px;font-weight: bold;text-shadow:1px 1px 0px #000,-1px 1px 0px #000,-1px -1px 0px #000,1px -1px 0px #000;position: absolute;top: -2px;left: 2px;}
.list_character td div.up-box .rank-s{color: #ff1493 !important;}

.chara-toggle-box {
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1em;
}

.chara-toggle-box input[type="checkbox"] {
  display: none;
}

.chara-toggle-box label {
  display: block;
  background: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}

.chara-toggle-box .chara-toggle-content {
  display: none;
  padding: 10px;
  background: #fff;
}

.chara-toggle-box input[type="checkbox"]:checked + label + .chara-toggle-content {
  display: block;
}

.bar-container {
    margin: 4px 0;
    padding: 4px;
    border-radius: 4px;
}
.bar-label {
    font-size: 15px;
    margin-bottom: 2px;
}
.bar {
    background: #ddd;
    border-radius: 3px;
    overflow: hidden;
    height: 18px;
}
.bar-fill {
    height: 100%;
    padding-left: 5px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
    transition: width 0.5s ease;
    border-radius: 3px;
text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}