@charset "utf-8";
/* CSS Document */
/* --------------------------------------------------
reset
-------------------------------------------------- */
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	box-sizing: border-box;
}
html {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {
	quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}
img, a {
	vertical-align: top;
	max-width: 100%;
}
a img {
	border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}
label {
	cursor: pointer;
	display: none;
}
*, *:before, *:after {
	box-sizing: border-box;
}
/* --------------------------------------------------
clearfix
-------------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* --------------------------------------------------
html
-------------------------------------------------- */
html {
	font-size: 62.5%;
	height: 100%;
	min-width: 1200px;
}
html:before, html:after, body:before, body:after {
	content: "";
	background: #8C2300;
	position: fixed;
	display: block;
	z-index: 100;
}
/* 上 */
html:before {
	height: 6px;
	width: 100vw;
	left: 0;
	top: 0;
}
/* 右 */
html:after {
	width: 6px;
	height: 100vh;
	right: 0;
	top: 0;
}
/* 下 */
body:before {
	height: 6px;
	width: 100vw;
	bottom: 0;
	left: 0;
}
/* 左 */
body:after {
	width: 6px;
	height: 100vh;
	top: 0;
	left: 0;
}
@media screen and (max-width: 1200px) {
	html {
		font-size: 58.12%;
		/* 1.5rem */
	}
}
@media screen and (max-width: 800px) {
	html {
		min-width: auto;
	}
}
@media screen and (max-width: 600px) {
	html {
		font-size: 53.75%;
		/* 1.4rem */
	}
}
@media screen and (max-width: 400px) {
	html {
		font-size: 50%;
		/* 1.3rem */
	}
}
/* --------------------------------------------------
body
-------------------------------------------------- */
body {
	font-family: "Noto Sans JP", "Noto Serif JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
	font-size: 1.8rem;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	height: 100%;
	color: #000;
	box-sizing: border-box;
	position: relative;
}
/* --------------------------------------------------
link
-------------------------------------------------- */
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #000;
	text-decoration: none;
}
a:active {
	color: #000;
	text-decoration: none;
}
/* --------------------------------------------------
top-header
-------------------------------------------------- */
#top-header {
	width: 100%;
	position: relative;
}
#top-header .inner {
	max-width: 1800px;
	display: flex;
	align-items: center;
	margin: 0 auto;
}


/*top-logo*/
#top-header .top-logo {
	width: 420px;
	padding: 4rem 6rem;
	text-align: center;
}

.top-logo img{
	margin-bottom: 1em;
}

.top-logo .journal-ttl-wrap{
	border-top: 5px solid #000;
	border-bottom: 5px solid #000;
	padding: 3px 0;

}
.top-logo .ttl-top {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	padding: 1.5em 0;
}


.top-logo .ttl-top img {
	margin-bottom: 1.5em;
	max-width: 240px;
}
.top-logo .ttl-top h1 {
	font-family: 'Noto Serif JP', serif;
	display: flex;
	width: 100%;
	align-items: flex-start;
	justify-content: center;
	flex-direction: row-reverse;

}

.top-logo .ttl-top span {
	display: block;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode:vertical-rl;
	font-size: 3.6rem;
	text-align: left;
	line-height: 1.6;
	letter-spacing: .4em;
	margin-bottom: 0;
	position: relative;
	margin: 0 .25em;
}

.top-logo .ttl-top span:before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: #8D2605;
}


.top-mv {
	position: relative;
	margin-top: 6px;
	padding-right: 6rem;
	width: calc(100% - 420px);
	z-index: 50;
}
.top-mv p {
	position: absolute;
	right: 10%;
	font-size: 2vw;
	letter-spacing: .4rem;
	transition: 1s ease-out;
	opacity: 0;
	transform: translateY(-14em);
	overflow: hidden;
	z-index: 50;
}
.top-mv.show p {
	opacity: 1;
	transform: translateY(0);
}
.top-mv p span {
	background: #FFF;
	display: inline-block;
	margin: 0 .25em;
	padding: 1.5rem .75rem;
	transition: 1s ease-out;
	transform: translateY(13em);
}
.top-mv.show p span {
	transform: translateY(0);
}
.top-sns {
	position: absolute;
	right: 15px;
	top: 50%;
	display: flex;
	flex-direction: column;
	transform: translateY(-50%);
	z-index: 100;
}
.top-sns p {
	margin-bottom: 1rem;
}
.top-sns ul {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.top-sns ul li a {
	color: #000;
	margin: 1rem .7rem 0 0;
	display: block;
	font-size: 2.0rem;
}
.scroll {
	position: absolute;
	right: 0;
	bottom: 3%;
}
.scroll span:before {
	content: "";
	position: absolute;
	bottom: 15px;
	right: 19px;
	height: 1px;
	width: 20px;
	transform: rotate(-55deg);
	transform-origin: top right;
	background: #000;
	transition: all .25s ease-in-out;
}
.scroll span:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 30px;
	height: 10rem;
	width: 1px;
	background: #000;
}
@media screen and (max-width: 1400px) {
	#top-header .top-logo {
		width: 25%;
		min-width: 300px;
		padding: 4rem 4rem;
	}
	.top-mv {
		position: relative;
		margin-top: 6px;
		padding-right: 6rem;
		width: 75%;
		min-width: calc(100% - 300px);
	}
	.top-logo .ttl-top span {
		font-size: 2.7rem;
	}
}
@media screen and (max-width: 800px) {
	.top-logo img{
		display: none;
	}
	#top-header .inner {
		display: block;
	}
	#top-header .top-logo {
		width: 100%;
		min-width: auto;
		padding: 2rem;
	}

	.top-logo .ttl-top {
		text-align: center;
		display: flex;
		align-items: center;
		padding: 1em 0;
	}
	.top-logo .ttl-top img {
		margin-bottom: 0;
		width: 55%;
		height: 26.9%;
		max-width: none;
		display: block;
	}
	
	.top-logo .ttl-top h1 {
		width: 45%;
		padding-right: 2rem;
	}

	.top-logo .ttl-top span {
		font-size: 4vw;
	}
	
	.top-logo .ttl-top span::before {
		right: -2px;
		width: 2px;
	}

	.top-mv {
		position: relative;
		margin-top: 0;
		padding-right: 0;
		width: 100%;
		min-width: auto;
	}
	.top-mv p {
		font-size:1.8rem;
	}
	
	.top-mv .mv img {
	}
	.top-mv p.tategaki {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
	.top-mv p span {
		font-size: 1.2rem;
		padding: 1.5rem .5rem;
	}
	.top-sns {
		top: 15rem;
		font-size: .8em;
	}
	.top-sns p{
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
	.top-sns ul li a {
		font-size: 2.4rem;
		margin: 0;
	}
	
	.scroll {
		bottom: 30%;
	}
}
/* --------------------------------------------------
page-header
-------------------------------------------------- */
#page-header {
	width: 100%;
	background: #8C2300;
	text-align: center;
	position: relative;
	display: flex;
	height: 110px;
}
#page-header h1 a {
	width: 160px;
	padding: 3rem;
	background: #FFF;
	box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
	position: fixed;
	left: 6px;
	top: 6px;
	display: block;
	z-index: 3;
}
#page-header h2 {
	width: 420px;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#page-header .clumn {
    bottom: -10%;
    right: 13%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    padding: 0 1em;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}
