@charset "UTF-8";

/* ----------------------------------
 プラン選択 共通
---------------------------------- */
#app .list-item .pane-goods-separate { margin-bottom: 0 !important;}
#app .list-item .pane-goods-separate:has(.block-common-alert) {
    padding: 20px;
    color: #a94442;
    background-color: #f2dede;
    margin: 4px 0 0;
    gap: 0;
    box-shadow: none;
    border-radius: 0;
}
#app .list-item .pane-goods-separate:has(.block-common-alert) .block-common-alert {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    color: inherit;
}

/* ボタン */
#app .v-icon-btn:before { content: ''; position: absolute; top: -4px; bottom: -20px; right: -10px; left: -10px; z-index: 2;}
#app input[type="number"]::-webkit-inner-spin-button,
#app input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; -moz-appearance:textfield !important;}
#app button.gray,
#app button.gray::before,
#app button.gray::after { border: 1px solid #ccc !important; color: #888; background-color: #eee !important; cursor: default;}
#app .btn-primary { border: 0; background: linear-gradient(to bottom right, #C00A65 0%, #C00A1D 100%); color: #fff;}
#app .input-wrapper { display: flex; flex-direction: column;}
#app .input-wrapper .v-input--error { width: 80px;}
#app .block-variation { display: none;}

/* スピナー */
#app .spinner-wrapper { padding: 2em; text-align: center;}
#app .spinner { width: 40px; height: 40px; margin: 0 auto; border: 4px solid #ddd; border-top: 4px solid #333; border-radius: 50%; animation: spin 1s linear infinite;}

@keyframes spin {
	100% { transform: rotate(360deg);}
}

/* スライドダウンアニメーション */
#app .slide-down-enter-active,
#app .slide-down-leave-active { transition: all 0.3s ease; overflow: hidden;}
#app .slide-down-enter-from,
#app .slide-down-leave-to { max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; opacity: 0;}
#app .slide-down-enter-to,
#app .slide-down-leave-from { 
	max-height: 2000px; /* コンテンツの最大高さに応じて調整 */
	opacity: 1;
}

/* ----------------------------------
 プラン選択 各パーツ
---------------------------------- */
/* 見出し */
#app .list-item__center.level0 {
  margin: 0 0 12px;
  padding: 5px 12px;
  border-left: #C00A1D 4px solid;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6667;
  background: #F4F4F4;
}
#app .level0-ttl { margin: 10px 0; font-size: 15px; font-weight: 700;}
#app .block-goods-list__navi-slideside + .level0-ttl { margin-top: 30px;}

/* プランを選択 */
#app .block-goods-list__navi-slideside { display: block !important;}
#app .list-item--chevron + .list-item--chevron { margin-top: 4px;}
#app .list-item--chevron .level1 {
	width: 100%;
	min-height: 158px;
  padding: 24px 250px 24px 24px;
  margin: 0 0 32px;
  border-radius: 10px;
  display: flex;
	flex-direction: column;
  gap: 0;
  background: #FFFBED;
  box-shadow: none;
	position: relative;
	box-sizing: border-box;
	pointer-events: none;
}
#app .list-item--chevron .level1:has(.level1-image img) { padding: 24px 250px 24px 215px;}
#app .list-item--chevron .level1 .level1-image { width: 167px; height: 110px; position: absolute; top: 24px; left: 24px;}
#app .list-item--chevron .level1 .level1-image img { border-radius: 8px;}
#app .list-item--chevron .level1 .level1-name { margin: 0 0 15px; font-size: 18px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px 20px;}
#app .list-item--chevron .level1 .level1-name p { font-size: 18px; font-weight: 700;}
#app .list-item--chevron .level1 .level1-name .icon-box { display: flex; flex-wrap: wrap; gap: 4px;}
#app .list-item--chevron .level1 .level1-name .icon-box span { 
	padding: 2px 15px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #AFA01D;
}
#app .list-item--chevron .level1 .level1-desc { font-size: 14px; font-weight: 400;}
#app .list-item--chevron .level1 .level1-desc.is-close { max-height: 3em; overflow: hidden;}
#app .list-item--chevron .level1 .level1-desc li { font-size: 14px; font-weight: 400; line-height: 1.6;}
#app .list-item--chevron .level1 .level1-desc .minmile { display: none;}
#app .list-item--chevron .level1 .toggle-btn {
  padding: 10px 0 0;
  font-size: 14px;
  text-align: left;
  text-decoration: underline;
  color: #6FB4C3;
  cursor: pointer;
  pointer-events: auto;
}
#app .list-item--chevron .level1 .level1-button {
	width: 196px;
	height: 44px;
	padding: 5px 20px;
	border: #C00A1D 1px solid;
	border-radius: 44px;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	color: #C00A1D;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
	pointer-events: auto;
	cursor: pointer;
	transition: 0.3s;
	position: absolute;
	top: calc(50% - 22px);
	right: 24px;
}
#app .list-item--chevron .level1.minus .level1-button { border: #333 1px solid; color: #FFF; background: #333;}
#app .list-item--chevron.disabled .level1 .level1-button {
	border: #999 1px solid;
	color: #999;
	background: #f2f2f2;
	pointer-events: none;
	cursor: default;
}
#app .list-item--chevron .level1 .level1-button::after { content: '選択する';}
#app .list-item--chevron .level1.minus .level1-button::after { content: '選択を取り消す';}
#app .list-item--chevron.disabled .level1 .level1-button::after { content: '完売';}

