@charset "UTF-8";

/***** アイテム、パーツ、コンポーネント *****/

/* ----- ↓PC・SP共通コンポーネント v2 ----- */
/* ボタン */
.button {
	position: relative;
	display: grid;
	place-items: center;
	width: 280px;
	border: none;
	margin: 16px auto;
	padding: 0 10px;
	color: #fff;
	background-color: #777;
	font-size: 16px;
	line-height: inherit;
	cursor: pointer;
	border-radius: 5px;
	font-weight: 700;
	transition: background-color var(--hover_transition);
	min-height: 48px;
	box-sizing: border-box;
	text-decoration: none;
}
a.button {
	color: #fff;
}
.button:hover {
	text-decoration: none;
}
.button:focus-visible {
	outline-offset: 2px;
	outline: 2px solid var(--color_link);
}
.button[class*="chevron-"]::after {
	content: "";
	display: block;
	position: absolute;
	width: 24px;
	height: 24px;
	top: 50%;
	transform: translateY(-50%);
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22m0%200h24v24h-24z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.button.chevron-right::after {
	right: 4px;
}
.button.chevron-left::after {
	left: 4px;
	transform: translateY(-50%) rotate(180deg);
}
.button.chevron-up::after {
	right: 4px;
	transform: translateY(-50%) rotate(-90deg);
}
.button.chevron-down::after {
	right: 4px;
	transform: translateY(-50%) rotate(90deg);
}
.button.primary {
	background-color: var(--color_bbred);
}
.button.primary:hover {
	background-color: #b20000;
	opacity: 1;
}
.button.primary:active {
	background-color: #9e0000;
}
.button.secondary {
	background-color: #fff;
	color: var(--color_bbred);
	border: 2px solid var(--color_bbred);
}
.button.secondary:hover {
	background-color: #f9e5e5;
	opacity: 1;
}
.button.secondary:active {
	background-color: #f4cccc;
}
.button.secondary[class*="chevron-"]::after {
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22m0%200h24v24h-24z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%20stroke%3D%22%23c60000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.button.tertiary {
	background-color: #fff;
	color: var(--color_gray_7);
	border: 2px solid var(--color_gray_7);
}
.button.tertiary:hover {
	background-color: #f1f1f2;
	opacity: 1;
}
.button.tertiary:active {
	background-color: #e3e3e4;
}
.button.tertiary[class*="chevron-"]::after {
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22m0%200h24v24h-24z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%20stroke%3D%22%2373737a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.button.accent {
	background-color: #fff;
	color: var(--color_accent);
	border: 2px solid var(--color_accent);
}
.button.accent:hover {
	background-color: #e5f1fc;
	opacity: 1;
}
.button.accent:active {
	background-color: #cce4f9;
}
.button.accent[class*="chevron-"]::after {
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22m0%200h24v24h-24z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%20stroke%3D%22%230078e3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.button.blog {
	background-color: var(--color_blog);
}
.button.blog:hover {
	background-color: #d44736;
	opacity: 1;
}
.button.blog:active {
	background-color: #c14132;
}
.button.short {
	width: 130px;
}
.button.short.chevron-right {
	width: 130px;
}
.button.size-s {
	width: 200px;
	min-height: 36px;
	font-size: 14px;
}
.button.size-s[class*="chevron-"]::after {
	width: 20px;
	height: 20px;
	background-size: 20px 20px;
}
.button.size-s.short {
	width: 90px;
	padding-right: 5px;
	padding-left: 5px;
}
.button.size-s.short.chevron-right::after, .button.size-s.short.chevron-up::after, .button.size-s.short.chevron-down::after {
	right: 2px;
}
.button.size-s.short.chevron-left::after {
	left: 2px;
}
.button.size-l {
	width: 300px;
	min-height: 60px;
	font-size: 18px;
}
.button.size-l[class*="chevron-"]::after {
	width: 28px;
	height: 28px;
	background-size: 28px 28px;
}
.button.size-l.short {
	width: 140px;
}
.button.fit {
	width: auto;
	display: inline-grid;
}
.button.disabled, .button:disabled {
	pointer-events: none;
	background-color: var(--color_gray_c);
	color: #fff;
	border: none;
}
.button-group {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 16px 0;
}
.button-group .button {
	margin: 0;
}
.button-group.vertical {
	flex-direction: column;
}
.button-group:not(:has(.short)):not(:has(.size-s)):not(:has(.size-l)) {
	container: button-group / inline-size;
}
 .button-group:has(.size-s):not(:has(.short)) {
	container: button-group-size-s / inline-size;
}
 .button-group:has(.size-l):not(:has(.short)) {
	container: button-group-size-l / inline-size;
}
@container button-group (max-width: 579px) {
	.button-group .button.primary {
		order: -1;
	}
}
@container button-group-size-s (max-width: 419px) {
	.button-group .button.primary {
		order: -1;
	}
}
@container button-group-size-l (max-width: 619px) {
	.button-group .button.primary {
		order: -1;
	}
}

/* アラート */
.alert {
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	margin: 0.8em auto;
}
@media (max-width: 480px) {
	.alert {
		margin-right: 10px;
		margin-left: 10px;
	}
}
.alert.size-s {
	font-size: 14px;
}
.alert.size-l {
	font-size: 18px;
}
.alert.bbred, .alert.danger {
	color: var(--color_bbred);
}
.alert.accent {
	color: var(--color_accent);
}
.alert.success {
	color: var(--color_success);
}
.alert.outline {
	border: 2px solid #c1c1c2;
	background: #f6f6f6;
	padding: 0.5em 0.7em;
	border-radius: 5px;
}
.alert.outline:empty {
	padding-top: 0;
	padding-bottom: 0;
	border: none;
}
.alert.bbred.outline, .alert.danger.outline {
	border-color: #eca9a9;
	background: #fcf2f2;
}
.alert.accent.outline {
	border-color: #b5c5ed;
    background: #e5f1fc;
}
.alert.success.outline {
	border-color: #73dbc9;
	background: #e5f8f5;
}

/* ----- ↑PC・SP共通コンポーネント ----- */

input, textarea, select, .form-check {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	outline: 0;
}
input.textbox, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%; /*res*/
	height: 48px;
	font-size: 16px;
	padding: 0 5px;
	border: 1px solid var(--color_gray_c);
	border-radius:0;
	box-sizing: border-box;
	transition: border-color 0.3s, box-shadow 0.3s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--color_success); 
	box-shadow: 0 0 0 1px var(--color_success) inset;
	transition: border-color var(--hover_transition), box-shadow var(--hover_transition);
}
input[type="text"].size-s, input[type="password"].size-s, input[type="email"].size-s, input[type="number"].size-s, input[type="tel"].size-s, input[type="url"].size-s {
	font-size: 14px;
	height: 36px;
	width: 200px;
}
input::placeholder, textarea::placeholder {
	color: var(--color_gray_c);
}
textarea {
	box-sizing: border-box;
	width: 100%;
	height: 8em;
	font-size: 16px;
	border: 1px solid var(--color_gray_c);
	padding: 5px 8px;
}
label.form-check {
	border: none;
	padding: 0;
}
.form-check > label {
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: inherit;
}
.form-check input[type="checkbox"], .form-check input[type="radio"] {
	display: none;
}

.form-check:not(:last-of-type) {
	margin-right: 8px;
}
.form-check.vertical:not(:last-of-type) {
	margin-right: 0;
}
.form-check {
	display: inline-block;
}
.form-check.vertical {
	display: block;
	margin-top: 12px;
	margin-bottom: 12px;
}
.form-check.save_id_pass {
	display: grid;
	place-content: center;
	margin: 0 auto 12px;
}
.form-check input[type="checkbox"] + *, .form-check input[type="radio"] + * {
	display: inline-block;
	transition: opacity var(--hover_transition);
	background-color: transparent;
	padding: 0 6px 0 38px;
	box-sizing: border-box;
	position: relative;
	line-height: inherit;
	font-size: 16px;
}
.form-check.ud input[type="checkbox"] + *, .form-check.ud input[type="radio"] + * {
	min-height: 48px;
	border-radius: 6px;
	border: 1px solid var(--color_gray_c);
	background-color: #fff;
	padding: 0 12px 0 38px;
	display: flex;
	align-items: center;
}
.form-check.ud input[type="checkbox"]:checked + *, .form-check.ud input[type="radio"]:checked + * {
	border-color: var(--color_success);
	box-shadow: 0 0 0 1px var(--color_success) inset;
}
.form-check input[type="checkbox"] + *::before, .form-check input[type="radio"] + *::before, .form-check input[type="checkbox"] + *::after, .form-check input[type="radio"] + *::after {
	display: block;
	position: absolute;
	content: "";
	box-sizing: border-box;
}
.form-check input[type="checkbox"] + *::before {
	top: 50%;
	left: 10px;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	border: 2px solid var(--color_gray_c);
	border-radius: 3px;
	background: #fff;
}
.form-check input + label::after {
	display: block;
	position: absolute;
	content: "";
}
.form-check input[type="checkbox"]:checked + *::after {
	top: calc(50% - 9px);
	left: 15px;
	width: 10px;
	height: 15px;
	border-bottom: 3px solid var(--color_success);
	border-right: 3px solid var(--color_success);
	transform: rotate(45deg);
}
.form-check input[type="radio"] + *::before {
	top: 50%;
	left: 10px;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	border: 2px solid var(--color_gray_c);
	border-radius: 50%;
	background: #fff;
}
.form-check input[type="radio"]:checked + *::after {
	top: 50%;
	left: 15px;
	width: 10px;
	height: 10px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--color_success);
}
.form-check.size-s input[type="radio"] + *, .form-check.size-s input[type="checkbox"] + * {
	font-size: 14px;
}
.form-check.size-s input[type="radio"] + *::before, .form-check.size-s input[type="checkbox"] + *::before {
	width: 16px;
	height: 16px;
}
.form-check.size-s input[type="radio"]:checked + *::after {
	left: 14px;
	width: 8px;
	height: 8px;
}
.form-check.size-s input[type="checkbox"]:checked + *::after {
	top: calc(50% - 8px);
	left: 14px;
	width: 8px;
	height: 13px;
}
.form-check.size-s input[type="checkbox"] + *, .form-check.size-s input[type="radio"] + * {
	padding-left: 34px;
}


.select-group {
	position: relative;
	width: 100%; /* res */
}
.select-group::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 12px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #bbb;
	border-right: 2px solid #bbb;
	transform: rotate(135deg) translate(-60%, 40%);
	pointer-events: none;
}
.select-group select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding: 0 34px 0 5px;
	border: 1px solid var(--color_gray_c);
	background: #fff;
	height: 48px;
	line-height: 48px;
	border-radius: 6px;
	cursor: pointer;
	box-sizing: border-box;
	font-size: 16px;
}

