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

html
{
	position:relative;
	padding-bottom:65px;
	font-size:12px;
	-webkit-text-size-adjust: 100%; 
}

/*============================
*head
============================*/

#head
{
	z-index:150;
	border-bottom:dotted 1px #ccc;
}

#head .h_inner
{
	width:95%;
	margin:5px auto 15px;
	position:relative;
}


#top a
{
	display:block;
	position:relative;
	z-index:100;
	top:5px;
}

#top a
{
	font-size:30px;
	width:140px;
	height:62px;
	background:url(../img/logo.png) no-repeat center center;
	background-size:contain;
	text-indent:-9999px;
}
#h-sns
{
	position:absolute;
	top:30px;
	right:10px;
}
#h-sns a
{
	display:inline-block;
	width:30px;
	margin-left:5px;
}
#h-sns a img
{
	width:100%;
	height:auto;
}

.search
{
	position:absolute;
	right:0px;
	top:80px;
}

.search i
{
	font-size:30px;
}

.searchBox
{
	background:rgba(0,0,0,0.9);
	width:100%;
	/*position:absolute;*/
	/*top:125px;*/
	top:80px;
    position: fixed;

	text-align:center;
	box-sizing:border-box;
	z-index:20;
	display:none;
}
.searchBox,
.searchBox a
{
	color:#fff;
}
.searchBox ul
{
	display:table;
	width:100%;
	border-bottom:dotted 1px #fff;
	margin-bottom:15px;
}
.searchBox ul li
{
	display:table-cell;
	text-align:right;
	width:50%;
	padding-right:15px;
}

.searchBox a
{
	display:block;
	font-size:14px;
	padding-bottom:15px;
	padding-top:15px;
}
.searchBox a span.icon-twon
{
	background:url(../img/search_town.png) no-repeat 0 center;
	background-size:25px;
	padding:10px;
	padding-left:35px;
}
.searchBox a span.icon-train
{
	background:url(../img/search_train.png) no-repeat 0 center;
	background-size:22px;
	padding:10px;
	padding-left:35px;
}

.searchBox ul li:last-child
{
	text-align:left;
	padding-right:0px;
	padding-left:15px;
	border-left:dotted 1px #fff;
}

.searchBox dl
{
	padding:15px;
/*	padding-top:0;*/
}
.searchBox input[type="search"]
{
	border-radius:5px;
	background:#000 url(../img/search_magnifier.png) no-repeat right center;
	background-size:25px;
	color:#fff;
	border:solid 1px #fff;
	padding:10px;
	/*width:100%;*/
	width:70%;
	box-sizing:border-box;
	margin-bottom:15px;
	margin-top:15px;
    margin-right:10px;
}
.searchBox select
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius:5px;
	background:#000 url(../img/select_arrow.png) no-repeat right center;
	background-size:18px;
	color:#fff;
	border:solid 1px #fff;
	padding:10px;
	width:49%;
	box-sizing:border-box;
	display:inline-block;
	margin-bottom:10px;
}
select::-ms-expand {
	display: none;
}

.searchBox input[type="submit"]
{
	background:#fff;
	color:#000;
	border:0;
	/*width:100%;*/
	width:20%;
	padding:8px;
    margin-bottom:15px;
    margin-top:15px;
	cursor:pointer;
}

/*============================
#pasthList
============================*/
ul#pasthList {
	width:95%;
	max-width:768px;
	margin:10px auto;
}
ul#pasthList li {
	display:inline-block;
	margin-right:5px;
}
ul#pasthList li a {
}



/*============================
#main
============================*/
div#main {
	width:100%;
	margin:0 auto;
	font-size:14px;
	line-height:200% !important;
}

/*============================
.grayBox
============================*/
div#main div.grayBox {
    width: 100%;
	padding:15px 0px;
	background:#EDEDED;
}
div#main .inner {
	width:95%;
	margin:0 auto;
	}

