/* ******************************************************************
 *	File name		: top.css
 *	Summary			: page layout
 * ******************************************************************
 */
/*

茶 背景 #F9F2E6　rgb(249,242,230)
茶 濃い #5D3800　rgba(93,56,0,0.5)

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

#wrapper{
	padding-top:0px;
}
header nav ul{
	padding:25px 350px 0 0;
}
header h1 a{
	display:none;
}
header h1 img{
	opacity:0;
}

.h_slide{
	background:rgba(255,255,255,0.9);
	animation:h_slide 0.5s ease-out 0s 1 forwards;
	}
	header.h_slide h1 a{
		display:block;
	}
	header.h_slide h1 img{
		opacity:1;
		animation:h_slide_img 0.5s ease-out 0s 1 forwards;
	}
	header.h_slide nav ul{
		animation:h_slide_ul 0.5s ease-out 0s 1 forwards;
	}
	header.h_slide #head_contact{
		animation:head_contact 0.5s ease-out 0s 1 forwards;
}

@keyframes h_slide{
	0%  {top:0px;}
	100%{top:-30px;}
}
@keyframes h_slide_img{
	0%  {top:15px;width:177px;height:72px;opacity:0;}
	100%{top:38px;width:131px;height:55px;opacity:1;}
}
@keyframes h_slide_ul{
	0%  {padding:25px 340px 0 0;}
	100%{padding:45px 20px 0 0;}
}
@keyframes head_contact{
	0%  {opacity:1;top:15px;}
	100%{opacity:0;top:-50px;}
}

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

section{
	position:relative;
}
section {/*out scroll*/
    opacity : 0.1;
    transform : translate(0px, 0px);
    transition : all 750ms;
}
 
section.scrollin {/*scroll in*/
    opacity : 1;
    transform : translate(0, 0);
}

section p{
	z-index:10;
}
section h2{
	position:relative;
	margin-bottom:20px;
	font-weight:bold;
	font-size:1.5rem;
	color:#5D3800;
	z-index:10;
}

/* 右寄白 */
.detail_box{
	display:block;
	text-align:right;
}
.detail_box a{
	display:inline-block;
	position:relative;
	padding:7px 20px 6px 35px;
	text-decoration:none;
	color:rgba(255,255,255,1.00);
	border:1px solid rgba(255,255,255,1.00);
}
.detail_box a:after{
		content:" ";
		position:absolute;
		top:11px;
		left:18px;
		border: 6px solid transparent;
		border-left: 8px solid rgba(255,255,255,1);
}
.detail_box a:hover{
	background:rgba(255,255,255,0.3);
}
/* 中央黒 */
.detail_box_b{
	display:block;
	text-align:center;
}
.detail_box_b a{
	display:inline-block;
	position:relative;
	padding:7px 20px 6px 35px;
	text-decoration:none;
	color:rgba(0,0,0,1.00);
	border:1px solid rgba(0,0,0,1.00);
}
.detail_box_b a:after{
		content:" ";
		position:absolute;
		top:11px;
		left:18px;
		border: 6px solid transparent;
		border-left: 8px solid rgba(0,0,0,1);
}
.detail_box_b a:hover{
	background:rgba(0,0,0,0.2);
}

/* -----------------------------------------------------------------
   main_img
----------------------------------------------------------------- */