.form_container {
	container: form_width / inline-size;
}
form > dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 40px 20px;
	margin-top: 40px;
	margin-bottom: 40px;
}
form > dl > dt {
	padding: 0;
	box-sizing: border-box;
	line-height: 1.45;
	font-weight: bold;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 4px;
	font-size: 16px;
}
form > dl > dt.required::after, form > dl > dt.optional::after {
	position: relative;
	display: block;
	font-size: 11px;
	padding: 0 6px;
	border-radius: 2px;
	border: 1px solid;
	line-height: 18px;
	box-sizing: content-box; /* res */
}
form > dl > dt.required::after {
	content: "必須";
	color: #c60000;
	background: #fff;
	border-color: #c60000;
	bottom: auto;
	width: 2em;
}
form > dl > dt.optional::after {
	content: "任意";
	color: #999;
	background: #fff;
	border-color: #999;
	width: 2em;
}
form > dl > dd {
	box-sizing: border-box;
	padding: 0;
	line-height: 1.45;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
form > dl > dd label {
	display: inline-block;
	border: 1px solid #ccc;
	background-color: #fff;
	line-height: 32px;
	padding: 0 12px;
	cursor: pointer;
}
form > dl > dd ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	overflow: hidden;
}
form > dl > dd label:hover {
	opacity: 0.7;
	transition: opacity 0.3s;
}
@container form_width (max-width: 580px) {
	input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
		width: 100%;
	}
	.select-group {
		width: 100%;
	}
	form > dl {
		display: flex;
		flex-wrap: wrap;
		gap: 5px 0;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	form > dl > dt {
		align-items: center;
        flex-direction: row;
		width: 100%;
	}
	form > dl > dd {
		margin-bottom: 24px;
		width: 100%;
		row-gap: 6px;
	}
	form > dl > dd ul {
		margin-top: 5px;
	}
}

