/* CSS Document */
@charset "UTF-8";
/*------------------------------------------
【cmn css】
--------------------------------------------*/
body{ background:#fff; color:#000; font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",sans-serif;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td{ margin: 0; padding: 0; }
fieldset, img { border: 0; }
a{text-decoration:none;}
ul, ul li{ margin:0; padding:0; list-style:none;}
p, img{ margin:0; padding:0; }
img { border: none; margin:0; padding:0; line-height:0;}

/*---clearfix--*/
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.clearfix:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; overflow: hidden; font-size: 0; }
* { margin: 0; padding: 0; }
.clear { clear: both; }


/*==================================
【basic color】
==================================*/
body ::selection { background: #E60012; color:#fff; /* Safari */ }
body ::-moz-selection { background: #E60012; color:#fff; /* Firefox */ }

/*-------index-------*/
#header{ background:#000;}
#main_inner{ background:#f6f6f6;}
#news,#footer{ background:#000; color:#fff;}
#bp_copy{ background: #333333; color:#fff;}
#contents_inner,
#contents_inner02{ background-color:#fff;}
h1#header_txt{ color:#fff;}
#kujitop a{ color:#000;}
#kujitop a:hover{ color:#ff0012;}

.topics_selectarea li,
.topics_selectarea li{ background:#e5e5e5;}
.topics_selectarea li:nth-child(2n){ background:#f7f7f7;}
.topics_selectarea li a{ text-decoration:underline; color:#000;}
.topics_selectarea li a:hover{ text-decoration:none; color:#E60012;}
.topics_selectarea .topics_day{ background:#000; color:#fff;}

/*==================================
【リンク時の挙動】
==================================*/
a img{ opacity: 1;transition: all 0.3s ease-out 0s;}
a img:hover {filter:alpha(opacity=70); -ms-filter:"alpha(opacity=70)"; -khtml-opacity:0.7; -moz-opacity:0.7; opacity:0.7; transition:all 0.5s ease 0s; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -ms-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s;}

/*==================================
【basic pc style】
==================================*/

/*-------header-------*/
#header_inner{ width:1200px; height:45px; margin:0 auto; position:relative;}
h1#header_txt{ font-size:16px; padding:7px 0 0 0; line-height:2em;}
#sns_area{ position:absolute; width:200px; top:13px; right:0;}
#snsbtn li{ float:right; margin:0 10px 0;}
#snsbtn li:last-child { margin:0!important;}
#snsbtn #sns_tw{ padding:0;}
#snsbtn #sns_fb{ padding:0; line-height:0!important;}
#snsbtn iframe{ margin:0!important;}

#top_borderarea{ height:10px; width:100%; background:url(../images/bg_border.gif);}
h1.tit_onepieceportal{ width:1200px; margin:0 auto; padding:10px 0 0 0;}

/*-------main-------*/
#main{ background:url(../images/bg_border.gif); margin:0 0 5px 0;}
#main_inner{ width:1200px; margin:0 auto; height:550px; padding:0 2px 0 10px;}
li.bnr_area{ width:232px; margin:0 9px 0 0;}
#main_inner li:last-child{ margin:0;}

/*-------news-------*/
#news_inner{ width:1120px; margin:0 auto; padding:5px 0; font-size:14px;}
#news_tit{ float:left; width:70px; height:25px;}
hr#news_line{ display:none;}
#news_txt{ float:left; padding:0 0 0 40px; overflow:hidden; line-height:1.7;}

/*-------contents-------*/
#contents{ background:url(../images/bg_border.gif); padding:25px 0 20px 0;}
.monthly_update{ display:block; width:1120px; height:117px; margin:0 auto 20px auto;}
.monthly_update_sp{ display:none;}
#contents_inner,#contents_inner02{ width:1040px; margin:0 auto; padding:40px;}
#contents_inner02{ margin-top:30px;}
#contents_area{ width:1002px; margin: 0 auto;}

/*-------topics-------*/

#iframe_area{ width:660px; height:520px!important;  -webkit-overflow-scrolling: touch;}
#iframe_area iframe{width:100%; height:100%; border:none;}

.new_topics,
.archive_topics{ width:660px; padding:10px 0 0 0;}
.topics_selectarea li{ float:left; width:325px; padding:0; margin:0 10px 10px 0; font-size:12px;}
.topics_selectarea li:nth-child(2n){ margin:0;}
.topics_selectarea .topics_day{ font-size:12px; display:inline-block; text-align:center; padding:0 5px; line-height:1.6;}
.topics_txt{ padding:5px 10px 10px 10px; line-height:2.0;}

.topics_btn_more,
.topics_btn_close{ text-align:center; width:660px; height:35px;}

.topics_btn_more{ background:url(../images/topics_btn_more.png) #000 no-repeat top center; background-size:90px; background-position:center; cursor:pointer;}
.topics_btn_close{ background:url(../images/topics_btn_close.png) #000 no-repeat top center; background-size:90px; background-position:center; cursor:pointer;}

/*-------twitter-------*/
#twitter_timeline{ float:right; width: 350px; margin:10px 0 0 0; height:740px;}
#twitter_timeline iframe{ height:740px !important;}

#twitter_timeline02{ float:right; width: 350px; margin:10px 0 0 0; height:320px;}
#twitter_timeline02 iframe{ height:320px !important;}

/*-------link-------*/
#link{ width:1120px; margin:20px auto 0 auto;}

#link_area{ width:500px; margin:0 auto;}
#link_area li{ width:240px; height:60px; float:left; margin:0 15px 0 0;}
#link_area li:last-child{ margin:0;}

#link_area2{ width:510px; margin:0 auto;}
#link_area2 li{ width:240px; height:60px; float:left; margin:0 15px 0 0;}
#link_area2 li:nth-child(3){ width:174px; margin:0;}
#howto_banner{ width:740px; margin:0 auto 15px auto;}

/*-------kujitop-------*/
#kujitop{ width:1120px; text-align:center; margin:0 auto 0 auto; padding:30px 0 10px 0; font-size:14px; line-height:1.5;}
#kujitop a:link{ text-decoration:underline;}
#kujitop a:hover{ text-decoration:none;}

/*-------footer-------*/
#footer{ padding:15px 0 10px 0;}
#footer_inner{ width:1120px; margin:0 auto; font-size:11px;}
#footer_left{ float:left;}
#footer_right{ float:right; text-align:right;}
#footer_center{ float:none; text-align:center;}

/*-------bp_copy-------*/
#bp_copy{ padding:8px 0;font-size:11px; text-align: center;}

/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 768px) {

/*-------header-------*/
#header_inner{ width:95%; height:70px; position:relative;}
h1#header_txt{ padding:6px 0 0 0!important; text-align:center; font-size:16px;}
#sns_area{ position:static; margin:0 auto; width:170px;}
#sns_area li{ float:right; margin:0 0 0 15px; list-style: none outside none; display:block;}

#sns_area #snsbox #snsbtn #sns_tw a { margin:0px; padding:0px; display:block;}
#sns_area #snsbox #snsbtn #sns_fb { height:20px; overflow:hidden !important;}
#sns_area #snsbox #snsbtn #sns_fb span { padding:0 !important;}

#top_borderarea{ height:15px;}
h1.tit_onepieceportal{ width:95%;  padding:3% 0 0 0;}

/*-------main-------*/
#main{  margin:0 0 1% 0; overflow:hidden;}
#main_inner{ width:75%; height:auto; padding:0 1.5% 0 3%;}

/*-------news-------*/
#news_inner{ width:95%; padding:3% 0 3% 0;}
#news_tit{ float:none; width:75px;}
hr#news_line{ display:block; width:100%; border:none; border-bottom:solid 1px #a2a2a2; padding:2% 0 0 0;}
#news_txt{ float:none; padding:2% 0 0 0; overflow:hidden; }

/*-------contents-------*/
#contents{ padding:4% 0 0 0; overflow:hidden;}
.monthly_update{ display:none;}
.monthly_update_sp{ display:block; width:95%; margin:0 auto 1% auto;}
#contents_inner,#contents_inner02{ width:91%; padding:5% 2%;}
#contents_inner02{ margin-top:3%;}
#contents_area{ width:100%;}

/*-------topics-------*/
#iframe_area{ width:100%; height:300px!important;  -webkit-overflow-scrolling: touch; overflow:auto;}
#iframe_area iframe{width:100%; height:100%; display:block;}

.new_topics,
.archive_topics{ width:100%; padding:2% 0 0 0;}
.topics_selectarea li{ float:none; width:100%; padding:0; margin:0 0 2% 0;}
.topics_selectarea li:nth-child(2n){ margin:0;}
.topics_selectarea .topics_day{ font-size:12px; padding:0 2%; line-height:1.6;}
.topics_txt{ padding:1% 2% 2% 2%; font-size:12px;}

.topics_btn_more,
.topics_btn_close{ margin-bottom:5%; width:100%;}

/*-------twitter-------*/
#twitter_timeline,
#twitter_timeline02{ float:none; width: 100%; margin:0 auto; height:300px;}
#twitter_timeline iframe,
#twitter_timeline02 iframe{ height:300px !important; width: 100%; margin:0 auto;}

/*-------link-------*/
#link{ width:95%; margin:0 auto 0 auto; padding:5% 0 0 0;}

#link_area{ float:none; width:90%; margin:0 auto; padding:3% 0 0 0;}
#link_area li{ width:48%; float:left; margin:0 3% 0 0;}
#link_area li:last-child{ margin:0;}

#link_area2{ float:none; width:70%; margin:0 auto; padding:3% 0 0 0;}
#link_area2 li{ width:100%; float:none; margin:0 0 7% 0;}
#link_area2 li:nth-child(3){ width:100%; margin:0 0 7% 0;}
#howto_banner{ width:100%; margin:0 auto 0% auto;}


/*-------kujitop-------*/
#kujitop{ width:95%; margin:0 auto 0 auto; font-size:14px; padding-bottom:5%;}
#kujitop a:link{ text-decoration:underline;}
#kujitop a:hover{ text-decoration:none;}

/*-------footer-------*/
#footer{ padding:3% 0 4% 0;}
#footer_inner{ width:95%; font-size:11px;}
#footer_left{ float:none;}
#footer_right{ float:none; text-align:left; padding:4% 0 0 0;}

/*-------bp_copy-------*/
#bp_copy{ padding:3% 0;font-size:11px; }

}


/* ==================== BANDAI SPIRITS ロゴ ==================== */
.bspLogo{
  display: block;
  width: 4.23vw;
  max-width: 50px;
  margin: 10px 0 0 auto;
  padding-right: 10px;
  box-sizing: content-box;
}
.bspLogo img{
  width: 100%;
}
@media screen and (max-width: 768px){
  .bspLogo{
    width: 12.4vw;
    margin: 4vw auto 0;
    padding: 0;
  }
}