@charset "utf-8"; /*@charset "UTF-8";     コメント */ /*css初期設定 start*/
html {
	font-size: 62.5%; /*文字標準*/
}
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none; /*リンクデコレーションリセット*/
} /*大きさの計算*/
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
hr.hrLine {
	display: block;
	width: 30%;
	border-bottom: 1px solid #6e6e6e;
	margin: 15% auto 3%;
}

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;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: normal;
	color: #333333;
	background-color: #ffffff;
}

h2 {
	font-weight: 800;
	font-size: 18px;
	line-height: 22px;
}
h3 {
	font-weight: 700;
	font-size: 24px;
	font-style: italic;
}
h4 {
	font-weight: 500;
	font-size: 16px;
	font-style: italic;
}

h5 {
	font-weight: 400;
}
h6 {
	font-weight: 400;
}
p {
	font-weight: 400;
}
.eng {
	font-family: 'Oswald', 'Noto Sans JP', sans-serif;
}
/*iOSフォーム要素の初期化*/
input,
button,
textarea,
select {
	-webkit-appearance: none;
	appearance: none;
} /*画像の調整*/
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

@media (max-width: 1023px) {
	.sp {
		display: block !important;
	}
	.pc {
		display: none !important;
	}
	.br-sp {
		display: inline-block;
	}
}
@media only screen and (min-width: 1024px) {
	.sp {
		display: none !important;
	}
	.pc {
		display: block !important;
	}
	.br-sp {
		display: none;
	}
}
#copyright {
	font-size: 1.2rem;
}
#main-footer a {
	font-size: 1.2rem;
} /*css初期設定 end*/ /*main start*/

.contentsSection {
	padding: 60px 20px; /* セクションの上下左右の余白 */
}
.mainWrap {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
/* heroSection */
/* heroSection */
.heroSection {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 157.33%;
	overflow: hidden;
	z-index: 10;
}

/* 各画像スライドの共通スタイル */
.heroSlide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1);
	transition: transform 1s ease-out, opacity 0.8s ease-out;
}

.heroSlide.is-active {
	opacity: 1;
	transform: scale(1.2);
}

.heroSlide.is-hidden {
	opacity: 0;
}

/*
 * まずはスマホ用の画像（sp-image）をデフォルトで設定する
*/
#slide1 {
	background-image: url('../images/heroImg01_sp.jpg');
} /* 1枚目のSP用画像 */
#slide2 {
	background-image: url('../images/heroImg02_sp.jpg');
} /* 2枚目のSP用画像 */
#slide3 {
	background-image: url('../images/heroImg03_sp.jpg');
} /* 3枚目のSP用画像 */

/* タイトルSVGのスタイル */
.heroTitle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 600px;
	height: auto;
	opacity: 0;
	transition: opacity 1.2s ease-out;
	z-index: 20;
}

