/**************************************************************
 reset, basic
**************************************************************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,
em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight:normal;
    font-style: normal;
    background: transparent;
    line-height: 1;
    text-align:left;
}

strong,b {
    font-weight:bold;
}

fieldset, img {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    overflow:hidden;
    line-height: 1;
}

img {
  max-width: 100%;
  margin: 0;
}

blockquote,q {
    quotes: none;
    position: relative;
    margin: 0 0 0.5em;
    padding: 1.5em 2em;
    background: #F9F8F4;
    border-radius: 20px;
}

blockquote::before {
    position: absolute;
    top: -0.3em;
    left: 0.2em;
    color: #DCD8C3;
    font-size: 50px;
    content: "“";
}

blockquote::after {
    position: absolute;
    bottom: -0.8em;
    right: 0.2em;
    color: #DCD8C3;
    font-size: 50px;
    content: "”";
}



/* remember to define focus styles! */
:focus { outline: 0;}



/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }



/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

table th {
    background-color: #F9F8F4;
    font-weight: bold;
    text-align: center;
}

table th, table td {
    padding:0.5em;
    border: 1px solid #D1CCB3;
}

.lock { white-space: nowrap;}



/* list */
ol,ul { list-style: none; }

li {
    margin-bottom: 0.7em;
    line-height:1.6;
}



/* form */
input, textarea{
    padding: 2px;
    border: 1px solid #D1CCB3;
    color: #764;
}

/* ブログ内検索用デザイン */
/*.blogsearch .box {
    width:180px;
    padding:3px;
}

.blogsearch .btn {
    background: #E7E4D5;
    cursor:pointer;
    padding:3px;
}

.blogsearch .btn:hover {
    background: #DCD8C3;
}*/

#search_box { padding: 1em 0 0.5em;}

#search_box table th,
#search_box table td,
#search_result th,
#search_result td {
    padding: 0;
    border: none;
}

.gsc-search-box { margin: 10px 0 !important;}

.gsc-input-box {
    padding: 2px !important;
    color: #764 !important;
    border: 1px solid #D9D9D9;
    background: #fff;
    height: auto !important;
    font-size: 15px !important;
}

input.gsc-search-button,
input.gsc-search-button:hover,
input.gsc-search-button:focus {
    border-color: #D1CCB3;
    background-color: #E7E4D5;
    background-image: none;
    filter: none;
}

input.gsc-search-button:hover {
   background-color: #DCD8C3 !important;
}

.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
    width: 13px;
    height: 13px;
    padding: 6px !important;
    min-width: 13px;
    margin-top: 0 !important;
}




/**************************************************************
 common
**************************************************************/

html {
    background: #F9F8F4 url(http://file.boykira.game-ss.com/bg.jpg) bottom repeat-x;
    background-attachment: fixed;
}

body {
    background: url(http://file.boykira.game-ss.com/bg-key.png) !important;
    background-attachment: fixed !important;
    font-size:14px;
    font-family: Arial, Helvetica, 'Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4', メイリオ, Meiryo, Osaka, "MS Pゴシック", clean, sans-serif;
    color: #764;
    word-break: break-all;
    -webkit-text-size-adjust: 100%;/*スマホ横向き文字拡大防止*/
}


/* ヘッダー以下全体 */
#MainBlock {
    padding: 1.5em 1.5em 0;
    margin-left: 270px;
}

@media screen and (max-width:768px){
#MainBlock, #EntryBlockTop {
    width:100%;
    margin: 0;
    padding: 0;
}
}



/* link */
a:link,a:visited{
    outline:0;
    text-decoration:none;
    color: #00A9A9;
    line-height: 1.6 !important;
    font-weight: bold;
}

.EntryText a { text-decoration: underline;}

a:hover,a:active {
    outline:0;
    color: #0084B4;
    text-decoration:none;
}

a:hover img { opacity: 0.8;}

