@charset "UTF-8";

.Contents {
	display: grid;
	padding: 0 1.5rem;
	gap: var(--margin--lv1);
}

[id^="error"] {
	scroll-margin-top: 50vh;
}

.hr {
	border-color: var(--border-color);
}

.email {
	overflow-wrap: anywhere;
}

.userName {
	font-weight: var(--font-weight--bold);
	font-size: calc(var(--font-size--m) * 1.25);
}

/* ------------------------------
    start_Group
------------------------------ */

.Group {
	display: grid;
	align-items: start;
	width: 100%;
}

.Group[data-lv="1"],
.Group[data-lv--sp="1"] {
	gap: var(--margin--lv1);
}

.Group[data-lv="2"],
.Group[data-lv--sp="2"] {
	gap: var(--margin--lv2);
}

.Group[data-lv="3"],
.Group[data-lv--sp="3"] {
	gap: var(--margin--lv3);
}

.Group[data-lv="4"],
.Group[data-lv--sp="4"] {
	gap: var(--margin--lv4);
}

.Group[data-lv="5"],
.Group[data-lv--sp="5"] {
	gap: var(--margin--lv5);
}

/* start_column */

.Group[data-column--sp="2"] {
	grid-template-columns: repeat(2, 1fr);
}

/* end_column */

/* start_style */

.Group:is([data-style="background"], [data-style="border"], [data-style="background-border"])[data-lv="3"] {
	padding: var(--padding--lv1);
	border-radius: var(--border-radius--lv1);
}

.Group:is([data-style="background"], [data-style="border"], [data-style="background-border"])[data-lv="4"] {
	padding: var(--padding--lv2);
	border-radius: var(--border-radius--lv2);
}

.Group:is([data-style="background"], [data-style="border"], [data-style="background-border"])[data-lv="5"] {
	padding: var(--padding--lv3);
	border-radius: var(--border-radius--lv3);
}

.Group:is([data-style="background"], [data-style="background-border"]) {
	background-color: var(--bg-color);
}

.Group:is([data-style="border"], [data-style="background-border"]) {
	border: 1px solid var(--border-color);
}

/* end_style */

/* start_type */

.Group[data-type="subgrid"] {
	dt {
		font-weight: var(--font-weight);
	}
}

/* end_type */

/* ------------------------------
    end_Group
------------------------------ */

/* ------------------------------
    start_H
------------------------------ */

.H2 {
	position: relative;
	width: 100%;
	padding-bottom: var(--padding--lv2);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xxl);
	line-height: var(--line-height--narrow);
	text-align: center;
}

.H2::after {
	display: block;
	position: absolute;
	bottom: 0;
	left: calc(50% - 3.5rem);
	width: 7rem;
	height: 0.3rem;
	background: linear-gradient(90deg, #00a0e9 0%, #00a0e9 50%, var(--corporate-color) 50%, var(--corporate-color) 100%);
	content: "";
}

.H3 {
	display: flex;
	align-items: center;
	padding: var(--padding--lv2);
	border-left: var(--border-radius--lv2) solid var(--safety-color);
	border-radius: var(--border-radius--lv2);
	background-color: var(--bg-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
}

.H3[data-type="global"] {
	border-color: var(--corporate-color);
}

.H4 {
	display: flex;
	align-items: center;
	gap: var(--margin--lv5);
	font-weight: var(--font-weight--bold);

	&[data-style="background"] {
		padding: var(--padding--lv2);
		background-color: var(--bg-color);
	}
}

/* ------------------------------
    end_H
------------------------------ */

/* ------------------------------
    start_Annotation
------------------------------ */

/* 予約フロー改善 2026/01/08 hyrchxiang Add Start */
.Annotation_memo {
	display: block;
	font-size: var(--font-size--xs);
	line-height: var(--line-height--narrow);
}
/* 予約フロー改善 2026/01/08 hyrchxiang Add End */

.Annotation {
	display: block;
	padding-left: 1em;
	font-size: var(--font-size--xs);
	line-height: var(--line-height--narrow);
	text-indent: -1em;
}

.Annotation[data-type="warning"] {
	color: var(--caution-color);
}

.Annotation[data-type="number"] {
	padding-left: 2.2em;
	text-indent: -2.2em;
}

.Annotation[data-style="noindent"] {
	padding-left: unset;
	text-indent: unset;
}

.Annotation[data-display="inline"] {
	display: inline-block;
}

/* ------------------------------
    end_Annotation
------------------------------ */

/* ------------------------------
    start_ReserveIcn
------------------------------ */

.ReserveIcn {
	display: inline-block;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--bg-color--safety);
	vertical-align: -0.2em;
}

.ReserveIcn[data-type="point"] {
	background-image: url(../images/icn_point.svg);
}

.ReserveIcn[data-type="coupon"] {
	background-image: url(../images/icn_coupon.svg);
}

/* ------------------------------
    end_ReserveIcn
------------------------------ */

/* ------------------------------
    start_Note
------------------------------ */

.Note {
	--note-padding: var(--padding--lv1);
	--note-gap: var(--margin--lv3);
	display: grid;
	position: relative;
	padding: var(--note-padding);
	gap: var(--note-gap);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv1);
	background-color: var(--bg-color);
}

.Note__group {
	display: grid;
	justify-items: start;
	gap: var(--margin--lv4);
}

.Note__group:not(:last-of-type) {
	padding-bottom: var(--note-padding);
	border-bottom: 1px solid var(--border-color);
}

.Note__ttl {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: var(--line-height--narrow);
}

/* start_type */

.Note[data-type="caution"] {
	background-color: #fff4f2;
}

.Note[data-type="caution"] .Note__ttl {
	color: var(--caution-color);
}

.Note[data-type="notice"] {
	background-color: var(--bg-color--safety);
}

.Note[data-type="notice"] .Note__ttl {
	color: var(--safety-color);
}

/* end_type */

/* start_size */

.Note[data-size="small"] {
	--note-padding: var(--padding--lv2);
	--note-gap: var(--margin--lv4);
}

/* end_size */

/* start_detailsNote */

details.Note {
	gap: 0;
}

details.Note[open] {
	gap: var(--note-gap);
}

/* end_detailsNote */

.List__item {
	padding-left: 0.5em;
	text-indent: -0.5em;
}

.List__item[data-type="hasSpace"] {
	padding-left: 0.9em;
	text-indent: -0.9em;
}

.List__item:not(:last-child) {
	margin-bottom: var(--margin--lv5);
}

/* ------------------------------
    end_Note
------------------------------ */

/* ------------------------------
    start_ErrorAnchor
------------------------------ */

.ErrorAnchor {
	justify-self: start;
	color: var(--caution-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: var(--line-height--narrow);
	text-decoration: underline;
}

/* ------------------------------
    end_ErrorAnchor
------------------------------ */

/* ------------------------------
    start_Table
------------------------------ */

.Table {
	background-color: #fff;
}

.Table__caption {
	padding: var(--padding--lv2);
	border: 1px solid var(--border-color);
	border-bottom: none;
	background-color: var(--bg-color);
	font-weight: var(--font-weight--bold);
}

.Table :is(th, td) {
	padding: var(--padding--lv3);
	border: 1px solid var(--border-color);
}

.Table th {
	background-color: var(--bg-color--safety);
	font-weight: 400;
	font-size: var(--font-size--s);
	line-height: var(--line-height--narrow);
	vertical-align: middle;
}

.Table[data-type="rowTh"] th {
	text-align: center;
}

.Table[data-type="rowTh"] td {
	vertical-align: middle;
}

.Table td {
	text-align: center;
}

/* start_insurance */

.Table[data-kind="insurance"] .Table__caption {
	border: none;
	background-color: #007cb5;
	color: #fff;
}

.Table[data-kind="insurance"] :is(th, td) {
	border-color: #66a6c3;
	vertical-align: middle;
}

.Table[data-kind="insurance"] th {
	width: 65%;
	background-color: #fafafa;
}

.Table[data-kind="insurance"] td {
	width: 35%;
}

.Table[data-kind="insurance"] tr:last-child :is(th, td) {
	background-color: #f1f7fc;
}

/* end_insurance */

/* start_participants */

.Table[data-kind="participantModal"] td[data-kind="name"] {
	width: 30%;
	font-size: var(--font-size--s);
	text-align: left;
}

.Table[data-kind="participantModal"] td[data-kind="date"] {
	width: 30%;
	font-size: var(--font-size--s);
}

.Table[data-kind="participantModal"] td[data-kind="btn"] {
	width: 20%;
}

/* end_participants */

/* start_numberOfRequestedDocuments */

.Table[data-kind="numberOfRequestedDocuments"] {
	th {
		text-align: center;
	}

	td {
		padding: var(--padding--lv3);
		text-align: left;
		vertical-align: middle;

		&:first-child {
			width: 70%;
		}

		&:last-child {
			width: 30%;
		}
	}
}

/* end_numberOfRequestedDocuments */

/* ------------------------------
    end_Table
------------------------------ */

/* ------------------------------
    start_BasicFormTable
------------------------------ */

.BasicFormTable {
	display: grid;
	width: 100%;
	gap: var(--margin--lv3);
}

/* ------------------------------
    hyron add 2026.07.02 start
------------------------------ */
.BasicFormTable[data-type="showLv4"]{
	gap: var(--margin--lv4);
}
/* ------------------------------
    hyron add 2026.07.02 start
------------------------------ */

.BasicFormTable__group {
	display: grid;
	gap: var(--margin--lv5);
}

/* start_SendingDocuments */

.BasicFormTable__group:where(:has([data-kind="whereToSendDocs"]), [data-kind="deliveryAddress"]) {
	display: none;
}

[data-show-whereToSendDocs="true"] .BasicFormTable__group:has([data-kind="whereToSendDocs"]) {
	display: grid;
}

[data-show-deliveryAddress="true"] .BasicFormTable__group[data-kind="deliveryAddress"]{
	display: grid;
}

/* end_SendingDocuments */

.BasicFormTable dt {
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
	line-height: var(--line-height--narrow);
}

.BasicFormTable dt .RequiredLabel {
	margin-left: var(--margin--lv5);
}

/* ------------------------------
    hyron add 2026.07.18 start
------------------------------ */
.BasicFormTable dt[data-type="auto"]{
	height: auto;
}
/* ------------------------------
    hyron add 2026.07.18 end
------------------------------ */

.BasicFormTable dd {
	display: grid;
	position: relative;
	column-gap: var(--margin--lv4);
	row-gap: var(--margin--lv5);
	align-items: center;
	align-self: center;
}

/* ------------------------------
    end_BasicFormTable
------------------------------ */

/* ------------------------------
    start_NumberFormTable
------------------------------ */

.NumberFormTable {
	display: grid;
	gap: var(--margin--lv4);
}

.NumberFormTable__group {
	display: grid;
	gap: var(--margin--lv5);
}

.NumberFormTable dt {
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
	line-height: var(--line-height--narrow);
}

.NumberFormTable dd {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-auto-flow: column;
	align-items: end;
}

.NumberFormTable dd:has(span) {
	gap: var(--margin--lv5);
}

/* start_horizontal */

.NumberFormTable[data-type="horizontal"] {
	grid-template-columns: max-content 1fr;
}

.NumberFormTable[data-type="horizontal"] .NumberFormTable__group {
	grid-template-columns: subgrid;
	grid-auto-flow: column;
	grid-column: span 2;
	align-items: center;
	gap: var(--margin--lv4);
}

.NumberFormTable[data-type="horizontal"] dt {
	max-width: 12rem;
}

/* end_horizontal */

/* ------------------------------
    end_NumberFormTable
------------------------------ */

/* ------------------------------
    start_NestTable
------------------------------ */

.NestTable {
	width: 100%;
	border: 1px solid var(--border-color);
}

.NestTable__ttl {
	padding: var(--padding--lv2);
	border-bottom: 1px solid var(--border-color);
	background-color: var(--bg-color);
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
	text-align: center;
}

.NestTable__group {
	display: grid;
	grid-template-columns: 1fr 2fr;
}

.NestTable__group:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}

.NestTable__group dt {
	border-right: 1px solid var(--border-color);
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
}

.NestTable__group[data-lv="1"] dt,
.NestTable__group[data-lv="2"] dd {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--padding--lv3) var(--padding--lv2);
	text-align: center;
}

.NestTable__group[data-lv="2"] dd:not([data-type="price"]) {
	line-height: var(--line-height--narrow);
	text-align: left;
}

.NestTable__group[data-lv="2"] dd[data-type="price"] {
	color: var(--caution-color);
}

/* ------------------------------
    hyron add 2025.11.13 start
------------------------------ */
.NestTable__group[data-lv="3"] {
	display: grid;
	grid-template-columns: 2fr 2fr;
}

.NestTable__group[data-lv="3"] dt {
	border-right: 1px solid var(--border-color);
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
	padding: var(--padding--lv3) var(--padding--lv2);
	text-align: center;
}

.NestTable__group[data-lv="3"] dd {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--padding--lv3) var(--padding--lv2);
	text-align: center;
}

.NestTable__group[data-lv="3"] dd:not([data-type="price"]) {
	line-height: var(--line-height--narrow);
	text-align: left;
}

.NestTable__group[data-lv="3"] dd[data-type="price"] {
	color: var(--caution-color);
}
/* ------------------------------
    hyron add 2025.11.13 end
------------------------------ */

/* ------------------------------
    end_NestTable
------------------------------ */

/* ------------------------------
    start_InputInfoDisplayTable
------------------------------ */

.InputInfoDisplayTable {
	display: grid;
	width: 100%;
	gap: var(--margin--lv4);
}

.InputInfoDisplayTable__group {
	display: grid;
}

.InputInfoDisplayTable__group > dt {
	display: flex;
	align-items: center;
	padding: var(--padding--lv2);
	gap: var(--margin--lv5);
	background-color: var(--bg-color);
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
	line-height: var(--line-height--narrow);
}

.InputInfoDisplayTable__group > dd {
	display: grid;
	position: relative;
	column-gap: var(--margin--lv4);
	row-gap: var(--margin--lv5);
	align-items: center;
	padding: var(--padding--lv2);
}

/* ------------------------------
    end_InputInfoDisplayTable
------------------------------ */

/* ------------------------------
    start_TransportCompanionTable
------------------------------ */

.TransportCompanionTable {
	display: grid;
	gap: var(--margin--lv3);
}

.TransportCompanionTable__group {
	display: grid;
	gap: var(--margin--lv4);
}

.TransportCompanionTable__group dt {
	font-weight: var(--font-weight--bold);
}

.TransportCompanionTable__group dd[data-kind="terminal"] {
	display: grid;
	gap: var(--margin--lv5);
}

.TransportCompanionTable__group dd[data-kind="terminal"] label {
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--narrow);
}

/* ------------------------------
    end_TransportCompanionTable
------------------------------ */

/* ------------------------------
    start_Modal
------------------------------ */

.ModalOverlay {
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #00111a;
	opacity: 0.7;
}

/* 予約フロー改善 2026/06/24 hyrbson Mod Start */
.Modal {
	--header-height: 5.5rem;
	--footer-height: calc(8.6rem + env(safe-area-inset-bottom));
	display: grid;
	z-index: 20;
	position: fixed;
	top: 0;
	left: 0;
	grid-template-rows: var(--header-height) 1fr var(--footer-height);
	width: 100%;
	/* 予約フロー改善 2026/06/19 tisytana Mod  */
	height: 100dvh;
	overflow: hidden;
	background-color: #fff;

	&:has(.ModalFooter__counter) {

		--footer-height: calc(11rem + env(safe-area-inset-bottom));

		/* 「ModalFooter__error」という要素が存在し、かつ、それに display:none というstyle属性が【ついていない】場合のみマッチさせる */
		&:has(.ModalFooter__error:not([style*="display:none"])) {
			--footer-height: calc(13rem + env(safe-area-inset-bottom));
		}

	}
}
/* 予約フロー改善 2026/06/24 hyrbson Mod End */

.ModalHeader {
	display: grid;
	grid-template-columns: 1fr 5.5rem;
	align-items: center;
	border-bottom: 1px solid var(--border-color);
}

.ModalHeader__ttl {
	padding: 0 1.5rem;
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: calc(var(--line-height--narrow) * .8);
}

/* start_ModalCloseBtn */

.ModalCloseBtn {
	display: grid;
	position: relative;
	align-items: center;
	justify-content: center;
}

.ModalCloseBtn[data-type="header"] {
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"icn"
		"txt";
	height: 100%;
	padding: 0.4rem;
	background-color: #888;
}

.ModalCloseBtn[data-type="footer"] {
	grid-template-columns: 1.2rem auto;
	grid-template-areas: "icn txt";
	padding: 1.13rem 2rem;
	gap: 0.5rem;
	border-radius: 0.3rem;
	background-color: #888;
	color: #fff;
}

.ModalCloseBtn::before,
.ModalCloseBtn::after {
	display: block;
	position: absolute;
	grid-area: icn;
	height: 0.2rem;
	margin: auto;
	inset: 0;
	content: "";
}

.ModalCloseBtn[data-type="header"]::before,
.ModalCloseBtn[data-type="header"]::after {
	width: 2rem;
	background-color: #fff;
}

.ModalCloseBtn[data-type="footer"]::before,
.ModalCloseBtn[data-type="footer"]::after {
	width: 1.2rem;
	background-color: #fff;
}

.ModalCloseBtn::before {
	rotate: 45deg;
}

.ModalCloseBtn::after {
	rotate: -45deg;
}

.ModalCloseBtn__txt {
	grid-area: txt;
}

[data-type="header"] .ModalCloseBtn__txt {
	color: #fff;
	font-weight: var(--font-weight--bold);
	font-size: 1rem;
	letter-spacing: 0;
}

/* end_ModalCloseBtn */

/* 予約フロー改善 2026/06/24 hyrbson Mod End */
.ModalContents {
	height: calc(100dvh - var(--header-height) - var(--footer-height));
	overflow-y: auto;
	overscroll-behavior: none;
}
/* 予約フロー改善 2026/06/24 hyrbson Mod End */

.Modal[data-type="noFooter"] .ModalContents {
	height: calc(100vh - var(--header-height));
}

.ModalContents__inner:not(:has(.TravelcomModal)) {
	padding: 1.5rem;
}

/* 予約フロー改善 2026/06/24 hyrbson Mod Start */
.ModalFooter1 {
	display: grid;
	grid-template-columns: 0.5fr;
	justify-content: center;
	padding: var(--padding--lv1);
	border-top: 1px solid var(--border-color);
}

.ModalFooter {
	/* 1. 下部固定のための設定 */
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%; /* 横幅いっぱいに広げないと中央寄せがズレます */
	z-index: 1000; /* 他の要素の下に隠れないようにする（数字は調整してください） */

	/* 2. 元々の中央寄せ（Grid）の設定 */
	display: grid;
	grid-template-columns: minmax(200px, 0.5fr); /* スマホでの文字はみ出しを防ぐためminmaxを推奨 */
	justify-content: center;

	/* 3. 背景色と線（固定すると背景が透明になり後ろが透けるため、白などを指定） */
	background-color: #ffffff;
	border-top: 1px solid var(--border-color);

	/* 4. 余白とセーフエリア対策 */
	padding: var(--padding--lv1);
	/* iPhoneなどのノッチ・下部バーがある端末用に、セーフエリア分の余白を下にプラスする */
	padding-bottom: calc(var(--padding--lv1) + env(safe-area-inset-bottom));
}
/* 予約フロー改善 2026/06/24 hyrbson Mod End */

.ModalFooter[data-btnLength="2"] {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--margin--lv4);
}

.ModalFooter__counter {
	color: var(--caution-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
	text-align: center;
}

.ModalFooter__error {
	margin-bottom: var(--margin--lv5);
    color: var(--caution-color);
    font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	text-align: center;
    white-space: nowrap;
}

/* ------------------------------
    end_Modal
------------------------------ */

/* ------------------------------
    start_Modal（カレンダー）
------------------------------ */

.ConditionModal-day-wrap {
	--bold: 600;
}

.ConditionModal-day-month:not(:last-of-type) {
	margin-bottom: 2rem;
}

.ConditionModal-day-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.ConditionModal-day-ttl {
	font-weight: var(--bold);
	font-size: 1.5rem;
}

.ConditionModal-day-select-month {
	padding: 1.3rem 1.5rem;
	border: 1px solid #c3c3c3;
	border-radius: 5rem;
	color: #666;
	font-weight: var(--bold);
	font-size: 1.3rem;
	line-height: 1;
}

.ConditionModal-day-table th,
.ConditionModal-day-table td {
	display: table-cell;
	width: calc((345rem / 7) / 10);
	height: calc((345rem / 7) / 10);
	border: 1px solid #e5e5e5;
	font-weight: var(--bold);
	font-size: 1.3rem;
	line-height: 1;
	letter-spacing: 0;
}

.ConditionModal-day-table th:first-child,
.ConditionModal-day-table td:first-child {
	color: #ff6666;
}

.ConditionModal-day-table th:last-child,
.ConditionModal-day-table td:last-child {
	color: #6397f7;
}

.ConditionModal-day-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	/* width: 100%;
  	height: 100%; */
	width: 100%;
	height: 100%;
}

