@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Teko:400,700');
@import url('https://fonts.googleapis.com/css?family=Tinos:700i');
/* reset
============================================================*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, a {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    font-family : 'Noto Sans Japanese', sans-serif;
	font-weight: 700;
}
 
body {
    line-height:1;
	position: relative;
	text-align: center;
	font-size: 16px;
	line-height: 150%;
	color: #FFF;
	-webkit-text-size-adjust: none;
	background-color: #000;
}
p {
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
 
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
	color: #9D7A36;
}
a:active {
	text-decoration: none;
	color: inherit;
}
a:hover {
	text-decoration: none;
	color: #999;
}

a:hover img {
opacity: .8;
-webkit-opacity: .8;
-moz-opacity: .8;
filter: alpha(opacity=80);	/* IE lt 8 */
-ms-filter: "alpha(opacity=80)"; /* IE 8 */
}
 
a img {
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
	backface-visibility: hidden;
}

/* change colours to suit your needs */
ins {
    background-color:#9D7A36;
    color:#000;
    text-decoration:none;
}
 
/* change colours to suit your needs */
mark {
    background-color:#9D7A36;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
 
del {
    text-decoration: line-through;
}
 
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
 
table {
    border-collapse:collapse;
    border-spacing:0;
}
 
/* change border colour to suit your needs */

input, select {
    vertical-align:middle;
}
.clearfix {
	zoom: 1;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clear {
	clear: both;
}
::selection {
  color: #FFF;
  background: #9D7A36;
}
::-moz-selection {
  color: #FFF;
  background: #9D7A36;
}
/*:::::::::::::::::::::::::::::::::
     header 
:::::::::::::::::::::::::::::::::*/
header {
	height: 80px;
	width: 100%;
    z-index: 999;
	position: relative;
}
header h1 {
	text-align: right;
	font-size: 12px;
	color: #9D7A36;
	padding: 5px 2% 0 0;
}
header h1 a{
	display: block;
	float: left;
	font-family: 'Teko', sans-serif;
	font-weight: 700;
	font-size: 60px;
	margin: 0 0 0 2%;
	color: #FFF;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
}
header h1 a:hover{
	color: #9D7A36;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
}
/* nav ************/
header nav {
	width: 100%;
	margin-top: 10px;
	text-align: right;
}
header nav h2 {
	display: inline;
}
header nav h2 a {
    font-size: 12px;
	margin: 0 1.5% 0 15px;
	padding-bottom: 8px;
	position: relative;
	display: inline-block;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
	color: #FFF;
	text-align: center;
}
header nav h2 a span{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 80%;
}
header nav h2 a:hover {
	color: #9D7A36;
}

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
	margin-top: -55px;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #FFF;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 12px;
}
#nav-toggle span:nth-child(3) {
    top: 24px;
}

/*:::::::::::::::::::::::::::::::::
    footer
:::::::::::::::::::::::::::::::::*/
footer {
	padding: 30px 0;
	text-align: left;
}
footer ul {
	margin-top: 48px;
}
footer ul li {
    width: 80%;
    font-size: 16px;
	margin-bottom: 28px;
	text-align: center;
}  
footer ul li a {
	color: #666;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
}
footer ul li a:hover {
	color: #FFF;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
}
footer h1 a{
	font-family: 'Teko', sans-serif;
	font-weight: 700;
	color: #666;
	font-size: 60px;
	text-align: left;
	float: left;
	padding: 30px;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
}
footer h1 a:hover {
	color: #FFF;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
}
footer p {
	color: #666;
	font-size: 16px;
	text-align: right;
	float: right;
	padding: 30px;
}
footer p a {
	color: #666;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
}
footer p a:hover {
	color: #FFF;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
	transition: .2s ease-out;
}

