@charset "UTF-8";

		/* ========================================
		Base Reset & Variables
		========================================
		*/
		:root {
			--accent-pink: #eb2f5b;
			--bg-base: #fdfdfd;
			--bg-card: #ffffff;
			--text-main: #1a1a1a;
			--text-sub: #777777;
			--border-color: #e0e0e0;
			--border-focus: #1a1a1a;

			--font-sans: 'Noto Sans JP', sans-serif;
			--font-serif: 'Shippori Mincho', serif;
			--font-eng: 'Playfair Display', serif;

			--header-height: 60px;
			--shadow-card: 0 15px 40px rgba(0,0,0,0.04);
		}

		* { box-sizing: border-box; margin: 0; padding: 0; }
		body {
			font-family: var(--font-sans);
			background-color: var(--bg-base);
			color: var(--text-main);
			line-height: 1.8;
			-webkit-font-smoothing: antialiased;
		}
		a { text-decoration: none; color: inherit; transition: opacity 0.3s; }

		/* ========================================
		Simple Header (共通)
		========================================
		*/
		.simple-header {
			position: fixed;
			top: 0; left: 0; width: 100%;
			height: var(--header-height);
			background: rgba(253, 253, 253, 0.95);
			backdrop-filter: blur(10px);
			z-index: 100;
			border-bottom: 1px solid var(--border-color);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 1.5rem;
		}
		.btn-back { font-family: var(--font-eng); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; }
		.header-logo { font-family: var(--font-eng); font-weight: 900; font-size: 1.2rem; }

		/* ========================================
		Hero Section (Editorial Style)
		========================================
		*/
		.contact-hero {
			padding-top: calc(var(--header-height) + 5rem);
			padding-bottom: 3rem;
			text-align: center;
			background: var(--bg-base);
		}

		.hero-tag {
			font-family: var(--font-eng);
			font-size: 0.85rem;
			letter-spacing: 0.2em;
			color: var(--accent-pink);
			margin-bottom: 1rem;
			display: block;
			text-transform: uppercase;
		}

		.hero-title {
			font-family: var(--font-serif);
			font-size: clamp(2.5rem, 6vw, 4rem);
			font-weight: 800;
			line-height: 1.2;
			letter-spacing: 0.05em;
			margin-bottom: 1.5rem;
			color: var(--text-main);
		}

		.hero-desc {
			font-size: 0.95rem;
			color: var(--text-sub);
			max-width: 600px;
			margin: 0 auto;
			line-height: 2;
			padding: 0 1.5rem;
		}

		/* ========================================
		Form Container & Type Selector
		========================================
		*/
		.form-container {
			max-width: 800px;
			margin: 0 auto 6rem;
			padding: 0 1.5rem;
		}

		.form-card {
			background: var(--bg-card);
			border-radius: 8px;
			box-shadow: var(--shadow-card);
			padding: 3rem 2rem;
			border: 1px solid rgba(0,0,0,0.03);
		}

		@media (min-width: 768px) {
			.form-card { padding: 4rem; }
		}

		/* Radio Button as Tabs */
		.type-selector {
			display: flex;
			gap: 1rem;
			margin-bottom: 3rem;
			border-bottom: 2px solid #eee;
			padding-bottom: 2rem;
		}

		.type-selector input[type="radio"] {
			display: none; /* デフォルトのラジオボタンを隠す */
		}

		.type-label {
			flex: 1;
			text-align: center;
			padding: 1rem;
			font-family: var(--font-serif);
			font-size: 1.1rem;
			font-weight: 700;
			color: var(--text-sub);
			border: 1px solid var(--border-color);
			border-radius: 4px;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
		}

		/* 選択状態のスタイル */
		.type-selector input[type="radio"]:checked + .type-label {
			background: var(--text-main);
			color: #fff;
			border-color: var(--text-main);
		}

		/* 選択状態の下部三角形（吹き出し風） */
		.type-selector input[type="radio"]:checked + .type-label::after {
			content: '';
			position: absolute;
			bottom: -8px;
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
			width: 16px;
			height: 16px;
			background: var(--text-main);
		}

		@media (max-width: 600px) {
			.type-selector { flex-direction: column; gap: 0.5rem; padding-bottom: 1.5rem; }
			.type-selector input[type="radio"]:checked + .type-label::after { display: none; }
		}

		/* ========================================
		Form Fields
		========================================
		*/
		.form-group {
			margin-bottom: 2.5rem;
			opacity: 1;
			transition: opacity 0.4s ease, transform 0.4s ease;
		}

		/* 切替アニメーション用 */
		.form-section {
			display: none;
			animation: fadeIn 0.5s ease forwards;
		}
		.form-section.is-active {
			display: block;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(10px); }
			to { opacity: 1; transform: translateY(0); }
		}

		.form-label {
			display: block;
			font-size: 0.9rem;
			font-weight: 700;
			color: var(--text-main);
			margin-bottom: 0.5rem;
		}

		.form-label .req {
			color: var(--accent-pink);
			font-family: var(--font-eng);
			font-size: 0.7rem;
			margin-left: 0.5rem;
			vertical-align: super;
		}

		.form-label .opt {
			color: var(--text-sub);
			font-weight: normal;
			font-size: 0.8rem;
			margin-left: 0.5rem;
		}

		.form-control {
			width: 100%;
			background: transparent;
			border: none;
			border-bottom: 1px solid var(--border-color);
			padding: 0.8rem 0;
			font-family: var(--font-sans);
			font-size: 1rem;
			color: var(--text-main);
			border-radius: 0;
			transition: border-color 0.3s ease;
		}

		.form-control:focus {
			outline: none;
			border-bottom-color: var(--border-focus);
		}

		.form-control::placeholder {
			color: #bbb;
			font-weight: 300;
		}

		textarea.form-control {
			resize: vertical;
			min-height: 120px;
			line-height: 1.6;
		}

		/* セレクトボックスの装飾 */
		select.form-control {
			appearance: none;
			-webkit-appearance: none;
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
			background-repeat: no-repeat;
			background-position: right 0 center;
			background-size: 16px;
			padding-right: 2rem;
			cursor: pointer;
		}

		/* ========================================
		Submit Button
		========================================
		*/
		.form-actions {
			margin-top: 4rem;
			text-align: center;
		}

		.btn-submit {
			display: inline-block;
			width: 100%;
			max-width: 300px;
			padding: 1.2rem;
			background: var(--text-main);
			color: #fff;
			font-family: var(--font-serif);
			font-size: 1.1rem;
			font-weight: 700;
			letter-spacing: 0.1em;
			border: none;
			border-radius: 50px;
			cursor: pointer;
			transition: background 0.3s, transform 0.2s;
		}

		.btn-submit:hover {
			background: var(--accent-pink);
		}
		.btn-submit:active {
			transform: scale(0.98);
		}

		.privacy-note {
			font-size: 0.8rem;
			color: var(--text-sub);
			margin-top: 1.5rem;
			line-height: 1.6;
		}
		.privacy-note a { color: var(--text-main); text-decoration: underline; }



		/* ========================================
		send comp
		========================================
		*/
		.send_comp {
			width:150px;
			margin:0;
			padding:15px;
			font-size:100%;
			background:#FB26C6;
			color:#fff;
			border:solid 2px #fff;
			position:fixed;
			bottom:20px;
			right:15px;
			z-index:100;
			text-align: center;
		}

		.hide { display: none; }

		p.er { width:90%; max-width: 500px; margin:10px auto 0 auto; padding:10px; background: #FD4D4D; color:#fff; text-align: center; font-size:100%; }

		/* 初期状態はエラーメッセージを隠す */
		.error_text {
			display: none;
			color: #ff4d4d;
			font-size: 0.8rem;
			margin-top: 5px;
		}

		/* 無効な入力の時のスタイル */
		.email_field.is-invalid {
			border: 2px solid #ff4d4d;
			outline: none;
		}

		/* 無効な時だけメッセージを表示 */
		.email_field.is-invalid + .error_text {
			display: block;
		}

		/* 有効な入力の時のスタイル（任意） */
		.email_field.is-valid {
			border-bottom: 1px solid #4CAF50;
		}

		/* ========================================
		Footer
		========================================
		*/
		.site-footer {
			background: #111; color: #fff; text-align: center; padding: 2rem 0; font-size: 0.8rem;
		}