@charset "UTF-8";

@font-face {
	font-family: "Athena";
	font-weight: normal;
	src: url(../../font/Athena/Athena-Light.otf) format("opentype");
}

@font-face {
	font-family: "Athena";
	font-weight: bold;
	src: url(../../font/Athena/Athena-Regular.ttf) format("truetype");
}

@font-face {
	font-family: "HeiseiMinchoStd";
	font-weight: normal;
	src: url(../../font/HeiseiMinchoStd/HeiseiMinchoStd-W3.otf) format("opentype");
}

@font-face {
	font-family: "HeiseiMinchoStd";
	font-weight: bold;
	src: url(../../font/HeiseiMinchoStd/HeiseiMinchoStd-W5.otf) format("opentype");
}

:root {
	--color-text: #211D1A80;
	--font-athena: Athena, sans-serif;
	--font-heisei-mincho-std: HeiseiMinchoStd, serif;
	--font-yogothic: "Yo Gothic", sans-serif;

	--gradient-ltr: linear-gradient(90deg, rgba(33, 29, 26, 0.50), rgba(33, 29, 26, 0));
	--gradient-rtl: linear-gradient(270deg, rgba(33, 29, 26, 0.50), rgba(33, 29, 26, 0));
}

.u-font-family-athena {
	font-family: var(--font-athena);
}

.u-font-family-heisei-mincho {
	font-family: var(--font-heisei-mincho-std);
}

#bgVideo {
	position: fixed;
	top: 0;
	left: -5vw;
	width: 110vw;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.u-underline-white {
	background-image: linear-gradient(white, white);
	background-position: center bottom;
	background-repeat: no-repeat;
}

