@charset "utf-8";

/*このフレームだけの違い（メイン画像の文字の大きさ・写真の回り方）
---------------------------------------------------------------------------
3d1 の兄弟フレーム（3d1-ring・3d1-tilt・3d1-spiral・3d1-drum・3d1-stack・3d1-coverflow・3d1-inner）は、
layout.html・mainimg.html・js/main.js・css/style.css が同じです。違いはこのファイルと theme.css だけです。
写真の間隔（--carousel-gap）と円を作る最低枚数（--carousel-panels）も、ここで決めます。
---------------------------------------------------------------------------*/

/*メイン画像（3Dカルーセル・カバーフロー）
---------------------------------------------------------------------------*/
.mainimg * {margin: 0;padding: 0;}

/*メイン画像全体を囲むブロック*/
.mainimg {
	position: relative;
	overflow: hidden;	/*外側に回り込んだ写真を隠します*/
	padding: 3rem var(--content-space-l) 2rem;	/*上に3文字分、左右にtheme.cssのcontent-space-l、下に2文字分の余白*/
}

/*テキストブロック（大きなキャッチコピーと、右の英語のキャッチコピー）*/
.mainimg .text {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;	/*英語とキャッチコピーの間に空けるスペース。2文字分。*/
}

/*大きなキャッチコピー*/
.mainimg .text h2 {
	font-family: var(--heading-font);	/*theme.cssのheading-fontを読み込みます。*/
	font-weight: 500;		/*文字の太さ*/
	font-size: 4.4vw;		/*文字サイズ。画面幅の4.4%。*/
	line-height: 1.5;		/*行間*/
	letter-spacing: 0.15em;	/*文字間隔を広く*/
}

/*英語のキャッチコピーの中の斜体（iタグ）*/
.mainimg .text .catch i {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

/*右の英語のキャッチコピー*/
.mainimg .text .catch {
	font-family: var(--accent-font);	/*theme.cssのaccent-fontを読み込みます。*/
	font-size: 1.8rem;		/*文字サイズ180%*/
	line-height: 1.3;		/*行間*/
	letter-spacing: 0.02em;	/*文字間隔*/
	margin-top: 1.5rem;		/*上に空けるスペース。大きなキャッチコピーと上の高さを揃えます。*/
}

/*キャッチコピーの下の小さな一行*/
.mainimg .text .note {
	font-family: var(--accent-font);	/*theme.cssのaccent-fontを読み込みます。*/
	font-size: 0.8rem;		/*文字サイズ80%*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	opacity: 0.7;			/*少しだけ薄く*/
	margin-top: 1rem;		/*上に空けるスペース*/
}

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

	/*テキストブロックを縦並びに*/
	.mainimg .text {
		flex-direction: column;
		gap: 0;
	}

	/*大きなキャッチコピー*/
	.mainimg .text h2 {
		font-size: 7vw;	/*文字サイズ。画面幅の7%。*/
	}

	/*キャッチコピー*/
	.mainimg .text .catch {
		font-size: 1.2rem;	/*文字サイズ120%*/
	}

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


/*カルーセルの表示エリア
---------------------------------------------------------------------------*/
.mainimg .carousel {
	position: relative;
	height: 30vw;			/*表示エリアの高さ。写真の高さ（.panelのwidthと同じ）より少し大きくします。*/
	margin-top: 2rem;		/*上に空けるスペース。2文字分。*/
	perspective: 100vw;		/*奥行きの強さ。小さいほど遠近感が強くなります。*/
	opacity: 0;				/*写真の準備ができるまで透明にしておきます*/
	transition: opacity 0.8s;	/*ふわっと表示する時間。0.8秒。*/
}

/*写真の準備ができたら表示（jsが.is-readyを付けます）*/
.mainimg .carousel.is-ready {
	opacity: 1;
}

/*写真の下にうっすら落ちる影*/
.mainimg .carousel::after {
	content: "";
	position: absolute;z-index: -1;
	left: 25%;
	right: 25%;
	bottom: -1vw;
	height: 4vw;
	background: radial-gradient(closest-side, rgba(59,48,43,0.15), transparent);	/*中心ほど濃い楕円の影*/
}

/*写真を並べる台（カバーフローでは回転させず、写真1枚ずつの位置で動かします）*/
.mainimg .ring {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;	/*中の写真を立体的に並べる指定*/
}

/*写真１枚あたり*/
.mainimg .panel {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24vw;			/*写真の幅。画面幅の24%。*/
	aspect-ratio: 1 / 1;	/*写真の縦横比。正方形。*/
	/*
	正面から左右に並べて、横の写真は内側へ向けます。
	--offset（正面から何枚目か）、--dir（右なら1、左なら-1）、--dist（正面から何枚離れているか）はjsが入れます。
	・7vw … 横の写真同士の間隔
	・14vw … 正面の写真と、すぐ横の写真の間隔
	・-6vw … 1枚離れるごとに奥へ下げる距離
	・-55deg … 横の写真の向き（0degにすると正面を向いたまま並びます）
	*/
	transform: translate(-50%, -50%) translateX(calc(var(--offset) * 7vw + var(--dir) * 14vw)) translateZ(calc(var(--dist) * -6vw + var(--pop, 0px))) rotateY(calc(var(--dir) * -55deg));
	backface-visibility: hidden;	/*裏側は表示しない*/
	opacity: 0;
	filter: saturate(0.5) brightness(0.97);	/*正面以外の写真の色。彩度50%、明るさ97%。どちらも1にすると元の色のままになります。*/
	box-shadow: 0 1vw 2vw rgba(59,48,43,0.12);	/*写真の影*/
	transition: opacity 1.2s, filter 1.2s, transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);	/*変化にかける時間。1.2秒。*/
	cursor: pointer;
}
.mainimg .panel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*正面の写真（少し手前に出して、元の色に戻します）*/
.mainimg .panel.pos0 {
	--pop: 4vw;	/*手前に出る距離。0にすると出ません。*/
	filter: saturate(1) brightness(1);	/*元の色*/
	opacity: 1;
	cursor: auto;
}