#page-header .clumn a{
    color: #fff;
    /* text-decoration: underline; */
    /* border-left: 2px solid #fff;
    border-right: 2px solid #fff; */
    font-family: 'Noto Serif JP', serif;
    font-size: 80%;
}
.page-sns {
	display: flex;
	flex-wrap: wrap;
	width: 200px;
	color: #FFF;
	font-family: 'Noto Serif JP', serif;
	position: absolute;
	right: 3rem;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	font-size: 80%;
	justify-content: center;
}
.page-sns a {
	width: 80%;
}
.page-sns p {
	margin-right: 1rem
}
.page-sns ul {
	display: flex;
}
.page-sns li a {
	color: #FFF;
	margin: 0 .5rem;
}
@media screen and (max-width: 800px) {
	#page-header {
		height: 40px;
	}
	#page-header h1 a {
		width: 140px;
		padding: 3rem;
	}
	#page-header h2 {
		display: none;
	}
	.page-sns {
		display: none;
	}
	#page-header .clumn {
		right: 5%;
	}
}
/* --------------------------------------------------
module
-------------------------------------------------- */
.tategaki {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	font-family: 'Noto Serif JP', serif;
	position: relative;
	z-index: 10;
}
.list-pht {
	position: relative;
	width: 100%;
	padding-top: 72%;
	overflow: hidden;
	margin-bottom: 1rem;
}
.list-pht img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: none;
	max-height: 100%;
}
.thumb-list .ico {
	font-size: 70%;
	margin: 1.5rem 0 1.5rem;
}
.thumb-list .ico span,
.thumb-list .ico a{
	display: inline-block !important;
	padding: 0 10px;
	margin: 5px 5px 0 0;
	transition: .25s;
}
.thumb-list .ico a:hover{
	opacity: 0.8;
}
.ico-area {
	background: #FFF;
	border: 1px solid #8E2705;
	margin-top: 1rem;
}
.ico-genre {
	background: #8E2705;
	color: #FFF !important;
	border: 1px solid #8E2705;
}
.thumb-list .date {
	font-size: 65%;
	border-top: 1px solid #8E2705;
	margin-top: 1rem;
	padding-top: 1rem;
	letter-spacing: .3rem;
}
.ttl-block {
	display: flex;
	flex-direction: row-reverse;
	width: 10%;
	margin-right: 2em;
}
.ttl-block h2 {
	font-size: 150%;
	margin-left: 0;
	line-height: 1.2;
	letter-spacing: .2rem;
	text-align: center;
}
.ttl-block p {
	font-size: 110%;
	border-top: #8D2605 3px solid;
	padding-top: 2rem;
}
.column-list-3col ul {
	display: flex;
	justify-content: space-between;
	margin-right: -4%;
	flex-wrap: wrap;
}
.column-list-3col li {
	width: 29%;
	margin-right: 4%;
	margin-bottom: 3rem;
	position: relative;
}
@media screen and (max-width: 800px) {
	.column-list-3col li {
		width: calc(100%/2 - 4%);
		margin-right: 4%;
		margin-bottom: 3rem;
	}
}
@media screen and (max-width: 600px) {
	.column-list-3col li {
		width: calc(50% - 4%);
		margin-right: 4%;
		margin-bottom: 3rem;
	}
	
	.tategaki {
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: tb;
		-o-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		font-family: 'Noto Serif JP', serif;
		position: relative;
		z-index: 10;
		border-top: none;
	}
	.ttl-block {
		display: flex;
		flex-direction: column;
		width: 10%;
	}
	
	.ttl-block p {
		border-top: none;
		padding-top: .5rem;
		text-align: center;
		font-size: 1.2rem;
	}
	
	
	
}
.btn-block{
	margin: 0 auto;
	max-width: 1200px;
}

.common-btn{
	text-align: center;
	width: 30%;
	margin: 1.5em auto 0;
	min-width: 313px;
}
.common-btn a{
	display: block;
	border: 2px solid #8C2300;
	background: #FFF;
	position: relative;
	color: #8C2300;
	padding: 1em 3.5em 1em 3em;
	font-family: 'Noto Serif JP', serif;
	z-index: 2;
	transition: all 0.3s;
	
}
.common-btn a:hover{
	color: #FFF;
}
.common-btn a:hover::before{
	width: 100%;
}
.common-btn a::before{
	content: '';
    background: #8C2300;
    position: absolute;
    z-index: -1;
    transition: all 0.3s;
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
}
.common-btn a::after{
	position: absolute;
	content: "\f105";
	font-family: fontawesome;
	right: 25px;
}
/* --------------------------------------------------
page-inner
-------------------------------------------------- */
.page-inner {
	max-width: 1200px;
	margin: 0 auto;
}
/* --------------------------------------------------
top-wrapper
-------------------------------------------------- */
#top-wrapper {
	overflow: hidden;
}
/* --------------------------------------------------
contents
-------------------------------------------------- */
#contents {
	margin: 0 auto;
	position: relative;
}
#contents img {
	max-width: 100%;
}
@media screen and (max-width: 1200px) {
	#contents {
		margin: 0 15px;
	}
}
/* top-about */
.top-about {
	margin-top: 10rem;
}
.top-about .inner {
	display: flex;
	width: 70%;
	margin: 0 auto;
	justify-content: space-between;
}
.top-about .pht-block {
	position: relative;
	width: 48%;
}
.top-about .pht-block::before {
	content: "";
	display: inline-block;
	width: 300px;
	height: 120px;
	background-image: url("../img/txt_kumamoto.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	right: 0;
	z-index: 10;
}
.top-about .pht-block::after {
	content: "";
	display: block;
	width: 400px;
	height: 210px;
	background: #8D2605;
	position: absolute;
	left: -6%;
	top: 35%;
	z-index: -1;
}
.top-about .txt-block {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.top-about .txt-block p {
	letter-spacing: .4rem;
	line-height: 2.5;
	border-top: #8D2605 3px solid;
	padding-top: 3rem;
	position: relative;
}
.top-about .txt-block figure {
	max-width: 450px;
}
.top-about .txt-block p::before {
	content: "";
	display: inline-block;
	width: 133px;
	height: 191px;
	background-image: url("../img/map_bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	right: -6rem;
	top: -2rem;
	z-index: -1;
}
@media screen and (max-width: 1200px) {
	
	.top-about {
		margin-top: 6rem;
	}
	.top-about .inner {
		width: 80%;
	}
	.top-about .pht-block::after {
		content: "";
		display: block;
		width: 60%;
		height: 30%;
		background: #8D2605;
		position: absolute;
		left: -6%;
		bottom: 50%;
		z-index: -1;
		top: auto;
	}
}
@media screen and (max-width: 1000px) {
	.top-about .inner {
		width: 90%;
	}
	.top-about .pht-block::before {
		content: "";
		display: inline-block;
		width: 200px;
		height: 120px;
		background-image: url("../img/txt_kumamoto.png");
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		position: absolute;
		right: 0;
		top: -30px;
	}
}
@media screen and (max-width: 600px) {
	.top-about .inner {
		width: 80%;
		flex-direction: column;
	}
	.top-about .pht-block {
		position: relative;
		width: 100%;
		margin-bottom: 2rem;
	}
	.top-about .pht-block::before {
		width: 120px;
	}
	.top-about .pht-block::after {
		content: "";
		display: block;
		width: 90%;
		height: 150px;
		background: #8D2605;
		position: absolute;
		left: -5%;
		top: 30%;
		z-index: -1;
	}
	.top-about .txt-block {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-about .txt-block p {
		width: 100%;
		letter-spacing: .4rem;
		line-height: 1.8;
		border-top: #8D2605 2px solid;
		padding-top: 2rem;
		padding-left: 2rem;
		font-size: 1.6rem;
	}
	
	.top-about .txt-block p::before {
		width: 106px;
		height: 152px;
		right: -2rem;
		top: 4rem;
		z-index: -1;
	}

	
}

/* gnav */

#gnav {
	width: 85%;
	margin: 30px auto;
}

#index #gnav {
	margin: -20px auto 30px;
	position: relative;
	z-index: 32;
}
#gnav ul{
	display: flex;
	flex-wrap: wrap;
}

#gnav li{
	float: left;
	border-left: 1px solid #8D2605;
	/* width: 320px; */
	text-align: center;
	width: 25%;
	font-family: 'Noto Serif JP', serif;
}

