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

.pt{}
.pc{}
.ps{}
.tb{display: none;}
.ts{display: none;}
.sp{display: none;}

html,body {
margin: 0;
padding: 0;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
font-feature-settings: "palt";
font-size: 16px;
line-height: 180%;
color: #333333;
background: #FFFFFF;	
}

body.open{
    overflow: hidden;
    height: 100vh;
    touch-action: none;
}

.wapper {
  overflow-x: hidden;
  overflow-y: visible;
}

.wapper_inner {
max-width: 1200px;
margin: 0 auto;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

a {
transition: 0.4s;
color: #333333;
}

a:hover {
opacity: 0.7;
color: #FFFFFFFFFF;
}

img {
margin: 0;
padding: 0;
vertical-align: bottom;
width: auto;
height: auto;
max-width: 100%;
}

ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p {
margin:0;
padding: 0;
list-style: none;
}

p {
text-align: justify;
}

/*--------------------　ヘッダー　--------------------*/

header {
width: 240px;
margin: 30px;
position: fixed;
z-index: 800;
}

header h1 {
margin-bottom: 40px;
padding-left: 10px;
}

header .inbox {
padding-top: 30px;
padding-bottom: 10px;
border-top: 1px solid #003F10;
position: relative;
}

header .inbox:after {
position: absolute;
width: 1px;
top: 50%;
transform: translateY(-50%);
height: calc(100% + 35px);
background-color: #003F10;
content: '';
}

header .inbox:after {
right: 15px;
}

header .inbox ul li {
margin-bottom: 12px;
padding-left: 25px;
line-height: 140%;
position: relative;
}

header .inbox ul li:before {
content: '';
display: inline-block;
position: absolute;
top: 10px;
left: 0;
width: 14px;
height: 2px;
background-color: #003F10;
}

header .inbox ul li ul li {
margin-left: 10px;
padding-left: 10px;
}

header .inbox ul li ul li:before {
top: 12px;
left: 0;
width: 2px;
height: 1px;
}

header .inbox ul li ul li:first-child {
margin-top: 15px;
}

header .inbox ul li a {
color: #333333;
}

header .inbox ul li a:hover {
color: #FF8000;
}

#navArea {
display: none;
}

/*--------------------　フッター　--------------------*/

footer {
	max-width: 1200px;
	margin: 0 auto;
/*padding: 60px 0 40px;
background: #DFEAE3;*/
/*width: calc(100% - 300px);*/
/*padding-top: 4%;
padding-left: 300px;*/
}

footer .inner {
/*max-width: calc(1200px - 330px);*/
width: calc(100% - 300px);
/*padding-top: 4%;*/
padding-left: 300px;
/*width: calc(100% - 330px);
padding-left: 300px;
padding-right: 30px;*/


}

footer .inbox {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
background: #DFEAE3;
padding: 4%;
}

footer .f_logo {
width: 40%;
}

footer .f_logo img {
width: 100%;
height: auto;
max-width: 360px;
}

footer .f_nav {
width: 50%;
}

footer ul:first-child li {
width: 45%;
margin-right: 8%;
float: left;
}

footer ul:first-child li:nth-child(2n) {
margin-right: 0;
}

footer li {
margin-bottom: 10px;
line-height: 160%;
}

footer li a {
text-decoration: none;
color: #333333;
}

footer .copy {
font-size: 80%;
line-height: 140%;
	text-align: center;
}


/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{
.pt{display: block;}
.pc{display: none;}
.ps{display: none;}
.tb{display: block;}
.ts{display: block;}
.sp{display: none;}

/*--------------------　ヘッダー　--------------------*/

header {
width: 100%;
margin: 30px;
position: static;
z-index: 0;
}

header .inbox {
display: none;
}

header h1 {
padding-left: 0;
}

/*　ハンバーガーメニューボタン　*/
#navArea {
display: block;
}
/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: 100%;
  bottom: 0;
  width: 100%;
/*  background: #ffffff;*/
color:#FFF;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
transition:
opacity 0.5s ease,
transform 0.5s ease;
  z-index: 3;
opacity: 0.01;
}
.open nav {
  left: 0;
  opacity: 1;
}

nav .inner {
}

nav .inner .nav_logo {
margin-bottom: 25px;
padding: 15px 10px 15px;
text-align: center;
border-bottom: solid 1px #FFF;
}

nav .inner .nav_logo img {
max-width: 160px;
width: 36%;
 filter: brightness(1) invert(0);
}

nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0 20px;
}
nav .inner ul li {
/*margin-bottom: 20px;*/
padding-left: 25px;
line-height: 140%;
position: relative;
  color: #FFF;

}
	
nav .inner ul li:nth-child(1),	
	nav .inner ul li:nth-child(2) {
		padding-top: 10px;	
	}	

nav .inner ul li:before {
content: '';
display: inline-block;
position: absolute;
top: 18px;
left: 0;
width: 14px;
height: 2px;
background-color: #FFF;
}

nav .inner ul li ul {
  padding: 0;
}

nav .inner ul li ul li {
margin-left: 10px;
padding-left: 10px;
}

	
	
nav .inner ul li ul li:before {
top: 22px;
left: 0;
width: 2px;
height: 1px;
}

nav .inner ul li ul li:first-child {
/*margin-top: 15px;*/
}

nav .inner ul li ul li:nth-child(1),	
	nav .inner ul li ul li:nth-child(2) {
		padding-top: 0px;	
	}	
	
nav .inner ul li a {
  display: block;
  color: #FFF;
  transition-duration: 0.2s;
	padding-top: 10px;
	padding-bottom: 10px;
}

nav .inner ul li a:hover {
color: #FFEAA3;
}

@media screen and (max-width: 767px) {
  nav {
    /*left: -220px;*/
/*    width: 220px;*/
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
transition:
opacity 0.5s ease,
transform 0.5s ease;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #003F10;
  border-radius: 4px;
transition:
opacity 0.5s ease,
transform 0.5s ease;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
opacity: 0.01;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
transition:
opacity 0.5s ease,
transform 0.5s ease;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #003F10;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}

/*--------------------　フッター　--------------------*/

footer .inner {
width: 100%;
padding: 0 0px;
	text-align: center;
box-sizing: border-box;
}

footer .inbox {
display: block;
}

footer .f_logo {
margin-bottom: 30px;
}

footer .f_nav {
width: 100%;
}

footer ul:first-child li {
width: 48%;
margin-right: 4%;
}
}


/* スマホ設定  768 以下*/
@media screen and (max-width:767px)
{
.pt{display: none;}
.pc{display: none;}
.ps{display: block;}
.tb{display: none;}
.ts{display: block;}
.sp{display: block;}

/*--------------------　ヘッダー　--------------------*/

header h1 {
width: 140px;
}



header .inbox {
display: none;
}

/*--------------------　フッター　--------------------*/

footer {
padding: 5% 0 0%;
}

footer .f_logo {
width: 240px;
margin: 0 auto 0px!important;
}

footer .f_nav ul:first-child {
display: none;
}

footer .f_nav li {
text-align: center;
}

footer .copy {
font-size: 60%;
margin-top: 30px;
text-align: center;
}
}