@charset "utf-8";
/*@charset "UTF-8";     コメント */
/*css初期設定 start*/
html {
	font-size: 62.5%; /*文字標準*/
	font-family: 'Noto Sans JP', sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
a {
	text-decoration: none !important; /*リンクデコレーションリセット*/
}
/*大きさの計算*/
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	width: 100%;
	margin: 0 auto;
	/*文字詰め*/
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
	/*スマホ横向き時のフォントサイズリセット*/
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow: visible;
	font-size: clamp(14px, 3.73vw, 16px);
	line-height: 1.7;
	/* word-break: keep-all;
  overflow-wrap: anywhere; */
}

/*iOSフォーム要素の初期化*/
input,
button,
textarea,
select {
	-webkit-appearance: none;
	appearance: none;
}
/*画像の調整*/
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

@media (max-width: 1024px) {
	.sp {
		display: block !important;
	}
	.pc {
		display: none !important;
	}
	.br-sp {
		display: block;
	}
	.br-pc {
		display: none;
	}
}
@media only screen and (min-width: 1025px) {
	.sp {
		display: none !important;
	}
	.pc {
		display: block !important;
	}
	.br-sp {
		display: none;
	}
	.br-pc {
		display: block;
	}
}

#main-footer {
	background-color: #f6f6f6;
}
#copyright {
	font-size: 1.2rem;
}
#main-footer a {
	font-size: 1.2rem;
}
/*css初期設定 end*/
/*main start*/
body {
	background-color: #fff;
}
.mainWrap {
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.sectionMag {
	margin-bottom: 21.33%;
}
@media only screen and (min-width: 1025px) {
	.sectionMag {
		margin-bottom: 10.41%;
	}
}
/* ========== メインビジュアル ========== */
/* =========================================================================
       1. CSS変数
========================================================================= */
:root {
	--colorWhite: #ffffff;
	--colorBlack: #141414;
	--colorGrayNumber: #f2f2f2;
	--fontEn: 'ff-din-paneuropean', sans-serif;
	--fontJa: 'Noto Sans JP', sans-serif;
}

h2,
h3,
h4,
a {
	font-family: var(--fontEn) var(--fontJa);
	font-weight: 500;
}
p {
	font-family: var(--fontJa) var(--fontEn);
	font-weight: 400;
	line-height: 1.7;
}
a.ctaBtn {
	display: block;
	width: 86.4%;
	max-width: 428px;
	border: solid 1px var(--colorBlack);
	font-size: clamp(1.4rem, 4.8vw, 1.8rem);
	font-weight: 500;
	color: var(--colorBlack);
	background-color: #ffffff;
	margin: 0 auto;
	padding: 4px 0;
}

/* =========================================================================
    2. HEROセクション (アニメーション追加版)
========================================================================= */
.heroSec {
	width: 100%;
	display: block;
	height: 0;
	padding-top: 157.33%; /*height:591*/
	position: relative;
	overflow: hidden;
}
.heroSec > * {
	position: absolute;
}

/* メイン画像：ゆっくりズーム（ケンスバーンズ効果） */
.heroSec .heroMainImg {
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.heroSec .heroMainImg img {
	animation: slowZoom 3s ease-out forwards;
}

/* 白フィルター：0.2秒後にフェードイン */
.heroSec .herofilter {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--colorWhite);
	opacity: 0;
	animation: fadeInFilter 0.6s ease 0.2s forwards;
}

/* ロゴの親要素 */
.heroSec .heroLogo {
	width: 72.33%;
	top: 1%;
	left: -7%;
	transform: rotate(-20deg);
	z-index: 10;
}

.heroSec .heroLogo img {
	position: relative;
	z-index: 2;
}
/* --- ペンキ設定 ここから --- */
/* SVGペンキの設定 */
.heroSec .paintZ {
	position: absolute;
	top: 61%;
	left: 50%;
	width: 125%;
	height: auto;
	transform: translate(-50%, -50%) rotate(19deg);
	z-index: 1;
}

.heroSec .maskPath {
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
	/* 1.2秒後に、0.8秒かけてシャッシャッとZ字になぞる */
	animation: drawMask 0.8s ease-out 1.2s forwards;
}

/* --- ペンキ設定 ここまで --- */

/* アニメーションの設計図の一番下に追加・修正 */
@keyframes drawMask {
	to {
		stroke-dashoffset: 0;
	}
}
/* サブ画像群：変数を使って角度を記憶させ、順番にフェードイン */
.heroSec img.heroSubImg1 {
	width: 59.94%;
	top: 55.26%;
	right: -8.89%;
	--rotate: 22deg; /* 角度を記憶 */
	transform: rotate(var(--rotate));
	opacity: 0; /* 最初は透明 */
	animation: fadeInUpSub 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}
.heroSec img.heroSubImg2 {
	width: 44.53%;
	top: 45.18%;
	left: -8.89%;
	--rotate: -18deg;
	transform: rotate(var(--rotate));
	opacity: 0;
	animation: fadeInUpSub 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s forwards; /* 0.15秒ずらす */
}
.heroSec img.heroSubImg3 {
	width: 43.58%;
	top: 36.88%;
	right: -3.78%;
	--rotate: -19deg;
	transform: rotate(var(--rotate));
	opacity: 0;
	animation: fadeInUpSub 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s forwards; /* さらに0.15秒ずらす */
}

/* PC時の配置と角度の上書き */
@media only screen and (min-width: 1025px) {
	.heroSec {
		padding-top: calc(51.56% - 4.42%);
	}
	.heroSec .heroLogo {
		width: 24.1%;
		top: 2.18%;
		left: 0.06%;
	}
	.heroSec img.heroSubImg1 {
		width: 32.57%;
		top: 20.94%;
		right: -6.46%;
		--rotate: 22deg; /* PCでも必要に応じて角度を指定 */
	}
	.heroSec img.heroSubImg2 {
		width: 19.07%;
		top: 50.54%;
		left: 5.69%;
		--rotate: -18deg;
	}
	.heroSec img.heroSubImg3 {
		width: 23.28%;
		top: -2.4%;
		right: 12.8%;
		--rotate: -19deg; /* 修正：元の記述はtransformに直接書いてあったので変数化 */
		transform: rotate(var(--rotate));
	}
	.heroSec .paintPath-sp {
		display: none;
	}
	.heroSec .paintPath-pc {
		display: block;
	}
}

/* =========================================================================
    アニメーションの設計
========================================================================= */
/* ゆっくりズーム */
@keyframes slowZoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.02);
	}
}

