@charset "utf-8";

body .sp-item {
	display: none;
}
body .pc-item {
  display: block;
}

@media screen and (max-width: 640px) {
	body {
		min-width: inherit;
		height:100%;
	}
	body .sp-item {
		display: block;
	}
	body .pc-item {
		display: none;
	}
	body .sp-item img {
		width:100%;
	}
}

/* ----------------------------------------------------
    共通
---------------------------------------------------- */

body {
	max-width: inherit;
	height: 100%;
	background-attachment: fixed;
}
.main {
	font-family: 'ヒラギノ角ゴシック','Hiragino Sans','Meiryo UI',sans-serif;
	font-weight: 400;
	line-height: 1.7;
	font-size: 20px;
	color:#333;
	background-color: #fff;
	text-align: justify;
	font-feature-settings: "palt";
	overflow-x: hidden;
	/* max-width: 2000px; */
	max-width: 640px;
	margin: 0 auto;
	box-shadow: 0 0 8px #ccc;
}
img {
	margin: 0 auto;
	width: 100%;
	height: auto;
}
video {
	width: 100%;
}
.inner {
	width: 724px;
	margin: 0 auto;
}
.marker {
	color: #333;
	background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,150,1) 10%, rgba(255,255,150,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
.bold {
	font-weight: 700;
}

@media screen and (max-width: 640px) {
	img {
		max-width: 100%;
		height: auto;
	}
	body {
		width: 100%;
	}
	.inner {
		width: 94%;
	}
}

/* ----------------------------------------------------
    CTA
---------------------------------------------------- */
.btn {
	transition: all .2s;
	filter: drop-shadow(5px 5px 5px rgba(153,153,153,0.75)) drop-shadow(-5px 5px 5px rgba(153,153,153,0.75));
}
.btn:hover {
	opacity: 0.8;
}

.btn_area{
	max-width: 640px;
	position: relative;
	margin: 0 auto;
}

.btn {
	transition: opacity 0.2s;
	filter: drop-shadow(5px 5px 5px rgba(153,153,153,0.3)) drop-shadow(-5px 5px 5px rgba(153,153,153,0.3));
}

.btn:hover {
	opacity: 0.8;
	cursor: pointer;
}


.btn-wrapper .btn:not(:first-of-type) {
	margin-top: 1em;
}

.mail {
	bottom: 39%;
	left: 50%;
	transform: translateX(-50%);
	width: 85%;
	position: absolute;
}

.btn-phone {
	bottom: 6%;
	left: 50%;
	transform: translateX(-50%);
	width: 85%;
	position: absolute;
}
.btn-wrapper .btn:not(:first-of-type) {
	margin-top: 0.4em;
}


/* ----------------------------------------------------
    お問い合わせフォーム
---------------------------------------------------- */
 :root {
      --gold: #aa943b;      /* 見本の帯色に近いゴールド */
      --blue: #4f62ff;      /* 「任意」バッジ */
      --danger: #e53935;    /* 「必須」バッジ */
      --fg: #222;
      --muted: #666;
      --border: #d9d9d9;
      --bg: #faf7ef;        /* 全体の背景色 */
    }
    * { box-sizing: border-box; }
    

    .contact { 
			max-width: 640px; 
			margin: 20px auto 72px; 
			padding: 0 16px; }

    /* 見出し */
    h1 { 
			font-size: 32px; 
			margin: 20px 0 20px; 
			text-align: center; 
			font-weight: bold;
		}
    .lead {
			font-size: 22px; 
			margin: 0 10px 20px;
			font-weight: 300;
			line-height: 1.5;
		}

    /* セクションカード */
    .section { 
			background: #fff; 
			border: 1px solid var(--border); 
			box-shadow: 0 2px 8px rgba(0,0,0,.05); 
			margin: 14px 0; 
			overflow: hidden; 
		}
    .section > .head {
      background: var(--gold); 
			color: #fff; 
			font-weight: 600; 
			font-size: 22px;
      padding: 12px 14px; 
			display: flex; 
			align-items: center; 
			gap: 10px;
    }
    .badge { 
			font-size: 12px; 
			padding: 2px 8px; 
			border-radius: 12px; 
			font-weight: 700; 
		}
    .badge.required { background: var(--danger); }
    .badge.optional { background: var(--blue); }

    .section > .body { 
			padding: 12px; 
		}

    /* ラベル + 入力 */
    label { 
			display: block; 
			font-weight: 400; 
			margin-bottom: 6px; }
    input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
      width: 100%;
			padding: 12px; 
			border: 1px solid var(--border); 
			border-radius: 6px; 
			font-size: 16px; 
			background: #fff;
    }
    textarea { 
			min-height: 160px; 
			resize: vertical; 
		}

    .hint { 
			color: var(--muted); 
			font-size: 12px; 
			margin-top: 4px; 
		}
    .status { 
			color: var(--muted); 
			font-size: 12px; 
			min-height: 18px; 
			margin-top: 6px; 
		}

    /* ラジオ2列 */
    .radio-grid { 
			display: grid; 
			grid-template-columns: 1fr 1fr; 
			gap: 12px 20px; 
		}
    .radio-item { 
			display: flex; 
			align-items: center; 
			gap: 8px; 
			font-size: 16px; 
		}

    /* 郵便番号のレイアウト（左ラベル・右入力っぽく） */
    .addr-row { 
			display: grid; 
			grid-template-columns: 92px 1fr; 
			gap: 8px; 
			align-items: center; 
			margin: 8px 0; 
		}
    .addr-row .lbl {
			font-weight: 800; 
		}

    /* 送信ボタン */
    .submit { 
			display: block; 
			width: min(360px, 92vw); 
			margin: 28px auto 0; 
			padding: 14px; 
			border: none;
      background: var(--gold); 
			color: #fff; 
			font-weight: 900; 
			font-size: 28px; 
			border-radius: 12px; 
			cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,.08); 
			transition: transform .05s ease; 
		}
    .submit:active { 
			transform: translateY(1px); 
		}

    /* フッター */
    footer { text-align: center; color: #444; font-size: 12px; margin: 42px 0 16px; }
    footer small { display: block; color: #888; margin-top: 4px; }

    @media (max-width: 360px) {
      .radio-grid { grid-template-columns: 1fr; }
      .addr-row { grid-template-columns: 1fr; }
		
    }
		@media screen and (max-width: 640px) {
			.contact h1 {
				font-weight: 20px;
			}
		}

/* ----------------------------------------------------
    footer
---------------------------------------------------- */
.footer {
	background-color: #333;
	width: 640px;
	margin: 0 auto;
	color: #fff;
	padding: 30px 0;
	font-size: 14px;
	font-weight: 200;
	text-align: center;
}

.copy-right {
	margin-top: 16px;
	text-align: center;
	color: #fff;
}


@media screen and (max-width: 640px) {
	.footer {
		width: 100%;
	}
}


/* ----------------------------------------------------
    固定ボタン
---------------------------------------------------- */
.fixed-bottom-link {
	position: fixed;
	bottom: 0;
	width: 640px;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	filter: drop-shadow(3px 3px 4px #999);
	z-index: 100;
	display: none; /* 初期状態では非表示 */
	background-color: rgba(255, 255, 255, 0.8)
}
.fixed-bottom-link.show {
	display: block; /* クラスが付与されたら表示 */
}
.fixed_btn_wrapper {
	display: flex;
	justify-content: center;
}
.fixed_btn {
	filter: drop-shadow(3px 3px 3px rgba(153,153,153,0.3));;
}

.fixed_btn a {
	display: inline-block;
	transition: .2s;
}
.fixed_btn a:hover {
	transform: scale(1.03);
	cursor: pointer;
}

/*フッターまでスクロールしたら消す*/
.is-hidden {
  visibility: hidden;
  opacity: 0;
}

@media screen and (max-width: 640px) {
	.fixed-bottom-link {
		width:100%;
		padding-bottom: 0.2em;
	}
	.fixed_btn_wrapper {
		width:100%;
		margin: 0 auto;
	}
	.fixed_btn,
	.fixed_btn_tel {
		width: 100%;
	}
}