@charset "UTF-8";

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

	.site-header-in,
	.global-nav-in,
	.main-body-in,
	.site-footer-in{
		width: 96%;
		margin: auto;
	}
	
	.main-image-in,
	.main-image-in-text,
	.main-image-in-text .main-image-in-text-cont,
	.main-image-in-text.wide .main-image-in-text-cont{
		width: 100%;
	}
	
	.col1 .section-wrap,
	.col1 .breadcrumbs,
	.col1 .section-wrap.wide .section-in,
	.col1 .section-wrap.wide{
		width: auto;
	}
	
	.col1 .breadcrumbs-in,
	.col1 .float-area{
		width: 96%;
		margin-right: auto;
		margin-left: auto;
	}
	
	/*吹き出し*/
	.bubble{
		width: 70%;
	}
	
	.talker{
		width: 25%;
	}
	
	.bubble .bubble-in:after,
	.bubble .bubble-in:before{
		top: 30px;
	}
	
	.together .bubble,
	.together .talker{
		width: 100%;
	}
	
	.together .talker b{
		max-width: 25%;
	}

	.ranking-list04 .rank-box,
	.ranking-list05 .rank-box,
	.post-list01 .post-box,
	.post-list02 .post-box{
		width: 100%;
	}
	
	.col1 .ranking-list05 .rank-box,
	.col1 .post-list02 .post-box{
		width: 320px;
	}
	
}/*解像度1200px以下*/