#gnav li a{
	display: block;
	padding: 1em 0;
}

#gnav li a:hover{
	opacity: 0.5;
	transition: .5s;
}

#gnav li:nth-of-type(4) {
	border-right: 1px solid #8D2605;
}
@media screen and (max-width: 600px) {
	#gnav {
		width: 100%;
	}
	#gnav li{
		width: 50%;
		border-bottom: 1px solid #8D2605;
	}
	#gnav li a{
		padding: 1.5em 0;
	}
	#gnav li:nth-of-type(1),
	#gnav li:nth-of-type(2){
		border-top: 1px solid #8D2605;
	}
	#gnav li:nth-of-type(1),
	#gnav li:nth-of-type(3){
		border-left: none;
	}
	#gnav li:nth-of-type(4){
		border-right: none;
	}
}



/* top-recommend */
#top-recommend {
	margin-top: 10rem;
	position: relative;
}
#top-recommend .inner {
	display: flex;
	width: 90%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	max-width: 1600px;
}
#top-recommend .column-list-3col {
	width: 80%;
}
#top-recommend .column-list-3col li:first-of-type {
	margin-top: -6rem;
	margin-bottom: 0;
}
#top-recommend .column-list-3col li:nth-of-type(2) {
	margin-top: -3rem;
	margin-bottom: 0;
}
#top-recommend .column-list-3col li a {
	display: block;
}
#top-recommend .ttl-block {
	position: relative;
	height: 300px;
}
#top-recommend .ttl-block::before {
	content: "";
	display: inline-block;
	width: 280px;
	height: 120px;
	background-image: url("../img/txt_recommended.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	right: -150px;
	top: -140px;
	z-index: 2;
}
#top-recommend::after {
	content: "";
	display: inline-block;
	-webkit-transform: rotate(10deg) translate3d(0, 0, 0);
	transform: rotate(10deg) translate3d(0, 0, 0);
	width: 130%;
	height: 380px;
	background: #EEE;
	position: absolute;
	top: 28%;
	z-index: -1;
	margin-left: -15%;
}
@media screen and (max-width: 800px) {
	#top-recommend {
		margin-top: 10rem;
	}
	#top-recommend .inner {
		align-items: flex-start;
		width: 85%;
	}
	#top-recommend .ttl-block {
		width: 15%;
	}
	#top-recommend .ttl-block::before {
		width: 180px;
		right: auto;
		top: -100px;
		left: 0;
	}
	#top-recommend .column-list-3col li:first-of-type {
		margin-top: 0;
		margin-bottom: 2rem;
	}
	#top-recommend .column-list-3col li:nth-of-type(2) {
		margin-top: 0;
		margin-bottom: 2rem;
	}
}
@media screen and (max-width: 600px) {
	#top-recommend .inner {
		flex-direction: column;
		width: 100%;
	}
	#top-recommend .ttl-block {
		width: 80%;
		justify-content: center;
		padding-top: 4rem;
		height: auto;
		margin: 0 auto 4rem;
	}
	#top-recommend .ttl-block::before {
		content: "";
		display: inline-block;
		width: 150px;
		height: 79px;
		position: absolute;
		left: 50%;
		top: -3.5rem;
		transform: translateX(-50%) scale(.75);
		-webkit-transform: translateX(-50%) scale(.75);
	}
	#top-recommend .column-list-3col {
		width: 100%;
		padding: 0;
	}
	
	#top-recommend .column-list-3col .thumb-list{
		display: flex;
		flex-wrap: nowrap;
	}
	#top-recommend .column-list-3col .thumb-list li {
		height: auto;
	}
	
}
/* top-ranking */
#top-ranking {
	margin-top: 13rem;
	position: relative;
}
#top-ranking .inner {
	display: flex;
	width: 80%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
	max-width: 1600px;
}
#top-ranking .ttl-block {
	position: relative;
	height: 250px;
}
#top-ranking .ttl-block::before {
	content: "";
	display: inline-block;
	width: 250px;
	height: 120px;
	background-image: url("../img/txt_ranking.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	right: -80px;
	top: -140px;
	z-index: 2;
}
.rank-icon {
	position: absolute;
	left: -3rem;
	width: 60px;
	top: -2rem;
	z-index: 2;
}
#top-ranking .column-list-2col {
	width: 80%;
}
.column-list-2col ul {
	display: flex;
	justify-content: space-around;
	margin-right: -8%;
	flex-wrap: wrap;
}
#top-ranking .column-list-2col li:first-child {
	width: calc(52% - 8%);
	margin-right: 8%;
	position: relative;
}
#top-ranking .column-list-2col li:last-child {
	width: calc(48% - 8%);
	margin-right: 8%;
	position: relative;
	margin-top: 10rem;
}
#top-ranking .column-list-3col {
	width: 75%;
	margin: 0 auto 4rem;
	max-width: 1600px;
}
#top-ranking .column-list-3col ul {
	display: flex;
	justify-content: space-around;
	margin-right: -8%;
	margin-top: 3rem;
}
#top-ranking .column-list-3col li {
	position: relative;
}
#top-ranking .column-list-3col li:first-of-type {
	width: calc(36% - 8%);
	margin-right: 8%;
}
#top-ranking .column-list-3col li:nth-of-type(2) {
	width: calc(32% - 8%);
	margin-right: 8%;
	margin-top: 10rem;
}
#top-ranking .column-list-3col li:nth-of-type(3) {
	width: calc(32% - 8%);
	margin-right: 8%;
}
#top-ranking .column-list-2col li .pht-bg, #top-ranking .column-list-3col li .pht-bg {
	position: relative;
}
#top-ranking .column-list-2col li .pht-bg::after, #top-ranking .column-list-3col li .pht-bg::after {
	content: "";
	display: block;
	width: 90%;
	height: 60%;
	background: #8D2605;
	position: absolute;
	right: -10px;
	bottom: 10%;
	z-index: -1;
}
#top-ranking::after {
	content: '';
	display: block;
	width: 100%;
	height: 0;
	background-image: url("../img/top_bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	padding-top: 19%;
	margin: 0 auto;
}
@media screen and (min-width: 1900px) {
	#top-ranking::after {
		padding-top: 400px;
	}
}
@media screen and (min-width: 2000px) {
	#top-ranking::after {
		padding-top: 700px;
	}
}
@media screen and (max-width: 800px) {
	#top-ranking {
		margin-top: 10rem;
		position: relative;
	}
	#top-ranking .inner {
		display: flex;
		width: 85%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
	}
	#top-ranking .column-list-2col {
		width: 70%;
	}
	#top-ranking .column-list-3col {
		width: 90%;
		margin: 0 auto 4rem;
	}
	#top-ranking .column-list-2col li .pht-bg::after, #top-ranking .column-list-3col li .pht-bg::after {
		right: -5px;
	}
	#top-ranking .ttl-block::before {
		width: 150px;
		height: 120px;
		right: 0;
		top: -100px;
	}
	#top-ranking::after {
		padding-top: 250px;
	}
	.rank-icon {
		position: absolute;
		left: -1rem;
		width: 50px;
		top: -2rem;
		z-index: 2;
	}
}
@media screen and (max-width: 600px) {
	#top-ranking .inner {
		flex-direction: column;
		width: 100%;
	}
	#top-ranking .ttl-block {
		width: 100%;
		justify-content: center;
		padding-top: 3rem;
		height: auto;
		margin: 0 auto 4rem;
	}
	#top-ranking .ttl-block::before {
		content: "";
		display: inline-block;
		width: 120px;
		height: 63px;
		position: absolute;
		left: 50%;
		top: -3.5rem;
		transform: translateX(-50%)scale(.75);
		-webkit-transform: translateX(-50%)scale(.75);
	}
	#top-ranking .ttl-block .tategaki br {
		display: none;
	}
	#top-ranking .column-list-2col, #top-ranking .column-list-3col {
		width: 100%;
		padding: 0 8%;
	}
	#top-ranking .column-list-3col ul {
		margin-top: 0;
	}
	#top-ranking .column-list-2col li:first-child, #top-ranking .column-list-2col li:last-child, #top-ranking .column-list-3col li:first-of-type, #top-ranking .column-list-3col li:nth-of-type(2), #top-ranking .column-list-3col li:nth-of-type(3) {
		width: calc(100% - 8%);
		margin-right: 8%;
		margin-bottom: 4rem;
		margin-top: 0;
	}
	#top-ranking::after {
		padding-top: 80px;
	}
}
/* top-search */
#top-search {
	position: relative;
	max-width: 1200px;
	margin: 10rem auto 0;
	padding-bottom: 7rem;
}
#top-search .inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 8rem;
}
#top-search .inner .search-menu {
	width: 75%;
}
.search-menu {
	background: #EEE;
	border: 2px solid #000;
	padding: 5px;
}
.search-inner {
	border: 1px solid #000;
	padding: 6rem 0;
}
.search-menu-block h4 {
	text-align: right;
	font-size: 1.8rem;
	padding: 10px;
	cursor: pointer;
}
.search-menu-block h4:hover {
	opacity: 0.9;
}
.search-menu-block h4:before {
	content: "\f0fe";
	font-family: fontawesome;
	margin-right: .5rem;
}
.search-menu-block h4.active:before {
	content: "\f146";
}
.search-select dl {
	width: 100%;
	display: table;
	table-layout: fixed;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: #EBEBEB solid 1px;
}
.search-select {
	width: 90%;
	margin: 0 auto;
}
.search-select dl {
	border-bottom: 1px solid #000;
	font-size: 90%;
}
.search-select dt {
	display: table-cell;
	width: 15%;
	vertical-align: middle;
}
.search-select dd {
	display: table-cell;
	vertical-align: middle;
}
.search-select a {
	background: #FFF;
	display: inline-block;
	line-height: 1;
	padding: 5px 15px;
	cursor: pointer;
	margin: .5rem;
	vertical-align: middle;
	border: 1px solid #FFF;
}
.search-select .area a.active {
	border: 1px solid #800000;
	color: #800000;
}
.search-select .genre a.active {
	background: #800000;
	border: 1px solid #800000;
	color: #FFF;
}
.search-select .keyword input {
	padding: 1rem;
	width: 100%;
	border: #000 solid 1px;
}
.btn-arrow-2col {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	width: 70%;
}
.btn-arrow-2col p {
	text-align: center;
}
.btn-search a, .btn-clear a {
	display: block;
	background: #000;
	color: #FFF;
	width: 20rem;
	text-align: center;
	padding: 1rem;
	margin: 1rem;
	border-radius: 5px;
}
.btn-search a::before {
	content: "\f002";
	font-family: fontawesome;
	margin-right: 1rem;
	margin-left: -.5rem;
}
.btn-clear a {
	background: #800000;
}
.btn-search a:hover, .btn-clear a:hover {
	opacity: .8;
	transition: .3s;
}
.btn-clear a:before {
	content: "\f056";
	font-family: fontawesome;
	margin-right: 1rem;
	margin-left: -.5rem;
}
#top-search .ttl-block {
	position: relative;
	width: 15%;
	height: 300px;
}
#top-search .ttl-block::before {
	content: "";
	display: inline-block;
	width: 250px;
	height: 120px;
	background-image: url("../img/txt_search.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	right: -80px;
	top: -140px;
	z-index: 2;
}
@media screen and (max-width: 800px) {
	#top-search {
		margin: 6rem auto 0;
	}
	#top-search .inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 5rem;
	}
	#top-search .inner .search-menu {
		width: 100%;
	}
	#top-search .ttl-block {
		position: relative;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		margin-bottom: 3rem;
		padding-top: 5rem;
	}
	#top-search .ttl-block::before {
		content: "";
		display: inline-block;
		width: 110px;
		height: 79px;
		position: absolute;
		left: 50%;
		top: -3.5rem;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}
	.search-menu-block h4 {
		text-align: right;
	}
}
@media screen and (max-width: 600px) {
	.search-select dl {
		display: flex;
		flex-direction: column;
	}
	.search-select dt {
		width: 100%;
	}
	.btn-arrow-2col {
		flex-direction: column;
	}
	.btn-search, .btn-clear {
		text-align: center;
	}
	.btn-search a, .btn-clear a {
		margin: 1rem auto;
	}
}
/* top-find */
#top-find {
	position: relative;
	max-width: 1200px;
	margin: 10rem auto 0;
	padding-bottom: 15rem;
}
#top-find .inner {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-end;
	margin: 0 auto;
	margin-bottom: 8rem;
	width: 100%;
}
#top-find .ttl-block {
	position: relative;
	width: 15%;
	height: 300px;
}
#top-find .ttl-block::before {
	content: "";
	display: inline-block;
	width: 170px;
	height: 110px;
	background-image: url("../img/txt_find.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	left: 48px;
	top: -120px;
	z-index: 2;
}
#top-find .column-list-3col {
	position: relative;
	width: 85%;
}
#top-find .column-list-3col ul{
	margin-right: -5em;
}
#top-find .column-list-3col li{
	width: 30%;
	margin-right: 3%;
}
#top-find .column-list-3col li p{
	text-align: center;
	color: #8d2605;
	font-size: 100%;
}
#top-find .column-list-3col img{
	width: 100%;
	/* height: 100%; */
	object-fit: contain;
}
@media screen and (max-width: 800px) {
	#top-find {
		margin: 6rem auto 0;
	}
	#top-find .inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 5rem;
	}
	#top-find .inner .search-menu {
		width: 100%;
	}
	#top-find .column-list-3col {
		width: 100%;
	}
	#top-find .column-list-3col ul{
		margin-right: 0;
	}
	#top-find .column-list-3col li{
		width: 100%;
		margin-right: 0;
	}
	#top-find .ttl-block {
		position: relative;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		margin-bottom: 3rem;
		padding-top: 5rem;
	}
	#top-find .ttl-block::before {
		content: "";
		display: inline-block;
		width: 110px;
		height: 79px;
		position: absolute;
		left: 50%;
		top: -5rem;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}
	.search-menu-block h4 {
		text-align: right;
	}
}
@media screen and (max-width: 600px) {
	#top-find .inner {
		width: 100%;
	}
	.search-select dl {
		display: flex;
		flex-direction: column;
	}
	.search-select dt {
		width: 100%;
	}
	.btn-arrow-2col {
		flex-direction: column;
	}
	.btn-search, .btn-clear {
		text-align: center;
	}
	.btn-search a, .btn-clear a {
		margin: 1rem auto;
	}
}

