@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

/*　※※※文字以外の画像は、日本語サイトと共通です※※※　*/


/* flex slider
------------------------------------------------------ */
.slides{ margin: 0 auto !important; width: 100%; max-width: 1600px; position: relative;}
.slides li{ width: 100%; text-align: center;}
.slides li img{ max-width: 100%;}


/* slide_area
------------------------------------------------------ */
#slide_area { margin: 0 auto; width: 100%; max-width: 1600px;}


/* lead
------------------------------------------------------ */
#lead{
	padding: 100px 0 50px; width: 100%; max-width: 100%;
	height: 500px; text-align: center; box-sizing: border-box;
	background:
		url(../../common/img/bg_line.gif) repeat-x center top,
		url(../../img/lead_bg.jpg) no-repeat center bottom #FFF;
}

#lead #msg{ margin: 0 auto; width: 100%; max-width: 1600px; line-height: 2;}
#lead #msg p{ margin: 0 auto; color:#473706;}
#lead #msg p:first-child{ margin-bottom: 30px;}

@media screen and (max-width: 1600px) {
	#lead{ background-size: auto auto, 100% auto;}
	#lead #msg{ max-width: 90%;}
}
@media screen and (max-width: 1100px) {
	#lead{ padding-top: 50px; height: auto;}
}
@media screen and (max-width: 768px) {
	#lead #msg p:first-child{ margin-bottom: 15px;}
}
@media screen and (max-width: 640px) {
	#lead p:not(:first-child) { text-align: left;}
	#lead p:not(:first-child) br{ display: none;}
}


/* section
------------------------------------------------------ */
section{
	margin: 0 auto; padding: 16px 0 0; width: 100%; max-width: 100%;
	background: url(../../common/img/bg_line.gif) repeat-x center top;
}

