@charset "UTF-8";
/* CSS Document */
/*
日本語フォント
font-family: dnp-shueigoginstd-l, sans-serif;
font-weight: 400/600;

英語フォント
font-family: neue-haas-grotesk-display-pr, sans-serif;
font-weight: 400/700;
*/

html,
body {
	padding: 0;
	margin: 0;
	font-family: neue-haas-grotesk-display-pr, dnp-shueigoginstd-l, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
img,svg {
	max-width: 100%;
	border:none;
}
ul,li {
	list-style: none;
	margin: 0;
	padding: 0;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	z-index: 9999;
	background: rgba(255,255,255,0)
}
header h1 {
	width: 15%;
	line-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 2%;
	transform: translate(0,-50%);
	
}

@media only screen and (max-width: 768px)  {
	header h1 {
		width: 50%;

	}
}
/*==========*/
/*ドロワー*/
/*==========*/
.openbtn{
	position: absolute;
	cursor: pointer;
	width: 20px;
	height: 20px;
	right: 2%;
	top: 50%;
	margin-top: -7.5px;
	z-index: 9999;
	display: block;
	/*background: #EEE;*/
}
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
	left: 0;
    height: 2px;
	background: #000;
  }
.openbtn span:nth-of-type(1) {
	top:5px;	
  	width: 100%;
}
.openbtn span:nth-of-type(2) {
	bottom: 5px;
  	width: 100%;
}
/*active*/
.openbtn.active span {
	background: #000;
}
.openbtn.active span:nth-of-type(1) {
    top: 0px;
    left: 0px;
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
}
.openbtn.active span:nth-of-type(2){
    top: 12px;
    left: 0px;
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
}
@media only screen and (max-width: 768px)  {

}

/*メニュー内*/
.menu_area{
	position: fixed;
	top: 0;
	left: 0;
	list-style: none;
    margin:0;
	transform: translateY(-100%);
	transition: 0.5s all 0s ease;
	width: 100%;
	height: auto;
	min-height: auto;
	padding: 0px;
	box-sizing: border-box;
	background: rgba(255,255,255,1);
	overflow-y: scroll;
	display: flex;
	font-size: 12px;
	letter-spacing: 1px;
}
.menu_area.active{
  transform: translateY(0); 
}
@media only screen and (max-width: 768px)  {
	.menu_area{
		display: block;
		padding: 25% 5%;
		height: 100%;
		min-height: 100%;

	}
}


.accordion_area {
	margin:25px;
}
.accordion_area li{
    margin:10px 0;
	font-size: 12px;
	font-weight: 500;
}
.accordion_area li a{
	display: inline-block;
	position: relative;
	color: #000;
	text-decoration: none;
}		
.accordion_area li a:hover::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #000;
}

.link_name {
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: all .5s ease;
}

.accordion_box {
    display: none;
	margin:5px 0;
    padding: 0;
	display: flex;
}
.nav_box {
	margin-right: 20px;
}
@media only screen and (max-width: 768px)  {
	.accordion_area {
		margin:0;
	}
	.accordion_area li{
		margin:20px 0;
		font-size: 14px;
		font-weight: 500;
	}
	.accordion_box {
		display: none;
		margin: 15px 0;
	}	
	.nav_box {
		margin-right: 0px;
		margin-left: 10px;
	}
}
.accordion_child {
	margin:5px;
    padding: 0;
	display: block;
}
@media only screen and (max-width: 768px)  {
	.accordion_child {
		display: none;
		margin: 10px 5px 25px
	}
}

.accordion_link {
	padding: 5px 0;
	font-size: 12px
}
.child_name {
	margin-top: 20px;
	color: #888
}
.child_link {
	padding: 5px;
	font-size: 12px
}
.accordion_area li .accordion_box a {
	color: #888
}
@media only screen and (max-width: 768px)  {
	.accordion_link,.child_link {
		padding: 8px 0;
		font-size: 12px
	}
	.child_name {
		margin-top: 0px;
		color: #000;
	}
	.accordion_area li .accordion_box a {
		color: #000
	}
	.accordion_area .arrow {
		position: relative;
	}
	.accordion_area .arrow::before {
	  border-right: solid 1px #000;
	  border-top: solid 1px #000;
	  content: "";
	  display: block;
	  width: 5px;
	height: 5px;
	  position: absolute;
	  right: 25px;
	  top: 0%;
		bottom: 0;
	  transform: rotate(135deg);
	  transition: transform .3s ease-in-out, top .3s ease-in-out;
	}
	.accordion_area .close::before {
	  top: 45%;
	  transform: rotate(-45deg);
	}
	.inactive {
		opacity: 0.4;
		transition: opacity 0.3s;
	}
}


footer {
	position: relative;
	box-sizing: border-box;
	padding: 25px;
	font-size: 12px;
	letter-spacing: 1px;
}
footer .common_foot {
	position: relative;
}
footer .footer_area {
	width: 50%;
	margin-left: 50%;

}
footer .footer_area li{
    margin:10px 0;
	font-size: 12px;
	font-weight: 500;
}
footer .footer_area li a {
	color: #000;
	text-decoration: none;
}
footer .copyright {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 11px;

}
@media only screen and (max-width: 768px)  {
	footer .footer_area {
		width: 100%;
		margin-left: 0%;
		margin-bottom: 5%;

	}
	footer .copyright {
		position: relative;
		bottom: auto;
		left: auto;
		font-size: 11px;

	}	
	
}