[class*="form-check_col"] {
	display: flex;
	flex-wrap: wrap;
}
[class*="form-check_col"] h5 {
	width: 100%;
} 
.form-check_col2 .form-check.ud {
	width: calc((100% - 8px) / 2);
}
.form-check_col2 .form-check.ud:nth-of-type(2) {
	margin-right: 0;
}
.form-check_col2 .form-check.ud:nth-of-type(3) {
	margin-top: 4px;
}
label.radiobox {
	background: white;
	padding: 10px;
	width: 40%;
	margin: 10px 0;
	display: inline-block;
	border:1px solid #ccc;
	font-size: 15px;
}
.form_02 #girl_img {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 64px;
	height: 64px;
	background-size: 83px 64px;
	background-repeat: no-repeat;
	background-position: -10px 0px;
	border: 1px solid #eee;
	border-radius: 10px;
}
.form_02 #girl_img:after {
	position: absolute;
	top: -7px;
	right: -7px;
	bottom: -7px;
	left: -7px;
	border: 7px solid #fff;
	border-radius: 10px;
	content: "";
}

.inline_select_wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}
.inline_select_wrap.ymd {
	max-width: 580px;
}
.inline_select_wrap.ymd .select-group select, .select-group select[name="furikomi_kingaku"], .select-group select[name="furikomi_time"] {
	font-size: 18px;
}
.inline_select_wrap.ymd .select-group:nth-of-type(1) {
	width: 33%;
}
.inline_select_wrap.ymd .select-group:nth-of-type(2), .inline_select_wrap.ymd .select-group:nth-of-type(3) {
	width: 20%;
}
.inline_select_wrap .select-group + span {
	margin: 0 2% 0 1%;
	font-size: 16px;
}
.inline_select_wrap.ymd .select-group + span {
	margin: 0 1%;
	width: 7%;
	text-align: center;
}