div#main div h1.findingH1
{
	font-weight:bold;
	font-size:20px;
	margin-bottom:20px;
	line-height:110%;
}
div#main div h1.findingH1:before
{
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e606";
}
div#main div h2.findingH2
{
	font-weight:bold;
	font-size:18px;
	margin-bottom:20px;
	line-height:110%;
}
div#main div h2.findingH2:before
{
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e605";
}
div#main div h3.findingH3
{
	font-weight:bold;
	font-size:16px;
	margin-bottom:15px;
	line-height:110%;
}
div#main div h3.findingH3:before
{
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e604";
}


div#main div h4.findingH4
{
	font-weight:bold;
	font-size:14px;
	margin-bottom:15px;
	line-height:110%;
}
div#main div h4.findingH4:before
{
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e603";
}

div#main div h2.noiconH2
{
	font-weight:bold;
	font-size:18px;
	margin-bottom:20px;
	line-height:110%;
}


/* colBox -----------------------------------*/

div.colBox {
	display:block;
	width:100%;
	margin:0 auto;
}
div.colBox dl,
div.colBox div.boxChild {
	margin-bottom:15px;
}
div.colBox dl dt {
}
div.colBox  img {
	width:100%;
	height:auto;
}
div.colBox dl dd {
}

ul.colList li
{
	display:inline-block;
	width:40%;
	padding-left:20px;
}
ul.colList
{
	margin-left:-20px;
}
ul.colList li a:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e607";
	padding-left:2px;
	padding-right:5px;
}

/*============================
articleBox
============================*/

div.articleBox {
	letter-spacing:-.4em;
	margin:0 5px;
}
div.articleBox dl {
	letter-spacing:normal;
	display:inline-block;
	background:#fff url(../img/article_arrow.png) no-repeat right 2px bottom 2px;
	background-size:4px;
	width:50%;
	box-sizing:border-box;
	padding:5px;
	border:solid 5px #ededed;
	vertical-align:top;
}
div.articleBox dl dt {
	text-align:center;
	position: relative;
	width:100%;
}


div.articleBox dl dt p {
}

div.articleBox dl dt p img {
    width: 100%;
	/*height:auto;*/
    /* CLS */
    aspect-ratio: 1/1;
}
div.articleBox dl dd {
}
div.articleBox dl dd a {
	display:block;
	margin-top:5px;
	font-size:16px;
}
div.articleBox dl dd a:hover
{
	text-decoration:none;
}
/* aの位置を変えた */
div.articleBox dl a {
	display:block;
	/*margin-top:5px;*/
	font-size:16px;
}
div.articleBox dl a:hover
{
	text-decoration:none;
}

div.articleBox dl:hover
{
	opacity:0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";

-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}

/*============================
.pageNav
============================*/
ul.pageNav {
	text-align:center;
	margin:40px 0;
	letter-spacing:-.4em;
}
ul.pageNav li {
	display:inline-block;
	box-sizing:border-box;
	text-align:center;
	letter-spacing:normal;
}
ul.pageNav li a {
	display:block;	
	background:#fff;
	padding:5px;
	border:solid 5px #ededed;
	width:30px;
	height:30px;
	line-height:30px;
	font-weight:bold;
}

ul.pageNav li a:hover,
ul.pageNav li a.current
{
	background:#6B6B6B;
	border:solid 5px #ededed;
	color:#fff;
	text-decoration:none;
}
/*============================
.snsArea
============================*/
.snsArea 
{
	text-align:center;
	padding:40px 0 !important;
	background:#fff;
	border: solid 11px #ededed;
}
.snsArea .snsIcon img
{
	width:25px;
	height:auto;
}
.snsArea h2
{
	font-weight:bold;
	font-size:18px;
	margin:10px 0 20px;
}

.snsArea .snsIcon
{
	margin-bottom:40px;
}

.boxChild
{
	padding:15px;
}

