/*「Simple Movie Serviceのご紹介（テスト）」ページ用スタイル　ディレクトリ：/simplemovie/*/

/*=========================PC用スタイルここから=========================*/


.contents_box {
	font-family: "M PLUS 1", sans-serif;
	font-weight: 400;
}


/* --------------------------メイン--------------------------*/

.mainvisual_area {
	display: block;
	position: relative;
	z-index: 1;
	width: 1100px;
	height: 686px;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	padding-top: 0px;
}

.mv_inner {
	position: relative;
	width: 1100px;
	height: 686px;
	display: flex;
	justify-content: center;
	/* 横中央 */
	align-items: center;
	/* 縦中央 */
}


#mainvisual_box {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1100px;
	height: 686px;
	overflow: visible;
	z-index: 0;
}



#mainvisual_box svg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1100px !important;
	height: 686px !important;
}

.mainvisual_2colum {
	display: flex;
	align-items: center;
	gap: 30px;
}

.mainvisual_logo {
	position: relative;
	z-index: 20;
	/* mainvisual_boxより上 */
	width: 450px;
	height: 450px;
}

@media screen and (max-width: 768px) {
	.mainvisual_2colum {
		flex-direction: column;
		align-items: center;
	}
}

.catch,
.catch_text_box {
	position: relative;
	z-index: 10;

}

.catch {
	display: inline-block;
	font-size: 42px;
	color: #2c2c2c;
	letter-spacing: 0.2em;
}

.catch_line {
	background: #fff;
	display: inline-block;
	padding: 4px 15px;
	line-height: 1.3;
	margin-bottom: 15px;
}

.color-move {
	color: #ed95b1;
}

.color-zu {
	color: #55c0dd;
}

.color-kai {
	color: #f6c440;
	/* もし解も同じ色なら */
}

.catch_text {
	font-size: 15px;
	color: #2c2c2c;
	max-width: 400px;
	letter-spacing: 0.1em;
	padding-top: 15px;
	padding-left: 20px;
}




/* --------------------------説明--------------------------*/

.description {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	padding: 150px 20px;

}

.description_inner {
	max-width: 786px;
	height: 208px;
	background: #fdf5e6;
	border-radius: 30px;
	padding: 50px;
	box-sizing: border-box;
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	/* 縦並び */
	justify-content: center;
	/* 縦中央 */
	align-items: center;
	/* 横中央 */
	text-align: center;
}

