@charset "utf-8";



/* Gloval Reset*/
html { height: 100%; }
body { 
font-size:17px;
background:#fff;
line-height:1.8; 
height: 100%; 
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
color:#000;
-webkit-text-size-adjust:none;
 /*overflow:hidden;*/}



/*-----------------------------------imgoverを指マークに*/
.imgover { cursor:pointer; }

/*-----------------------------------link*/
a{ outline : 0 ;}
a { text-decoration: underline; color:#000;}
a:hover { text-decoration: none; color:#f15a24; }

/*-----------------------------------マウスオーバーで画像半透明*/
img.icon:hover{
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
}

/*-----------------------------------マージン*/
.marT5 { margin-top: 5px; }
.marT10 { margin-top: 10px; }
.marT15 { margin-top: 15px; }
.marT20 { margin-top: 20px; }
.marT25 { margin-top: 25px; }
.marT30 { margin-top: 30px; }
.marT40 { margin-top: 40px; }
.marB5 { margin-bottom: 5px; }
.marB10 { margin-bottom: 10px; }
.marB15 { margin-bottom: 15px; }
.marB20 { margin-bottom: 20px; }
.marB30 { margin-bottom: 30px; }
.marB40 { margin-bottom: 40px; }
.marB50 { margin-bottom: 50px; }
.marB60 { margin-bottom: 60px; }
.marB70 { margin-bottom: 70px; }
.marB80 { margin-bottom: 80px; }
.marR5 { margin-right: 5px; }
.marR7 { margin-right: 7px; }
.marR8 { margin-right: 8px; }
.marR10 { margin-right: 10px; }
.marR20 { margin-right: 20px; }
.marL10 { margin-left: 10px; }
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.claerB{clear:both;}
.fR{float:right;}
.fL{float:left;}
.small{font-size:11px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f15{font-size:15px;}
.f16{font-size:16px;}
.f17{font-size:17px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.red{color:#f15a24;}
.pink{color:#ed1e79;}
.ore{color:#F39B00;}
.blue{color:#00b4ff;}
.bold{font-weight:bold;}
.w650{width:650px;}
.w260{width:260px;}

.hidari {
  float: left;
  margin-right: 2em;
  margin-bottom: 1em;
}

.migi {
  float: right;
  margin-left: 2em;
  margin-bottom: 1em;
}


.sponly{display: none;}

header{z-index: 10;}

/************
nav
https://mdstage.com/web/jquery/drawer-menu
************/
/*-----------------------------------nav 共通全体レイアウト*/
nav{
 width: 100%;
 height: 70px;
 position: fixed;
 background: #fff;
 z-index:10;
}
#drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}
/*-----------------------------------nav トグル部分*/
.navbar_toggle{
 z-index:9999;
}
.navbar_toggle_icon {
 position: relative;
 display: block;
 height: 2px;
 width: 30px;
 background: #5c6b80;
 -webkit-transition: ease .5s;
 transition: ease .5s;
}
.navbar_toggle_icon:nth-child(1) {
 top: 0;
}
.navbar_toggle_icon:nth-child(2) {
 margin: 8px 0;
}
.navbar_toggle_icon:nth-child(3) {
 top: 0;
}
/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
 top: 10px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 opacity: 0;
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
 top: -10px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
/*-----------------------------------nav ナビゲーション部分*/
#menu{
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
 -webkit-transition:ease .5s;
 transition:ease .5s;
 z-index:1000;
 background:#fff;
}
#menu ul li{
 padding: 2em;
 border-bottom: 1px solid #CCC;
 text-align:center;
}
#menu ul li a{text-decoration:none; display:block;}
#menu ul li a:hover{color:#f15a24;}
/*OPEN時の動き*/
#menu.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}
/*-----------------------------------nav 767pxより大きい場合は、通常のナビゲーションメニュー*/
@media screen and (min-width: 767px) {
header{background:#fff; width:100%; height:100px; position:fixed;}
.navbar_toggle{display:none;}
header nav{width:1050px; margin-left:auto; margin-right:auto; display: flex; left: 50%; transform:translateX(-50%);}
header nav  h1{padding-top:32px; z-index: 1001;}
#menu{
 width: 100%;
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
#menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
 padding-top:20px;
}
#menu ul li{
 padding: 0 1em;
 border-bottom: none;
}
}
/************ nav end ************/


/*-----------------------------------コンテナ*/
#container{width:100%; margin:0 auto; padding-top:100px;}
section{margin-bottom:70px; clear:both;}

/*-----------------------------------footer設定*/
footer{border-top:1px solid #000; height:60px; font-size:15px;}
footer #footerarea{width:1000px; margin-left:auto; margin-right:auto; position:relative;}
footer #footerarea ul{position:absolute; left:0; top:16px;}
footer #footerarea li{float:left; display:block;}
footer #footerarea li a{text-decoration:none;}
footer #footerarea li a:hover{color:#f15a24;}
footer #footerarea #copy{position:absolute; right:0; top:16px;}

#page-top {position: fixed; bottom: 20px; right: 15px;}


/*-----------------------------------下層ページ*/
.pagetitle3{width:100%; margin-bottom:30px; border-bottom:2px solid #007341;}
.pagetitle3 h3{width:1000px; margin-left:auto; margin-right:auto; color:#007341; font-size:23px; background:url(../images/h3_mark.png) no-repeat 20px top; padding-left:80px;}

h4{color: #f15a24; font-size: 20px;}

.area{width:1000px; margin-left:auto; margin-right:auto;}

/* 数字 */
.list01{margin-left:20px;}
.list01 li{list-style:decimal; list-style-position:outside;}

/* ●のみ赤 アンダーライン*/
.list02{margin-left:0px;}
.list02 li{border-bottom:1px solid #C8AA64; list-style: none; padding-top: 10px; padding-bottom: 10px; background: url("../images/mark.png") no-repeat left 16px; padding-left: 30px;}

/* ●のみ赤 背景色あり*/
.list03{margin-left:0px;}
.list03 li{list-style: none; background: url("../images/mark.png") no-repeat 10px 16px #f6edd8; padding: 10px 10px 10px 35px; margin-bottom: 10px;}



/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {

body{ font-size:14px;}
img{
max-width: 100%;
height: auto;
width /***/:auto;　
overflow-x: hidden;
}

.pconly{display: none;}
.sponly{display: block;}


section{margin-bottom:50px; clear:both;}

/*-----------------------------------コンテナ*/
#container{width:100%; margin:0 auto; padding-top: 70px;}


/*-----------------------------------footer設定*/
footer{text-align:center;}
footer #footerarea{width:100%;}
footer #footerarea ul{display:none;}
footer #footerarea #copy{position:static; padding-top:15px;}

/*-----------------------------------下層ページ*/
.pagetitle3{margin-bottom:20px;}
.pagetitle3 h3{width:98%; font-size:17px; padding-left:50px; background-position:5px top; padding-left:35px; background-size: 28px; background-position: left 5px;}

.area{width:95%; margin-left:auto; margin-right:auto;}

h4{color: #f15a24; font-size: 15px;}

/* ●のみ赤 アンダーライン*/
.list02 li{ background-position: left 15px;}

/* ●のみ赤 背景色あり*/
.list03 li{padding: 10px 10px 10px 30px;}

}