@charset "UTF-8";

:root {
#	--primary-gradient: linear-gradient(135deg, #2563eb, #7c3aed);
	--primary-gradient: #36b7ff;
	--primary-color: #4f46e5;
	--primary-hover: #4338ca;
	--text-main: #6b422e;
	--text-color1: #693b23;
	--text-color2: #006d8c;
	--text-muted: #475569;
	--bg-light: #f8fafc;
	--bg-card: #ffffff;
	--border-color: #e2e8f0;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 20px 30px -10px rgba(79, 70, 229, 0.2);
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-full: 9999px;
	--transition-smooth: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ----------------------------------------------------
 * FONTS
 * ---------------------------------------------------- */
/*** Noto Sans CJK JP ***/
.Noto_Sans_CJK_JP-Thin {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 100;
	font-style: normal;
}

.Noto_Sans_CJK_JP-Light {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 200;
	font-style: normal;
}

.Noto_Sans_CJK_JP-DemiLight {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.Noto_Sans_CJK_JP-Regular {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.Noto_Sans_CJK_JP-Medium {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 500;
	font-style: normal;
}

.Noto_Sans_CJK_JP-Bold {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.Noto_Sans_CJK_JP-Black {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 900;
	font-style: normal;
}


/*** DNP 秀英横太明朝 Std (DNP Shuei Ymincho Std) ***/
.DNP_Shuei_Ymincho_Std-M {
	font-family: dnp-shuei-ymincho-std, sans-serif;
	font-weight: 500;
	font-style: normal;
}
.DNP_Shuei_Ymincho_Std-B {
	font-family: dnp-shuei-ymincho-std, sans-serif;
	font-weight: 600;
	font-style: normal;
}


/* ----------------------------------------------------
 * main
 * ---------------------------------------------------- */

html {
	height: 100%;
	scroll-padding-top: 90px; /* ヘッダー高さ80px + 余白 */
}

html, body {
	margin: 0;
	padding: 0;
#	scroll-snap-type: y mandatory;
#	overflow-x: hidden;
#	-webkit-font-smoothing: antialiased;
#	-moz-osx-font-smoothing: grayscale;
}

body {
	min-height: 100%; 
	font-family: "noto-sans-cjk-jp", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: var(--text-color1);

	word-break: break-all;
	display: flex;
	flex-direction: column;
}

body.overflow-hidden {
	overflow: hidden;
}

img {
	width: 100%;
	vertical-align: bottom;
}
.pc {
	display: block;
}
.sp {
	display:none;
}
@media only screen and (max-width: 750px) {
	.pc {
	        display:none;
	}
	.sp {
		display: block;
	}
}

main {
	flex: 1;
#	flex: 1 1 0%;
}

/* -------------------------------------
	xxxxxxx
----------------------------------------*/
.indent {
	text-indent: -1em;
	padding-left: 1em;
}

/* ----------------------------------------------------
 * 背景
 * ---------------------------------------------------- */
.parallax {

}
.parallax::before {
	background-image: url(/toukenranbu/assets/img/bg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -1;
}
@media screen and (max-width: 750px) {
	.parallax::before {
#		background-image: url(/3/assets/2Edition/bk2.png);
		background-image: url(/toukenranbu/assets/img/bg.png);
	}
}


/* ----------------------------------------------------
 * 追従ヘッダー・ナビゲーション
 * ---------------------------------------------------- */
.sticky-header {
	position: sticky;
	top: 0;
#	z-index: 1000;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-color);
	transition: var(--transition-smooth);

	@media (max-width: 750px) {

#	position: fixed;
#	top: 0;
#	left: 0;
#	width: 100%;
#	z-index: 1000; /* 必要に応じて前面へ表示 */
	}
}

.sticky-header.scrolled {
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: var(--shadow-sm);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
#	height: 80px;
}

.header-logo {
#	width: 15%;
	width: 14%;
	max-width: 160px;
#	padding: 1%;
	padding: 0 1%;

	@media (max-width: 750px) {
		width: 25%;
		max-width: 160px;
	}
}


/* PC用ナビゲーション */
.nav-container {
	position: relative;
#	width: 80%;
	width: 70%;
	max-width: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: auto;
}

.nav-link {
#	padding: 10px 28px;
	padding: 13px 28px 15px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-muted);
	border-radius: var(--radius-sm);
	transition: color 0.2s ease;
}

/* ナビゲーション内の画像用スタイル */
	.nav-link-img {
	max-height: 28px; /* 固定値ではなく、ヘッダー内に収まる最大高さを指定 */
	width: auto;
	max-width: 100%;
	display: block;
	object-fit: contain;
	pointer-events: none; /* マウスイベントの干渉を防止 */
}

.nav-link:hover,
.nav-link.active-link {
	color: var(--primary-color);
}

.nav-link .off {
	position: relative;
	opacity: 1;
}
.nav-link .on {
	position: absolute;
	opacity: 0;
}

.nav-link.disable {
	pointer-events: none;
	padding: 0 28px;

	img {
		max-height: 45px;
	}
}

.nav-link.active-link .off {
	position: absolute;
	opacity: 0;
}
.nav-link.active-link .on {
	position: relative;
	opacity: 1;
}

/* 追従するアンダーラインのアニメーション用要素 */
.hover-indicator {
	position: absolute;
	bottom: -4px;
	left: 0;
	height: 3px;
	background: var(--primary-gradient);
	border-radius: var(--radius-full);
	pointer-events: none;
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
}

/* ハンバーガーボタン (外部ライブラリ不使用のCSSアニメーションアイコン) */
.mobile-menu-btn {
	display: none;
	background: none;
	border: none;
	width: 40px;
	height: 40px;
	padding: 8px;
	cursor: pointer;
	position: relative;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.hamburger-line {
	width: 22px;
	height: 2px;
	background-color: var(--text-main);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ハンバーガーアイコンのアクティブ状態 (Xじるし変化) */
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.active .hamburger-line:nth-child(2) {
	opacity: 0;
}
.mobile-menu-btn.active .hamburger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* モバイル用ドロワーメニュー */
.mobile-menu-drawer {
	display: none;
	background-color: rgba(255, 255, 255, 0.98);
	border-bottom: 1px solid var(--border-color);
	padding: 20px 24px;
	flex-direction: column;
	gap: 12px;
}

.mobile-link {
	padding: 12px 16px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-muted);
	border-radius: var(--radius-sm);
	transition: var(--transition-smooth);
}

.mobile-link:hover {
	background-color: #e0e7ff;
	color: var(--primary-color);
}

.mobile-cta {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
}

.mobile-cta .btn {
	width: 100%;
}

/* 750px ブレイクポイント設定 */
@media (max-width: 750px) {
	.pc-menu {
		display: none !important;
	}
	.mobile-menu-btn {
		display: flex !important;
	}
	.mobile-menu-drawer.open {
		display: flex !important;
	}
}

@media (max-width: 750px) {
	.header__container {
		width: 100%;

		.header__menu {
			width: 17%;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 20;

			padding-top: 2%;
			padding-right: 6%;
			width: 17%;
		}
	}

	.header__menu.show {
		display: block;
	}



	.header__menu .off {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 0;
		opacity: 0;
	}

	.header__menu .on {
		position: relative;
		z-index: 1;
		opacity: 1;
	}

	.header__menu.open .off {
		position: relative;
		top: unset;
		left: unset;
		transform: unset;
		z-index: 1;
		opacity: 1;
	}

	.header__menu.open .on {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 0;
		opacity: 0;
	}


		.menu-modal-pop {
			width: 100vw;
#			height: 100vh;
			height: 100svh;
			position:fixed;
			top: 0;
			left:0;
			z-index:10!important;
			display: none;
		}
		.menu-modal-pop-bg {
			width: 100%;
			height: 100%;
			position:fixed;
			z-index:10!important;

#			background-image: url(/assets/img/header/menu_bg_sp.png); /* fallback */
#			background-image: -webkit-image-set(
#				url(/assets/img/header/menu_bg_sp.webp) type("image/webp"),
#				url(/assets/img/header/menu_bg_sp.png) type("image/png")
#			);
#			background-image: image-set(
#				url(/assets/img/header/menu_bg_sp.webp) type("image/webp"),
#				url(/assets/img/header/menu_bg_sp.png) type("image/png")
#			);
#			background-repeat: no-repeat;
#			background-position: center;
#			background-size: cover;
		}
		.menu-modal-pop-main {
			background-color: rgb(255 255 255 / 95%);
			position: relative;
			width: auto;
			text-align: center;
#			top: 50%;
#			left: 50%;
#			transform: translate(-50%, -50%);
			z-index: 11;

#			height: 100vh;
			height: 100%;
			overflow: scroll;
			padding: 5% 0 7%;

			.logo {
				width: 55%;
				margin: 0 auto 9%;
			}

			.sns {
				width: 61%;
				margin: 0 auto 7%;
			}
		}

		.header__menu-box-sp {
			width: 70%;
			margin: 0 auto 13%;
			display: flex;
			flex-direction: column;
			gap: 8vw;
			align-items: flex-start;
		}

		.menu-item-sp {
			margin: auto;
			position: relative;

			img {
				width: 65%;
			}
		}

		.menu-item-sp .off {
			position: relative;
			z-index: 1;
			opacity: 1;
		}

		.menu-item-sp .on {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 0;
			opacity: 0;
		}

		.menu-item-sp.active .off {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 0;
			opacity: 0;
		}

		.menu-item-sp.active .on {
			position: relative;
			top: unset;
			left: unset;
			transform: unset;
			z-index: 1;
			opacity: 1;
		}

		.menu-item-sp.active {
#			background-image: url(/assets/img/header/menu_img.png);
#			background-image: -webkit-image-set(
#				url(/assets/img/header/menu_img.webp) type("image/webp"),
#				url(/assets/img/header/menu_img.png) type("image/png")
#			);
#			background-image: image-set(
#				url(/assets/img/header/menu_img.webp) type("image/webp"),
#				url(/assets/img/header/menu_img.png) type("image/png")
#			);
#			background-position: top left;
#			background-size: auto 100%; 
		}

}


/* ----------------------------------------------------
 * footer
 * ---------------------------------------------------- */
footer {
	margin-top: 5%;
}

.footer__sns-container {
	background: #e5f7c0ab;
	padding: 4% 0;
	margin-bottom: 0.5%;

	@media (max-width: 750px) {
		margin-bottom: 2%;
	}
}

.footer__sns-official {
	margin: 0 auto 4%;
	text-align: center;

	p {
		font-size: calc(30 * 100vw / 1920);
		margin-bottom: 1%;
		color: #3c3c3c;

		@media (max-width: 750px) {
			font-size: calc(22 * 100vw / 750);
			margin-bottom: 3%;
		}
	}

	.official-link-img {
		width: 30%;
		margin: auto;
		display: flex;
		flex-direction: column;
		gap: 2vw;

		@media (max-width: 750px) {
			width: 60%;
		}
	}
}


.footer__sns-area {
	display: flex;
	width: 42%;
	margin: auto;
	gap: 1.6vw;
	align-items: center;

	@media (max-width: 750px) {
		width:80%;
	}
}
.footer__sns-img {
    width: 100%;
}


.footer__bottom {
	width: 100%;
#	position: relative;
	background: #a7eeea;
	padding: 2% 0;
}

.footer__bottom-link {
	width: 47%;
#	position: absolute;
#	top: 12%;
#	left: 50%;
#	transform: translateX(-50%);
	margin: 0 auto 2%;

	@media (max-width: 750px) {
		width: 60%;
		margin: 0 auto 5%;
	}

	ul {
		place-items: center;
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: auto;
		font-size: calc(28 * 100vw / 1920);
		font-weight: 500;

		@media (max-width: 750px) {
			flex-wrap: wrap;
			row-gap: 2vw;
			font-size: calc(23 * 100vw / 750);
		}
	}

	li {

		@media (max-width: 750px) {
			width: 56%;
		}
	}

	li:nth-child(odd) {

		@media (max-width: 750px) {
			width: 34%;
			text-align: right;
		}
	}

	a {
		color: #0a5156;
	}
}

.footer__bottom-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 87%;
	margin: auto;

	@media (max-width: 750px) {
		width: 89%;
	}
}
.footer__bottom-logo {
	width: 26%;
	display: flex;
	align-items: center;
	gap: 1.5vw;

	picture {
		display: flex;
		align-items: center;
	}

	@media (max-width: 750px) {
		width: 36%;
		margin: auto 0;
		justify-items: center;
	}
}


.footer__bottom-copyright {
	width: 62%;
#	position: absolute;
#	bottom: 20%;
#	left: 66.5%;
#	transform: translateX(-50%);
	font-size: calc(18.5 * 100vw / 1920);
	color: #0a5156;
	letter-spacing: 0.03em;
	text-align: right;
	line-height: 1.8;
	font-weight: 600;

	@media (max-width: 750px) {
#		width: 60%;
#		top: 57%;
#		left: 50%;
#		bottom: 0;
#		transform: translate(-50%, -50%);
		font-size: calc(13.2 * 100vw / 750);
		text-align: right;

	}
}


/* ----------------------------------------------------
 * 製品情報
 * ---------------------------------------------------- */
.top__product-container {
	background: rgb(255 255 255 / 35%);
	box-shadow: 0 -8px 10px 1px rgba(0, 0, 0, 0.2), 0 8px 10px 6px rgba(0, 0, 0, 0.2);
	padding: 5% 0;
}

.top__product-title {
	width: 45%;
	margin: 0 auto 5%;

	@media (max-width: 750px) {
		width: 69%;
	}
}

.top__product-wrap {
	width: 88%;
	margin: 0 auto 2%;
	display: flex;
	justify-content: space-between;
	position: relative;

	@media (max-width: 750px) {
		flex-direction: column;
	}
}

.top__product-soft {
	width: 35.5%;

	@media (max-width: 750px) {
		width: 76%;
		margin: auto;
	}
}

.top__product-pkg {
	display: flex;
	align-items: center;
	gap: 1.2vw;

	@media (max-width: 750px) {
		gap: 3vw;
	}
}

.product__soft-hard {
	display: flex;
	justify-content: space-between;
	font-size: min(calc(26 * 100vw / 1920), 26px);
	font-weight: 500;
	color: #754c24;
	text-align: center;

	@media (max-width: 750px) {
		font-size: calc(20 * 100vw / 750);
	}

	p {
		width: 48%;

		@media (max-width: 750px) {
			width: 47%;
		}
	}
}

.top__product-info {
	width: 62%;
	display: flex;
	flex-direction: column;
	gap: 1.6vw;

	@media (max-width: 750px) {
		margin-top: 3%;
		width: 100%;
	}
}

.top__product-card {
	display: flex;
	gap: 2vw;

	@media (max-width: 750px) {
		gap: 3vw;
	}
}
.product-label {
	width: 29%;
	text-align: right;
	font-size: min(calc(31 * 100vw / 1920), 31px);
	color: var(--text-color2);
	font-weight: 600;

	@media (max-width: 750px) {
		width: 27%;
		font-size: calc(19 * 100vw / 750);
	}
}
.product-value {
	flex: 1;
	font-size: min(calc(31 * 100vw / 1920), 31px);
	font-weight: 600;

	@media (max-width: 750px) {
		font-size: calc(20 * 100vw / 750);
	}
}

.top__product-cero {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 8%;
}

.top__product-heed {
	width: 87%;
	margin: 0 auto 5%;
	font-size: calc(20.8 * 100vw / 1920);
	color: #e93766;

	@media (max-width: 750px) {
		font-size: calc(18.5 * 100vw / 750);
	}
}

.top__product-button {
	width: 30%;
	margin: 0 auto 5%;

	@media (max-width: 750px) {
		width: 57%;
	}
}

/* ----------------------------------------------------
 * 
 * ---------------------------------------------------- */

/** @Override **/
.modaal-container {
	width: 80%;
	border-radius: 20px;
	border: 3px solid #b7eaf5;
	box-sizing: border-box;
	background: #eafff9;
	font-size: calc(23 * 100vw / 1920);
	letter-spacing: 0.03em;
	line-height: 1.6;

	@media (max-width: 750px) {
		width: 100%;
		font-size: calc(23 * 100vw / 750);
	}
}

.modaal-content-container {

	@media (max-width: 750px) {
		padding: 4% 3%;
	}
}

.modaal-close {

	@media (max-width: 750px) {
		top: 2%;
	}
}



/* ----------------------------------------------------
 * 
 * ---------------------------------------------------- */