/* プラン詳細 */
#app .level1-details { margin-top: 4px;}
#app .level1-details .pane-goods-separate { padding: 0; margin: 4px 0; gap: 0; box-shadow: none;}
#app .level1-details ul.list .list-item { padding: 0; margin: 0 0 30px; border: none; font-size: 14px;}
#app .level1-details ul.list .list-item .list-item__center { position: relative; flex-direction: column;}
#app .level1-details .package-detail-info-wrapper { width: 100%; padding: 0; margin: 0; position: relative;}
#app .level1-details .package-detail-info-wrapper:has(div),
#app .level1-details .package-detail-info-wrapper:has(dl) { width: 100%; padding: 24px; margin: 0 0 32px; border-radius: 10px; background: #FFFBED;}
#app .level1-details .package-detail-info-wrapper:has(dl) { padding: 9px 24px;}
#app .level1-details .block-package-detail-info { width: 100%; border-bottom: #EDE7D0 1px solid; display: flex; align-items: center; background-color: #FFFBED;}
#app .level1-details .block-package-detail-info:last-of-type { border-bottom: none;}
#app .level1-details .block-package-detail-info .red { color: #C00A1D;}
#app .level1-details .block-package-detail-info dt { width: 240px; padding: 15px 20px 15px 0; margin: 0; font-size: 14px; font-weight: bold; color: #000; box-sizing: border-box;}
#app .level1-details .block-package-detail-info dd { width: calc(100% - 240px); padding: 15px 0 15px 20px; margin: 0; box-sizing: border-box;}
#app .level1-details .block-package-detail-info dd .package-info-extension-table { background: #FFFBED;}
#app .level1-details .block-package-detail-info dd .package-info-extension-table td { padding: 0 20px 10px 0; background: #FFFBED;}
#app .level1-details .block-package-detail-info dd table { width: 100%; background-color: #FFF;}
#app .level1-details .block-package-detail-info dd table,
#app .level1-details .block-package-detail-info dd table td { border: none;}
#app .level1-details .block-package-detail-info dd table tr { display: flex;}
#app .level1-details .block-package-detail-info dd table td:first-child { flex-shrink: 0;}
#app .level1-details .block-package-detail-info dd table td:last-of-type { flex: 1;}

/* 利用日・オプション選択 */
#app .level1-details .pane-option-title { width: 100%; margin: 32px 0 15px; font-size: 15px; font-weight: 700;}
#app .level1-details .package-detail-info-wrapper + .pane-option-title { margin-top: 0;}
#app .level1-details .v-form .pane-goods-separate { display: flex; flex-wrap: wrap;}
#app .level1-details .v-form .pane-goods-separate .pane-goods-right-side { margin-left: auto;}

#app .block-total-required-miles { margin-left: 14px;}
#app .block-goods-detail-item-qty-info.gray { color: #888; cursor: default;}
#app .block-goods-detail-item-qty-info input.gray { border: 1px solid #ccc !important; color: #888; background-color: #eee !important; cursor: default;}