.ConditionModal-day-bg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.ConditionModal-day-table th .ConditionModal-day-bg {
	background: #f5f5f5;
}

.ConditionModal-day-bg:hover,
.ConditionModal-day-table th .ConditionModal-day-bg:hover {
	background: var(--active-color);
}

.ConditionModal-day-bg.active,
.ConditionModal-day-table th .ConditionModal-day-bg.active {
	background: var(--corporate-color);
	color: white;
}

.ConditionModal-day-empty {
	background: #e5e5e5;
}

.ConditionModal-day-g.out {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.ConditionModal-day-g {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

/* ------------------------------
    end_Modal（カレンダー）
------------------------------ */


/* ------------------------------
    start_TravelcomModal
------------------------------ */

/* start_TravelcomModal共通 */

.TravelcomModal {
    .TravelcomModal--ac-inner {
        overflow: hidden;
    }

    /* start_アコーディオンアイコン */

    .Search__icn-plus {
        display: block;
        position: absolute;
        top: 50%;
        right: 1rem;
        width: 1.6rem;
        height: 1.6rem;
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: var(--corporate-color);
    }

    .Search__icn-plus-inner {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .Search__icn-plus-inner::before,
    .Search__icn-plus-inner::after {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 0.8rem;
        transform: translate(-50%, -50%);
        background-color: white;
        content: "";
    }

    .Search__icn-plus-inner::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .trans-minus .Search__icn-plus-inner::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    /* end_アコーディオンアイコン */

    /* start_チェックボックス */

    input[type="checkbox"] {
        display: none;

        &:checked + .Search__checkbox-label .Search__checkbox-btn {
            border: none;
            background-color: var(--corporate-color);

            &::after {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 1rem;
                height: 0.7rem;
                transform: translate(-50%, -70%) rotate(-45deg);
                border-bottom: 0.2rem solid white;
                border-left: 0.2rem solid white;
                content: "";
            }
        }

        &:disabled + .Search__checkbox-label {
            background-color: var(--disable-bg-color);
            color: var(--disable-font-color);
            pointer-events: none;

            .Search__checkbox-btn {
                opacity: 0;
            }
        }
    }

    .Search__checkbox-label {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin: -1px 0 0 0;
        padding: 1rem;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

    .Search__checkbox-btn {
        display: inline-block;
        position: relative;
        width: 2rem;
        height: 2rem;
        margin-right: 0.5rem;
        border: 0.2rem solid #888;
        border-radius: 0.4rem;
        background-color: white;
        vertical-align: -0.5rem;
    }

    .Search__checkbox-txt {
        width: calc(100% - 2.5rem);
    }

    /* end_チェックボックス */
}

/* end_TravelcomModal共通 */

/* start_出発地 */

.TravelcomModal--departure {
    .TravelcomModal--departure-ac-btn {
        display: block;
        position: relative;
        padding: 1.5rem;
        border-bottom: 1px solid #e5e5e5;
        font-weight: var(--font-weight--bold);
        line-height: 1;

        &.active {
            background-color: #e5e5e5;

            &+ .TravelcomModal--departure-ac-contents {
                grid-template-rows: 1fr;
            }
        }
    }

    .TravelcomModal--departure-ac-contents {
        display: grid;
        grid-template-rows: 0fr;
        box-shadow: 0px -1px 0px 0px #e5e5e5 inset;
        transition: grid-template-rows .3s;
    }

    .TravelcomModal--departure-ac-contents-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .Search__checkbox-label {
        width: 50%;

        &:first-of-type {
            width: 100%;
            font-weight: var(--font-weight--bold);
        }

        &:nth-of-type(even) {
            border-right: 1px solid #e5e5e5;
        }
    }
}

/* end_出発地 */

/* ------------------------------
    end_TravelcomModal
------------------------------ */


/* ------------------------------
    start_Dialog
------------------------------ */

dialog {
	width: min(100%, 700px);
	padding: 0;
	border-radius: var(--border-radius--lv1);
	color: var(--color);
}

dialog::backdrop {
	background-color: #00111a;
	opacity: 0.7;
}

.Dialog__contents {
	display: grid;
	padding: var(--padding--lv1);
	gap: var(--margin--lv4);
}

.Dialog__group {
	display: grid;
	gap: var(--margin--lv5);
}

.Dialog__group:not(:last-of-type) {
	padding-bottom: var(--margin--lv4);
	border-bottom: 1px solid var(--border-color);
}

.Dialog__footer {
	display: grid;
	grid-template-columns: minmax(calc((100% - var(--margin--lv4)) / 2), auto);
	justify-content: center;
	padding: var(--padding--lv1);
	border-top: 1px solid var(--border-color);
}

.Dialog__footer[data-column="2"] {
	grid-template-columns: repeat(auto-fit, minmax(auto, calc((100% - var(--margin--lv4)) / 2)));
	gap: var(--margin--lv4);
}

.DialogCloseButton {
	display: grid;
	position: relative;
	align-items: center;
	justify-content: center;
	min-height: 4.5rem;
	padding: var(--padding--lv2);
	gap: 0.5rem;
	border-radius: 0.3rem;
	background-color: #f5f5f5;
}

.DialogCloseButton[data-icn] {
	grid-template-columns: 1.2rem auto;
	grid-template-areas: "icn txt";
}

/* start_icn-prev */

.DialogCloseButton[data-icn="prev"]::before {
	display: block;
	position: absolute;
	grid-area: icn;
	width: 0.8rem;
	height: 0.8rem;
	margin: auto;
	inset: 0;
	rotate: 45deg;
	border-bottom: 0.2rem solid var(--color);
	border-left: 0.2rem solid var(--color);
	content: "";
}

/* end_icn-prev */

/* start_icn-close */

.DialogCloseButton[data-icn="close"]::before,
.DialogCloseButton[data-icn="close"]::after {
	display: block;
	position: absolute;
	grid-area: icn;
	width: 1.2rem;
	height: 0.2rem;
	margin: auto;
	inset: 0;
	background-color: #333;
	content: "";
}

.DialogCloseButton[data-icn="close"]::before {
	rotate: 45deg;
}

.DialogCloseButton[data-icn="close"]::after {
	rotate: -45deg;
}

/* end_icn-close */

.DialogCloseButton[data-icn] .DialogCloseButton__txt {
	grid-area: txt;
}

/* ------------------------------
    end_Dialog
------------------------------ */

/* ------------------------------
    start_ReservationSteps
------------------------------ */

#ReservationSteps {
	--detail-height: 1.5rem;
	--inactive-color: #6c6c6c;
	--columns: 5;
	--order-width: 3rem;
	container-type: inline-size;
	display: grid;
	position: relative;
	grid-template-columns: repeat(var(--columns), 1fr);
	width: 100%;
}

#ReservationSteps[data-kind="creditCard"] {
	--columns: 3;
}

#ReservationSteps[data-kind="yucho"] {
	--columns: 2;
}

#ReservationSteps[data-kind="spPoint"] {
	--columns: 3;
}

#ReservationSteps[data-kind="simple"] {
	--columns: 3;
}

#ReservationSteps[data-kind="requestDocuments"] {
	--columns: 4;
}

/* ------------------------------
    hyron add 2025.10.27 start
------------------------------ */
#ReservationSteps[data-kind="register"] {
	--columns: 4;
}
/* ------------------------------
    hyron add 2025.10.27 end
------------------------------ */

#ReservationSteps:has(.ReservationStep__detail) {
	margin-bottom: calc(var(--detail-height) + var(--margin--lv4));
}

.ReservationStep {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	justify-items: center;
	gap: var(--margin--lv5);
}

.ReservationStep__ttl {
	position: relative;
	color: var(--inactive-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: var(--line-height--narrow);
	text-align: center;
}

.ReservationStep[data-status="current"] .ReservationStep__ttl::before {
	display: block;
	position: absolute;
	top: -1rem;
	left: 50%;
	width: 0.8rem;
	height: 0.8rem;
	transform: translateX(-50%) rotate(45deg);
	background-color: var(--safety-color);
	content: "";
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.ReservationStep:is([data-status="current"], [data-status="passed"]) .ReservationStep__ttl {
	display: block;
	color: var(--safety-color);
}

.ReservationStep__order {
	display: grid;
	position: relative;
	place-content: center;
	width: var(--order-width);
	height: var(--order-width);
	border-radius: 50%;
	background-color: var(--bg-color);
	color: var(--inactive-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: 1;
}

.ReservationStep[data-status="current"] .ReservationStep__order {
	background-color: var(--safety-color);
	color: white;
}

.ReservationStep[data-status="passed"] .ReservationStep__order {
	border: 1px solid var(--safety-color);
	background-color: #fff;
}

.ReservationStep[data-status="passed"] .ReservationStep__order::after {
	display: block;
	width: 1rem;
	height: 0.8rem;
	transform: translateY(-0.2rem) rotate(-45deg);
	border-bottom: 0.2rem solid var(--safety-color);
	border-left: 0.2rem solid var(--safety-color);
	content: "";
}

.ReservationStep:not(:first-child) .ReservationStep__order::before {
	display: block;
	z-index: -1;
	position: absolute;
	top: calc(50% - 0.1rem);
	right: 100%;
	width: calc((100cqw / var(--columns)) - var(--order-width));
	height: 0.2rem;
	background-color: var(--bg-color);
	content: "";
}

.ReservationStep:is([data-status="current"], [data-status="passed"]) .ReservationStep__order::before {
	background-color: var(--safety-color);
}

.ReservationStep[data-status="passed"] .ReservationStep__number {
	display: none;
}

.ReservationStep__detail {
	position: absolute;
	top: calc(100% + var(--margin--lv4));
	left: 50%;
	translate: -50% 0;
	color: var(--safety-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: var(--line-height--narrow);
	text-align: center;
	white-space: nowrap;
}

.ReservationStep__detail::before {
	content: "[";
}

.ReservationStep__detail::after {
	content: "]";
}

/* ------------------------------
    end_ReservationSteps
------------------------------ */

/* ------------------------------
    start_CourseInfo
------------------------------ */

#CourseInfo {
	display: grid;
	gap: var(--margin--lv4);
}

.CourseInfo__ttl {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xl);
	line-height: var(--line-height--narrow);
}

.CourseInfoTable {
	display: flex;
	position: relative;
	flex-direction: column;
	width: 100%;
	font-size: var(--font-size--m);

	&::after {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px solid var(--border-color);
		content: '';
		pointer-events: none;
	}
}

.CourseInfoTable__group {
	display: flex;
	border-top: 1px solid var(--border-color);

	:is(dt, dd) {
		padding: var(--padding--lv2);
	}

	dt {
		place-content: center;
		min-width: 9rem;
		border-right: 1px solid var(--border-color);
		background-color: var(--bg-color);
		color: rgba(0, 0, 0, 0.7);
		font-weight: 400;
		font-size: var(--font-size--s);
	}

	dd {
		flex-grow: 1;
	}
}

.CourseInfoTable[data-kind="cruise"] dt {
	min-width: 14.5rem;
}

/* ------------------------------
    end_CourseInfo
------------------------------ */

/* ------------------------------
    start_TravelFeeDetailsTable
------------------------------ */

.TravelFeeDetailsTable {
	display: grid;
	gap: var(--margin--lv4);
}

.TravelFeeDetailsTable dt {
	font-weight: 400;
}

.TravelFeeDetailsTable__group {
	display: grid;
	gap: var(--margin--lv4);
}

.TravelFeeDetailsTable__label {
	padding: var(--padding--lv2);
	background-color: var(--bg-color);
	font-weight: var(--font-weight--bold);
}

/* start_amount */

.TravelFeeDetailsTable__amount dl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--padding--lv2);
	border-top: 0.2rem solid var(--border-color);
}

.TravelFeeDetailsTable__amount dt {
	font-size: var(--font-size--s);
}

/* end_amount */

/* start_innerTable */

.TravelFeeDetailsInnerTable {
	display: grid;
	width: 100%;
	margin-inline: auto;
	padding: 0 var(--margin--lv4);
	gap: var(--margin--lv4);
}

.TravelFeeDetailsInnerTable:not(:last-child) {
	padding-bottom: var(--margin--lv4);
	border-bottom: 1px solid var(--border-color);
}

.TravelFeeDetailsInnerTable__label {
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
}

.TravelFeeDetailsInnerTable dl {
	display: grid;
	grid-template-columns: auto auto calc(11ch + calc(var(--letter-spacing) * 11));
	grid-auto-flow: column;
	gap: var(--margin--lv4);

	&[data-kind="option"] {
		grid-template-columns: repeat(2, auto);

		dd {
			color: var(--caution-color);
		}
	}
}

.TravelFeeDetailsInnerTable dt {
	margin-right: auto;
	font-size: var(--font-size--s);
}

.TravelFeeDetailsInnerTable dd {
	align-self: center;
	justify-self: end;
}

.TravelFeeDetailsInnerTable__price {
	color: var(--caution-color);
}

/* end_innerTable */

/* start_innerTable[noDetail] */

.TravelFeeDetailsTable[data-kind="noDetail"] {
	dl {
		grid-template-columns: 1fr auto;

		dt {
			font-weight: var(--font-weight--bold);
			font-size: var(--font-size--m);
		}
	}
}

/* end_innerTable[noDetail] */

/* ------------------------------
    end_TravelFeeDetailsTable
------------------------------ */

/* ------------------------------
    start_RequiredLabel
------------------------------ */

.RequiredLabel {
	display: inline-block;
	padding: var(--padding--lv3);
	color: #fff;
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: 0.8;
	text-box: trim-both cap alphabetic;
	border-radius: var(--border-radius--lv3);
	background-color: var(--caution-color);
}

/* ------------------------------
    end_RequiredLabel
------------------------------ */

/* ------------------------------
    start_ErrorMessage
------------------------------ */

.ErrorMessage {
	display: block;
	width: 100%;
	color: var(--caution-color);
	font-weight: 400;
	font-size: var(--font-size--m);
}

/* 予約フロー改善 2026/07/06 hyrwqin Add Start */
.ErrorMessageRice {
    display: block;
    width: 100%;
    color: var(--caution-color);
    font-weight: 400;
    font-size: var(--font-size--m);
    padding-left: 1em;
    text-indent: -1em;
}
/* 予約フロー改善 2026/07/06 hyrwqin Add End */

/* ------------------------------
    end_ErrorMessage
------------------------------ */

/* ------------------------------
    start_FormGroupH
------------------------------ */

.FormGroupH {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: var(--line-height--narrow);
}

.FormGroupH[data-style="arrowIcn"]::before {
	display: inline-block;
	width: 0.7em;
	height: 0.5em;
	margin-right: var(--margin--lv5);
	background-color: var(--color);
	content: "";
	vertical-align: 0.15em;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

:is(.H3, .FormGroupH) .RequiredLabel {
	margin-left: var(--margin--lv5);
}

.H3.RequiredLabel {
	flex-shrink: 0;
}

.FormGroupH.RequiredLabel {
	translate: 0 -0.1em;
}

.FormGroupH .ErrorMessage {
	margin-top: var(--margin--lv5);
}

/* ------------------------------
    end_FormGroupH
------------------------------ */

/* ------------------------------
    start_Input
------------------------------ */

.Input:not([data-style="plain"]) {
	width: 100%;
	min-height: 4.5rem;
	padding: var(--padding--lv2);
	border: 1px solid var(--border-color--form);
	border-radius: var(--border-radius--lv2);
	background-color: #fff;
	line-height: var(--line-height--narrow);
}

Input::placeholder {
	/* 予約フロー改善 2026/07/17 hyrwqin Add Start */
	color: #B2B2B2;
	/* 予約フロー改善 2026/07/17 hyrwqin Add End */
	font-weight: 400;
}

:is(.Input:disabled, .Input:has(:disabled:not(option))) {
	border-color: var(--border-color--disabled);
	background-color: var(--bg-color--disabled);
	color: var(--disabled-color);
	opacity: 1;
}

:is(.Input[data-error="true"], .Input:has([data-error="true"])) {
	border-color: var(--caution-color);
	background-color: #fff4f2;
}

.Input[readonly] {
	padding-inline: 0;
	border: none;
	background-color: transparent;
}

.Input:focus {
	border-color: var(--corporate-color);
	box-shadow: 0 0 0 .1rem var(--corporate-color) inset; 
}

/* start_.InputInner */

.InputInner[data-kind="meansOfTransportation"] {
	display: grid;
	width: 100%;
	gap: var(--margin--lv5);
}

.InputInnerMOT__means {
	font-weight: var(--font-weight--bold);
}

.InputInnerMOT__routes {
	display: grid;
	gap: var(--margin--lv5);
}

.InputInnerMOT__prices {
	display: grid;
}

.InputInnerMOT__aside {
	font-size: var(--font-size--s);
}

/* end_.InputInner */

/* start_select */

.SelectWrapper {
	display: inline-block;
	position: relative;
}

.SelectWrapper[data-style="block"] {
	display: block;
}

.SelectWrapper::after {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: var(--padding--lv2);
	width: 0.8rem;
	height: 0.8rem;
	transform: translateY(-70%) rotate(-45deg);
	border-bottom: 0.2rem solid #333;
	border-left: 0.2rem solid #333;
	content: "";
	pointer-events: none;
}

.SelectWrapper:has(:disabled)::after {
	border-color: var(--disabled-color);
}

.Input[data-type="select"] {
	min-width: 5rem;
	padding-right: calc((var(--padding--lv2) * 2) + 0.8rem);
	white-space: break-spaces;
}

.Input[data-type="select"][data-kind="status"] {
	font-family: "Status in option", sans-serif;
}

/* end_select */

/* start_input[type="radio"] */

.Input[data-type="radio"] {
	display: flex;
	position: relative;
	align-items: center;
	padding: var(--padding--lv2);
	gap: var(--margin--lv5);
}

.Input[data-type="radio"]:not(:has(:disabled)) {
	cursor: pointer;
}

.Input[data-type="radio"][data-gap="4"] {
	gap: var(--margin--lv4);
}

.Input[data-type="radio"]:has(:checked) {
	border-color: var(--corporate-color);
}

.Input[data-type="radio"] input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.OriginalRadioIcn {
	display: block;
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	border: 1px solid var(--border-color--form);
	border-radius: 50%;
}

:not(:disabled) + .OriginalRadioIcn {
	background-color: #fff;
}

:checked + .OriginalRadioIcn {
	background-color: var(--corporate-color);
	box-shadow: 0 0 0 0.3rem #fff inset;
}

/* end_input[type="radio"] */

/* start_input[type="radioTable"] */

.RadioTable {
	display: grid;
	padding: var(--padding--lv3);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv2);
	background-color: #fff;
}

.RadioTable[data-column="3"] {
	--radioTable-column: 3;
}

.RadioTable[data-column="4"] {
	--radioTable-column: 4;
}

.RadioTable__th {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span var(--radioTable-column);
	align-items: center;
	padding: var(--padding--lv3) var(--padding--lv2);
	gap: var(--padding--lv2);
	border-bottom: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius--lv3) / 2) calc(var(--border-radius--lv3) / 2) 0 0;
	background-color: var(--bg-color);
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: var(--line-height--narrow);
}

.RadioTable__th p[data-kind="price"] {
	text-align: center;
}

.Input[data-type="radioTable"] {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span var(--radioTable-column);
	align-items: center;
	gap: var(--padding--lv2);
	border: none;
	border-radius: 0;
	background-color: transparent;
	cursor: pointer;
}

.Input[data-type="radioTable"]:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}

.Input[data-type="radioTable"] input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/* end_input[type="radioTable"] */

/* start_input[data-kind="transport"] */

.Input[data-type="radio"][data-kind="transport"] {
	padding: var(--padding--lv1);
	gap: var(--margin--lv4);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

div.Input[data-type="radio"][data-kind="transport"] {
	cursor: default;
}

div.Input[data-type="radio"][data-kind="transport"]:not(:has([data-type="error"], [data-kind="flightInformation"])) {
	background-color: var(--bg-color--safety);
	cursor: default;
}

.Input[data-type="radio"]:has(:checked) {
	background-color: var(--bg-color--safety);
}

.TransportInfoInRadio {
	display: grid;
	width: 100%;
	gap: var(--margin--lv4);
}

.TransportInfoInRadio__connecting {
	display: grid;
	gap: var(--margin--lv4);
}

.TransportInfoInRadioConnecting__group {
	display: flex;
	flex-direction: column;
	gap: var(--margin--lv5);
}

.TransportInfoInRadio__item[data-kind="title"] {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
}

.TransportInfoInRadio[data-kind="flightInformation"] .TransportInfoInRadio__item[data-kind="title"] {
	display: grid;
	place-items: start;
	gap: var(--margin--lv5);
}

.TransportInfoInRadio__item[data-kind="title"]:is(:has([class^="TransportInfoInRadioIcn"])) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--margin--lv4);
}

