@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
* {
margin: 0;
padding: 0;
}

/*================================================
 *  一般・共通設定
 ================================================*/
body {
font-size:20px;
color:#333;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;
line-height:1.6;
letter-spacing:1px;
}

a {
	color:#ff8000;
	text-decoration:underline;
}
a:hover {
	color:#008C00;
	text-decoration:none;
	transition:0.5s;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  transition: opacity 0.3s ease-out;
}

main {
	text-align:left;
}

main:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
				}
				
article {
width:1100px;
margin: 0 auto;
}
section {
margin-bottom:60px;
}
section:after {
  content: "";
  clear: both;
  display: block;
}
			
footer {
	width:100%;
	margin:0 auto;
}

.spbr {display: none;}


@media screen and (max-width: 800px) {


body {
font-size:18px;
}

.spbr {display:inherit;}

main {
	width:100%;
	margin: 0;
	padding: 30px 0;
}

section {
	width:100%;
	margin: 0;
	margin-bottom:50px;
box-sizing:border-box;
}
article {
width:100%;
margin:0; 
padding: 0 10px;
box-sizing:border-box; 
}
article img { max-width: 100%;}

h2{
	font-size:20px;
}



}

/*================================================
 *  header
 ================================================*/

header{
		width:1100px;
		height:120px; 
		margin:0 auto;
		padding:20px 0; 
		display: flex;
		justify-content: space-between;
	}
header:after {
	content:"";
	display:block;
	clear:both;
}



@media screen and (max-width: 900px) {

header{
		width:100%;
		height:auto; 
		margin:0;
		padding:10px 0px 0 20px; 
		display:inherit;
		justify-content:center;
		box-sizing:border-box; 
	}
header h1 img { width:80px;} 

}


/* ------------------------------------------------------------
    トップイメージ部分
------------------------------------------------------------ */
.topimage {
	width:1100px;
	margin:0 auto;
}

.secmain {
width:1100px;
height:180px; 
background-image:url(../img/base/mainbg.png);
background-repeat:no-repeat; 
background-size:contain;
padding:120px 0 0 0;
text-align: center;
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
font-size:40px;
font-weight:bold;
color: #403000;
}
.secmain span {
border-bottom:3px solid #333;
}

@media screen and (max-width:979px) {

.topimage {
	width:100%;
	margin:0;
	box-sizing:border-box; 
}
.topimage img { width:100%;}

.secmain {
width:100%;
height:auto; 
background-size:contain;
padding:40px 0;
font-size:20px;
}

}


/*-------------------------------------------------------------------------
							top
-------------------------------------------------------------------------*/

.opbox {
border:#F39939 2px solid;
padding:20px; 
margin-bottom:20px;
}

@media screen and (max-width:800px) {

.opbox {
margin-bottom:30px;
box-sizing:border-box; 
}



}


/*================================================
 *  フッター
 ================================================*/
footer {
	clear:both;
}

footer:before{
	content:"";
	width:100%;
	height:93px;
	display:block;
	background:url(../img/base/footer.png);
	background-repeat:repeat-x; 
}

.copyright {
	clear:both;
	padding:12px 0;
	font-size:14px;
	text-align:center;
	color:#333;
	background:#E3EB98;
}

@media screen and (max-width:800px) {

footer {
	clear:both;
	box-sizing:border-box; 
}

.copyright {
	clear:both;
	padding:12px 0;
	font-size:12px;
}

}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position:fixed;
	bottom:15px;
	right:15px;
}
.totop a {
	display:block;
}
.totop img {
width:70px;
height: auto;
}
.totop img:hover {
opacity: 0.7;
transition: 0.5s;
}
@media screen and (max-width:800px) {
.totop {
	position:fixed;
	bottom:10px;
	right:10px;
}
.totop img {
		width: 50px;
		height: 60px;
}
}


/*-------------------------------------------------------------------------
								Positioning
-------------------------------------------------------------------------*/

