@charset "utf-8";

html {
	min-width: 1340px;
	height: 100%;
	-webkit-text-size-adjust:100%;
}

body {
	font-family: 'Gothic Medium BBB','游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 18px;
	line-height: 2;
	color: #333;
	height: 100%;
}

span.wf{
	display: inline-block;
}

.wff{
	transform: rotate(0.028deg);
}

.wff img{
	transform: rotate(-0.028deg);
}

a{
	color: inherit;
	text-decoration: none;
}

.sp,
.spI,
.spIB{
	display: none!important;
}

@media screen and (max-width: 600px) {
	html {
		min-width: 320px;
	}

	body {
		font-size: 12px;
		line-height: 1.6;
	}

	.pc{
		display: none!important;
	}
	
	.sp{
		display: block!important;
	}

	.spI{
		display: inline!important;
	}
	
	.spIB{
		display: inline-block!important;
	}
}


/* Base Fonts -------------------------------------------------------------- */
.fwN { font-weight: normal;}
.fwB { font-weight: bold;}
.fz10  { font-size: 10px;}
.fz12   { font-size: 12px;}
.fz16   { font-size: 16px;}
.fz18   { font-size: 18px;}
.fz20   { font-size: 20px;}
.fz24  { font-size: 24px;}
.fz26 { font-size: 26px;}

/* Inline Align ------------------------------------------------------------ */
.taL { text-align: left   !important;}
.taC { text-align: center !important;}
.taR { text-align: right  !important;}
.vaT { vertical-align: top    !important;}
.vaM { vertical-align: middle !important;}
.vaB { vertical-align: bottom !important;}
.vaBa { vertical-align: baseline !important;}

/* Floats ------------------------------------------------------------------ */
.flL    { display: inline; float: left;}
.flR    { display: inline; float: right;}

/* Tools ------------------------------------------------------------------- */
.clear { clear: both;}
.block { display: block;}

/* Margin ------------------------------------------------------------------ */
.mt00 { margin-top: 0   !important;}
.mt05 { margin-top: 5px !important;}
.mt10 { margin-top:10px !important;}
.mt12 { margin-top:12px !important;}
.mt15 { margin-top:15px !important;}
.mt20 { margin-top:20px !important;}
.mt25 { margin-top:25px !important;}
.mt30 { margin-top:30px !important;}
.mt35 { margin-top:35px !important;}
.mt40 { margin-top:40px !important;}
.mt45 { margin-top:45px !important;}
.mt50 { margin-top:50px !important;}
.mr00 { margin-right: 0   !important;}
.mr05 { margin-right: 5px !important;}
.mr10 { margin-right:10px !important;}
.mr12 { margin-right:12px !important;}
.mr15 { margin-right:15px !important;}
.mr20 { margin-right:20px !important;}
.mr25 { margin-right:25px !important;}
.mr30 { margin-right:30px !important;}
.mr35 { margin-right:35px !important;}
.mr40 { margin-right:40px !important;}
.mr45 { margin-right:45px !important;}
.mr50 { margin-right:50px !important;}
.mb00 { margin-bottom: 0   !important;}
.mb05 { margin-bottom: 5px !important;}
.mb10 { margin-bottom:10px !important;}
.mb12 { margin-bottom:12px !important;}
.mb15 { margin-bottom:15px !important;}
.mb20 { margin-bottom:20px !important;}
.mb25 { margin-bottom:25px !important;}
.mb30 { margin-bottom:30px !important;}
.mb35 { margin-bottom:35px !important;}
.mb40 { margin-bottom:40px !important;}
.mb45 { margin-bottom:45px !important;}
.mb50 { margin-bottom:50px !important;}
.ml00 { margin-left: 0   !important;}
.ml02 { margin-left: 2px !important;}
.ml05 { margin-left: 5px !important;}
.ml10 { margin-left:10px !important;}
.ml12 { margin-left:12px !important;}
.ml15 { margin-left:15px !important;}
.ml20 { margin-left:20px !important;}
.ml25 { margin-left:25px !important;}
.ml30 { margin-left:30px !important;}
.ml35 { margin-left:35px !important;}
.ml40 { margin-left:40px !important;}
.ml45 { margin-left:45px !important;}
.ml50 { margin-left:50px !important;}

