@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;400;700;900&display=swap');

:root {
  --vw: 1vw;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
    box-sizing: border-box !important;
}

a { text-decoration:none; }
ol,ul,li { list-style:none; }
img,body img { max-width:100% !important; height:auto; padding:0; margin:0; vertical-align:bottom; }

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
	font-style: normal;
	font-size:16px !important;
	line-height:1.7em;
	color:#000;
	letter-spacing:0.05em;
	box-sizing: border-box !important;
}
body a,
body a:visited{
    color: inherit !important;
}
body a:hover{
    text-decoration:none !important;
    opacity:0.7;
}
wrapper {
	display:flex;
	flex-direction:column;
	min-height: 100vh;
}

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

main { flex: 1; }

@media only screen and (max-width: 849px) {
.pc { display:none !important; }
.sp { display:block !important; }
body {
	font-size:2.8vw !important;
}
}

.flex { display:flex; align-items:center; }
.flex.fl_w { flex-wrap:wrap; }
.flex.fl_sp { justify-content:space-between; }
.flex.fl_c { justify-content:center; }
.flex.fl_st { justify-content:flex-start; }
.flex.fl_e { justify-content:flex-end; }
.flex.fl_dc { flex-direction:column; }

.f_c { text-align:center; }
.f_l { text-align:left; }
.f_bo { font-weight:bold; }

.f_bl { color:#2a98c3; }


/* _______________________________ */


header {
	width:100%;
	height:auto;
	position:fixed;
	top:0;
	z-index:9999;
	background:#fff;
	box-sizing:border-box;
	padding:0 !important;
}
#head_wrap {
	width:95%;
	margin:0 auto;
	padding:1.0em 0;
}
#head_wrap #h_logo { width:15%; }
#head_wrap #h_menu { width:83%; }

#head_wrap #h_logo img {
	display:block;
	width:100% !important;
	max-width:250px !important;
	margin:auto auto;
}
#head_wrap #h_menu ul li {
	box-sizing:border-box;
	padding:0.3em 1.0em;
}


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

header {
	background:#fff;
}
#head_wrap {
	width:95%;
	margin:0 auto;
	padding:2.0em 0;
	position:relative;
}
#head_wrap #h_logo {
	width:33%;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#head_wrap #h_menu { width:18%; }

#head_wrap .menu_list {
	box-sizing:border-box;
	padding:50px 1.0em 0 1.0em;
}
#head_wrap .menu_list li {
	line-height:2.7em;
	box-sizing:border-box;
	padding:0 0 0 0.3em;
	border-top:1px solid #ccc;
	position:relative;
}
#head_wrap .menu_list li a {
	display:block;
}
#head_wrap .menu_list li:nth-last-of-type(1) {
	border-bottom:1px solid #ccc;
}
#head_wrap .menu_list li:after {
	content:"";
	display:block;
	width:0.7em;
	height:calc(0.7em * 1.75);
	background:url(../images/i_n-arrow.svg) no-repeat;
	background-size:contain;
	position:absolute;
	top:50%;
	right:0.7em;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
#head_wrap .menu_list li:hover:after {
	opacity:0.7;
}


/* _______________________________ */

	/* sp nav */
/* _______________________________ */

.drawer {}
.drawer__btn {
	position: absolute;
	top: 50%;
	right: 2%;
	z-index: 10002;
	width: 45px;
	height: 40px;
	background-color:none;
	border-radius:15%;
	overflow: hidden;
	cursor: pointer;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
.drawer__btn span {
	display: block;
	width: 50%;
	height: 2px;
	background-color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transition-duration: .3s;
}
.drawer__btn span:nth-child(1) { transform: translate(-50%, -8px); }
.drawer__btn span:nth-child(2) { transform: translate(-50%, -50%); }
.drawer__btn span:nth-child(3) { transform: translate(-50%, 7px); }

.drawer__btn.active span:nth-child(1) {
	transform: translate(-50%, 0) rotate(45deg);
}
.drawer__btn.active span:nth-child(2) {
	transform: translate(100%, 0); opacity: 0;
}
.drawer__btn.active span:nth-child(3) {
	transform: translate(-50%, 0) rotate(-45deg);
}


.drawer__menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10001;
	width: 70%;
	height: 100vh;
	overflow-y: auto;
	background-color: #fff;
	transition-duration: .3s;
	transform: translateX(100%);
	opacity: 0;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.35);
}
.drawer__menu.active {
	transform: translateX(0);
	opacity: 1;
}


.drawer__bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 100vh;
	background-color:rgba(0, 0, 0, .7);
	transition-duration: .3s;
	transform: translateX(100%);
	opacity: 0;
	cursor: pointer;
}
.drawer__bg .active {
	transform: translateX(0);
	opacity: 1;
}
}