/* --------------------------------------------------
breadCrumbs
-------------------------------------------------- */
.breadCrumbs {
	width: 100%;
	display: flex;
	margin-left: auto;
	padding: 2rem 0;
}
.breadCrumbs ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-right: 2%;
}
.breadCrumbs li {
	font-size: 80%;
	margin-right: 10px;
}



.breadCrumbs a {
	align-items: center;
}
.breadCrumbs a:hover {
	text-decoration: none;
}
.breadCrumbs li:after {
	content: ">";
	margin-left: 1rem;
	vertical-align: top;
	color: #ACAC9D;
}
.breadCrumbs li:last-of-type:after {
	content: none;
}
/* for TABLET */
@media screen and (max-width: 800px) {
	.breadCrumbs {
		width: 100%;
		padding: 8rem 0 2rem;
	}
}
/* paging */
.paging {
	padding: 30px 0;
	text-align: right;
	clear: both;
	position: relative;
	overflow: hidden;
	font-size: 90%;
}
.paging .paging-sort {
	float: left;
	margin-right: 1rem;
}
.paging .paging-sort select {
	padding: 5px 10px;
	line-height: 1;
	vertical-align: middle;
}
.paging .paging-result {
	float: left;
	display: inline-block;
	line-height: 2;
	vertical-align: middle;
}
.paging span {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: .5rem;
}
.paging a {
	line-height: 1;
	letter-spacing: normal;
	display: inline-block;
	padding: 1rem 1.2rem;
	text-decoration: none;
	color: #272727;
	border: #d2d2d2 solid 1px;
	background: #FFF;
}
.paging a:hover {
	opacity: 1;
	color: #FFF;
	background: #404040;
	border: #37211F solid 1px;
}
.paging .current {
	line-height: 1;
	letter-spacing: normal;
	display: inline-block;
	padding: 1rem 1.2rem;
	text-decoration: none;
	color: #FFF;
	border: #404040 solid 1px;
	background: #404040;
}
/* conditions */
.conditions {
	position: relative;
	overflow: hidden;
	padding: 10px;
	margin-bottom: 20px;
	margin-top: 1em;
}
.conditions .btn-delete {
	float: right;
}
.conditions dl {
	width: 80%;
	float: left;
}
.conditions dt {
	display: inline;
	vertical-align: middle;
	margin-right: 1rem;
}
.conditions dd {
	display: inline-block;
}
.conditions dd a {
	border: #EEE solid 1px;
	background: #EEE;
	display: inline-block;
	line-height: 1;
	padding: 5px 15px;
	border-radius: 20px;
	cursor: pointer;
	margin: .2rem;
	vertical-align: middle;
	color: #272727;
}
.conditions dd a:before {
	content: "\f00d";
	font-family: fontawesome;
	margin-right: .5rem;
}
.conditions dd span {
	border: #EEE solid 1px;
	background: #EEE;
	display: inline-block;
	line-height: 1;
	padding: 5px 15px;
	border-radius: 20px;
	cursor: pointer;
	margin: .2rem;
	vertical-align: middle;
	color: #272727;
}
@media screen and (max-width: 600px) {
	/* conditions */
	.conditions {
		padding: 10px;
		margin-bottom: 10px;
	}
	.conditions .btn-delete {
		float: none;
		width: auto;
		text-align: center;
		padding-top: 1rem;
	}
	.conditions dl {
		float: none;
		width: auto;
	}
	.conditions dt {
		display: block;
		margin-right: 0;
	}
	/* paging */
	.paging {
		padding-top: 0;
	}
	.paging .paging-result {
		float: none;
		display: block;
		margin-bottom: 1rem;
	}
	.paging .paging-sort {
		float: none;
		display: block;
	}
}
/* --------------------------------------------------
block
-------------------------------------------------- */
.pht {
	text-align: center;
}
.pht img {
	max-width: 100%;
}
/* block-center */
.block-center {
	margin-bottom: 8rem;
}
.block-center .pht {
	display: block;
	text-align: center;
}
/* block-2col */
.block-2col {
	position: relative;
	overflow: hidden;
	margin-bottom: 8rem;
	margin-right: -1%;
}
.block-2col .pht {
	max-width: 49%;
	margin-right: 1%;
	float: left;
}
/* block-3col */
.block-3col {
	position: relative;
	overflow: hidden;
	margin-bottom: 8rem;
	margin-right: -2%;
}
.block-3col .pht {
	max-width: 32%;
	margin-right: 1%;
	float: left;
}
/* col-left col-right */
.col-left {
	float: left;
	padding-right: 3%;
	width: 50%;
}
.col-right {
	float: right;
	padding-left: 3%;
	width: 50%;
}
@media screen and (max-width: 800px) {
	.col-left {
		float: none;
		padding-right: 0;
		width: 100%;
	}
	.col-right {
		float: none;
		padding-left: 0;
		width: 100%;
	}
}
/* --------------------------------------------------
list
-------------------------------------------------- */
.list-3col .pht, .list-4col .pht, .list-5col .pht {
	z-index: -1;
	position: relative;
	width: 100%;
	padding-top: 75%;
	overflow: hidden;
	background: #fff;
	overflow: hidden;
	background: #F5F5F5;
}
.list-3col .pht img, .list-4col .pht img, .list-5col .pht img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: none;
	max-height: 100%;
	max-width: 150%;
}
/* list-3col */
.list-3col {
	overflow: hidden;
	position: relative;
	margin: 0 -20px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
}
.list-3col li {
	width: 33.33%;
	float: left;
	padding: 20px;
	box-sizing: border-box;
}
/* list-4col */
.list-4col {
	overflow: hidden;
	position: relative;
	margin: 0 -20px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
}
.list-4col li {
	width: 25%;
	float: left;
	padding: 20px;
	box-sizing: border-box;
}
/* list-5col */
.list-5col {
	overflow: hidden;
	position: relative;
	margin: 0 -20px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
}
.list-5col li {
	width: 20%;
	float: left;
	padding: 20px;
	box-sizing: border-box;
}
/* --------------------------------------------------
post-content
-------------------------------------------------- */
/* ttl-post */
.ttl-post {
	line-height: 1.4;
	font-size: 2rem;
	margin-bottom: 2rem;
	font-size: 3rem;
	margin: 1em 0;
}
.ttl-post span {
	margin-right: 1rem;
}
@media screen and (max-width: 800px) {
	.ttl-post {
		font-size: 2rem;
	}
}
/* eyecatch */
.eyecatch {
	position: relative;
}
.eyecatch .pht {
	z-index: -1;
	position: relative;
	width: 100%;
	padding-top: 45%;
	overflow: hidden;
}
.eyecatch .pht img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: none;
	max-height: 100%;
	max-width: 150%;
}
/* post-content */
.post-content {
	overflow: hidden;
	max-width: 1100px;
	margin: 0 auto;
}
.post-content .pht {
	/* display: table; */
	width: 100%;
	text-align: center;
}
.post-content .pht img {
	max-width: 100%;
}
.post-content p {
	padding: 1rem 0;
	/*max-width:800px;*/
	margin: 0 auto;
}
.post-content .pht figcaption {
	display: block;
	font-size: 70%;
	padding: 5px;
	line-height: 1.2;
	text-align: center;
}
/* post-date */
.post-date {
	display: block;
	text-align: right;
	padding: 1rem;
}
.post-date:before {
	content: "\f040";
	font-family: fontawesome;
	margin-right: 1rem;
}
/* --------------------------------------------------
column-eyecatch
-------------------------------------------------- */
.column-eyecatch {
	position: relative;
	margin: 0 0  3rem;
}
.column-eyecatch .pht {
	z-index: -1;
	position: relative;
	width: 64%;
	height: 0;
	padding-top: 42%;
	margin-left: auto;
}
.column-eyecatch .pht img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 100%;
	max-width: 150%;
}
.column-eyecatch .pht::after {
	content: "";
	display: block;
	width: 90%;
	height: 90%;
	background: #8D2605;
	position: absolute;
	right: -10%;
	bottom: -40px;
	z-index: -1;
}
.column-eyecatchIn {
	position: absolute;
	left: 5%;
	width: 55%;
	top: auto;
	bottom: 15%;
	text-align: left;
}
@media screen and (max-width: 800px) {
	.column-eyecatch .pht {
		width: 100%;
	}
	.column-eyecatch {
		margin: 0;
		max-width: 100%;
		display: block;
		line-height: 1.5em;
		display: flex;
		flex-direction: column-reverse;
	}
	.column-eyecatch .pht {
		max-width: 100%;
		float: none;
		margin-left: 0;
		margin-bottom: 10px;
		padding-top: inherit;
		height: auto;
	}
	.column-eyecatch .pht::after {
		bottom: -20px;
		right: -3.5%;
	}
	.column-eyecatch .pht img {
		max-width: none;
		max-height: none;
		width: 100%;
		position: relative;
		transform: translate(0,0);
		top: auto;
		left: auto;
	}
	.column-eyecatchIn {
		width: 100%;
		margin-top: 20px;
		position: static;
	}
	.column-eyecatchIn .category {
		margin-top: 1rem;
	}
}
/* --------------------------------------------------
ttl-post
-------------------------------------------------- */
.ttl-c {
	font-size: 5rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: left;
	letter-spacing: .2rem;
	margin: 5% 0 1% 0;
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 20px #fff;
	position: relative;
}
.ttl-c::before {
	content: "";
	display: inline-block;
	width: 110px;
	height: 79px;
	background-image: url("../img/txt_column.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: -5rem;
}
.ttl-post {
	font-size: 3.5rem;
	font-weight: bold;
	margin: 5rem 0 2rem;
	line-height: 1.8;
	letter-spacing: .2rem;
	position: relative;
	padding-left: 2rem;
}
.ttl-post:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: #8D2605;
}
.sttl-post {
	font-size: 2.5rem;
	margin: 2rem 0;
	font-weight: bold;
	position: relative;
	border-radius: 6px;
}
.column-eyecatchIn .ico span,
.column-eyecatchIn .ico a{
	display: inline-block;
	padding: 0 10px;
	margin: 5px 5px 0 0;
	font-size: 90%;
	transition: .25s;
}
.column-eyecatchIn .ico a:hover{
	opacity: 0.8;
}
.column-eyecatchIn .date {
	font-size: 80%;
	margin-top: 2rem;
}
@media screen and (max-width: 1080px) {
	.ttl-c {
		font-size: 3rem;
		line-height: 1.2;
	}
}
@media screen and (max-width: 800px) {
	.ttl-c {
		font-size: 2.2rem;
		margin: 5rem 0 2% 0;
		position: relative;
	}
	.ttl-post {
		font-size: 1.8rem;
		text-align: left;
		margin: 2rem 0 1rem;
	}
	.sttl-post {
		font-size: 1.6rem;
		margin: 1rem 0;
	}
	.ttl-c::before {
		width: 70px;
	}
}
/* --------------------------------------------------
txt
-------------------------------------------------- */
.txt-area-column p {
	max-width: 1200px;
	margin: 0;
	padding: 1% 0 3% 0;
}
/* --------------------------------------------------
data-area
-------------------------------------------------- */
.data-area {
	padding-bottom: 50px;
}
.data-area .table-data {
	border-collapse: collapse;
	margin-top: 2rem;
	font-size: 1.4rem;
}
.data-area .table-data tr {
	border-bottom: 5px solid #FFF;
}
.data-area .table-data th {
	font-weight: bold;
	padding: 14px 10px;
	white-space: nowrap;
	background: #F6F6F6;
	width: 20%;
	text-align: center;
}
.data-area .table-data td {
	padding: 14px 10px;
	word-break: break-all;
}
.data-area .list-pict li {
	display: inline-block;
	margin-bottom: 3px;
}
.data-area .table-data a:link {
	color: #186CB8;
	text-decoration: underline;
}
/* --------------------------------------------------
movie map
-------------------------------------------------- */
.movie, .map {
	width: 100%;
	margin-bottom: 2%;
}
.movie > div {
	position: relative;
	padding-top: 56.25%;
}
.movie iframe, .map iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
/* --------------------------------------------------
 map
-------------------------------------------------- */
.map > div {
	position: relative;
	padding-top: 35.25%;
}
.map-wrap {
	max-width: 1100px;
	margin: 3% auto 0;
}
.ttl-post-map {
	text-align: center;
	position: relative;
	font-size: 2.6rem;
	margin-bottom: 2%;
}
.ttl-post-map:before, .ttl-post-map:after {
	content: "";
	position: absolute;
	display: block;
	height: 2px;
	width: 40%;
	background: #fff;
	top: 50%;
	transform: translateY(-50%);
}
.ttl-post-map:before {
	left: 0;
}
.ttl-post-map:after {
	right: 0;
}
@media screen and (max-width: 800px) {
	.ttl-post-map {
		font-size: 1.8rem;
	}
	.ttl-post-map:before, .ttl-post-map:after {
		width: 35%;
	}
}
.links {
	margin: 3rem 0;
}
/* related-file related-link */
.related-file, .related-link {
	line-height: 1.2;
	position: relative;
}
.related-file a:link, .related-link a:link {
	color: #186CB8;
	text-decoration: underline;
}
.related-file::before {
	content: '';
	display: inline-block;
	background: url("../img/ico_file.png") no-repeat;
	background-size: auto;
	width: 30px;
	height: 30px;
	background-size: contain;
	vertical-align: middle;
	margin-right: 1rem;
}
.related-link::before {
	content: '';
	display: inline-block;
	background: url("../img/ico_link.png") no-repeat;
	background-size: auto;
	width: 30px;
	height: 30px;
	background-size: contain;
	vertical-align: middle;
	margin-right: 1rem;
}
/* btn */
.btn-postback {
	margin: 100px 0;
	text-align: center;
}
.btn-postback a {
	color: #FFF;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	padding: 10px 30px;
	background: #800000;
	border-radius: 5px;
	position: relative;
	min-width: 400px;
}
.btn-postback a:before {
	content: "";
	width: 8px;
	height: 8px;
	position: absolute;
	left: 3rem;
	top: 50%;
	border-left: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	transform: rotate(45deg) translateY(-50%);
}
.btn-postback a:hover {
	opacity: .8;
	transition: .3s;
}
.btn-addfarrow {
	display: block;
	margin-bottom: 10px;
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	height: 100%;
}
.btn-addfarrow a {
	min-width: 250px;
	text-align: center;
	display: inline-block;
	font-size: 2rem;
	display: block;
	color: #FFF;
	background: #000;
	text-decoration: none;
	vertical-align: middle;
	padding: 8px 30px;
	border-radius: 5px;
	position: relative;
	margin: 3% auto;
}
.btn-addfarrow a:hover {
	opacity: .8;
	transition: .3s;
}
.btn-addfarrow a:after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: 50%;
	right: 2rem;
	padding: 0;
}
@media screen and (max-width: 600px) {
	.btn-addfarrow a {
		padding: 10px 60px;
		min-width: auto;
	}
	.btn-postback a {
		padding: 10px 60px;
		min-width: auto;
	}
}
/* --------------------------------------------------
same-theme
-------------------------------------------------- */
.same-theme {
	margin: 4em auto;
}
.same-theme h2{
	font-family: 'Noto Serif JP', serif;
	font-size: 3rem;
	text-align: center;
	padding: 5rem 0;
	position: relative;
}
.same-theme h2::before {
	content: "";
	display: inline-block;
	width: 150px;
	height: 50px;
	background-image: url("../img/txt_sametheme.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.same-theme .thumb-list{
	display: flex;
	justify-content: flex-start;
}
@media screen and (max-width: 800px) {
	.same-theme .column-list-3col{
		width: 100%;
	}
	.same-theme .column-list-3col .thumb-list{
		display: block;
	}
	.same-theme .column-list-3col li{
		width: 90%;
		margin: 0 auto 2em;
	}
}

/* --------------------------------------------------
page-ranking
-------------------------------------------------- */
.page-ranking {
	background: #EEE;
	padding: 3rem 0;
}
.page-ranking h2 {
	font-family: 'Noto Serif JP', serif;
	font-size: 3rem;
	text-align: center;
	padding: 5rem 0;
	position: relative;
}
.page-ranking h2::before {
	content: "";
	display: inline-block;
	width: 110px;
	height: 79px;
	background-image: url("../img/txt_ranking.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.page-ranking .inner {
	max-width: 1100px;
	margin: 0 auto;
}
.page-ranking.column-list-2col ul {
	display: flex;
	justify-content: space-around;
	margin-right: -8%;
}
.page-ranking .column-list-2col li {
	width: calc(50% - 8%);
	margin-right: 8%;
	position: relative;
	margin-bottom: 5rem;
}
@media screen and (max-width: 1200px) {
	.page-ranking .inner {
		padding: 0 8%;
	}
}
@media screen and (max-width: 600px) {
	.page-ranking .column-list-2col li {
		width: calc(100% - 8%);
		margin-right: 8%;
		position: relative;
		margin-bottom: 5rem;
	}
}
/* --------------------------------------------------
page-top
-------------------------------------------------- */
#page-top {
	position: fixed;
	bottom: 100px;
	right: 40px;
	z-index: 10;
}
#page-top a {
	font-size: 55%;
	padding: 3em 0 0;
	display: inline-block;
	position: absolute;
	right: 0;
	bottom: 0;
	height: 10em;
	line-height: 1;
}
#page-top span {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	letter-spacing: .2em;
	display: inline-block;
	width: 100%;
}
#page-top a:before {
	content: "";
	position: absolute;
	top: 0;
	right: -8px;
	height: 16px;
	width: 1px;
	transform: rotate(-25deg);
	transform-origin: top left;
	background: #000;
	transition: all .25s ease-in-out;
}
#page-top a:after {
	content: "";
	position: absolute;
	top: 0;
	right: -8px;
	height: 100%;
	width: 1px;
	background: #000;
	transition: all .25s ease-in-out;
}
#page-top a:hover:before {
	top: -10%;
}
#page-top a:hover:after {
	top: -10%;
	height: 110%;
}
/* for TABLET */
@media screen and (max-width: 800px) {
	#page-top {
		position: fixed;
		bottom: 2%;
		right: 30px;
		z-index: 10;
	}
}
/* for MOBILE */
@media screen and (max-width: 600px) {
	/*	  #page-top {
		position: fixed;
		bottom: 2%;
		right: 25px;
		z-index: 10;
	  }
	  #page-top a {
		font-size: 0.9rem;
		padding: 0 0 0;
		right: 0;
		bottom: 0;
		height: 6em;
		line-height: 1;
	  }*/
}
/* --------------------------------------------------
footer
-------------------------------------------------- */
#footer {
	background: #8C2300;
	position: relative;
}
#footer .logo-h {
	position: absolute;
	left: 2em;
	top: 2em;
	width: 200px;
}
#footer .sitemap {
	position: absolute;
	right: 4em;
	top: 1.5em;
	display: flex;
	width: 330px;
	justify-content: space-between;
}
#footer .sitemap li{
	font-size: 90%;
}
#footer .sitemap li a{
	color: #fff;
}
#footer .sitemap li a::after {
    content: "|";
    font-size: 100%;
    margin-left: 2rem;
    font-family: fontawesome;
}
#footer .sitemap li:last-of-type a::after {
    content:none;
}
.footer-logo {
	display: flex;
	width: 500px;
	justify-content: space-between;
	margin: 0 auto;
	padding: 4rem 0;
	color: #FFF;
	font-size: 80%;
	align-items: center;
}
.footer-logo .logo {
	width: 150px;
}
.footer-logo .name {
	width: 340px;
}
.footer-logo .name span {
	margin-bottom: .5rem;
	display: block;
	letter-spacing: .3rem;
}
.copyright {
	font-size: .9rem;
	text-align: center;
	letter-spacing: .2rem;
	color: #FFF;
	padding-bottom: 3rem;
}