/* Padding  ---------------------------------------------------------------- */
.pt00 { padding-top: 0   !important;}
.pt05 { padding-top: 5px !important;}
.pt10 { padding-top:10px !important;}
.pt12 { padding-top:12px !important;}
.pt15 { padding-top:15px !important;}
.pt20 { padding-top:20px !important;}
.pt25 { padding-top:25px !important;}
.pt30 { padding-top:30px !important;}
.pt35 { padding-top:35px !important;}
.pt40 { padding-top:40px !important;}
.pt45 { padding-top:45px !important;}
.pt50 { padding-top:50px !important;}
.pr00 { padding-right: 0   !important;}
.pr05 { padding-right: 5px !important;}
.pr10 { padding-right:10px !important;}
.pr12 { padding-right:12px !important;}
.pr15 { padding-right:15px !important;}
.pr20 { padding-right:20px !important;}
.pr25 { padding-right:25px !important;}
.pr30 { padding-right:30px !important;}
.pr35 { padding-right:35px !important;}
.pr40 { padding-right:40px !important;}
.pr45 { padding-right:45px !important;}
.pr50 { padding-right:50px !important;}
.pb00 { padding-bottom: 0   !important;}
.pb05 { padding-bottom: 5px !important;}
.pb10 { padding-bottom:10px !important;}
.pb12 { padding-bottom:12px !important;}
.pb15 { padding-bottom:15px !important;}
.pb20 { padding-bottom:20px !important;}
.pb25 { padding-bottom:25px !important;}
.pb30 { padding-bottom:30px !important;}
.pb35 { padding-bottom:35px !important;}
.pb40 { padding-bottom:40px !important;}
.pb45 { padding-bottom:45px !important;}
.pb50 { padding-bottom:50px !important;}
.pl00 { padding-left: 0   !important;}
.pl05 { padding-left: 5px !important;}
.pl10 { padding-left:10px !important;}
.pl12 { padding-left:12px !important;}
.pl15 { padding-left:15px !important;}
.pl20 { padding-left:20px !important;}
.pl25 { padding-left:25px !important;}
.pl30 { padding-left:30px !important;}
.pl35 { padding-left:35px !important;}
.pl40 { padding-left:40px !important;}
.pl45 { padding-left:45px !important;}
.pl50 { padding-left:50px !important;}
.pl90 { padding-left:90px !important;}

/* clearfix ------------------------------------------------------------------ */
.clearfix {
	display: block;
	min-height: 1px;
	position: relative; /* DW */
}
.clearfix:after {
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
	font-size: 0;
	overflow: hidden;
	line-height: 0;
}
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* parts ------------------------------------------------------------------ */
#mainImg{
	width: 100%;
	height: 300px;
	margin-top: -50px;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

#mainImg h2{
	font-size: 40px;
	color: #fff;
	padding-top: 120px;
	text-align: center;
	line-height: 1.5;
}

#mainImg .black{
	color: #000;
}

#mainImg h2 span{
	display: block;
	font-size: 22px;
}

#top #mainImg{
	height: 600px;
}

#mainImg ul{
	z-index: 2;
}

#mainImg ul li{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0px;
	left: 0px;
}

#pankuzu{
	width: 100%;
	background: rgba(255,255,255,0.35);
	height: 45px;
	margin-bottom: 75px;
	position: relative;
    z-index: 3;
}

#pankuzu p{
	width: 1145px;
	margin: 0 auto;
	font-size: 14px;
	color: #623700;
	line-height: 45px;
}