/* フィルターのフェードイン */
@keyframes fadeInFilter {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.2;
	}
}

/* サブ画像の下からフェードイン */
@keyframes fadeInUpSub {
	0% {
		opacity: 0;
		/* Y軸(縦)に30px下がった状態からスタート。角度は変数から呼び出す */
		transform: translateY(30px) rotate(var(--rotate));
	}
	100% {
		opacity: 1;
		/* 元の位置に戻る。角度は変数から呼び出す */
		transform: translateY(0) rotate(var(--rotate));
	}
}

/* ペンキで線を引く（ドローアニメーション） */
@keyframes drawPaint {
	100% {
		stroke-dashoffset: 0;
	}
}

/*
=========================================================================
	leadSection
========================================================================= */
.leadSec {
	text-align: center;
}
.leadSec h2 {
	font-size: clamp(3rem, 8vw, 3.6rem);
	line-height: 1.3;
}
.leadSec p {
	margin-bottom: 6.4%;
}
.leadSec hr.shortLine {
	width: 48px;
	border-bottom: 1px solid #141414;
	margin: 6.4% auto;
}
@media only screen and (min-width: 1025px) {
	.leadSec hr.shortLine {
		margin: 0.83% auto;
	}
	.leadSec p {
		margin-bottom: 2.5%;
	}
}
/*
=========================================================================
	itemSection
========================================================================= */
.itemSec {
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.itemSec .itemIntroimgBox {
	margin-bottom: 6.4%;
}
.itemSec .itemIntroBox {
	width: 74.66%;
	margin: 0 auto 23.33%;
}
.itemSec .itemIntroBox h3 {
	font-size: 25px;
	line-height: 1.5;
}

.itemDetailWrap {
	width: 100%;
	height: 100svh; /* 画面の高さいっぱいに固定 */
	position: relative; /* 子要素を絶対配置するための基準にする */
	overflow: hidden; /* 窓枠からはみ出た部分を隠す */
	/* ★追記：外側の余白干渉を防ぎ、透明な箱（pin-spacer）の計算狂いをなくす */
	margin: 0;
}
/* ▼ 1.【奥】背景画像の設定 */
.itemDetailBg {
	position: absolute; /* 窓枠に対して絶対配置 */
	top: 0;
	left: 0;
	width: 100%;
	height: 120%; /* パララックスで上にズラすための「余白」として、100vhより少し大きくする */
	z-index: 1; /* 一番奥に配置 */
}
.itemDetailBg img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 背景画像を枠いっぱいに綺麗に敷き詰める */
}
/* ▼ 2.【手前】巻物の枠の設定 */
.itemDetailScrollArea {
	position: relative;
	width: 100%;
	height: 100%; /* 親（窓枠）と同じ高さ（100vh）にする */
	z-index: 2; /* 背景画像より手前に配置 */
}