a.jump {
    margin-right: 0.2em;
    padding-right: 1em;
    background: url(http://file.boykira.game-ss.com/blank.png) no-repeat right 0.3em;
    background-size: 0.8em auto;
}

/*正規ルートが黄色、寄り道が青、特別が赤リンク、緑は予備*/
.btn_link,
.btn_link_blue,
.btn_link_red,
.btn_link_green {
    display: inline-block;
    position: relative;
    margin: 0 0.5em 0.5em 0;
    padding: 0.5em 1.5em 0.5em 2.5em;
    background: #F2AC45;
    border-bottom: 2px solid #D1CCB3;
    border-radius: 50px;
    color: #FFFFFF !important;
    vertical-align: top;
    text-decoration: none !important;
}

.btn_link:after,
.btn_link_blue:after,
.btn_link_red:after,
.btn_link_green:after {
    position: absolute;
    top: 0.6em;
    left: 1.3em;
    width: 1.5em;
    height: 1.5em;
    background: url(http://file.boykira.game-ss.com/arrow.png) no-repeat left 0.3em;
    background-size: 0.6em auto;
    content: "";
}

.btn_link:hover,
.btn_link_blue:hover,
.btn_link_red:hover,
.btn_link_green:hover {
    border-top: 2px solid #FFFFFF;
    border-bottom: none !important;
}

.btn_link_blue { background: #5195D3 !important;}
.btn_link_red { background: #DF646B !important;}
.btn_link_green { background: #6DC93C !important;}

.btn_link_blue:after,
.btn_link_red:after,
.btn_link_green:after {
    background: url(http://file.boykira.game-ss.com/arrow-yellow.png) no-repeat left 0.3em;
    background-size: 0.6em auto;
}

#pagetop a {
    display: block;
    position: fixed;
    right: 0;
    bottom: 60px;
    padding: 0.8em 0.8em 0.8em 2.2em;
    background: #FFFFFF url(http://file.boykira.game-ss.com/pagetop.png) no-repeat 1em center;
    background-size: 0.8em auto !important;
    border-bottom: 2px solid #D1CCB3;
    border-radius: 20px 0 0 20px;
    z-index: 9999;
}

#pagetop a:hover {
    margin-top: 2px;
    border-bottom: none;
}

.anchor {
    position: relative;
    margin: 4em 0;
    padding: 1.5em 0 1.3em;
    background: url(http://file.boykira.game-ss.com/bg-key.png);
    border: 2px dotted #DCD8C3;
    border-radius: 10px;
}

.anchor:before {
    position: absolute;
    top: -1.3em;
    left: 1.3em;
    padding: 0.1em 1em;
    background: #D1CCB3;
    color: #FFFFFF;
    font-weight: bold;
    content: "♪ もくじ";
}

.anchor li {
    display: inline-block;
    margin: 0 1em;
    padding-left: 1.2em;
    background: url(http://file.boykira.game-ss.com/anchor.png) no-repeat 0 0.6em;
    background-size: 0.8em auto !important;
    vertical-align: top;
}

.anchor li a { text-decoration: none !important;}


/* class */
.notice { color: #DF514D;}
.mini { font-size: 12px;}

.easy { color: #55BBFF;}
.normal { color: #44CC01;}
.hard { color: #EE1144;}
.expert { color: #DE7DF8;}

.left { text-align:left;}
.center { text-align:center;}
.right { text-align:right;}

.arrow {
    padding-left: 1em;
    background: url(http://file.boykira.game-ss.com/arrow.png) no-repeat left 0.3em;
    background-size: 0.6em auto;
}

.maru {
    position: relative;
    padding-left: 1em;
}

.maru:before {
    display: block;
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 0.6em;
    height: 0.55em;
    background: #fb0;
    border-radius: 100%;
    content: "";
}

.kirameki { background: #F8D5A2;}
.tsunaide { background: #EFB1B5;}
.mekimeki { background: #A8CAE9;}
.gamushara { background: #AEDA81;}

.mark_type {
    display: inline-block !important;
    width: 1.5em;
    height: auto;
    margin: 0 !important;
    vertical-align: top;
}

.img_item {
    display: inline-block !important;
    width: 4em;
    height: auto;
    vertical-align: middle;
    margin-right: 0.5em;
}

.drop .img_item { margin-right: 0;}

.pc_none { display: none;}
.sp_none { display: inline-block;}

/*@media screen and (max-device-width: 640px) {*/
@media screen and (max-width:768px){
.pc_none { display: inline-block;}
.sp_none { display: none;}
}



/*ブロック制御系*/
.float {
    float: left;
    margin-right: 1em;
}

.float2, .float3 {
    display: inline-block;
    margin-right: 1em;
    vertical-align: top;
}

@media screen and (max-width:384px){
.float, .float2 {
    width: 100%;
    float: none;
}
}

.clear {
    height:0;
    line-height:0;
    clear:both;
}

.clearfix:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}



/**************************************************************************************
 ヘッダー
**************************************************************************************/

/*一番上のブロック（タイトルが書かれる場所）の設定*/
#TopBlock {
    padding: 2.4em 0 ;
    background: url(http://file.boykira.game-ss.com/bg-header.png) no-repeat center center;
    background-size: cover;
}

@media screen and (max-width:768px){
#TopBlock{
    width: 100%;
    margin: 0 auto;
    padding: 55px 0 50px;
}

#TopTitle {
    width: 100%;
    padding: 0;
}
}



/*ページタイトル文字部分の設定*/
#TopText {
    width: 90%;
    max-width: 780px;
    margin: 0 auto;
}

#TopText a img {
    width: 100%;
}

@media screen and (max-width:768px){
#TopText {
    padding: 0;
    font-size: 18px;
}
}



/* ヘッダー直下の1行メニュー */
#MenuPage {
    width: 100%;
    overflow: hidden;
    text-align: center;
    background: #E7E4D5;
}

#MenuPage ul {
    line-height: 2.5em;
    text-align: center;
    width: 100%;
    margin: 6px auto;
}

#MenuPage li {
  display: inline-block;
  margin: 0;
  border-right: 1px solid #C7C1A3;
}

#MenuPage li:last-child { border: none;}

#MenuPage a {
  padding: 0 10px 0 8px;
}

@media screen and (max-width:768px){
#MenuPage a { font-size: 12px;}
}





/**************************************************************************************
 フッター
**************************************************************************************/

/*一番下のブロック（著作権表示が書かれる場所）の設定*/
#FooterBlock {
    margin-left: -270px;
    padding: 1.5em;
    border-top: 1px dashed #FFF;
}

#FooterBlock ul {
    text-align:center;
}

#FooterBlock li {
    display:inline;
    font-size: 80%;
    text-align:center;
}

#FooterBlock li.copy { display:block;}

@media screen and (max-width:768px){
#FooterBlock {
    margin-left: 0;
}
}





/**************************************************************************************
 右カラム（プラグイン表示箇所）
**************************************************************************************/

/*プラグイン表示箇所全体の設定*/
.PluginBlock {
    width:240px;
    float:right;
    padding-bottom: 1em;
}

@media screen and (max-width:768px){
.PluginBlock {
    margin: 0 auto;
    padding: 15px 0 1em 0;
    width: 93%;
    float: none;
}
}



/*プラグインのタイトル（名称）部分の設定*/
.PluginTitle { display: none;}

.PluginInnerBlock strong {
    display: block;
    margin-bottom: 0.5em;
    background: #E7E4D5;
    border-bottom: 2px solid #DCD8C3;
    border-radius: 50px;
    text-align: center;
    font-size: 16px;
    line-height: 200%;
}

.PluginInnerBlock dt {
    padding: 0.5em 0 0.5em 1.8em;
    margin: 2em 0 1em;
    border-top: 2px solid #C7C1A3;
    border-bottom: 2px dotted #D1CCB3;
    background-size: 1.6em 1.6em !important;
    font-weight:bold !important;
    font-size: 18px;
    line-height: 1.8;
}

.PluginInnerBlock li a { font-weight: normal !important;}

#menu_about { background: url(http://file.boykira.game-ss.com/menu_about.png) no-repeat left center;}

#menu_music { background: url(http://file.boykira.game-ss.com/menu_music.png) no-repeat left center;}

#menu_costume { background: url(http://file.boykira.game-ss.com/menu_costume.png) no-repeat left center;}

#menu_chara { background: url(http://file.boykira.game-ss.com/menu_chara.png) no-repeat left center;}

#menu_item { background: url(http://file.boykira.game-ss.com/menu_item.png) no-repeat left center;}

#menu_room { background: url(http://file.boykira.game-ss.com/menu_room.png) no-repeat left center;}

#menu_mission { background: url(http://file.boykira.game-ss.com/menu_mission.png) no-repeat left center;}

#menu_story { background: url(http://file.boykira.game-ss.com/menu_story.png) no-repeat left center;}

#menu_omake { background: url(http://file.boykira.game-ss.com/menu_omake.png) no-repeat left center;}

.PluginInnerBlock em {
    display: block;
    padding: 0.8em 0;
    font-weight: bold;
}

.PluginInnerBlock ul { padding-bottom: 0.5em;}

@media screen and (max-width:768px){
.PluginInnerBlock li {
    display: inline-block;
    width: 44%;
    vertical-align: top;
}

.PluginInnerBlock dd .menu_bnr {
    display: block;
    max-width: 180px;
    margin: 0 auto;
}
}



/*プラグインの説明部分の設定*/
.PluginExplanation strong { margin-bottom: 1em;}



/*プラグインが表示される場所の設定*/
.PluginContents {
    padding: 0;
}



/*各プラグイン処理内の基本デザイン*/
.plugin_data {
    line-height: 1.4;
}

.plugin_data * {
    padding: 0;
    line-height:1.4;
}

.plugin_data .right{
    float: right;
}

.plugin_data a:link, a:visited {
    text-decoration: none;
}



/*各プラグイン処理内基本デザインの下に記載する日付など*/
.plugin_data_date {
    text-align:right;
}

.archive_img{
    max-height: 72px;
    overflow: hidden;
}

.archive_img img{
    width: 120px;
    height: auto;
    min-height: 72px;
    padding: 0;
    border: none;
    background: url('http://blog.ninja.co.jp/6981/noimages.png') no-repeat, #f5f5f5;
}



/* バーコード用デザイン */
.qrcode_image {
    text-align:center;
}


/* :::::: toggle button :::::: */
 
#navTgl, .open, .menu {
  display: none;
  overflow: hidden;
}





/**************************************************************************************
  記事ブロック用デザイン
**************************************************************************************/

/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
    float: left;
    width: 100%;
    margin: 0 0 1.5em -270px;
    padding-bottom: 2em;
    background: #FFFFFF;
    border-bottom: 2px solid #D1CCB3;
    border-radius: 0 0 10px 10px;
}

