@charset "UTF-8";
/* まるごと貸切プラン 追加スタイル
 * カレンダー・予約フォーム・FAQは既存デザイン(marugoto_reserve.css)を流用し、
 * 本ファイルはLPへの配置調整と「全スタジオ空き」ハイライト等の追加分のみ定義する */

/*--------------------
既存デザイン部分の文字ベース(サイト本体のbody設定を流用)*/

/* LP(モックデザイン)領域はモックのフォントを使用
 * (サイト共通style.cssのbody指定=Meiryoを打ち消す。共通部はそのままMeiryo) */
.pg-studio {
	font-family: var(--font-default);
}

/* 既存デザイン流用部(カレンダー・予約フォーム・アクセス・FAQ)はサイト本体と同じ文字ベース */
.available,
.mg-reserve,
.studio-access,
.studio-qa {
	color: #333;
	font-family: Meiryo, Osaka, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "sans-serif";
	line-height: 1;
}
@media only screen and (min-width: 769px) {
	.available,
	.mg-reserve,
	.studio-access,
	.studio-qa {
		font-size: 15px;
	}
}
@media only screen and (max-width: 768px) {
	.available,
	.mg-reserve,
	.studio-access,
	.studio-qa {
		font-size: 3.2vw;
	}
}

/* style.cssの.container(PC:flex/SP:padding-bottom)がモックのレイアウトへ影響しないよう打ち消す
 * (幅・マージンはモック側のセクション毎の指定が優先される) */
.pg-studio .container {
	display: block;
	padding-bottom: 0;
}

/* style.cssの.header(PC:margin-bottom 44px)がモックのヘッダーへ影響しないよう打ち消す */
.pg-studio .header {
	margin-bottom: 0;
}

/* リンクの基本色(サイト本体のa設定を流用) */
.available a,
.mg-reserve a,
.studio-qa a {
	color: #333;
	text-decoration: none;
}

/* ご利用料金・確認画面へボタンの追従(sticky)対策
 * モックの overflow: hidden が祖先にあると position: sticky が効かないため、
 * スクロールコンテナを作らない clip / visible に変更する */
.pg-studio {
	overflow-x: clip;
}
.sect-rsv-reserve {
	overflow: visible;
}

/* SP：サイト共通の .wrapper { overflow: hidden } (style.css) に相当する横はみ出し対策。
 * まるごとページは .wrapper を使わないため、.pg-studio の外側(共通フッター・SNSウィジェット等)の
 * 横はみ出しがページ全体の横スクロールになるのを防ぐ。
 * ※html/body の overflow は viewport に伝播するだけでスクロールコンテナにならないため sticky には影響しない
 * ※clip 未対応の旧ブラウザ向けに hidden をフォールバック指定 */
@media only screen and (max-width: 768px) {
	html,
	body {
		overflow-x: hidden;
		overflow-x: clip;
	}
}


/*--------------------
カレンダー配置(既存 .available デザインの流用)*/

.mg-cal-wrap {
	width: 100%;
}
@media only screen and (min-width: 769px) {
	.mg-cal-wrap .available {
		width: 910px;
		margin: 0 auto;
	}
}

.mg-calendar .cal-nav {
	justify-content: center;
}
.mg-calendar .cal-date .icon {
	cursor: pointer;
}

/* A～E全スタジオ空きの日 */
.available .cal-body-row.cal-allfree {
	background: #eef4e4;
}
.available .cal-allfree-badge {
	background: #5c7a3c;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 4px;
	padding: 4px 0;
}
@media only screen and (max-width: 768px) {
	.available .cal-allfree-badge {
		font-size: 2.133vw;
		line-height: 1.1875;
		margin-bottom: 0.533vw;
		padding: 0.533vw;
	}
}


/*--------------------
予約フォーム配置(既存 .reserve デザインの流用)*/