.btn01,
.btn02,
.btn03
{
	background: url(../img/btn_bg01.gif);
	background-repeat: repeat;
	width: 217px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	color: #fff;
	font-size: 22px;
	position: relative;
	display: block;
	margin: 25px auto;
	border-radius: 5px;

	cursor: pointer;
	border: none;
	outline: none;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
}

.btn01:after,
.btn02:after,
.btn03:after{
	content: "";
	border: 1px solid #fff;
	border-radius: 5px;
	display: block;
	width: 211px;
	height: 49px;
	position: absolute;
	top: 2px;
	left: 2px;
}

.btn01 span,
.btn02 span,
.btn03 span{
	display: inline-block;
}

.btn02{
	background-image: url(../img/btn_bg02.gif);
	width: 170px;
	height: 45px;
	line-height: 45px;
	font-size: 18px;
	float: right;
}

.btn02:after{
	width: 164px;
	height: 39px;
}

.btn03{
	width: 238px;
	height: 52px;
	line-height: 52px;
	margin: 25px 0;
}

.btn03:after{
	width: 232px;
	height: 46px;
}

@media screen and (max-width: 600px) {
	#mainImg{
		width: 100%;
		height: 100px;
		margin-top: -11px;
	}

	#mainImg h2{
		font-size: 24px;
		padding-top: 30px;
		line-height: 1.5;
	}

	#mainImg h2 span{
		font-size: 12px;
	}

	#top #mainImg{
		height: 165px;
	}

	#pankuzu{
		margin-bottom: 30px;
		height: 28px;
	}

	#pankuzu p{
		line-height: 28px;
		font-size: 10px;
		width: 300px;
	}

	.btn01,
	.btn02,
	.btn03{
		background-size: 50%;
		font-size: 16px;
		line-height: 50px;
		margin: 15px auto;
		float: none;
	}

	.btn01,
	.btn02,
	.btn03{
		width: 300px;
		height: 50px;
	}

	.btn01:after,
	.btn02:after,
	.btn03:after{
		width: 294px;
		height: 44px;
	}
}


/* header ------------------------------------------------------------------ */
header{
	background: url(../img/header_bg01.png);
	background-size: 100% 100%;
	margin: 0 auto;
	width: 100%;
	height: 159px;
	position: relative;
	z-index: 999;
}

header #logo{
	position: absolute;
	text-align: center;
	top: 15px;
	left: 0px;
	width: 100%;
}

header #logo a{
	position: relative;
	display: inline-block;
	z-index: 999;
}

header #menu{
	width: 1340px;
	margin: 0 auto;
	font-size: 14px;
	color: #623700;
	padding-top: 37px;
}

header #menu li{
	text-align: center;
	padding: 0px 300px 0px 0px;
}

header #menu li span{
	display: block;
}

header #menu li a{
	display: block;
}

header #menu #headerLink01{
	margin-left: 190px;
}

header #menu #headerLink04{
	margin-left: 180px;
}

@media screen and (min-width: 601px) {
	header #menu{
		display: block!important;
		opacity: 1!important;
	}
}

