@charset "UTF-8";

body {
	position: relative;
	min-width: 960px;
	min-height: 100vh;
	background-color: var(--color-base);
}

.bg {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-image: url(../img/home/hero-bg@2x.jpg);
	background-position: 0 0;
	background-size: 2860px 1235px;
	transform: translateZ(1px);
	animation: bg-scroll 40s linear infinite;
	will-change: background-position, opacity;
	content-visibility: auto;
}

body.-load .bg {
	opacity: 1;
	transition: opacity 1s 1s;
}

.rotate {
	display: inline-flex;
	flex-direction: column;
	transform: rotate(calc(var(--rotate) * -1));
	will-change: transform;
}

.wrapper {
	position: relative;
	z-index: 10;
	overflow: revert-layer;
}

.hero {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	position: sticky;
	top: 0;
	min-height: 800px;
	transition: opacity 0.3s;
}

body.-logo-hide .hero {
	opacity: 0;
}

.hero_cnt {
	animation-delay: 0.5s;
}

.hero_en {
	font-size: 18px;
	letter-spacing: 0.02em;
}

.hero_logo {
	margin-top: -24px;
}

.main {
	overflow: hidden;
}

.intro {
	position: relative;
	z-index: 1;
	/* padding-top: 269px; */
	/* padding-bottom: 72px; */
}

.intro_wrap {
	display: block;
	position: relative;
	z-index: 10;
	padding-top: 269px;
	padding-bottom: 72px;
}

.intro_bg {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	width: 1124px;
	height: 1516px;
	transform: translateX(-54.7%);
}

.intro_bg > img {
	max-block-size: none;
	max-inline-size: none;
}

.intro_hd {
	flex-direction: row-reverse;
	gap: 20px;
	position: absolute;
	top: 142px;
	left: 50%;
	z-index: 10;
	margin-left: 257px;
	line-height: 1;
}

.intro_hd_en {
	letter-spacing: 0.04em;
	writing-mode: vertical-lr;
}

.intro_hd_ttl {
}

.intro_body {
	position: relative;
	z-index: 10;
	max-width: 780px;
	margin: 0 auto;
}

.intro_text {
	gap: 1em;
	font-size: 17px;
}

.hands {
	position: relative;
	z-index: 10;
	padding-top: 142px;
	padding-bottom: 72px;
}

.hands_bg {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	width: 1602px;
	height: 2792px;
	transform: translateX(-58%);
}

.hands_bg > img {
	max-block-size: none;
	max-inline-size: none;
}

.hands_hd {
	position: relative;
	z-index: 10;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 calc(45/1440*100%);
	line-height: 1;
}

.hands_hd_ttl {
}

.hands_hd_en {
	margin-top: 20px;
}

.hands_body {
	position: relative;
	z-index: 10;
	max-width: 1640px;
	margin: 80px auto 0;
	padding: 0 calc(45/1440 *100%);
}

.hands_list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 50px calc(45/1440 *100%);
}

.hands_item {
	cursor: pointer;
}

.hands_item:hover {
	user-select: none;
}

.hands_card {
	display: inline-flex;
	flex-direction: column;
	position: relative;
	padding: 18px 15px 34px;
	border-radius: 15px;
	background: var(--color-base-light);
	line-height: 1.5;
	transition: transform 0.2s;
}

.hands_item:hover .hands_card {
	transform: rotate(calc(var(--rotate) + 3deg)) scale(1.05);
}

.hands_card_no {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	top: -36px;
	right: -14px;
	width: 93px;
	height: 103px;
	padding-right: 14px;
	padding-bottom: 26px;
	background-image: url(../img/home/hand.svg);
	background-repeat: no-repeat;
	font-size: 21px;
	line-height: 1;
	transform: rotate(calc(var(--rotate) * -1));
}

.hands_card_img {
}

.hands_card_img > img {
	height: auto;
}

.hands_card_cap {
	text-align: center;
}

.hands_card_ttl {
	font-size: min(20px,1.6vw);
}

.hands_card_en {
	margin-top: 3px;
	font-size: min(13px,1.1vw);
}

.hands_comming {
	margin-top: 35px;
	padding-left: 21%;
	font-size: 18px;
}

.popup {
	visibility: hidden;
	opacity: 0;
	max-width: 970px;
	padding: 0;
	overflow: visible;
	border: 0;
	background: none;
	transition: opacity 0.3s, visibility 0s 0.3s;
}

.popup.-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.3s, visibility 0s 0s;
}

.popup::backdrop {
	visibility: hidden;
	opacity: 0;
	background: rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s, visibility 0s 0.3s;
}

.popup.-open::backdrop {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.3s, visibility 0s 0s;
}

.popup_wrap {
	position: relative;
	padding: 45px 0 66px;
	border-radius: 20px;
	background: var(--color-base-light);
}

.popup_slide {
}

.popup_slide_list {
}

