@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:500;
	font-style: normal;
	font-size:18px !important;
	line-height:1.7em;
	color:#000;
	background:#F8F7F4;
	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;
}

img {
	display:block;
	max-width:100%;
	height:auto;
}

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

.f_mi {
  font-weight:500;
}
.f_bi {
  font-size:calc(100% * 1.25);
  font-weight:600;
  margin-left:0.2em;
}

.f_noto {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.f_zen {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.f_tbr {
font-family: "fot-tsukubrdgothic-std", sans-serif;
  font-weight: 400;
  font-style: normal;
}


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:80px; */
	height:auto;
	position:fixed;
	top:0;
	z-index:9999;
	background:none;
	box-sizing:border-box;
	padding:0 !important;
}
#head_wrap {
	width:100%;
	max-width:100%;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align:center;
}
#head_wrap #h_logo {
	display:block;
	width:100%;
	position:absolute;
	top:0;
}
#head_wrap #h_logo > span {
	display:block;
	width:100% !important;
	max-width:80px !important;
	margin:15px auto;
	opacity: 1;
	transition: .5s;
}
#head_wrap #h_logo.logohide > span {
	opacity: 0;
	transition: .5s;
}
#head_wrap #h_menu {
	width:80px;
	height:80px;
	position:absolute;
	top:0;
	right:0;
	left:auto;
}
@media only screen and (max-width: 849px) {
#head_wrap #h_logo > span {
	display:block;
	width:100% !important;
	max-width:52px !important;
	margin:15px auto;
	opacity: 1;
	transition: .5s;
}
#head_wrap #h_menu {
	width:60px;
	height:60px;
	position:absolute;
	top:0;
	right:0;
	left:auto;
}
}


/* _______________________________ */

	/* nav */
/* _______________________________ */

.drawer {}
.drawer__btn {
	position: absolute;
	top: 50%;
	left: 0%;
	z-index: 99999 !important;
	width: 80px;
	height: 80px;
	border-left:2px solid #333333;
	border-bottom:2px solid #333333;
	background-color:#BA5767;
	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: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transition-duration: .3s;
}
.drawer__btn span:nth-child(1) { transform: translate(-50%, -12px); }
.drawer__btn span:nth-child(2) { transform: translate(-50%, -50%); }
.drawer__btn span:nth-child(3) { transform: translate(-50%, 12px); }

.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__btn.active {
	border-left:0px solid #333333;
	border-bottom:0px solid #333333;
}


.drawer__menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99998 !important;
	width: 43.9%;
	height: 100vh;
	overflow-y: auto;
	background-color: #BA5767;
	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;
}
#head_wrap .menu_list li {
	width:80%;
	max-width:360px;
	border:2px solid #333333;
	background:#fff;
	border-radius:20px;
	box-sizing:border-box;
	padding:1.0em 0;
	margin:1.0em auto;
}
#head_wrap .menu_list li:nth-of-type(1) {
	margin:5.0em auto 1.0em auto;
}
#head_wrap .menu_list li a {
	display:block;
}


.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;
}


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

.drawer__btn {
	position: absolute;
	top: 50%;
	left: 0%;
	z-index: 99999 !important;
	width: 60px;
	height: 60px;
	background-color:#BA5767;
	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: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transition-duration: .3s;
}
.drawer__menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99998 !important;
	width: 80%;
	height: 100vh;
	overflow-y: auto;
	background-color: #BA5767;
	transition-duration: .3s;
	transform: translateX(100%);
	opacity: 0;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.35);
}
#head_wrap .menu_list {
	box-sizing:border-box;
	padding:70px 1.0em 0 1.0em;
}
#head_wrap .menu_list li {
	width:90%;
	max-width:270px;
	border:2px solid #333333;
	background:#fff;
	border-radius:20px;
	box-sizing:border-box;
	padding:1.2em 0;
	margin:1.0em auto;
}
#head_wrap .menu_list li:nth-of-type(1) {
	margin:0 auto 1.0em auto;
}
#head_wrap .menu_list li a {
	display:block;
}
#head_wrap .menu_list li:hover:after {
	opacity:0.7;
}
}


@media only screen and (max-width: 498px) {
#head_wrap .menu_list li {
	width:85%;
	max-width:270px;
	border:2px solid #333333;
	background:#fff;
	border-radius:15px;
	box-sizing:border-box;
	padding:1.5em 0;
	margin:1.0em auto;
}
}


/* _______________________________ */


footer {
	background:#fff;
	color:#000;
	height:250px;
	padding:2.0em 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 #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 #f_copyright {
	width:100%;
	margin-top: auto;
	box-sizing:border-box;
	padding:0.5em 5%;
}
footer #f_copyright p {
	font-size:90%;
}
}