.TransportInfoInRadio__item[data-kind="schedule"] {
	display: grid;
	grid-template-columns: 1fr 1.5rem 1fr;
	align-items: center;
	gap: var(--margin--lv4);
}

.TransportInfoInRadio__item[data-kind="title"] .TransportInfoInRadio__item[data-kind="schedule"] {
	display: block;
	font-weight: var(--font-weight);
	font-size: var(--font-size--m);
}

.TransportInfoInRadio__item[data-kind="schedule"] .TransportInfoInRadioItem__content {
	display: flex;
	flex-direction: column;
}

.TransportInfoInRadio__item[data-kind="seatInfo"] {
	display: grid;
	gap: var(--margin--lv5);
}

.TransportInfoInRadio__item[data-kind="price"] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--margin--lv4);
}

[class^="TransportInfoInRadioIcn"] {
	flex-shrink: 0;
	padding: var(--padding--lv3);
	translate: 0 -0.1em;
	border: 1px solid var(--safety-color);
	background-color: #fff;
	color: var(--safety-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: 1;
}

.TransportInfoInRadioItem__label {
	flex-shrink: 0;
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	letter-spacing: calc(var(--letter-spacing) / 2);
}

.Input:has(:disabled) {
	.TransportInfoInRadioItem__arrow {
		opacity: .3;
	}

	.TransportInfoInRadioItem__label {
		color: var(--disabled-color);
	}
}

.TransportInfoInRadio__item[data-kind="price"] .TransportInfoInRadioItem__content {
	display: grid;
	grid-template-columns: max-content 1fr;
	color: var(--caution-color);
}

.Input:has(:disabled) {
	.TransportInfoInRadio__item[data-kind="price"] .TransportInfoInRadioItem__content {
		color: var(--disabled-color);
	}

	.TourOptionStatus__mark {
		opacity: .4;
	}
}

.TransportInfoInRadioItemPriceContent__group {
	display: grid;
	grid-template-columns: subgrid;
	column-gap: var(--margin--lv5);
	grid-column: span 2;
}

.TransportInfoInRadioItemPriceContent__price {
	text-align: right;
}

.TransportInfoInRadio__reservationNumber {
	padding: var(--padding--lv3);
	border: 1px solid var(--border-color);
	font-weight: var(--font-weight);
	font-size: var(--font-size--xs);
	line-height: 1;
}

/* end_input[data-kind="transport"] */

/* start_input[data-kind="date"] */

.Input[data-kind="date"] {
	background-image: url(https://www.hankyu-travel.com/attending/common/images/icn_calendar.svg);
	background-position: right 1rem center;
	background-size: 1.6rem;
	background-repeat: no-repeat;
}

/* end_input[data-kind="date"] */

/* start_input[type="checkbox"] */

.Input[data-type="checkbox"] {
	display: flex;
	position: relative;
	align-items: center;
	gap: var(--margin--lv5);
	cursor: pointer;
}

.Input[data-type="checkbox"][data-gap="3"] {
	gap: var(--margin--lv3);
}

.Input[data-type="checkbox"]:has(:checked) {
	border-color: var(--corporate-color);
}

.Input[data-type="checkbox"]:has(:disabled) {
	cursor: default;
}

.Input[data-type="checkbox"] input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.OriginalCheckIcn {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border: 1px solid var(--border-color--form);
	border-radius: var(--border-radius--lv3);
}

:not(:disabled) + .OriginalCheckIcn {
	background-color: #fff;
}

:checked + .OriginalCheckIcn {
	border-color: var(--corporate-color);
	background-color: var(--corporate-color);
}

:checked + .OriginalCheckIcn::after {
	display: block;
	width: 0.8rem;
	height: 0.6rem;
	transform: translateY(-0.1rem) rotate(-45deg);
	border-bottom: 0.2rem solid #fff;
	border-left: 0.2rem solid #fff;
	content: "";
}

/* end_input[type="checkbox"] */

/* start_inputWrap */

.InputWrap {
	display: grid;
	align-items: center;
}

.InputWrap[data-type="hasUnit"] {
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--margin--lv5);
}

/* 予約フロー改善 2026/03/13 hyrwqin Add Start */
.InputWrap[data-type="hasUnit1"] {
	grid-template-columns: 1fr 0.3fr 1.2fr;
	align-items: end;
	gap: var(--margin--lv5);
}
/* 予約フロー改善 2026/03/13 hyrwqin Add End */

/* 年月日 */
.InputWrap[data-kind="date"] {
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: var(--margin--lv4);

	&:not(:has(.Input[title="日"])) {
		grid-template-columns: 1.5fr 1fr;
	}
}

.InputWrap[data-kind="date"] > div {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: flex-end;
	gap: var(--margin--lv5);
}

/* 年月日（インバウンド） */
.InputWrap[data-kind="date--inbound"] {
	grid-template-columns: 1fr auto;
	gap: var(--margin--lv4);
}

.InputWrap[data-kind="date--inbound"]>div {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;
	align-items: flex-end;
	gap: var(--margin--lv5);
}

/* パスポート有効期限 */
.InputWrap[data-type="passport"] {
	grid-template-columns: 0.83fr 1fr 0.6fr;
	gap: var(--margin--lv5);
}

/* 郵便番号 */
.InputWrap[data-kind="postCode"] {
	grid-template-columns: 3fr auto 4fr;
	gap: var(--margin--lv5);
}

/* カード番号 */
.InputWrap[data-kind="cardNumber"] {
	grid-template-columns: repeat(3, 1fr auto) 1fr;
	gap: var(--margin--lv5);
}

/* 有効期限 */
.InputWrap[data-kind="expiry"] {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--margin--lv4);
}

.InputWrap[data-kind="expiry"] > div {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: flex-end;
	gap: var(--margin--lv5);
}

/* end_inputWrap */

/* ------------------------------
    end_Input
------------------------------ */

/* ------------------------------
    start_Button
------------------------------ */

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

/* start_arrow */

.Button[data-arrow="prev"]::before,
.Button[data-arrow="next"]::after {
	display: inline-block;
	flex-shrink: 0;
	width: 0.8rem;
	height: 0.8rem;
	border-bottom: 0.2rem solid currentColor;
	border-left: 0.2rem solid currentColor;
	content: "";
}

.Button[data-arrow="prev"]::before {
	margin-right: var(--margin--lv5);
	rotate: 45deg;
}

.Button[data-arrow="next"]::after {
	margin-left: var(--margin--lv5);
	rotate: -135deg;
}

/* end_arrow */

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

/*---------- start_primary ----------*/

.Button[data-type="primary"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: var(--border-radius--lv2);
	background-color: var(--corporate-color);
	color: #fff;
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--narrow);
}

/* start_size */
.Button[data-type="primary"] {
	min-height: 6rem;
	padding: var(--padding--lv1);
}

.Button[data-type="primary"]:is([data-size="medium"], [data-size="small"]) {
	min-height: 4.5rem;
	padding: var(--padding--lv2);
}
/* end_size */

/* caution */
.Button[data-type="primary"][data-caution="true"] {
	background-color: var(--caution-color);
}

/* disabled */
.Button[data-type="primary"][data-disabled="true"] {
	background-color: var(--disabled-color);
}

/*---------- end_primary ----------*/

/*---------- start_secondary ----------*/

.Button[data-type="secondary"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 4.5rem;
	padding: var(--padding--lv2);
	border: 1px solid #7fb9df;
	border-radius: var(--border-radius--lv2);
	background-color: #fff;
	color: var(--corporate-color);
	line-height: var(--line-height--narrow);
}

/* caution */
.Button[data-type="secondary"][data-caution="true"] {
	border-color: #ff9482;
	color: var(--caution-color);
}

/* disabled */
.Button[data-type="secondary"][data-disabled="true"] {
	border-color: var(--border-color--disabled);
	background-color: var(--bg-color--disabled);
	color: var(--disabled-color);
}

/* close */
.Button[data-type="secondary"][data-kind="close"] {
	border-color: #999;
	color: #888;
}

/* print */
.Button[data-type="secondary"][data-kind="print"] {
	border-color: #999;
	color: #888;
}

/*---------- end_secondary ----------*/

/*---------- start_tertiary ----------*/

.Button[data-type="tertiary"] {
	display: inline;
	justify-self: start;
	/* display: inline-flex;
	align-items: center;
	justify-self: start; */
	color: var(--corporate-color);
	line-height: var(--line-height--narrow);
	text-decoration: underline;
}

/* caution */
.Button[data-type="tertiary"][data-caution="true"] {
	color: var(--caution-color);
}

/* arrow */
.Button[data-type="tertiary"][data-arrow="prev"]::before,
.Button[data-type="tertiary"][data-arrow="next"]::after {
	vertical-align: 0.1rem;
}

/* disabled */
.Button[data-type="tertiary"][data-disabled="true"] {
	color: var(--disabled-color);
	text-decoration: none;
}

/* in Annotation */
.Annotation .Button[data-type="tertiary"] {
	display: inline;
}

/*---------- end_tertiary ----------*/

/*---------- start_icn ----------*/

.Button[data-icn="blank"]::after {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-left: var(--margin--lv5);
	background-color: currentColor;
	content: "";
	mask-image: url(../images/icn_external-link.svg);
}

.Button[data-icn="cancel"]::before {
	display: inline-block;
	aspect-ratio: 1/1;
	width: 1.3125em;
	margin-right: calc(var(--margin--lv5) / 2);
	background: url(../images/icn_cancel.svg) no-repeat center / contain;
	content: "";
}

.Button[data-icn="question"]::before {
	display: inline-block;
	aspect-ratio: 1/1;
	width: 1.3125em;
	margin-right: calc(var(--margin--lv5) / 2);
	background: url(../images/icn_question.svg) no-repeat center / contain;
	content: "";
	vertical-align: -.25em;
}

.Button[data-icn="delete"]::before {
	display: inline-block;
	aspect-ratio: 1/1;
	width: 1.3125em;
	margin-right: calc(var(--margin--lv5) / 2);
	background-color: currentColor;
	content: "";
	mask-image: url(../images/icn_delete.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.Button[data-icn="close"]::before {
	display: inline-block;
	aspect-ratio: 1/1;
	width: 1.3125em;
	margin-right: calc(var(--margin--lv5) / 2);
	background: url(../images/icn_close.svg) no-repeat center / contain;
	content: "";
}

.Button[data-icn="print"]::before {
	display: inline-block;
	aspect-ratio: 1/1;
	width: 1.3125em;
	margin-right: calc(var(--margin--lv5) / 2);
	background: url(../images/icn_print.svg) no-repeat center / contain;
	content: "";
}

.Button[data-icn="toggleOpen"]::after,
.Button[data-icn="toggleClose"]::after {
	display: inline-block;
	width: 0.8rem;
	height: 0.8rem;
	margin-left: var(--margin--lv5);
	border-top: 0.2rem solid currentColor;
	border-right: 0.2rem solid currentColor;
	content: "";
}

.Button[data-icn="toggleOpen"]::after {
	translate: 0 -25%;
	rotate: 135deg;
}

.Button[data-icn="toggleClose"]::after {
	translate: 0 25%;
	rotate: -45deg;
}

/*---------- end_icn ----------*/

/*---------- start_PageClose ----------*/

.PageCloseBtn {
	display: grid;
	grid-template-columns: 1.2rem auto;
	grid-template-areas: "icn txt";
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 6rem;
	padding: var(--padding--lv1);
	gap: 0.5rem;
	border-radius: var(--border-radius--lv2);
	background-color: #888;
	color: #fff;
	line-height: var(--line-height--narrow);
}

.PageCloseBtn::before,
.PageCloseBtn::after {
	display: block;
	grid-area: icn;
	width: 1.2rem;
	height: 0.2rem;
	margin: auto;
	background-color: #fff;
	content: "";
}

.PageCloseBtn::before {
	rotate: 45deg;
}

.PageCloseBtn::after {
	rotate: -45deg;
}

.PageCloseBtn__txt {
	grid-area: txt;
}

/*---------- end_PageClose ----------*/

/* ------------------------------
    end_Button
------------------------------ */

/* ------------------------------
    start_details
------------------------------ */

.Details {
	display: grid;
}

/* start_Details__summary */

.Details__summary {
	cursor: pointer;
}

/* h3 */
.Details__summary[data-type="h3"] {
	position: relative;
}

/* in Details */
.Details .Details__summary {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
}

/* in Details & plain */
.Details .Details__summary[data-type="plain"] {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--margin--lv4);
}

/* in Note */
.Note .Details__summary {
	display: grid;
	gap: var(--margin--lv5);
}

/* end_Details__summary */

/* start_[open] Details__summary */

[open] .Details__summary {
	margin-bottom: var(--margin--lv3);
}

/* in Note & small & plain */
.Note[data-size="small"][open] .Details__summary[data-type="plain"] {
	margin-bottom: var(--margin--lv4);
}

/* end_[open] Details__summary */

/* start_Details__icn */

.Details__icn {
	color: var(--corporate-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: 1;
}

/* h3 */
.Details__summary[data-type="h3"] .Details__icn {
	position: absolute;
	top: 50%;
	right: var(--padding--lv2);
	translate: 0 -50%;
}

/* in Details and ReserveFooter */
.Details .Details__icn,
.ReserveFooter .Details__icn {
	padding: var(--padding--lv3);
	border: 1px solid var(--corporate-color);
	border-radius: var(--border-radius--lv3);
	background: white;
}

/* in Note */
.Note .Details__icn {
	justify-self: end;
	text-decoration: underline;
}

/* end_Details__icn */

/* start_Details__icn::before */

.Details__icn::before {
	content: "開く";
}

[open] .Details__icn::before {
	content: "閉じる";
}

/* in Note */
.Note .Details__icn::before {
	content: "詳しくはこちら";
}

/* 仮受付 */
[data-kind="tempReception"] .Details__icn::before {
	content: "仮受付の詳細と申込みはこちら";
}

/* クーポン詳細 */
[data-kind="couponDetails"] .Details__icn::before {
	content: "開く";
}

[open] [data-kind="couponDetails"] .Details__icn::before {
	content: "閉じる";
}

/* end_Details__icn::before */

.Details__icn::after {
	display: inline-block;
	width: 0.8rem;
	height: 0.8rem;
	margin-left: var(--margin--lv5);
	rotate: 135deg;
	border-top: 0.2rem solid var(--corporate-color);
	border-right: 0.2rem solid var(--corporate-color);
	content: "";
	vertical-align: 0.25rem;
}

[open] .Details__icn::after {
	rotate: -45deg;
	vertical-align: -0.1rem;
}

.Details__content {
	display: grid;
	gap: var(--margin--lv3);
}

/* ------------------------------
    end_details
------------------------------ */

/* ------------------------------
    start_EditableBox
------------------------------ */

.EditableBox {
	padding: var(--padding--lv1);
	border-radius: var(--border-radius--lv1);
	background-color: var(--bg-color);
}

:is(.EditableBox, .isEditable) {
	overflow-wrap: anywhere;
	
	a {
		color: var(--corporate-color);
		text-decoration: underline;
	}
}

/* ------------------------------
    end_EditableBox
------------------------------ */

/* ------------------------------
    start_StepButtons
------------------------------ */

.StepButtons {
	display: grid;
	grid-template-areas: "next" "prev";

	&:has(.StepButton[data-type="prev"]):has(.StepButton[data-type="next"]) {
		gap: var(--margin--lv2);
	}
}

.StepButton[data-type="prev"] {
	grid-area: prev;

	&:has([data-kind="close"]) {
		justify-self: center;
		width: 80%;
	}
}

.StepButton[data-type="next"] {
	grid-area: next;
	justify-self: center;
	width: 80%;
}

.StepButtons[data-type="multiStep"] {
	grid-template-areas: unset;
	gap: var(--margin--lv2);

	.StepButton[data-type="next"] {
		grid-area: unset;
	}
}

/* ------------------------------
    end_StepButtons
------------------------------ */

/* ------------------------------
    start_TotalAmount
------------------------------ */

.TotalAmount {
	display: grid;
	align-items: center;
	justify-content: center;
	padding: var(--padding--lv1);
	border: 0.4rem solid var(--border-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xl);
	text-align: center;
}

.TotalAmount[data-type="multiple"] {
	grid-auto-flow: row;
	justify-content: unset;
	gap: var(--margin--lv4);
}

.TotalAmount[data-kind="tourList"] {
	display: flex;
	column-gap: var(--margin--lv3);
	flex-wrap: wrap;
}

.TotalAmount__item {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size--l);
}

.TotalAmount__price {
	color: var(--caution-color);
	font-size: var(--font-size--xxl);
}

/* ------------------------------
    end_TotalAmount
------------------------------ */

/* ------------------------------
    hyron add 2025.12.09 start
    start_TotalAmountBorder
------------------------------ */
.TotalAmountBorder{
	align-items: center;
	justify-content: center;
	padding:var(--padding--lv1);
	border: 0.4rem solid var(--border-color);
	vont-weight:var(--font-weight--bold);
	font-size:var(--font-size--xl);
	text-align:center;
}
.TotalAmountMoney {
	display: grid;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xl);
	text-align: center;
	margin-left: var(--padding-lv1);
	margin-top: var(--padding-lv1);
	margin-right: var(--padding-lv1)
}
.TotalAmountComment{
	justify-content: center;
	padding: var(--padding-lv3);
	font-size: var(--font-size--xl);
	text-align: justify;
	margin-right: var(--margin--lv4);
}
.TotalAmountMoney[data-type="multiple"] {
	grid-auto-flow: row;
	justify-content: unset;
	gap: var(--margin--lv4);
}

.TotalAmountMoney__item {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size--l);
}

.TotalAmountMoney__price {
	color: var(--caution-color);
	font-size: var(--font-size--xxl);
}

/* ------------------------------
    end_TotalAmountBorder
    hyron add 2025.12.09 end
------------------------------ */

/* ------------------------------
    start_LoginBox
------------------------------ */

.LoginBox {
	display: grid;
	padding: var(--padding--lv1);
	gap: var(--margin--lv3);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv1);
	background-color: var(--bg-color);
}

.Login__group {
	display: grid;
	position: relative;
	gap: var(--margin--lv5);
}

.Login__label {
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
	line-height: var(--line-height--narrow);
}

.LoginButtons {
	display: grid;
	gap: var(--margin--lv3);
}

/* ------------------------------
    end_LoginBox
------------------------------ */

/* ------------------------------
    start_LineBox
------------------------------ */

.LineBox {
	display: grid;
	padding: var(--margin--lv2);
	gap: var(--margin--lv3);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv1);
	background-color: var(--bg-color);
}

.LineButton {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--padding--lv2);
	gap: var(--margin--lv5);
	border-radius: var(--border-radius--lv2);
	background-color: #00b900;
	color: #fff;
	font-weight: var(--font-weight--bold);
}

.LineButton::before {
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	background: url("../images/icn_line.svg") no-repeat center / contain;
	content: "";
}

/* ------------------------------
    end_LineBox
------------------------------ */

/* ------------------------------
    start_RadioStyleButton
------------------------------ */

.RadioStyleButton {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	padding: var(--padding--lv2);
	gap: var(--margin--lv4);
	border: 0.2rem solid var(--border-color--form);
	border-radius: calc(var(--border-radius--lv2) + 0.1rem);
	line-height: var(--line-height--narrow);
}

.RadioStyleButton[data-status="active"] {
	border-color: var(--corporate-color);
}

.RadioStyleButton__icn {
	display: block;
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	border: 1px solid var(--border-color--form);
	border-radius: 50%;
}

.RadioStyleButton[data-status="active"] .RadioStyleButton__icn {
	background-color: var(--corporate-color);
	box-shadow: 0 0 0 0.3rem #fff inset;
}

/* ------------------------------
    end_RadioStyleButton
------------------------------ */

/* start_busStop */

.Group[data-kind="busStop"] {
	grid-template-columns: 1fr 10rem;
	grid-auto-flow: column;
	gap: var(--margin--lv4);
}

/* start_busStop */

/* ------------------------------
    start_TourOption
------------------------------ */

.TourOption {
	display: grid;
	padding: var(--padding--lv2);
	gap: var(--margin--lv3);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);

	&[data-kind="cruise"] {
		gap: var(--margin--lv4);
	}
}

