@charset "utf-8";
/* CSS Document */

@import "../css/common.css";
@import "../css/response.css";
@import "../css/design.css";
@import "../css/icon.css";
@import "../css/font-awesome.min.css";


/*-- 共通 --*/
.section-box > .pageinfo {color:#FFF;}

/*-- Ruby --*/
ruby {display:inline-table; border-collapse:collapse; height:2em; margin:0; padding:0; border:none; white-space:nowrap; text-indent:0; vertical-align:0.9em; line-height:1em;}
ruby,
ruby rb,
ruby rt {text-align:center;}
ruby rb {display:table-row-group;}
ruby > rt {display:table-header-group; height:25%; margin:0; padding:0; border:none; font:inherit; font-size:50%; line-height:1.5em; text-align:start;}
rt {line-height:normal; -webkit-text-emphasis:none;}
ruby {ruby-position:before;}

/*--キーワードボックス--*/
.keyword-box {width:100%; background-color:#E6E6E6; border-top:solid 2px #CCCCCC; margin-bottom:12px; padding:12px 12px; text-align:left;}
.keyword-box h3 {display:block; font-size:90%; color:#333; margin-bottom:12px;}
.keybox label {display:inline-block; width:80px; font-size:90%;}
.keybox .textb {-webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; border-radius:3px;
border:0; padding:8px 10px; font-size:90%; color:#333; border:solid 1px #ccc; margin:0 auto 6px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
}
.keybox .txtn {width:180px}
.keybox .txts {width:150px}
input:focus {border:solid 1px #900;}
.keybox .submit {border:solid 1px #ccc;
padding:6px 10px; margin:0 0 20px; font-size:100%; text-transform:uppercase; font-weight:bold; color:#333;
cursor:pointer;-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
.searchbt {width:auto; margin:0 auto; padding-top:12px; text-align:center;}
#searcherror { font-size:90%; color:#333; margin:36px auto;}


/**caption_link**/
.coverimg {position:relative; color:#FFF; padding:0px;}
.coverimg img {border:none !important; margin:0 !important; padding:0 !important;}


/*-- モバイルレイアウト : 768 px以下 --*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
  /*-- 共通 --*/
  .section-box > .pageinfo {width:100%;}
  /** Keybox **/
  .keybox {width:100%;}
  .keybox .form-box {width:100%;}
  .keybox .fl-box {width:100%;}
  .keybox .fl-box > ul {padding:6px; border:#999 1px solid;}
  .keybox .fl-box > ul > li {width:100%; margin:0 auto;}
  .keybox .fl-box > ul > li > ul {width:100%; margin:0 auto;}
  .keybox .fl-box > ul > li > ul > li {width:20%; display:inline-block; padding:2px;}
  .keybox .fl-box > ul > li > ul > li a {display:block; width:100%; margin:0; padding:8px 10px; background-color:#333; color:#FFF; text-align:center;}
  /**actor List**/
  .actor-list {width:100%; margin:0 auto;}
  .actor-list li {width:95%; margin:0 auto 6px; text-align:center; border:dotted 1px #999999; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
  .actor-list li .actor-box{display:table; width:100%; margin:0 auto; padding:8px 8px 8px; text-align:center;}
  .actor-list li .furigana{color:#666; font-size:70%;}
  .actor-list li h4 rt{font-weight:normal; color:#333;}
  .actorinfo {display:table-cell; width:auto; text-align:left; margin-bottom:8px; padding-left:8px;}
  .actorinfo p {margin-top:12px; font-size:80%; color:#666;}
  .actorimg {display:table-cell; width:125px; height:auto; overflow:hidden; margin:0 auto 4px; vertical-align:top;}
  .coverimg {display:block; width:125px; height:auto; overflow:hidden; margin:0 auto; vertical-align:top;}
  .coverimg:after {display:block; width:100%; content:attr(title); position:absolute; left:0; bottom:0; padding:1px; background:#000; filter:Alpha(opacity=60); opacity:0.6; font-size:70%; text-decoration:none; font-style:normal; color:#FFF;}
}

/*-- タブレットレイアウト 769 px ～ 1024 px --*/
@media only screen and (min-width: 769px) and (max-width: 1024px){
  /** Keybox **/
  .keybox {width:100%;}
  .keybox .form-box {width:100%;}
  .keybox .fl-box {width:100%;}
  .keybox .fl-box > ul {padding:6px; border:#999 1px solid;}
  .keybox .fl-box > ul > li {width:100%; margin:0 auto;}
  .keybox .fl-box > ul > li > ul {width:100%; margin:0 auto;}
  .keybox .fl-box > ul > li > ul > li {width:20%; display:inline-block; padding:2px;}
  .keybox .fl-box > ul > li > ul > li a {display:block; width:100%; margin:0; padding:8px 10px; background-color:#333; color:#FFF; text-align:center;}
  /**actor List**/
  .actor:before {font-family:'FontAwesome'; content:"\f007"; font-size:100%; margin-right:4px;}
  .actor-list {width:100%; margin:0 auto; display:-webkit-box; display:-ms-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
  .actor-list li {text-align:center; border:dotted 1px #999999; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; margin:0 0 4px 0.45%; -webkit-box-flex:0; box-flex:0; -webkit-flex:0 0 auto; flex:0 0 auto; -webkit-flex-basis:33%; -moz-flex-basis:33%; -ms-flex-basis:33%; flex-basis:33%; max-width:33%;}
  .actor-list li:first-child {margin-left:0;}
  .actor-list li:nth-child(3n+1) {margin-left:0;}
  .actor-list li .actor-box{width:100%; margin:0 auto; padding:8px 6px 8px; text-align:center;}
  .actor-list li .furigana{color:#666; font-size:70%;}
  .actor-list li h4 rt{font-weight:normal; color:#333;}
  .actor-list li a{color:#06C; text-decoration:underline;}
  .actor-list li a:hover{color:#900; text-decoration:none;}
  .actorinfo {display:block; width:auto; text-align:left; margin-bottom:8px; padding-top:8px; border-top:#CCC 1px dotted;}
  .actorinfo p {margin-top:6px; font-size:70%; color:#666;}
  .coverimg {display:block; width:125px; height:auto; overflow:hidden; margin:0 auto 8px; vertical-align:top;}
  .coverimg:after {display:block; width:100%; content:attr(title); position:absolute; left:0; bottom:0; padding:1px; background:#000; filter:Alpha(opacity=60); opacity:0.6; font-size:70%; text-decoration:none; font-style:normal; color:#FFF;}
}

/*-- デスクトップレイアウト 1024 px ～最大 1280px/16Col  --*/
@media only screen and (min-width: 1025px) {
  /** Keybox **/
  .keybox {display:table; width:100%; overflow:hidden;}
  .keybox .form-box {display:table-cell; width:300px;}
  .keybox .fl-box {display:table-cell;}
  .keybox .fl-box > ul {padding:6px; border:#999 1px solid;}
  .keybox .fl-box > ul > li {width:100%; margin:0 auto;}
  .keybox .fl-box > ul > li > ul {width:100%; margin:0 auto; display:-webkit-box; display:-ms-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
  .keybox .fl-box > ul > li > ul > li {-webkit-box-flex:0; box-flex:0; -webkit-flex:0 0 auto; flex:0 0 auto; -webkit-flex-basis:20%; -moz-flex-basis:20%; -ms-flex-basis:20%; flex-basis:20%; max-width:20%; margin:0; padding:2px;}
  .keybox .fl-box > ul > li > ul > li a {display:block; width:100%; margin:0; padding:8px 10px; background-color:#333; color:#FFF; text-align:center;}
  .keybox .fl-box > ul > li > ul > li a:hover {color:#CCC; background-color:#666;}
  /**actor List**/
  .actor:before {font-family:'FontAwesome'; content:"\f007"; font-size:100%; margin-right:4px;}
  .actor-list {width:100%; margin:0 auto; display:-webkit-box; display:-ms-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
  .actor-list li {text-align:center; border:dotted 1px #999999; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; margin:0 0 4px 0.45%; -webkit-box-flex:0; box-flex:0; -webkit-flex:0 0 auto; flex:0 0 auto; -webkit-flex-basis:33%; -moz-flex-basis:33%; -ms-flex-basis:33%; flex-basis:33%; max-width:33%;}
  .actor-list li:first-child {margin-left:0;}
  .actor-list li:nth-child(3n+1) {margin-left:0;}
  .actor-list li .actor-box{width:100%; margin:0 auto; padding:8px 6px 8px; text-align:center;}
  .actor-list li .furigana{color:#666; font-size:70%;}
  .actor-list li img:hover{filter: alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;}
  .actor-list li h4 rt{font-weight:normal; color:#333;}
  .actor-list li a{color:#06C; text-decoration:underline;}
  .actor-list li a:hover{color:#900; text-decoration:none;}
  .actorinfo {display:block; width:auto; text-align:left; margin-bottom:8px; padding-top:8px; border-top:#CCC 1px dotted;}
  .actorinfo p {margin-top:6px; font-size:70%; color:#666;}
  .coverimg {display:block; width:125px; height:auto; overflow:hidden; margin:0 auto 8px; vertical-align:top;}
  .coverimg:hover:after {display:block; width:100%; content:attr(title); position:absolute; left:0; bottom:0; padding:1px; background:#000; filter:Alpha(opacity=60); opacity:0.6; font-size:70%; text-decoration:none; font-style:normal; color:#FFF;}
}