@media screen and (max-width: 800px) {
	#footer .sitemap {
		position: static;
		margin: 1em auto;
		width: 300px;
	}

	#footer .logo-h {
		position: static;
		width: 200px;
		margin: 0 auto;
		padding: 1em 0;
	}
}
@media screen and (max-width: 600px) {
	#footer .sitemap{
		width: 270px;
	}
	.footer-logo {
		display: flex;
		width: auto;
		justify-content: space-between;
		flex-direction: column;
		flex-wrap: wrap;
		text-align: center;
		padding: 2rem 0;
	}
	.footer-logo .logo {
		margin-bottom: 2rem;
	}
	.footer-logo .p img {
		width: 80%;
	}
	.footer-logo .name {
		width: 80%;
	}
	#footer .logo-h {
		width: 200px;
	}
}
/* --------------------------------------------------
animation
-------------------------------------------------- */
/* --------------------------------------------------
animation for PC
-------------------------------------------------- */
@media screen and (min-width: 768px) {
	/* --------------------------------------------------
	js-style
	-------------------------------------------------- */
	.fx-col-in li {
		opacity: 0;
	}
	.fx-in, .fx-down, .fx-up, .fx-left, .fx-right {
		visibility: hidden;
	}
}
/* --------------------------------------------------
anim
-------------------------------------------------- */
.fadeIn {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	visibility: visible !important;
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.fadeInDown {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
.fadeInUp {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1.5s;
	-ms-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
		-ms-transform: translateY(30px);
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
.fadeInLeft {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(50px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(50px);
		-ms-transform: translateX(50px);
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}
.fadeInRight {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
	visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}
.fx-panel-right {
	position: relative;
	overflow: hidden;
}
.fx-panel-right::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	left: 0%;
	background: #FFF;
}
.fadePanelAnim::after {
	animation-fill-mode: both;
	animation-duration: 1.2s;
	animation-timing-function: ease-in;
	animation-name: blackPanel;
}
@keyframes blackPanel {
	0% {
		left: 0%;
	}
	60% {
		left: 0%;
	}
	80% {
		left: 5%;
	}
	100% {
		left: 100%;
	}
}
.fx-txt-right01 {
	transition: 0.6s ease-out;
	opacity: 0;
	transform: translateX(-100%);
	overflow: hidden;
	display: inline-block;
}
.fx-txt-right01 span {
	display: inline-block;
	transition: 0.6s ease-out;
	transform: translateX(95%);
}
.txtRightAnim01 {
	opacity: 1;
	transform: translateX(0);
}
.txtRightAnim01 span {
	transform: translateX(0);
}
.fx-txt-right02 {
	transition: 0.6s 0.3s ease-out;
	opacity: 0;
	transform: translateX(-100%);
	overflow: hidden;
	display: inline-block;
}
.fx-txt-right02 span {
	display: inline-block;
	transition: 0.6s 0.3s ease-out;
	transform: translateX(95%);
}
.txtRightAnim02 {
	opacity: 1;
	transform: translateX(0);
}
.txtRightAnim02 span {
	transform: translateX(0);
}



/*熊本市観光ガイドのSPメニュー*/

/* --------------------------------------------------
spnav
-------------------------------------------------- */

#spnav{
	z-index:200;
	background: rgba(0, 0, 0, 0.8);
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	top:0;
	opacity: 0;
	display: none;
	transition: opacity .3s;
	padding-top:50px;
}
#spnav.open{
	opacity: 1;
	display: block;
}
.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}
#spnav .comingsoon span{
	background: rgba(255, 255, 255, .2);
	border:1px solid #FFF;
	color:#FFF;
	display:inline-block;
	margin-left:15px;
	padding:2px 5px;
	font-size:1rem;
}

