@charset "utf-8";

/*pickup4の近くに移動よてい。右左つくる２０２６０５*/

.effects-slideimg2-circle-parts-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}








/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts1 {
	--bleed-x: 5vw;	/*エイリアスに*/
	width: calc(100% + (var(--bleed-x) * 2));	/*section内容の幅＋両サイドpadding（対象要素の幅）*/
	margin-left: calc(var(--bleed-x) * -1);
	margin-right: calc(var(--bleed-x) * -1);
	max-width: none;
}

/*画像がupするパララックス#2026051
---------------------------------------------------------------------------*/
/*ブロック全体*/
.effects-bg-slideup1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.effects-bg-slideup1.overlay1::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move1 {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.effects-bg-slideup1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}


/*#2026052画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.effects-bg-slideup-movie1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.effects-bg-slideup-movie1.overlay12::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move2 {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.effects-bg-slideup-movie1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*#2026053ui-tools-thumbnail-changer3-parts（詳細ページ向けのサムネイル切り替えブロック）
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view3-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
}

/*矢印＋サムネイル列を囲むブロック*/
.thumbnail-nav3 {
	display: flex;
	align-items: center;
	justify-content: flex-start;	/*左寄せで*/
	gap: 8px;						/*矢印と列の間隔*/
	max-width: 1000px;				/*最大幅*/
	margin:0 auto 2rem;				/*下に空けるスペース。２文字分。*/
}

/*左右矢印*/
.thumb-arrow3 {
	flex: 0 0 30px;		/*30pxが幅。お好みで。*/
	line-height: 60px;	/*高さ。お好みで。*/
	font-size: 18px;	/*矢印の文字サイズ*/
	text-align: center;
	color: #fff;		/*矢印の色*/
	background: rgba(0,0,0,0.3);	/*矢印の背景色*/
	cursor: pointer;
	user-select: none;
}

/*矢印非表示*/
.thumb-arrow3.is-off {display: none;}

/*横スクロール用ラッパー*/
.thumbnail-wrapper3 {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.thumbnail-wrapper3::-webkit-scrollbar{display: none;}

/*サムネイル全体を囲むブロック*/
.ui-tools-thumbnail-changer3-parts {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	margin: 0 auto;
}

/*サムネイル画像*/
.ui-tools-thumbnail-changer3-parts img {
	width: 100px;	/*サムネイルの幅*/
	margin: 2px;	/*サムネイル間のスペース*/
	cursor: pointer;
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
	display: block;
}
/*動画サムネ用ラッパ（videoはJSでここに入る）*/
.ui-tools-thumbnail-changer3-parts .thumb-wrap {
	position: relative;
	display: inline-block;
	width: 100px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s;
	background: #000;
}

.ui-tools-thumbnail-changer3-parts img,
.ui-tools-thumbnail-changer3-parts .thumb-wrap {
	flex: 0 0 auto;
}

/*サムネイル動画*/
.ui-tools-thumbnail-changer3-parts .thumb-wrap > video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	background: #000;
}
.ui-tools-thumbnail-changer3-parts img:hover,
.ui-tools-thumbnail-changer3-parts .thumb-wrap:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

/*動画サムネの上の「再生」アイコン*/
.ui-tools-thumbnail-changer3-parts .thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ui-tools-thumbnail-changer3-parts .thumb-play i {
	background: #ff0000;
	color: #fff;
	border-radius: 9999px;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1;
}

/*大きな表示の中身（画像・動画）*/
.thumbnail-view3-parts img,
.thumbnail-view3-parts video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/*openclose（よく頂く質問ブロック）月1パリのお菓子クラスのFAQ main-plusplusplus  とペア202605
---------------------------------------------------------------------------*/
/*質問*/
.ui-tools-openclose4-parts {background: #ffffff;
	position: relative;
	padding: 1.2rem 3rem 1.2rem 1.2rem;	/*上下に1.2文字分、右に3文字分（＋アイコン用のスペース）、左に1.2文字分の余白。*/
	border-bottom: 1px solid 	#6b6351;	/*下に薄い区切り線。色はtheme.cssのbg-border-colorを読み込みます。*/
	cursor: pointer;	/*マウスカーソルを指マークに*/
	transition: background 0.2s;	/*背景色の変化を0.2秒かけて*/
	user-select: none;	/*テキスト選択を無効にする*/
	font-weight: bold;	/*太字*/line-height: 1.3;	/*行間*/
}

/*1つ目の質問の上にも線を入れる（一番上のフチを揃える）*/
.ui-tools-openclose4-parts:first-of-type {
	border-top: 1px solid #6b6351;
}

/*質問のマウスオン時*/
.ui-tools-openclose4-parts:hover {
	background: #fff4ee;	/*背景色。theme.cssのlight-colorを読み込みます。*/
}
/*右端の＋アイコン：横線（::before）*/
.ui-tools-openclose4-parts::before {
	content: "";
	position: absolute;
	right: 1.2rem;	/*右からの位置。1.2文字分。*/
	top: 50%;
	width: 14px;	/*横線の長さ*/
	height: 2px;	/*横線の太さ*/
	background: #6b6351;	/*線の色。theme.cssのprimary-colorを読み込みます。*/
	transform: translateY(-50%);
	transition: transform 0.3s, background 0.3s;	/*回転と色変化を0.3秒かけてなめらかに*/
}

/*右端の＋アイコン：縦線（::after）*/
.ui-tools-openclose4-parts::after {
	content: "";
	position: absolute;
	right: calc(1.2rem + 6px);	/*横線の真ん中に縦線が重なる位置（横線14px − 縦線2px の半分=6px）*/
	top: 50%;
	width: 2px;	/*縦線の太さ*/
	height: 14px;	/*縦線の長さ*/
	background: #6b6351;	/*線の色*/
	transform: translateY(-50%);
	transition: transform 0.3s, background 0.3s;
}

/*開いている時（両方の線を45度回転して＋を×に変化）*/
.ui-tools-openclose4-parts.active::before,
.ui-tools-openclose4-parts.active::after {
	transform: translateY(-50%) rotate(45deg);
	background: #ffd3bb;	/*クリック時の色*/
}

/*回答*/
.ui-tools-openclose4-parts + dd {
	padding: 1rem 1.2rem 1.5rem;	/*上に1文字分、左右に1.2文字分、下に1.5文字分の余白。*/
	border-bottom: 1px solid #6b6351;	/*下に薄い区切り線。*/
	font-size: 0.95rem;	/*文字サイズ95%*/
	line-height: 1.8;	/*行間*/
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

	/*質問の余白を狭く*/
	.ui-tools-openclose4-parts {
		padding: 1rem 2.5rem 1rem 1rem;	/*上下に1文字分、右に2.5文字分、左に1文字分。*/
	}

	/*＋アイコンを少し小さく*/
	.ui-tools-openclose4-parts::before {
		right: 1rem;	/*右からの位置。1文字分。*/
		width: 12px;	/*横線の長さ*/
	}
	.ui-tools-openclose4-parts::after {
		right: calc(1rem + 5px);	/*横線の真ん中に合わせる（横線12px − 縦線2px の半分=5px）*/
		height: 12px;	/*縦線の長さ*/
	}

	/*回答の余白を狭く*/
	.ui-tools-openclose4-parts + dd {
		padding: 0.8rem 1rem 1.2rem;
	}

	}/*追加指定ここまで*/