@charset "utf-8";

/* サイズ設定 */
@media (min-width: 769px) {
	html {
		font-size: min(calc(100vw / ( 1280 / 1 )), 1px);
	}
}
@media (max-width: 768px) {
	html {
		font-size: calc(100vw / ( 450 / 1 ));
	}
}

/* 変数設定 */
:root {
	--white: #fff;
	--black: #333;
	--gray: #ddd;
	--gray2: #bbb;
	--gray3: #f5f5f5;
	--beige: #fdf7ee;
	--lucia-orange: #eeb860;
	--menslucia-green: #002d04;
	--r-red: #ec6d4e;
	--r-green: #3fc7af;
	--r-blue: #3ca9bd;
	--r-blue2: #e5f2fe;
	--r-pink: #de6076;
	--r-orange: #f8a61c;
	--r-yellow: #fad71a;
	--r-gradient: linear-gradient(0deg, var(--r-orange) 0, #efbb5f 100%);
	--m-red: #ea5525;
	--m-green: #4f9c00;
	--m-green2: #e7f1d9;
	--m-blue: #3090bd;
	--m-orange: #ff6000;
	--m-orange2: #ffe7d9;
	--m-yellow: #ffff36;
	--g-green: #98d333;
	--btn-green: #4cc764;
	--btn-green-s: #4d9a5c;
}

/* SET */
body {
	color: var(--black);
	font-size: 16rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.5;
	position: relative;
}
img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
i {
	font-style: normal;
}
u {
	text-decoration: none;
}
a {
	color: var(--black);
}
th,
td {
	border: none;
}
*,
*::before,
*::after {
	box-sizing: border-box
}
.ani_over,
.ani_over::before,
.ani_over::after {
	transition: all .3s ease-out;
}
@media (min-width:769px) {
	article,
	header,
	footer {
		width: 450rem;
		margin-inline: auto;
	}
	article,
	footer {
		position: relative;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	.sp_only {
		display: none !important;
	}
}
@media (max-width: 768px) {
	.pc_only {
		display: none !important;
	}
}

/* 背景 */
.bg_wht {
	background-color: var(--white);
}
.bg_bla {
	background-color: var(--black);
}
.bg_beige {
	background-color: var(--beige);
}
.bg_pink {
	background-color: var(--r-pink);
}
.bg_gre {
	background-color: var(--m-green);
}
.bg_gre2 {
	background-color: var(--m-green2);
}
.bg_blue2 {
	background-color: var(--r-blue2);
}
.bg_btn_gre {
	background-color: var(--btn-green);
}
.bg_l_gra {
	background: var(--r-gradient);
}
/* 色変え */
#invite_r {
	& .bg_blue {
		background-color: var(--r-blue);
	}
	& .bg_ora {
		background-color: var(--r-orange);
	}
}
#invite_m {
	& .bg_red {
		background-color: var(--m-red);
	}
	& .bg_blue {
		background-color: var(--m-blue);
	}
	& .bg_ora {
		background-color: var(--m-orange);
	}
	& .bg_ora2 {
		background-color: var(--m-orange2);
	}
	& .bg_yell {
		background-color: var(--m-yellow);
	}
}

/* 固有カラー */
.bg_lucia {
	background-color: var(--lucia-orange);
}
.bg_mlucia {
	background-color: var(--menslucia-green);
}

/* テキスト */
.en {
	font-family: "Figtree", sans-serif;
	font-weight: 800;
	font-optical-sizing: auto;
	font-style: normal;
}
.fc_bla {
	color: var(--black);
}
.fc_wht {
	color: var(--white);
}
.fc_beige {
	color: var(--beige);
}
.fc_gre {
	color: var(--m-green);
}
.fc_pink {
	color: var(--r-pink);
}
/* 色変え */
#invite_r {
	& .fc_blue {
		color: var(--r-blue);
	}
	& .fc_ora {
		color: var(--r-orange);
	}
}
#invite_m {
	& .fc_red {
		color: var(--m-red);
	}
	& .fc_ora {
		color: var(--m-orange);
	}
	& .fc_yell {
		color: var(--m-yellow);
	}
}
.ta_cnt {
	text-align: center;
}

/* アイコン */
a[target="_blank"]:not([href^="https://invy.jp"]):not([href^="/"]):not([href^="#"]) .fc_wht {
	background: url('../images/icon_blank_w.svg') no-repeat right center / 24rem auto;
	padding-right: 24rem;
}