#main_img{
	position:relative;
	width:100%;
	min-height:400px;
	text-align:center;
	background:url(../../image/top/main_img_bg.jpg) no-repeat left 0 rgba(255,255,255,1);
	border-bottom:5px solid rgba(93,56,0,0.7);
	z-index:0;
}
#main_img img{
	max-width:100%;
}
/* slide_area */
#slide_area{
	position:relative;
	width:100%;
	height:400px;
	overflow:hidden;
	background:url(../../image/top/logo.png) no-repeat 131px 112px;
	transition-duration:1.0s;
}
#slide_set{
	position:relative;
	width:550px;
	margin:0 0 0 600px;
	max-width:100%;
	text-align:left;
}
#slide_set ul{
	position:absolute;
	top:0px;
	left:0px;
	list-style:none;
	}
	#slide_set ul li{
		position:absolute;
		top:0px;
		left:1000px;
		width:341px;
		height:219px;
		opacity:0;
	}
	#slide_set ul li#photo_01{animation:photo_01 1.5s ease 0s forwards;}
	#slide_set ul li#photo_02{animation:photo_02 1.5s ease 3s forwards;}
	#slide_set ul li#photo_03{animation:photo_03 1.5s ease 6s forwards;}
	#slide_set ul li#photo_04{animation:photo_04 1.5s ease 9s forwards;}
	#slide_set ul li#photo_05{animation:photo_05 1.5s ease 12s forwards;}
	#slide_set ul li#photo_06{animation:photo_06 1.5s ease 15s forwards;}
	#slide_set ul li#photo_07{animation:photo_07 1.5s ease 18s forwards;}

		/* webkit */
		@-webkit-keyframes photo_01{
			0%  {opacity:0;top:20px;left:550px;transform:rotate(-45deg);}
			100%{opacity:1;top:150px;left:0px;transform:rotate(-10deg);}
		}
		@-webkit-keyframes photo_02{
			0%  {opacity:0;top:120px;left:900px;transform:rotate(-15deg);}
			100%{opacity:1;top:90px;left:400px;transform:rotate(10deg);}
		}
		@-webkit-keyframes photo_03{
			0%  {opacity:0;top:260px;left:750px;transform:rotate(-40deg);}
			100%{opacity:1;top:200px;left:280px;transform:rotate(-5deg);}
		}
		@-webkit-keyframes photo_04{
			0%  {opacity:0;top:50px;left:600px;transform:rotate(-25deg);}
			100%{opacity:1;top:90px;left:100px;transform:rotate(5deg);}
		}
		@-webkit-keyframes photo_05{
			0%  {opacity:0;top:100px;left:750px;transform:rotate(-40deg);}
			100%{opacity:1;top:130px;left:250px;transform:rotate(-7deg);}
		}
		@-webkit-keyframes photo_06{
			0%  {opacity:0;top:-30px;left:590px;transform:rotate(-40deg);}
			100%{opacity:1;top:100px;left:40px;transform:rotate(-5deg);}
		}
		@-webkit-keyframes photo_07{
			0%  {opacity:0;top:150px;left:800px;transform:rotate(-10deg);}
			100%{opacity:1;top:120px;left:300px;transform:rotate(5deg);}
		}

		@keyframes photo_01{
			0%  {opacity:0;top:20px;left:550px;transform:rotate(-45deg);}
			100%{opacity:1;top:150px;left:0px;transform:rotate(-10deg);}
		}
		@keyframes photo_02{
			0%  {opacity:0;top:120px;left:900px;transform:rotate(-15deg);}
			100%{opacity:1;top:90px;left:400px;transform:rotate(10deg);}
		}
		@keyframes photo_03{
			0%  {opacity:0;top:260px;left:750px;transform:rotate(-40deg);}
			100%{opacity:1;top:150px;left:360px;transform:rotate(-15deg);}
		}
		@keyframes photo_04{
			0%  {opacity:0;top:50px;left:600px;transform:rotate(-25deg);}
			100%{opacity:1;top:90px;left:100px;transform:rotate(5deg);}
		}
		@keyframes photo_05{
			0%  {opacity:0;top:100px;left:750px;transform:rotate(-40deg);}
			100%{opacity:1;top:130px;left:250px;transform:rotate(-7deg);}
		}
		@keyframes photo_06{
			0%  {opacity:0;top:-30px;left:590px;transform:rotate(-40deg);}
			100%{opacity:1;top:100px;left:40px;transform:rotate(-5deg);}
		}
		@keyframes photo_07{
			0%  {opacity:0;top:150px;left:800px;transform:rotate(-10deg);}
			100%{opacity:1;top:120px;left:300px;transform:rotate(5deg);}
		}