@media only screen and (min-width: 769px) {
	.mg-reserve {
		width: 850px;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 768px) {
	.mg-reserve {
		width: 92vw;
		margin: 0 auto;
	}
}

.mg-form-lead {
	color: #333;
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
}
@media only screen and (min-width: 769px) {
	.mg-form-lead {
		font-size: 18px;
		margin-bottom: 40px;
	}
}
@media only screen and (max-width: 768px) {
	.mg-form-lead {
		font-size: 3.8vw;
		margin-bottom: 8vw;
	}
}

.mg-form-note {
	color: #666;
	line-height: 1.6;
}
@media only screen and (min-width: 769px) {
	.mg-form-note {
		font-size: 12px;
		margin-top: 6px;
	}
	.mg-form-note a {
		color: #5c7a3c;
		text-decoration: underline;
	}
}
@media only screen and (max-width: 768px) {
	.mg-form-note {
		font-size: 3vw;
		margin-top: 1.5vw;
	}
	.mg-form-note a {
		color: #5c7a3c;
		text-decoration: underline;
	}
}

.mg-times-note {
	color: #666;
	line-height: 1.8;
}
@media only screen and (min-width: 769px) {
	.mg-times-note {
		font-size: 14px;
	}
}
@media only screen and (max-width: 768px) {
	.mg-times-note {
		font-size: 3.4vw;
	}
}

.mg-login-caution {
	color: #c1272d;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
}
@media only screen and (min-width: 769px) {
	.mg-login-caution {
		font-size: 13px;
		margin-top: 12px;
	}
}
@media only screen and (max-width: 768px) {
	.mg-login-caution {
		font-size: 3.4vw;
		margin-top: 3vw;
	}
}

/* 撮影目的ラジオの余白 */
.mg-reserve .reserve-option label {
	cursor: pointer;
}
.mg-reserve .reserve-option input {
	margin-right: 0.4em;
}

/* ご利用料金カートの余白復元
 * モックのリセットCSS(ul[class]{padding:0})が .reserve-cart-list の上下paddingを
 * 打ち消してしまうため、参考元(/reserve/)と同じ値で再指定する */
@media only screen and (min-width: 769px) {
	ul.reserve-cart-list {
		padding: 16px 0;
	}
}
@media only screen and (max-width: 768px) {
	ul.reserve-cart-list {
		padding: 6.667vw 0;
	}
}

/* SP：下部固定のフロートナビ(モックデザイン)と重ならないよう、
 * 既存デザインの追従ボタンバーをフロートナビの上に配置する */
@media only screen and (max-width: 768px) {
	.mg-reserve .reserve-form-btnarea {
		bottom: 16vw;
	}
	/* 既存デザインは3ボタン前提(width: 100%/3)だが、まるごとプランは
	 * 「ご利用料金確認」「確認画面へ」の2ボタンのため、横幅100%の2カラムにする */
	.mg-reserve .reserve-form-btnarea .reserve-form-btn {
		width: 50%;
	}
	/* お客様情報直下の同ボタン(追従ではなく通常配置) */
	.mg-reserve .reserve-form-btnarea.mg-btnarea-inline {
		position: static;
		margin-top: 6vw;
	}
	.pg-studio {
		padding-bottom: 36vw;
	}
}


/*--------------------
確認・完了表示(ページ内。既存 /reserve/confirm/ /reserve/finish/ のデザインを流用)*/

.mg-confirm-title,
.mg-finish-title {
	margin-bottom: 1.5em;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
.mg-confirm .reserve-form-desc {
	word-break: break-all;
}
/* 既存 /reserve/confirm/ (.is-confirm) と同じく、確認表示では項目名の上余白(入力欄との位置合わせ用)を無くす */
.mg-confirm .reserve-form-group.group-studio .reserve-form-term,
.mg-confirm .reserve-form-group.group-times .reserve-form-term {
	padding-top: 0;
}
.mg-confirm .reserve-form-group.group-studio {
	padding-top: 0;
}
.mg-confirm .reserve-tos {
	position: static;
	width: auto;
}
.mg-confirm .reserve-tos-wrap {
	width: auto;
}
.mg-confirm .reserve-form-receipt dd {
	font-size: 14px;
}
.mg-finish {
	text-align: center;
}
	.mg-finish .reserve-finish-text {
		margin-bottom: 2em;
		text-align: left;
		font-size: 14px;
		line-height: 1.9;
	}
		.mg-finish .reserve-finish-text p:not(:last-child) {
			margin-bottom: 1em;
		}
	.mg-finish .reserve-form-btn {
		margin: 0 auto;
	}
@media only screen and (max-width: 768px) {
	.mg-confirm-title,
	.mg-finish-title {
		font-size: 4.8vw;
	}
	/* 「ご利用規約に同意する」と料金表の間の余白 */
	.mg-confirm .reserve-form-secondary {
		margin-top: 8vw;
	}
	/* SP：料金(カート)はモーダルではなく本文内に表示し、ボタンは通常配置にする */
	.mg-confirm .reserve-form-cart {
		display: block;
		height: auto;
		position: static;
		visibility: visible;
	}
	.mg-confirm .reserve-form-overlay {
		display: none;
	}
	.mg-confirm .reserve-cart {
		left: 0;
		max-height: none;
		overflow: visible;
		position: static;
		top: 0;
		transform: none;
	}
	/* 確認表示のボタン(この内容で予約する／戻る)は追従ではなく通常配置。
	 * 追従バーと同じ横並び2カラム(row-reverse：左「戻る」・右「この内容で予約する」) */
	.mg-reserve.mg-confirm .reserve-form-btnarea {
		position: static;
		margin-top: 4vw;
	}
		.mg-reserve.mg-confirm .reserve-form-btnarea .reserve-form-btn {
			width: 50%;
		}
	.mg-confirm .reserve-tos-wrap {
		width: auto;
	}
	.mg-finish .reserve-finish-text {
		font-size: 3.6vw;
	}
}


/*--------------------
お客様情報(追加分)*/

.rsv-customer {
	margin-top: 6rem;
}

/* フォーム左カラム(reserve-form-primary)内に配置しているため、
 * モックの固定幅をカラム幅に合わせて調整(料金カートがログインまで追従する)
 * ※上余白は連絡事項との間が空きすぎないよう0にする */
.mg-reserve .rsv-customer {
	width: 100%;
	margin: 0;
}

/* ご利用時間の注記(※選択できない時間は～)の上に余白を追加 */
.mg-reserve .reserve-times-notes {
	margin-top: 14px;
}
@media only screen and (max-width: 768px) {
	.mg-reserve .reserve-times-notes {
		margin-top: 3vw;
	}
}
.mg-reserve .rsv-customer-wrap {
	width: 100%;
	margin: 0;
}
.mg-reserve .rsv-customer-body {
	width: auto;
	flex: 1;
	min-width: 0;
}

.rsv-loggedin-name {
	margin-bottom: 0.8rem;
	color: #333;
	font-size: 1.6rem;
}
	.rsv-loggedin-name span {
		font-size: 1.8rem;
		font-weight: 700;
		color: #5c7a3c;
	}
.rsv-loggedin-note {
	color: #666;
	font-size: 1.4rem;
}

.rsv-mypage-btn {
	text-decoration: none;
}
/* .mg-reserve a { color:#333 } がボタンの白文字を上書きしないようにする */
.mg-reserve a.rsv-login-btn {
	color: #fff;
}

.mg-login-error {
	margin-top: 1rem;
	color: #c1272d;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.6;
}

.rsv-sns-login {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px dotted #ccc;
}
	.rsv-sns-login-lead {
		margin-bottom: 1rem;
		color: #333;
		font-size: 1.3rem;
		font-weight: 700;
	}
	.rsv-sns-btn {
		display: inline-block;
		margin-right: 0.8rem;
		margin-bottom: 0.5rem;
		padding: 0.8rem 1.8rem;
		color: #333;
		font-size: 1.3rem;
		font-weight: 700;
		text-decoration: none;
		border: 1px solid #333;
		border-radius: 4px;
		background: #fff;
	}


/*--------------------
アクセス・FAQ(スタジオ詳細ページのデザインを流用)*/

/* モックの sect-acs-access / sect-faq-faq のflex中央寄せに対する調整 */
.studio-access {
	width: 100%;
}
.sect-faq-faq .studio-qa {
	width: 100%;
	padding-top: 0;
}

/* アクセスの配色(白文字・背景 rgb(185, 185, 170)) */
.studio-access {
	background: rgb(185, 185, 170);
}
.studio-access-summary {
	color: #fff;
}

/* LPはサイト本体と違いbodyのmin-width:1280pxが無いため、
 * 画面幅が狭い場合に地図(絶対配置)がタイトルへ被らないよう右カラムを地図の右側に固定する */
@media only screen and (min-width: 769px) {
	.studio-access .inner {
		width: auto;
	}
	.studio-access-summary {
		margin: 0 0 0 calc(50% + 60px);
		width: auto;
		max-width: 610px;
		padding: 65px 40px 60px 70px;
	}
}