/* 汎用クラス */
/* 角丸 */
.round {
	border-radius: 100vmax;
}
.round_10 {
	border-radius: 10rem;
}
.round_tp10 {
	border-radius: 10rem 10rem 0 0;
}
.round_bt10 {
	border-radius: 0 0 10rem 10rem;
}
.round_20 {
	border-radius: 20rem;
}
.round_tp20 {
	border-radius: 20rem 20rem 0 0;
}
.round_bt20 {
	border-radius: 0 0 20rem 20rem;
}
.round_40 {
	border-radius: 40rem;
}
.round_tp40 {
	border-radius: 40rem 40rem 0 0;
}
/* 傍点 */
.dot {
	position: relative;

	/* 傍点設定 */
	&::before {
		content: '';
		aspect-ratio: 1 / 1;
		border-radius: 100vmax;
		margin-inline: auto;
		position: absolute;
		inset: 0;
	}
	.fc_wht &::before {
		background: var(--white);
	}
}
/* スラッシュ囲み */
.slash {
	display: inline-block;
	position: relative;

	/* スラッシュ設定 */
	&::before,
	&::after {
		content: '';
		margin-block: auto;
		position: absolute;
		inset: 0 auto;
	}
	&::before {
		left: 0;
		rotate: -20deg;
	}
	&::after {
		right: 0;
		rotate: 20deg;
	}
	.fc_wht &::before,
	.fc_wht &::after,
	&.fc_wht::before,
	&.fc_wht::after {
		background: var(--white);
	}
}
/* 袋文字 */
.outline {
	paint-order: stroke;
}
/* シャドウ */
.shadow {
	box-shadow: 0 0 4rem var(--gray);
}
.shadow_s {
	box-shadow: 0 0 2rem var(--gray);
}
/* フキダシ */
.fukidashi {
	width: 65rem;
	background: url('../images/fukidashi.svg') no-repeat center / 100% auto;
	font-weight: 700;
	line-height: 1.2;
	aspect-ratio: 1 / 1;
	display: grid;
	place-content: center;
	position: absolute;
}
/* アコーディオン開閉 */
.acc-trigger {
	position: relative;
	cursor: pointer;

	&::before,
	&::after {
		content: '';
		width: 20rem;
		height: 2rem;
		margin-block: auto;
		position: absolute;
		inset: 0 auto;
		right: 0;
	}
	&::before {
		rotate: -90deg;
	}
	&.open::before {
		background: transparent !important;
		rotate: 0deg;
	}
	& + .acc-content {
		display: none;
	}
}
/* 見出し */
.sec_ttl {
	text-align: center;
	position: relative;

	/* 背景英字がある場合 */
	&:has(.back_en) {
		padding-top: 90rem;

		& .round,
		& .ttl {
			position: relative;
			z-index: 1;
		}
	}
}
/* 見出し_背景英字 */
.sec_ttl .back_en {
	font-size: 96rem;
	position: absolute;
	inset: 0;
}
/* 見出し_角丸 */
.sec_ttl .round {
	font-size: 18rem;
	font-weight: 900;
	line-height: 35rem;
	padding-inline: 20rem;
	display: inline-block;
}
/* 見出し_テキスト */
.sec_ttl .ttl {
	font-size: 48rem;
	font-weight: 900;

	&:has(small) {
		line-height: 1.2;
	}
	& small {
		font-size: 32rem;
	}

	/* 下線 */
	#invite_r & u {
		background: linear-gradient(0deg, transparent 8rem, var(--r-yellow) 8rem, var(--r-yellow) 16rem, transparent 16rem);
		padding-inline: 13rem;
	}
	#invite_m & u {
		background: linear-gradient(0deg, transparent 8rem, var(--m-yellow) 8rem, var(--m-yellow) 16rem, transparent 16rem);
		padding-inline: 13rem;
	}
}
/* ボックス付き▼テキスト */
.next {
	text-align: center;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	margin-inline: auto;
	position: absolute;
	inset: auto 0;
}
/* フロー▼ */
.arrow_b::after {
	content: '';
	width: 18rem;
	height: 15rem;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	margin-inline: auto;
	position: absolute;
	inset: auto 0;
}

/* ボタン */
.btn {
	display: grid;
	place-content: center;

	/* 招待状を送るボタン */
	&.bg_btn_gre {
		box-shadow: 0 8rem 0 var(--btn-green-s);

		/* ボタンテキスト */
		& span {
			background: url('../images/icon_line.svg') no-repeat left center / 26rem auto;
			font-weight: 700;
			padding-left: 32rem;
		}
	}
}
/* CTAボタン */
.cta .btn {
	width: 356rem;
	height: 80rem;
	border: 4rem var(--white) solid;
	margin-inline: auto;

	/* ボタンテキスト */
	& span {
		font-size: 24rem;
	}
}
/* ボタン矢印 */
.arrow {
	background-image: url('../images/icon_arrow_wr.svg');
	background-repeat: no-repeat;
	background-position: right 10rem center;
	background-size: 19rem auto;

	.btn_row & {
		background-position: right center;
	}
}