/* --- responsive --- */
@media(max-width:960px){
	#slide_area{
	}
	#slide_set{
		width:100%;
	}
}
@media(max-width:767px){
	#main_img{
		position:relative;
		width:100%;
		min-height:0px;
		padding:90px 20px 50px;
		text-align:center;
		z-index:0;
	}
	#slide_area{
		width:435px;
		max-width:100%;
		height:183px;
		margin:0 auto;
		background:url(../../image/top/logo.png) no-repeat 0 0;
		background-size:contain;
	}
	#slide_set{
		display:none;
	}
}
@media(max-width:425px){
	#slide_area{
		height:153px;
	}
}
@media(max-width:375px){
	#slide_area{
		height:123px;
	}
}
/* -----------------------------------------------------------------
   information
----------------------------------------------------------------- */
#information{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	position:relative;
	width:1040px;
	max-width:100%;
	margin:0 auto;
	padding:35px 20px 15px;
	text-align:left;
    opacity:1;
    transform:translate(0, 0);
	z-index:1;
	}
	#information_box{
		width:calc(100% - 380px);
	}
	#information #copy,
	#information #info_news,
	#information #info_event{
		position:relative;
		width:100%;
		max-width:100%;
	}

	/* COPY */
	#information #copy{
		position:relative;
		margin-bottom:30px;
		padding-bottom:0px;
		/*border-bottom:3px solid rgba(107,181,26,0.3);*/
	}
	#information #copy p{
		margin-bottom:10px;
		font-size:0.85em;
		text-shadow:rgba(0,0,0,0.4) 0px 0px 0px,rgba(0,0,0,0.4) 0px 0px 0px;
	}
	#information #copy p strong{
		display:inline-block;
		position:relative;
		margin-bottom:10px;
		font-weight:bold;
		font-size:1.3em;
		font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
		text-indent:-5px;
	}
	
	/* h2 */
	#information #info_news h2,
	#information #info_event h2{
		position:relative;
		min-height:45px;
		margin-bottom:12px;
		padding:15px 250px 0 0px;
		font-weight:bold;
		font-size:1.1rem;
		color:#5D3800;
		background:url(../../image/top/info_h2_bg.png) no-repeat right bottom;
		border-bottom:2px solid #5D3800;
		text-shadow:rgba(0,0,0,0.4) 0px 0px 0px,rgba(0,0,0,0.4) 0px 0px 0px;
	}

	/* NEWS */
	#information #info_news iframe{
		position:relative;
		width:600px;
		max-width:100%;
		overflow:hidden !important;
	}
	#information #info_news div{
	}

	#information #info_news h2{
		background:url(../../image/top/info_news_h2.png) no-repeat right bottom;
	}
	#information #info_news ul{
		position:relative;
		margin-bottom:35px;
		list-style:none;
	}
	#information #info_news ul li{
		position:relative;
		padding:5px 0 5px 100px;
		font-size:0.85rem;
		border-bottom:1px dotted rgba(93,56,0,0.5);
	}
	#information #info_news ul li a{
		position:relative;
		font-size:0.85rem;
	}
	#information #info_news ul li span.date{
		position:absolute;
		top:5px;
		left:0px;
	}

	/* EVENT */
	#information #info_event iframe{
		position:relative;
		width:100%;
		max-width:100%;
		height:245px;
		overflow:hidden !important;
	}
	#information #info_event div{
	}
	
	#information #info_event h2{
		background:url(../../image/top/info_event_h2.png) no-repeat right bottom;
	}
	#information #info_event ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content:space-between;
		justify-content:space-between;
		-webkit-flex-wrap:nowrap;
		flex-wrap:nowrap;
		list-style:none;
	}
	#information #info_event ul li{
		position:relative;
		width:32%;
		height:225px;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		background:rgba(255,255,255,1);
		border:2px solid #FFF;
		overflow:hidden;
		word-break:break-all;
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	}
	#information #info_event ul li img{
		position:absolute;
		top:10px;
		left:11px;
		z-index:2;
	}
	#information #info_event ul li span.date{
		position:absolute;
		top:138px;
		left:11px;
		font-size:0.85rem;
		z-index:2;
	}
	#information #info_event ul li a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		padding:160px 11px 10px;
		font-size:0.8rem;
		color:#000;
		line-height:1.5;
		z-index:10;
	}
	#information #info_event ul li:hover{
		background:rgba(93,56,0,0.1);
		border:2px solid rgba(93,56,0,0.3);
	}

/* --- responsive --- */
@media(max-width:900px){
	#information_box{
		width:100%;
	}
}
@media(max-width:767px){
	#information #copy{
		font-size:0.9em;
		line-height:1.5;
	}
	#information #info_news h2{
		padding:15px 0px 0px 0px;
		background:url(../../image/top/info_news_h2_sp.png) no-repeat right bottom;
	}
	#information #info_event h2{
		padding:15px 0px 0px 0px;
		background:url(../../image/top/info_event_h2_sp.png) no-repeat right bottom;
	}
}

/* -----------------------------------------------------------------
   information - banner
----------------------------------------------------------------- */

#info_banner{
	position:relative;
	width:100%;
	max-width:100%;
	margin:0 0 20px;
	}
	#info_banner img{
		max-width:100%;
		height:auto;
}
@media(max-width:767px){
	#info_banner{
		margin:0 auto 20px;
	}
}

/* -----------------------------------------------------------------
   sns_contents
----------------------------------------------------------------- */

#sns_contents{
	position:relative;
	width:360px;
	height:100%;
}

#X_information{
	position:relative;
	top:-68px;
	left:0;
	width:100%;
	margin:0 0 -48px;
	text-align:center;
	}
	#X_information a{
		display:inline-block;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		overflow:hidden;
}

