@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');

:root {
	--primary: #264e8c;
	--primary-dark: #1742bd;
	--success: #22c55e;
	--bg: #f6f7fb;
	--panel: #ffffff;
	--bd: #e5e7eb;
	--txt: #333;
	--muted: #475569;
	--r: 12px;
	--shadow: 0 8px 28px rgba(0,0,0,.08);
	--color-red: #d00f32;
	--bg-blue: #eef5ff;
	--bg-red: #fdf3f4;
	--bg-yellow: #fbf6e3;
	--spo-red: #e61614;
	--note: #4e80ce;
	--confirmation: #4e80ce;
}

/* =============== Base =============== */

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	color: var(--txt);
	font-size: 1rem;
	letter-spacing: 1px;
	font-family: 'Roboto','Noto Sans JP', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	overflow-wrap: anywhere;
	height: 100%;
	position: relative;
	background: var(--bg);
}

img {
	max-width: 100%;
	height: auto;
}

a:link, a:visited {
	color: #222;
	text-decoration: none;
	transition: all 0.2s linear;
	border-style: none;
}

a:hover {
	color: var(--color-red);
	text-decoration: underline;
}

.wrapper {
	margin: 24px auto;
	padding: 0;
}

.container {
	width: 92%;
	margin: auto;
	background: var(--panel);
	border: 1px solid var(--bd);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	overflow: hidden;
}

@media (min-width:1024px) {
	.container {
		max-width: 960px;
	}
}
@media (min-width:1280px) {
	.container {
		max-width: 1040px;
	}
}
@media (min-width:1440px) {
	.container {
		max-width: 1120px;
	}
}

/* =============== Header =============== */

header {
	padding: 30px 25px 15px;
}

header h1 {
	margin: 0;
	font: 1.7rem "Noto Serif JP", serif;
	font-weight: 700;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0;
}

header h1 span {
	display: inline-block;
}

header h1 img {
	width: 100%;
	max-width: 245px;
	margin: 0 10px 0 0;
}

.h1_img {
	max-width: 50px;
}

.h1_bg {
	background: url(../images/map_japan.png) 10px no-repeat;
	padding-top: 10px;
	padding-bottom: 10px;
}
.h1_bg_2 {
	background: url(../images/map_japan.png) 10px no-repeat;
	padding-top: 60px;
	padding-bottom: 30px;
}

header .area {
	margin-top: 5px;
}

header .area .p_c {
	font-size: 1rem;
	line-height: 1.5;
	margin-top: 5px;
	text-align: center;
	font-weight: 500;
}

header .area .p_r, header .area .p_r span {
	font-size: .75rem;
	line-height: 1.5;
	margin-top: 25px;
	text-align: right;
	position: relative;
	letter-spacing: .2px;
}

header .area .p_r a {
	border: thin solid #999;
	padding: 4px 10px;
	text-decoration: none;
	background-color: #fff;
}

header .area .p_r a:hover {
	border: thin solid var(--color-red);
}

header .area a {
	text-decoration: underline;
}

/* =============== Section Head =============== */

.section-head {
	border-bottom: 3px solid var(--primary);
	padding: 1.5em 0 1em;
}
.section-head-blue {
	border-bottom: 3px solid var(--primary);
	background-color: var(--bg-blue);
}
.section-head-red {
	border-bottom: 3px solid var(--spo-red);
	background-color: var(--bg-red);
}
.section-head-yellow {
	border-bottom: 3px solid #ffb400;
	background-color: #ffffe0;
}

.section-head h2 {
	margin: 0;
	font-size: 1.5rem;
	letter-spacing: 1.5px;
	text-align: center;
}
.section-head h2.h2-blue {
	color: var(--primary);
}
.section-head h2.h2-red {
	color: var(--spo-red);
}
.section-head h2.h2-yellow {
	color: #ffa403;
}


.section-head h2 span {
	font-size: .85rem;
}
.section-head h2 span.span_01 {
	font-size: .7em !important;
}

/* =============== Typography =============== */

.p_txt_01 {
	font-size: .95rem;
	line-height: 1.8em;
	text-align: left;
	margin: 0 0 20px;
}

.p_txt_02 {
	font-size: .9rem;
	line-height: 1.8em;
	text-align: left;
	margin: 0 0 20px;
}

.p_txt_03 {
	font-size: .85rem;
	line-height: 1.7em;
	text-align: left;
	margin: 0 0 20px;
}

.hidden {
	display: none;
}

#formStatus {
	margin-top: .5rem;
}

/* =============== Form Wrapper =============== */

.form-wrap {
	padding: 30px 25px;
}