@media screen and (max-width: 800px) {
.twitter-timeline
{
	max-width:350px !important;
}
}
/*============================
.snsLike
============================*/
.snsLike
{
	padding-top:5px;
	width:100%;
	overflow:hidden;
}
.snsLike li
{
	display:inline-block;
	margin-right:10px;
}

/*============================
.snsLike
============================*/
.snsLike
{
	padding-top:5px;
	width:100%;
	overflow:hidden;
}
.snsLike li
{
	display:inline-block;
	margin-right:10px;
}

.snsLike2
{
	padding-top:5px;
	width:100%;
	overflow:hidden;
    margin: 0 auto;
    /* cls */
    height:50px;
}

.snsLike2 li
{
    width: 18%;
	display:inline-block;
	margin-right:2%;
    float:left;
    display: block;
}

.snsLike2 a 
{
    padding:10px 0 10px 0;
    display:block;
    width:100%;
}

.snsLike2 li:hover {
	opacity:0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";

-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}

.snsLike2 a img
{
    display:block;
    margin: 0 auto;
    width:30px;
}

.snsLike2 li.facebook
{
    background-color:#3B5998;
}

.snsLike2 li.twitter
{
    background-color:#65A8DC;
}

.snsLike2 li.hatena
{
    background-color:#00A4DE;
}

.snsLike2 li.feedly
{
    background-color:#2BB24C;
}

.snsLike2 li.rss
{
    background-color:#FB7629;
}

/*============================
col-box-right
============================*/
#col-box-right div+div
{
	margin-top:40px !important;
}
#col-box-right em
{
	display:block;
	font-size:18px;
}

/*============================
side-spcial
============================*/
#side-spcial li+li
{
	margin-top:10px;
}
#side-spcial li
{
	display:inline-block;
	width:49%;
}

#side-spcial img
{
	width:100%;
	/*height:auto;*/
    /* CLS */
    aspect-ratio: 38/15;
}

/*============================
*side-popularity
============================*/
#side-popularity a+a
{
	margin-top:15px;
}
#side-popularity a
{
	display:inline-block;
	width:100%;
}
#side-popularity dt
{
	display:table-cell;
	vertical-align:top;
	width:120px;
}
#side-popularity dt img
{
	width:100%;
	/*height:auto;*/
    /* CLS */
    aspect-ratio: 1/1;
}
#side-popularity dd
{
	padding-left:15px;
	display:table-cell;
	position:relative;
	vertical-align:top;
	line-height:1.3;
}
#side-popularity dd p
{
	display:block;
	position:absolute;
	bottom:0;
	font-size:11px;
}

/*============================
*side-cat *side-train
============================*/
#side-cat dl+dl
{
	margin-top:15px;
}
#side-cat dl dt
{
	background:#747474;
	color:#fff;
	margin-bottom:5px;
	padding:8px;
}
#side-cat dd,#side-train p
{
	letter-spacing:-0.4em;
}
#side-cat a,
#side-train a
{
	display:inline-block;
	white-space: nowrap;
	letter-spacing:normal;
    padding-left:5px;
}

/*============================
#footer
============================*/
div#footer {
	width:100%;
	border-top:dotted 1px #ccc;
	display:block;
	padding-top:15px;
}
div#footer ul {
	text-align:center;
}
div#footer ul li {
	display:inline-block;
	width:30%;
	margin-bottom:15px;
}

div#footer p.copyright {
	text-align:center;
}

#topcontrol
{
	position:absolute !important;
	width:100%;
	bottom:0 !important;
	left:0 !important;
	right:0 !important;
}

#topcontrol a
{
	background:url(../img/pagetop.png) no-repeat center center #e6e6e6;
	background-size:48px;
	text-indent:-9999px;
	width:100%;
	height:45px;
	display:block;
}

#page_top {
    width: 50px;
    height: 50px;
    display: none;
    position: fixed;
    right: 16px;
    bottom: 10px;
}

#page_top p {
    margin: 0;
    padding: 0;
    text-align: center;
}