#sns_contents h2{
	margin:0 0 7px;
	padding:3px 10px;
	font-family: 'Kosugi Maru', sans-serif;
	font-size:0.9rem;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	background:#333;
	color:#FFF;
}

/*
#twitter{
	position:relative;
	top:-68px;
	left:0;
	width:100%;
	height:420px;
	margin:0 0 -48px;
	background:#F5F8ED;
    opacity:1;
    transform:translate(0, 0);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:2px solid #6D9D2F;
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	overflow-x:hidden;
	overflow-y:scroll;
	transition-duration:1.0s;
}
#twitter #twitter_contents{
	position:relative;
	width:100%;
	height:calc(100% - 250px);
    opacity:1;
}
#twitter #twitter_contents div a{
}
*/
/* scroll bar */
div::-webkit-scrollbar{
  width: 12px;
}
div::-webkit-scrollbar-track{
	margin:1px 0;
	background: #FFF;
	border: none;
	border-radius: 4px;
	box-shadow: inset 0 0 2px #777; 
}
div::-webkit-scrollbar-thumb{
  background: #6D9D2F;
  border-radius: 4px;
  box-shadow: none;
}

#x_list{
	display:block;
	text-align:center;
	}
	#x_list ul{
		display:inline-block;
		width:360px;
		max-width:100%;
		margin:0 auto;
		list-style:none;
	}
	#x_list ul li{
		display:inline-block;
		width:100%;
		margin:0 0 5px;
	}
	#x_list ul li a{
		transition-duration:0.5s;
		}
		#x_list ul li a:hover{
			opacity:0.8;
	}
	#x_list ul li a img{
		max-width:100%;
		height:auto;
}

/* --- responsive --- */
@media(max-width:900px){
	#sns_contents{
		width:100%;
		height:auto;
	}
	#twitter{
		display:none;
	}
	#X_information{
		top:0px;
		margin:0 auto 15px;
	}
}

/* ----------------------------------------------------------------- */
/*	company                                                          */
/* ----------------------------------------------------------------- */

section#company{
	position:relative;
	background:url(../../image/top/company_bg.jpg) no-repeat center bottom;
	background-size:cover;
	color:#FFF;
}
#company_contents{
	position:relative;
	width:1000px;
	min-height:480px;
	margin:0 auto 0px !important;
	padding:65px 590px 0px 40px;
	text-align:left;
	}
	#company_contents:before{
		content:" ";
		display:block;
		position:absolute;
		top:0px;
		left:0px;
		width:450px;
		height:100%;
		background:rgba(0,0,0,0.8);
		z-index:0;
	}
	#company_contents h2{
		display:none;
		position:relative;
		color:#FFF;
	}
	#company_contents p{
		position:relative;
		margin-bottom:7px;
		font-weight:bold;
		font-size:0.85rem;
		line-height:1.7;
}
#company_contents #leaflet{
	position:absolute;
	top:40px;
	right:0px;
	z-index:10;
	}
	#company_contents #leaflet a{
		display:inline-block;
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		transition-duration:0.5s;
		}
		#company_contents #leaflet a:hover{
			-moz-box-shadow: 0px 0px 7px rgba(0,0,0,1);
			-webkit-box-shadow: 0px 0px 7px rgba(0,0,0,1);
			box-shadow: 0px 0px 7px rgba(0,0,0,1);
	}
	#company_contents #leaflet p{
		position:absolute;
		bottom:0px;
		right:140px;
		width:200px;
		padding:7px 25px 7px 10px;
		text-align:right;
		font-size:0.77rem;
		background:rgba(0,0,0,0.8);
		z-index:9;
		color:#FFF;
		}
		#company_contents #leaflet p::after{
			content:" ";
			position:absolute;
			top:calc(50% - 15px);
			right:-7px;
			border:15px solid transparent;
			border-left:8px solid rgba(255,255,255,0.8);
}
/* --- responsive --- */
@media(max-width:450px){
	#company_contents{
		width:100%;
		padding:65px 40px 45px 40px;
		}
		#company_contents p{
			word-break:break-all;
	}
	#company_contents #leaflet{
		position:relative;
		top:0px;
		width:100%;
		padding-top:25px;
		text-align:center;
		}
		#company_contents #leaflet p{
			position:relative;
			right:0px;
			width:100%;
			padding:15px 10px 0px 10px;
			text-align:center;
			background:none;
			}
			#company_contents #leaflet p::after{
				display:none;
	}
}

/* -----------------------------------------------------------------
   corp_link
----------------------------------------------------------------- */