/* 注意書き */
.top_notice ol {
	list-style-type: none;
	counter-reset: item;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.top_notice ol li {
	font-size: 0.9rem;
	line-height: 1.8em;
	text-align: left;
	display: flex;
	margin: 0 0 5px;
}

.top_notice ol li::before {
	content: counter(item, circled-decimal) " ";
	font-size: 1em;
	margin-right: 10px;
	counter-increment: item;
	width: 1em;
	height: 1em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background-color: #e1ecfe;
	padding: 15px;
	box-sizing: border-box;
	font-weight: bold;
	transform: translateY(-2px);
}

/* =============== Grouping =============== */

.group {
	padding: 20px;
	margin: 0 0 40px;
	border-radius: 10px;
}

.group-bg-blue {
	background-color: var(--bg-blue);
	border-bottom: thin solid #ccdbf6;
}
.group-bg-red {
	background-color: var(--bg-red);
	border-bottom: thin solid #ccdbf6;
}

.group:last-of-type {
	border-bottom: none;
}

.h3_title {
	color: var(--primary);
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 1rem;
}

.label {
	display: block;
	font-size: .9em;
	font-weight: 500 !important;
	margin-bottom: .5em;
	margin-top: 1.2em !important;
}

/* =============== Inputs & Select =============== */

.input, .select {
	width: 100%;
	padding: 12px;
	background: #fff;
	border: 1px solid #d0d0d0;
	margin-bottom: 10px;
	color: #999;
	font-size: 14px;
	border-radius: 4px;
	transition: all .4s;
}

.input:hover, .select:hover {
	border: 1px solid #666;
}

.input:focus, .select:focus {
	color: #000;
	outline: none;
	border: 1px solid #666;
}

.input[disabled], .select[disabled] {
	background: #f1f5f9;
	cursor: not-allowed;
}

/* セレクトボックスのスタイル調整 */

.select {
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
	background-position: calc(100% - 15px) center, calc(100% - 10px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 30px;
}

/* =============== Field Width Tweaks =============== */

input[type="tel"]:not(.w-80):not(.w-120) {
	max-width: 400px;
}

input[type="email"] {
	max-width: 500px;
}

.group .row .grow .input {
	max-width: 300px;
}

input[name="address1"], input[name="address2"], input[name="address3"] {
	max-width: 600px;
}

input[name="campaigncode"] {
	max-width: 300px;
}

select[name="present"], select[name="pref"] {
	max-width: 400px;
}

/* =============== Layout Helpers =============== */

.row {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	align-items: center;
	font-size: .9rem;
	line-height: 1.7em;
}

.w-80 {
	flex: 0 0 80px;
}

.w-120 {
	flex: 0 0 120px;
}

.grow {
	flex: 1 1 auto;
}

/* 氏名行だけ、間を詰めて横に寄せる */

.name-row {
	gap: 1rem !important;          /* 中央の隙間をほぼゼロに */
	justify-content: flex-start;     /* 左寄せで詰める */
}

.name-row .grow {
	flex: 0 0 auto;                  /* 50%幅をやめ、内容幅で並べる */
}

.name-row .input {
	max-width: none;                 /* 300px 制限を解除 */
	width: 240px;                    /* 必要なら任意幅に固定（例）*/
}

.help {
	color: #777;
	display: block;
	font-size: 0.75rem;
	margin-top: 0;
	margin-bottom: 5px;
}

.notes {
	color: var(--note);
	font-size: 0.8rem;
	line-height: 1.6em;
	background: #f9fbff;
	border-radius: 6px;
	margin: 0 0 15px;
	padding: .7rem .9rem;
}

.confirm_details {
	color: var(--confirmation);
	font-size: .9rem;
    line-height: 1.7em;
	margin: 0 0 5px;
}
.confirm_details span {
	color: var(--txt);
}

.span_font {
	color: var(--txt);
	font-size: .9rem;
    line-height: 1.7em;
}

.error_txt {
	color: var(--color-red);
}

.error_txt_02 {
	color: var(--color-red);
	margin-bottom: 10px;
}

.error_txt_03 {
    font-size: 1rem;
    line-height: 2em;
    text-align: center;
    margin: 80px 0;
}

.thanks_txt {
    font-size: 1.7rem;
    line-height: 2em;
    text-align: center;
    margin: 80px 0;
	font-weight: bold;
}

.thanks_txt_02 {
    font-size: 1.3rem;
    line-height: 2em;
    text-align: center;
    margin: 80px 0;
	font-weight: 500;
}


/* =============== Buttons =============== */

.zip-search-btn {
	padding: 8px 14px;
	background: var(--primary);
	color: #fff;
	border: 1px solid var(--primary);
	border-radius: 4px;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .3s;
	white-space: nowrap;
	margin-bottom: 10px;
}

.zip-search-btn:hover {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
}

.zip-search-btn:active {
	opacity: .8;
}

.btn-submit {
	font-size: 1em;
	width: 280px;
	display: block;
	height: auto;
	padding: 16px;
	color: #fff;
	background: var(--primary);
	border-radius: 4px;
	outline: none;
	border: 1px solid var(--primary);
	font-weight: 400;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all .3s;
	margin: 30px auto 0;
	box-shadow: 0 2px #ddd;
}

.btn-submit:hover {
	background: #36c;
	border: 1px solid #36c;
	transform: translateY(-3px);
}

.btn-submit:active {
	opacity: .9;
}

.btn_wrap {
	display: flex;
	flex-wrap: wrap;
	 justify-content: center;
	width: 100%;
	margin: 0 auto 30px;
	padding: 0;
	max-width: 600px;
}

.btn-submit_2 {
	font-size: 1em;
	width: 280px;
	display: block;
	height: auto;
	padding: 16px;
	color: #fff;
	background: var(--primary);
	border-radius: 4px;
	outline: none;
	border: 1px solid var(--primary);
	font-weight: 400;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all .3s;
	margin: 30px auto 0;
	box-shadow: 0 2px #ddd;
}

.btn-submit_2:hover {
	background: #36c;
	border: 1px solid #36c;
	transform: translateY(-3px);
}

.btn-submit_2:active {
	opacity: .9;
}

/* =============== Footer Notes =============== */

.footer-note {
	border-radius: 4px;
	margin: 100px 0 0;
	font-size: .85rem;
	line-height: 1.6em;
}
.footer-note a {
	color: var(--txt);
	text-decoration: underline;
}
.footer-note  a:hover {
	color: var(--color-red);
	text-decoration: underline;
}

.s1 {
	color: var(--primary);
	font-size: 1rem;
	display: flex;
	align-items: center;
	margin: 40px 0 15px;
}

.s1:before, .s1:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: rgba(38, 78, 140, 0.4);
	display: block;
}

.s1:before {
	margin-right: .8em;
}

.s1:after {
	margin-left: .8em;
}

.copyright {
	font-size: 0.7rem;
	line-height: 1.6em;
	text-align: center;
	margin: 30px auto 0;
	color: #999;
}

/* =============== Payment Section =============== */

.pay-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 800;
	color: #0f172a;
	border-bottom: 2px solid var(--bd);
	padding-bottom: 10px;
	margin: 0 0 12px;
}