/* btn-spnav */
.btn-spnav{
	position:relative;
	order: 3;
	display:none;
}
.btn-spnav a{
	display: block;
	padding: .5em;
	width: 6rem;
	text-align: center;
	font-size: 2rem;
	color: #fff;
	background: #000;
	position: absolute;
	right: 5px;
	top: 5px;
	z-index: 100;
}
.btn-spnav span{
	font-size:.8rem;
	display:block;
	text-align:center;
	margin-top:-5px;
}
#spnav .btn-access{
	vertical-align: middle;
	padding:0 20px;
}
#spnav .btn-access a{
	background:#fff;
	color:#66CC99;
	display:block;
	padding:13px;
	border-radius:5px;
	text-align:center;
}

@media screen and (max-width: 767px) {
	/* btn-spnav */
	.btn-spnav{
		display:block;
	}
}

/* Menu style */
#spnav nav {
	text-align: center;
	margin-top:10%;
}
#spnav nav > ul {
	width:90%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
}
#spnav nav > ul li {
	display: block;
	width:100%;
}
#spnav nav > ul li > a {
	color:#FFF;
	padding:.5em;
	font-size:1.2rem;
	display:block;
	border:#FFF solid 1px;
	margin-bottom:10px;
}
#spnav nav > ul ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#spnav nav > ul ul li {
	display: block;
	width:calc(50% - 5px);
}

/* language */
#spnav .sp-lang{
	position: relative;
	text-align:center;
	width:80%;
	position:relative;
	overflow:hidden;
	margin:0 auto;
}
#spnav .sp-lang a{
	color:#FFF;
}
#spnav .sp-lang dt{
	font-weight:bold;
}
#spnav .sp-lang dd{
	display:inline-block;
}
#spnav .sp-lang dd:after{
	color:#FFF;
	content:"|";
	margin:0 10px;
}


/* --------------------------------------------------
Overlay
-------------------------------------------------- */

/* Overlay style */
#spnav .overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background:	rgba(27,99,160,0.8)  ;
	z-index:2;
}

/* Overlay closing cross */
#spnav .btn-close {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	color:#FFF;
	font-size:3rem;
	line-height:3rem;
	z-index:1111;
	position:absolute;
	top:20px;
	right:20px;
}

/* Effects */
.overlay-slidedown {
	visibility: hidden;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
	transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
	visibility: visible;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}