/* 予約フロー改善 2026/01/08 hyrchxiang Mod Start */
.TourOption[data-status="selected"],
/* .TourOption:has(.TourOption__group + .Input input:checked):not([data-kind="cruise"]) { */
.TourOption:has(.TourOption__group + .Input input:checked) {
	background-color: var(--bg-color--safety);
}
/* 予約フロー改善 2026/01/08 hyrchxiang Mod End */

.TourOption[data-error="true"] {
	border-color: var(--caution-color);
	background-color: #fff4f2;
}

.TourOption__group {
	display: grid;
	gap: var(--margin--lv4);
}

.TourOption__paymentMethod {
	place-self: start;
	padding: var(--padding--lv3);
    border: 1px solid var(--border-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size--xs);
    line-height: 1;
}

.TourOption__name {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: var(--line-height--narrow);
}

.TourOption__button {
	display: grid;
	gap: var(--margin--lv5);
}

.TourOptionStatus {
	display: flex;
	gap: var(--margin--lv5);
}

.TourOptionStatus__status {
	padding: var(--margin--lv5) var(--margin--lv4);
	border-radius: var(--border-radius--lv3);
	background-color: #fff;
}

.TourOptionStatus__status:is([data-status="available"], [data-status="request"]) {
	border: 1px solid var(--safety-color);
	color: var(--safety-color);
}

.TourOptionStatus__status[data-status="unavailable"] {
	border: 1px solid var(--border-color);
	background-color: var(--bg-color);
}

.TourOptionStatus__selected {
	display: none;
	padding: var(--margin--lv5) var(--margin--lv4);
	border-radius: var(--border-radius--lv3);
	background-color: var(--safety-color);
	color: #fff;
}

:is(.TourOption[data-status="selected"], .TourOption:has(.TourOption__group + .Input input:checked)) .TourOptionStatus__selected {
	display: block;
}

/* start_mark */

.TourOptionStatus__mark {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: -0.2rem;
}

.TourOptionStatus__status[data-status="available"] .TourOptionStatus__mark {
	background-image: url(../images/icn_status--available.svg);
}

.TourOptionStatus__status[data-status="unavailable"] .TourOptionStatus__mark {
	background-image: url(../images/icn_status--unavailable.svg);
}

.TourOptionStatus__txt {
	color: var(--caution-color);
	font-weight: var(--font-weight--bold);
}

/* end_mark */

.TourOption .Input[data-type="radio"]:has(:checked) {
	background-color: #fff;
}

.TourOptionDetails,
.TourOptionDetails__group {
	display: flex;
	row-gap: var(--margin--lv4);
	flex-direction: column;
}

.TourOptionDetails__item {
	display: flex;
	justify-content: space-between;
	gap: var(--margin--lv5);
}

.TourOptionDetails__item:not([data-kind="date"]) dt {
	font-weight: 400;
}

.TourOptionDetails__item[data-kind="price"] dd {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: var(--margin--lv5);
	align-self: flex-end;
}

.TourOptionDetails__item[data-kind="date"] {
	justify-content: flex-start;
}

.TourOptionDetails__item[data-kind="date"] :is(dt, dd) {
	font-weight: var(--font-weight--bold);
}

.TourOptionCaptions {
	display: grid;
	justify-items: start;
	gap: var(--margin--lv5);
}

/* start_TourOptionAdditionalInput */

.TourOptionAdditionalInput {
	/* display: none; */
	display: grid;
	gap: var(--margin--lv3);
}

.Input:has(:checked) + .TourOptionAdditionalInput {
	display: grid;
}

.TourOption:not([data-kind="cruise"]) .TourOptionAdditionalInputTable {
	padding: var(--padding--lv3);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv2);
	background-color: #fff;
}

.TourOptionAdditionalInputTable__table {
	width: 100%;

	tr:not(:last-child) {
		border-bottom: 1px solid var(--border-color);
	}

	th {
		padding: var(--padding--lv3) var(--padding--lv2);
		background-color: var(--bg-color);
		color: rgba(0, 0, 0, 0.7);
		font-weight: var(--font-weight--bold);
		font-size: var(--font-size--xs);
		line-height: var(--line-height--narrow);
		vertical-align: middle;
	}

	td {
		padding: var(--padding--lv2);
		vertical-align: middle;
	}

	&:not([data-type="rowTh"]) tr:first-child th {
		border-top-left-radius: calc(var(--border-radius--lv3) / 2);
	}

	&:not([data-type="rowTh"]) tr:last-child th {
		border-bottom-left-radius: calc(var(--border-radius--lv3) / 2);
	}

	&[data-type="rowTh"] th:first-child {
		border-top-left-radius: calc(var(--border-radius--lv3) / 2);
	}

	&[data-type="rowTh"] th:last-child {
		border-top-right-radius: calc(var(--border-radius--lv3) / 2);
	}

	&[data-kind="childSeat"] td:nth-child(2) {
		width: 45%;
	}
}

.TourOption[data-kind="cruise"] .TourOptionAdditionalInputTable__table {
	:is(th, td) {
		text-align: center;
	}

	td:last-child > div {
		display: grid;
    	grid-template-columns: 1fr auto;
    	grid-auto-flow: column;
    	align-items: end;
		gap: var(--margin--lv5);
	}
}

/* end_TourOptionAdditionalInput */

/* ------------------------------
    end_TourOption
------------------------------ */

/* ------------------------------
    start_TourInfo
------------------------------ */

.TourInfo {
	display: grid;
	padding: var(--padding--lv2);
	gap: var(--margin--lv3);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

.TourInfo__group {
	display: grid;
	gap: var(--margin--lv4);
}

.TourInfo__patches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin--lv5);
}

.TourInfo__patch {
	place-self: start;
	padding: var(--padding--lv3);
	border: 1px solid var(--border-color);
	font-size: var(--font-size--xs);
	line-height: 1;

	&[data-type="caution"] {
		background-color: #fff4f2;
		color: var(--caution-color);
	}

	&[data-type="safety"] {
		background-color: var(--bg-color--safety);
		color: var(--safety-color);
	}

	&[data-type="disabled"] {
		border: none;
		background-color: var(--disabled-color);
		color: #fff;
	}
}

.TourInfo__name {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: var(--line-height--narrow);
}

.TourInfo__button {
	display: grid;
	gap: var(--margin--lv5);
}

.TourInfoDetails {
	display: flex;
	row-gap: var(--margin--lv4);
	flex-direction: column;
}

.TourInfoDetails__item {
	display: flex;
	justify-content: space-between;
	gap: var(--margin--lv5);

	dt {
		font-weight: 400;
	}
}

/* ------------------------------
    end_TourInfo
------------------------------ */

/* ------------------------------
    start_MeansOfTransport
------------------------------ */

.MeansOfTransport {
	display: grid;
	padding: var(--padding--lv1);
	gap: var(--margin--lv3);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

.MeansOfTransport[data-status="selected"] {
	background-color: var(--bg-color--safety);
}

.MeansOfTransportDetails {
	display: grid;
	gap: var(--margin--lv4);
}

.MeansOfTransportDetails__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--margin--lv5);
}

.MeansOfTransportDetails__item:not(:last-child) {
	padding-bottom: var(--margin--lv4);
	border-bottom: 1px solid var(--border-color);
}

.MeansOfTransportDetails__item:not([data-kind="means"]) dt {
	font-weight: 400;
}

.MeansOfTransportDetails__item[data-kind="means"] :is(dt, dd) {
	font-weight: var(--font-weight--bold);
}

.MeansOfTransportDetails__item:not([data-kind="means"]) dd {
	color: var(--caution-color);
}

.MeansOfTransportSubDetails {
	display: grid;
	padding-top: var(--margin--lv4);
	gap: var(--margin--lv4);
	border-top: 1px solid var(--border-color);
}

.MeansOfTransportSubDetails__item dt {
	font-weight: 400;
}

.MeansOfTransportSubDetails__item[data-kind="price"] dd {
	color: var(--caution-color);
}

/* ------------------------------
    end_MeansOfTransport
------------------------------ */

/* ------------------------------
    start_ReservationCompletionMessage
------------------------------ */

.ReservationCompletionMessage {
	display: grid;
	padding: var(--padding--lv1);
	gap: var(--margin--lv3);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv1);
	background-color: var(--bg-color--safety);
}

.ReservationCompletionMessage__message {
	display: flex;
	align-items: center;
	gap: 0.625em;
	color: var(--safety-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xl);
	line-height: var(--line-height--narrow);
}

.ReservationCompletionMessage__message::before {
	display: block;
	flex-shrink: 0;
	width: 1.67em;
	height: 1.67em;
	background-image: url(../images/icn__check.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	content: "";
}

.ReservationCompletionMessage__number {
	padding-left: calc(4rem + var(--margin--lv4));
	color: var(--safety-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xl);
}

.Annotation[data-kind="ReservationCompletionMessage"] {
	color: var(--caution-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
}

.ReservationCompletionMessage__date {
	justify-self: end;
}

.ReservationCompletionMessage > .Group:not(:last-of-type) {
	padding-bottom: var(--margin--lv3);
	border-bottom: 1px solid var(--border-color);
}

/* start_error */
.ReservationCompletionMessage[data-type="error"] {
	background-color: #fff4f2;
}

.ReservationCompletionMessage[data-type="error"] :where(.ReservationCompletionMessage__message, .ReservationCompletionMessage__number) {
	color: var(--caution-color);
}

.ReservationCompletionMessage[data-type="error"] .ReservationCompletionMessage__message::before {
	background-image: url(../images/icn__error.svg);
}
/* end_error */

/* ------------------------------
    end_ReservationCompletionMessage
------------------------------ */

/* start_ReserveRelatedLinks */

.ReserveRelatedLinks {
	display: grid;
	gap: var(--margin--lv3);
}

.ReserveRelatedLink {
	position: relative;
	padding: var(--padding--lv1);
	border-radius: var(--border-radius--lv2);
	box-shadow: 0px 0px 0px 1px var(--border-color) inset;
}

.ReserveRelatedLink::before {
    display: block;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    aspect-ratio: 1/1;
    width: 1.6rem;
    border-radius: 50%;
    background: var(--corporate-color);
    content: "";
}

.ReserveRelatedLink::after {
    display: block;
    position: absolute;
    right: 1.6rem;
    bottom: 1.5rem;
    width: 0.6rem;
    height: 0.6rem;
    transform: rotate(45deg);
    border-top: 0.2rem solid white;
    border-right: 0.2rem solid white;
    content: "";
}

.ReserveRelatedLink__dl {
	display: grid;
	gap: var(--margin--lv5);
}

.ReserveRelatedLink__dt {
	display: grid;
	grid-template-columns: 4.8rem 1fr;
	align-items: center;
	gap: var(--margin--lv5);
	color: var(--corporate-color);
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--narrow);
}

/* end_ReserveRelatedLinks */

/* ------------------------------
    start_CreditCardInfoInRadio
------------------------------ */

.CreditCardInfoInRadio {
	display: grid;
	grid-template-columns: max-content 1fr;
}

.CreditCardInfoInRadio__item {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;
	gap: var(--margin--lv5);
}

.CreditCardInfoInRadio__item span:last-child::before {
	margin-right: var(--margin--lv5);
	content: ":";
	vertical-align: 0.1rem;
}

.CreditCardInfoInRadio__item[data-kind="alert"] {
	display: block;
	color: var(--caution-color);
}

/* ------------------------------
    end_CreditCardInfoInRadio
------------------------------ */

/* ------------------------------
    start_CreditCardInfoInDialog
------------------------------ */

.CreditCardInfoInDialog {
	display: grid;
	grid-template-columns: max-content 1fr;
}

.CreditCardInfoInDialog__item {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;
	gap: var(--margin--lv5);
}

.CreditCardInfoInDialog__item span:last-child::before {
	margin-right: var(--margin--lv5);
	content: ":";
	vertical-align: 0.1rem;
}

/* ------------------------------
    end_CreditCardInfoInDialog
------------------------------ */

/* ------------------------------
    start_SecureCardList
------------------------------ */

.SecureCardList {
	display: grid;
	gap: var(--margin--lv4);
}

/* ------------------------------
    end_SecureCardList
------------------------------ */

/* ------------------------------
    start_Modal__CardList
------------------------------ */

.Modal__CardList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--margin--lv5);
	font-size: var(--font-size--xs);
	line-height: calc(var(--line-height--narrow) - 0.1);
	text-align: center;
}

.Modal__CardItem {
	display: grid;
	grid-template-rows: auto 1fr;
	justify-content: center;
	padding: var(--padding--lv2) var(--padding--lv3);
	overflow: hidden;
	gap: var(--margin--lv5);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

.Modal__CardItem .Button {
	justify-self: unset;
}

.Modal__CardItem[data-kind="UFJ"] {
	grid-column: span 2;
}

/* ------------------------------
    end_Modal__CardList
------------------------------ */

/* ------------------------------
    start_Modal__securityCode
------------------------------ */

.Modal__securityCodeImg {
	width: min(100%, 35rem);
}

/* ------------------------------
    end_Modal__securityCode
------------------------------ */

/* ------------------------------
    start_TabButton
------------------------------ */

.TabButton {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin--lv4);
}

.TabButton[data-column--sp="3"] {
	--column: 3;
}

.TabButton__item {
	width: calc((100% - (var(--margin--lv4) * (var(--column) - 1))) / var(--column));
}

.TabButton__button {
	width: 100%;
	padding: var(--padding--lv2);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv2);
	font-weight: var(--font-weight--bold);
	text-align: center;
}

.TabButton__button[data-status="active"] {
	border-color: #7fb9df;
	background-color: var(--active-color);
	color: var(--corporate-color);
}

/* ------------------------------
    end_TabButton
------------------------------ */

/* ------------------------------
    start_Loading
------------------------------ */

#Loading {
	display: grid;
	z-index: 999;
	position: fixed;
	top: 0%;
	left: 0%;
	place-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 17, 26, 0.5);
}

.Loading__inner {
	display: grid;
	justify-items: center;
	gap: var(--margin--lv3);
	color: #fafafa;
	text-align: center;
}

.Loading__img {
	aspect-ratio: 1/1;
	width: 10rem;
	animation: spin 1s linear infinite;
}

.Loading__txt {
	font-size: var(--font-size--l);
}

@keyframes spin {
	0% {
		rotate: 0;
	}

	100% {
		rotate: 360deg;
	}
}

/* ------------------------------
    end_Loading
------------------------------ */

/* ------------------------------
    start_Accommodation
------------------------------ */

/* start_AccommodationArea */

.AccommodationArea {
	display: grid;
	gap: var(--margin--lv4);
}

.AccommodationArea__select {
	display: grid;
	grid-template-columns: 0.7fr 0.3fr;
	gap: var(--margin--lv5);
}

.AccommodationArea__button {
	display: grid;
	gap: var(--margin--lv4);
}

/* end_AccommodationArea */

/* start_AccomodationMap */

.AccomodationMap {
	display: grid;
	gap: var(--margin--lv5);
}

.AccomodationMap__iframe {
	aspect-ratio: 1/1;
	width: 100%;
}

/* end_AccomodationMap */

.Accommodation {
	display: grid;
	gap: var(--margin--lv3);
}

/* start_AccommodationInfo */

.AccommodationInfo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"name name"
		"image detail"
		"access access"
		"button button";
	gap: var(--margin--lv4);
}

.AccommodationInfo__name {
	grid-area: name;
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: var(--line-height--narrow);
}

.AccommodationInfo__image {
	grid-area: image;
	border: 1px solid var(--border-color);
}

.AccommodationInfo__detail {
	grid-area: detail;
}

.AccommodationInfo__price {
	color: var(--caution-color);
	font-weight: var(--font-weight--bold);
}

.AccommodationInfo__button {
	grid-area: button;
}

.AccommodationInfo__access {
	grid-area: access;
	padding: var(--padding--lv2);
	border-radius: var(--border-radius--lv3);
	background: var(--bg-color);
	font-size: var(--font-size--xs);
	line-height: var(--line-height--narrow);
}

/* end_AccommodationInfo */

/* start_AccommodationPlan */

.AccommodationPlan {
	display: grid;
	gap: var(--margin--lv3);
}

.AccommodationPlan__group {
	display: grid;
	padding: var(--padding--lv2);
	gap: var(--margin--lv4);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

.AccommodationPlan__name {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: var(--line-height--narrow);
}

.AccommodationPlan__table {
	width: 100%;
}

.AccommodationPlan__table tr:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}

.AccommodationPlan__table tr:first-child {
	background-color: var(--bg-color);
}

.AccommodationPlan__table th {
	padding-block: var(--padding--lv3);
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: var(--line-height--narrow);
	text-align: center;
	vertical-align: middle;
}

.AccommodationPlan__table td {
	padding: var(--padding--lv2);
	text-align: center;
	vertical-align: middle;
}

.AccommodationPlan__group:not(:has(input:checked)) .AccommodationPlan__table tr:last-child td {
	padding-bottom: 0;
}

.AccommodationPlan__table td[data-kind="price"] {
	color: var(--caution-color);
}

.AccommodationPlan__table td[data-kind="roomNumber"] {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--margin--lv5);
}

.AccommodationPlan__button {
	display: none;
}

.AccommodationPlan__group:has(input:checked) .AccommodationPlan__button {
	display: grid;
}

/* end_AccommodationPlan */

/* start_AccommodationGrade */

.AccommodationGrade {
	display: grid;
	gap: var(--margin--lv3);
}

.AccommodationGrade__radio .Input[data-type="radio"]:has(:checked) {
	background-color: #fff;
}

.AccommodationGrade__group {
	display: grid;
	padding: var(--padding--lv2);
	gap: var(--margin--lv4);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

.AccommodationGrade__group:has(input:checked) {
	background-color: var(--bg-color--safety);
}

.AccommodationGrade__name {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--l);
	line-height: var(--line-height--narrow);
}

.AccommodationGrade__table {
	width: 100%;
}

.AccommodationGrade__table tr:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}

.AccommodationGrade__table th {
	padding: var(--padding--lv3) var(--padding--lv2);
	background-color: var(--bg-color);
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);
	line-height: var(--line-height--narrow);
	vertical-align: middle;
}

.AccommodationGrade__table th:first-child {
	border-top-left-radius: calc(var(--border-radius--lv3) / 2);
}

.AccommodationGrade__table th:last-child {
	border-top-right-radius: calc(var(--border-radius--lv3) / 2);
}

/* 予約フロー改善 2026/01/08 hyrchxiang Del Start */
/* .AccommodationGrade__group:has(input:checked) .AccommodationGrade__table th { */
/* 	background-color: #fff; */
/* } */
/* 予約フロー改善 2026/01/08 hyrchxiang Del End */

.AccommodationGrade__table td {
	padding: var(--padding--lv2);
	vertical-align: middle;
}

.AccommodationGrade__table :is(th:first-child, td:first-child) {
	text-align: left;
}

.AccommodationGrade__table :is(th:last-child, td:last-child) {
	text-align: right;
}

.AccommodationGrade__prices {
	display: grid;
	gap: var(--margin--lv5);
}

.AccommodationGradePrices__group {
	display: grid;
	text-align: right;
}

.AccommodationGradePrices__group dt {
	font-weight: 400;
}

.AccommodationGradePrices__group dd {
	color: var(--caution-color);
}

/* end_AccommodationGrade */

/* ------------------------------
    end_Accommodation
------------------------------ */

/* ------------------------------
    start_MeansOfTransportation
------------------------------ */

.Group[data-kind="meansOfTransportation"] {
	gap: calc(var(--margin--lv1) * 2);
}

.RepresentativePlatform {
	display: grid;
	grid-template-rows: auto 0 auto auto;
	gap: var(--margin--lv4);
}

.RepresentativePlatform__icn {
	align-self: center;
	justify-self: center;
	width: 2rem;
	transform: translateY(1rem);
}

.TransportInfoInRadioTh {
	display: none;
}

/* ------------------------------
    end_MeansOfTransportation
------------------------------ */

/* ------------------------------
    start_HepburnTable
------------------------------ */

.HepburnTable[data-column="5"] {
	--HepburnTable-column: 5;
}

.HepburnTable[data-column="3"] {
	--HepburnTable-column: 3;
}

.HepburnTable td {
	width: calc(100% / var(--HepburnTable-column));
	border: 1px solid var(--border-color);
	text-align: center;
}

.HepburnTable td > div {
	display: grid;
}

.HepburnTable td > div span {
	padding: var(--padding--lv3);
}

.HepburnTable td > div span:first-child {
	background-color: var(--bg-color);
}

/* ------------------------------
    end_HepburnTable
------------------------------ */