.text-gradient-blue {
	background-image: linear-gradient(5deg,#0878ff,#47f9ff);
}

html, body {
	position: relative;
	/*background-color: white;*/
	color: var(--color-text);
	font-family: var(--font-heisei-mincho-std);
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
	color: inherit;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

.u-container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.main {
	transition: filter .5s;
}

@media (min-width: 1921px) {
	:root {
		--header-height: 88px;
	}

	body {
		font-size: 14px;
	}

	.u-container {
		max-width: 1440px;
		/*padding-left: 30px;*/
		/*padding-right: 30px;*/
	}
}

@media (max-width: 1920px) and (min-width: 768px) {
	:root {
		--header-height: calc(100vw * 88 / 1920);
	}

	body {
		font-size: calc(100vw * 19 / 1920);
	}

	.u-container {
		max-width: calc(100vw * 1440 / 1920);
		/*padding-left: calc(100vw * 30 / 1920);*/
		/*padding-right: calc(100vw * 30 / 1920);*/
	}
}

@media (min-width: 768px) {
	.u-under-768-only {
		display: none !important;
	}
}

@media (max-width: 767px) {
	:root {
		--header-height: calc(100vw * 50 / 393);
	}

	.u-above-767-only {
		display: none !important;
	}

	body {
		font-size: calc(100vw * 14 / 393);
	}
}

#designBg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	z-index: -1;
}




.badge {
	position: fixed;
	z-index: 6000;
}

.badge-circle {
	animation: ub-spin 10s infinite linear;
}

.badge-main {
	cursor: pointer;
}

.badge-main,
.badge-main:before,
.badge-main:after {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 100%;
	content: "";
	transform: translate(-50%, -50%);
}

.badge-main:before {
	background-color: white;
	transition: background-color .5s;
	z-index: 1;
}

.badge-main:after {
	background-image: radial-gradient(69.06% 69.06% at 40.17% 35.17%, rgba(255, 249, 246, 0.85) 0%, rgba(244, 212, 192, 0.85) 68.5%, rgba(244, 182, 155, 0.85) 93.5%);
	z-index: -1;
}

.badge-icon,
.badge-text {
	position: relative;
	z-index: 2;
}

.badge-icon02{
	height: 30%;
	position: relative;
    z-index: 2;
}

.badge-main:not(:hover):before {
	background-color: white;
}

.badge-main:hover:before {
	background-color: transparent;
}

@media (min-width: 1921px) {
	.badge {
		right: 14px;
		bottom: 45px;
		height: 142px;
		margin-top: 45px;
		margin-right: -30px;
		margin-bottom: 46px;
		width: 142px;
	}

	.badge02{
		right: 160px;
	}

	.badge-main {
		gap: 5px;
	}

	.badge-main,
	.badge-main:before,
	.badge-main:after {
		height: 107px;
		width: 107px;
	}

	.badge-icon {
		width: 33px;
	}

	.badge-text {
		font-size: 10px;
	}

	.badge02 .badge-text {
		font-size: 8px;
	}

	.badge02_text01{
		font-size: 11px;
		font-weight: 800;
		margin-bottom: 2px;
	}
}

@media (max-width: 1920px) and (min-width: 768px) {
	.badge {
		right: calc(100vw * 14 / 1920);
		bottom: calc(100vw * 45 / 1920);
		height: calc(100vw * 142 / 1920);
		width: calc(100vw * 142 / 1920);
	}

	.badge02{
		right: calc(100vw * 170 / 1920);
	}

	.badge-main {
		gap: calc(100vw * 5 / 1920);
	}

	.badge-main,
	.badge-main:before,
	.badge-main:after {
		height: calc(100vw * 107 / 1920);
		width: calc(100vw * 107 / 1920);
	}

	.badge-icon {
		width: calc(100vw * 33 / 1920);
	}

	.badge-text {
		font-size: calc(100vw * 10 / 1920);
	}

	.badge02 .badge-text{
		font-size: calc(100vw * 8 / 1920);
	}

	.badge02_text01{
		font-size: calc(100vw * 11 / 1920);
		font-weight: 800;
		margin-bottom: 2px;
	}
}

@media (max-width: 767px) {
	.badge {
		right: calc(100vw * 10 / 393);
		bottom: calc(100vw * 20 / 393);
		height: calc(100vw * 80 / 393);
		width: calc(100vw * 80 / 393);
	}

	.badge02{
		right: calc(100vw * 455 / 1920);
	}

	.badge-main {
		gap: calc(100vw * 5 / 393);
	}

	.badge-main,
	.badge-main:before,
	.badge-main:after {
		height: calc(100vw * 60 / 393);
		width: calc(100vw * 60 / 393);
	}

	.badge-icon {
		width: calc(100vw * 14 / 393);
	}

	.badge-text {
		font-size: calc(100vw * 7 / 393);
	}

	.badge02 .badge-text{
		font-size: calc(100vw * 5 / 393);
	}

	.badge02_text01{
		font-size: 1.3em;
		font-weight: 800;
		margin-bottom: 2px;
	}
}






.back-top {
	position: fixed;
	color: rgba(33, 29, 26, 0.80);
	font-family: var(--font-athena);
	line-height: 85.74%;
	letter-spacing: .2em;
	text-align: center;
	z-index: 6500;
}

@media (min-width: 1921px) {
	.back-top {
		right: 14px;
		bottom: 250px;
		font-size: 14px;
		gap: 7px;
	}

	.back-top svg {
		height: 24px;
		width: 30px;
	}
}

@media (max-width: 1920px) and (min-width: 768px) {
	.back-top {
		right: calc(100vw * 59 / 1920);
		bottom: calc(100vw * 250 / 1920);
		gap: calc(100vw * 7 / 1920);
		font-size: calc(100vw * 14 / 1920);
	}

	.back-top svg {
		height: calc(100vw * 24 / 1920);
		width: calc(100vw * 30 / 1920);
	}
}

@media (min-width: 768px) {
}

@media (max-width: 767px) {
	.back-top {
		right: calc(100vw * 30 / 393);
		bottom: calc(100vw * 150 / 393);
		gap: calc(100vw * 5 / 393);
		font-size: calc(100vw * 10 / 393);
	}

	.back-top svg {
		height: calc(100vw * 12 / 393);
		width: calc(100vw * 16 / 393);
	}
}


.u-infinite-text-scroll-wrapper {
	align-items: baseline;
	display: flex;
	color: rgba(33, 29, 26, 0.07);
	font-family: var(--font-athena);
	line-height: 1; /* 53.333% */
	letter-spacing: .1em;
	overflow: hidden;
	width: 100%;
}

.u-infinite-text-scroll-wrapper span {
	white-space: nowrap;
}

@media (min-width: 1921px) {
	.u-infinite-text-scroll-wrapper {
		font-size: 150px;
	}
}

@media (max-width: 1920px) and (min-width: 768px) {
	.u-infinite-text-scroll-wrapper {
		font-size: calc(100vw * 150 / 1920);
	}
}

@media (min-width: 768px) {
	.u-infinite-text-scroll-wrapper span {
		animation: infinite-scroll-text 60s infinite linear;
		font-weight: 100;
	}
}

@keyframes infinite-scroll-text {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

@keyframes float-and-drift {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-10px, -10px);
	}
	50% {
		transform: translate(10px, -20px);
	}
	75% {
		transform: translate(-5px, -10px);
	}
	100% {
		transform: translate(0, 0);
	}
}

.badge {
    position: fixed;
    z-index: 1000;
}

.back-top {
    position: fixed;
    z-index: 1001; /* badgeより上に表示 */
}

/* スマートフォン用スタイル */
@media screen and (max-width: 767px) {
    .back-top {
        bottom: calc(7rem + 20px); /* badgeの上20pxの位置 */
        right: 2.3rem;
    }
}

/* PC用スタイル */
@media screen and (min-width: 768px) {
    .back-top {
        bottom: calc(9rem + 20px); /* badgeの上20pxの位置 */
        right: 3.3rem;
    }
}

.u-infinite-text-scroll-wrapper.shokai {
    align-items: baseline;
    display: flex;
    color: rgba(33, 29, 26, 0.07);
    font-family: var(--font-athena);
    line-height: 1; /* 53.333% */
    letter-spacing: .1em;
    overflow: hidden;
}

.u-infinite-text-scroll-wrapper.shokai span.u-infinite-text {
    white-space: nowrap;
    animation: infinite-scroll-text 60s infinite linear;
    font-weight: 100;
}

@media screen and (max-width: 767px) {
    .u-infinite-text-scroll-wrapper.shokai {
        font-size: calc(100vw * 30 / 375); /* SPサイズでのフォントサイズ調整 */
		    width: 100%;
	position: absolute;
    top: 22vh;
    z-index: 2;

    }
}

@keyframes infinite-scroll-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


@media (min-width: 1921px) {
}

@media (max-width: 1920px) and (min-width: 768px) {
}

@media (min-width: 768px) {
}

@media (max-width: 767px) {
}