section h2,
section h3,
section h4{ width: 100%; text-align: center; font-weight: bold;}
section h2{ margin:0 auto 30px; padding:50px 0 30px ;background: url(../../common/img/title_bg.gif) repeat center top;border-bottom: 1px solid #e1cd98;}
section h3{ margin: 0 auto 20px; padding: 20px 0 0; }
section h4{ margin: 35px auto 25px; font-size: 22px; color:#7d5f0f;}
section h2 span{ display: block; margin: 10px auto 0; font-size: 18px; color:#7d5f0f;}
section h3 span{ display: block; margin: 10px auto 0; font-size: 16px;}

section p{ margin: 0 auto 40px; width: 100%;}

@media screen and (max-width: 900px) {
	section p{ width: 96%;}
}
@media screen and (max-width: 640px) {
	section p{ width: 92%;}
	#sec3a p br{ display: none;}
}


/*	sec1 - sec4
------------------------------------------------------ */
section .detail{ clear: both; margin: 0 auto 120px; width: 100%; max-width: 1600px;}

section .flex_thum_fade{ }
section .flex-control-thumbs{
	clear: both; margin: 15px auto 0 !important;
	width: 98% !important; max-width: 1140px; text-align: left;
}
section .flex-control-thumbs li{
	margin-right: 20px; float: none !important;
	width: 100px; overflow: hidden;
}
section .flex-control-thumbs li:last-child{ margin-right: 0;}
section .flex-control-thumbs img{ width: 100px; height: 100px; object-fit: cover;}
section .flex-control-thumbs img.flex-active{ opacity: 1;}

section .detail .guide{ margin: -100px auto 0; width: 98%; max-width: 1250px;}
section .detail dl{
	display: table; margin-left: 48%; padding: 15px 0;
	width: 52%; max-width: 625px;
	border-top: 1px dashed #bebebe; border-bottom: 1px dashed #bebebe;
}

section .detail dt,
section .detail dd{ display: table-cell; vertical-align: middle;}
section .detail dt{ width: 110px; padding-right: 10px; font-style: 22px; font-weight: bold; text-align: center;}
section .detail dd{ line-height: 1.8;}
section .detail dd ul{ }
section .detail dd li{ display: inline-block; margin-right: 20px;}


#sec1a,#sec3a { border-bottom: 1px solid #e1cd98; margin-bottom:20px;}
#sec3a .detail .guide dl:first-child{ border-bottom: 0;}

#sec1 p,
#sec2 p,
#sec3 p,
#sec4 p{ text-align: center;}


@media screen and (max-width: 1600px) {
	section .detail { max-width: 100%;}
}
@media screen and (max-width: 1100px) {
	section .flex-control-thumbs li{ width: 80px;}
	section .flex-control-thumbs img{ width: 80px; height: 80px;}
	section .detail .guide{ margin: -87px auto 0;}
	section .detail dl,
	section .detail dt,
	section .detail dd{ display: block; box-sizing: border-box;}
	section .detail dl{ padding: 15px 5px;}
	section .detail dt{ width: 100%; text-align: left;}
}
@media screen and (max-width: 900px) {
	section .flex-control-thumbs{ text-align: center;}
	section .detail{ margin-bottom: 60px;}
	section .detail:first-of-type{ margin-bottom: 60px;}
	section .detail .guide{ margin: 15px auto 0; padding: 0;}
	section .detail dl{ margin: 0; width: 100%; max-width: 100%;}
	section .detail dt,
	section .detail dd{ text-align: center;}
	section .detail dt{margin-bottom: 10px;}
}
@media screen and (max-width: 768px) {
	section .detail:first-of-type{ margin-bottom: 30px;}
	section .detail dd li{ margin-right: 10px;}
}
@media screen and (max-width: 600px) {
	section .detail{ margin-bottom: 30px;}
	section .detail:first-of-type{ margin-bottom: 30px;}
	section .detail dl{ margin: 0 auto; width: 96%; max-width: 96%;}

	#sec3b p br,
	#sec4 p br{ display: none;}
}
@media screen and (max-width: 480px) {
	section .flex-control-thumbs li{ margin-right: 10px; width: 60px;}
	section .flex-control-thumbs img{ width: 60px; height: 60px;}
}


/*	sec5 - sec6
------------------------------------------------------ */
#sec5,
#sec6{ padding-bottom: 50px;}

#sec5 dl,
#sec6 dl{ margin: 0 auto 50px; width: 96%; max-width: 840px;}

#sec5 dt{ margin: 0 0 30px; font-size: 20px; font-weight: bold;}
#sec5 dd p{ margin: 0 auto 30px; width: 100%;}

#sec5 dd ol{ margin: 0 auto 30px; width: 100%;}
#sec5 dd ol li{ list-style: none; display: inline-block; margin-right: 25px;}
#sec5 dd ol li span{ display: inline-block; margin-right: 10px;}
#sec5 dd ul{ margin-left: 20px;}
#sec5 dd ul li{ list-style: disc;}

#sec6 dt{ padding-left: 30px; background: url(../../lg_en/img/sec6_icon_q.gif) 0px 5px no-repeat;}
#sec6 dd{ padding-left: 30px; background: url(../../lg_en/img/sec6_icon_a.gif) 0px 5px no-repeat;}

@media screen and (max-width: 900px) {
	#sec5 dl,
	#sec6 dl{ margin: 0 auto 25px; max-width: 96%;}
}
@media screen and (max-width: 600px) {
	#sec5 dl,
	#sec6 dl{ max-width: 90%;}
	#sec5 dt{ text-align: center;}
	#sec5 dd ol li{ display: block; margin-right: 0;}
	#sec5 dd ol li span{ width: 120px;}
}


/* sec7
------------------------------------------------------ */
#sec7 .map_area{ margin: 0 auto 35px; width: 96%; max-width: 1160px; height: 435px;}
#sec7 .map_area p{ margin: 0 auto;}

#sec7 #guide_area{ margin: 0 auto 90px; width: 96%; max-width: 1160px;}
#sec7 #guide_area dl{ margin-right: 110px; padding-bottom: 60px; width: 310px; float: left;}
#sec7 #guide_area dl:nth-child(3n+0){ margin-right: 0;}
#sec7 #guide_area dt { }
#sec7 #guide_area dt img{ display: inline-block; margin: 0 auto 10px;}
#sec7 #guide_area dt span{ font-size: 20px; font-weight: bold;}
#sec7 #guide_area dt a{ display: block; margin-top: 5px; width: 46px; float: right;}
#sec7 #guide_area dd{}
#sec7 #guide_area dd p{ margin: 0 0 25px;}
#sec7 #guide_area ul{ text-align: left;}
#sec7 #guide_area li{ margin: 0 0 10px; font-size: 14px; position: relative;}
#sec7 #guide_area li img{ top: 0; left: 0; position: absolute;}
#sec7 #guide_area li span{ display: inline-block; padding-left: 85px;}

#sec7 .more{ width: 310px; float: left;}
#sec7 .more p{ padding: 125px 0;}
#sec7 .more a{ display: inline-block; margin: 20px 0 0;}

#sec7 #ticker_area{ margin: 0 !important; width: 100%; max-width: 100%; overflow: hidden;}
#sec7 .bx-wrapper{ margin: 0 auto !important;}
#sec7 .bx_ticker{ clear: both; margin: 0;}
#sec7 .bx_ticker div{ max-width: 400px;}
#sec7 .bx_ticker img{ display: block; margin: 0; padding: 0;}

@media screen and (max-width: 1200px) {
	#sec7 .map_area{ max-width: 96%;}
	#sec7 #guide_area dl{ margin-right: 0; width: calc( 100%/3 );}
	#sec7 #guide_area dt,
	#sec7 #guide_area dd{ margin: 0 auto; width: 96%; max-width: 310px;}
}
@media screen and (max-width: 900px) {
	#sec7 #guide_area dt,
	#sec7 #guide_area dd{ width: 92%; max-width: 92%;}
}
@media screen and (max-width: 768px) {
	#sec7 #guide_area dl{ width: calc( 100%/2 );}
	#sec7 #guide_area dt,
	#sec7 #guide_area dd{ width: 96%; max-width: 310px;}
	#sec7 .more{ width: 100%; float: none;}
	#sec7 .more p{ padding: 0; text-align: center;}
}
@media screen and (max-width: 640px) {
	#sec7 .map_area{ height: 260px;}
	#sec7 #guide_area dt,
	#sec7 #guide_area dd{ width: 92%; max-width: 92%;}
}
@media screen and (max-width: 480px) {
	#sec7 #guide_area dl{ width: 100%; float: none;}
	#sec7 #guide_area dt,
	#sec7 #guide_area dd{ width: 92%; max-width: 310px;}
}


/* sec8
------------------------------------------------------ */
#sec8 .map_wrapper #map_canvas01 { width: 100%; height: 600px;}

#sec8 .more { width: 1100px; margin: 20px auto 0;}
#sec8 .more p { width: 253px; float: right;}

@media screen and (max-width: 1600px) {
	#sec8 .map_wrapper{ max-width: 100%;}
}
@media screen and (max-width: 1100px) {
	#sec8 .map_wrapper{ margin: 0 auto; width: 96%; max-width: 96%;}
	#sec8 .more { width: 100%;}
	#sec8 .more p { padding-right:10px;}
}
@media screen and (max-width: 640px) {
	#sec8 .map_wrapper #map_canvas01 { width: 100%; height: 235px;}
	#sec8 .more p { float: none;}
}


/* ---------------------------------------------------
	clear
------------------------------------------------------ */

.slides:after,
.flex-control-thumbs:after,
.detail:after,
.bx_ticker:after,
#sec7 #guide_area:after,
#sec7 #guide_area dt:after,
#sec8 .map_area:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}