.form_01, .form_02 {
	margin: 0;
	padding: 10px;
}
.form_01 {
	border-bottom: 2px solid #fff;
	background:#f0f0f0;
}

.form_02 {
	background: #fff;
	position: relative;
}
.form_01 h5, .form_02 h5 {
	font-size: 15px;
	margin: 0 0 5px 0;
	position: relative;
}
.form_02 h5 {
	color: var(--color_accent);
}
.form_01 h5.required::after, .form_02 h5.required::after {
	content: "必須";
	color: #c60000;
	background: #fff;
	border: 1px solid #c60000;
	font-size: 11px;
	padding: 0px 5px;
	border-radius: 2px;
	text-indent: initial;
	display: inline-block;
	transform: translateY(-1px);
	margin-left: 4px;
}
.form_01 .note, .form_02 .note {
	font-size: 12px;
}
.form_01 h5 .note, .form_02 h5 .note {
	margin-left: 5px;
	font-weight: 400;
}

.form_02 textarea {
	height: 10em;
}
.form_01 select, .form_02 select {
	width: 100%;
	font-size: 16px;
}

.button.bbred, .button.danger {
	background: #c60000;
}
.button.outline {
	background: #fff;
	border: 2px solid #ccc;
	color: #444;
	padding-top: 12px;
    padding-bottom: 12px;
}
.button.outline.bbred, .button.outline.danger {
	border-color: #c60000;
	color: #c60000;
}
.button.light {
	background: #eee;
	color: #444;
}