/* ------------------------------
    start_InsuranceResponsiveTable
------------------------------ */

.InsuranceResponsiveTable {
	display: grid;
	gap: var(--margin--lv4);
	--border-color: #66a6c3;
}

.InsuranceResponsiveTable__container {
	container-type: inline-size;
	display: grid;
	grid-auto-flow: column;
	padding-bottom: var(--padding--lv2);
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
}

.InsuranceResponsiveTable__group {
	display: grid;
	grid-template-rows: subgrid;
	grid-template-columns: 20rem auto;
	grid-row: span 12;
	width: 100cqw;
	scroll-snap-align: start;
}

.InsuranceResponsiveTable__group[data-type="spacer"] {
	display: none;
}

/* start_th */

.InsuranceResponsiveTable__th {
	display: inherit;
	grid-template-rows: inherit;
	grid-row: inherit;
	border: 1px solid #66a6c3;
	border-right: none;
	background-color: #fafafa;
	font-size: var(--font-size--s);
	line-height: var(--line-height--narrow);
}

.InsuranceResponsiveTable__th p {
	display: grid;
	align-items: center;
	padding: var(--padding--lv3);
}

.InsuranceResponsiveTable__th p:not(:last-child) {
	border-bottom: 1px solid #66a6c3;
}

.InsuranceResponsiveTable__th p:first-child {
	background-color: #007cb5;
	color: #fff;
	font-weight: var(--font-weight--bold);
}

.InsuranceResponsiveTable__th p:last-child {
	background-color: #f1f7fc;
	font-weight: var(--font-weight--bold);
}

/* end_th */

/* start_type */

.InsuranceResponsiveTable__type {
	display: inherit;
	grid-template-rows: inherit;
	grid-row: inherit;
	border: 1px solid #66a6c3;
	text-align: center;
}

.InsuranceResponsiveTable__type dt {
	background-color: #007cb5;
	color: #fff;
	font-weight: var(--font-weight--bold);
}

.InsuranceResponsiveTable__type dd {
	display: grid;
	align-items: center;
}

.InsuranceResponsiveTable__type :where(dt, dd) {
	padding: var(--padding--lv3);
}

.InsuranceResponsiveTable__type :where(dt, dd:not(:last-child)) {
	border-bottom: 1px solid #66a6c3;
}

.InsuranceResponsiveTable__type dd:last-child {
	background-color: #f1f7fc;
	color: var(--caution-color);
	font-weight: var(--font-weight--bold);
}

/* end_type */

/* start_dot */

.InsuranceResponsiveTable__dots {
	display: grid;
	grid-auto-flow: column;
	justify-content: center;
	gap: 1rem;
}

.InsuranceResponsiveTable__dot {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
}

.InsuranceResponsiveTable__dot::after {
	display: block;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.2);
	content: "";
}

.InsuranceResponsiveTable__dot.active::after {
	background-color: var(--safety-color);
}

/* end_dot */

/* start_insuranceページ */

.InsuranceResponsiveTable[data-type="insurance"]:not(.is-open) :is(.InsuranceResponsiveTable__group:not([data-section="1"]), .InsuranceResponsiveTable__dots) {
	display: none;
}

.Group[data-kind="InsuranceTableWrap"]:not(:has(.is-open)) + p:has(.Annotation) {
	display: none;
}

/* end_insuranceページ */

/* ------------------------------
    end_InsuranceResponsiveTable
------------------------------ */

/* ------------------------------
    start_JRSeat
------------------------------ */

.JRSeatConditions {
	font-weight: var(--font-weight--bold);
	text-align: center;
}

.JRSeatConditions__car {
	font-size: calc(var(--font-size--m) * 1.5);
}

.JRSeatConditions__seat {
	font-size: var(--font-size--l);
}

.JRSelectSeatWrapper {
	display: grid;
	gap: var(--margin--lv3);
}

.Button[data-kind="JRSelectSeatNext"],
.Button[data-kind="JRSelectSeatPrev"] {
	flex-direction: column;
}

.Button[data-kind="JRSelectSeatNext"]::before,
.Button[data-kind="JRSelectSeatPrev"]::after {
	display: block;
	aspect-ratio: 1/1;
	width: 1.7rem;
	background-color: currentColor;
	content: "";
	mask-image: url(../images/icn_double-arrow.svg);
}

.Button[data-kind="JRSelectSeatPrev"]::after {
	scale: -1;
}

.JRSelectSeatArea {
	display: flex;
	flex-direction: column;
	gap: var(--margin--lv4);
}

.JRSeatIcns {
	display: grid;
	grid-auto-flow: column;
	justify-content: center;
	padding: var(--margin--lv5);
	gap: var(--margin--lv5);
	border-radius: var(--border-radius--lv2);
	background-color: var(--bg-color);
}

.JRSeatIcn {
	width: 3.2rem;
}

.JRSelectSeat {
	display: grid;
	grid-auto-flow: column;
	gap: var(--margin--lv4);
}

.JRSelectSeat__column {
	display: grid;
	grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
	gap: var(--margin--lv4);
}

.JRSelectSeat__btn {
	padding-block: 0.8rem;
	border: 1px solid #7fb9df;
	border-radius: var(--border-radius--lv2);
	color: var(--corporate-color);
	font-size: calc(var(--font-size--xs) * 0.95);
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
}

.JRSelectSeat__btn[data-type="blank"] {
	border: none;
}

.JRSelectSeat__btn:has(:checked) {
	border-color: var(--corporate-color);
	background-color: var(--corporate-color);
	color: #fff;
}

.JRSelectSeat__btn:has(:disabled) {
	border-color: var(--bg-color--disabled);
	background-color: var(--bg-color--disabled);
	color: var(--disabled-color);
}

.JRSelectSeat__btn:not([data-type="blank"]):not(:has(:disabled)) {
	cursor: pointer;
}

.JRSelectSeat__btn input {
	display: none;
}

.JRSeatSteps {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--margin--lv3);
}

/* start_iconModal */

.JRSeatIcnExplanation__items {
	display: grid;
	row-gap: var(--margin--lv4);
}

.JRSeatIcnExplanation__item {
	display: grid;
	grid-template-columns: 5rem auto;
	align-items: center;
	gap: var(--margin--lv5);
}

/* start_iconModal */

/* ------------------------------
    end_JRSeat
------------------------------ */

/* ------------------------------
    start_HandlingOffice
------------------------------ */

.HandlingOffice {
	display: grid;
}

.HandlingOffice__table {
	display: grid;
	grid-template-columns: max-content 1fr;
}

.HandlingOffice__table div {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;
	gap: var(--margin--lv5);
}

.HandlingOffice__table dt {
	display: flex;
	justify-content: space-between;
	gap: var(--margin--lv5);
	font-weight: var(--font-weight);
}

.HandlingOffice__table dt::after {
	content: "：";
}

/* ------------------------------
    end_HandlingOffice
------------------------------ */

/* ------------------------------
    start_Calendar
------------------------------ */

.Note:has([data-kind="ConditionTerms__marks"]) {
	background-color: transparent;
}

.Group[data-kind="ConditionTerms__marks"] > .Group:not(:last-child) {
	padding-bottom: var(--padding--lv1);
	border-bottom: 1px solid var(--border-color);
}

.Details__summary[data-kind="conditionTerms"] {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ConditionTerms__movingMarks {
	display: flex;
	row-gap: var(--margin--lv4);
	flex-wrap: wrap;
	gap: var(--margin--lv3);
}

.ConditionTerms__movingMarksGroup {
	display: grid;
	grid-template-columns: 2.5rem auto;
	align-items: center;
	min-width: 8rem;
	gap: var(--margin--lv5);
}

.ConditionTerms__touristMarks {
	display: flex;
	flex-direction: column;
	gap: var(--margin--lv4)
}

.ConditionTerms__touristMarksGroup {
	display: grid;
	grid-template-columns: 2.5rem auto;
	align-items: center;
	gap: var(--margin--lv5);
}

.ConditionTermsTimeZone {
	border: 1px solid var(--border-color);

	div {
		display: grid;
		grid-template-columns: 8rem 1fr;
		
		&:not(:last-child) {
			border-bottom: 1px solid var(--border-color);
		}
	}

	dt, dd {
		padding: var(--padding--lv3);
	}

	dt {
		border-right: 1px solid var(--border-color);
		color: #666;
		font-weight: var(--font-weight--bold);
	}
}

.ConditionTermsSchedule__heading {
	padding: var(--padding--lv3) var(--padding--lv2);
	background-color: var(--bg-color);
	font-weight: var(--font-weight--bold);

	+ p {
		line-height: calc(var(--line-height) * 1.5);
	}
}

.Group[data-kind="ConditionTermsSchedule"] img {
	width: 2.5rem;
	margin: 0 var(--margin--lv5);
	vertical-align: middle;
}

.ConditionTermsSchedule__stayInfo {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: var(--margin--lv5);
	padding: var(--padding--lv2);
	border: .2rem solid #e5e5e5;
	font-size: var(--font-size--s);
}

.ConditionTermsSchedule__stayInfo dt {
	color: var(--corporate-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--xs);

	&::before {
		display: inline-block;
		width: 1.6rem;
		height: 1.6rem;
		margin-right: 0.3rem;
		content: "";
		vertical-align: -0.3rem;
	}

	&[data-kind="meal"]::before {
		background: url(https://www.hankyu-travel.com/tour/new-css/calendar/images/icn_meal.svg) no-repeat center / contain;
	}

	&[data-kind="hotel"]::before {
		background: url(https://www.hankyu-travel.com/tour/new-css/calendar/images/icn_hotel.svg) no-repeat center / contain;
	}
}

.ConditionTermsSchedule__hotelPatchs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin--lv5);
}

.ConditionTermsSchedule__hotelPatch {
	padding: var(--padding--lv3);
    border: 1px solid var(--border-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size--xs);
	line-height: 1;
}

.ConditionTermsSchedule__roomDetails {
	summary {
		display: grid;

		&+ div[data-lv="3"] {
			padding-top: var(--margin--lv3);
		}
	}

	.ConditionTermsSchedule__roomDetailsIcns {
		justify-self: end;
		color: var(--corporate-color);
		font-weight: var(--font-weight--bold);
		font-size: var(--font-size--xs);
		line-height: 1;
	}

	.ConditionTermsSchedule__roomDetailsIcn {
		text-decoration: underline;

		&[data-state="close"] {
			display: none;
		}

		&::after {
			display: inline-block;
			width: 0.8rem;
			height: 0.8rem;
			margin-left: var(--margin--lv5);
			rotate: 135deg;
			border-top: 0.2rem solid var(--corporate-color);
			border-right: 0.2rem solid var(--corporate-color);
			content: "";
			vertical-align: 0.25rem;
		}

		&[data-state="close"]::after {
			rotate: -45deg;
			vertical-align: -0.1rem;
		}
	}

	&[open] .ConditionTermsSchedule__roomDetailsIcn {
		&[data-state="close"] {
			display: block;
		}

		&[data-state="open"] {
			display: none;
		}
	}
}

.Table[data-kind="hotelUsed"] {
	td {
		font-size: var(--font-size--s);
		text-align: left;

		&:first-child,
		&:nth-child(2) {
			width: 25%;
		}

		&:last-child {
			width: 50%;
		}
	}
}

/* ------------------------------
    hyron add 2025.10.27 start
------------------------------ */
.Table[data-kind="hotelUsedFor4"] {
	td {
		font-size: var(--font-size--s);
		text-align: left;

		&:first-child ,
		&:nth-child(2) {
			width: 20%;
		},

                &:nth-child(3) {
			width: 35%;
		}
		&:last-child {
			width: 35%;
		}
	}
}

/* ------------------------------
    hyron add 2025.10.27 end
------------------------------ */

/* ------------------------------
    hyron add 2026.02.03 start
------------------------------ */
.grid-container{
	display:grid;
	grid-template-columns:auto auto 1fr;
	width:100%
	grap:10px;
}
.grid-cell{
	paddong:10px;

}
/* ------------------------------
    hyron add 2026.02.03 end
------------------------------ */

.Table[data-kind="travelConditions"] {
	th {
		width: 30%;
	}

	td {
		width: 70%;
		font-size: var(--font-size--s);
		text-align: left;
	}
}

.ConditionTerms__travelConditionsAnnotationHeading {
	padding: var(--padding--lv3) var(--padding--lv2);
	background-color: var(--bg-color);
	font-weight: var(--font-weight--bold);
}

/* ------------------------------
    end_Calendar
------------------------------ */

.Group[data-kind="spPointModal"] {
	align-items: stretch;
}

/* ------------------------------
    start_Yakkan
------------------------------ */

.Contents[data-kind="conditionTerms"] .H3 {
	padding: calc(var(--padding--lv2) * .8);
	font-size: var(--font-size--m);
}

.YakkanTable {
	th, td {
		padding: var(--padding--lv3);
		border: 1px solid var(--border-color);
		vertical-align: middle;
	}

	:where(th) {
		background-color: var(--bg-color);
		font-weight: 400;
		text-align: center;
	}
}

/* ------------------------------
    end_Yakkan
------------------------------ */

.userName--sendingMailAdress {
	font-size: calc(var(--font-size--m) * 1.25);
}

.userName--memberRegistration {
	font-weight: var(--font-weight--bold);
	font-size: calc(var(--font-size--m) * 1.25);
}

/* ------------------------------
	start_i-choice loading
------------------------------ */

.Group[data-kind="InProgressAnimation"] {
	justify-self: center;
	width: 90%;
}

.InProgressAnimationIllust {
	position: relative;
	aspect-ratio: 1/1;
	width: 18rem;
	margin: 0 auto var(--margin--lv3);
}

.InProgressAnimationIllust__airplane {
	position: absolute;
	aspect-ratio: 1/1;
	width: 100%;
	animation: InProgressAnimationIllust 6s linear infinite;
}

.InProgressAnimationIllust__earth {
	position: absolute;
	aspect-ratio: 1/1;
	width: 100%;
}

.InProgressAnimation__indicator {
	position: relative;
	width: 100%;
	height: 0.2rem;
	background-color: #fff;

	&::before {
		display: block;
		width: 100%;
		height: 100%;
		transform-origin: left;
		background-color: var(--safety-color);
		content: '';
		animation: InProgressAnimationIndicator 3s infinite;
	}
}

.InProgressAnimation__note {
	position: relative;
	color: var(--safety-color);
	font-weight: var(--font-weight--bold);
	text-align: center;
}

.InProgressAnimationText {
	--areaHeight: 2em * 1.8;
	display: grid;
	grid-auto-rows: 1fr;
	align-items: center;
	width: 100%;
	height: calc(var(--areaHeight));
	overflow: hidden;
	border-radius: var(--border-radius--lv3);
	background-color: rgba(255, 255, 255, .8);
	text-align: center;

	.InProgressAnimationText__text {
		place-content: center;
		height: calc(var(--areaHeight));
		color: var(--safety-color);
		font-weight: var(--font-weight--bold);
		line-height: 1.3;
		animation: InProgressAnimationText 15s linear infinite;
	}
}

@keyframes InProgressAnimationIllust {
	0% {
		rotate: 0;
	}

	100% {
		rotate: 360deg;
	}
}

@keyframes InProgressAnimationIndicator {
	0% {
		scale: 0 1;
	}

	100% {
		scale: 1 1;
	}
}

@keyframes InProgressAnimationText {
	0% {
		transform: translateY(0);
	}

	27.5% {
		transform: translateY(0);
	}

	33% {
		transform: translateY(calc(var(--areaHeight) * -1));
	}

	60.5% {
		transform: translateY(calc(var(--areaHeight) * -1));
	}

	66% {
		transform: translateY(calc(var(--areaHeight) * -2));
	}

	93.5% {
		transform: translateY(calc(var(--areaHeight) * -2));
	}

	100% {
		transform: translateY(calc(var(--areaHeight) * -3));
	}
}

/* ------------------------------
	end_i-choice loading
------------------------------ */

/* ------------------------------
	start_participantsList
------------------------------ */

.participantsList {
	display: grid;
	margin-bottom: var(--margin--lv3);
	gap: var(--margin--lv4);
}

.participantsList__group {
	& dt {
		font-weight: var(--font-weight--bold);
	}

	& dd[data-status="applied"] {
		color: var(--caution-color);
	}
}

/* ------------------------------
	end_participantsList
------------------------------ */


/* ------------------------------
    start_EventDayGuide
------------------------------ */

/* ------------------------------
    end_EventDayGuide
------------------------------ */

/* ------------------------------
    start_JsTabButtons
------------------------------ */

.JsTabButtons {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: var(--margin--lv5);
	border-image: linear-gradient(0deg, var(--border-color--form) .2rem, #0000 0) fill 0 //0 100vw 0 100vw;
}

.JsTabButton {
	position: relative;
	flex: 1;
	padding: var(--padding--lv2);
	border: .2rem solid var(--border-color--disabled);
	background-color: var(--bg-color);
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--narrow);
	text-align: center;
	text-decoration: underline;

	&::after {
		display: block;
		position: absolute;
		bottom: -.2rem;
		left: -.2rem;
		width: calc(100% + .4rem);
		height: 0.2rem;
		background-color: var(--border-color--form);
		content: '';
	}

	&[data-active="true"] {
		border-color: var(--border-color--form);
		background-color: #fff;
		color: var(--corporate-color);
		text-decoration: none;
		cursor: default;

		&::after {
			bottom: -.3rem;
			left: 0;
			width: 100%;
			height: 0.4rem;
			background-color: #fff;
		}
	}
}

/* start_medium */

.JsTabButtons[data-type="medium"] {
	border-image: unset;

	.JsTabButton {
		&[data-active="true"]::before {
			display: block;
			position: absolute;
			bottom: -.8rem;
			left: calc(50% - .6rem);
			width: 1.2rem;
			height: .8rem;
			background-color: var(--border-color--form);
			content: '';
			clip-path: polygon(50% 100%, 0 0, 100% 0);
		}

		&::after {
			content: none;
		}
	}
}

/* end_medium */

/* ------------------------------
    end_JsTabButtons
------------------------------ */

/* ------------------------------
    start_Pager
------------------------------ */

:is(.Pager, .Pager__ol) {
	display: flex;
	justify-content: center;
	gap: var(--margin--lv4);
}

:is(.Pager__prev, .Pager__next) {
	display: grid;
	place-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.3rem;

	&::after {
		display: block;
		width: 1rem;
		height: 1rem;
		translate: .2rem 0;
		rotate: -135deg;
		border-top: 0.2rem solid var(--corporate-color);
		border-right: 0.2rem solid var(--corporate-color);
		content: "";
	}
}

.Pager__next {
	scale: -1;
}

.Pager__link {
	display: grid;
	place-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.3rem;
	background-color: var(--bg-color);
	color: var(--corporate-color);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
}

span.Pager__link {
	background-color: var(--corporate-color);
	color: #fff;
}

/* ------------------------------
    end_Pager
------------------------------ */

/* ------------------------------
    start_ApplicationTourSearch
------------------------------ */

.ApplicationTourSearch__buttons {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--margin--lv4);
}

/* ------------------------------
    end_ApplicationTourSearch
------------------------------ */

/* ------------------------------
    start_BankInitial
------------------------------ */

.BankInitial {
	display: grid;
	gap: var(--margin--lv4);
}

.BankInitial__group {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--margin--lv4);

	label {
		display: grid;
		place-content: center;
		aspect-ratio: 1/1;
		border: 1px solid #7fb9df;
		border-radius: var(--border-radius--lv1);
		color: var(--corporate-color);

		&:not(:has(input:disabled, input:checked)) {
			cursor: pointer;
		}

		&:has(input:checked) {
			border-color: var(--corporate-color);
			background-color: var(--corporate-color);
			color: #fff;
		}

		&:has(input:disabled) {
			border: none;
			background-color: var(--bg-color--disabled);
			color: var(--disabled-color);
		}
	}

	input {
		display: none;
	}

	&[data-kind="other"] label {
		grid-column: span 2;
		aspect-ratio: unset;
		height: 6.345rem;
	}
}

/* ------------------------------
    end_BankInitial
------------------------------ */

/* ------------------------------
    start_ConfirmationEmailSettingTables
------------------------------ */

.ConfirmationEmailSettingTables {
	display: grid;
	gap: var(--margin--lv4);
}

.ConfirmationEmailSettingTables__heading {
	display: none;
}

.ConfirmationEmailSettingTable {
	display: grid;
	grid-template-areas:
		'patch button'
		'table table';
	padding: var(--padding--lv2);
	gap: var(--margin--lv3);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

.ConfirmationEmailSettingTable__state {
	grid-area: patch;
}

.ConfirmationEmailSettingTable__dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-area: table;
	gap: var(--margin--lv5);
}