/* ゲストページ_フォーム遷移ボタン */
.btns {
	display: grid;

	&.btn_row {
		grid-template-columns: repeat(2, 1fr);
	}
	&.btn_col {
		width: 354rem;
		gap: 16rem;
	}
}
.btns a {
	color: var(--white);
	font-weight: 700;
	border-radius: 10rem;
	position: relative;

	.lucia & {
		background-color: var(--r-orange);
	}
	.menslucia & {
		background-color: var(--menslucia-green);
	}

	article & {
		display: flex;

		&::before {
			content: '';
			margin-block: auto;
			position: absolute;
			inset: 0 auto;
		}
		.lucia &::before {
			width: 34rem;
			height: 45rem;
			background: url('../images/logo_lucia.svg') no-repeat center / 100% auto;
		}
		.menslucia &::before {
			width: 37rem;
			height: 33rem;
			background: url('../images/logo_menslucia.svg') no-repeat center / 100% auto;
		}
		& small {
			font-size: 12rem;
		}
		& span {
			font-size: 18rem;
		}
	}
}
article .btn_row {
	gap: 16rem;
}
article .btn_row a {
	height: 82rem;
	border: 2rem var(--white) solid;
	flex-direction: column;
	justify-content: center;

	.lucia & {
		padding-left: 64rem;
	}
	.menslucia & {
		padding-left: 80rem;
	}
	.lucia &::before {
		left: 20rem;
	}
	.menslucia &::before {
		left: 30rem;
	}
}
.btn_col a {
	height: 78rem;
	padding-left: 72rem;
	align-items: center;

	&::before {
		left: 20rem !important;
	}
	& span {
		margin-left: 8rem;
	}
}

/* アニメーション */
/* 横スクロール */
.loop_wrap {
	display: flex;
	overflow: hidden;

	/* インナー_改行なし */
	& span {
		text-align: left;
		white-space: nowrap;
	}

	/* 流れるテキスト */
	&.scroll_txt {
		font-size: 96rem;
		position: absolute;
		inset: auto 0;

		& span {
			padding-right: .2em;
		}
	}

	/* アニメーション設定 */
	& .ani_loop1 {
		animation: ani-loop1 50s -25s linear infinite;
	}
	& .ani_loop2 {
		animation: ani-loop2 50s linear infinite;
	}
}
@keyframes ani-loop1 {
	from { translate: 100% 0; }
	to { translate: -100% 0; }
}
@keyframes ani-loop2 {
	from { translate: 0 0; }
	to { translate: -200% 0; }
}

/* ヘッダー */
header {
	padding-right: 16rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	inset: 0 0 auto;
	z-index: calc(infinity);

	/* ロゴ */
	& .logo {
		width: 160rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		flex-shrink: 0;

		/* ロゴ_ラッパー */
		& div {
			height: 80rem;
			display: grid;
			place-content: center;
		}

		/* ロゴ画像 */
		& .logo_r img {
			width: 48rem;
		}
		& .logo_m img {
			width: 53rem;
		}
	}

	/* ボタン */
	& .btn {
		width: 210rem;
		height: 48rem;
		border: 2rem var(--white) solid;

		/* ボタンテキスト */
		& span {
			font-size: 14rem;
		}
	}
	/* ゲストページボタン */
	& .btns {
		padding-right: 6rem;
		gap: 8rem;

		& a {
			width: 114rem;
			height: 48rem;
			font-size: 12rem;
			display: grid;
			place-content: center;

			.lucia & {
				filter: drop-shadow(0 8rem 0 #b47814);
			}
			.menslucia & {
				filter: drop-shadow(0 8rem 0 #000200);
			}
		}
	}
}

/* フッター */
footer {
	
	/* プラポリリンク */
	& .privacy_link {
		font-size: 14rem;

		& span {
			background: url('../images/icon_arrow_wr.svg') no-repeat right center / 12rem auto;
			padding-right: 16rem;
		}
	}

	/* ロゴ */
	& .logo {
		margin-top: 32rem;
		display: inline-block;
	}

	/* コピーライト */
	& .copyright {
		font-size: 12rem;
		margin-top: 56rem;
	}
}

/* ルシアフッター */
#invite_r footer {
	padding-block: 24rem 32rem;

	/* ロゴ */
	& .logo {
		width: 72rem;
	}
}

/* メンズフッター */
#invite_m footer {
	padding: 24rem 16rem 16rem;

	/* ロゴ */
	& .logo {
		margin-top: 40rem;

		& p {
			font-size: 18rem;
			font-weight: 700;
			padding-bottom: 24rem;
		}
		& img {
			width: 140rem;
		}
	}

	/* コピーライト */
	& .copyright {
		border-top: 1px var(--white) solid;
		padding-top: 14rem;
	}
}

/* ゲストページフッター */
#guest footer {
	padding-block: 32rem;

	/* プラポリリンク */
	& .privacy_link span {
		filter: brightness(.14);
	}

	/* ロゴ */
	& .logo {
		display: flex;
		justify-content: center;

		& > div {
			width: 108rem;
		}
		& .logo_r {
			padding: 12rem 22rem;
		}
		& .logo_m {
			padding: 22rem 18rem;
		}
	}
}