.pay-note {
	font-size: .85rem;
	margin: 0 0 16px;
	line-height: 1.6em;
}

.pay-box {
	border: 1px solid var(--bd);
	border-radius: 6px;
	background: #fff;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: #ddd 0 0 2px;
}

.pay-title {
	font-size: 0.9rem;
	line-height: 1.5em;
}

.pay-warn {
	color: var(--note);
	font-size: 0.8rem;
	line-height: 1.6em;
	border-radius: 6px;
	margin: 15px 0;
}

/* =============== Radios & Checkboxes (custom) =============== */

.radio-col, .check-col {
	font-size: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin-top: -10px;
	margin-bottom: 20px;
}

.radio {
	display: flex;
	align-items: center;
	gap: 0;
	padding: .35rem .4rem;
	border-radius: 4px;
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-left: 28px;
}

.radio:hover {
	background: #f8fafc;
}

.radio input[type="radio"], .radio input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 0;
	height: 0;
}

.radio::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border: 1px solid #999;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

.radio input[type="radio"]:checked + *, .radio:has(input[type="radio"]:checked)::before {
	background: #d00f32;
	border-color: #d00f32;
	box-shadow: inset 0 0 0 3px #fff;
}

.radio:has(input[type="checkbox"])::before {
	border-radius: 3px;
}

.radio:has(input[type="checkbox"]:checked)::before {
	background: #d00f32;
	border-color: #d00f32;
}

.radio:has(input[type="checkbox"]:checked)::after {
	content: '';
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	margin-top: -2px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
}

/* 支払い選択のラジオ（同じ見た目でパディング位置のみ調整） */

.pay-choice {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	cursor: pointer;
	position: relative;
	padding-left: 28px;
}

.pay-choice input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 0;
	height: 0;
}

.pay-choice::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 14px;
	height: 14px;
	border: 1px solid #999;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

.pay-choice:has(input[type="radio"]:checked)::before {
	background: #d00f32;
	border-color: #d00f32;
	box-shadow: inset 0 0 0 3px #fff;
}

.badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: #a8c8fc;
	color: #1f2937;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin-right: .6em;
}

/* =============== Collapsible =============== */