.ConfirmationEmailSettingTable__dt-dd {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;

	dt {
		display: grid;
		place-items: center;
		padding: var(--padding--lv3) var(--padding--lv2);
		background-color: var(--bg-color);
		color: rgba(0, 0, 0, 0.7);
		font-weight: var(--font-weight--bold);
		font-size: var(--font-size--xs);
	}

	dd {
		padding: var(--padding--lv3);
	}
}

.ConfirmationEmailSettingTable__button {
	grid-area: button;
	text-align: right;
}

/* ------------------------------
    end_ConfirmationEmailSettingTables
------------------------------ */


/* ------------------------------
    start_pointHistoryTable
------------------------------ */

.CurrentPoint {
	display: grid;
	padding: var(--padding--lv1);
	gap: var(--margin--lv3);
	border: 0.4rem solid var(--border-color);
}

.pointHistoryTables {
	display: grid;
	gap: var(--margin--lv3);
}

.pointHistoryTables__heading {
	display: none;
}

.pointHistoryTable {
	display: grid;
	grid-template-columns: max-content 1fr;
	border: 1px solid var(--border-color);
}

.pointHistoryTable__group {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;

	&:not(:last-child) {
		border-bottom: 1px solid var(--border-color);
	}

	:is(dt, dd) {
		padding: var(--padding--lv2);
	}

	dt {
		border-right: 1px solid var(--border-color);
		background-color: var(--bg-color);
		color: rgba(0, 0, 0, 0.7);
        font-weight: var(--font-weight--bold);
        font-size: var(--font-size--s);
	}
}

/* ------------------------------
    end_pointHistoryTable
------------------------------ */


/* ------------------------------
    start_SkymarkSeat
------------------------------ */

/* start_シート情報 */

.SkymarkSeatInfo {
	display: grid;
	padding: var(--padding--lv2);
	gap: var(--margin--lv4);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

.SkymarkSeatInfo__name {
	font-weight: var(--font-weight--bold);
}

.SkymarkSeatInfo__status {
	font-weight: var(--font-weight--bold);
}

/* end_シート情報 */

/* start_シート選択 */

.SkymarkSeatWrap {
	display: grid;
	justify-self: center;
	gap: var(--margin--lv3);
}

.SkymarkSeat {
	--skymarkSeat__gap: var(--margin--lv4);
	--skymarkSeat__btnWidth: 3.5rem;
	display: flex;
	justify-content: center;
	gap: var(--skymarkSeat__gap);
}

.SkymarkSeat__rowName {
	display: flex;
	flex-direction: column;
	margin-top: calc(var(--skymarkSeat__btnWidth) + var(--skymarkSeat__gap));
	gap: var(--skymarkSeat__gap);

	span {
		display: grid;
		place-content: center;
		height: var(--skymarkSeat__btnWidth);
	}
}

.SkymarkSeat__columnsWrap {
	display: flex;
	justify-self: center;
	padding: 0 var(--padding--lv2);
	gap: var(--margin--lv2);
	border-right: .5rem solid #afafaf;
	border-left: .5rem solid #afafaf;

	&[data-type="hasWing"] {
		position: relative;

		&::before,
		&::after {
			display: block;
			position: absolute;
			top: 0;
			width: .5rem;
			height: 100%;
			background-color: var(--corporate-color);
			content: '';
		}

		&::before {
			left: -1rem;
		}

		&::after {
			right: -1rem;
		}
	}
}

.SkymarkSeat__columns {
	display: flex;
	gap: var(--skymarkSeat__gap);
}

.SkymarkSeat__column {
	display: flex;
	flex-direction: column;
	gap: var(--skymarkSeat__gap);
}

.SkymarkSeat__columnName {
	display: grid;
	place-content: center;
	aspect-ratio: 1 / 1;
}

.SkymarkSeat__button {
	display: grid;
	place-content: center;
	aspect-ratio: 1/1;
	width: var(--skymarkSeat__btnWidth);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;

	&[data-state="available"] {
		background-image: url(../images/btn_skymark-seat.svg);
	}

	&[data-state="disabled"] {
		background-image: url(../images/btn_skymark-seat--disabled.svg);
	}

	&[data-state="noWindow"] {
		background-image: url(../images/btn_skymark-seat--no-window.svg);
	}

	&[data-state="noInfantAllowed"] {
		background-image: url(../images/btn_skymark-seat--no-infant-allowed.svg);
	}

	&[data-state="noRecliningAllowed"] {
		background-image: url(../images/btn_skymark-seat--no-reclining-allowed.svg);
	}
}

.SkymarkSeat__buttonNumber {
	display: grid;
	place-content: center;
	aspect-ratio: 1/1;
	width: 2.8rem;
	border: .2rem solid #fff;
	border-radius: 50%;
	background: var(--caution-color);
	color: #fff;
	font-weight: var(--font-weight--bold);
	line-height: 1;
}

.Button[data-kind="skymarkSeatFront"],
.Button[data-kind="skymarkSeatBack"] {
	flex-direction: column;
}

.Button[data-kind="skymarkSeatFront"]::before,
.Button[data-kind="skymarkSeatBack"]::after {
	display: block;
	aspect-ratio: 1/1;
	width: 1.7rem;
	background-color: currentColor;
	content: "";
	mask-image: url(../images/icn_double-arrow.svg);
}

.Button[data-kind="skymarkSeatBack"]::after {
	scale: -1;
}

/* end_シート選択 */

/* start_アイコンについて */

.SkymarkSeatIcnExplanation__items {
	display: grid;
	gap: var(--margin--lv3);
}

.SkymarkSeatIcnExplanation__item {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	align-items: center;
	gap: var(--margin--lv4);

	dd {
		font-size: var(--font-size--s);
		line-height: var(--line-height--narrow);
	}
}

/* end_アイコンについて */

/* ------------------------------
    end_skymarkSeat
------------------------------ */


/* ------------------------------
    start_TravelGuideQR
------------------------------ */

.TravelGuideQR {
	display: grid;
	gap: var(--margin--lv4);
}

.TravelGuideQR__group {
	display: grid;
	justify-items: center;
	padding: var(--padding--lv1);
	gap: var(--margin--lv4);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius--lv1);
}

.TravelGuideQR__qr {
	width: 10rem;
}

/* ------------------------------
	end_TravelGuideQR
------------------------------ */


/* ------------------------------
	start_LocalRecommendTours
------------------------------ */

.LocalRecommendTours {
	display: grid;
	gap: var(--margin--lv4);
}

.LocalRecommendTour {
	display: grid;
	position: relative;
	grid-template-columns: 12rem 1fr;
	padding: var(--padding--lv2);
	gap: var(--margin--lv4);
	border: 0.2rem solid var(--border-color);
	border-radius: var(--border-radius--lv1);

	img {
		border-radius: var(--border-radius--lv3);
	}
}

.LocalRecommendTour__info {
	display: flex;
	flex-direction: column;
	gap: var(--margin--lv5);
}

.LocalRecommendTour__title {
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--narrow);
}

.LocalRecommendTour__price {
	color: var(--caution-color);
}

.LocalRecommendTour__button {
	margin-top: auto;
	text-align: right;

	.Button::before {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		inset: 0;
		content: '';
	}
}

/* ------------------------------
	end_LocalRecommendTours
------------------------------ */