/*正面からの距離ごとの濃さ（pos1が正面の隣、pos2がその隣…。指定の無いpos4以降は表示しません）*/
.mainimg .panel.pos1 {opacity: 1;}
.mainimg .panel.pos2 {opacity: 1;}
.mainimg .panel.pos3 {opacity: 0.5;}

/*写真の説明（下のキャプション欄にjsがコピーするので、ここでは非表示）*/
.mainimg .panel .caption {display: none;}

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

	/*表示エリア*/
	.mainimg .carousel {
		height: 64vw;	/*表示エリアの高さ*/
		perspective: 150vw;	/*奥行きの強さ*/
	}

	/*写真１枚あたり（間隔なども、写真の大きさに合わせて広げます）*/
	.mainimg .panel {
		width: 56vw;	/*写真の幅。画面幅の56%。*/
		transform: translate(-50%, -50%) translateX(calc(var(--offset) * 6vw + var(--dir) * 28vw)) translateZ(calc(var(--dist) * -12vw + var(--pop, 0px))) rotateY(calc(var(--dir) * -55deg));
	}

	/*正面の写真が手前に出る距離*/
	.mainimg .panel.pos0 {
		--pop: 6vw;
	}

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

	/*動きを減らす設定にしている端末では、すぐに切り替えます*/
	@media (prefers-reduced-motion: reduce) {

	.mainimg .panel {
		transition: none;
	}

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


/*写真が少ないとき（jsが.is-flatを付けます）は回さずに、正面の1枚だけを表示します
---------------------------------------------------------------------------*/
.mainimg.is-flat .ring {transform: none;}
.mainimg.is-flat .panel {transform: translate(-50%, -50%) scale(1.04);opacity: 0;}	/*1.04倍＝回っている時の正面の写真とほぼ同じ大きさ*/
.mainimg.is-flat .panel.pos0 {opacity: 1;filter: none;}
.mainimg.is-flat .carousel-ctrl {display: none;}