#corp_link{
	background:url(../../image/top/corp_bg.png) repeat left 0 #FFF;
	}
	#corp_link_cover{
		position:relative;
		background:url(../../image/top/left_bg.png) no-repeat left 0;
		background-size:contain;
}
#corp_link_contents{
	position:relative;
	width:1040px;
	max-width:100%;
	margin:0 auto;
	padding:65px 20px 45px;
	}
	#corp_link_contents h2{
		color:#FFF;
		margin-bottom:30px !important;
	}
	#corp_link_contents ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content:space-between;
		justify-content:space-between;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		list-style:none;
	}
	#corp_link_contents li{
		position:relative;
		width:230px;
		height:230px;
		margin:20px 0;
		background:#FFF;
		border:5px solid #999;
		}
		#corp_link_contents li:nth-child(4n+2):last-child{
			margin:20px 51.0% 20px 0;
		}
		#corp_link_contents li:nth-child(4n+3):last-child{
			margin:20px 25.5% 20px 0;
		}
		#corp_link_contents li span{
			display:inline-block;
			position:absolute;
			top:-30px;
			left:-5px;
			height:30px;
			padding:0 15px;
			line-height:29px;
			font-weight:bold;
			background:#999;
			color:#FFF;
	}
	#corp_link_contents li img{
		position:absolute;
		top:15px;
		left:15px;
	}
	#corp_link_contents li a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		padding:190px 15px 0px;
		font-size:0.9rem;
		text-decoration:none;
		color:#000;
	}
	#corp_link_contents li:nth-of-type(2) a{
		padding:170px 15px 0px;
	}
	#corp_link_contents li:hover{
		border:5px solid #3791CD;
		}
		#corp_link_contents li:hover span{
		background:#3791CD;
}
#corp_link .detail_box{
	text-align:center;
	}
	#corp_link .detail_box a{
		color:#3791CD;
		border:1px solid #3791CD;
		background:rgba(255,255,255,0.8);
	}
	#corp_link .detail_box a:after{
			border-left: 8px solid #3791CD;
	}
	#corp_link .detail_box a:hover{
		background:rgba(255,255,255,1);
}

@media(max-width:980px){
	#corp_link_contents li:nth-child(4n+2):last-child,
	#corp_link_contents li:nth-child(4n+3):last-child{
		margin:20px 0;
	}
	#corp_link_contents li:nth-child(3n+2):last-child{
		margin:20px 37% 0 0;
	}
}
@media(max-width:767px){
	#corp_link_cover{
		background:url(../../image/top/left_bg.png) no-repeat left 0;
		background-size:cover;
	}
	#corp_link_contents ul{
		-webkit-justify-content:space-around;
		justify-content:space-around;
	}
	#corp_link_contents li{
		width:150px;
		height:150px;
	}
	#corp_link_contents li:nth-child(3n+2):last-child{
		margin:20px 0;
	}
	#corp_link_contents li img{
		position:absolute;
		top:10px;
		left:15px;
		max-width:calc(100% - 30px);
		height:auto;
	}
	#corp_link_contents li a{
		padding:105px 15px 0px;
		font-size:0.75rem;
		line-height:1.3;
	}
}


/* -----------------------------------------------------------------
   contact
----------------------------------------------------------------- */

#contact{
	border-top:5px solid rgba(93,56,0,0.7);
}
#contact_contents{
	position:relative;
	width:820px;
	max-width:100%;
	margin:0 auto;
	padding:65px 0px 45px;
	z-index:10;
	}
	#contact_contents h2{
		text-align:center;
	}
	#contact_contents h3{
		position:relative;
	}
	#contact_contents h3 img{
		position:absolute;
		top:0px;
		left:30px;
		margin-bottom:20px;
	}
	#contact_contents p{
		position:relative;
		margin-bottom:15px;
		padding-left:400px;
		font-size:0.9rem;
		text-align:left;
	}
	#contact_contents strong{
		display:inline-block;
		position:relative;
		margin-bottom:7px;
		padding:5px 15px;
		color:#FFF;
		background:rgba(93,56,0,0.5);
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
}
#contact #mymap{
	position:relative;
	min-height:400px;
	}
	#contact #mymap:after{
		display:block;
		content:" ";
		position:absolute;
		top:5px;
		left:0px;
		width:100%;
		height:10px;
	background:linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.3));
		z-index:1000 !important;
	}
	#contact #mymap iframe{
		position:relative;
		top:5px;
		width:100%;
		height:400px;
		margin:0 !important;
		z-index:0;
}
@media(max-width:720px){
	#contact_contents h3 img{
		position:relative;
		left:0px;
	}
	#contact_contents p{
		margin-bottom:15px;
		padding-left:0px;
		text-align:center;
	}
}