@media screen and (min-width: 768px), print {
	.Contents {
		width: 1024px;
		margin-inline: auto;
		padding: 0;
	}
	/* ------------------------------
        start_Group
    ------------------------------ */

	.Group[data-lv--pc="1"] {
		gap: var(--margin--lv1);
	}

	.Group[data-lv--pc="2"] {
		gap: var(--margin--lv2);
	}

	.Group[data-lv--pc="3"] {
		gap: var(--margin--lv3);
	}

	.Group[data-lv--pc="4"] {
		gap: var(--margin--lv4);
	}

	.Group[data-lv--pc="5"] {
		gap: var(--margin--lv5);
	}

	/* start_column */

	.Group[data-column--pc="2"] {
		grid-template-columns: repeat(2, 1fr);
	}

	.Group[data-column--pc="3"] {
		grid-template-columns: repeat(3, 1fr);
	}

	.Group[data-column--pc="4"] {
		grid-template-columns: repeat(4, 1fr);
	}

	.Group[data-column--pc="5"] {
		grid-template-columns: repeat(5, 1fr);
	}

	/* end_column */

	/* start_align */

	.Group[data-align="center"] {
		justify-content: center;
		justify-items: center;
	}

	.Group[data-align="left"] {
		justify-content: start;
		justify-self: start;
	}

	.Group[data-align="right"] {
		justify-content: end;
		justify-self: end;
	}

	.Group[data-align="bottom"] {
		align-items: end;
	}

	/* end_align */

	/* start_type */

	.Group[data-type="subgrid"] {
		grid-template-columns: max-content 1fr;

		.subgrid__item {
			display: grid;
			grid-template-columns: subgrid;
			grid-column: span 2;
		}
	}

	.Group[data-type="spaceBetween"] {
		grid-template-columns: 1fr auto;
	}

	/* end_type */

	.Group[data-auto-flow="column"] {
		grid-auto-flow: column;
		justify-content: start;
	}

	/* ------------------------------
        end_Group
    ------------------------------ */
	/* ------------------------------
        start_ReserveIcn
    ------------------------------ */

	.ReserveIcn {
		width: 6rem;
		height: 6rem;
	}

	/* ------------------------------
        end_ReserveIcn
    ------------------------------ */
	/* ------------------------------
        start_Table
    ------------------------------ */

	/* start_participants */

	.Table[data-kind="participantModal"] td[data-kind="name"] {
		width: 40%;
	}

	.Table[data-kind="participantModal"] td[data-kind="date"] {
		width: 30%;
	}

	.Table[data-kind="participantModal"] td[data-kind="btn"] {
		width: 15%;
	}

	.Table[data-kind="participantModal"] .Button:is([data-type="primary"][data-size="small"], [data-type="secondary"][data-size="medium"]) {
		min-height: unset;
		padding-block: calc(var(--padding--lv2) * 0.5);
	}

	/* end_participants */

	/* start_numberOfRequestedDocuments */

	.Table[data-kind="numberOfRequestedDocuments"] {
		td {
			&:first-child {
				width: 80%;
			}

			&:last-child {
				width: 20%;
			}
		}
	}

	/* end_numberOfRequestedDocuments */

	/* ------------------------------
        end_Table
    ------------------------------ */
	/* ------------------------------
        start_BasicFormTable
    ------------------------------ */

	.BasicFormTable {
		grid-template-columns: max-content 1fr;
	}

	.BasicFormTable__group {
		align-items: start;
		gap: var(--margin--lv4);
		grid-template-columns: subgrid;
		grid-column: span 2;
	}

	.BasicFormTable dt {
		display: grid;
		align-items: center;
		grid-template-columns: 1fr auto;
		height: 5.8rem;

		&.BasicFormTable__dtWidthAdjust {
			&[data-dt-width="22"] {
				width: 22rem;
			}
		}
	}

	/* 半分 */
	.BasicFormTable dd[data-width="half"] {
		width: calc(50% - var(--margin--lv4) / 2);
	}

	/* 郵便番号 */
	.BasicFormTable dd[data-kind="postCode"] {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ------------------------------
        end_BasicFormTable
    ------------------------------ */
	/* ------------------------------
         start_NumberFormTable
    ------------------------------ */

	.NumberFormTable {
		grid-template-columns: unset;
		max-width: 50%;
	}

	.NumberFormTable__group,
	.NumberFormTable[data-type="horizontal"] .NumberFormTable__group {
		gap: var(--margin--lv5);
		grid-auto-flow: row;
		grid-template-columns: unset;
		grid-column: unset;
	}

	.NumberFormTable dt {
		max-width: unset;
	}

	/* start_horizontal */

	.NumberFormTable[data-type="horizontal"] {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--margin--lv3);
		align-items: end;
		max-width: unset;
	}

	.NumberFormTable[data-type="horizontal"] dt {
		max-width: calc(100% - 2ch - var(--margin--lv5));
	}

	/* end_horizontal */

	/* ------------------------------
         end_NumberFormTable
    ------------------------------ */
	/* ------------------------------
         start_InputInfoDisplayTable
    ------------------------------ */

	.InputInfoDisplayTable {
		grid-template-columns: 25rem 1fr;
		gap: unset;
		border-top: 1px solid var(--border-color);
	}

	.InputInfoDisplayTable__group {
		grid-template-columns: subgrid;
		grid-column: span 2;
		border-bottom: 1px solid var(--border-color);
	}

	.InputInfoDisplayTable__group > dt {
		justify-content: space-between;
	}

	/* 半分 */
	.InputInfoDisplayTable dd[data-width="half"] {
		width: calc(50% - var(--margin--lv4) / 2);
		padding-right: 0;
	}

	/* 2column */
	.InputInfoDisplayTable dd[data-column="2"] {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}

	/* ポイント */
	.InputInfoDisplayTable dd[data-kind="point"]:has(.ErrorMessage) > p {
		padding-bottom: calc(1em * 1.6);
	}

	/* ------------------------------
         end_InputInfoDisplayTable
    ------------------------------ */
	/* ------------------------------
        start_TransportCompanionTable
    ------------------------------ */

	.TransportCompanionTable {
		grid-template-columns: max-content repeat(3, 1fr);
	}

	.TransportCompanionTable__group {
		grid-template-columns: subgrid;
		grid-column: span 4;
		align-items: end;
	}

	.TransportCompanionTable__group dt {
		display: grid;
		align-items: center;
		height: 5.8rem;
	}

	.TransportCompanionBtn {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: ". . button";
	}

	.TransportCompanionBtn a {
		grid-area: button;
	}

	/* ------------------------------
        end_TransportCompanionTable
    ------------------------------ */
	/* ------------------------------
        start_Modal
    ------------------------------ */

	.Modal {
		--header-height: 5rem;
		--footer-height: 11.9rem;
		--contents-height: 53.2rem;
		top: 50%;
		left: 50%;
		width: 700px;
		height: unset;
		border-radius: 0.6rem;
		transform: translate(-50%, calc(-50% + 20px));
		max-height: calc(var(--contents-height) + var(--header-height) + var(--footer-height));

		&:has(.ModalFooter__counter) {
			--footer-height: 14.2rem;

			&:has(.ModalFooter__error) {
				--footer-height: 17rem;
			}
		}
	}

	.Modal[data-type="noFooter"] {
		grid-template-rows: var(--header-height) calc(var(--contents-height) + var(--footer-height));
	}

	.ModalHeader {
		grid-template-columns: 1fr 5rem;
	}

	.ModalContents,
	.Modal[data-type="noFooter"] .ModalContents {
		height: 100%;
	}

	.ModalContents__inner:not(:has(.TravelcomModal)) {
		padding: 2.5rem;

		&[data-kind="boardingPlaceMap"] {
			text-align: center;
			
			img {
				width: auto;
				max-height: 45rem;
			}
		}
	}

	/* ------------------------------
        end_Modal
    ------------------------------ */
    /* ------------------------------
        start_TravelcomModal
    ------------------------------ */

    /* start_TravelcomModal共通 */
    
    .TravelcomModal {
        /* start_チェックボックス */

        input[type="checkbox"] {
            &+ .Search__checkbox-label {
                cursor: pointer;
            }
        }

        /* end_チェックボックス */
    }

    /* start_TravelcomModal共通 */

    /* start_出発地 */

    .TravelcomModal--departure {
        .TravelcomModal--departure-ac-btn {
            border-bottom: none;
            cursor: pointer;
        }

        .TravelcomModal--departure-ac-contents {
            box-shadow: unset;
        }

        .TravelcomModal--departure-ac-contents-inner {
            justify-content: flex-start;
            width: calc(100% - 30px);
            margin: 15px auto;
            border: 1px solid #e5e5e5;
            border-bottom: none;
            box-shadow: 0px -1px 0px 0px #e5e5e5 inset;
        }

        .TravelcomModal--departure-ac-wrap:not(:last-child) {
            border-bottom: 1px solid #e5e5e5;
        }

        .Search__checkbox-label {
            width: calc(100% / 3);
            border-right: 1px solid #e5e5e5;

            &:nth-of-type(3n + 1) {
                border-right: none;
            }
        }
    }

    /* end_出発地 */

    /* ------------------------------
        end_TravelcomModal
    ------------------------------ */
	/* ------------------------------
        start_Dialog
    ------------------------------ */

	.DialogCloseButton {
		min-height: 5.8rem;
	}

	/* ------------------------------
        end_Dialog
    ------------------------------ */
	/* ------------------------------
        start_ReservationSteps
    ------------------------------ */

	#ReservationSteps {
		--order-width: 4rem;
	}

	#ReservationSteps:has(.ReservationStep__detail) {
		margin-bottom: 0;
	}

	.ReservationStep[data-status="current"] .ReservationStep__ttl::before {
		top: -1.2rem;
		width: 1rem;
		height: 1rem;
	}

	.ReservationStep__detail {
		position: static;
		font-size: 1.2rem;
		translate: 0 0;
	}

	.ReservationStep__detail::before,
	.ReservationStep__detail::after {
		content: none;
	}

	/* ------------------------------
        end_ReservationSteps
    ------------------------------ */
	/* ------------------------------
        start_CourseInfo
    ------------------------------ */

	.CourseInfoTable {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.CourseInfoTable__group {
		flex-grow: 1;
		width: unset;
		border-left: 1px solid var(--border-color);
	}

	.CourseInfoTable__group dt,
	.CourseInfoTable[data-kind="cruise"] dt {
		flex-shrink: 0;
		min-width: unset;
	}

	.CourseInfoTable[data-kind="seminar"] dt {
		min-width: 11rem;
	}

	/* ------------------------------
        end_CourseInfo
    ------------------------------ */
	/* ------------------------------
        start_RequiredLabel
    ------------------------------ */

	.RequiredLabel {
		--padding-lr: calc(var(--padding--lv3) / 1.5);
		padding: var(--padding--lv3) var(--padding-lr);
		line-height: 0.5;
	}

	/* ------------------------------
        end_RequiredLabel
    ------------------------------ */
	/* ------------------------------
        start_Input
    ------------------------------ */

	.Input:not([data-style="plain"]) {
		min-height: 5.8rem;
	}

	.Input[data-size="medium"] {
		min-height: unset;
		padding-block: calc(var(--padding--lv2) * 0.5);
	}

	/* 半分 */
	.InputWrap[data-width="half"] {
		width: calc(50% - var(--margin--lv4) / 2);
	}

	/* start_.InputInner */
	.InputInner[data-kind="meansOfTransportation"] {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"means routes"
			"means aside";
		column-gap: var(--margin--lv4);
		row-gap: 0;
	}

	.InputInnerMOT__means {
		grid-area: means;
		align-self: center;
	}

	.InputInnerMOT__routes {
		grid-area: routes;
		column-gap: var(--margin--lv3);
		row-gap: 0;
	}

	.InputInnerMOT__prices {
		grid-template-columns: subgrid;
		grid-column: span 2;
	}

	.InputInnerMOT__price {
		justify-self: flex-end;
	}

	.InputInnerMOT__aside {
		grid-area: aside;
		margin-top: var(--margin--lv5);
	}
	/* end_.InputInner */

	/* start_input[type="radioTable"] */
	.RadioTable__th p[data-kind="price"] {
		text-align: right;
	}
	/* end_input[type="radioTable"] */

	/* start_input[data-kind="transport"] */

	.Input[data-type="radio"][data-kind="transport"] {
		padding-block: var(--padding--lv2);
		gap: calc(var(--margin--lv3) + 1.2rem);
	}

	.TransportInfoInRadio {
		display: flex;
		width: 100%;
		align-items: center;
		gap: var(--margin--lv3);
	}

	.TransportInfoInRadio__connecting {
		flex: 1;
	}

	.TransportInfoInRadioConnecting__group {
		flex-direction: row;
		align-items: center;
	}

	.TransportInfoInRadioConnecting__group:not(:last-child) {
		padding-bottom: var(--padding--lv2);
		border-bottom: 1px solid var(--border-color);
	}

	.TransportInfoInRadio__item:not([data-kind="title"]):not(:last-child) {
		padding-bottom: 0;
		border-bottom: none;
	}

	.TransportInfoInRadio__item[data-kind="title"] {
		flex: 1;
		font-size: var(--font-size--m);
	}

	.TransportInfoInRadio__item[data-kind="schedule"] {
		width: 28rem;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--margin--lv3);
		text-align: center;
	}

	.TransportInfoInRadio__item[data-type="i"][data-kind="schedule"] {
		width: 32rem;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--margin--lv3);
		text-align: center;
	}

	.TransportInfoInRadio__item[data-kind="title"] .TransportInfoInRadio__item[data-kind="schedule"] {
		width: unset;
		text-align: left;
	}

	.TransportInfoInRadio[data-kind="companion"] .TransportInfoInRadio__item[data-kind="schedule"] {
		width: 51.6rem;
		grid-template-columns: 1fr 1.6rem 1fr;
	}

	.TransportInfoInRadio[data-kind="companion"] .TransportInfoInRadio__item[data-kind="schedule"] .TransportInfoInRadioItem__content {
		column-gap: var(--margin--lv5);
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.TransportInfoInRadio__item[data-kind="schedule"] .TransportInfoInRadioItem__content[data-kind="to"] {
		justify-self: unset;
	}

	.TransportInfoInRadio__item[data-kind="seatInfo"]:not([data-type="error"]) {
		width: 40rem;
		align-items: center;
		grid-template-columns: 1fr 10rem;
		gap: var(--margin--lv3);
	}

	.TransportInfoInRadio__item[data-type="error"] {
		width: 22rem;
	}

	.TransportInfoInRadio__item[data-kind="availability"] {
		width: 6rem;
		text-align: center;
	}

	.TransportInfoInRadio__item[data-kind="price"] {
		width: 17rem;
		justify-content: flex-end;
	}

	.TransportInfoInRadio__item[data-kind="price"][data-type="hotel"] {
		width: 25rem;
	}

	.TransportInfoInRadio__item[data-kind="city"] {
		width: 16rem;
		text-align: center;
	}

	.TransportInfoInRadio__item[data-kind="facility"] {
		flex: 1;
		text-align: center;
	}

	.TransportInfoInRadio:not([data-kind="companion"]) .TransportInfoInRadioItem__arrow {
		display: none;
	}

	.TransportInfoInRadioItem__label {
		display: none;
	}

	/* end_input[data-kind="transport"] */

	/* 年月日（インバウンド） */
	.InputWrap[data-kind="date--inbound"] {
		grid-template-columns: 1fr 1fr 1.5fr;
	}

	.InputWrap[data-kind="date--inbound"]>div {
		grid-template-columns: 1fr auto;
		grid-column: unset;
	}

	/* ------------------------------
        end_Input
    ------------------------------ */
	/* ------------------------------
        start_Button
    ------------------------------ */

	/*---------- start_primary ----------*/

	.Button[data-type="primary"]:not([data-block="true"]) {
		display: inline-flex;
		justify-self: start;
		width: auto;
		min-width: 30rem;
	}

	/* start_size */
	.Button[data-type="primary"][data-size="medium"] {
		min-height: 5.8rem;
	}

	.Button[data-type="primary"][data-size="small"] {
		min-height: 4.8rem;
		padding: calc(var(--padding--lv2) * 0.75);
	}
	/* end_size */

	/*---------- end_primary ----------*/

	/*---------- start_secondary ----------*/

	.Button[data-type="secondary"] {
		min-height: 5.8rem;
	}

	.Button[data-type="secondary"]:not([data-block="true"]) {
		display: inline-flex;
		justify-self: start;
		width: auto;
	}

	/* start_size */
	.Button[data-type="secondary"][data-size="medium"] {
		min-height: 4.8rem;
		padding: calc(var(--padding--lv2) * 0.75);
	}

	/*---------- end_secondary ----------*/

	/* ------------------------------
        end_Button
    ------------------------------ */
	/* ------------------------------
        start_details
    ------------------------------ */

	/* start_Details__summary */

	/* in Note */
	.Note .Details__summary {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	/* end_Details__summary */

	.Details__content {
		padding: 0 var(--padding--lv1);
	}

	/* ------------------------------
        end_details
    ------------------------------ */
	/* ------------------------------
        start_StepButtons
    ------------------------------ */

	.StepButtons {
		grid-template-columns: 1fr minmax(30rem, auto);
		grid-template-areas: "prev next";
		align-items: end;
	}

	.StepButton[data-type="next"] {
		width: 100%;
	}

	.StepButton[data-type="prev"]:has([data-kind="close"]) {
		width: 100%;
	}

	.StepButtons[data-type="multiStep"] {
		grid-auto-flow: column;
		grid-template-columns: unset;
		grid-template-areas: unset;
		justify-content: center;
	}

	/* ------------------------------
        end_StepButtons
    ------------------------------ */
	/* ------------------------------
        start_TotalAmount
    ------------------------------ */

	.TotalAmount {
		grid-auto-flow: column;
	}

	.TotalAmount[data-type="multiple"] {
		grid-auto-flow: column;
		justify-content: space-between;
	}

	.TotalAmount__items {
		display: grid;
		gap: var(--margin--lv3);
		grid-auto-flow: column;
	}

	.TotalAmount__item {
		gap: var(--margin--lv4);
		justify-content: unset;
	}

	/* ------------------------------
        end_TotalAmount
    ------------------------------ */
	/* ------------------------------
        hyron add 2025.12.09 start
        start_TotalAmountMoney
    ------------------------------ */

	.TotalAmountMoney {
		grid-auto-flow: column;
	}

	.TotalAmountMoney[data-type="multiple"] {
		grid-auto-flow: column;
		justify-content: space-between;
	}

	.TotalAmountMoney__items {
		display: grid;
		gap: var(--margin--lv3);
		grid-auto-flow: column;
	}

	.TotalAmountMoney__item {
		gap: var(--margin--lv4);
		justify-content: unset;
	}

	/* ------------------------------
        end_TotalAmountMoney
        hyron add 2025.12.09 start
    ------------------------------ */
	/* ------------------------------
        start_LoginBox
    ------------------------------ */

	.Group[data-kind="loginInputs"] {
		grid-template-columns: max-content 1fr;
	}

	.Login__group {
		grid-template-columns: subgrid;
		grid-column: span 2;
	}

	.Login__label {
		display: grid;
		align-items: center;
		height: 5.8rem;
	}

	.LoginButtons {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		gap: unset;
		align-items: flex-end;
		width: 100%;
	}

	.LoginButton {
		width: 30rem;
	}

	/* ------------------------------
        end_LoginBox
    ------------------------------ */
	/* ------------------------------
        start_LineBox
    ------------------------------ */

	.LineBox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.LineButton {
		width: 30rem;
		padding-block: var(--padding--lv3);
	}

	/* ------------------------------
        end_LineBox
    ------------------------------ */
	/* ------------------------------
        start_RadioStyleButton
    ------------------------------ */

	.RadioStyleButton {
		padding: var(--padding--lv1) var(--padding--lv2);
	}

	/* ------------------------------
        end_RadioStyleButton
    ------------------------------ */
	/* start_busStop */

	.Group[data-kind="busStop"] {
		grid-template-columns: 1fr 15rem;
	}

	/* end_busStop */
	/* ------------------------------
        start_TourOption
    ------------------------------ */

	.TourOption {
		grid-template-columns: 75% 1fr;
		align-items: start;

		&[data-kind="cruise"] {
			padding-bottom: calc(var(--padding--lv2) - calc(var(--padding--lv2) * .75));
		}
	}

	.TourOption__button {
		align-self: end;
	}

	.TourOption__group {
		align-content: start;
		gap: var(--margin--lv5);
	}

	/* start_mark */

	.AvailabilityMarks {
		display: grid;
		gap: var(--margin--lv3);
		grid-template-columns: auto 1fr;
	}

	/* end_mark */

	.TourOptionDetails,
	.TourOptionDetails__group {
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: var(--margin--lv5);
		column-gap: var(--margin--lv4);
	}

	.TourOptionDetails__item {
		justify-content: flex-start;
		padding: 0;
	}

	.TourOptionDetails__item:not(:last-child) {
		position: relative;
		/* border-bottom: none; */
		/* padding-bottom: 0; */
	}

	.TourOptionDetails__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 0;
		right: calc(var(--margin--lv4) / 2 * -1);
		display: block;
		width: 1px;
		height: 100%;
		background-color: var(--border-color);
	}

	.TourOptionDetails__item[data-kind="price"] dd {
		display: block;
	}

	/* start_TourOptionAdditionalInput */

	.TourOptionAdditionalInput {
		grid-column: span 2;
	}

	.Group[data-kind="rentalCarPlatform"] {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.TourOptionAdditionalInputTable__table {
		&[data-kind="childSeat"] td:nth-child(2) {
			width: auto;
		}
	}

	.TourOption[data-kind="cruise"] .TourOptionAdditionalInputTable__table {
		:is(th, td) {
			width: 25%;
		}

		td {
			padding-block: calc(var(--padding--lv2) * 0.75);
		}
	
		.Input {
			min-height: unset;
			padding-block: calc(var(--padding--lv2) * 0.5);
		}
	}

	/* end_TourOptionAdditionalInput */

	.cruiseNumberReselect {
		grid-column: span 2;
	}

	/* ------------------------------
        end_TourOption
    ------------------------------ */
	/* ------------------------------
        start_MeansOfTransport
    ------------------------------ */

	.MeansOfTransportDetails {
		justify-self: start;
		grid-auto-flow: column;
	}

	.MeansOfTransportDetails__item {
		justify-content: flex-start;
		padding: 0;
	}

	.MeansOfTransportDetails__item:not(:last-child) {
		position: relative;
		border-bottom: none;
		padding-bottom: 0;
	}

	.MeansOfTransportDetails__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 0;
		right: calc(var(--margin--lv4) / 2 * -1);
		display: block;
		width: 1px;
		height: 100%;
		background-color: var(--border-color);
	}

	.MeansOfTransportSubDetails {
		gap: var(--margin--lv5);
		padding-top: 0;
		border-top: none;
	}

	.MeansOfTransportSubDetails__item {
		display: grid;
		grid-auto-flow: column;
		gap: var(--margin--lv4);
		justify-content: start;
	}

	/* ------------------------------
        end_MeansOfTransport
    ------------------------------ */
	/* start_ReserveRelatedLinks */

	.ReserveRelatedLinks {
		grid-template-columns: repeat(3, 1fr);
	}

	.ReserveRelatedLink::before {
		width: 2rem;
	}

	.ReserveRelatedLink::after {
		bottom: 1.7rem;
    	right: 1.8rem;
	}

	.ReserveRelatedLink {
		grid-template-rows: subgrid;
		grid-row: span 2;
		padding: var(--padding--lv2);
	}

	/* end_ReserveRelatedLinks */
	.insuranceBn {
		width: 49.7rem;
	}
	/* ------------------------------
        start_mailMagazine
    ------------------------------ */

	.Group[data-kind="mailMagazine"] .Input:first-child {
		grid-column: span 2;
	}

	/* ------------------------------
        end_mailMagazine
    ------------------------------ */
	.Group[data-kind="securityCode"] {
		align-items: end;
	}

	.Group[data-kind="securityCode"]:has(.ErrorMessage) .Button {
		padding-bottom: calc(1em * 1.6);
	}

	/* ------------------------------
        start_CreditCardInfoInRadio
    ------------------------------ */

	.CreditCardInfoInRadio {
		grid-template-columns: unset;
		grid-auto-flow: column;
		gap: var(--margin--lv4);
	}

	/* ------------------------------
        end_CreditCardInfoInRadio
    ------------------------------ */
	/* ------------------------------
        start_SecureCardList
    ------------------------------ */

	.SecureCardList {
		grid-template-columns: repeat(5, 1fr);
		font-size: var(--font-size--xs);
	}

	.SecureCardItem {
		display: grid;
		gap: var(--margin--lv5);
	}

	.SecureCardItem .Button {
		justify-self: center;
	}

	/* ------------------------------
        end_SecureCardList
    ------------------------------ */
	.LineLinkGuideBn {
		width: 49.7rem;
	}

	.Group[data-kind="selectCreditCard"] {
		grid-template-columns: 1fr auto;
	}
	/* ------------------------------
        start_Modal__CardList
    ------------------------------ */
	.Modal__CardItem img {
		width: auto;
		height: 4rem;
	}

	/* ------------------------------
        start_Modal__CardList
    ------------------------------ */
	/* ------------------------------
        start_TabButton
    ------------------------------ */

	.TabButton[data-column--pc="4"] {
		--column: 4;
	}

	/* ------------------------------
        end_TabButton
    ------------------------------ */
	/* ------------------------------
        start_Accommodation
    ------------------------------ */

	/* start_AccommodationArea */

	.AccommodationArea {
		grid-template-columns: 50% 1fr;
	}

	.AccommodationArea__select {
		grid-template-columns: 0.8fr 0.2fr;
	}

	.AccommodationArea__button {
		grid-template-columns: 1fr 1fr;
	}

	/* end_AccommodationArea */

	/* start_AccomodationMap */

	.AccomodationMap__iframe {
		aspect-ratio: 16/9;
	}

	/* end_AccomodationMap */

	/* start_AccommodationInfo */

	.AccommodationInfo {
		row-gap: var(--margin--lv5);
		grid-template-columns: 22rem 1fr;
		grid-template-rows: repeat(3, auto);
		grid-template-areas:
			"image name name"
			"image detail button"
			"image access access";
	}

	.AccommodationInfo__image {
		height: 16.5rem;
	}

	.AccommodationInfoDetail__inner {
		display: flex;
		flex-wrap: wrap;
		column-gap: var(--margin--lv3);
	}

	.AccommodationInfo__button {
		align-self: end;
		min-width: 30rem;
	}

	.AccommodationInfo__access {
		align-self: start;
	}

	/* end_AccommodationInfo */

	/* start_AccommodationPlan */

	.AccommodationPlan__group {
		grid-template-columns: 75% 1fr;
		grid-template-areas:
			"name radio"
			"table table"
			"button button";
		padding-bottom: 0;
	}

	.AccommodationPlan__group:has(input:checked) {
		padding-bottom: var(--padding--lv2);
	}

	.AccommodationPlan__name {
		grid-area: name;
		align-self: center;
	}

	.AccommodationPlan__radio {
		grid-area: radio;
	}

	.AccommodationPlan__radio .Input {
		min-height: unset;
		padding-block: calc(var(--padding--lv2) * 0.75);
	}

	.AccommodationPlan__table {
		grid-area: table;
	}

	.AccommodationPlan__table :is(th, td) {
		width: 25%;
	}

	.AccommodationPlan__table td {
		padding-block: calc(var(--padding--lv2) * 0.75);
	}

	.AccommodationPlan__table td[data-kind="roomNumber"] {
		width: auto;
	}

	.AccommodationPlan__table td[data-kind="roomNumber"] .Input {
		min-height: unset;
		padding-block: calc(var(--padding--lv2) * 0.5);
	}

	.AccommodationPlan__button {
		justify-self: end;
		grid-area: button;
		min-width: 30rem;
	}

	/* end_AccommodationPlan */

	/* start_AccommodationGrade */

	.AccommodationGrade__group {
		grid-template-columns: 75% 1fr;
		grid-template-areas:
			"name radio"
			"table table";
	}

	.AccommodationGrade__name {
		grid-area: name;
		align-self: center;
	}

	.AccommodationGrade__radio {
		grid-area: radio;
	}

	.AccommodationGrade__radio .Input {
		min-height: unset;
		padding-block: calc(var(--padding--lv2) * 0.75);
	}

	.AccommodationGrade__table {
		grid-area: table;
	}

	.AccommodationGrade__table :is(th:first-child, td:first-child) {
		width: 65%;
		padding-left: calc(var(--padding--lv1) * 2);
	}

	.AccommodationGrade__table :is(th:last-child, td:last-child) {
		width: 35%;
	}

	.AccommodationGrade__table th:last-child {
		text-align: center;
	}

	.AccommodationGrade__prices {
		grid-template-columns: repeat(2, max-content);
		justify-content: end;
	}
	
	.AccommodationGradePrices__group {
		grid-template-columns: subgrid;
		grid-column: span 2;
		gap: var(--margin--lv5);
	}

	/* end_AccommodationGrade */

	/* ------------------------------
        end_Accommodation
    ------------------------------ */
	/* ------------------------------
        start_MeansOfTransportation
    ------------------------------ */

	.RepresentativePlatform {
		grid-template-rows: unset;
		grid-template-columns: 1fr 2.5rem 1fr 0.5fr;
		align-items: end;
	}

	.RepresentativePlatform__icn {
		align-self: end;
		width: auto;
		padding-bottom: 1.4rem;
		transform: none;
	}

	.TransportInfoInRadioTh {
		display: flex;
		gap: var(--margin--lv3);
		padding: var(--padding--lv2) var(--padding--lv1);
		color: rgba(0, 0, 0, 0.7);
		font-size: var(--font-size--xs);
		font-weight: var(--font-weight--bold);
		background-color: var(--bg-color);
		border-bottom: 1px solid var(--border-color);
	}

	.Group[data-style="background"] .TransportInfoInRadioTh {
		padding-top: 0;
	}

	.TransportInfoInRadioTh p[data-kind="select"] {
		width: 3rem;
	}

	.TransportInfoInRadioTh p[data-kind="title"] {
		flex: 1;
	}

	.TransportInfoInRadioTh p[data-kind="schedule"] {
		width: 12.5rem;
		text-align: center;
	}

	.TransportInfoInRadioTh p[data-type="i"][data-kind="schedule"] {
		width: 14.5rem;
	}

	.TransportInfoInRadioTh p[data-kind="seatInfo"] {
		width: 40rem;
	}

	.TransportInfoInRadioTh p[data-kind="seatInfo"][data-type="error"] {
		width: 22rem;
	}

	.TransportInfoInRadioTh p[data-kind="availability"] {
		width: 6rem;
		text-align: center;
	}

	.TransportInfoInRadioTh p[data-kind="price"] {
		width: 17rem;
		text-align: right;
	}

	.TransportInfoInRadioTh p[data-kind="city"] {
		width: 16rem;
		text-align: center;
	}

	.TransportInfoInRadioTh p[data-kind="facility"] {
		flex: 1;
		text-align: center;
	}

	.TransportInfoInRadioTh p[data-kind="hotelPrice"] {
		width: 25rem;
		text-align: right;
	}

	/* ------------------------------
        end_MeansOfTransportation
    ------------------------------ */
	/* ------------------------------
        start_HepburnTable
    ------------------------------ */

	.HepburnTable td > div {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ------------------------------
        end_HepburnTable
    ------------------------------ */
	/* ------------------------------
        start_InsuranceResponsiveTable
    ------------------------------ */

	.InsuranceResponsiveTable__container {
		--InsuranceResponsiveTable-column: 6;
		grid-template-columns: calc(24rem + calc((100% - 24rem) / var(--InsuranceResponsiveTable-column))) repeat(5, calc((100% - 24rem) / var(--InsuranceResponsiveTable-column)));
		padding-bottom: 0;
		overflow-x: unset;
	}

	.InsuranceResponsiveTable__group {
		width: unset;
		grid-template-columns: unset;
	}

	.InsuranceResponsiveTable__group:first-child {
		grid-template-columns: 24rem auto;
	}

	.InsuranceResponsiveTable__group[data-type="spacer"] {
		display: grid;
	}

	/* start_th */

	.InsuranceResponsiveTable__group:not(:first-child) .InsuranceResponsiveTable__th {
		display: none;
	}

	/* end_th */

	/* start_type */

	.InsuranceResponsiveTable__group:not(:last-child) .InsuranceResponsiveTable__type {
		border-right: none;
	}

	/* end_type */

	/* start_dot */

	.InsuranceResponsiveTable__dots {
		display: none;
	}

	/* end_dot */

	/* start_insuranceページ */

	.InsuranceResponsiveTable[data-type="insurance"]:not(.is-open) .InsuranceResponsiveTable__group:not([data-section="1"]) {
		display: grid;

		p {
			display: none;
		}
	}

	/* end_insuranceページ */

	/* ------------------------------
        end_InsuranceResponsiveTable
    ------------------------------ */
	/* ------------------------------
        start_JRSeat
    ------------------------------ */

	.JRSelectSeatWrapper {
		column-gap: var(--margin--lv4);
		grid-template-columns: repeat(4, 1fr);
		grid-template-areas:
			". next prev ."
			"select select select select";
	}

	.Button[data-kind="JRSelectSeatNext"] {
		grid-area: next;
		gap: calc(var(--margin--lv5) / 2);
	}

	.Button[data-kind="JRSelectSeatPrev"] {
		grid-area: prev;
		gap: calc(var(--margin--lv5) / 2);
	}

	.Button[data-kind="JRSelectSeatNext"],
	.Button[data-kind="JRSelectSeatPrev"] {
		flex-direction: row;
	}

	.Button[data-kind="JRSelectSeatNext"]::before,
	.Button[data-kind="JRSelectSeatPrev"]::after {
		width: 1.2rem;
		rotate: -90deg;
	}

	.JRSelectSeatArea {
		grid-area: select;
		flex-direction: row;
		align-items: center;
		gap: calc(var(--margin--lv4) / 3);
	}

	.JRSeatIcns {
		flex-shrink: 0;
		align-self: stretch;
		grid-template-columns: unset;
		grid-auto-flow: row;
		align-content: center;
		gap: calc(var(--margin--lv5) / 2);
		padding: calc(var(--margin--lv5) / 2);
	}

	.JRSeatIcn {
		width: 2.8rem;
	}

	.JRSelectSeat {
		display: flex;
		gap: calc(var(--margin--lv4) / 3);
		flex-direction: column-reverse;
		flex-grow: 1;
	}

	.JRSelectSeat__column {
		grid-auto-flow: column;
		gap: calc(var(--margin--lv4) / 3);
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}

	.JRSeatSteps {
		display: grid;
		grid-template-columns: auto 30rem;
		justify-content: space-between;
		align-items: end;
	}

	/* start_iconModal */

	.JRSeatIcnExplanation__items {
		grid-template-columns: repeat(3, 1fr);
	}

	/* end_iconModal */

	/* ------------------------------
        end_JRSeat
    ------------------------------ */
	/* ------------------------------
    	start_Calendar
	------------------------------ */

	.Group[data-kind="ConditionTerms__marks"] {
		font-size: var(--font-size--xs);
	}

	.ConditionTerms__movingMarksGroup {
		min-width: unset;
	}

	.ConditionTerms__touristMarks {
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: var(--margin--lv5);
		column-gap: var(--margin--lv3);
	}

	.ConditionTermsTimeZone {
		display: grid;
		grid-auto-flow: column;

		div {
			grid-auto-flow: row;
			grid-template-columns: unset;
			
			&:not(:last-child) {
				border-right: 1px solid var(--border-color);
				border-bottom: none;
			}
		}

		dt, dd {
			padding: var(--padding--lv3);
		}

		dt {
			text-align: center;
			border-right: none;
			border-bottom: 1px solid var(--border-color);
		}
	}

	/* ------------------------------
    	end_Calendar
	------------------------------ */
}

@media (any-hover: hover) {
	/* ------------------------------
        start_ErrorAnchor
    ------------------------------ */

	.ErrorAnchor:hover {
		text-decoration: none;
	}

	/* ------------------------------
        end_ErrorAnchor
    ------------------------------ */
	/* ------------------------------
        start_Dialog
    ------------------------------ */

	.DialogCloseButton:hover {
		text-decoration: underline;
	}

	/* ------------------------------
        end_Dialog
    ------------------------------ */
	/* ------------------------------
        start_Input
    ------------------------------ */

	.Input[data-type="radioTable"]:hover {
		background-color: var(--bg-color--safety);
	}

	/* ------------------------------
        end_Input
    ------------------------------ */
	/* ------------------------------
        start_Button
    ------------------------------ */

	/*---------- start_primary ----------*/

	.Button[data-type="primary"]:not([data-disabled="true"]):hover {
		text-decoration: underline;
		background-color: #005b99;
	}

	/* caution */
	.Button[data-type="primary"][data-caution="true"]:not([data-disabled="true"]):hover {
		background-color: #b21500;
	}

	/*---------- end_primary ----------*/

	/*---------- start_seconary ----------*/

	.Button[data-type="secondary"]:not([data-disabled="true"]):hover {
		text-decoration: underline;
		background-color: var(--active-color);
	}

	/* caution */
	.Button[data-type="secondary"][data-caution="true"]:not([data-disabled="true"]):hover {
		background-color: #fff4f2;
	}

	/* close */
	.Button[data-type="secondary"][data-kind="close"]:hover {
		background-color: transparent;
	}

	/* print */
	.Button[data-type="secondary"][data-kind="print"]:hover {
		background-color: transparent;
	}

	/*---------- end_seconary ----------*/

	/*---------- start_tertiary ----------*/

	.Button[data-type="tertiary"]:not([data-disabled="true"]):hover {
		text-decoration: none;
	}

	/*---------- end_tertiary ----------*/

	/*---------- start_PageClose ----------*/

	.PageCloseBtn:hover {
		text-decoration: underline;
	}

	/*---------- end_PageClose ----------*/

	/* ------------------------------
        end_Button
    ------------------------------ */
	/* ------------------------------
        start_details
    ------------------------------ */

	/* start_Details__icn */

	.Details__summary:hover .Details__icn {
		text-decoration: underline;
		background-color: var(--active-color);
	}

	/* in Note */
	.Note .Details__summary:hover .Details__icn {
		text-decoration: none;
		background-color: unset;
	}

	/* end_Details__icn */

	/* ------------------------------
        end_details
    ------------------------------ */
	/* ------------------------------
	    start_EditableBox
	------------------------------ */

	:is(.EditableBox, .isEditable) {
		a:hover {
			text-decoration: none;
		}
	}

	/* ------------------------------
	    end_EditableBox
	------------------------------ */
	/* ------------------------------
        start_LineBox
    ------------------------------ */

	.LineButton:hover {
		text-decoration: underline;
	}

	/* ------------------------------
        end_LineBox
    ------------------------------ */
	/* start_ReserveRelatedLinks */

	.ReserveRelatedLink {
		transition: box-shadow .3s;
	}

	.ReserveRelatedLink:hover {
		box-shadow: 0px 0px 0px .2rem var(--corporate-color) inset;
	}

	/* end_ReserveRelatedLinks */
	/* ------------------------------
        start_TabButton
    ------------------------------ */

	.TabButton__button:hover {
		text-decoration: underline;
	}

	/* ------------------------------
        end_TabButton
    ------------------------------ */
	/* ------------------------------
        start_JRSeat
    ------------------------------ */

	.JRSelectSeat__btn:not([data-type="blank"]):not(:has(:disabled)):hover {
		text-decoration: underline;
	}

	.JRSelectSeat__btn:not([data-type="blank"]):not(:has(:checked)):not(:has(:disabled)):hover {
		background-color: var(--active-color);
	}

	/* ------------------------------
        end_JRSeat
    ------------------------------ */
	/* ------------------------------
	    start_Calendar
	------------------------------ */

	.ConditionTermsSchedule__roomDetails {
		summary {
			cursor: pointer;

			&:hover .ConditionTermsSchedule__roomDetailsIcn {
				text-decoration: none;
			}
		}
	}

	/* ------------------------------
    	end_Calendar
	------------------------------ */
	:is(.Pager__prev, .Pager__next) {
		border: 1px solid #fff;
		transition: border-color .3s;

		&:hover {
			border-color: var(--corporate-color);
		}
	}

	a.Pager__link {
		border: 1px solid var(--bg-color);
		transition: border-color .3s;

		&:hover {
			border-color: var(--corporate-color);
		}
	}
}

	/*2026/2/25 ADD Hyron Ph.1顧客接点強化 同行者管理対応 START*/
	.Group_sms_select_type_anchor_link {
	display: grid;
	align-items: start;
	width: 100%;
	gap: var(--margin--lv5);
	}
	/*2026/2/25 ADD Hyron Ph.1顧客接点強化 同行者管理対応 End*/
	/*2026/4/02 ADD Hyron Ph.1顧客接点強化 携帯番号準必須化対応 START*/
	.Telphone{
	  width: 150px;
      text-align: left;
	}
	/*2026/4/02 ADD Hyron Ph.1顧客接点強化 携帯番号準必須化対応 END*/
	/*2026/7/10 ADD Hyron Ph.1顧客接点強化 携帯番号準必須化対応 START*/
	.Telphone2{
	  width: 150px;
      text-align: left;
	}
	/*2026/7/10 ADD Hyron Ph.1顧客接点強化 携帯番号準必須化対応 END*/
@media screen and (min-width: 768px),
print {
	/* ------------------------------
		start_Modal（カレンダー）
	------------------------------ */

	.ConditionModal-day-wrap {
		display: flex;
		justify-content: space-between;
		gap: 3.5rem;
	}

	.ConditionModal-day-control-wrap {
		display: flex;
		justify-content: center;
		padding: 15px 0;
		margin: 0 auto;
		border-top: 1px solid #e5e5e5;
		--sub-corporate-color: #0073c0;
	}

	.ConditionModal-day-control {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 30px;
		background-color: #f5f5f5;
		border-radius: 50px;
	}

	.ConditionModal-day-control--g {
		opacity: 0.3;
	}

	.ConditionModal-day-control:not(.ConditionModal-day-control--g) {
		cursor: pointer;
		transition: box-shadow 0.3s, background-color 0.3s;
	}

	.ConditionModal-day-control:not(.ConditionModal-day-control--g):hover {
		box-shadow: 0px 0px 0px 1px var(--corporate-color) inset;
		background-color: var(--active-color);
	}

	.ConditionModal-day-control::before {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--sub-corporate-color);
		border-right: 2px solid var(--sub-corporate-color);
		transform: rotate(45deg);
	}

	.ConditionModal-day-control--prev {
		margin-right: 15px;
	}

	.ConditionModal-day-control--prev::before {
		transform: rotate(-135deg);
	}

	/* ------------------------------
    	end_Modal（カレンダー）
	------------------------------ */
	/* ------------------------------
        start_TourInfo
    ------------------------------ */

	.TourInfo {
		grid-template-columns: 1fr auto;
		align-items: start;
	}

	.TourInfo__button {
		align-self: end;
	}

	.TourInfo__group {
		align-content: start;
		gap: var(--margin--lv5);
	}

	.TourInfoDetails {
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: calc(var(--margin--lv5) / 2);
		column-gap: var(--margin--lv4);
	}

	.TourInfoDetails__item {
		justify-content: flex-start;
		padding: 0;
	}

	.TourInfoDetails__item:not(:last-child) {
		position: relative;
	}

	.TourInfoDetails__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 0;
		right: calc(var(--margin--lv4) / 2 * -1);
		display: block;
		width: 1px;
		height: 100%;
		background-color: var(--border-color);
	}

	/* ------------------------------
        end_TourInfo
    ------------------------------ */
	/* ------------------------------
		start_i-choice loading
	------------------------------ */

	.Group[data-kind="InProgressAnimation"] {
		width: 50rem;
	}

	.InProgressAnimationIllust {
		width: 21rem;
		margin-bottom: var(--margin--lv5);
	}

	/* ------------------------------
		end_i-choice loading
	------------------------------ */
	/* ------------------------------
		start_participantsList
	------------------------------ */

	.participantsList {
		grid-template-columns: max-content max-content 1fr;
	}

	.participantsList__group {
		display: grid;
		gap: var(--margin--lv4);
		grid-template-columns: subgrid;
		grid-column: span 3;

		& dd[data-kind="status"] {
			margin-left: var(--margin--lv3);
		}
	}

	/* ------------------------------
		end_participantsList
	------------------------------ */
	/* ------------------------------
	    start_EventDayGuide
	------------------------------ */

	.EventDayGuide__figure {
		max-width: 50rem;
	}

	/* ------------------------------
	    end_EventDayGuide
	------------------------------ */
	/* ------------------------------
	    start_JsTabButtons
	------------------------------ */

	.JsTabButton {
		padding: var(--padding--lv1);
	}

	/* start_medium */

	.JsTabButtons[data-type="medium"] .JsTabButton[data-active="true"]::before {
		width: 2rem;
		height: 1.2rem;
		bottom: -1.2rem;
		left: calc(50% - 1rem);
	}

	/* end_medium */

	/* ------------------------------
	    end_JsTabButtons
	------------------------------ */	
	/* ------------------------------
		start_ApplicationTourSearch
	------------------------------ */

	.ApplicationTourSearch__buttons {
		display: flex;
		justify-content: center;
	}

	/* ------------------------------
		end_ApplicationTourSearch
	------------------------------ */
	/* ------------------------------
	    start_BankInitial
	------------------------------ */

	.BankInitial {
		grid-template-columns: repeat(10, 1fr);
	}

	.BankInitial__group {
		grid-template-columns: unset;
		grid-auto-flow: row;

		label {
			aspect-ratio: unset;
			height: 8.5rem;
		}

		&[data-kind="other"] {
			grid-column: span 2;

			label {
				grid-column: unset;
				height: 8.5rem;
			}
		}
	}

	/* ------------------------------
	    end_BankInitial
	------------------------------ */
	/* ------------------------------
	    start_ConfirmationEmailSettingTables
	------------------------------ */

	.ConfirmationEmailSettingTables {
		gap: unset;
		grid-template-columns: auto 1fr auto;
	}

	.ConfirmationEmailSettingTables__heading {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: span 3;
		border: 1px solid var(--border-color);
		background-color: var(--bg-color);
		color: rgba(0, 0, 0, 0.7);
    	font-weight: var(--font-weight--bold);
    	font-size: var(--font-size--s);
	}

	.ConfirmationEmailSettingTables__ths {
		position: relative;
		display: grid;
		grid-column: 2 / span 2;
		grid-template-columns: 21rem 15rem 1fr;

		&::before {
			content: '';
			display: block;
			width: 1px;
			height: 100%;
			position: absolute;
			top: 0;
			left: -1px;
			background-color: var(--border-color);
		}
	}

	.ConfirmationEmailSettingTables__th {
		padding: var(--padding--lv2);
		text-align: center;

		&:not(:last-child) {
			border-right: 1px solid var(--border-color);
		}
	}

	.ConfirmationEmailSettingTable {
		grid-template-columns: subgrid;
		grid-column: span 3;
		align-items: stretch;
		gap: unset;
		grid-template-areas: unset;
		padding: unset;
		border-radius: unset;
		border: 1px solid var(--border-color);
		border-top: unset;
	}

	.ConfirmationEmailSettingTable__state {
		grid-area: unset;
		display: grid;
		place-content: center;
		padding: var(--padding--lv2);
		border-right: 1px solid var(--border-color);
	}

	.ConfirmationEmailSettingTable__dl {
		grid-area: unset;
		gap: unset;
		grid-template-columns: 21rem 15rem 1fr;
	}

	.ConfirmationEmailSettingTable__dt-dd {
		align-items: center;
		grid-column: unset;
		grid-template-columns: unset;

		&:not(:last-child) {
			border-right: 1px solid var(--border-color);
		}

		dt {
			display: none;
		}

		dd {
			padding: var(--padding--lv2);
		}
	}

	.ConfirmationEmailSettingTable__button {
		grid-area: unset;
		display: grid;
		align-items: center;
		padding: var(--padding--lv2);
	}

	/* ------------------------------
	    end_ConfirmationEmailSettingTables
	------------------------------ */
	/* ------------------------------
		start_pointHistoryTable
	------------------------------ */

	.pointHistoryTables {
		gap: unset;
	}

	.pointHistoryTables__heading {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: span 5;
		border: 1px solid var(--border-color);
		border-bottom: unset;
		background-color: var(--bg-color);
	}

	.pointHistoryTables__th {
		padding: var(--padding--lv2);
		color: rgba(0, 0, 0, 0.7);
        font-weight: var(--font-weight--bold);
        font-size: var(--font-size--s);
		text-align: center;

		&:not(:last-child) {
			border-right: 1px solid var(--border-color);
		}
	}

	.pointHistoryTable {
		grid-template-columns: subgrid;
		grid-column: span 5;

		&:not(:last-child) {
			border-bottom: unset;
		}
	}

	.pointHistoryTable__group {
		display: block;
		grid-template-columns: unset;
		grid-column: unset;

		&:not(:last-child) {
			border-bottom: unset;
			border-right: 1px solid var(--border-color);
		}

		dt {
			display: none;
		}
	}

	/* ------------------------------
		end_pointHistoryTable
	------------------------------ */
	/* ------------------------------
		start_skymarkSeat
	------------------------------ */

	/* start_シート情報 */

	.SkymarkSeatInfo {
		align-items: center;
		grid-template-columns: 1fr auto auto;
	}

	/* end_シート情報 */

	/* start_シート選択 */

	.SkymarkSeat {
		margin-left: calc((var(--skymarkSeat__gap) + 1.5em) * -1);
	}

	/* end_シート選択 */

	/* start_アイコンについて */

	.SkymarkSeatIcnExplanation__items {
		grid-template-columns: repeat(3, 1fr);
	}

	/* end_アイコンについて */

	/* ------------------------------
		end_skymarkSeat
	------------------------------ */
	/* ------------------------------
	    start_TravelGuideQR
	------------------------------ */

	.TravelGuideQR {
		grid-template-columns: repeat(2, 1fr);
		align-items: stretch;
	}

	.TravelGuideQR__group {
		align-content: start;
	}

	/* ------------------------------
    	end_TravelGuideQR
	------------------------------ */
	/* ------------------------------
		start_LocalRecommendTours
	------------------------------ */
	
	.LocalRecommendTours {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ------------------------------
		end_LocalRecommendTours
	------------------------------ */

	/*2026/3/10 ADD Hyron Ph.1顧客接点強化 同行者管理対応 START*/
	.Group_sms_select_type_anchor_link {
	display: none;
	align-items: start;
	width: 100%;
	gap: var(--margin--lv5);
	/*2026/3/10 ADD Hyron Ph.1顧客接点強化 同行者管理対応 End*/
	}
	/*2026/4/02 ADD Hyron Ph.1顧客接点強化 携帯番号準必須化対応 START*/
	.Telphone{
	  width: 150px;
      text-align: right;
	}
	/*2026/4/02 ADD Hyron Ph.1顧客接点強化 携帯番号準必須化対応 END*/
	/*2026/7/10 ADD Hyron Ph.1顧客接点強化 携帯番号準必須化対応 START*/
	.Telphone2{
	  width: 66px;
      text-align: right;
	}
	/*2026/7/10 ADD Hyron Ph.1顧客接点強化 携帯番号準必須化対応 END*/

}

