@charset "UTF-8";

/* CSS変数 */
:root {
	&:has(.header) {
		--header--height: 50px;

		@media (min-width: 1024px) {
			--header--height: 100px;
		}
	}
}


.button-slidechange {
	--color: var(--color-base);
	--background: var(--color-main);
	display: grid;
	place-content: center;
	border-radius: 9999px;
	line-height: 1em;
	color: var(--color);
	background-image: linear-gradient(90deg, var(--color) 50%, var(--background) 50%);
	background-position: 98% 50%;
	background-size: 210% auto;
	transition: all 0.2s linear;
	border: 2px solid var(--background);

	&:hover {
		color: var(--background);
		background-position: 0% 50%;
	}
}


/* 基本構造：header */
header {

	/* ハンバーガーiconの作成 */
	.sp-btn {
		width: 30px;
		height: 30px;
		padding: 5px;
		cursor: pointer;

		@media (min-width: 1024px) {
			display: none;
		}

		div {
			position: relative;
			width: 100%;
			height: 100%;

			span {
				position: absolute;
				background-color: var(--color-accent);
				height: 2px;
				transition: all 0.3s ease-out;

				&:nth-of-type(1) {
					top: 15%;
					width: 100%;
				}

				&:nth-of-type(2) {
					top: 50%;
					transform: translateY(-50%);
					width: 100%;
				}

				&:nth-of-type(3) {
					bottom: 15%;
					width: 62.5%;
				}
			}

			&.active span {
				&:nth-of-type(1) {
					top: 50%;
					transform: translateY(-50%) rotate(-45deg);
				}

				&:nth-of-type(2) {
					opacity: 0;
				}

				&:nth-of-type(3) {
					top: 50%;
					transform: translateY(-50%) rotate(45deg);
					width: 100%;
				}
			}
		}
	}

	/* smartPhoneメニュー */
	.sp-menu {
		--width: 375px;
		--scrollbar: 5px;
		position: fixed;
		top: calc(var(--header--height) + var(--global--admin-bar--height));
		right: calc(var(--width) * -1 - 5px);
		/* 5px(drop-shadow) */
		width: min(100%, var(--width));
		height: auto;
		max-height: 100%;
		padding-inline-start: var(--scrollbar);
		/* scrollbarに合わせて追加 */
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;

		&::-webkit-scrollbar {
			width: var(--scrollbar);
		}

		@media (min-width: 1024px) {
			width: max-content;
			position: initial;
			padding: initial;
			overflow-y: initial;
		}
	}
}


/* header
 * Template : standard
 **/
.header:is(.standard) {
	width: 100%;
	height: var(--header--height);
	background-color: var(--color-base);
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
	overflow-x: clip;

	.header-inner {
		--space: 16px;
		--f-size: 16px;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: min(100%, 1280px);
		height: 100%;
		margin-inline: auto;
		padding-inline: var(--space);
		font-size: var(--f-size);

		@media (min-width: 1024px) {
			--space: min(6.5vw, 86px);
		}
	}

	.header-logo-group {
		display: flex;
		align-items: center;
		gap: 16px;

		--header-logo-height: 32px;

		@media (min-width: 1024px) {
			--header-logo-height: 60px;
		}

		.header-logo {
			flex-shrink: 0;
			height: var(--header-logo-height);

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.header-content {
		padding-block: 33px;
		background-color: var(--color-base);
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

		@media (min-width: 1024px) {
			padding-block: initial;
			background-color: initial;
			box-shadow: initial;
		}
	}

	.header-button-group {
		--direction: column;
		display: flex;
		flex-direction: var(--direction);
		justify-content: center;
		align-items: center;
		gap: 20px;

		@media (min-width: 1024px) {
			--direction: row;
		}

		.header-button {
			width: 158px;
			height: 40px;

			&:not(:last-child) {
				--color: var(--color-main);
				--background: var(--color-base);
				border-color: var(--color-main);
			}
		}
	}
}



/* footer
 * Template : standard
 **/
.footer:is(.standard) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr auto;

	width: 100%;
	min-height: 445px;
	background-color: var(--color-sub);
	background-image: url("../img/background-image.svg");
	background-position: center;
	background-size: 1842px 1300px;

	--color-gray: #707070;

	.footer-content {
		display: grid;
		place-content: center;
		place-items: center;
		gap: 20px;
		padding-block: 28px;
		padding-inline: 28px;
	}

	.footer-logo {
		display: grid;
		place-content: center;
		width: min(85%, 184px);
		margin-bottom: 48px;
		margin-top: 110px;
	}

	.footer-button-group {
		display: flex;
		flex-wrap: wrap;
		place-content: center;
		gap: 20px;

		.footer-button {
			width: 200px;
			height: 44px;
		}
	}

	.footer-trademark {
		line-height: 110%;
		font-size: 12px;
		color: var(--color-gray);
	}

	.terms-of-service .textlink {
		color: #707070;
        text-align: center;
        margin-block: 1em;
        padding-block: 0.25em;
        padding-inline: 0.5em;
        transition: opacity 0.2s ease;
}
    .textlink:hover {
    opacity:0.7
}

	.footer-copyright {
		--height: 30px;
		--f-size: 10px;
		display: grid;
		align-items: center;
		min-height: var(--height);
		padding-block: 0.5em;
		padding-inline: 1em;
		font-size: var(--f-size);
		color: var(--color-gray);
		text-align: center;
		background-color: #F7F7F7;

		@media (min-width: 1024px) {
			--height: 45px;
			--f-size: 16px;
		}
	}
}