@charset "UTF-8";
/* ==========================================================================
   お問い合わせ(page-mg-contact.php のときだけ読み込む)
   .mg-form 以下のクラスは、管理画面の Contact Form 7 のフォームに書いたもの。
   親の css/design-plus.css と style.css にある .wpcf7 の表示を上書きしている。
   ========================================================================== */

.mg-contact-page {
	--mg-contact-field-border: #999999; /* 入力欄の枠(白地との明度差 3:1 以上) */
	--mg-contact-error: #c62828;
	max-width: 800px;
	margin-inline: auto;
}

#archive_headline_no_image{
	margin-bottom: 60px;
}

#archive_headline_no_image .headline, #archive_headline .headline{
    height: max-content;
	writing-mode: vertical-rl;
  	width: fit-content;
  	margin-left: auto;
  	margin-right: auto;
    font-size: 40px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 10px;
    color: var(--mg-color-text);
}

.no_side_contents_main{
	width: 100% !important;
}

@media screen and (max-width: 1200px) {
        #main_content {
            padding-bottom: 150px;
        }
}

@media screen and (max-width: 900px) {
        #main_content {
            padding-bottom: 150px !important;
        }
}

@media screen and (max-width: 800px) {
        #main_content {
            padding-bottom: 120px !important;
        }
		#archive_headline_no_image .headline, #archive_headline .headline
			{
				font-size: 24px;
				line-height: 24px;
			}
}

/* リード文
   ========================================================================== */
/* フォームとの間はリード文の下で取る(フォームの .post_content は、親が 1000px 以下で margin を !important で上書きするため) */
.mg-contact-page__lead {
	margin-bottom: 40px;
	font-size: 16px;
	line-height: 28.8px;
	text-align: center;
}
.mg-contact-page__lead p {
	margin: 0;
}

@media (max-width: 768px) {
	.mg-contact-page__lead {
		font-size: 14px;
		line-height: 25.2px;
		text-align: left;
	}
}
/* 左右の余白。親(responsive.css)がフォームの .post_content に付ける余白と同じ幅・同じ境界で付ける */
@media (max-width: 1000px) {
	.mg-contact-page__lead {
		margin-inline: 50px;
	}
}
@media (max-width: 800px) {
	.mg-contact-page__lead {
		margin-inline: 20px;
	}
}


/* フォーム(Contact Form 7)
   ========================================================================== */
/* 親の灰色の枠・余白を消す(親は margin に !important を付けている) */
.mg-contact-page .wpcf7 {
	margin: 0 !important;
	border: none;
	background: none;
	font-size: 16px;
}
.mg-contact-page .wpcf7 form {
	margin: 0;
}

/* 行(項目名+入力欄) */
.mg-form__row {
	margin: 0 0 32px;
	padding: 0;
	border: none;
	min-width: 0; /* fieldset の既定の最小幅を外す */
}
.mg-form__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	color: var(--mg-color-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: var(--mg-ls);
}
.mg-form__req,
.mg-form__opt {
	flex-shrink: 0;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}
.mg-form__req {
	background: var(--mg-color-main);
	color: var(--mg-color-text-white);
}
.mg-form__opt {
	border: 1px solid var(--mg-color-line2);
	color: var(--mg-color-text);
}

/* 入力欄 */
.mg-contact-page .wpcf7 input[type="text"],
.mg-contact-page .wpcf7 input[type="email"],
.mg-contact-page .wpcf7 input[type="tel"],
.mg-contact-page .wpcf7 textarea {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--mg-contact-field-border);
	background: var(--mg-color-base);
	color: var(--mg-color-text);
	font-size: 16px; /* 16px未満だと iOS で入力時に画面が拡大される */
	line-height: 1.6;
}
.mg-contact-page .wpcf7 textarea {
	height: 240px;
	resize: vertical;
}
.mg-contact-page .wpcf7 input::placeholder,
.mg-contact-page .wpcf7 textarea::placeholder {
	color: #767676;
}
.mg-contact-page .wpcf7 input:focus,
.mg-contact-page .wpcf7 textarea:focus {
	border-color: var(--mg-color-main);
	outline: 1px solid var(--mg-color-main);
}

