@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;	/*文字間隔を広く*/
}

/*右の英語のキャッチコピー*/
.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: 40vw;			/*表示エリアの高さ。写真の高さ（.panelのwidthの4/3）と、奥に重なるカードのぶんの高さをとります。*/
	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: 20%;
	right: 20%;
	bottom: -2vw;
	height: 4vw;
	background: radial-gradient(closest-side, rgba(0,0,0,0.12), transparent);	/*中心ほど濃い楕円の影*/
}

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

/*写真１枚あたり*/
.mainimg .panel {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26vw;			/*写真の幅。画面幅の26%。*/
	aspect-ratio: 3 / 4;	/*写真の縦横比。横3：縦4（縦長）。*/
	/*
	カードを奥へ重ねます。--dist（正面から何枚離れているか）はjsが入れます。
	・3vw … 1枚奥へいくごとに右へずらす距離
	・-1.5vw … 1枚奥へいくごとに上へずらす距離
	・-5vw … 1枚奥へいくごとに奥へ下げる距離
	・4deg … 1枚奥へいくごとに傾ける角度（0にするとまっすぐ重なります）
	・-1.5deg … 一番手前の写真の傾き（0にするとまっすぐになります）
	*/
	transform: translate(-50%, -50%) translateX(calc(var(--dist) * 3vw)) translateY(calc(var(--dist) * -1.5vw)) translateZ(calc(var(--dist) * -5vw + var(--pop, 0px))) rotate(calc(var(--dist) * 4deg - 1.5deg));
	padding: 0.8vw;			/*写真のまわりのフチの太さ。画面幅の0.8%。*/
	background: #fdfbf8;	/*フチの色（少し温かみのある白）*/
	box-shadow: 0 0.2vw 0.4vw rgba(74,64,60,0.12), 0 1.5vw 3vw rgba(74,64,60,0.18);	/*写真の影。すぐ下の濃い影と、ふんわり広がる影の2つを重ねています。*/
	backface-visibility: hidden;	/*裏側は表示しない*/
	opacity: 0;
	filter: saturate(0.6) brightness(0.97);	/*正面以外の写真の色。彩度60%、明るさ97%。どちらも1にすると元の色のままになります。*/
	transition: opacity 1.2s, filter 1.2s, transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);	/*変化にかける時間。.ringの回転時間と揃えます。*/
	cursor: pointer;
}
.mainimg .panel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*正面の写真（手前にせり出して、元の色に戻します）*/
.mainimg .panel.pos0 {
	--pop: 0px;		/*手前に出す距離。カードスタックでは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.6;}

/*通り過ぎたカード（左へ傾きながら抜けていきます）*/
.mainimg .panel.prev {
	transform: translate(-50%, -50%) translateX(-60vw) rotate(-10deg);	/*-60vwは左へ動く距離、-10degは傾き*/
	opacity: 0;
	pointer-events: none;	/*クリックできないようにする*/
}

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

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

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

	/*写真１枚あたり*/
	.mainimg .panel {
		width: 60vw;	/*写真の幅。画面幅の60%。*/
		padding: 1.6vw;	/*フチの太さ。画面幅の1.6%。*/
	}

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

	/*動きを減らす設定にしている端末では、回転をすぐに切り替えます*/
	@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.0);opacity: 0;}	/*1.0倍＝回っている時の正面の写真とほぼ同じ大きさ*/
.mainimg.is-flat .panel.pos0 {opacity: 1;filter: none;}
.mainimg.is-flat .carousel-ctrl {display: none;}