.popup_item {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	gap: 45px;
	position: relative;
	max-width: 100%;
	padding: 0 45px 0 75px;
}

.popup_item_img {
	flex-shrink: 0;
}

.popup_item_cnt {
	padding-top: 36px;
}

.popup_item_hd {
	position: relative;
	padding-left: 80px;
	line-height: 1.4;
}

.popup_item_hd_no {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	top: -24px;
	left: -30px;
	width: 93px;
	height: 103px;
	padding-right: 14px;
	padding-bottom: 19px;
	background-image: url(../img/home/hand.svg);
	background-repeat: no-repeat;
	font-size: 21px;
}

.popup_item_hd_cnt {
}

.popup_item_ttl {
	font-size: 24px;
	word-break: auto-phrase;
}

.popup_item_en {
	margin-top: 8px;
	font-size: 13px;
}

.popup_item_body {
	margin-top: 40px;
	font-size: 15px;
	line-height: 2;
}

.popup_item_text {
}

.popup_item_link {
	margin-top: 24px;
	line-height: 1;
}

.popup_item_link > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-accent);
}

.popup_item_link > a::before {
	content: "";
	width: 44px;
	height: 24px;
	background-image: url(../img/home/popup_url.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform 0.2s;
}

/* .popup_item_link > a:hover::after {
	transform: translateX(5px);
	transform-origin: right;
} */

.popup_item_link > a > span {
	display: inline-block;
	position: relative;
	padding-bottom: 3px;
}

.popup_item_link > a > span::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color-accent);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.2s;
}

.popup_item_link > a:hover > span::after {
	transform: scaleX(0);
	transform-origin: right;
}

.popup_arrow {
	position: absolute;
	top: 50%;
	cursor: pointer;
	transform: translateY(-50%);
}

.popup_arrow.-prev {
	right: 100%;
	margin-right: 45px;
}

.popup_arrow.-next {
	left: 100%;
	margin-left: 45px;
}

.popup_arrow > svg {
	transition: transform 0.2s;

	max-inline-size: none;
}

.popup_arrow.-prev:hover > svg {
	transform: translateX(-6px);
}

.popup_arrow.-next:hover > svg {
	transform: translateX(6px);
}

.popup_close {
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
}

.popup_close > svg {
	transition: transform 0.2s;

	max-inline-size: none;
}

.popup_close:hover > svg {
	transform: scale(1.1);
}

@media screen and (max-width:991.98px) {
	body {
	}

	.bg {
	}

	body.-load .bg {
	}

	.rotate {
	}

	.wrapper {
	}

	.hero {
	}

	.hero_cnt {
	}

	.hero_en {
	}

	.hero_logo {
	}

	.main {
	}

	.intro {
	}

	.intro_bg {
	}

	.intro_wrap {
	}

	.intro_hd {
	}

	.intro_hd_en {
	}

	.intro_hd_ttl {
	}

	.intro_body {
	}

	.intro_text {
	}

	.hands {
	}

	.hands_bg {
	}

	.hands_hd {
	}

	.hands_hd_ttl {
	}

	.hands_hd_en {
	}

	.hands_body {
	}

	.hands_list {
	}

	.hands_item {
	}

	.hands_item:hover {
	}

	.hands_card {
	}

	.hands_item:hover .hands_card {
	}

	.hands_card_no {
	}

	.hands_card_img {
	}

	.hands_card_cap {
	}

	.hands_card_ttl {
	}

	.hands_card_en {
	}

	.hands_comming {
	}

	.popup {
	}

	.popup.-open {
	}

	.popup::backdrop {
	}

	.popup.-open::backdrop {
	}

	.popup_wrap {
	}

	.popup_slide {
	}

	.popup_slide_list {
	}

	.popup_item {
	}

	.popup_item_img {
	}

	.popup_item_cnt {
		margin-top: 15px;
		padding-top: 0;
	}

	.popup_item_hd {
	}

	.popup_item_hd_no {
	}

	.popup_item_hd_cnt {
	}

	.popup_item_ttl {
	}

	.popup_item_en {
	}

	.popup_item_body {
	}

	.popup_item_text {
	}

	.popup_item_link {
	}

	.popup_item_link > a {
	}

	.popup_item_link > a::after {
	}

	.popup_item_link > a:hover::after {
	}

	.popup_item_link > a > span {
	}

	.popup_item_link > a > span::after {
	}

	.popup_item_link > a:hover > span::after {
	}

	.popup_arrow {
	}

	.popup_arrow.-prev {
	}

	.popup_arrow.-next {
	}

	.popup_arrow > svg {
	}

	.popup_arrow.-prev:hover > svg {
	}

	.popup_arrow.-next:hover > svg {
	}

	.popup_close {
	}

	.popup_close > svg {
	}

	.popup_close:hover > svg {
	}
}