/* ▼ 3.【巻物の中身】の設定 */
.itemDetailContent {
	/* ★追記：中身も「絶対配置」にして、親の左上にピタッとくっつける */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2; /* 背景画像(z-index:1)より手前に配置 */

	/* 中身の高さはブルゾンの数に応じて自動で伸びます */
	padding: 50px 0; /* 最初と最後に少し余白を持たせると、スクロールの始まりと終わりが綺麗です */
}
.itemDetailBox {
	width: 100%;
	position: relative;
}
.itemDetailBox {
	width: 100%;
	height: 0;
	padding-top: 100%;
	margin-bottom: 12.8%;
}
hr.itemTxtLine {
	width: 100%;
	border-bottom: 1px solid var(--colorBlack);
}
.itemDetailBox.itemBox1 .imgBox,
.itemDetailBox.itemBox3 .imgBox {
	position: absolute;
	width: 65.33%;
	top: 0;
	left: 2%;
}
.itemDetailBox.itemBox2 .imgBox,
.itemDetailBox.itemBox4 .imgBox {
	position: absolute;
	width: 65.33%;
	top: 2%;
	right: 2%;
}
.itemDetailBox.itemBox1 .txtBox,
.itemDetailBox.itemBox3 .txtBox {
	position: absolute;
	width: 65.33%;
	bottom: 0;
	right: 2%;
}
.itemDetailBox.itemBox2 .txtBox,
.itemDetailBox.itemBox4 .txtBox {
	position: absolute;
	width: 65.33%;
	bottom: 0;
	left: 2%;
}
.itemDetailBox .txtBox h4 {
	font-size: clamp(1.8rem, 4.8vw, 2.4rem);
	font-weight: 500;
}
@media only screen and (min-width: 541px) {
	.itemDetailBox {
		padding-top: 86%;
	}
}
@media only screen and (min-width: 1025px) {
	.itemIntroFlex {
		display: flex;
		width: 100%;
		max-width: 1384px;
		margin: 0 auto;
		flex-direction: row-reverse;
		justify-content: center;
		align-items: stretch;
	}
	.item02 .itemIntroFlex {
		display: flex;
		width: 100%;
		max-width: 1384px;
		margin: 0 auto;
		flex-direction: row;
		justify-content: center;
	}
	.itemIntroFlex .itemIntroBox {
		width: 45%;
		padding: 0 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: auto;
	}
	.itemIntroFlex .itemIntroimgBox {
		width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.itemIntroBox h3 {
		padding-top: 2.5%;
	}

	.itemDetailBox {
		width: 980px;
		height: auto;
		padding-top: 0;
		margin: 6.4% auto;
		display: flex;
	}
	.itemDetailBox.itemBox2,
	.itemDetailBox.itemBox4 {
		flex-direction: row-reverse;
	}
	.itemDetailBox.itemBox1 .imgBox,
	.itemDetailBox.itemBox2 .imgBox,
	.itemDetailBox.itemBox3 .imgBox,
	.itemDetailBox.itemBox4 .imgBox {
		position: static;
		width: 50%;
	}
	.itemDetailBox.itemBox1 .txtBox,
	.itemDetailBox.itemBox2 .txtBox,
	.itemDetailBox.itemBox3 .txtBox,
	.itemDetailBox.itemBox4 .txtBox {
		position: static;
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 5%;
	}
}
/* プロダクトカラーバリエーション セクション */

.prodColorsSec .prodColorsTitle {
	line-height: clamp(2.2rem, 5.86vw, 2.5rem);
	text-align: center;
	margin: 15% auto 0;
}

.prodColorFlex {
	width: 96%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}
.prodColorFlex .prodColorBox {
	margin: 0 2.5% 2.5% 0;
	width: calc(50% - 2.5%);
	text-align: center;
}

.prodColorFlex .prodColorBox:nth-child(2n) {
	margin-right: 0;
}
.prodColorsSec .prodColorsTitle h3 {
	font-size: clamp(24px, 6.4vw, 34px);
	text-align: center;
	margin: 0;
}
.prodColorsSec .prodColorsTitle h4 {
	font-size: clamp(15px, 4vw, 18px);
	text-align: center;
}
.prodColorsSec .prodColorsTitle h5 {
	font-size: clamp(12px, 3.2vw, 14px);
	text-align: center;
}
.prodColorsSec .prodColorsTitle h6 {
	font-size: clamp(13px, 3.46vw, 15px);
	text-align: center;
}
.prodColorFlex .prodColorBox h3 {
	font-size: clamp(17px, 4.53vw, 15px);
	line-height: 1.2;
	text-align: center;
	margin: 0;
}
.prodColorFlex .prodColorBox h4 {
	font-size: clamp(16px, 4.26vw, 18px);
	line-height: 1;
	text-align: center;
	margin: 2% 0;
}
.prodColorFlex .prodColorBox h5 {
	font-size: clamp(12px, 3.2vw, 14px);
	line-height: 1;
	text-align: center;
}
.prodColorFlex .prodColorBox h6 {
	font-size: clamp(11px, 2.93vw, 13px);
	line-height: 1;
	text-align: center;
}
.prodColorBox p.buyBtn {
	display: inline-block;
	padding: 1px 20px 2px;
	background-color: #fff;
	color: #2d2d2d;
	font-size: 11px;
	margin: 5% 0;
	border: 1px solid #2d2d2d;
	text-align: center;
}
.linkbox {
	width: 100%;
	position: relative;
}

.prodColorBox a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
}
@media only screen and (min-width: 1024px) {
	.prodColorsSec .prodColorsTitle {
		margin: 8% auto 2%;
	}
	.prodColorsSec .prodColorsTitle h3 {
		font-size: 28px;
		padding-bottom: 0.5%;
	}
	.prodColorsSec .prodColorsTitle h4 {
		font-size: 20px;
	}
	.prodColorFlex {
		width: 80%;
		max-width: 1480px;
	}
	.prodColorFlex .prodColorBox {
		margin: 0 2.5% 2.5% 0;
		width: calc(25% - 2.5%);
		text-align: center;
	}
	.prodColorFlex .prodColorBox:nth-child(2) {
		margin-right: 2.5%;
	}
	hr.hrLine {
		display: block;
		width: 30%;
		border-bottom: 1px solid #6e6e6e;
		margin: 8% auto 5%;
	}
}
/* =========================================================================
       ノベルティ告知エリア
       ========================================================================= */