@media screen and (max-width:768px){
#EntryBlock {
    margin: 1.5em auto;
    float: none !important;
    background: #FFF;
}
}



/*各記事タイトル部分の設定*/
h2.EntryTitle {
    font-weight:bold;
    padding: 0.5em;
    color: #FFFFFF;
    font-size: 30px;
    border-top: 3px solid #DF514D;
    border-bottom: 3px solid #F4BC45;
    background: url(http://file.boykira.game-ss.com/bg-h1.png);
    line-height: 1.5;
    text-align: center;
}

.EntryTitle a:hover {
    color:#E7E4D5;
}

@media screen and (max-width:768px){
#EntryBlock .EntryTitle {
    font-size: 26px;
}
}

@media screen and (max-width:384px){
#EntryBlock .EntryTitle {
    font-size: 20px;
}
}



/*各記事タイトル部分の文字色設定*/
.EntryTitleFont {}



/*各記事やコメント、トラックバックなどの総合のブロック部分*/
.EntryTextBox {
}



/*記事本文が記載される部分*/
.EntryText {
    padding: 2em 2em 0;
    line-height:1.75;
}

.EntryText * {
    line-height:1.75;
}

.EntryText p,
.EntryText table { margin-bottom: 1em;}

h3, h4, h5, h6 {
    font-weight: bold;
}