.copyright {
	clear: both;
	width: 100%;
	text-align: center;
	color: #666;
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 24px;
}
/*:::::::::::::::::::::::::::::::::
    pagetop
:::::::::::::::::::::::::::::::::*/
.pagetop {
	text-align: center;
}
.pagetop a{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 32px;
	color: #FFF;
    position: fixed;
    bottom: 5%;
    right: 5%;
    z-index: 20;
	cursor: pointer;
}
.pagetop a svg{
	margin-bottom: 10px;
}

/*:::::::::::::::::::::::::::::::::
    common
:::::::::::::::::::::::::::::::::*/

/* title */
.title a h2{
	width: 100%;
	background-color: #222;
	color: #9D7A36;
	font-size: 18px;
	padding: 36px 0 20px 18px;
	text-align: left;
	line-height: 100%;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
.title a h2 span{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 48px;
}
.title a i{
	font-size: 42px;
	color: #444;
	float: right;
	padding: 0 15px 0 0;
	margin-top: -18px;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
.title a:hover h2{
	background-color: #333;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
.title a:hover i{
	color: #9D7A36;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
}

/* menu */
a.menu {
    display: block;
    overflow: hidden;
	width: 100%;
	line-height: 92%;
}
a.menu figure {
	position: relative;
}
a.menu figure h3 {
	width: 100%;
	height: auto;
    position: absolute;
	top: 45%;
	color: #fff;
    font-size: 24px;
	line-height: 130%;
}
a.menu figure h3 span {
	font-family: 'Teko', sans-serif;
	font-weight: 700;
    font-size: 96px;
}
a.menu figure h3.Tinos span {
	font-family: 'Tinos', serif;
	font-weight: 700;
    font-size: 96px;
}
a.menu figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
a.menu figure:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

/* content */
.content {
	width: 100%;
	background-color: #222;
	padding: 15px;
	text-align: left;
	}
.content h3 {
	margin: 15px 0 0 0;
	}
.content h3 a{
	color: #9D7A36;
	font-size: 18px;
	line-height: 90%;
	margin: 50px 0 0 0;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	}
.content h3 a span{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 48px;
}
.content h3 a:hover{
	color: #FFF;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	}
.content p{
	margin: 10px 0 12px 0;
	line-height: 120%;
	}
.content a p{
	color: #9D7A36;
	font-size: 18px;
	}
.content a h4{
	width: 100%;
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 24px;
	color: #444;
	text-align: right;
	margin: 0;
	line-height: 50%;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	}
.content a h4:hover{
	color: #9D7A36;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	-webkit-transform: translateX(5px);
	transform: translateX(5px);
	}
/* line */
.line {
	display: block;
	margin: 60px 15px 0 15px;
	height: 2px;
	background-color: #222;
	}

/*:::::::::::::::::::::::::::::::::
    link_area
:::::::::::::::::::::::::::::::::*/
#link_area {
	height: 220px;
	}
#link_area div div a{
	margin-top: 40px;
	}


/*:::::::::::::::::::::::::::::::::
    news
:::::::::::::::::::::::::::::::::*/
a div.news {
	background-color: #222;
	width: 100%;
	padding: 15px;
	overflow: hidden;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a:hover div.news {
	background-color: #333;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a div.news div.day {
	width: 120px;
	height: 120px;
	float: left;
	border: #9D7A36 solid 2px;
	background-color: #000;
	position: relative;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a div.news div.day p{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 24px;
	color: #9D7A36;
	line-height: 60%;
	text-align: center;
	position: absolute;
	top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a div.news div.day p span{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 64px;
	display: block;
	padding-top: 24px;
}
a:hover div.news div.day {
	border: #9D7A36 solid 2px;
	background-color: #9D7A36;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a:hover div.news div.day p{
	color: #FFF;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a div.news article {
	font-size: 32px;
	font-weight: 250;
	color: #FFF;
	text-align: left;
	line-height: 110%;
	margin: 5px 0px 0 135px;
}
a div.news aside {
	float: right;
	width: 30px;
	text-align: right;
}

a div.news aside i{
	font-size: 42px;
	color: #444;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a:hover div.news aside i{
	color: #9D7A36;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
}

/*:::::::::::::::::::::::::::::::::
    live
:::::::::::::::::::::::::::::::::*/
a div.live {
	background-color: #222;
	width: 100%;
	padding: 15px;
	overflow: hidden;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a:hover div.live {
	background-color: #333;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a div.live div.day {
	width: 120px;
	height: 120px;
	float: left;
	border: #9D7A36 solid 2px;
	background-color: #9D7A36;
	position: relative;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a div.live div.day p{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 24px;
	color: #FFF;
	line-height: 60%;
	text-align: center;
	position: absolute;
	top: 18px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a div.live div.day p span{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 64px;
	display: block;
	padding: 24px 0 4px 0;
}
a:hover div.live div.day {
	border: #9D7A36 solid 2px;
	background-color: #000;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a:hover div.live div.day p{
	color: #9D7A36;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a div.live article.place {
	font-size: 16px;
	color: #FFF;
	text-align: left;
	line-height: 110%;
	margin: 5px 0px 0 135px;
}
a div.live article.place span {
	font-family: 'Teko', sans-serif;
	font-weight: 700;
	font-size: 24px;
}
a div.live article.article {
    font-family : 'Noto Sans Japanese', sans-serif;
	font-size: 32px;
	font-weight: 250;
	color: #FFF;
	text-align: left;
	line-height: 110%;
	margin: 5px 0px 0 135px;
}
a div.live aside {
	float: right;
	width: 30px;
	text-align: right;
}

a div.live aside i{
	font-size: 42px;
	color: #444;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a:hover div.live aside i{
	color: #9D7A36;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
}


.no-gutter > [class*='col-'] {
    padding: 0;
	margin: 0;
	line-height: 0;
}
.mt15 {
	margin-top: 15px;
}
.mt30 {
	margin-top: 30px;
}
.mt60 {
	margin-top: 60px;
}
.mtmb80 {
	margin-top: 80px;
	margin-bottom: 80px;
}
/* btn ************/
.white_btn {
	width: 100%;
	border: #FFF solid 2px;
	background-color: rgba(0,0,0,0);
	color: #fff;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	padding: 40px 0 24px 0;
	font-size: 16px;
}
.white_btn span{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 64px;
	line-height: 60%;
}
.white_btn i{
	font-size: 64%;
	margin-right: 3px;
}
.white_btn:hover {
	border: #9D7A36 solid 2px;
	background-color: rgba(234,95,0,0);
	color: #9D7A36;
}
.red_btn {
	border: #FFF solid 1px;
	color: #FFF;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	font-size: 14px;
	font-weight: 400;
	padding: 0px 20px;
	margin: 0 5px 8px 0;
}
.red_btn:hover {
	border: #D00019 solid 1px;
	background-color:#D00019 ;
	color: #fff;
}
.red_btn.hover {
	border: #D00019 solid 1px;
	background-color:#D00019 ;
	color: #fff;
}
.red_btn.hover:hover {
	border: #9D7A36 solid 1px;
	background-color:#9D7A36 ;
	color: #fff;
}
.beige_btn {
	width: 100%;
	border: #9D7A36 solid 2px;
	background-color: rgba(157,122,54,1);
	color: #fff;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	padding: 40px 0 24px 0;
	font-size: 16px;
}
.beige_btn span{
	font-family: 'Teko', sans-serif;
	font-weight: 400;
	font-size: 64px;
	line-height: 60%;
}
.beige_btn:hover {
	border: #9D7A36 solid 2px;
	background-color: rgba(0,0,0,0);
	color: #9D7A36;
}
.white_btn::before,
.white_btn::after,
.red_btn::before,
.red_btn::after,
.beige_btn::before,
.beige_btn::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.white_btn,
.white_btn::before,
.white_btn::after,
.red_btn,
.red_btn::before,
.red_btn::after,
.beige_btn,
.beige_btn::before,
.beige_btn::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .2s;
	transition: all .2s;
}