/* visual */
.block	{ display:block;}
.inline { display:inline;}
.dn		{ display:none;}
.vh		{ visibility:hidden;}
.spbr { display: none;}
@media screen and (max-width:800px) {
.spbr { display:inherit;}
}

/* position */
.ab		{ position:absolute;}
.rel	{ position:relative;}
.kind	{ text-align:center;}

/* clear,float */
.cb	{ clear:both;}
.cl	{ clear:left;}
.cr	{ clear:right;}

.fl	{ float:left;}
.fr	{ float:right;}

/* align */
.center	{ text-align:center;}
.top	{ vertical-align:top;}
.right	{ text-align:right;}
.left	{ text-align:left;}

/*-------------------------------------------------------------------------
								Font-Style
-------------------------------------------------------------------------*/

.f20	{ font-size:0.2em;}
.f60	{ font-size:0.6em;}
.f70	{ font-size:0.7em;}
.f75	{ font-size:0.75em;}
.f80	{ font-size:0.8em;}
.f90	{ font-size:0.9em;}
.f110	{ font-size:1.1em;}
.f120	{ font-size:1.2em;}
.f125	{ font-size:1.25em;}
.f130	{ font-size:1.3em;}
.f140	{ font-size:1.4em;}
.f150	{ font-size:1.5em;}

.lh125	{ line-height:1.25;}
.lh135	{ line-height:1.35;}
.lh150	{ line-height:1.5;}

.ls_0 { letter-spacing:0;}

.normal	{ font-weight:normal;}
.bold	{ font-weight:bold;}