@media screen and (max-width:767.98px) {
	body {
		min-width: 0;
	}

	.bg {
		background-image: url(../img/home/hero-bg-sp@2x.jpg);
		background-size: 1440px 735px;
		animation: bg-scroll-sp 40s linear infinite;
		will-change: background-position, opacity;
	}

	body.-load .bg {
		opacity: 1;
		transition: opacity 1s 1s;
	}

	.rotate {
		transform: rotate(calc(var(--rotate-sp) * -1));
	}

	.wrapper {
	}

	.hero {
		min-height: 100dvh;
		padding: 0 calc(30/375*100%);
	}

	.hero_cnt {
	}

	.hero_en {
		font-size: 9px;
	}

	.hero_logo {
		margin-top: 0;
	}

	.main {
	}

	.intro {
	}

	.intro_bg {
		transform: translateX(-36%);
	}

	.intro_wrap {
		max-width: 480px;
		margin: 0 auto;
		padding: 120px calc(22/375*100%) 35px calc(37/375*100%);
	}

	.intro_hd {
		position: relative;
		top: 0;
		left: 0;
		z-index: 10;
		margin-left: 0;
	}

	.intro_hd_en {
		display: none;
	}

	.intro_hd_ttl {
	}

	.intro_body {
	}

	.intro_text {
		margin-top: 20px;
		font-size: 13px;
	}

	.hands {
		padding-top: 90px;
		padding-bottom: 0;
	}

	.hands_bg {
		transform: translateX(-25%);
	}

	.hands_hd {
		padding: 0 calc(40/375*100%);
	}

	.hands_hd_ttl {
	}

	.hands_hd_en {
		display: none;
	}

	.hands_body {
		margin-top: 50px;
		padding: 0 calc(30/375*100%) 80px;
		background-color: var(--color-base);
	}

	.hands_list {
		grid-template-columns: 1fr;
	}

	.hands_item {
	}

	.hands_item:hover {
	}

	.hands_card {
	}

	.hands_item:hover .hands_card {
	}

	.hands_card_no {
		width: 82px;
		height: 96px;
		background-size: contain;
		font-size: 18px;
	}

	.hands_card_img {
	}

	.hands_card_cap {
	}

	.hands_card_ttl {
		font-size: min(20px,5.6vw);
	}

	.hands_card_en {
		font-size: min(13px,3.5vw);
	}

	.hands_comming {
		margin-top: 40px;
		padding-left: 0;
		font-size: 15px;
	}

	.popup {
		/* border-radius: 15px; */
		max-width: calc(100% - 60px);
	}

	.popup.-open {
	}

	.popup::backdrop {
	}

	.popup.-open::backdrop {
	}

	.popup_wrap {
		padding: 0;
	}

	.popup_slide {
		max-height: calc(100dvh - 60px);
		overflow: auto;
		border-radius: 15px;
	}

	.popup_slide_list {
	}

	.popup_item {
		display: block;
		position: relative;
		padding: 15px 15px 60px;
	}

	.popup_item_img {
		text-align: center;
		max-width: 70%;
		margin: 0 auto;
	}

	.popup_item_cnt {
		padding: 0 15px;
	}

	.popup_item_hd {
		/* position: static; */
		padding-left: 56px;
	}

	.popup_item_hd_no {
		position: absolute;
		top: auto;
		bottom: -8px;
		left: -13px;
		width: 60px;
		height: 66px;
		padding-right: 9px;
		padding-bottom: 10px;
		background-size: contain;
		font-size: 16px;
		rotate: -3deg;
	}

	.popup_item_hd_cnt {
	}

	.popup_item_ttl {
		font-size: 18px;
	}

	.popup_item_en {
		margin-top: 5px;
		font-size: 12px;
	}

	.popup_item_body {
		margin-top: 26px;
		font-size: 13px;
	}

	.popup_item_text {
		line-height: 1.75;
	}

	.popup_item_link {
	}

	.popup_item_link > a {
	}

	.popup_item_link > a::before {
		width: 33px;
		height: 18px;
	}

	.popup_item_link > a > span {
	}

	.popup_item_link > a > span::after {
	}

	.popup_item_link > a:hover > span::after {
	}

	.popup_arrow {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px;
		padding: 10px 0;
	}

	.popup_arrow.-prev {
		margin-right: 0;
	}

	.popup_arrow.-next {
		margin-left: 0;
	}

	.popup_arrow > svg {
		width: 12px;
	}

	.popup_arrow > svg path {
		stroke-width: 4;
	}

	.popup_arrow.-prev:hover > svg {
		transform: translateX(0px);
	}

	.popup_arrow.-next:hover > svg {
		transform: translateX(0px);
	}

	.popup_close {
		top: 0;
		right: 0;
		padding: 18px;
	}

	.popup_close > svg {
		width: 20px;

		max-inline-size: 100%;
	}

	.popup_close > svg path {
		stroke-width: 2;
	}
}