h3 {
    position: relative;
    margin-bottom: 1.3em;
    padding: 3px 5px;
    background: url(http://file.boykira.game-ss.com/bg-h2.gif);
    font-size: 170%;
    line-height: 130%;
}

h3:after {
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: url(http://file.boykira.game-ss.com/bg-h3.png) repeat-x bottom;
    content: "";
}

h4 {
    margin-bottom: 1em;
    padding-bottom: 1.5px;
    border-bottom: 2px dotted #A6E7FF;
    color: #5583BF;
    font-size: 130%;
}

h5 {
    display: inline-block;
    margin-bottom: 0.8em;
    background-image: linear-gradient(transparent 50%, #FEF9AF 50%);
    font-size: 110%;
}


@media screen and (max-width:768px){
h3 {
    font-size: 150%;
}

.EntryText {
    padding: 2em 1em 0;
    line-height: 1.75;
    font-size: 14px;
}
}



/* 記事内カテゴリー表示エリア */
.EntryNote {
    position: relative;
    padding: 0 1em;
    background: #F9F8F4;
    border-bottom: 1px dashed #DCD8C3;
}

.EntryNote li {
    display: inline-block;
    margin: 0;
    padding: 0.8em 0 0.8em 2em;
    background: url(http://file.boykira.game-ss.com/mark-category.png) no-repeat left 0.7em;
    background-size: 1.8em auto;
}

.EntryNote li a {  font-weight: bold;}

@media screen and (max-width:768px){
#EntryNote {
    padding: 0 0 5px;
}
}



/*忍者おまとめボタン*/
.ninja_onebutton {
    position: absolute;
    top: 0.6em;
    right: 0.2em;
    padding: 0;
    text-align: right;
}

/* 忍者admax */
span.admax-banner {
    display: block !important;
    width: 200px !important;
    margin: 1.5em 0 0 !important;
}



/*「つづきを読む」が記載される部分*/
.EntryPsText {
    padding:1em 0;
}

.EntryPsText a {
    padding-left:13px;
    background:url(http://bfile.shinobi.jp/img//ico-arrow1.gif) no-repeat 0 50%;
}


/*記事へのリンク（コメントやトラックバック等）の背景*/
.EntryFooter {
    padding:0.3em 0 1em;
    text-align:right;
    /*border-top:1px solid #cccccc;*/
}

.EntryFooter ul {}

.EntryFooter li {
    padding:0 0 0 1em;
    display:inline-block;
    float:right;
}

.EntryFooter li a:link, .EnryFooter li a:visited {
    display:inline-block;
    padding:0 0 0 13px;
    background:url(http://bfile.shinobi.jp/img/ico-arrow1.gif) no-repeat 0 50%;
    text-decoration:none;
    font-size:90%;
}

.EntryFooter li a:hover {
    text-decoration:underline;
}



/*記事の投稿者名が記載されている部分*/
.EntryUserName { display: none !important;}

/*記事を投稿した日が記載されている部分*/
.EntryWriteDate { display: none !important;}

/*記事のカテゴリ名が記載されている部分*/
.EntryCategory {}

/*記事へのコメントリンクが記載されている部分*/
.EntryComment { display: none !important;}

/*次の記事やHOMEへのリンクが表示される背景部分*/
.PageLinkBlock {
    display: none !important;
    margin:0 auto;
    display:block;
    padding:2em 0;
}

.PageLinkBlock ul {
    text-align:center;
}

.PageLinkBlock li{
    padding:0 0.3em;
    display:inline;
}

.PageLinkBlock li a.prev {
    padding-right:13px;
    background:url(http://bfile.shinobi.jp/img/ico-arrow2.gif) no-repeat 100% 50%;
}

.PageLinkBlock li a.next {
    padding-left:13px;
    background:url(http://bfile.shinobi.jp/img/ico-arrow1.gif) no-repeat 0 50%;
}

.PageLink10 {
    padding:2em 0 0;
    text-indent:center;
}

@media screen and (max-width:768px){
.PageLinkBlock li a{
    padding: 8px;
    border: 1px solid #ccc;
    display: inline-block;
    margin: 0 0 15px;
    background: #f8f8f8;
}
}





/**************************************************************************************
  各コメント表示部分の設定（修正掲示板）
**************************************************************************************/

/*コメント全体の設定*/
.CommentBlock{
    padding: 0em 2em;
}

/*この記事にコメントする　と書かれてる部分の設定*/
.CommentMenuTitle,
.CommentMenuTitle + p { display: none !important;}

/*コメントを投稿するフォーム全体の設定*/
.CommentFormBlock{
    padding: 3em 0 0;
}

/*コメントフォーム項目名設定*/
.CommentFormBlock table {
    margin:0 auto;
}

@media screen and (max-width:768px){
.CommentBlock{
    padding: 0em 1em;
}

.CommentFormTh {
    display: block;
    border-bottom: 1px dotted #D1CCB3;
}

.CommentFormTd {
    clear: both;
    display: block;
    border-top: none;
    border-bottom: none;
}

.CommentFormBlock table tr:last-child .CommentFormTd {
    border-bottom: 1px solid #D1CCB3;
}
}



/*コメントフォーム入力欄設定*/
.CommentFormTd{
}

/*inputタグやtextareaの設定*/
.CommentForms{
  display: block;
  padding: 3px;
}

textarea.CommentForms{
    resize:none;
}


/*コメントフォーム送信ボタンの設定*/
.CommentFormSubmit{
    clear:both;
    padding:1em 0;
    text-align:center;
}

.CommentFormSubmit input {
    background: #E7E4D5;
    cursor: pointer;
    padding: 5px 1em;
    font-weight: bold;
}

.CommentFormSubmit input:hover {
    background: #DCD8C3;
}



/*コメントのタイトル、コメント、コメント情報の全ての背景部分*/
.CommentTextBox{
    padding:1em 0 0.5em;
}

/*コメント部分*/
.CommentText {
    padding-bottom:1em;
    line-height:1.4;
}

.CommentText * {
    line-height:1.4;
}

/*投稿者や投稿時間などが表示されている部分*/
.CommentFooter{
    padding: 0.3em 0 0.5em;
    text-align:right;
    border-bottom: 1px dashed #DCD8C3;
}

.CommentFooter li{
    padding:0 0 0 1em;
    float:right;
    font-size:90%;
}

/*投稿者名の部分*/
.CommentUserName{}

/*投稿者のホームページへのリンク部分*/
.CommentURL{}

/*投稿された時間が記載されている部分*/
.CommentWriteDate{
}

/*コメント編集へのリンク部分*/
.CommentEdit{ display: none !important;}


/*-------------------------------------------------------
  コメント -> コメント編集部分デザイン
-------------------------------------------------------*/
.CommentBlock.edit {
    margin:2em auto;
    padding:2em;
    border:1px solid #cccccc;
    width:630px;
}


/*-------------------------------------------------------
  コメント -> 管理者返信部分デザイン
-------------------------------------------------------*/
/* 管理者返信部分全体の設定 */
.CommentResBlock {
    padding-left:4em;
}

/* 管理者返信部分内側の設定 */
.CommentResBox {
    padding:1em 0 0;
}

/* 管理者返信のタイトル */
.CommentResTitle {
    padding:0.5em 0 0.2em;
    font-size:110%;
    font-weight:bold;
    line-height:1.4;
    border-bottom:1px solid #eeeeee;
}

/* 管理者返信の本文 */
.CommentResText {
    padding:1em 0;
    line-height:1.4;
}

/* 管理者返信のフッター */
.CommentResFooter {
    padding:0.3em 0 1em;
    text-align:right;
    border-top:1px solid #eeeeee;
}

.CommentResFooter ul {}

.CommentResFooter li {
    margin-left:1em;
    padding:0 0 0 13px;
    display:inline-block;
    float:right;
    background:url(http://bfile.shinobi.jp/img/ico-arrow1.gif) no-repeat 0 50%;
    text-decoration:none;
    color:#666666;
    font-size:90%;
}





/**************************************************************************************
レスポンシブ (タブレット以下)
**************************************************************************************/

/* 768px */
@media screen and (max-width:768px){
body, .PluginBlock{ max-width:768px;}

.RightBox {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.RightBox .ninja-recommend-block {
    margin: 15px auto;
}



/* :::::: toggle button :::::: */
#navTgl:checked ~ .contents {
  -webkit-transform: translateX(200px);
  transform: translateX(200px);
}

#navTgl {
  display: none;
  overflow: hidden;
}

label {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
}

.open {
  display: block;
  z-index: 2;
  width: 50px;
  height: 50px;
  color: white;
  background: url(http://file.boykira.game-ss.com/bg-menu.png);
  font-size: 2em;
  line-height: 50px;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s;
}

#navTgl:checked + .open {
  display: block;
  background-color: rgba(114, 45, 128, 0.7);
  -webkit-transform: translateX(200px);
  transform: translateX(200px);
}

.close {
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: background-color .6s;
}

#navTgl:checked ~ .close {
  pointer-events: auto;
  background-color: rgba(0,0,0,.3);
}

#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #fff;
  transition: .2s;
}

#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #fff;
  transition: .3s;
}

#panel-btn-icon:before{
  margin-top: -6px;
}

#panel-btn-icon:after{
  margin-top: 4px;
}

#navTgl:checked + .open  #panel-btn-icon { background: transparent;}

#navTgl:checked + .open #panel-btn-icon:before,  #navTgl:checked + .open #panel-btn-icon:after { margin-top: 0;}

#navTgl:checked + .open #panel-btn-icon:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); height: 1px;}

#navTgl:checked + .open #panel-btn-icon:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); height: 1px;}



/* :::::: drawer menu :::::: */
.menu {
  display: block;
  z-index: 1;
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  width: 180px;
  height: 100%;
  padding: 10px;
  background-color: rgba(255,255,255,0.95);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .6s;
  transition: transform .6s;
	/*overflow-y:hidden;*/
}

#navTgl:checked ~ .menu {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.menu p,
.menu li a {
  color: #666;
}

.menu p {
  font-size: 12px;
  font-weight: bold;
  padding: 10px 0 10px 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.menu div { margin-bottom: 0.5em;}

.menu ul,
header nav ul {
  padding: 0;
  margin: 0 0 20px;
}

.menu ul { margin-bottom: 200px;}

.menu li {
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

.menu li a,
header nav li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  transition: background-color .6s;
  line-height: 1.5;
  font-weight: normal !important;
}

.menu li a:hover {
  background-color: #fff;
}

.menu a img {
  max-width: 180px;
  margin-bottom: 1em;
}

}





/* 384px */
@media screen and (max-width:384px){
body, .PluginBlock{ max-width:384px;}

.main01 li.ninja-recommend-article, .image-frame li.ninja-recommend-article{
    width: 98% !important;
    min-height: 180px;
    margin: 0 auto !important;
}
.ninja-recommend.image-frame .ninja-recommend-article .ninja-recommend-article-image-box{
    width: 100% !important;
    height: 100% !important;
}
.EntryInnerBlock .ninja-recommend-article-image-box a img, .image-frame .ninja-recommend-article-image-box a img{
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.EntryText iframe{
    width: 100%;
}
}



/**************************************************************************************
トップ
**************************************************************************************/
#twitter-widget-0,
#twitter-widget-1 { display: inline-block;}

#twitter-widget-0 {margin-right: 20px !important;}

@media screen and (max-width:1200px){
#twitter-widget-0 { margin-right: 0 !important;}
}



/**************************************************************************************
更新履歴
**************************************************************************************/
#information li {
    padding-bottom: 0.8em;
    border-bottom: 1px solid #E7E4D5;
}



/**************************************************************************************
検索結果
**************************************************************************************/
.gsc-result .gs-title {
    height: 1.5em !important;
}

.EntryText #search_result table { margin-bottom: 0 !important;}

.gsc-results {
    padding-bottom: 2px;
    width: 100% !important;
}

.gsc-results .gsc-cursor-box {
    margin: 5px !important;
    padding: 1.3em;
    background: url(http://file.boykira.game-ss.com/bg-key.png);
    border: 2px dotted #DCD8C3;
    border-radius: 10px;
    text-align: center;
}

.gsc-results .gsc-cursor-box .gsc-cursor-page {
    border: none !important;
    background: none !important;
    color: #00A9A9 !important;
    margin: 0 20px;
    font-size: 16px;
}

.gsc-control-cse .gs-result .gs-title a,
.gs-spelling a { color: #00A9A9 !important;}

.gsc-table-result, .gsc-thumbnail-inside, .gsc-url-top, .gs-spelling {
    padding-left: 0px !important;
    padding-right: 0px !important;
}


/**************************************************************************************
キャラ一覧、スチル一覧、キャラ詳細のコスチューム一覧
**************************************************************************************/
.inline dl {
    display: inline-block;
    max-width: 13.5em;
    width: auto;
    margin-bottom: 0.5em;
    border: 2px solid #FFFFFF;
    vertical-align: top;
}

.mini_list dl { max-width: 10em;}

.inline dt {
    position: relative;
    border-radius: 10px 10px 0 0;
}

.inline dl dd {
    margin: 0;
    padding: 10px 5px;
    border-radius: 0 0 10px 10px;
    text-align: center !important;
}

.inline dl dd p.cv {
    padding-bottom: 10px;
    border-bottom:2px dotted #D1CCB3;
    color: #cc0000;
    text-align: center !important;
}

.inline dl dd p.cv strong {
    position: relative;
    padding-left: 2.6em;
}

.inline dl dd p.cv strong:before {
    position: absolute;
    top: -1px;
    left: 0;
    padding: 0 0.5em;
    border-radius: 100px;
    background: #D1CCB3;
    color: #FFFFFF;
    font-size: 11px;
    content: "CV :";
}

.inline dt img {
    display: block;
    width: 100%;
    max-width: 13.5em;
    margin: 0 auto;
}

.inline dt img:hover { opacity: 100;}

.inline dt:after {
    display: block;
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    width: 1em;
    height: 1em;
    padding: 0.5em;
    border-radius: 100%;
    border-bottom: 2px solid #DCD8C3;
    background: #F9F8F4 url(http://file.boykira.game-ss.com/arrow.png) no-repeat center center;
    background-size: 8px auto !important;
    content: "";
}

.still_list dt:after {
    background: #FFFFFF url(http://file.boykira.game-ss.com/loupe.png) no-repeat center center;
    background-size: 15px auto !important;
}

.inline dt:hover:after {
    margin-top: 2px;
    border-bottom: none;
}

.inline .page_none dt:after { display: none;}

.king dt { background: #FFCCCC;}
.king dd { background: #FFEBEB;}

.prince dt { background: #DAECBD;}
.prince dd { background: #F0F8E5;}

.knight dt { background: #B9E6F5;}
.knight dd { background: #E3F5FB;}

.seiran dt { background: #DDDDDD; border: 2px solid #AAAAAA;}
.seiran dd { border: 2px solid #AAAAAA;}

.grade1 dt { background: #AADDFF; border: 2px solid #55BBFF;}
.grade1 dd { border: 2px solid #55BBFF;}

.grade2 dt { background: #A1E580; border: 2px solid #44CC01;}
.grade2 dd { border: 2px solid #44CC01;}

.grade3 dt { background: #F688A1; border: 2px solid #EE1144;}
.grade3 dd { border: 2px solid #EE1144;}

.teacher dt { background: #E0B881; border: 2px solid #CF8D37;}
.teacher dd { border: 2px solid #CF8D37;}

.inline dl dt { border-bottom: none !important;}
.inline dl dt:hover { background: url(http://file.boykira.game-ss.com/bg-key.png);}

.inline dl dd { border-top: none !important;}

.inline dl.page_none dt:hover { background: none !important;}
.inline dl.page_none.grade1 dt:hover { background: none !important; background-color: #AADDFF !important;}
.inline dl.page_none.grade2 dt:hover { background: none !important; background-color: #A1E580 !important;}


@media screen and (max-width: 640px) {
.inline dl { max-width: 10em;}

.inline dl dd span { font-size: 10px !important;}

.inline dt img { max-width: 10em;}
}



/**************************************************************************************
キャラ詳細
**************************************************************************************/
.profile table {
    display: table;
    float: right;
    width: 55%;
}

.profile > div {
    float: left;
    width: 45%;
    max-width: 400px;
    margin-bottom: 1em;
}

.call {
    display: inline-block;
    position: relative;
    margin: 0 1em 2em 0 !important;
    padding: 0.5em 0;
    background: #F9F8F4;
    border: 1px solid #E7E4D5;
    border-radius: 10px;
}

.call:before,
.call:after {
    position: absolute;
    bottom: -10px;
    left: 30%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #F9F8F4 transparent transparent transparent;
    content: "";
}

.call:before {
    bottom: -11px;
    border-color: #E7E4D5 transparent transparent transparent;
}

.call span {
    display: inline-block;
    margin: 0 1em;
}

.profile .king { color: #EE1144;}
.profile .prince { color: #44CC01;}
.profile .knight { color: #55BBFF;}


@media screen and (max-width: 640px) {
.profile > div,
.profile table {
    width: 100%;
    float: none;
}

.call { margin: 0 0 2em 0 !important;}
}



/**************************************************************************************
楽曲詳細
**************************************************************************************/
.music table {
    display: table;
    float: right;
    width: 55%;
}

.music >img {
    float: left;
    width: 43%;
    max-width: 360px;
    margin-bottom: 1em;
}

@media screen and (max-width: 640px) {
.music > img,
.music table,
.goal table {
    width: 100%;
    float: none;
}
}


/**************************************************************************************
コスチューム
**************************************************************************************/
.cos_list dt,
.cos_list dt img,
.mini_list dt,
.mini_list dt img { border-radius: 10px;}

.cos_list dt a img:hover { opacity: 0.7;}

.tokkou {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0.2em 0.5em;
    background: #F2AC45;
    border-radius: 5px;
    color: #FFFFFF;
}

.costume table {
    display: table;
    float: right;
    width: 63%;
}

.costume .cos_img {
    float: left;
    width: 34%;
    margin-bottom: 1em;
}

.costume .cos_img a {
    display: block;
    position: relative;
}

.costume .cos_img a:after {
    display: block;
    position: absolute;
    bottom: 0.5em;
    left: 0.5em;
    width: 1em;
    height: 1em;
    padding: 0.5em;
    border-radius: 100%;
    border-bottom: 2px solid #DCD8C3;
    background: #FFFFFF url(http://file.boykira.game-ss.com/loupe.png) no-repeat center center;
    background-size: 15px auto !important;
    content: "";
}

.costume .cos_img a:hover:after {
    margin-top: 2px;
    border-bottom: none;
}

@media screen and (max-width: 640px) {
.costume .cos_img,
.costume table {
    width: 100%;
    float: none;
}
}



/**************************************************************************************
イベント詳細
**************************************************************************************/
.event_visual img { width: 50%;}

.event_music {
    display: inline-block;
    margin: 0 0 0.5em -1em;
    padding: 0.2em 0.5em;
    border-radius: 5px;
    background: #F2AC45;
    color: #FFFFFF;
    font-size: 12px;
}

.platinum th, .gold th, .silver th, .bronze th, .Iron th, .stone th { color: #FFFFFF;}

.platinum th em, .gold th em, .silver th em, .bronze th em, .Iron th em, .stone th em {
    background: #FFFFFF;
    margin-right: 0.5em;
    padding: 0.2em 0.5em;
    border-radius: 5px;
    font-weight: bold;
}

.platinum tbody { border: 2px solid #6DC9CA;}
.platinum th { background: #6DC9CA;}
.platinum th em { color: #6DC9CA;}

.gold tbody { border: 2px solid #E8C94C;}
.gold th { background: #E8C94C;}
.gold th em { color: #E8C94C;}

.silver tbody { border: 2px solid #93B9D9;}
.silver th { background: #93B9D9;}
.silver th em { color: #93B9D9;}

.bronze tbody { border: 2px solid #E08D52;}
.bronze th { background: #E08D52;}
.bronze th em { color: #E08D52;}

.Iron tbody { border: 2px solid #EE7F6C;}
.Iron th { background: #EE7F6C;}
.Iron th em { color: #EE7F6C;}

.stone tbody { border: 2px solid #A3CACB;}
.stone th { background: #A3CACB;}
.stone th em { color: #A3CACB;}


@media screen and (max-width: 768px) {
.event_visual img { width: 100%;}
}



/**************************************************************************************
動画埋め込み
**************************************************************************************/
.youtube {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 320px;
	height: 180px;
}
.youtube::before {
	position: absolute;
	content: "▶ Click to Play";
	color: #fff;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	line-height: 180px;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	transition: all 0.3s;
}
.youtube:hover::before {
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: all 0.3s;
}


@media screen and (max-width: 640px) {
.youtube {
	width: 100%;
	height: auto;
}
}





/**************************************************************************************
アプリーチ
**************************************************************************************/
#appreach-box {
    border: 2px dotted #DCD8C3;
    border-radius: 10px;
}

#appreach-appname {
    font-weight: bold;
    font-size: 120%;
}

.appreach-footer { margin-bottom: 0 !important;}

.appreach-links { float: none !important;}


/*アドセンス*/
@media (max-width:600px) { .adsbygoogle { width: 336px; height: 280px; } }
@media (max-width:320px) { .adsbygoogle { width: 300px; height: 250px; } }



/* ===============消しちゃダメ============== */
/* kaereba/yomereba Customize Settings 1.0.0 ver */
/* Created by Cazuki Hoshina */
/* Copyright (c) @cazuki All rights Reserved. */
/* ======================================== */

.kaerebalink-box,
.booklink-box {
    padding: 15px;
    background: #ffffff;
    border: 1px dashed #DCD8C3;
}

.kaerebalink-image,
.booklink-image {
    float: left;
    width: 140px;
    margin: 0;
    text-align: center;
}

.kaerebalink-image a,
.booklink-image a,
.kaerebalink-image a img,
.booklink-image a img {
    display: block;
    width: auto;
    max-width: 140px;
    height: auto;
    max-height: 160px;
    margin: 0 auto;
}

.kaerebalink-info,
.booklink-info {
    margin: 0 0 0 160px;
    line-height: 1.6rem;
}

.kaerebalink-name,
.booklink-name {
    font-weight: bold;
    margin: 0;
}

.kaerebalink-name > a { font-size: 16px;}

.kaerebalink-powered-date,
.booklink-powered-date {
    font-size: 0.75rem;
    font-weight: normal;
}

/*.kaerebalink-detail,
.booklink-detail { font-size: 0.9375rem;}*/

.kaerebalink-link1,
.booklink-link2 { width:100%;}

.kaerebalink-link1 div,
.booklink-link2 div {
    float: left;
    width: 49.5%;
    max-height: 31px;
    margin-top: 10px;
    font-size: 0.875rem;
    font-weight: bold;
    box-sizing: border-box;
}

.kaerebalink-link1 div:nth-child(even),
.booklink-link2 div:nth-child(even) { margin-left: 1%;}

.kaerebalink-link1 div a,
.booklink-link2 div a {
    display: block;
    padding: 3px;
    text-decoration: none;
    border-radius: 4px;
}

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a,
.shoplinkyahooAuc a,
.shoplinkseven a,
.shoplinkbellemaison a,
.shoplinkcecile a,
.shoplinkkakakucom a,
.shoplinkkindle a,
.shoplinkbk1 a,
.shoplinkehon a,
.shoplinkkino a,
.shoplinkjun a,
.shoplinktoshokan a {
    display:block;
    text-decoration:none;
}

.shoplinkamazon a { color:#ffffff; background:#F2AC45; }
.shoplinkrakuten a { color:#ffffff; background:#DF646B; }

.shoplinkamazon a,
.shoplinkrakuten a {
    border-bottom: 2px solid #D1CCB3;
    text-align:center;
}

.shoplinkamazon a:hover,
.shoplinkrakuten a:hover {
    border-top: 2px solid #FFFFFF;
    border-bottom: none;
}

.shoplinkkindle a { color:#ffffff; background:#1882c9; }
.shoplinkyahoo a { color:#ffffff; background:#fc1d2f; }
.shoplinkyahooAuc a { color:#252525; background:#ffdb00; }
.shoplinkseven a { color:#ffffff; background:#225093; }
.shoplinkbellemaison a { color:#ffffff; background:#83be00; }
.shoplinkcecile a { color:#ffffff; background:#6b053d; }
.shoplinkkakakucom a { color:#ffffff; background:#00138e; }
.shoplinkbk1 a { color:#ffffff; background:#0484d2; }
.shoplinkehon a { color:#ffffff; background:#00006a; }
.shoplinkkino a { color:#ffffff; background:#003e9d; }
.shoplinkjun a { color:#4b5854; background:#d8c9b7; }
.shoplinktoshokan a { color:#ffffff; background:#29b6e9; }
.booklink-footer { clear:both !important; }


@media only screen and (min-width:460px) and (max-width:640px) {
.kaerebalink-link1 div,
.booklink-link2 div {
/*    float: none;
    width: 100%;*/
float: left;
width: 49.5%;
}

/*.kaerebalink-link1 div:nth-child(even),
.booklink-link2 div:nth-child(even) { margin-left: 0;}*/
}


@media only screen and (max-width:459px) {
.kaerebalink-image,
.booklink-image {
    float: none;
    width: 100% !important;
    margin: 0 0 20px;
    text-align: center;
}

.kaerebalink-image a,
.booklink-image a,
.kaerebalink-image a img,
.booklink-image a img {
    max-width: 200px;
    max-height: 200px;
}

.kaerebalink-info,
.booklink-info { margin: 0;}