/* ラジオボタン・同意のチェックボックス */
.mg-contact-page .wpcf7 .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}
.mg-contact-page .wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0;
}
.mg-contact-page .wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.mg-contact-page .wpcf7 input[type="radio"],
.mg-contact-page .wpcf7 input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	accent-color: var(--mg-color-main);
	cursor: pointer;
}
.mg-contact-page .wpcf7 input[type="radio"]:focus-visible,
.mg-contact-page .wpcf7 input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mg-color-main);
	outline-offset: 2px;
}
.mg-contact-page .wpcf7 .wpcf7-list-item-label {
	font-size: 16px;
	line-height: 1.6;
}

/* 同意(プライバシーポリシー) */
.mg-form__consent {
	margin-top: 40px;
	text-align: center;
}

/* 送信ボタン(.mg-btn と同じ色・文字) */
.mg-form__submit {
	position: relative; 
	display: flex;
	width: fit-content; 
	justify-content:center;
	align-items: center;
	letter-spacing: var(--mg-ls);
	margin: 50px auto 0;
	text-align: center;
}
.mg-contact-page .wpcf7 .wpcf7-submit {
	display: inline-block;
	width: auto;
	min-width: 240px;
	height: auto;
	margin: 0;
	padding: 14px 40px;
	background: var(--mg-color-main);
	color: var(--mg-color-text-white);
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: var(--mg-ls);
	transition: background-color 0.25s ease, opacity 0.25s ease;
}

.mg-contact-page .wpcf7 .wpcf7-submit:hover,
.mg-contact-page .wpcf7 .wpcf7-submit:focus-visible {
	background: var(--mg-color-hover);
}
.mg-contact-page .wpcf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--mg-color-main) !important; /* 親が outline:none を指定しているため */
	outline-offset: 2px;
}

.mg-form__submit .mg-btn__icon {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	pointer-events: none;        /* 矢印の上をクリックしても送信できるように */
	display: flex;
}

/* 同意にチェックが入るまで押せない(Contact Form 7 が disabled を付ける) */
.mg-contact-page .wpcf7 .wpcf7-submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.mg-contact-page .wpcf7 .wpcf7-submit:disabled:hover {
	background: var(--mg-color-main);
}

.mg-form__submit .wpcf7-submit:disabled ~ .mg-btn__icon {
	opacity: 0.4;
}

/* 送信中のくるくる。ボタンの中央寄せがずれないよう、横に重ねる */
.mg-form__submit .wpcf7-spinner {
	position: absolute;
	top: 50%;
	margin: -12px 0 0 16px;
}

/* エラー・送信結果の表示 */
.mg-contact-page .wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--mg-contact-error);
	font-size: 14px;
	line-height: 1.6;
}
.mg-contact-page .wpcf7 .wpcf7-not-valid {
	border-color: var(--mg-contact-error);
}
.mg-contact-page .wpcf7 form .wpcf7-response-output {
	margin: 32px 0 0;
	padding: 12px 16px;
	border: 1px solid currentColor;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}
.mg-contact-page .wpcf7 form.invalid .wpcf7-response-output,
.mg-contact-page .wpcf7 form.unaccepted .wpcf7-response-output,
.mg-contact-page .wpcf7 form.failed .wpcf7-response-output,
.mg-contact-page .wpcf7 form.spam .wpcf7-response-output {
	color: var(--mg-contact-error);
}

/* reCAPTCHA の案内(バッジを隠す代わりに表示する) */
.mg-contact-page__recaptcha {
	margin-top: 40px;
	font-size: 12px;
	line-height: 1.8;
	text-align: center;
}
.mg-contact-page__recaptcha a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 768px) {
	.mg-form__row {
		margin-bottom: 24px;
	}
	.mg-form__label {
		font-size: 14px;
	}
	.mg-contact-page .wpcf7 textarea {
		height: 200px;
	}
	.mg-contact-page .wpcf7 .wpcf7-radio {
		flex-direction: column;
	}
	.mg-contact-page .wpcf7 .wpcf7-list-item-label {
		font-size: 14px;
	}
	.mg-form__consent {
		margin-top: 32px;
	}
	.mg-contact-page .wpcf7 .wpcf7-submit {
		min-width: 200px;
		font-size: 16px;
		line-height: 16px;
	}
	.mg-contact-page .wpcf7 input[type="text"], .mg-contact-page .wpcf7 input[type="email"], .mg-contact-page .wpcf7 input[type="tel"], .mg-contact-page .wpcf7 textarea{
		font-size: 14px;
	}
}

/* 「ハイフンは入力不要です」の吹き出し */
#autozip{
    background-color: var(--mg-color-main) !important;
}