/* 日付を選択 */
#app .level1-details .pane-goods-separate:has(.v-row) { width: 100%; margin: 0;}
#app .level1-details .v-row { width: 100%; margin: 0;}
#app .level1-details .v-row .v-col-10 { max-width: 100%; flex: 0 0 100%; padding: 0; margin: 0;}
#app .level1-details .v-row .v-sheet { padding: 0 10px 0 19px; border-top: #DEDEDE 1px solid; border-left: #DEDEDE 1px solid; border-right: #DEDEDE 1px solid;}
#app .level1-details .v-row .v-sheet .v-toolbar-title { order: 1;}
#app .level1-details .v-row .v-sheet .v-btn { order: 2;}
#app .level1-details .v-row .v-sheet .v-toolbar-title { padding: 0; font-size: 18px; font-weight: 700; text-align: left !important;}
#app .level1-details .v-row .v-sheet .v-btn { border-radius: 0; box-shadow: none; color: #C00A1D;}
#app .level1-details .v-row .v-sheet .v-btn .v-btn__underlay { background: #FFF;}
#app .level1-details .v-row .v-sheet .v-btn.v-btn--disabled.v-btn--variant-elevated,
#app .level1-details .v-row .v-sheet .v-btn.v-btn--disabled.v-btn--variant-flat { color: #CCC;}
#app .level1-details .v-row .v-sheet .v-btn .v-ripple__animation { border-radius: 0;}
#app .level1-details .v-row .v-calendar-weekly { margin: 0; border: none;}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__head-weekday {
  min-height: 50px;
  margin: 0;
  border: none;
  font-size: 18px;
  font-weight: 700;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day { min-height: 70px; margin: 0; border: none;}
#app .level1-details .v-row .v-calendar-weekly { border-left: #DEDEDE 1px solid; border-right: #DEDEDE 1px solid; border-bottom: #DEDEDE 1px solid;}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day .soldout { content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 3;}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-outside:has(.soldout) { background-color: rgb(var(--v-theme-surface-light));}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day:not(.v-outside):has(.soldout) { background-color: rgb(var(--v-theme-surface-light));}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day .soldout > .nomile {
  content: '';
  position: absolute;
  top: calc(100% - 22.5px);
  left: calc(50% - 3px);
  z-index: 1;
}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day:has(.active) { background-color: rgb(146, 205, 220);}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day:not(.v-outside):has(.soldout) { background-color: rgb(var(--v-theme-surface-light));}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__head-weekday.v-past,
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__head-weekday.v-outside,
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-past,
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-outside { background: #FFF;}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day .v-icon-btn__content { color: #000;}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-past .v-icon-btn__content,
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-outside .v-icon-btn__content,
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day:has(.soldout) .v-icon-btn__content,
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day .nomile { color: #CCC;}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-past .nomile,
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-outside .nomile { opacity: 0;}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-present:hover .v-icon-btn__overlay { background-color: #000 !important; opacity: 0.2;}
#app .level1-details .v-row .v-calendar-weekly .v-calendar-weekly__day.v-future:not(.v-outside):hover .v-icon-btn__overlay { background-color: #CCC !important; opacity: 0.2;}
#app .level1-details .v-row .v-calendar-weekly__day-label .v-icon-btn { font-size: 15px; font-weight: 700;}
#app .level1-details .v-row .v-calendar .v-event-summary { font-size: 12px; font-weight: 400; text-align: center; color: #666;}
/*#app .level1-details .v-row .v-calendar .v-event-summary::after { content: '～';}*/
#app .level1-details .v-row-note { font-size: 12px;}

/* 条件を選択 */
#app .pane-block--title { margin: 0 0 10px; font-size: 12px; font-weight: 400; color: 000;}
#app .level1-details .pane-header { margin-bottom: 20px;}
#app .level1-details .pane-header .pane-header-button-wrap { display: flex; justify-content: flex-end; gap: 0 4px;}
#app .level1-details .pane-header:has(.pane-header-button-wrap) .pane-block--title { width: 300px; margin: 0;}
#app .level1-details .pane-header .pane-header-button-wrap { width: calc(100% - 320px); margin: 0 0 auto;}
#app .level1-details .pane-header.d-flex .v-btn {
	width: 134px;
	height: 36px;
	padding: 5px 10px;
	border: #000 1px solid;
	border-radius: 36px;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
	pointer-events: auto;
	cursor: pointer;
	transition: 0.3s;
	box-shadow: none;
}
#app .level1-details .pane-header.d-flex .v-btn:hover { background: #CCC;}
#app .level1-details .pane-header.d-flex .v-btn:hover .v-btn__overlay { opacity: 0.1;}
#app .level1-details .pane-header.d-flex .v-btn {
	width: 134px;
	height: 36px;
	padding: 5px 10px;
	border: #000 1px solid;
	border-radius: 36px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
	pointer-events: auto;
	cursor: pointer;
	transition: 0.3s;
	box-shadow: none;
}
#app .level1-details .pane-header.d-flex .v-btn.v-btn--cancel { border: #F5F5F5 1px solid; color: #808080; background: #F5F5F5;}

/* 開始時間 */
#app .v-container.v-locale--is-ltr .v-col.v-col-6 { padding: 0;}
#app .v-container.v-locale--is-ltr .v-col.v-col-6 > div:not(.v-input) { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #000;}
#app .v-container.v-locale--is-ltr .v-col.v-col-6 .v-input__details { padding: 0; min-height: auto;}
#app .v-container.v-locale--is-ltr .v-col.v-col-6 .v-messages { min-height: auto;}
#app .v-container.v-locale--is-ltr .v-col.v-col-6 .v-messages .v-messages__message { margin-top: 10px;}

/* 券種 */
#app .v-container.v-locale--is-ltr { padding: 10px 0 1px; margin: 10px 0 0; border-top: #DEDEDE 1px solid;}
#app .v-container.v-locale--is-ltr .d-flex { padding: 0 0 0 90px; position: relative;}
#app .v-container.v-locale--is-ltr .d-flex .me-5 { margin: 0 !important; font-size: 15px; font-weight: 700; color: #000; position: absolute; top: 18px; left: 0;}
#app .v-container.v-locale--is-ltr .d-flex .v-input--error { display: none;}
#app .v-container.v-locale--is-ltr .d-flex .v-input--error:has(.v-messages div) { display: block;}
#app .v-container.v-locale--is-ltr:has(.block-goods-detail-item-type) .d-flex .me-5 { top: 10px;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-type { padding: 0 0 0 90px; margin: 10px 0; display: flex; justify-content: flex-end; gap: 10px 20px;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-type label { font-size: 14px;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-type label input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  width: 20px;
  height: 20px;
  margin: -2px 5px 0 0;
  border: #333 1px solid;
  border-radius: 20px;
  outline: none;
  background: #FFF;
  position: relative;
  transition: 0.3s;
}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-type label input[type="radio"]:before {
  content: '';
  width: 8px;
  height: 8px;
  margin: 0;
  border: none;
  border-radius: 8px;
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  display: block;
  background: #FFF;
  box-sizing: border-box;
  transition: 0.3s;
}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-type label input[type="radio"]:checked { border-color: #C00A1D;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-type label input[type="radio"]:checked:before { background: #C00A1D;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-type label input[type="radio"]:checked + label { color: #C00A1D; font-weight: 700;}

/* 数量 */
#app .v-container.v-locale--is-ltr .block-goods-detail-item-qty-info { padding: 0 0 0 90px; margin: 10px 0;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-qty-info dt:not(.block-cart--goods-detail-item-price-inner) { margin: 0 0 0 auto;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-qty-info dd { margin: 0 0 0 20px;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-qty-info dd .v-input__details { padding: 0; min-height: auto;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-qty-info dd .v-input__details .v-messages { min-height: auto;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-qty-info dd .v-input__details .v-messages .v-messages__message { margin-top: 10px;}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-qty-info dd input[name$="qty"] {
  width: 80px;
  height: 40px;
  border: 1px solid #808080;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
}
#app .v-container.v-locale--is-ltr .block-goods-detail-item-qty-info .block-cart--goods-detail-item-price-inner { position: relative; display: flex;}