.description .title {
	font-size: 29px;
	margin-bottom: 15px;
	font-weight: bold;
	color: #2c2c2c;
	/* 横中央 */
	text-align: center;
	/* 文字も中央 */
	letter-spacing: 0.1em;


	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.description .title::before {
	content: "◆";
	color: #55c0dd;
	font-size: 15px;
}

.description .sentence {
	font-size: 14px;
	line-height: 2;
	color: #2c2c2c;
	margin: 0 auto;
	/* 横中央 */
	text-align: center;
	/* 文字も中央 */
}



.description_img {
	position: absolute;
	right: 20px;
	bottom: 10px;
	width: 225px;
	/* サイズ調整 */
}

.description_img img {
	width: 100%;
	height: auto;
	display: block;
}







/* --------------------------実績--------------------------*/

.work_section {
	padding: 130px 0;
	text-align: center;
	background-color: #fff;
	overflow: hidden;
	/* ガーランドのはみ出し防止 */
}

.work_inner {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

/* 見出しのひし形マーク */
.work_title {
	font-size: 2rem;
	font-weight: bold;
	color: #2c2c2c;
	margin-bottom: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	letter-spacing: 0.1em;
}

.work_title::before {
	content: "◆";
	color: #ed95b1;
	/* ピンク色 */
	font-size: 1rem;
}

/* 動画エリア */
.video_container {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

.video_popup {
	margin: 0 auto;
	display: block;
	width: 100%;
	max-width: 700px;
	height: auto;
	background-color: #d9d9d9;
	border-radius: 15px;
	transition: opacity 0.3s;
	cursor: pointer;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.video_popup:hover {
	opacity: 0.8;
}

.video_popup img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}


.fancybox-inner video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.fancybox-inner,
.fancybox-wrap,
.fancybox-skin {
	overflow: hidden !important;
}

.fancybox-close {
	top: 0px;
	right: 0px;
}


/* ガーランドの配置 */
.garland {
	position: absolute;
	top: 50%;
	width: 400px;
	/* 画像の大きさに合わせて調整 */
	height: 100px;
	background-image: url('/wp-content/themes/basic/img/movieservice_decoration_left.png');
	/* 旗の画像パスを入れてください */
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
	/* ← クリック邪魔しない */
}

.garland.left {
	left: -150px;
	transform: translateY(-50%);
}

.garland.right {
	right: -150px;
	transform: translateY(-50%) scaleX(-1);
	/* 右側は反転 */
}

/* テキスト部分 */
.work_info {
	margin-top: 20px;
	text-align: center;
}

.company_name {
	text-align: center;
	font-size: 1.8rem;
	color: #6e6e6e;
	margin-bottom: -5px;
	font-weight: 500;
	letter-spacing: 0.02em;

}

/* ラベルタグ */
.work_tag {
	display: inline-block;
	padding: 5px 25px;
	color: #f17c5b;
	border-radius: 5px;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.tag-orange {}


/* --------------------------料金表--------------------------*/

/* 全体のコンテナ */
.price_plan_box_3column {
	padding: 50px 20px;
	background-color: #fff;
}

/* 見出し */
.price_plan_title {
	font-size: 2rem;
	font-weight: bold;
	color: #2c2c2c;
	margin-bottom: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	letter-spacing: 0.1em;
	margin-bottom: 60px;
}

.price_plan_title::before {
	content: "◆";
	color: #f6c440;
	font-size: 1rem;
}

/* 区切り線 */
.price_plan_text_box hr {
	width: 200px;
	height: 1px;
	margin: 1.5rem auto;
	border: none;
	background: #6e6e6e;
}

.price_plan_title_bo .price_plan_text_box_inner {
	padding: 15px;
}

.price_plan_text_box_inner {
	padding-top: 15px;
}

/* 横並び */
.price_plan_box_3column_inner {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 50px;
	max-width: 820px;
	margin: 0 auto;
}

/* カード本体 */
.price_plan_text_box {
	width: 240px;
	min-height: 536px;
	background-color: #fdf5e6;
	border-radius: 15px;
	overflow: hidden;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

/* ヘッダー枠 */
.price_plan_title_box {
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* タイトル文字 */
.price_plan_text_box h3 {
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
}

/* ラベル */
.price_label {
	font-weight: bold;
	font-size: 1.8rem;
	letter-spacing: 0.2rem;
	color: #2c2c2c;
	margin-bottom: 5px;
	text-align: center;
}

/* 時間 */
.time_value {
	font-weight: 500;
	font-family: 'Jost', sans-serif;
	font-size: 4rem;
	text-align: center;
	line-height: 1;
	margin-bottom: 7px;
}

/* 金額　*/
.price_value {
	font-weight: 500;
	font-family: 'Jost', sans-serif;
	font-size: 3.9rem;
	text-align: center;
	line-height: 1;
	margin: 0;
}

/* 単位 */
.price_value span,
.time_value span {
	font-size: 2rem;
	font-weight: bold;
	margin-left: 2px;
}

.price_label span {
	font-size: 1.5rem;
	font-weight: bold;
	margin-left: 2px;
}

/* お見積り */
.price_value.estimate {
	font-size: 2.7rem;
	margin-top: 7px;
}

/* 説明 */
.target_text {
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.4;
	margin: 0;
	letter-spacing: 0.1em;
}

/* 特徴 */
.feature_list {
	text-align: left;
	display: inline-block;
	margin-top: 10px;
	font-size: 1.4rem;
	line-height: 2rem;
	letter-spacing: 0.2em;
}

/* ---------------- 色分け ---------------- */

/* ライト */
.price_plan_text_box:nth-child(1) .price_plan_title_box {
	background-color: #70c7e0;
}

.price_plan_text_box:nth-child(1) .price_value,
.price_plan_text_box:nth-child(1) .time_value {
	color: #70c7e0;
}

/* スタンダード */
.price_plan_text_box:nth-child(2) .price_plan_title_box {
	background-color: #ed95b1;
}

.price_plan_text_box:nth-child(2) .price_value,
.price_plan_text_box:nth-child(2) .time_value {
	color: #ed95b1;
}

/* カスタム */
.price_plan_text_box:nth-child(3) .price_plan_title_box {
	background-color: #76ae63;
}

.price_plan_text_box:nth-child(3) .price_value.estimate {
	font-size: 2.7rem;
	margin: 20px 0 0 0;
	font-weight: bold;
	line-height: 1;
}

.price_plan_text_box:nth-child(3) .price_value,
.price_plan_text_box:nth-child(3) .time_value {
	color: #76ae63;
}

/* スマホ */
@media (max-width: 768px) {
	.price_plan_box_3column_inner {
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}
}

/* --------------------------オーダー--------------------------*/


.order {
	font-weight: bold;
	text-align: center;
	color: #e66c53;
	padding: 150px 0px 80px 0px;
	font-size: 1.8rem;
	letter-spacing: 0.15em;
}





/*=========================iPad用スタイルここから=========================*/

@media screen and (min-width: 736px) and (max-width: 1024px) {
	/*元 min-width:768、max-width: 920px*/
	/*iPhone Plusの横向きのwidthが736pxのため、Plusでは縦でスマホ版、横でiPad版を表示*/

	.test {}

	/* --------------------------料金表--------------------------

		.test {}


		/* 全体コンテナの余白調整 */
	.contents_box {
		padding: 0 15px;
		/* 横揺れ防止 */
	}

	/* --- メインビジュアル --- */
	.mainvisual_area {
		position: relative;
		width: 100%;
		height: auto;
		min-height: auto;
		display: flex;
		justify-content: center;
		left: 0;
		transform: none;
		margin: 0 auto;
		overflow: visible;
		padding-top: 50px;
		/* ← hiddenをやめる */
	}

	.mv_inner {
		display: flex;
		width: 100%;
		flex-direction: column;
		/* 縦に並べる */
		align-items: center;
		/* 子要素を左右中央に */
		justify-content: center;
		text-align: center;
		/* テキストも中央寄せ */
		gap: 40px;
	}

	#mainvisual_box,
	#mainvisual_box svg {
		position: absolute;
		transform: translate(-50%, -50%);
		width: 100%;
		height: auto;
		margin: 0 auto;
		order: 1;
	}

	.mainvisual_logo {
		width: 90%;
		/* スマホで見やすいサイズに */
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.catch,
	.catch_text_box {
		order: 2;
	}

	.catch {
		font-size: 3.2rem;
		letter-spacing: 0.1em;
		display: block;

		margin: 0 auto;
		/* 要素自体は中央に置く */
		width: fit-content;
		/* テキスト幅に合わせる（中央寄せ維持） */

		text-align: left;
		/* 文字は左寄せ */
	}

	.catch_line {
		padding: 2px 10px;
		margin-bottom: 8px;
	}

	.catch_text {
		font-size: 1.6rem;
		max-width: 100%;
		padding: 20px 15px 0px 15px;
		text-align: left;
		line-height: 1.6;
	}


}

/*iPad用スタイルここまで*/


/*=========================スマホ用スタイルここから（横画面）=========================*/

@media screen and (max-width:896px) and (orientation:landscape) {
	/*スマホ用 横画面*/

	.test {}

}

/*=========================スマホ用スタイルここから（縦画面）=========================*/

@media screen and (max-width: 768px) {
	/*元767*/

	.test {}


	/* 全体コンテナの余白調整 */
	.contents_box {
		padding: 0 15px;
		/* 横揺れ防止 */
	}

	/* --- メインビジュアル --- */
	.mainvisual_area {
		position: relative;
		width: 100%;
		height: auto;
		min-height: auto;
		display: flex;
		justify-content: center;
		left: 0;
		transform: none;
		margin: 0 auto;
		overflow: visible;
		padding-top: 50px;
		/* ← hiddenをやめる */
	}

	.mv_inner {
		display: flex;
		width: 100%;
		flex-direction: column;
		/* 縦に並べる */
		align-items: center;
		/* 子要素を左右中央に */
		justify-content: center;
		text-align: center;
		/* テキストも中央寄せ */
		gap: 40px;
	}

	#mainvisual_box,
	#mainvisual_box svg {
		position: absolute;
		transform: translate(-50%, -50%);
		width: 100%;
		height: auto;
		margin: 0 auto;
		order: 1;
	}

	.mainvisual_logo {
		width: 90%;
		/* スマホで見やすいサイズに */
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.catch,
	.catch_text_box {
		order: 2;
	}

	.catch {
		font-size: 3.2rem;
		letter-spacing: 0.1em;
		display: block;

		margin: 0 auto;
		/* 要素自体は中央に置く */
		width: fit-content;
		/* テキスト幅に合わせる（中央寄せ維持） */

		text-align: left;
		/* 文字は左寄せ */
	}

	.catch_line {
		padding: 2px 10px;
		margin-bottom: 8px;
	}

	.catch_text {
		font-size: 1.6rem;
		max-width: 100%;
		padding: 20px 15px 0px 15px;
		text-align: left;
		line-height: 1.6;
	}

	/* --- 説明セクション --- */
	.description {
		padding: 150px 0 100px 0;
	}

	.description_inner {
		width: 100%;
		height: auto;
		/* 高さを可変に */
		padding: 30px 20px 95px 20px;
		/* 下に画像が入るスペースを確保 */
		border-radius: 15px;
	}

	.description .title {
		font-size: 1.8rem;
		margin-bottom: 10px;
		letter-spacing: 0.02em;
		text-align: left;
		width: 100%;
		justify-content: flex-start;
		line-height: 130%;
		padding-bottom: 10px;
	}

	.description .sentence {
		font-size: 1.6rem;
		text-align: left;
	}

	.description_img {
		position: relative;
		/* 絶対配置を解除 */
		right: 0;
		bottom: 0;
		width: 150px;
		margin: -60px auto 0 auto;
		/* 内側のボックスに少し重ねる演出 */
		z-index: 5;
	}

	.sentence br {
		display: none;
	}

	/* --- 制作実績 --- */
	.work_section {
		padding: 40px 0;
		text-align: center;
		background-color: #fff;
		overflow: hidden;
		/* ガーランドのはみ出し防止 */
	}

	.company_name {
		text-align: center;
		font-size: 1.6rem;
		color: #6e6e6e;
		margin-bottom: -5px;
		font-weight: 500;
		letter-spacing: 0.02em;
	}

	.work_title {
		font-size: 2.2rem;
		margin-bottom: 40px;
	}

	.work_title::before {
		content: "◆";
		color: #ed95b1;
		font-size: 1.6rem;
	}

	.video_box {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		/* 動画の比率を維持 */
	}

	.work_tag {
		display: inline-block;
		padding: 5px 25px;
		color: #f17c5b;
		border-radius: 5px;
		font-size: 1.6rem;
		font-weight: bold;
		letter-spacing: 0.05em;
	}

	/* ガーランド */
	.garland {
		display: none;
	}





	/* --------------------------料金表--------------------------*/

	/* 全体のコンテナ */
	.price_plan_box_3column {
		padding: 70px 10px 80px;
		/* ←スマホ反映済み */
		background-color: #fff;
	}

	/* 見出し */
	.price_plan_title {
		font-size: 2.2rem;
		/* ←スマホ反映済み */
		font-weight: bold;
		color: #2c2c2c;
		margin-bottom: 40px;
		/* ←スマホ反映済み */
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		letter-spacing: 0.1em;
	}

	.price_plan_title::before {
		content: "◆";
		color: #f6c440;
		font-size: 1.6rem;
		/* ←スマホ反映済み */
	}

	/* 区切り線 */
	.price_plan_text_box hr {
		width: 250px;
		height: 1px;
		margin: 1.5rem auto;
		border: none;
		background: #6e6e6e;
	}

	.price_plan_title_bo .price_plan_text_box_inner {
		padding: 15px;
		margin-bottom: -20px;
	}

	.price_plan_text_box_inner {
		padding-top: 15px;
	}

	/* 横並び → スマホ想定で縦対応 */
	.price_plan_box_3column_inner {
		display: flex;
		flex-direction: column;
		/* ←スマホ反映 */
		justify-content: center;
		align-items: center;
		/* ←スマホ反映 */
		gap: 30px;
		/* ←スマホ反映 */
		max-width: 820px;
		margin: 0 auto;
	}

	/* カード本体 */
	.price_plan_text_box {
		width: 100%;
		max-width: 340px;
		/* ←スマホ反映 */
		min-height: auto;
		/* ←スマホ反映 */
		padding-bottom: 40px;
		/* ←スマホ反映 */
		background-color: #fdf5e6;
		border-radius: 15px;
		overflow: hidden;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
	}

	/* ヘッダー枠 */
	.price_plan_title_box {
		width: 100%;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* タイトル文字 */
	.price_plan_text_box h3 {
		color: #fff;
		font-size: 2.3rem;
		/* ←スマホ反映済み */
		font-weight: 800;
		letter-spacing: 0.1em;
		margin: 0;
	}

	/* ラベル */
	.price_label {
		font-weight: bold;
		font-size: 2rem;
		letter-spacing: 0.2rem;
		color: #2c2c2c;
		margin-bottom: 10px;
		text-align: center;
	}

	/* 金額・時間 */
	.price_value,
	.time_value {
		font-weight: 600;
		font-family: 'Jost', sans-serif;
		font-size: 4rem;
		/* ←スマホ反映済み */
		text-align: center;
		line-height: 1;
		margin: 0;
	}

	/* 単位 */
	.price_value span,
	.time_value span {
		font-size: 2rem;
		/* ←スマホ反映済み */
		font-weight: bold;
		margin-left: 4px;
	}

	/* お見積り */
	.price_value.estimate {
		font-size: 2.7rem;
		margin: 10px 0 0 0;
		/* ←スマホ寄りに調整 */
	}

	/* 説明 */
	.target_text {
		width: 100%;
		text-align: center;
		font-size: 1.6rem;
		/* ←スマホ反映済み */
		line-height: 1.4;
		margin: 0;
		letter-spacing: 0.1em;
		padding: 10px 0px;
	}

	/* 特徴 */
	.feature_list {
		text-align: left;
		display: inline-block;
		margin-top: 10px;
		font-size: 1.6rem;
		/* ←スマホ反映済み */
		line-height: 2.5rem;
		letter-spacing: 0.2em;
	}

	/* ---------------- 色分け ---------------- */

	/* ライト */
	.price_plan_text_box:nth-child(1) .price_plan_title_box {
		background-color: #70c7e0;
	}

	.price_plan_text_box:nth-child(1) .price_value,
	.price_plan_text_box:nth-child(1) .time_value {
		color: #70c7e0;
	}

	/* スタンダード */
	.price_plan_text_box:nth-child(2) .price_plan_title_box {
		background-color: #ed95b1;
	}

	.price_plan_text_box:nth-child(2) .price_value,
	.price_plan_text_box:nth-child(2) .time_value {
		color: #ed95b1;
	}

	/* カスタム */
	.price_plan_text_box:nth-child(3) .price_plan_title_box {
		background-color: #76ae63;
	}

	.price_plan_text_box:nth-child(3) .price_value.estimate {
		font-size: 3rem;
		margin: 15px 0 0 0;
		font-weight: bold;
		line-height: 1;
	}

	.price_plan_text_box:nth-child(3) .price_value,
	.price_plan_text_box:nth-child(3) .time_value {
		color: #76ae63;
	}

	/* --- お問い合わせ --- */
	.order {
		font-size: 1.6rem;
		line-height: 1.6;
		font-weight: bold;
		text-align: left;
		color: #e66c53;
		padding: 0px 0px 40px 0px;
		letter-spacing: 0.15em;
	}


}

/*@media screen and ( max-width: 768px )ここまで*/


/*=========================プリント用スタイルここから=========================*/

@media print {

	.test {}

}

/*@media printここまで*/