@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
@font-face {
	font-family: "icomoon";
	src: url("/font/icomoon.eot?ynx3hd");
	src:
		url("/font/icomoon.eot?ynx3hd#iefix") format("embedded-opentype"),
		url("/font/icomoon.ttf?ynx3hd") format("truetype"),
		url("/font/icomoon.woff?ynx3hd") format("woff"),
		url("/font/icomoon.svg?ynx3hd#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: "icomoon" !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-arrow:before {
	content: "\e900";
}
.icon-ig:before {
	content: "\e901";
}
.icon-mail:before {
	content: "\e902";
}

html {
	scroll-padding-top: 100px;
	scroll-behavior: smooth;
}
body {
	color: #333333;
	font-size: 15px;
	font-weight: 500;
	line-height: 2;
	font-family:
		"Inter", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
		"メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	outline: none;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}
body.-open {
	overflow: hidden;
}
img,
svg {
	max-width: 100%;
	height: auto;
}
.hovact {
	opacity: 1;
	transition: all 0.3s;
}
.hovact:hover {
	opacity: 0.6;
}
.-ffzen {
	font-family: "Zen Kaku Gothic New", sans-serif;
}
:root {
	--black: #3c3c3c;
	--white: #ffffff;
	--subc: #bcd331;
}
.main_wrapper {
	width: 100%;
}
.main {
	width: 100%;
	background: var(--white);
}
.inner {
	margin: 0 auto;
	padding: 0 20px;
}
.cmnlogo {
	display: flex;
	gap: 1%;
	align-items: baseline;
}
.cmnlogo svg {
	width: 100%;
	height: auto;
}
.cmnlogo_item01 {
	width: 50%;
}
.cmnlogo_item02 {
	width: 49%;
}
.cmnhd {
	padding: 16px 20px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9000;
	width: 100%;
}
.cmnhd.-open {
	background: transparent !important;
}
.cmnhd_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cmnhd_logo {
	width: 108px;
}
.cmnhd_logo_item01 {
	transition: all 0.3s;
}
.cmnhd_logo_item02 {
	transition: all 0.3s;
}
.cmnhd.-open .cmnhd_logo_item01 {
	fill: var(--white);
}
.cmnhd.-open .cmnhd_logo_item02 {
	fill: var(--white);
}
.cmnhd_btn {
	width: 60px;
	height: auto;
	aspect-ratio: 1;
	display: block;
	border-radius: 50%;
	position: relative;
	background: var(--white);
	align-self: flex-start;
	box-shadow: 0 0 3px #33333318;
	transition: all 0.3s;
}
.cmnhd_btn.-open {
	background: var(--subc);
}
.cmnhd_btn span {
	display: block;
	width: 23px;
	height: 2px;
	border-radius: 9999px;
	position: absolute;
	right: 50%;
	bottom: 50%;
	background: var(--black);
	transition: all 0.3s;
}
.cmnhd_btn span:first-child {
	transform: translate(50%, calc(50% - 8px));
}
.cmnhd_btn span:nth-child(2) {
	transform: translate(50%, 50%);
}
.cmnhd_btn span:last-child {
	transform: translate(50%, calc(50% + 8px));
}
.cmnhd_btn.-open span:first-child {
	transform: translate(50%, 50%) rotate(45deg);
}
.cmnhd_btn.-open span:nth-child(2) {
	opacity: 0;
}
.cmnhd_btn.-open span:last-child {
	transform: translate(50%, 50%) rotate(-45deg);
}
.cmnnav {
	background: var(--black);
	height: 100dvh;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 8999;
	display: none;
	overflow: scroll;
	padding: 118px 0 20px;
}
.cmnnav_wrap {
}
.cmnnav_cnt {
	margin-bottom: 80px;
}
.cmnnav_link {
	border-bottom: #5d5d5d solid 1px;
	color: var(--white);
	font-size: 17px;
}
.cmnnav_link a {
	display: block;
	padding: 25px 5px;
	line-height: 1.412;
}
.cmnnav_btn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.cmnnav_btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 9999px;
	width: 100%;
	height: 50px;
	background: var(--subc);
}
.cmnnav_btn a .icon-mail {
	font-size: 14px;
}
.cmnnav_btn a .icon-ig {
}
.cmnpagehd {
	padding-top: 130px;
	padding-bottom: 30px;
}
.cmnpagehd_ttl {
	font-weight: bold;
}
.cmnpagehd_ttl p {
	color: var(--subc);
	font-size: 70px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.cmnpagehd_ttl h1 {
	font-size: 22px;
	font-weight: bold;
	line-height: 1.1;
}

.cmnft {
	padding: 70px 0 60px;
	background: var(--black);
	color: var(--white);
}
.cmnft_wrap {
}
.cmnft_hd {
	margin-bottom: 80px;
}
.cmnft_logo {
	fill: var(--white);
	width: 142px;
}
.cmnft_logo_item01 {
}
.cmnft_logo_item02 {
}
.cmnft_nav {
	display: grid;
	grid-template-columns: repeat(2, auto);
	margin-bottom: 85px;
}
.cmnft_nav_cnt {
	display: flex;
	flex-flow: column;
	gap: 20px;
}
.cmnft_nav_cnt a {
	width: fit-content;
}
.cmnft_ig a {
	display: flex;
	font-size: 16px;
	align-items: center;
	gap: 8px;
	margin-bottom: 40px;
}
.cmnft_ig .icon-ig {
	font-size: 15px;
}
.cmnft small {
	font-size: 10px;
}
.vis-pc,
.vis-tb {
	display: none;
}

@media screen and (min-width: 768px) {
	body {
	}
	.cmnhd {
		width: 390px;
		right: 0;
		left: unset;
		transition: all 0.3s;
	}
	.is-scrolled .cmnhd {
		background: var(--black);
	}
	.is-scrolled .cmnhd_logo_item01,
	.is-scrolled .cmnhd_logo_item02 {
		transition: all 0.3s;
		fill: var(--white);
	}
	.wrapper {
		display: flex;
		width: 100%;
		height: 100dvh;
		justify-content: end;
		position: relative;
	}
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
	}
	.bg_item {
		width: 100%;
		height: 100dvh;
		background: url(../img/cmn/bg@2x.jpg) left top / cover;
		position: fixed;
		left: 0;
		top: 0;
	}
	.left {
		padding: 40px 30px;
		position: fixed;
		top: 0;
		z-index: 9000;
		left: 0;
		height: 100%;
		width: calc(100% - 390px);
	}
	.left_wrap {
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		width: 100%;
		max-width: 350px;
		height: 100%;
	}
	.left_hd {
	}
	.left_hd_logo {
		width: 200px;
		fill: #ffffff;
	}
	.left_hd_logo_item01 {
	}
	.left_hd_logo_item02 {
	}
	.left_nav {
	}
	.left_nav_hd {
		font-size: 20px;
		color: var(--subc);
		margin-bottom: 30px;
	}
	.left_nav_cnt {
		display: flex;
		flex-flow: column;
		gap: 20px;
		color: var(--white);
		padding-left: 11px;
		margin-bottom: 80px;
	}
	.left_nav_cnt a {
	}
	.left_nav_cnt a.active {
	}
	.left_nav_btn {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.left_nav_btn a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border-radius: 9999px;
		width: 100%;
		height: 50px;
		background: var(--subc);
	}
	.left_nav_btn a .icon-mail {
		font-size: 14px;
	}
	.left_nav_btn a .icon-ig {
	}
	.main_wrapper {
		width: 390px;
		position: relative;
		z-index: 4;
	}
	.main {
		width: 100%;
		overflow: clip;
	}

	.vis-tb {
		display: block;
	}

	.hide-tb {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.cmnhd {
		right: 50%;
		transform: translateX(50%);
	}
	.wrapper {
		justify-content: center;
	}
	.bg {
	}
	.bg_item {
	}
	.left {
		width: calc(50dvw - 195px);
	}
	.left_wrap {
	}
	.left_hd {
	}
	.left_hd_logo {
	}
	.left_hd_logo_item01 {
	}
	.left_hd_logo_item02 {
	}
	.left_nav {
	}
	.left_nav_hd {
	}
	.left_nav_cnt {
	}
	.left_nav_btn {
	}
	.left_nav_btn a {
	}
	.left_nav_btn a .icon-mail {
	}
	.left_nav_btn a .icon-ig {
	}
	.main_wrapper {
	}
	.main {
	}

	.vis-pc {
		display: block;
	}

	.hide-pc {
		display: none;
	}
}
@media screen and (max-height: 730px) {
	.left {
		overflow: scroll;
	}
	.left_wrap {
		height: max-content;
	}
	.left_hd {
	}
	.left_hd_logo {
		width: 130px;
	}
	.left_hd_logo_item01 {
	}
	.left_hd_logo_item02 {
	}
	.left_nav {
	}
	.left_nav_hd {
		margin-bottom: 20px;
	}
	.left_nav_cnt {
		gap: 10px;
		margin-bottom: 30px;
	}
	.left_nav_cnt a {
	}
	.left_nav_cnt a.active {
	}
	.left_nav_btn {
	}
	.left_nav_btn a {
	}
	.left_nav_btn a .icon-mail {
	}
	.left_nav_btn a .icon-ig {
	}
}
@media print {
}