.heroTitle.is-visible {
	opacity: 1;
}
@media screen and (min-width: 1024px) {
	.heroSection {
		padding-top: 49.47%;
	}
	/* PC用の画像（pc-image）に上書きする */
	#slide1 {
		background-image: url('../images/heroImg01.jpg');
	} /* 1枚目のPC用画像 */
	#slide2 {
		background-image: url('../images/heroImg02.jpg');
	} /* 2枚目のPC用画像 */
	#slide3 {
		background-image: url('../images/heroImg03.jpg');
	} /* 3枚目のPC用画像 */
}
/* leadSection */
/* leadSection */
.leadSection {
	width: 100%;
	display: block;
	overflow-x: hidden;
}
.leadBlock01 {
	margin: 15% auto;
	padding: 0 7.3%;
}
.pliceBlock {
	padding-top: 3%;
}
.pliceBlock p {
	font-weight: 600;
}
.leadSection h2 {
	font-size: 25px;
	margin-bottom: 6%;
}
.leadBlock02 {
	padding: 15% 0;
	background-color: rgba(219, 230, 216, 0.73);
}
.leadBlock02 .leadInner {
	padding: 0 7.3%;
	margin: 0 auto;
}
.leadSection .leadBlock02 .leadInner h2 {
	font-size: 25px;
	margin-bottom: 1%;
}
.leadSection .leadBlock02 .leadInner h4 {
	font-size: 15px;
	margin-bottom: 3%;
}
.leadSection .leadBlock02 .leadInner p {
	padding-top: 3%;
}
@media screen and (min-width: 1024px) {
	.leadBlock01 {
		display: block;
		width: 100%;
		min-width: 1600px;
		height: 0;
		padding-top: 820px;
		position: relative;
		margin: 4% 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.leadBlock01 .leadTitle {
		position: absolute;
		width: 25.52%;
		min-width: 506px;
		top: 10.78%;
		left: 32.75%;
	}
	.leadSection h2 {
		font-size: 45px;
	}
	.leadBlock01 .leadTxt {
		position: absolute;
		width: 28.66%;
		min-width: 546px;
		top: 13.24%;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.leadBlock01 .leadImg01 {
		position: absolute;
		width: 20.62%;
		top: 11.31%;
		left: 72.88%;
	}
	.leadBlock01 .leadImg02 {
		position: absolute;
		width: 9.89%;
		top: 56.39%;
		left: 73.98%;
	}
	.leadBlock01 .leadImg03 {
		position: absolute;
		width: 12.89%;
		top: 34.21%;
		left: 14.52%;
	}
	.leadBlock02 {
		padding: 5% 0;
	}
	.leadBlock02 .leadInner {
		width: 51.04%;
		min-width: 980px;
		display: flex;
		flex-wrap: nowrap;
		padding: 0;
	}
	.leadBlock02 .leadInner .lead-f {
		width: 50%;
	}
	.leadBlock02 .leadInner .lead-f.lead0Txt {
		padding: 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
.itemLineupSection {
	width: 100%;
	display: block;
	margin: 15% auto;
	padding: 0 7.3%;
}
.itemLineupSection h3 {
	font-size: 22px;
	margin-bottom: 6%;
	line-height: 1.2;
}
/* --- 共通スタイル --- */
.detailImgBlock {
	position: relative; /* 子要素を絶対配置するための基準点にする */
	width: 100%;
	max-width: 800px; /* PCでの最大幅を指定 */
	margin: 0 auto;
}

.product-image {
	width: 100%;
	display: block; /* 画像下の余分な隙間を消す */
}

.features-wrapper {
	position: absolute; /* 商品画像の上に重ねる */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.feature-item {
	position: absolute; /* アイコンの位置を決めるため */
}

.feature-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%; /* 円形にする */
	font-size: 18px;
	font-weight: bold;
	cursor: pointer; /* マウスカーソルを指の形に */
	transition: transform 0.2s; /* ホバー時のアニメーション */
	padding: 0;
	border: 1px #fff solid;
}
.feature-icon img {
	padding: 0;
	width: 100%;
}
.feature-icon:hover {
	transform: scale(1.1); /* ホバー時に少し大きくする */
}

.modal-content {
	display: none; /* 最初は非表示にしておく */
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	padding: 20px;
	z-index: 1001; /* モーダルが最前面に来るように */
}
/* モーダルが表示されている状態 */
.modal-content.active {
	display: block;
}

/* モーダル内の画像 */
.modal-content img {
	width: 100%;
	height: auto;
}
.modal-close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	background: #eee;
	border: none;
	border-radius: 50%;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	z-index: 1000;
}
.modal-overlay {
	display: none; /* 最初は非表示 */
	position: fixed; /* 画面全体に固定 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
	z-index: 1000; /* モーダルのすぐ下に来るように */
}

/* --- SPのスタイル (画面幅が767px以下の場合) --- */
@media (max-width: 1024px) {
	.modal-content {
		position: fixed; /* 画面に固定表示 */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); /* 上下左右中央に配置 */
		width: 80%;
		max-width: 400px;
		box-sizing: border-box; /* paddingを含めて幅を計算 */
	}
	.modal-content h3 {
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		margin: 2% 0;
	}
}

/* --- PCのスタイル (画面幅が768px以上の場合) --- */
@media (min-width: 1024px) {
	.itemLineupSection {
		width: 51.04%;
		min-width: 980px;
		display: flex;
		flex-wrap: nowrap;
		padding: 0;
		margin: 6% auto;
	}
	.itemLineupSection .textBlock {
		width: 50%;
		padding: 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.itemLineupSection .detailImgBlock {
		width: 50%;
	}
	.modal-content {
		position: absolute; /* アイコンの近くに配置 */
		top: -10%;
		left: -318px; /* アイコンの右横に表示 */
		width: 300px; /* PCでは幅を固定 */
	}
	.modal-content h3 {
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		margin: 2% 0;
	}
}
/* colorSliderSection用　css */
/* colorSliderSection用　css */
.colorSliderSection {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	margin-bottom: 15%;
}
.swiper-wrapper {
	height: auto;
}
.swiper-slide img {
	height: auto;
	width: 100%;
}
.colorSliderSection .swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: 5px;
}
/* swiper1の矢印全体（背景やサイズなど）の調整 */
.swiper1 .swiper-button-next,
.swiper1 .swiper-button-prev {
	width: 20px; /* 矢印のクリック領域の幅 */
	height: 20px; /* 矢印のクリック領域の高さ */
	/* もし背景色をつけたい場合 */
	/* background-color: rgba(255, 255, 255, 0.7); */
	/* border-radius: 50%; */ /* 円形にしたい場合 */
	color: #fff;
	font-size: 24px; /* アイコンのサイズを大きく */
	font-weight: bold; /* アイコンを太字に */
}
.swiper3 .swiper-button-next,
.swiper3 .swiper-button-prev {
	width: 20px; /* 矢印のクリック領域の幅 */
	height: 20px; /* 矢印のクリック領域の高さ */
	/* もし背景色をつけたい場合 */
	/* background-color: rgba(255, 255, 255, 0.7); */
	/* border-radius: 50%; */ /* 円形にしたい場合 */
	color: #fff;
	font-size: 24px; /* アイコンのサイズを大きく */
	font-weight: bold; /* アイコンを太字に */
}

.colorBlock .colorImg img {
	border-radius: 5px;
}
.colorBlock p {
	text-align: center;
	font-size: 22px;
}

/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
	background-color: #333333;
	height: 10px;
	width: 10px;
}

@media (min-width: 1024px) {
	.colorSliderSection {
		width: 88%;
		margin-bottom: 6%;
	}
	/* swiper1のスライドの幅を均等にする（4つの場合） */
	.colorSliderSection .swiper1 .swiper-slide {
		width: calc(25% - 15px); /* spaceBetween: 20 の場合、(20px * 3/4) = 15px で計算 */
	}

	/* 矢印とページネーションを強制的に非表示にする */
	.swiper1 .swiper-button-next,
	.swiper1 .swiper-button-prev,
	.swiper1 .swiper-pagination {
		display: none !important;
	}
	/* swiper3の機能を無効化した際のレイアウト調整 */
	.swiper3 .swiper-wrapper {
		display: flex; /* Flexboxを有効化 */
		justify-content: center; /* 水平方向の中央揃え */
		gap: 20px; /* スライド間の余白 */
		transform: translate3d(0px, 0px, 0px) !important;
	}

	.swiper3 .swiper-slide {
		width: 30%; /* 各スライドの幅を調整（お好みで） */
		max-width: 404px; /* 最大幅を指定 */
	}

	/* 矢印とページネーションを非表示に */
	.swiper3 .swiper-button-next,
	.swiper3 .swiper-button-prev,
	.swiper3 .swiper-pagination {
		display: none;
	}
}

/* garellySection用css */
/* garellySection用css */
.garellySection {
	display: block;
	width: 100%;
	overflow: hidden;
	margin-bottom: 21%;
}
@media (min-width: 1024px) {
	.garellySection {
		margin-bottom: 0;
	}
}
.cvSection {
	width: 100%;
	text-align: center;
	margin: 7% auto 0;
}
.cvSection.lastCv {
	padding: 0 7%;
	margin: 0 auto 20%;
}
a.cvBtn {
	display: inline-block;
	width: 100%;
	max-width: 480px;
	background-color: #ff9046;
	border-radius: 5px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	padding: 5px 0;
}
@media screen and (min-width: 1024px) {
	.cvSection {
		width: 100%;
		text-align: center;
		margin: 7% auto 0;
	}
	.cvSection.lastCv {
		padding: 0 7%;
		margin: 7% auto;
	}
}
/*ヘッダーエリア*/ /* don't delete!!!!!!!!!!!!! */
.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;
}