/* _______________________________ */


footer {
	background:#000;
	color:#fff;
	height:auto;
	padding:2.5em 0 0 0;
	margin-top: auto;
	position:relative;
/*	width:100vw; */
	width: calc( var(--vw) * 100 );
	left:50%;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
}
footer #foot_wrap {
	display:flex;
	flex-direction:column;
	height:auto;
}
footer #foot_menu {
	width:95%;
	margin:0 auto 2.0em auto;
	align-items:stretch;
}
footer #foot_menu #f_logo {
	display:block;
	width:18%;
	border-right:1px solid #fff;
	position:relative;
	margin:0 auto;
}
footer #foot_menu #f_logo a {
	display:block;
	position:relative;
	top:50%;
	left:0%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(x0%, -50%);
	-ms-transform: translate(0%, -50%);
}
footer #foot_menu #f_logo a img {
	display:block !important;
	width:100% !important;
	max-width:150px !important;
	margin:auto auto auto 0;
}
footer #foot_menu #f_menu {
	width:76%;
}
footer #foot_menu #f_menu > ul {
	width:100%;
	height:2.5em;
	flex-wrap:wrap;
	justify-content:flex-start;
	margin:auto auto auto 0;
	text-align:left !important;
	justify-content:flex-start;
}
footer #foot_menu #f_menu > ul > li {
	box-sizing:border-box;
	padding:0 1.0em 0 1.0em;
	font-size:90%;
}
footer #f_copyright {
	width:100%;
	margin-top: auto;
	box-sizing:border-box;
	padding:0.5em 0 1.0em 0;
}
footer #f_copyright p {
	width:100%;
	font-size:90%;
	text-align:center;
}


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

footer #foot_wrap {
}
footer #foot_menu {
	width:90%;
	margin:0 auto 2.0em auto;
	align-items:stretch;
	flex-wrap:wrap;
}
footer #foot_menu #f_logo {
	display:block;
	width:100%;
	border-right:0;
	margin:0 auto 2.5em auto !important;
}
footer #foot_menu #f_logo img {
	display:block !important;
	width:90% !important;
	margin:0 auto !important;
}
footer #foot_menu #f_menu {
	width:100%;
	flex-wrap:wrap;
}
footer #foot_menu #f_menu > ul:nth-of-type(1) {
	width:100%;
	height:auto;
	flex-wrap:wrap;
}
footer #foot_menu #f_menu > ul:nth-of-type(1) li {
	width:100%;
	line-height:2.7em;
	box-sizing:border-box;
	padding:0 0 0 0.3em;
	border-top:1px solid #4d4d4d;
	position:relative;
}
footer #foot_menu #f_menu > ul:nth-of-type(1) li:after {
	content:"";
	display:block;
	width:0.7em;
	height:calc(0.7em * 1.75);
	background:url(../images/i_f-arrow.svg) no-repeat;
	background-size:contain;
	position:absolute;
	top:50%;
	right:0.7em;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
footer #foot_menu #f_menu > ul:nth-of-type(1) li:hover:after {
	opacity:0.7;
}
footer #foot_menu #f_menu > ul:nth-of-type(1) li a {
	display:block;
}
footer #foot_menu #f_menu > ul:nth-of-type(1) li:nth-last-of-type(1) {
	border-bottom:1px solid #4d4d4d;
}
footer #foot_menu #f_menu > ul:nth-of-type(1) li:nth-of-type(1) { order:1; }
footer #foot_menu #f_menu > ul:nth-of-type(1) li:nth-of-type(2) { order:4; }
footer #foot_menu #f_menu > ul:nth-of-type(1) li:nth-of-type(3) { order:2; }
footer #foot_menu #f_menu > ul:nth-of-type(1) li:nth-of-type(4) { order:5; }
footer #foot_menu #f_menu > ul:nth-of-type(1) li:nth-of-type(5) { order:3; }
footer #foot_menu #f_menu > ul:nth-of-type(1) li:nth-of-type(6) { order:6; }

footer #foot_menu #f_menu > ul:nth-of-type(2) {
	width:100%;
	max-width:190px;
	gap:10px 10px;
	justify-content:center;
	margin:3.0em auto 2.0em auto;
}
footer #foot_menu #f_menu > ul:nth-of-type(2) {
	width:100%;
	max-width:15.0em;
	gap:10px 10px;
}
footer #f_copyright {
	width:100%;
	background:#000;
	margin-top: auto;
	box-sizing:border-box;
	padding:0.5em 5%;
}
footer #f_copyright p {
	font-size:90%;
}
}