@charset 'UTF-8';

/* ***********************************
	Site Name:
	Description:common style
	Version:
	Author:
************************************ */

body,div,
ul,ol,li,dl,dt,dd,p,th,td,
h1,h2,h3,h4,h5,h6,
div,span,object,iframe,
pre,form,fieldset,input,textarea,blockquote,
abbr,address,cite,code,legend,select
{
	margin:0;
	padding:0;
}

article,aside,dialog,figure,footer,
header,hgroup,nav,section
{
	display:block;
	margin:0;
	padding:0;
}

table
{
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
}

img,abbr,acronym,fieldset{border:0;}
strong{font-weight:bold;}
label{cursor:pointer;}
acronym,abbr{cursor:help;}
nav li{list-style-type:none;}
li{list-style-type:none;}
hr,legend{display:none;}
img{vertical-align:bottom;}

input{-webkit-appearance: none;}

/******************************************
	html, body
*******************************************/

html, body
{
	width: 100%;
/*	height: 100%;*/
}

html{font-size:62.5%;}

body
{
	color:#fff;
/*	background: url(../img/bg_body.jpg);*/
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight:normal;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.6;

	-webkit-text-size-adjust: 100%;
	
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: geometricPrecision;
	text-rendering: optimizeLegibility;
	text-rendering: optimizeSpeed;
	text-rendering: auto;
}

/******************************************
	font
*******************************************/

/******************************************
	anchor
*******************************************/

a,a:link,a:visited
{
	color:#6e4517;
	text-decoration:none;
	overflow:hidden;
}

a:hover
{
	color:#6e4517;
	text-decoration:underline;
}

a:active{}

/******************************************
	layout
*******************************************/

.wrapper
{
}

/* ----------------------------------------
	hero header
----------------------------------------- */

.heroheader {
	position: fixed;
	position: relative;
	top: 0;
	left: 0;
	z-index: -1;
	z-index: 0;
	width: 100%;
	height: 100vh;
	margin:0 auto;
/*	padding: 60px;*/
	box-sizing: border-box;
}

.heroheader .herobox {
	position: relative;
	width: 100%;
	height: 100%;
}

.kyoImages {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
/*
header.heroheader h1
{
	position:fixed;
	top:20px;
	right:30px;
	width:60px;
	height:140px;
	z-index:200;
	margin:0;
	background:red url(../img/logo/bizenlogo_t.png) no-repeat;
	background-size: 60px auto;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	opacity:0;
	transition: opacity 0.5s linear 0s;
}
*/
.title
{
	width: 100%;
	width: 40vw;
	height: 40vh;
	width: 344px;
	width: 285px;
	height: 164px;
	position:absolute;
	top:8%;
	top:64px;
	right:6%;
	background: url(../img/txt/title_05.png) 100% 0 no-repeat;
	background-size:contain;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

.enter
{
	width: 285px;
	height: 76px;
	position:absolute;
	top:50%;
	top: 164px;
	top: 160px;
	right:6%;
}

.enter a
{
	display:block;
	width: 285px;
	height: 76px;
	background: url(../img/btn/lookmore.png) no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

.enter a:hover
{
	background: url(../img/btn/lookmoreon.png) no-repeat;
}


.text
{
	width: 100%;
	width: 40vw;
	height: 40vh;
	height: 30vh;
	width: 344px;
	height: 248px;
	position:absolute;
	bottom:2%;
	right:6%;
	background:url(../img/txt/text_05.png) 100% 100% no-repeat;
	background-size:contain;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

.text a
{
	display:block;
	width: 100%;
	height: 40%;
	position:absolute;
	top:5%;
	left:0;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}


@media screen and (max-height: 600px) {
}


@media screen and (max-width: 640px) {
.title
{
	min-width: 285px;
	width: 60vw;
	right:3%;
	right:auto;
	left:50%;
   -webkit-transform: translate(-50%, 0%);
   transform: translate(-50%, 0%);
}

.text
{
	width: 60vw;
	right:auto;
	bottom:1%;
	left:50%;
   -webkit-transform: translate(-50%, 0%);
   transform: translate(-50%, 0%);
   background-position:-24px 100%;
}

.enter
{
   top: 40vh;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}
}

@media screen and (max-height: 400px) {
.enter
{
   top: 80vh;
}
}