@charset "utf-8";
:root {
/* 共通設定 */
	--color--black: #000000;
}
a {
	display: block;
}
body {
	min-height: 100vh;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	color: #000000;
	font-family: "Bakbak One", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8;
	letter-spacing: 0.05em;
/*	font-feature-settings: "palt";*/
}
body.scroll-stop {
	overflow: hidden;
}
main{
	overflow: hidden;
}

				/* 開く時の処理 */
				.open .hbg_btn_line {
					animation: hbg_btn-line-open .4s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
				}
					@keyframes hbg_btn-line-open {
						0% {
							background-color: rgba(60, 70, 80, 1);
						}
						60% {
							background-color: rgba(60, 70, 80, 1);
						}
						61% {
							background-color: rgba(60, 70, 80, 0);
						}
						100% {
							background-color: rgba(60, 70, 80, 0);
						}
					}
					.open .hbg_btn_line::before {
						animation: hbg_btn-line_before-open .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
					.open .hbg_btn_line::after {
						animation: hbg_btn-line_after-open .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
						@keyframes hbg_btn-line_before-open {
							0% {
								top: -7px;
								transform: translate(0%,0%);
							}
							60% {
								top: 0px;
								transform: translate(0%,0%) rotate(0deg);
							}
							61% {
								top: 0px;
							}
							100% {
								top: 0px;
								transform: translate(0%,0%) rotate(45deg);
							}
						}
						@keyframes hbg_btn-line_after-open {
							0% {
								bottom: -7px;
								transform: translate(0%,0%);
							}
							60% {
								bottom: 0px;
								transform: translate(0%,0%) rotate(0deg);
							}
							61% {
								bottom: 0px;
							}
							100% {
								bottom: 0px;
								transform: translate(0%,0%) rotate(-45deg);
							}
						}
				/* 閉じる時の処理 */
				.close .hbg_btn_line {
					animation: hbg_btn-line-close .4s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
				}
					@keyframes hbg_btn-line-close {
						0% {
							background-color: rgba(60, 70, 80, 0);
						}
						60% {
							background-color: rgba(60, 70, 80, 0);
						}
						61% {
							background-color: rgba(60, 70, 80, 1);
						}
						100% {
							background-color: rgba(60, 70, 80, 1);
						}
					}
					.close .hbg_btn_line::before {
						animation: hbg_btn-line_before-close .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
					.close .hbg_btn_line::after {
						animation: hbg_btn-line_after-close .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
						@keyframes hbg_btn-line_before-close {
							0% {
								top: 0px;
								transform: translate(0%,0%) rotate(45deg);
							}
							60% {
								top: 0px;
							}
							61% {
								top: 0px;
								transform: translate(0%,0%) rotate(0deg);
							}
							100% {
								top: -7px;
								transform: translate(0%,0%);
							}
						}
						@keyframes hbg_btn-line_after-close {
							0% {
								bottom: 0px;
								transform: translate(0%,0%) rotate(-45deg);
							}
							60% {
								bottom: 0px;
							}
							61% {
								bottom: 0px;
								transform: translate(0%,0%) rotate(0deg);
							}
							100% {
								bottom: -7px;
								transform: translate(0%,0%);
							}
						}

/* PC ================================================== */
@media all and (min-width: 769px){
.tablet,.sp {display: none;}
.pc {display: inline-block;}
.view_sp {display: none;}
.view_tablet {display: none;}
.view_pc {display: block;}
body {}
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}
}

/* Tablet ================================================== */
@media all and (max-width: 768px){
.pc,.sp {display: none;}
.tablet {display: inline-block;}
.view_pc {display: none;}
.view_sp {display: none;}
.view_tablet {display: block;}
body {}
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}
}

/* SP ================================================== */
@media all and (max-width: 575px){
.pc,.tablet {display: none;}
.sp {display: inline-block;}
.view_pc {display: none;}
.view_tablet {display: none;}
.view_sp {display: block;}
body {}
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}
}