@charset "utf-8";
/* CSS Document */

#main_img {
	width: 100%;
	height: 0;
	padding-top: calc(600/1500*100%);
	background: url(../images/mainvisual.png) center center / cover no-repeat;
	position: relative;
	z-index: -10;
}

.title_logo {
	width: 32%;
	position: absolute;
	top: 54%;
	left: 50%;
	right: 50%;
}

/*Brand-------------------------------------------------------------------*/

#brand {
	background-image: url(../images/top_brand_back.png);
	background-repeat: repeat-x;
}

.brand_box {
	max-width: 980px;
	padding: 80px 50px 50px 50px;;
	margin: 0 auto;
}

.brand_box p {
	text-align: center;
}

.brand_box img {
	width: 98%;
}

.brand_text {
	background: rgba(253,208,0,0.3);
	border-radius: 40px;
	padding: 40px 50px;
	margin-top: 80px;
}

.brand_text p{
	font-size: 16px;
	text-align: left;
	line-height: 2.5;
}

.morebatton {
	margin-top: 50px
}

.morebatton a {
	background-color: #fff;
	color: #fdd000;
	font-size: 100%;
	padding: 5px 40px;
	border: 1px solid #fdd000;
}

.morebatton a:hover{
	background-color: #fdd000;
	color: #fff;
	transition: 0.3s;
}


/*Gallary------------------------------------------------------------------*/

#gallary {
	background-image: url(../images/top_gallary_back.png);
	background-repeat: repeat;
}

.gallary_box {
	max-width: 980px;
}

#gallary p {
	text-align: center;
	padding-bottom: 40px
}

#gallary .title img {
	padding-top: 30px;
}

.gallary_box ul {
	width:100%;
	margin: 0 auto;
	text-align: center;
}

.gallary_box ul li {
	display: inline-block;
	padding-top: 40px;
}


/*News---------------------------------------------------------------------*/

.news_box {
	max-width: 980px;
	padding: 50px;
}

.news_box p {
	text-align: center;
	padding-bottom: 40px;
}

/* --- 新着情報エリア --- */
/* --- 見出し --- */

div .update {
	font-size: 14px;
}

div.update h3 {
margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
font-size: 100%;
}

/* --- 新着リスト --- */
div.update dl {
width: 100%; /* 新着リストの幅 */
margin: 0;
border-top: 2px #fdd000 dotted; /* 新着リストの上境界線 */
}

/* --- 日付エリア --- */
div.update dt {
width: 6.7em; /* 日付エリアの幅 */
float: left;
padding: 7px; /* 日付エリアのパディング（上右下左） */
	padding-left: 16px;
line-height: 120%;
	background-color: #fdd000;
	border-radius: 15px;
	margin-top: 10px;
	color: #fff;
}

/* --- 本文エリア --- */
div.update dd {
margin: 0;
padding: 7px 5px 6px 9.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 2px #fdd000 dotted; /* 本文エリア下境界線 */
line-height: 120%;
	margin-top: 10px;
}
div.update dd a{
color:#000000;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}


/*access-------------------------------------------------------------------*/

#access {
	background: url(../images/top_gallary_back.png) repeat;
}

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.access_box {
	max-width: 980px;
	padding: 50px 50px 10px 50px;
}

.access_box p {
	text-align: center;
	margin-bottom: 50px;
}

.company {
	font-size: 15px;
	margin-top: 20px;
}

.company p {
	text-align: left;
	line-height: 2.5;
}

.company img {
	padding-bottom: 10px;
}

.contact_batton {
	margin-top: -40px;
}

.contact_batton a {
	background-color: #fff;
	color: #fdd000;
	font-size: 100%;
	padding: 5px 40px;
	border: 1px solid #fdd000;
}

.contact_batton a:hover{
	background-color: #fdd000;
	color: #fff;
	transition: 0.3s;
}


/*ここからタブレット用（～800px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width:800px){
body {
	font-size:18px;
}
	
	.gallary_imgs img {
		width: 100%;
	}

	.access_title img {
		width: 100%;
	}
	
		.ggmap {
		position: relative;
		padding-bottom: 100%;
		padding-top: 140px;
		margin-bottom: 70px;
	}
	
	.ggmap ifame,
	.ggmap object,
	ggmap emded{
		position: static;
		width: 100%;
		height: 100%;
	}



}
/*ここからスマホ用（～415px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width:415px){
	
	body {
		font-size: 12px;
	}
	
	.brand_box {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.brand_text p{
	font-size: 14px;
	text-align: left;
	line-height: 2;
}

	
	.gallary_box {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.news_box {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	div.update dt {
		float: none;
	}
	
	div .update dd {
		float: none;
		padding: 0;
		line-height: 1.5
	}
	
	div.update dd {
		padding-bottom: 5px;
	}
	
	.access_box {
		padding-left: 20px;
		padding-right: 20px;
	}
	
}