.novelty {
	padding: 10% 5% 10%;
	display: flex;
	justify-content: center;
}
.noveltyTicket {
	position: relative;
	padding: 80px 50px;
	text-align: center;
}
.ticketCorner {
	position: absolute;
	width: 20px;
	height: 20px;
	border-color: var(--colorBlack);
	border-style: solid;
}
.cornerTl {
	top: 0;
	left: 0;
	border-width: 1px 0 0 1px;
}
.cornerTr {
	top: 0;
	right: 0;
	border-width: 1px 1px 0 0;
}
.cornerBl {
	bottom: 0;
	left: 0;
	border-width: 0 0 1px 1px;
}
.cornerBr {
	bottom: 0;
	right: 0;
	border-width: 0 1px 1px 0;
}
.noveltyTitle {
	font-family: var(--fontEn);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	margin-bottom: 16px;
}
.noveltyTicket h5 {
	font-size: clamp(12px, 3.2vw, 14px);
	margin-bottom: 10px;
	font-family: var(--fontEn);
	letter-spacing: 0.1em;
}
.noveltyTicket h2 {
	font-size: clamp(18px, 4.8vw, 28px);
	font-weight: 600;
	margin-bottom: 10px;
	font-family: var(--fontEn);
	letter-spacing: 0.1em;
}
.noveltyTicket p {
	font-size: clamp(12px, 3.2vw, 16px);
}
@media only screen and (min-width: 1024px) {
	.novelty {
		padding: 60px 5% 100px;
	}
	.noveltyTicket {
		padding: 50px 30px;
	}
	.noveltyTitle {
		font-size: 1.2rem;
	}
}
/* ==========================================
ending Section
========================================== */
.endingSec {
	margin-bottom: 21.33%;
}
.modelImg {
	width: 70%;
	margin: 0 auto;
}
.logoImg {
	width: 70%;
	margin: 30% auto;
}
@media only screen and (min-width: 1024px) {
	.endingSec {
		display: flex;
		width: 66.66%;
		max-width: 1280px;
		margin: 0 auto 10.41%;
	}
	.modelImg {
		width: 50%;
		margin: 0 auto;
	}
	.logoImg {
		width: 50%;
		padding: 0 10%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
	}
}
/*ヘッダーエリア*/
.header {
	width: 100%;
}
.header {
	padding-bottom: 8px;
	margin-bottom: -8px;
}
.toplogo {
	width: 100%;
	height: 100px;
	text-align: center;
}
img.blandLogo {
	height: 80px;
	width: auto;
	margin: 10px;
}
/* トップに戻るボタン */
.back-to-top {
	display: none;
	position: fixed;
	right: 5%;
	bottom: 5%;
	color: #fff;
	padding: 2rem;
	border-radius: 50%;
	display: inline-block;
	text-decoration: none;
	z-index: 10000;
}
.back-to-top::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	width: 70px;
	height: 70px;
	background-color: #333;
	border-radius: 50%;
	z-index: -1;
}