.indent	{ text-indent:1em; margin:0;}
.strike	{ text-decoration:line-through;}
.italic	{ font-style:italic;}
.ENfont	{ font-family:Arial, Verdana, sans-serif; letter-spacing:0;}
.boader { color:#ED6D10; text-decoration:underline;}

/* color settings */
.red	{ color:#FF0000;}
.blue	{ color:#09f;}
.blue2	{ color:#086CCF;}
.orange	{ color:#ff8800;}
.pink   { color:#FF6666;}
.green  { color:#66CC00;}

/*-------------------------------------------------------------------------
								Margin
-------------------------------------------------------------------------*/

.m1{ margin-bottom:1em;}
.m5{ margin-bottom:5px;}
.m10{ margin-bottom:10px;}
.m15{ margin-bottom:15px;}
.m20{ margin-bottom:20px;}
.m30{ margin-bottom:30px;}
.m50{ margin-bottom:50px;}
.m60{ margin-bottom:60px;}

.mt20{ margin-top:20px;}

.center {text-align: center;}
/*-------------------------------------------------------------------------
							image-Style
-------------------------------------------------------------------------*/

.img_fr { float:right; margin:0 0 20px 20px; width: 40%;}
.img_fr img {max-width: 100%;}

.img_fl { float:left; margin:0 20px 20px 0px; width: 40%;}
.img_fl img {max-width: 100%;}

@media screen and (max-width: 800px) {

.img_fr { float:none; margin:0 0 20px 0px; width:100%;}
.img_fl { float:none; margin:0 0px 20px 0; width:100%;}

}



/*================================================
 *  menu
 ================================================*/

#menubg {
}
.menubtn.sliding-menu {
	background: #ff8800;
	}

.menubtn.sliding-menu .button {
	background-position: 0 -24px;
	}

#headnav {
	position:static;
	display: inline;
	left:0;
	top: 0;
	right:0;
	height:auto;
	overflow:hidden;
 z-index: 9999;
	}
	
/* main-nav */

.main-nav1 {
        list-style:none;
        position: relative;
        z-index: 10000;
         }

.main-nav1 ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
		
}
.main-nav1 ul::after {
	display: block;
	clear: both;
	content: '';
	
}
.main-nav1 ul li {
	position: relative;
	float: left;
	}
.main-nav1 ul li img{
height:90px;
}
.main-nav1 ul li a {
	display: inline-block;
	padding: 2em 1.8em;
	color:#403000;
	line-height: 10px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	font-size: 16px;
}
.main-nav1 ul li a span {
display:none; 
}



.main-nav1 ul ul {
	position: absolute;
	top: 100%;
	left: 0px;
	background:rgba(102, 51, 0, 0.7);
	border:none;

}



.main-nav1 ul ul li {
	float: none;
	margin: 0 auto;
	border-bottom: 1px solid #fff;
	text-align:center;
	
}
.main-nav1 ul ul li:last-child {
	border-bottom:none;
}
.main-nav1 ul ul ul {
	position: absolute;
	top: -2px;
	left: 100%;
}

.main-nav1 ul li ul {
  display: none;
    list-style:none;
}

.main-nav1 ul li ul li a{
  color: #fff;
}

.main-nav1  ul li ul li a:hover {
 color:#fff;
}

.main-nav1  ul li ul li:hover {
 background-color: #2f7f99;
 color:#fff;
 transition:0.3s;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}


@media screen and (max-width: 800px) {

#menubg {
	width:100%;
	height:0px;
	margin:0 auto;
	background:rgba(190, 205, 154, 0.7);
	z-index:100;
	}
	
/* メニューボタン画像ver */
	.menubtn {
		display: none;
		position: fixed;
	 top: 10px;
		right: 20px;
		width: 50px;
		height: 60px;
		background:#A0D8EE;
		cursor: pointer;
		z-index:100000;
	}
	.menubtn:after {
		content: 'MENU';
		position: absolute;
		right: 5px;
		bottom: 2px;
		color: #fff;
		font-size: 11px;
		white-space: nowrap;
	}
	.menubtn-inner {
		padding: 10px 0 0 10px;
	} 
	.button {
		width: 30px;
		height: 24px;
		background: url(../img/base/btn.png) no-repeat top;
	} 	
	
	

	#headnav {
		position: fixed;
		display: block;
		left: auto;
		top: 0;
		right: -200px;
		width: 200px;
		overflow-y: auto;
		padding: 80px 5px 5px;
		box-sizing: border-box;
		height: 100%;
		-webkit-overflow-scrolling: touch;
		-webkit-transition: right .2s;
		transition: right .2s;
		background-color: rgba(255, 255,255, 0.8); 
		z-index: 10000;
		will-change: transform;
	}
	#headnav.sliding-menu {
		right: 0;
	}
	.menubtn {
		display: block;
	}

	
.main-nav1 {
  width: 100%;
  }

	.main-nav1 li{
	padding:0;
	opacity:1;
	display: block;
	float:none;
	width:100%;
	margin-bottom:3px;
	border:none;
	}


.main-nav1 ul li a {
  display: block;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  background-image: url(../img/base/headbg.png);
  border-bottom: 1px solid #fff;
  cursor: pointer;
  padding:20px 0 0;
  margin:auto;
  line-height:50px;
  position: relative;
}

.main-nav1 ul ul {
	position: static;
	top: 100%;
	left: 0px;
	margin:0 auto;
	
}
.main-nav1 li:first-child{
	border:none;
	}

.main-nav1 ul li a:after, .main-nav1 ul li a.active:after{
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 16px;
  color: #2f7f99;
}
.main-nav1 ul li ul {
  display: none;
}
.main-nav1 ul li ul li a{
  display: block;
  color: #fff;
  font-size: 14px;
  background-color:#2f7f99;
  border-bottom: 1px solid #fff;
  line-height:50px;
  position: relative;
}
.main-nav1 ul li ul li a:hover{
  background-color:#ff8800;
}

.main-nav1 ul ul li {
	margin: 0 auto;
	
}

.main-nav1 ul ul li:not(:first-child) {
	
	border: 0px solid #fff;}
	
	
.fixed {
	position: static;
    top: 0;
    left: 0;
    width: 100%;
}
	

}