/* 合計必要マイル数 */
#app .block-goods-price-total { margin: 10px 0 0; padding: 20px 0 0; border-top: #DEDEDE 1px solid; display: flex; justify-content: space-between; align-items: center;}
#app .block-goods-price-total .block-goods-price-text {
	width: calc(100% - 222px);
	height: 44px;
	padding: 0 0 0 19px;
	margin: 0;
	border: #DEDEDE 1px solid;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.0;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #F0F0F0;
	box-sizing: border-box;
}
#app .block-goods-price-total .block-goods-price-text .block-total-required-miles {
	width: calc(100% - 140px);
	height: 42px;
	padding: 0 19px;
	margin: 0 0 0 19px;
	border-left: #DEDEDE 1px solid;
	font-size: 15px;
	font-weight: 700;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: #FFF;
}
#app .block-goods-price-total .block-goods-button-wrap { width: 206px; margin: 0;}
#app .block-goods-price-total .block-goods-button-wrap .block-add-cart { width: 100%;}
#app .block-goods-price-total .block-goods-button-wrap .block-add-cart .block-add-cart--btn {
	width: 100%;
	height: 44px;
	padding: 0;
	margin: 0;
	line-height: 1.0;
	border-radius: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}
#app .v-container.v-locale--is-ltr .selected-date-message {
  padding: 0 0 0 90px;
  margin: 0 0;
  display: block;
}
#app .v-container.v-locale--is-ltr .d-flex:has(+ .selected-date-message) .me-5 {
  top: 0;
}
#app .v-container.v-locale--is-ltr .selected-date-message-info {
  font-size: 12px !important;
}
.selected-date-message {
	height: 20px;
}
.selected-date-message-info {
  color: #C00A1D;
}