.collapsible {
	overflow: hidden;
	height: 0;
	opacity: 0;
	transition: height .35s ease, opacity .25s ease;
	will-change: height, opacity;
}

.collapsible.is-open {
	opacity: 1;
}

.credit-fields {
	margin-top: 12px;
	padding: 14px 14px 2px;
	background: #f9fbff;
	border-radius: 4px;
}


/* =============== アコーディオン =============== */
.accordion {
margin: 0 auto;
}
.toggle {
display: none;
}
.option {
position: relative;
margin: 0 -10px 0 0;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
.title {
color: var(--primary);
font-size: 1em;
font-weight: 600;
margin: 0 0 1rem;
display: block;
cursor: pointer;
line-height: 1.8em;
}
/* くの字アイコンのスタイル - 下向き（∨） */
.title::after,
.title::before {
content: "";
position: absolute;
display: block;
width: 10px;
height: 3px;
background-color: var(--color-red);
transition: transform 0.4s ease-in-out;
top: 50%;
}
.title::before {
right: 13px;
transform-origin: left center;
transform: translateY(-50%) rotate(45deg);
}
.title::after {
right: 10px;
transform-origin: right center;
transform: translateY(-50%) rotate(-45deg);
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
opacity: 0;
}
.content p {
font-size: 0.9em;
line-height: 1.8;
margin: 0 0 2em;
padding: 0;
}
.toggle:checked + .title + .content {
opacity: 1;
}
/* 開いた時はくの字を上向き(∧)に */
.toggle:checked + .title::before {
transform: translateY(-50%) rotate(-45deg) !important;
}
.toggle:checked + .title::after {
transform: translateY(-50%) rotate(45deg) !important;
}

.hidden_pc {
	display: none;
}
.hidden_sp {
	display: block;
}


@media (prefers-reduced-motion: reduce) {
	.collapsible {
		transition: none;
	}
}

/* =============== Responsive =============== */

@media screen and (max-width: 640px) {
	header {
		padding: 20px 10px 15px;
	}
	header h1 {
		font: 1.4rem "Noto Serif JP", serif;
		font-weight: 700;
		width: 100%;
		margin-bottom: 20px;
	}
	header h1 img {
		width: 65%;
		display: block;
		margin: auto auto 10px;
	}
	header .area .p_r, header .area .p_r span {
    font-size: .72rem;
    line-height: 1.5;
    margin-top: 25px;
    text-align: center;
    position: relative;
    letter-spacing: 0;
}
	header .area .p_r a {
    padding: 4px 8px;
}
	
	.section-head h2 {
		font-size: 1.3rem;
		letter-spacing: 1px;
	}
	
	.btn-submit {
		width: 100%;
	}

	.btn-submit_2 {
		width: 48%;
	}
	
	.container {
		width: 95%;
	}
	
	.form-wrap {
		padding: 20px 15px;
	}
	
	.zip-search-btn {
		width: 100%;
		flex-basis: 100%;
	}
	
.title {
	padding-right: 40px;
}

.error_txt_03 {
    text-align: left;
    margin: 40px 0;
}

.thanks_txt {
  font-size: 1.2rem;
   margin: 40px 0;
}

.hidden_pc {
	display: block;
}
.hidden_sp {
	display: none;
}
}

/* ラベルと入力を横並び（氏名行だけ） */

.inline-field {
	display: inline-flex;
	align-items: center;
	gap: .5rem;               /* 「姓」⇔入力の間隔 */
}

.inline-field .label {
	display: inline-block;    /* 既存 .label の block を上書き */
	margin: 0;                /* 既存の下マージンを打ち消し */
}

/* 氏名行の左右カラム間を詰める＆入力幅を調整 */

.name-row {
	gap: .8rem !important;
}

.name-row .grow {
	flex: 0 0 auto;
}

.name-row .input {
	max-width: none;
	width: 240px;
}

/* スマホ時は縦積みに（任意） */

@media (max-width: 640px) {
	.name-row {
		gap: .6rem;
	}
	
	.name-row .grow {
		width: 100%;
	}
	
	.name-row .input {
		width: 100%;
	}
}
/* ラベルと入力を横並び（氏名行だけ） */

.inline-field {
	display: inline-flex;
	align-items: center;
	gap: .5rem;               /* 「姓」⇔入力の間隔 */
}

.inline-field .label {
	display: inline-block;    /* 既存 .label の block を上書き */
	margin: 0;                /* 既存の下マージンを打ち消し */
}

/* 氏名行の左右カラム間を詰める＆入力幅を調整 */

.name-row {
	gap: .8rem !important;
}

.name-row .grow {
	flex: 0 0 auto;
}

.name-row .input {
	max-width: none;
	width: 240px;
}