/* ログインボタン */
a.common_button {
	display:block;
	line-height: 40px;
	text-align:center;
	text-decoration:none;
	color:#555;
	background-color:#edd5ac;
	background: linear-gradient(to bottom, #fff8e7, #d9ae6a);
	border:1px solid #c2af83;
	font-weight: 700;
	border-radius: 4px;
}
a.common_button:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-top: -2px;
	margin-right: 5px;
	width: 18px;
	height: 18px;
	background: url(/sp/img/header/icon_entry_btn@2x.png) 0 -18px no-repeat;
	background-size: 18px 54px;
}
a.common_button.login_link {
	color:#fff;
	background:#bc0101;
	background: linear-gradient(to bottom, #df0202, #980000);
	border:1px solid #990000;
}
a.common_button.login_link:before {
	background-position:0 0;
}
a.common_button.login_link2 {
	color:#fff;
	background:#bc0101;
	background: linear-gradient(to bottom, #df0202, #980000);
	border: 1px solid #990000;
}
a.common_button.login_link2:before {
	background-position:0 0;
}
/* 左メニュー 検索ボタン */
a.common_button.more_search {
	background:#eee;
	border:1px solid #eee;
	color:#444;
	position: relative;
}
a.common_button.more_search:before {
	background-position:0 -36px;
}
a.common_button.more_search:after {
	content: "";
	position: absolute;
	right: 15px;
	top: 15px;
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #444;
	border-right: 2px solid #444;
	transform: rotate(45deg);
	box-sizing: border-box;
}

/* リストのぶら下がり */
ul.hang {
	margin: 0 10px 1em;
}

/* 番号付きリスト */
ul.number {
	margin: 0 10px 1em;
	counter-reset: list_number;
	padding-left: 2.1em;
}
ul.number li {
	margin-bottom: 0.5em;
	position: relative;
}
ul.number li::before {
	position: absolute;
	top: 0.1em;
	left: -2.1em;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 2px;
	border-radius: 2px;
	background: #444;
	content: counter(list_number);
	color: #fff;
	font-weight: 700;
	line-height: 1.4em;
	text-align: center;
	counter-increment: list_number;
	box-sizing: border-box;
}
ul.number.accent li::before {
	background: var(--color_accent);
}

/* テーブル */
table.basic {
	width: 100%;
	margin: 15px 0;
}
table.basic caption {
	margin: 0 0 4px 12px;
	font-size: 16px;
	text-align: left;
	font-weight: 700;
}
table.basic th, table.basic td {
	border: 1px solid #ccc;
	padding: 8px;
}
table.basic thead th {
	background: #999;
	color: #fff;
}
table.basic tbody th {
	background: #f3f3f3;
}

/* メッセージ */
.system_msg {
	color: #f00;
	font-size: 16px;
	margin: 20px 10px;
	text-align: center;
	font-weight: 700;
}
.regist_msg {
	text-align: center;
	color: #c60000;
	font-size: 16px;
	margin: 20px 10px !important;
	font-weight: 700;
}

/* インナーボックス */

.innerBox {
	margin: 10px;
	padding: 15px;
	border: 2px solid #ccc;
	border-radius: 8px;
}
.innerBox h3, .innerBox h4, section.sub_page .innerBox h3, section.sub_page .innerBox h4 {
	font-size: initial;
	border: none;
	color: initial;
	margin: 0;
	padding: 0;
	margin-bottom: 0.6em;
}
.innerBox p, section.sub_page .innerBox p, .innerBox ul.hang {
	margin: 0 0 1em;
}
.innerBox.bbred, .innerBox.danger {
	border-color: var(--color_bbred);
}
.innerBox.accent {
	border-color: var(--color_accent);
}
.innerBox.success {
	border-color: var(--color_success);
}
.innerBox.info {
	border-color: var(--color_info);
}
.innerBox.warning {
	border-color: var(--color_warning);
}
/* ページナビ */
ul.page_link {
	margin: 20px 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	font-weight: 700;
}
ul.page_link li {
	display: inline-block;
	line-height: 34px;
	margin: 0 4px;
	vertical-align: top;
}
ul.page_link li a {
	display: block;
	text-decoration: none;
	color:#444;
	min-width: 36px;
	border: 1px solid #aaa;
	overflow: hidden;
	border-radius: 4px;
	padding: 0 2px;
}
ul.page_link li.selected {
	color: #fff;
	background-color: #444;
	line-height: 36px;
	border-radius: 4px;
	min-width: 36px;
}
ul.page_link li.selected a {
	border: none;
	color: #fff;
}
ul.page_link li.dot {
	width:24px;
	line-height:36px;
}
ul.page_link li.prev a, ul.page_link li.next a {
	position: relative;
	text-indent: 10em;
	width: 36px;
}
ul.page_link li.prev a:after, ul.page_link li.next a:after {
	content: "";
	position: absolute;
	left: 14px;
	top: 12px;
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #444;
	border-right: 2px solid #444;
	transform: rotate(225deg);
}
ul.page_link li.next a:after {
	left: auto;
	right: 14px;
	transform: rotate(45deg);
}

/* アコーディオン */
/* step,number,faq */

dl.acd {
	border-bottom:1px solid #aaa;
	margin-bottom: 1em;
}
dl.acd dt {
	border-top: 1px solid #aaa;
	padding: 10px;
	margin: 0;
	position: relative;
	clear: both;
	height: 41px;
}
dl.acd dt span {
	display:block;
	float:left;
	margin-bottom:10px;
}
dl.acd dt:after, dl.acd dt.close:after {
	position: absolute;
	display: block;
	top: -4px;
	right: 9px;
	content: "+";
	width: 20px;
	height: 40px;
	font-size: 25px;
	text-align:center;
	margin: 3px 0 0 0;
	padding: 0 0 15px 0;
}
dl.acd dt.open:after {
	position: absolute;
	display: block;
	top: -4px;
	right: 9px;
	content: "-";
	width: 20px;
	height: 40px;
	font-size: 25px;
	text-align:center;
	margin: 3px 0 0 0;
	padding: 0 0 15px 0;
}
dl.acd dt span.step {
	background: #444;
	color:#fff;
	font-size:10px;
	display: block;
	text-align: center;
	margin:3px 6px 0 0;
	padding:2px 4px;
	float: left;
	height: 14px;
	line-height:10px;
}
dl.acd dt span.number {
	background: #444;
	color: #fff;
	font-size: 13px;
	display: block;
	text-align: center;
	margin: 3px 6px 0 0;
	padding: 0 2px;
	float: left;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	border-radius: 2px;
	font-weight: 700;
}
dl.acd dt span.faq {
	background: #444;
	color: #fff;
	font-size: 12px;
	display: block;
	text-align: center;
	margin: 3px 6px 0 0;
	padding: 2px 4px;
	float: left;
	height: 12px;
	line-height: 12px;
}
dl.acd dd span.faq {
	border: 1px solid #444;
	color: #444;
	font-size: 12px;
	display: block;
	text-align: center;
	margin: 3px 6px 0 0;
	padding: 2px 4px;
	float: left;
	height: 12px;
	line-height: 12px;
}
dl.acd dd span {
	display: block;
	float: left;
	margin-bottom: 10px;
}
dl.acd dd span.answer {
	width: 90%;
}
dl.acd dd {
	display: none;
	border-top: 1px dotted #aaa;
	padding: 10px;
	clear: both;
}
dl.acd p.caption {
	background: #eee;
	padding: 5px 0;
	margin: 10px 0;
}

/* タブ */
.tab {
	display: flex;
	width: 100%;
	margin-top: 1em;
	align-items: flex-end;
	padding: 0 10px;
	height: 46px;
	position: relative;
	z-index: 1;
}
.tab [role=tab] {
	width: 50%;
	line-height: 40px;
	cursor: pointer;
	text-align: center;
	font-size: 15px;
	background: #f1f1f1;
	border: 1px solid transparent;
	border-bottom: none;
	white-space: nowrap;
	color: #aaa;
	transition: 0.2s;
	font-weight: 700;
	border-radius: 10px 10px 0 0;
	position: relative;
}
.tab [role=tab][aria-selected=true], .tab [role=tab].selected {
	line-height: 44px;
	background: #fff;
	border: 1px solid #ccc;
	border-bottom: none;
	color: #777;
}
.tab [role=tab][aria-selected=true]::after {
	content: "";
	width: 100%;
	height: 1px;
	background: #fff;
	position: absolute;
	bottom: -1px;
	left: 0;
}
[role=tabpanel] {
	display: none;
	animation: fadeOut 0.5s forwards;
	border-top: 1px solid #ccc;
}
[role=tabpanel][aria-hidden=false] {
	display: block;
	animation: fadeIn 0.5s forwards;
}

/* モーダル */
.popup_message {
	display: none;
	background-color: #fff;
	border-radius: 10px;
	padding: 0 16px 16px;
	width: 90%;
	max-width: 600px;
	text-align: center;
}
.popup_message > h1 {
	color: #c60001;
	font-size: 120%;
	padding: 0;
	margin: 0 0 .7rem;
	line-height: 2.5;
	border-bottom: 1px solid #ccc;
}
.popup_message > button.close {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 9px;
	right: 12px;
	width: 24px;
	height: 0;
	padding: 24px 0 0;
	border: none;
	overflow: hidden;
	text-indent: 5em;
	color: #999;
	background-color: transparent;
	outline: none;
}
.popup_message > button.close:before {
	font-family: "bb_font";
	content: "\e903";
	position: absolute;
	top: 0;
	left :0;
	right: 0;
	bottom: 0;
	text-indent: 0;
	font-size: 24px;
	line-height: 1;
	text-align: center;
}
.popup_message:not(.imagePreview):not(.detail) img {
	width: 100%;
	height: auto;
} 

/* モーダル_画像プレビュー */
.popup_message.imagePreview {
	padding: 20px;
}
.popup_message.imagePreview > button.close {
	background: #fff;
	top: -16px;
	right: -8px;
	border: 2px solid #d5d5d9;
	border-radius: 18px;
	width: 36px;
	padding: 32px 0 0;
	outline: none;
}
.popup_message.imagePreview > button.close::before {
	line-height: 32px;
}
.popup_message.imagePreview img {
	max-width: 76vw;
	max-height: 76vh;
	border: 1px solid #d5d5d9;
}

/* 画像アップロードボタンとプレビュー */
.imageUpload {
	margin-top: 4px;
}
.imageUpload * {
	box-sizing: border-box;
}
.imageUpload_button {
	display: block;
	position: relative;
	width: 180px;
	height: 40px;
	border: none;
	padding: 0;
	margin-bottom: 24px;
}
.imageUpload_button input {
	z-index: 9999;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}
.imageUpload_button div {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 100%;
	transform: translateY(-50%);
	border: 1px solid #ccc;
	border-radius: 20px;
	line-height: 38px;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	font-size: 16px;
	text-indent: 1em;
	background: #fff;
}
.imageUpload_button div:hover {
	opacity: 0.7;
}
.imageUpload_button div::before {
	display: block;
	position: absolute;
	top: calc(50% - 1px);
	left: 20px;
	width: 13px;
	height: 2px;
	background: #aaa;
	content: "";
}
.imageUpload_button div::after {
	display: block;
	position: absolute;
	top: calc(50% - 1px);
	left: 20px;
	width: 13px;
	height: 2px;
	transform: rotate(90deg);
	background: #aaa;
	content: "";
}
.imageUpload_button small {
	display: block;
	margin: 8px 0 0 0;
	font-size: 11px;
	line-height: 1;
}
.imageUpload_preview {
	display: none;
	margin-top: 4px;
}
.imageUpload_preview .imgWrap {
	display: inline-block;
	position: relative;
}
.imageUpload_preview .imgWrap img {
	max-width: 100px;
	height: auto;
	max-height: 200px;
	margin: 0 auto;
	object-fit: cover;
	border: 2px solid #d5d5d9;
	border-radius: 8px;
}
.imageUpload_preview .imgWrap .fileSize {
	margin-top: 6px;
	color: #73737a;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}
.imageUpload_preview .clearButton {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 28px;
	height: 28px;
	border: 2px solid #d5d5d9;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.imageUpload_preview .clearButton::before {
	display: block;
	position: absolute;
	top: calc(50% - 1px);
	left: 5px;
	width: 14px;
	height: 2px;
	transform: rotate(45deg);
	background: #45454a;
	content: "";
}
.imageUpload_preview .clearButton::after {
	display: block;
	position: absolute;
	top: calc(50% - 1px);
	left: 5px;
	width: 14px;
	height: 2px;
	transform: rotate(-45deg);
	background: #45454a;
	content: "";
}

/*アプリダウンロード */
section.app {
	text-align: center;
	padding-bottom: 10px;
}
section.app  h2 {
	margin-bottom: 10px;
	background: #444;
	color: #b5a642;
	text-align: center;
	font-size: 13px;
	height: 26px;
	line-height: 26px;
}
section.app img {
	width: calc(100% - 20px);
	height: auto;
}

/* 広告バナー */
section.pr_bnr {
	padding-bottom: 10px;
	content-visibility: auto;
contain-intrinsic-size: 128px;
}
section.pr_bnr ul {
	font-size: 12px;
	text-align: center;
}
section.pr_bnr li {
	padding: 10px 0 0;
}
section.pr_bnr a {
	text-decoration:none;
}
section.pr_bnr img {
	width: calc(100% - 20px);
	height: auto;
	margin-bottom: 3px;
}
body.in_app section.pr_bnr {
	display: none;
}

/* 右下オーバーレイバナー */
#bottom_bnr.right_fix {
	position: fixed;
	right: 0;
	bottom: 8px;
	z-index: 100000;
	width: 190px;
}
#bottom_bnr.right_fix #bottom_bnr_close {
	top: -17px;
	left: 0px;
	font-size: 30px;
	position: absolute;
	z-index: 1000;
	width: 34px;
	height: 34px;
	background-color: #fff;
	border: 2px solid #333;
	border-radius: 50%;
}
#bottom_bnr.right_fix #bottom_bnr_close::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);	
	background: #333;
	width: 20px;
	height: 3px;
}
#bottom_bnr.right_fix #bottom_bnr_close::after {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	background: #333;
	width: 3px;
	height: 20px;
}
#bottom_bnr.right_fix .bottom_bnr_box {
	margin: 0 0 0 auto;
	width: 170px;
	padding: 10px 10px 10px 10px;
	text-align: center;
	background: linear-gradient(#fff, #eee);
	border-radius: 5px 0 0 5px;
	box-shadow: 0 0 5px rgb(0 0 0 / 60%);
	display: block;
	text-decoration: none;
}
#bottom_bnr.right_fix .bottom_bnr_box div {
	margin-top: 8px;
	font-size: 13px;
	font-weight: bold;
}

@keyframes fadeIn {
	0% {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	100% {
		display: block;
		opacity: 1;
	}
}
@keyframes fadeOut {
	0% {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	100% {
		display: none;
		opacity: 0;
	}
}