#move_page_top {
    color: #fff;
    line-height: 50px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}


#page_menu {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 16px;
    top: 10px;
}

#page_menu p {
    margin: 0;
    padding: 0;
    text-align: center;
}

#move_page_menu {
    color: #fff;
    line-height: 50px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}




/******************************************************
タブレット以上向け
******************************************************/
@media print, screen and (min-width: 768px) {
	

/*============================
*head
============================*/
#top a
{
	width:204px;
	height:62px;
}

/*============================
#head
============================*/

#head .h_inner
{
	width:95%;
	max-width:768px;
	margin:10px auto 15px;
	position:relative;
}
.searchBox dl
{
	width:300px;
	margin:0 auto;
}

/*============================
.grayBox
============================*/

div#main .inner {
	width:95%;
	max-width:768px;
	margin:0 auto;
	}


div#main div h1.findingH1
{
	font-size:24px;
}
div#main div h2.findingH2
{
	font-size:20px;
    /*cls*/
    height:23.9px;
}
div#main div h3.findingH3
{
	font-size:18px;
}

div#main div h4.findingH4
{
	font-size:16px;
}


/* colBox -----------------------------------*/

div.colBox {
	display:table;
	margin:0;
}
div.colBox dl {
	display:table-cell;
	margin:0;
	vertical-align:top;
}
div.colBox dl dt {
}
div.colBox dl dt img {
	width:100%;
	height:auto;
}
div.colBox dl dd {
}

div.colBox.col2 dl {
	width:48%;
}
div.colBox.col3 dl {
	width:33%;
}


div.colBox div.boxChild {
	display:table-cell;
	margin:0;
	padding-left:10px;
	vertical-align:top;
}
div.colBox div.boxChild img {
	width:100%;
	height:auto;
}
div.colBox.col2 div.boxChild {
	width:48%;
}
div.colBox.col3 div.boxChild {
	width:33%;
}


/*============================
.snsArea
============================*/
.snsArea 
{
	padding:60px 0 !important;
}
.snsArea .snsIcon img
{
	width:40px;
	height:auto;
}
.snsArea h2
{
	font-size:24px;
	margin:20px 0 40px;
}


ul.colList li
{
	display:inline-block;
	width:28%;
}

/*============================
articleBox
============================*/
div.articleBox dl {
	width:33.3%;
    height:336px;
}

/*============================
*col-box-right
============================*/
#col-box-right em
{
	display:block;
	font-size:20px;
}
/*============================
*side-popularity
============================*/
#side-popularity a
{
	display:inline-block;
	width:49%;
}

/*============================
#footer
============================*/
div#footer {
	width:100%;
	padding:20px 0;
	margin:0 auto;
}
div#footer ul {
	display:table;
	width:100%;
	max-width:508px;
	margin:0 auto;
}
div#footer ul li {
	
	display:table-cell;
	width:auto;
}
div#footer p.copyright {
	clear:both;
	display:block;
	padding-top:20px;
}


}


/******************************************************
PC
******************************************************/
@media print, screen and (min-width: 1000px) {

/*============================
*head
============================*/

#head .h_inner
{
	max-width:1000px;
	margin:5px auto 15px;
	position:relative;
	text-align:center;
}
#top a
{
	margin:5px auto 0;
}
#logoAnime
{
	margin-top:20px;
	padding-left:0px;
}
#logoAnime img
{
	height:90px;
	width:auto;
}

.search
{
	position:absolute;
	right:0px;
	top:85px;
}

.search i
{
	font-size:30px;
}

.searchBox
{
	top:80px;
    position: fixed;
    /*top: 10px;*/

}

/*============================
#pasthList
============================*/
ul#pasthList {
	width:100%;
	max-width:1000px;
}


/*============================
.grayBox
============================*/

div#main .inner {
	width:100%;
	max-width:1000px;
	padding-top:20px;
	}