@media screen and (max-width: 600px) {
	header{
		background-image: url(../img/header_bg01_sp.png);
		height: 70px;
	}

	header #logo{
		top: 10px;
	}

	header #logo img{
		width: 70px;
		height: 70px;
	}

	header #menu{
		width: 100%;
		font-size: 12px;
		color: #fff;
		padding-top: 0px;
		top: 50px;
		z-index: 9999;
		display: none;
		position: absolute;
	}

	header #menu li{
		width: 100%;
		padding: 0px;
		border: 0.5px solid #fff;
		box-sizing: border-box;
	}

	header #menu li:nth-child(2n+1){
		border-left-width: 0px;
	}

	header #menu li:nth-child(2n){
		border-right-width: 0px;
	}

	header #menu li a{
		background: #623700;
		background: rgba(98,55,0,0.9);
		padding: 15px 8px;
		text-align: left;
	}

	header #menu li a:after{
		content: "\f105";
		font-family: FontAwesome;
		float: right;
	}

	header #menu li img{
		display: none;
	}

	header #menu li span{
		display: inline-block;
	}

	header #menu #headerLink01,
	header #menu #headerLink04{
		margin-left: 0px;
	}

	header #menubtn{
		width: 50px;
		height: 50px;
		position: absolute;
		top: 5px;
		right: 5px;
	}
	
	header #menubtn div{
		margin: 0 auto;
		margin-top: 10px;
		width: 40px;
		height: 28px;
		position: relative;
	}
	
	header #menubtn span {
		transition: all .4s;
	}
	
	header #menubtn span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 5px;
		background-color: #623700;
		border-radius: 3px;
	}
	
	header #menubtn span:nth-of-type(1) {
		top: 0px;
	}
	
	header #menubtn span:nth-of-type(2) {
		top: 11.5px;
	}
	
	header #menubtn span:nth-of-type(3) {
		bottom: 0px;
	}
	
	header #menubtn.active span:nth-of-type(1) {
		-webkit-transform: translateY(11.5px) rotate(-45deg);
		transform: translateY(11.5px) rotate(-45deg);
	}
	
	header #menubtn.active span:nth-of-type(2) {
		opacity: 0;
	}
	
	header #menubtn.active span:nth-of-type(3) {
		-webkit-transform: translateY(-11.5px) rotate(45deg);
		transform: translateY(-11.5px) rotate(45deg);
	}
}

/* footer ------------------------------------------------------------------ */

footer{
	background: url(../img/footer_bg01.gif);
	background-size: 100% 100%;
	width: 100%;
	height: 239px;
	margin-top: 120px;
	position: relative;
}

footer #footerWrapper{
	width: 1145px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	padding-top: 30px;
	box-sizing: border-box;
}

footer #ogLogo{
	position: absolute;
	left: 0px;
	top: -35px;
}

footer #pagetop{
	position: absolute;
	right: 0px;
	top: -35px;
}

footer #footerLink{
	color: #fff;
	font-size: 14px;
	margin-top: 25px;
}

footer #footerLink li{
	display: inline-block;
}

footer #footerLink li:first-child:before{
	content: " | ";
}

footer #footerLink li:after{
	content: " | ";
}

footer #footerLink li a span{
	display: inline-block;
}

footer small{
	background: #40b8e6;
	display: block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	text-align: center;
	position: absolute;
	bottom: 0px;
	left: 0px;
	font-size: 14px;
	color: #0190c7;
}

@media screen and (max-width: 600px) {
	footer #footerWrapper{
		width: 100%;
		padding-top: 10px;
	}

	footer{
		background-image: url(../img/footer_bg01_sp.gif);
		background-size: contain;
		background-position: top;
		background-repeat: no-repeat;
		height: auto;
		margin-top: 60px;
	}

	footer #ogLogo{
		width: 62.5px;
		height: 15.5px;
		left: 10px;
		top: -20px;
	}

	footer #pagetop{
		width: 58px;
		height: 58px;
		right: 10px;
		top: -20px;
	}

	footer #footerLink{
		font-size: 10px;
		margin-top: 10px;
		background: #00a0de;
	}

	footer #footerLink li{
		display: block;
		float: left;
		width: 100%;
		height: 30px;
		border: 0.5px solid #00a0de;
		box-sizing: border-box;
		background: #40b8e6;
	}

	footer #footerLink li:nth-child(2n+1){
		border-left-width: 0px;
	}

	footer #footerLink li:nth-child(2n){
		border-right-width: 0px;
	}

	footer #footerLink li:first-child:before,
	footer #footerLink li:after{
		content: "";
	}

	footer #footerLink li a{
		display: block;
		line-height: 30px;
		padding: 0px 8px;
		text-align: left;
	}

	footer #footerLink li a:after{
		content: "\f105";
		font-family: FontAwesome;
		float: right;
	}

	footer small{
		font-size: 9px;
		height: 28px;
		line-height: 28px;
		background: #00a0de;
		color: #fff;
		position: static;
	}
}