@media(any-hover:hover) {
	.JsTabButton:hover {
		text-decoration: none;
	}
	/* ------------------------------
	    start_BankInitial
	------------------------------ */

	.BankInitial__group label:not(:has(input:checked, input:disabled)):hover {
		background-color: var(--active-color);
		text-decoration: underline;
	}

	/* ------------------------------
	    end_BankInitial
	------------------------------ */
	/* ------------------------------
		start_skymarkSeat
	------------------------------ */

	/* start_シート選択 */

	.SkymarkSeat__button:not([data-state="disabled"]) {
		transition: opacity .3s;

		&:hover {
			opacity: .7;
		}
	}

	/* end_シート選択 */

	/* ------------------------------
		end_skymarkSeat
	------------------------------ */
}

/*---------- cancellChargeDate 新旧画面の文言対応 No.453 hyrjiangcm add 2026.02.11 start ----------*/
.cancellChargeDate_body{
	display: flex;
	width: 80%;
	font-weight:bold;
	color:red;
	font-size: 15px;
	padding-left: 50px;
}

.cancellChargeDate_left{
	width: 260px;
	padding-right: 11px;
}

.cancellChargeDate_center{
	width: 30px;
	padding-right: 34px;
}

.cancellChargeDate_right{
	width: 200px;
}
/*---------- cancellChargeDate 新旧画面の文言対応 No.453 hyrjiangcm add 2026.02.11 end ----------*/

/* ------------------------------
    hyron add 2026.03.10 start
------------------------------ */
	.Group[data-column--pc="2-1"] {
		grid-template-columns: max-content 1fr;
	}
/* ------------------------------
    hyron add 2026.03.10 end
------------------------------ */
/* ------------------------------
    hyron add 2025.11.13 start
------------------------------ */
.NestTable__group[data-lv="3"] {
	display: grid;
	grid-template-columns: 2fr 2fr;
}

.NestTable__group[data-lv="3"] dt {
	border-right: 1px solid var(--border-color);
	color: rgba(0, 0, 0, 0.7);
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--s);
	padding: var(--padding--lv3) var(--padding--lv2);
	text-align: center;
}

.NestTable__group[data-lv="3"] dd {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--padding--lv3) var(--padding--lv2);
	text-align: center;
}

.NestTable__group[data-lv="3"] dd:not([data-type="price"]) {
	line-height: var(--line-height--narrow);
	text-align: left;
}

.NestTable__group[data-lv="3"] dd[data-type="price"] {
	color: var(--caution-color);
}
/* ------------------------------
    hyron add 2025.11.13 end
------------------------------ */
/* ------------------------------
    hyron add 2025.10.27 start
------------------------------ */
#ReservationSteps[data-kind="register"] {
	--columns: 4;
}
/* ------------------------------
    hyron add 2025.10.27 end
------------------------------ */

/* ------------------------------
    hyron add 2025.10.27 start
------------------------------ */
.Table[data-kind="hotelUsedFor4"] {
	td {
		font-size: var(--font-size--s);
		text-align: left;

		&:first-child ,
		&:nth-child(2) {
			width: 20%;
		},

                &:nth-child(3) {
			width: 35%;
		}
		&:last-child {
			width: 35%;
		}
	}
}

/* ------------------------------
    hyron add 2025.10.27 end
------------------------------ */