/*--------------------------------------------------------
解像度737px以上950px以下
--------------------------------------------------------*/
@media (min-width: 737px) and (max-width: 950px){

	/*ランキング*/
	.col2 .sub-conts .ranking-list03 .rank-thumb,
	.col2r .sub-conts .ranking-list03 .rank-thumb,
	.col2 .comparative-list01 .rank-thumb,
	.col2 .comparative-list02 .rank-thumb,
	.col2r .comparative-list01 .rank-thumb,
	.col2r .comparative-list02 .rank-thumb{
		float: none;
	}
	
	.col2 .comparative-list01 .rank-thumb,
	.col2 .comparative-list02 .rank-thumb,
	.col2r .comparative-list01 .rank-thumb,
	.col2r .comparative-list02 .rank-thumb{
		display: inline-block;
	}

	.col1 .ranking-list04 li,
	.col1 .ranking-list05 li,
	.col1 .post-list01 li,
	.col1 .post-list02 li{
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.col1 .ranking-list04 .rank-box,
	.col1 .ranking-list05 .rank-box,
	.col1 .post-list01 .post-box,
	.col1 .post-list02 .post-box{
		width: 320px;
	}

	.col1 .banner-list li{
		display: list-item;
		margin-left: 0;
	}

}/*解像度737px以上950px以下*/

/*--------------------------------------------------------
解像度736px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 736px){

	html,
	body,
	.containr{
		min-width: 0;
	}

	html{
		overflow-x: hidden;
		overflow-y: scroll;
	}

	html,body{
		width: 100%;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}

	textarea,input{
		max-width: 95%;
	}
	
	input[type="submit"],input[type="image"],
	input[type="reset"],input[type="button"],
	input[type="file"]{
		max-width: none;
	}
	
	blockquote{
		position: relative;
		margin: 2em 0;
		padding: 115px 20px 80px;
		background: #eee;
	}

	.site-header-in,
	.global-nav-in,
	.main-body-in,
	.site-footer-in{
		width: 100%;
	}
	
	.col2 .main-conts,
	.col2 .sub-conts,
	.col2r .main-conts,
	.col2r .sub-conts{
		float: none;
		width: auto;
	}
	
	/*ヘッダー*/
	.site-header-conts,
	.site-title,
	.header-box{
		display: block;
	}
	
	.header-box{
		margin-top: 15px;
	}
	
	.site-header-conts{
                padding-bottom: 0;           　　   /* ------------------------ S変更 */
	}
	
	.no-gn .site-header-conts{
		padding-top: 0;
	}
	
	.site-header-conts{
		padding-bottom: 10px;
	}

/* ------------------------ T変更 ロゴ＆h1余白 */
	.site-title{
		padding: 15px 15px 0px 15px;           /* ------------------------ S変更 */
		margin-top: 7px;                   /* ------------------------ S追加 ロゴ余白 */
		margin-bottom: -24px;                   /* ------------------------ S追加 ロゴ余白 */
		font-size: 0.6em;                   /* ------------------------ S変更 h1サイズ*/
	}

	.normal-screen .site-title{
		font-size: 2em;
	}

	.normal-screen .lp-catch{
		padding: 15px 15px 0;
		font-size: 1em;
	}

	.header-box{
		margin-left: 0;
		text-align: center;
	}
	
	.site-header-in{
		position: relative;
		padding-bottom: 1em;
	}

	
	/*グローバルナビ*/
	.global-nav{
		position: absolute;
		top: 0;
		width: 100%;
		margin: 0;
		border: 0;
		background: #49abe2;                /* ------------------------ S変更 */
	}
	
	.global-nav ul{
		display: none;
		position: absolute;
		top: 50px;
		left: 10px;
		z-index: 50;
		width: 80%;
		border: 0;
		background: #87c9ef;                /* ------------------------ S変更 */

	}
	
	.global-nav-panel{
		display: block;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 10px;
		background: #49abe2;                /* ------------------------ S変更 */
		color: #fff;
		cursor: pointer;
	}

	.global-nav-in li{
		display: list-item;
		width: auto;
		border-right: 0;
		border-bottom: 1px solid #fff;
		text-align: left;
	}
	
	.global-nav-in li ul{
		position: static;
		width: auto;
		margin-left: 1em;
	}
	
	.global-nav-in li ul li{
		width: auto;
		border-bottom: 0;
	}
	
	.global-nav-in li a,
	.global-nav li ul li a{
		padding: 1em;
		padding-right: 2em;
		background: url(./images/icon/icon-gn-arw.png) right center no-repeat;
	}

		/*Retina（高解像度）ディスプレイ用*/
		@media screen and (-webkit-min-device-pixel-ratio:2),
		(min-resolution: 2dppx){

			.global-nav-in li a,
			.global-nav li ul li a{
				background: url(./images/icon/icon-gn-arw@2x.png) right center no-repeat;
				-webkit-background-size: 27px 18px;
				background-size: 27px 18px;
			}

		}

	/*--------------------------------------------------------
	メインビジュアル
	--------------------------------------------------------*/

	.main-image-in-text-cont{
		padding: 1em;
	}
	
	.main-copy{
		margin-bottom: 10px;
		font-size: 2em;
		text-align: center;
	}

	.sub-copy{
		font-size: 1em;
	}
	
	.section-wrap,
	.col1 .section-wrap.wide{
		padding: 0;
		border: 0;
	}
	
	.col1 .section-wrap{
		padding: 0;
	}
	
	.section-wrap .section-in,
	.col1 .section-wrap.wide .section-in,
	.float-area,
	.col1 .float-area{
		padding: 15px;
	}

	.col1 .sub-conts .section-wrap .section-in{
		padding: 0 20px 30px;
	}

	.section-wrap .section-in .section-title,
	.section-wrap .article-header .section-title{
		margin: -15px -15px 20px;
		padding: 15px;
		font-size: 1.4em;                      /* ------------------------ S変更 */
	}

	.sub-conts .section-wrap .section-in .section-title,
	.sub-conts .section-wrap .article-header .section-title,
	.col1 .sub-conts .section-wrap .section-in .section-title,
	.col1 .sub-conts .section-wrap .article-header .section-title{
		margin: 0 -20px 30px -20px;
	}

	.main-body h1,
	.main-body h3,
	.main-body h4,
	.main-body h5,
	.main-body h6{
		margin: 10px 0 10px;
	}
	

	.main-body h1{
		font-size: 1.2em;　      　/* ------------------------ S変更 */
	}

	.main-body h2{
		margin: 0px 0 20px;         /* ------------------------ 追加S変更 */
		font-size: 1.2em;　      　/* ------------------------ S変更 */
	}


        .main-image{                             /* ------------------------ S追加 */
                margin-bottom: 0;
        }
        .main-body {                             /* ------------------------ S追加 */
                margin-top: 0;
        }

	/*パンくずリスト ■T変更*/
	.breadcrumbs-in{
		margin-top: 4px;　      　/* ------------------------ S追加 */
		margin-bottom: -1em;　      　/* ------------------------ S変更 */
		padding: 0 1em 0 1em;
		font-size: 0.65em;　      　/* ------------------------ S変更 */
	}

	.breadcrumbs-in li:last-child{
		display: none;
	}
	
	.col1 .breadcrumbs-in{
		width: auto;
	}

	/*フッターナビ*/
	.site-footer-nav{
		display: block;
		text-align: left;
	}

	.site-footer-nav li,
	.site-footer-nav li:first-child{
		display: list-item;
		margin-left: 20px;
	}

	/*コピーライト*/
	.copyright{
		padding: 15px;
		text-align: left;
	}

	.page-top img{
		width: 40px;
	}

	/*最新情報*/
	.news .news-thumb{
		float: none;
		text-align: center;
	}

	.main-body .news-title{
		font-size: 1.2em;
	}

	/*テーブル（左端がth、右側がtdの場合にスマホ表示で立て並びに変化）*/
	.table-block,
	.table-block thead,
	.table-block tbody,
	.table-block tfoot,
	.table-block tr,
	.table-block th,
	.table-block td{
		display: block;
	}
	
	.table-block{
		border-bottom: 1px solid #959595;
	}
	
	.table-block th,
	.table-block td{
		float: left;
		width: 100%!important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.table-block:after{
		content : '';
		display : block;
		clear : both;
		height:0;
	}
	
	.table-scroll:before{
		content: "※はみ出ている場合、横にスクロールできます。"
	}

	/*バナーエリア*/
	.banner-list li{
		text-align: center;
	}
	
	.banner-list li,
	.col1 .banner-list li,
	.main-conts .banner-list li{
		display: list-item;
		margin-left: 0;
	}

	/*ボタン*/
	.btn-area{
		text-align: center;
	}

	.btn{
		float: none;
		margin-right: 0;
		margin-left: 0;
	}

	.btn-area .btn {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.btn-green,
	.btn-blue,
	.btn-orange,
	.btn-red{
		padding: 25px;
	}

	.btn-form01{
		padding: 25px 40px;
	}

	.btn-form02{
		padding: 25px 20px;
	}

	/*ソーシャルボタン*/
	.sns-list li{
		margin-right: 1em;
		margin-left: 0;
	}

	/*登場人物紹介２*/
	.col1 .cast-box02 .cast{
		min-height: 0;
		padding-top: 210px;
	}

	.col1 .cast-box02 .cast-name,
	.col1 .cast-box02 .cast-profile{
		padding-left: 0;
	}

	.col1 .cast-box02 .cast .cast-headshot{
		width: 100%;
	}

	/*ランキング*/
	.rank-thumb{
		float: none;
	}
	
	.sub-conts .ranking-list03 .rank-thumb,
	.col2 .sub-conts .ranking-list03 .rank-thumb,
	.col2r .sub-conts .ranking-list03 .rank-thumb{
		float: left;
	}

	.col1 .ranking-list04 li,
	.col1 .ranking-list05 li,
	.col1 .post-list01 li,
	.col1 .post-list02 li{
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.comparative-list01 .rank-thumb,
	.comparative-list02 .rank-thumb{
		display: inline-block;
		float: none;
	}

	.ranking-list04 .rank-box,
	.ranking-list05 .rank-box,
	.post-list01 .post-box,
	.post-list02 .post-box{
		width: 320px;
	}
	
	/*関連記事*/
	.related-articles-thumbs02 li{
		float: none;
		width: auto;
		margin-left: 0;
	}
	
	.eye-catch{
		float: none;
		margin: 0 0 1em;
		text-align: center;
	}

}/*解像度736px以下*/

/*--------------------------------------------------------
解像度480px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 480px){

	/*段組*/
	.col4-wrap,
	.col3-wrap,
	.col2-wrap{
		margin: 0 0 1em;
	}

	.col4-wrap .col,
	.col4-wrap .col_2of4,
	.col4-wrap .col_3of4,
	.col3-wrap .col,
	.col3-wrap .col_2of3,
	.col2-wrap .col{
		float: none;
		margin-left: 0;
	}

	.col4-wrap .col,
	.col4-wrap .col_2of4,
	.col4-wrap .col_3of4,
	.col3-wrap .col,
	.col3-wrap .col_2of3,
	.col2-wrap .col{
		width: auto;
	}

	.left,
	.right{
		float: none;
		margin-right: 0;
		margin-left: 0;
		text-align: center;
	}

	.alignleft,
	.alignright{
		float: none;
		margin-right: 0;
		margin-left: 0;
		text-align: center;
	}

	.ranking-list04 .rank-box,
	.ranking-list05 .rank-box,
	.post-list01 .post-box,
	.post-list02 .post-box,
	.col1 .ranking-list05 .rank-box,
	.col1 .post-list02 .post-box{
		width: 100%;
	}

/* ------------------------ S追加 ロゴ＆h1余白 */
	.site-title{
		margin-top: 8px;
		margin-left: 0px;
		margin-bottom: -25px;
                padding-bottom: 4px;
		font-size: 0.5em;                   /* ------------------------ S変更 h1サイズ*/
	}



/* ------------------------ S追加 タイトル非表示での余白調整 */
        .breadcrumbs-in{
                margin-top: 5px;
		margin-bottom: -1px;
                padding: 0 1em;
        }


}/*解像度480px以下*/







/*-------------------------------
ランキング
--------------------------------*/
.waku-rank {
	background: #FFFFFF;
	padding: 14px 14px 14px 14px;
	margin: 2px 0px 14px 0px;
	line-height: 140%;
	min-height: 40px;
	border: 3px solid #cccccc;
}

/*-------------------------------
サイド　テーブル１　橙
--------------------------------*/
.table_siderank{
	border-top:5px solid #E85603;
	border-left:5px solid #E85603;
	border-right:5px solid #E85603;
	margin-top:-15px;
	margin-right:-5px;
	margin-left:-5px;
	margin-bottom:10px;
	text-align:center;
	}
	
.table_siderank td{
	padding:10px;	/*----------------テーブル内間隔*/
	border-right:5px solid #E85603;
	border-bottom:5px solid #E85603;
        font-size: 15px;
}

.table_siderank td.tablemenu{
	border-right:5px solid #E85603;
	background:#E85603;
	}


/*-------------------------------
サイド　テーブル２　青
--------------------------------*/
.table_siderank2{
	border-top:5px solid #005dca;
	border-left:5px solid #005dca;
	border-right:5px solid #005dca;
	margin-top:-15px;
	margin-right:-5px;
	margin-left:-5px;
	margin-bottom:10px;
	text-align:center;
	}
	
.table_siderank2 td{
	padding:10px;	/*----------------テーブル内間隔*/
	border-right:5px solid #005dca;
	border-bottom:5px solid #005dca;
        font-size: 15px;
}

.table_siderank2 td.tablemenu{
	border-right:5px solid #005dca;
	background:#005dca;
	}


/*-------------------------------
サイド　テーブル３　緑　
--------------------------------*/
.table_siderank3{
	border-top:5px solid #00a139;
	border-left:5px solid #00a139;
	border-right:5px solid #00a139;
	margin-top:-15px;
	margin-right:-5px;
	margin-left:-5px;
	margin-bottom:10px;
	text-align:center;
	}
	
.table_siderank3 td{
	padding:10px;	/*----------------テーブル内間隔*/
	border-right:5px solid #00a139;
	border-bottom:5px solid #00a139;
        font-size: 15px;
}

.table_siderank3 td.tablemenu{
	border-right:5px solid #00a139;
	background:#00a139;
	}





/*-------------------------------
枠　■追加
--------------------------------*/
.waku-mokuji {
	background: #eee;
	padding: 7px 10px 10px 10px;
	margin: 2px 0px 14px 0px;
	line-height: 1.8;
	min-height: 40px;
	border: 1px solid #ccc;
	font-size:14px;
}

.waku-attention {
	background:#FDDAE0;
	padding: 15px 15px 15px 15px;
	margin: 10px 0px 20px 0px;
	border: 1px solid  #FDDAE0;
	line-height: 1.5em;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
		}


/*-------------------------------
お知らせ
--------------------------------*/
.waku-oshirase {
	background: #FFFFEF;
	padding: 10px;
	margin: 0px 0px 10px 0px;
	border: 1px dotted #ddd;
        font-size: 110%;
	line-height: 1.5em;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
		}



/*-------------------------------
テーブル 線のみ
--------------------------------*/

table.type01 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	margin-bottom: 25px;
	border-right: 1px solid #bbb;
}
table.type01 th {
    width: 30%;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
        text-align: left;
        background-color:#D4EEFB;
	border-right: 1px solid #bbb;
	border: 1px solid #bbb;
}
table.type01 td {
	padding: 10px;
	vertical-align: top;
        text-align: left;
        background-color:#fff;
	border-right: 1px solid #bbb;
	border: 1px solid #bbb;
}

/*-------------------------------
テーブル 線のみ
--------------------------------*/

table.type01b {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	margin-bottom: 25px;
	border-right: 1px solid #bbb;
	font-size: 80%;
}
table.type01b th {
	width: 23%;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
        text-align: left;
        background-color:#D4EEFB;
	border-right: 1px solid #bbb;
	border: 1px solid #bbb;
}
table.type01b td {
	width: 77%;
	padding: 10px;
	vertical-align: top;
        text-align: left;
        background-color:#fff;
	border-right: 1px solid #bbb;
	border: 1px solid #bbb;
}

/*-------------------------------
テーブル  　■追加
--------------------------------*/

table.type06 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.3;
	border: 1px solid #ccc;
	margin-bottom: 26px;
}
table.type06 thead {
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
table.type06 thead th {
	padding: 8px;
	font-weight: normal;
	vertical-align: top;
	color: #333;
	background: #FED7B4;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
table.type06 tbody th {
	padding: 8px;
	font-weight: normal;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: #ffeddd;
}
table.type06 td {
	padding: 8px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

/*-------------------------------
テーブル  　■追加
--------------------------------*/

table.type07 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.3;
	border: 1px solid #ccc;
}
table.type07 thead {
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
table.type07 thead th {
	padding: 8px;
	font-weight: bold;
	vertical-align: top;
	color: #333;
	background: #FED7B4;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
table.type07 tbody th {
	padding: 8px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: #ffeddd;
}
table.type07 td {
	padding: 8px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}


/*-------------------------------
スマホテーブル
--------------------------------*/
table{
width:100%;
}
.scroll{
overflow: auto;
white-space: nowrap;
}
.scroll::-webkit-scrollbar{
 height: 5px;
}
.scroll::-webkit-scrollbar-track{
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}

/*------------------------------
目次　■追加
-------------------------------*/
.nmlbox {
	padding:15px;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 2px solid #CCCCCC;
        background-color:#fff;
        font-size: 80%;
	clear:both;
}




/*------------------------------------------------------
アコーディオン四角 ■追加
--------------------------------------------------------*/

<style>
  .su-spoiler.my-custom-spoiler {}
  .su-spoiler.my-custom-spoiler .su-spoiler-title { 
    font-size: 16px;
    font-weight: normal;
    background-color: #ffffff;
    border: 4px solid #B3D96F;
    padding: 8px 10px 8px 28px;
    margin: 0px 0px -5px 0px;
    color:#333;

  }
  .su-spoiler.my-custom-spoiler .su-spoiler-title .su-spoiler-icon,
  .su-spoiler.su-spoiler-closed.my-custom-spoiler .su-spoiler-title .su-spoiler-icon {
    left: 3px;
    background-color: #ffffff;
  }
  .su-spoiler.my-custom-spoiler .su-spoiler-content { 
    background-color: #ffffff;
    padding: 20px 0px 10px 0px;
  }
</style>




/* ---------------------------------------
CSS マウスオーバー薄く
---------------------------------------*/
a:hover img{
	opacity:0.7;
	filter: alpha(opacity=70);
        -moz-opacity:0.70; /* Firefox CSS3以前 */
}



/* ---------------------------------------
■個別ページ　タイトル非表示
---------------------------------------*/
.article-header .section-title{
	margin: -20px 0px 0px 0px;
        display: none;
	}


/* ---------------------------------------
■点線2　追加
---------------------------------------*/
.dot2{border-bottom:1px dotted #CCCCCC;}




/* ---------------------------------------
■点線3　追加
---------------------------------------*/
.dot3{border-bottom:3px dotted #5DB4FF;	margin-bottom:10px;}



/* ------ ■■その他属性 追加■■------ */
.red_uline{border-bottom: 2px solid #FF3300;}
.uline{border-bottom: 1px solid #FF6633;}
.link_line{text-decoration: underline;} 
.dot{border-bottom:1px dotted #CCCCCC;}
.solid{border-bottom:1px solid #CCCCCC;}
.clr{clear: both;}
strong{font-weight: bold;}
em{color: red;}
.txtcenter{text-align: center;}
.red{color: #CC0000;}
.aka { color: #ff0000;}
.akapink { color: #e70049;}
.pink{color: #CC0099;}
.pink2{color: #D14966;}
.mizu{color: #218ECA;}
.mizu2{color: #4B92D7;}
.mizu3{color: #55B8F1;}
.blue { color: #0C89C7;}
.ao { color: #002255;}
.ao2 { color: #0000ff;}
.tya { color: #bd000e;}
.gray { color: #3d3737;}
.green { color: #5CA901;}
.green2 { color: #1F8539;}
.kimi { color: #8FC31F;}
.kusa { color: #0F601C;}
.aomidori { color: #2ebab7;}
.enji { color: #9c2662;}
.ora { color: #ff9900;}
.cha { color: #863814;}
.cha2 { color: #7c1902;}
.kuro { color: #000000;}
.white { color: #ffffff;}
.bg_yellow{background: #FFFF00;}
.bg_green{background: #67BE7A;}
.gold{color: #F4CA54;}
.gold2{color: #BE8C2C;}
.silver{color: #999999;}
.silver2{color: #728894;}
.copper{color: #BD4C54;}
.other{color: #71AAE0;}

.fon10{font-size: 71%;}
.fon11{font-size: 78%;}
.fon12{font-size: 85%;}
.fon13{font-size: 92%;}
.fon14{font-size: 100%;}
.fon15{font-size: 108%;}
.fon16{font-size: 115%;}
.fon17{font-size: 122%;}
.fon18{font-size: 129%;}
.fon19{font-size: 136%;}
.fon20{font-size: 143%;}
.fon22{font-size: 158%;}
.fon24{font-size: 172%;}
.fon28{font-size: 200%;}