ul.colList li
{
	display:inline-block;
	width:22%;
}

/*============================
*col-box-left
============================*/
div#col-box-left.col2
{
	width:100%;
	max-width:680px;
	float:left;
}
div#col-box-left.col1,
div#col-box-right.col1
{
	width:100%;
	max-width:850px;
	margin:0 auto;
}

/*============================
*col-box-right
============================*/
div#col-box-right.col2
{
	width:100%;
	max-width:280px;
	float:right;
}

/*============================
*articleBox
============================*/
div.articleBox dl {
	width:33%;
	background-size:8px;
    /* CLS */
    height:305px;
}
div.articleBox dl dd a {
	margin:10px 0 5px;
}


/*============================
col-box-right
============================*/

/*============================
side-spcial
============================*/

#side-spcial li
{
	display:block;
	width:100%;
}

/* cls */
#side-spcial img
{
	width:280px;
	height:110px;
}

/*============================
*side-popularity
============================*/
#side-popularity a
{
	display:block;
	width:100%;
}

div#col-box-right.col1 #side-spcial li,
div#col-box-right.col1 #side-popularity a
{
	display:inline-block;
	width:24%;
	vertical-align:top;
	margin-top:10px !important;
}
/*============================
#footer
============================*/
div#footer {
	width:100%;
	display:block;
	clear:both;
	padding:40px 0;
	margin:0 auto;
}


#topcontrol
{
	position:absolute !important;
	width:auto;
	bottom:0 !important;
	left:50% !important;
	right:50% !important;
	margin-bottom:15px;
}

#topcontrol a
{
	background:url(../img/pagetop.png) no-repeat center center #e6e6e6;
	background-size:48px;
	text-indent:-9999px;
	width:45px;
	height:45px;
	display:block;
}
}


/******************************************************
PC
******************************************************/
@media print, screen and (min-width: 1170px) {
	
	
/*============================
*head
============================*/

#head .h_inner
{
	max-width:1170px;
}

/*============================
#pasthList
============================*/
ul#pasthList {
	max-width:1170px;
}

/* 一覧枠の指定 CLS対策 */
div.articleBox dl {
	width:33%;
	background-size:8px;
    height:353px;
}


/*============================
.grayBox
============================*/

div#main .inner {
	max-width:1170px;
	}

/*============================
*col-box-left
============================*/
div#col-box-left.col2
{
	max-width:850px;
}
	
}

@media print
{
html {
	margin: 0px;
	padding: 0px;
	text-align: left;
	width:1000px !important;
}


/* IE6 */
*html body{
	zoom:80%;
}
}



.pc_view
{
	display:none;
}
.tab_sp_view
{
	display:block;
}
.max1170-view
{
	display:block;
}
.min1170-view
{
	display:none;
}

@media print, screen and (min-width: 768px) {
.sp_view
{
	display:none;
}
.tab_sp_view
{
	display:block;
}
.pc_view
{
	display:none;
}
}
@media print, screen and (min-width: 1000px) {

.tab_sp_view
{
	display:none;
}
.pc_view
{
	display:block;
}
}


@media print, screen and (min-width: 1170px) {
.max1170-view
{
	display:none;
}
.min1170-view
{
	display:block;
}
}
/*============================
*特集の一覧
============================*/
#special-vis
{
	text-align:center;
	overflow:hidden;
	height:250px;
	width:100%;
	position:relative;
	background:url(../img/special-bk.png);
}
#special-vis h1
{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-585px;
	width:1170px;
}

#special-title
{
	font-weight:bold;
	font-size:25px;
	line-height:1.4;
}


#special-read
{
	border:solid 1px #ccc;
	padding:40px;
	background:#fff;
	margin:30px 0;
}
#special-read-writer
{
	border:solid 1px #ccc;
	padding:10px;
	background:#fff;
	margin:10px 0;
}

@media print, screen and (min-width: 1170px) {
	#special-vis
{
	height:350px;
}
}