@charset "utf-8";

.display-PC {
    display: block;
}
.display-SP {
    display: none;
}

/* parts */
ul,ol {
    padding-left: 0;
    margin: 0;
}
li {
    list-style: none;
}
dl {
    margin-bottom: 0;
}
dd,dt {
    line-height: inherit;
    font-weight: inherit;
}
a {
    color: var(--color-text-link);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    cursor: pointer;
}
a:focus {
    outline: none;
}
p{
    margin: 0;
}
section {
    margin-bottom: 40px;
}
button {
    font-family: inherit;
}
pre {
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    color: var(--color-black);
}
input,
input[type="text"],
input[type="tel"],
input[type="password"] {
    width: 100%;
}
input, select {
    margin: 0;
    padding: 6px;
    border: 1px solid var(--color-border-gray);
    border-radius: 3px;
    font-family: inherit;
    font-size: 16px;
    background: var(--color-white);
    color: var(--color-black);
}
input::-webkit-credentials-auto-fill-button {
    margin-right: 30px;
}

textarea:disabled:-ms-input-placeholder,
input:disabled:-ms-input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #aaaaaa;
}
textarea:disabled::placeholder,
input:disabled::placeholder,
input::placeholder,
textarea::placeholder {
    color: #aaaaaa;
}
input:disabled,select:disabled,
textarea:disabled {
    background-color:#eef0f3;
    border: 1px solid #aaaaaa;
    color: #aaaaaa;
    cursor: auto;
}
select option:disabled{
  background: #eef0f3;
}
input::placeholder {
  color: #aaaaaa;
}
::-ms-reveal {
    display: none;
}
label {
    font-weight: normal;
}
select {
    min-width: 60px;
    height: 36px;
    padding: 5px;
    vertical-align: middle;
    cursor: pointer;
}
select option:disabled {
    background: #eef0f3;
}
input:disabled, select:disabled, textarea:disabled {
    background-color: #eef0f3;
    border: 1px solid var(--color-border-gray);
    color: var(--color-text-gray);
    cursor: auto;
}
textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 5px;
    background-color: var(--color-white);
    border: 1px solid var(--color-checked-gray);
    border-radius: 3px;
    font-size: 16px;
    font-family: inherit;
}

.icon-required {
    padding: 0 8px;
    font-size: var(--size-font-s);
    color: var(--color-red);
    background: transparent;
}
.detail-link {
    padding: 0 0 0 4px;
}
.detail-link::before {
    content: "(";
    padding: 0 2px 0 0;
    color: var(--color-black);
}
.detail-link::after {
    content: ")";
    padding: 0 0 0 2px;
    color: var(--color-black);
}
.detail-link-room {
    padding: 0 0 0 32px;
}
.layout-agreement-link {
    display: flex;
    justify-content: center;
}
.link-decoration-horizontal {
    position: relative;
    margin-left: 10px;
    padding-left: 10px;
}
.link-decoration-horizontal::before {
    content: "";
    position: absolute;
        margin-top: -11px;
    width: 0;
    height: 0;
    top: 50%;
    left: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid var(--color-text-link);
    border-right: none;
    transform: translateY(0.6rem);
}
.delete-button {
    color: var(--color-red);
    border: none;
    background:none;
    cursor: pointer;
}
.delete-button:hover {
    color: var(--color-red);
    opacity: var(--color-opacity-button-hover);
}
.tag-tobacco {
    margin-left: 8px;
    padding: 0 0 0 16px;
    font-size: var(--size-font-s);
    font-weight: normal;
}
.no-smoking {
    background: url(../images/directin-s4/icon_nosmoke.png) left center no-repeat;
    background-size: 14px 14px;
}
.smoking {
    background: url(../images/directin-s4/icon_smoking.png) left center no-repeat;
    background-size: 14px 14px;
}
.tag-meal {
    margin-left: 8px;
    padding: 0 0 0 16px;
    font-size: var(--size-font-s);
    background: url(../images/directin-s4/icon_meal.png) left center no-repeat;
    background-size: 14px 14px;
    font-weight: normal;
}
input.input-s {
    width: 200px;
}
input.input-xs {
    width: 90px;
}

/* input checkbox */
.input-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin-top: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
}
.input-checkbox + .input-label-text {
  display: inline-block;
  position: relative;
  padding-left: 20px;
  line-height: 1.7rem;
  cursor: pointer;
}
.input-checkbox + .input-label-text::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 9px);
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border-gray);
  border-radius: 2px;
}
.input-checkbox:checked + .input-label-text {
  font-weight: bold;
}
.input-checkbox:checked + .input-label-text::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 11px);
  left: 5px;
  width: 8px;
  height: 15px;
  border-bottom: 3px solid var(--color-checked-gray);
  border-right: 3px solid var(--color-checked-gray);
  transform: rotate(40deg);
}
.input-checkbox:focus + .input-label-text::before {
  border-color: #1589ee;
  box-shadow: 0 0 2px #4d90fe;
}

/* input radio */
.input-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
}
.input-radio + .input-label-text {
    position: relative;
    margin-right: 24px;
    padding-left: 24px;
    line-height: 2.5rem;
    cursor: pointer;
}
.input-radio:focus + .input-label-text::before {
    border-color: #1589ee;
    border-radius: 50%;
    box-shadow: 0 0 2px #4d90fe;
  }
.input-radio + .input-label-text::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 9px);
    left: 0;
    width: 18px;
    height: 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border-gray);
    border-radius: 50%;
}
.input-radio:checked  + .input-label-text {
    font-weight: bold;
 }
.input-radio:checked + .input-label-text::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left: 4px;
    width: 10px;
    height: 10px;
    background: var(--color-checked-gray);
    border-radius: 50%;
}
.input-radio:disabled + .input-label-text {
    color: var(--color-text-gray);
    cursor: auto;
}
.input-radio:disabled + .input-label-text::before {
    background: var(--color-bg-gray);
    border: 1px solid var(--color-border-gray);
}
select + span {
    margin: 0 4px;
}

/* form layout */
.form-layout {
    display: flex;
    margin-bottom: 24px;
}
.form-layout dt {
    width: 30%;
    font-weight: normal;
}
.form-layout dd {
    width: 70%;
}
.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}
.form-input-horizontal,
.form-input-name {
    display: flex;
    align-items: center;
}
.form-input-horizontal > *,
.form-input-name > * {
    flex-grow: 1;
}
.form-input-horizontal > * + *,
.form-input-name > * + * {
    margin-left: 4px;
}
.form-input-vertical {
    display: flex;
    flex-direction: column;
}
.form-input-vertical > * {
    margin-bottom: 4px;
}
.form-input-vertical > *:last-child {
    margin-bottom: 0;
}
.form-input-hyphen > * {
    display: flex;
    align-items: center;
}
.form-input-hyphen > * + *::before {
    content: "-";
    margin-right: 4px;
}
.form-input-no-hyphen::before {
    content: "";
}
.form-label-text {
    margin-bottom: 0;
    font-size: var(--size-font-s);
}
.form-help-text {
    margin: 2px 0 0 0;
    color: var(--color-black);
}
.form-info-text {
    margin-top: 2px;
    color: var(--color-text-gray);
    font-size: var(--size-font-s);
}
.form-info-text::before {
    content: "※";
}
.form-borer {
    padding: 0 0 24px;
    border-bottom: 1px solid var(--color-border-lightgray);
}
.layout-indent {
    margin-left: 24px;
}
/* form required */
input:invalid,
select:invalid,
textarea:invalid,
input[type=checkbox]:invalid + .input-label-text::before,
input[type=radio]:invalid + .input-label-text::before {
    background-color: var(--color-bg-red);
}

/* form error */
.form-help-text.error {
    color: var(--color-red)
}
.error:invalid,
input[type=checkbox].error:invalid + .input-label-text::before,
input[type=radio].error:invalid + .input-label-text::before {
    border: 2px solid var(--color-red);
}

/* heading */
h2 {
    margin: 0 0 20px;
    font-size: var(--size-font-2xl);
    line-height: 1.45;
    font-weight: normal;
}
h3 {
    margin: 0 0 10px;
    padding: 0;
    font-size: var(--size-font-2xl);
    line-height: 1.45;
    font-weight: normal;
}
h4 {
    margin-bottom: 10px;
    font-size: var(--size-font-xl);
    font-weight: normal;
}
h5 {
    margin-bottom: 10px;
    font-size: var(--size-font-xl);
    font-weight: normal;
}
.tab_wrap {
    border-bottom: 1px solid var(--color-border-gray);
    margin-bottom: 16px;
}
.tab_area {
    margin-bottom: -1px;
    display: flex;
}
.tab-label {
    width: 244px;
    margin-left: 16px;
    font-size: 1rem;
    font-weight: normal;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px 8px 0 0;
    background: var(--color-bg-gray);
}

/* tab */
.tab-label:nth-of-type(1) {
    margin-left: 0;
}
.tab-label.active {
    background: var(--color-white);
    font-weight: bold;
    pointer-events: none;
    border-bottom: 1px solid var(--color-white);
}
.tab-label:hover {
    opacity: var(--color-opacity-button-hover);
}
.tab-label a {
    display: block;
    padding: 12px 0;
    text-align: center;
    color: var(--color-black);
    cursor: pointer;
}
.tab-label a:hover,
.tab-label a:focus {
    text-decoration: none;
}

/* text style */
.text-small {
    font-size: var(--size-font-s);
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.text-bold {
    font-weight: bold;
}
.text-red {
    color: var(--color-red);
    font-weight: bold;
}
.text-gold {
    color: var(--color-member);
    font-weight: bold;
}

/* box style */
.box-text {
    margin-bottom: 20px;
}
.box-border {
    margin: 10px 0 20px;
    padding: 10px;
    border: 1px solid var(--color-border-lightgray);
}
.box-border-rounded-corners {
    margin: 24px 0 32px;
    padding: 16px;
    border-radius: 8px;
    text-align: left;
    border: 1px solid var(--color-border-lightgray);
}
.box-shadow {
    width: 100%;
    margin: 24px 0 0;
    padding: 16px 32px;
    border: 1px solid var(--color-border-lightgray);
    border-radius: 8px;
    box-shadow: 0 0 5px 2px rgba(80, 80, 90, 0.1);
    text-align: center;
}
ul.box-important li {
    margin: 0 10px;
    padding: 5px 10px;
    border: 1px solid var(--color-red);
    border-radius: 3px;
    color: #d00000;
    font-weight: bold;
    margin: 15px 0;
}
.box-not-available {
    margin: 10px 0;
    padding: 150px 20px 40px;
    background: url(../images/directin-s4/icon_noplan.png) center top 65px no-repeat;
    text-align: center;
}
.divider {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-gray);
}

/* layout */
.layout-horizontal-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.layout-horizontal-box > * {
    flex-grow: 1;
}
.layout-horizontal-box > * + * {
    margin-left: 8px;
}
.layout-horizontal-button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.layout-horizontal-button > * {
    width: 210px;
}
.layout-horizontal-button > * + * {
    margin-left: 8px;
}
.layout-right-button {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.layout-right-button a,
.layout-right-button button {
    white-space: nowrap;
    margin-right: 10px;
}

.layout-vertical-box {
    display: flex;
    flex-direction: column;
}
.layout-vertical-box > * {
    flex-grow: 1;
}
.layout-vertical-box > * + * {
    margin-top: 8px;
}
.layout-vertical-button {
    display: flex;
    flex-direction: column;
}
.layout-vertical-button > * {
    width: 210px;
}
.layout-vertical-button > * + * {
    margin-top: 8px;
}

.layout-alignment-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.layout-alignment-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.layout-alignment-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-guide-text-bg {
    margin: 8px 0;
    padding: 8px;
    color: var(--color-black);
    background: var(--color-bg-gray);
}
.layout-text-basic {
    margin: 8px 0 16px;
}
.layout-text-wide {
    margin: 50px 0;
}

/* button */
.button {
    min-height: 47px;
    margin: 0 auto;
    padding: 12px 16px;
    display: block;
    font-size: inherit;
    font-weight: normal;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}
.button:hover {
    opacity: var(--color-opacity-button-hover);
    text-decoration: none;
}
.button-basic {
    width: var(--size-button-basic);
    min-height: 47px;
}
.button-variable {
    width: 100%;
    min-height: 47px;
}
.button-s {
    width: auto;
    min-width: 90px;
    min-height: unset;
    margin: 0;
    padding: 8px;
    display: inline-block;
}
.button-xs {
    width: auto;
    min-height: unset;
    margin: 0 0 0 4px;
    padding: 4px;
    display: inline-block;
    font-size: var(--size-font-s);
}
.primary_button {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    box-shadow: 0px 2px 3px 0 rgba(0, 0, 0, .1);
}
.secondary_button {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.button-error {
    background-color: var(--color-red);
    color: var(--color-white);
    border: none;
}
.button-disabled {
    opacity: var(--color-opacity-button-disabled);
}
.button.button-disabled:hover {
    opacity: var(--color-opacity-button-disabled);
    cursor: default;
}
.button-wrap {
    margin: 16px 0;
}
.button-wrap li {
    margin-bottom: 16px;
}

/* plan type chips */
.icon-chip-box {
    display: inline-block;
}
.plan-type-chips {
    margin-right: 8px;
    padding: 1px 8px;
    font-size: var(--size-font-s);
    background: var(--color-white);
    border: 1px solid;
    line-height: 16px;
}
.chips-member {
    color: var(--color-member);
    border-color: var(--color-member);
}
.chips-company {
    color: var(--color-company);
    border-color: var(--color-company);
}
.chips-ytravel {
    color: var(--color-ytravel);
    border-color: var(--color-ytravel);
}
.chips-dp {
    color: var(--color-dp);
    border-color: var(--color-dp);
}
.reserve-status-chips {
    width: auto;
    min-width: 120px;
    padding: 2px 8px;
    display: inline-block;
    border: 1px solid var(--color-border-gray);
    border-radius: 15px;
    text-align: center;
}
.st-canceled,
.st-stayed {
    background: var(--color-bg-gray);
}
.chip_ID_wrap {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chip_ID_wrap .layout-reserve-chip .icon-chip-box {
    margin-bottom: 0;
}
.layout-reserve-chip .icon-chip-box {
    margin-right: 16px;
}

/* pagetop */
.pagetop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    z-index: 5;
}
.pagetop a {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 4px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.pagetop a::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 15px;
    border: solid 10px transparent;
    border-bottom: solid 15px var(--color-white);
}

/* header */
.header_wrap {
    width: 100%;
    min-height: 60px;
    background: var(--color-white);
    box-shadow: 0 0 5px 2px rgba(80, 80, 90, 0.1);
}
.header_wrap_inner {
    width: var(--size-layout-basic);
    margin: 0 auto;
    padding: 16px 38px 16px 0;
    display: flex;
    justify-content: space-between;
}
.facility_name {
    line-height: 1.2;
    font-weight: normal;
    font-size: var(--size-font-2xl);
}
.facility_name a {
    color: var(--color-black);
}
.facility_name a:hover {
    text-decoration: none;
}

/* footer */
.footer_wrap {
    width: 100%;
    min-width: var(--size-layout-basic);
    background: var(--color-bg-gray);
    line-height: 1.2;
    color: var(--color-black);
}
.footer_wrap_inner {
    width: var(--size-layout-basic);
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.footer_wrap_inner .footer_address {
    width: 300px;
}
.footer_wrap_inner .japanese_only {
    display: none;
}
.siteseal {
    width: var(--size-layout-basic);
    margin: 0 auto 5px;
}

/* reserve number */
.ID_wrap {
    margin: 16px 0 10px;
    padding: 10px 0;
    border-radius: 8px;
    background: var(--color-bg-gray);
}
.layout-ID-box + .layout-ID-box {
    margin-top: 16px;
}
.ID-reserve {
    font-size: var(--size-font-s);
}
.ID-receipt {
    display: flex;
    justify-content: center;
}
.ID-title {
    margin: 0 8px 0 0;
}
.ID-receipt-number {
    font-weight: bold;
}

/* notice */
.notice-box {
    margin-top: 24px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-gray);
    border-radius: 16px;
}
.notice-box h3 {
    padding: 0 0 0 24px;
    font-size: 1.35rem;
    font-weight: normal;
    background: url(../images/directin-s4/icon_hotelinfo.png) left top 6px no-repeat;
    background-size: 18px 18px;
    white-space: nowrap;
    margin: 0 16px 0 0;
}
.notice-main-text {
    width: 580px;
}
.notice-main-text.long {
    position: relative;
}
.notice-main-text.long::before {
    content: "";
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(243, 243, 243, 1) 10%, rgba(243, 243, 243, 0));
    display: block;
    z-index: 1;
}

/* reserve overview */
.layout-reserve_wrap {
    margin-bottom: 8px;
    padding: 16px;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
}
.layout-reserve-box {
    display: flex;
    justify-content: space-between;
}
.layout-reserve-box > * {
    margin-right: 24px;
}
.layout-reserve-box > *:nth-last-of-type(1) {
    margin-right: 0;
}
.layout-status-overview_wrap {
    display: flex;
}
.layout-reserve-action {
    width: 210px;
}
.overview-item + .overview-item {
    margin-top: 8px;
}
.item-hotelname {
    margin-bottom: 16px;
    font-weight: bold;
}
.item-nights {
    margin-left: 8px;
}
.item-plan-name {
    display: inline-block;
}
.plan-name-style {
    display: inline;
}
.item-rooms,
.item-guest-type {
    display: inline-block;
}
.item-rooms::after {
    content: "/";
    margin: 0 4px 0 8px;
}
.item-guest-adults {
    padding-right: 8px;
}
.room-info_wrap {
    padding: 8px 16px;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.item-representative {
    margin-top: 16px;
}
.count-number {
    margin-bottom: 16px;
    font-size: var(--size-font-l);
    font-weight: bold;
}
.blank-space {
    margin-right: 8px;
}
.no-icon .item-plan-name {
    background-image: none;
    padding: 0;
}

/* reserve details */
.reserve-details {
    margin-bottom: 16px;
}
.layout-summary-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.layout-summary-button-DP {
    text-align: right;
}
.layout-horizontal-reserve-details {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
.layout-horizontal-reserve-details > dt {
    width: 25%;
}
.layout-horizontal-reserve-details > dd {
    width: 75%;
}
.layout-vertical-reserve-details {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}
.layout-lodger-breakdown {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}
.layout-lodger-change {
    padding: 8px 0;
    border-top: 1px solid var(--color-border-gray);
}
.layout-lodger-change:nth-last-of-type(1) {
    border-bottom: 1px solid var(--color-border-gray);
}
.layout-lodger-change_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.layout-lodger-change .value-readonly {
    padding: 0 0 0 8px;
}
.item-lodger-type {
    margin-right: 8px;
}
.item-number-of-lodgers {
    margin-right: 16px;
}
.item-gender {
    margin-right: 8px;
    white-space: nowrap;
}
.item-gender:nth-last-of-type(1) {
    margin-right: 0;
}
.item-gender select {
    margin: 0 0 0 4px;
}

/* cancellation-policy */
.layout-reserve-details-box {
    margin-top: 16px;
    padding: 8px 0;
    border-top: 1px solid var(--color-border-gray);
}
.item-cancellation-policy-text {
    margin-bottom: 8px;
}
.note {
    margin-left: 1.8rem;
    text-indent: -1.8rem;
}

/* expand */
.layout-expand-box {
    margin-top: 8px;
}

/* question */
.question_wrap {
    margin-bottom: 24px;
}

.item-question-title,
.item-question-comment {
    margin-bottom: 8px;
}

/* option */
.layout-option-box {
    margin: 0 0 8px;
    padding: 8px 16px;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
}
.option-content {
    margin: 0 0 8px;
}
.option-text-image_wrap {
    margin: 6px 0 0;
    display: flex;
    justify-content: space-between;
}
.item-option-image {
    width: calc(160px + 40px);
    min-width: calc(160px + 40px);
    margin: 0 0 0 10px;
}
.image-slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.image-slider-container .splide__arrow {
    top: 50%;
    transform: translateY(-50%);
    background: none;
    width: 30px;
    height: 30px;
}
.image-slider-container .splide__arrow--prev {
    left: -10px;
}
.image-slider-container .splide__arrow--next {
    right: -10px;
}
.image-slider-container .splide__slide {
    display: flex;
    justify-content: center;
    height: 120px;
    aspect-ratio: 4 / 3;
}
.image-slider-container .image-slider-image {
    width: 100%;
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    background: var(--color-bg-gray);
}
.image-slider-container .splide__pagination__page.is-active {
    background: var(--color-text-link);
}
.option-input_per-day {
    margin: 0 0 8px;
}
.modal .image-slider-container .splide__slide {
    height: auto;
    max-height: calc(615px - 48px);
}
.modal .image-slider-container .splide__arrow--prev {
    left: -24px;
}
.modal .image-slider-container .splide__arrow--next {
    right: -24px;
}
.subtotal {
    text-align: right;
}
.subtotal-line {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-gray);
}
.total {
    margin-top: 10px;
    padding: 10px 16px 10px 0;
    border-radius: 8px;
    background: var(--color-bg-gray);
    text-align: right;
    font-weight: normal;
}
.value {
    font-weight: bold;
    font-size: var(--size-font-xl);
}
.tax-text {
    text-align: right;
    font-size: var(--size-font-s);
    font-weight: normal;
}
.item-option_per-day {
    margin-bottom: 4px;
    padding: 6px 8px;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
}
.item-option_per-reservation {
    margin-bottom: 4px;
    padding: 4px 8px;
    text-align: right;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
}
.item-option-orders {
    text-align: right;
}
.item-option-orders > * + * {
    margin-top: 4px;
}

/* coupon */
.coupon-content {
    display: flex;
    position: relative;
    flex-direction: column;
}
.coupon-content-item {
    display: flex;
    position: relative;
}
.coupon_wrap .coupon-content {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--color-border-lightgray);
    border-radius: 8px;
    box-shadow: 0 0 5px 2px rgba(80, 80, 90, 0.1);
}
.coupon-caution {
    display: flex;
    justify-content: center;
    margin: 10px 10px;
    padding: 10px 10px;
    font-size: 0.86rem;
}
.coupon-caution li {
    list-style: disc;
}
.coupon-unable {
    width: 100%;
    height: 100%;;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--size-font-xl);
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 2;
}
.coupon-acquire {
    width: 10%;
    min-width: 140px;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.coupon-acquired {
    font-size: 1.35rem;
}
.item-coupon-overview {
    width: 20%;
    min-width: 152px;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
}
.item-coupon-detail {
    flex-grow: 1;
    padding: 0 20px 0 0;
}
.item-coupon-detail dl {
    align-items: flex-start;
}
.item-coupon-detail dt {
    white-space: nowrap;
}
.item-coupon-detail .read-more-toggle {
    margin-bottom: 16px;
}
.item-coupon-text {
    margin-bottom: 16px;
}
.item-coupon-detail-conditions {
    margin-bottom: 16px;
}
.item-coupon-detail-conditions dt {
    font-weight: bold;
}
.item-coupon-detail-conditions li {
    margin-left: 16px;
    list-style: disc;
}
.layout-input-coupon {
    display: flex;
    align-items: center;
}
.layout-acquisition-coupon {
    margin-top: 24px;
}
.layout-acquisition-coupon .button {
    color: var(--color-member);
    border: 1px solid var(--color-member);
    box-shadow: 0px 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.layout-input-point input {
    margin: 0 4px;
}

/* bill */
.layout-bill_wrap {
    width: 400px;
}
.bill_par-reserve {
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid var(--color-border-gray);
}
.layout-bill-item {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.layout-bill-item-inner {
    width: 100%;
}
.bill-divider {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border-gray);
}
.item-paymentMethods {
    margin-right: 16px;
    white-space: nowrap;
}
.layout-special-notes {
    margin: 16px 0;
}
.special-notes-title {
    font-weight: bold;
}

.layout-resave-item {
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
}
.layout-resave-item dt {
    margin-right: 16px;
    position: relative;
    white-space: nowrap;
}
.layout-resave-item dt::after {
    content: ":";
    display: inline;
    position: absolute;
    top: 0;
    right: -10px;
}
.layout-resave-item dd {
    flex-grow: 1;
}

/* charge details */
.charge-title {
    margin-bottom: 8px;
    font-size: var(--size-font-l);
}
.item-room-name {
    margin-left: 8px;
}
.charge_wrap {
    margin: 0 0 8px;
    padding: 8px 16px;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
}
.charge_per-day {
    margin: 8px 0;
    display: flex;
    justify-content: space-between;
}
.charge_breakdown {
    text-align: right;
}

/* Number of people and room change */
.input-room-guest_wrap {
    margin: 10px auto 20px;
    padding: 10px 50px;
    border: 1px solid var(--color-border-gray);
}
.input-room-guest_wrap select {
    margin: 0 8px;
}
.input-room-list,
.input-guest-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 16px;
}
.input-room-list {
    border-bottom: 1px solid var(--color-border-gray);
}
.input-guest-list {
    border: 1px solid var(--color-border-gray);
    background: var(--color-bg-gray);
}
.input-room-list li,
.input-guest-list li {
    width: 45%;
    padding: 8px 5px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    word-break: normal;
}
.input-guest-list .item-lodger-type {
    width: calc(100% - 90px);
}
.add-room-list {
    padding: 8px 0;
    border-top: 1px solid var(--color-border-gray);
    display: flex;
    justify-content: space-between;
}
.add-room-list:nth-last-of-type(1) {
    border-bottom: 1px solid var(--color-border-gray);
}
.add-room-result {
    padding: 16px 0;
    border-top: 1px solid var(--color-border-gray);
    border-bottom: 1px solid var(--color-border-gray);
    text-align: center;
}
.add-room_wrap {
    display: flex;
    justify-content: flex-start;
}
.add-room-image {
    width: 100px;
    height: 75px;
    background: var(--color-bg-gray);
}
.add-room-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.add-room-overview,
.add-room-action {
    margin-left: 16px;
}
.add-room-overview > * {
    margin-bottom: 8px;
}
.add-room-tag_wrap > * + * {
    margin-left: 8px;
}
.add-room-action {
    display: flex;
    align-items: center;
}
.add-room-action .button {
    margin-left: 8px;
}

.tag-lodger {
    padding: 0 0 0 16px;
    background: url(../images/directin-s4/icon_persons.png) left center no-repeat;
    background-size: 12px 12px;
    display: inline-block;
}
.tag-roomWidth {
    padding: 0 0 0 16px;
    background: url(../images/directin-s4/icon_roomsize.png) left calc(50% + 1px) no-repeat;
    background-size: 12px 12px;
    display: inline-block;
}
.tag-bedWidth {
    padding: 0 0 0 16px;
    background: url(../images/directin-s4/icon_bed.png) left center no-repeat;
    background-size: 12px 12px;
    display: inline-block;
}
.item-room-text {
    width: 400px;
    padding: 4px 8px;
    background: var(--color-bg-gray);
    position: relative;
}
.item-room-text .read-more-toggle {
    font-size: var(--size-font-s);
    position: absolute;
    bottom: 4px;
    right: 8px;
}

/* room detail wrap */
.room-details_wrap {
    margin-bottom: 8px;
    padding: 16px;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
}
.room-details_wrap_delete {
    margin-bottom: 8px;
    padding: 16px;
    background: var(--color-bg-gray);
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
}
.room-details_wrap_delete label:has(input:disabled) {
    display: none;
}
.room-details_wrap_delete label:has(input:checked:disabled) {
    display: block;
}
.room-details_wrap_delete label:has(input:checked:disabled) .input-label-text {
    margin-bottom: 0;
}

/* schedule */
.layout-schedule {
    display: flex;
    align-items: center;
}
.layout-CICO-date_wrap > * + * {
    margin-left: 4px;
}
.layout-CICO-date_wrap input {
    width: 200px;
}
.layout-CICO-date_wrap input.range {
    width: 280px;
}

/* payment */
.notice_via-card {
    margin-top: 8px;
    padding: 8px;
    overflow-y: scroll;
    height: 10em;
    border: 1px solid var(--color-border-gray);
}
.payment-details {
    margin-bottom: 24px;
}
.payment-description {
    white-space: pre-wrap;
    margin-left: 20px;
}
.tooltip_wrap.display-PC {
    display: inline-block;
    position: relative;
}
.tooltip_wrap.display-SP {
    display: none;
}
.tooltip-icon {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    color: var(--color-text-gray);
    font-weight: bold;
    border: 2px solid var(--color-text-gray);
    border-radius: 14px;
    background: var(--color-white);
    cursor: pointer;
}
.tooltip-text {
    width: 300px;
    padding: 8px;
    font-size: 0.86rem;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    box-shadow: 0 0 5px 2px rgba(80, 80, 90, 0.1);
    position: absolute;
    top: 30px;
    right: -138px;
    display: none;
}
.tooltip_wrap .tooltip-icon:hover + .tooltip-text {
    display: block;
}
.layout-modal-card {
    width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    /*---- root ----*/
    :root {
        --size-layout-basic: 100%;
        --size-button-basic: 100%;
        --size-layout-s: 100%;
        --size-layout-xs: 100%;
    }

    /*---- common ----*/
    /* all */
    .main {
        margin: 20px 0;
        padding: 0 16px;
    }
    .display-PC {
        display: none;
    }
    .display-SP {
        display: block;
    }
    .footer_wrap {
        padding: 10px 10px 20px;
    }
    .footer_wrap_inner {
        width: 100%;
        flex-wrap: wrap;
        padding: 0;
    }
    .footer_address {
        margin: 10px 0 0;
    }
    .layout-vertical-button {
        flex-direction: row;
    }
    .layout-vertical-button > * + * {
        margin: 0 0 0 8px;
    }
    .layout-horizontal-button {
        display: flex;
        flex-direction: column;
    }
    .layout-horizontal-button > * {
        width: 100%;
    }
    .layout-horizontal-button > * + * {
        margin: 8px 0 0;
    }
    .layout-horizontal-box {
        flex-direction: column;
    }
    .detail-link-room {
        padding: 0 0 0 16px;
        font-size: var(--size-font-s);
        white-space: nowrap;
    }

    /* form layout */
    .form-layout {
        flex-direction: column;
    }
    .form-layout dt {
        margin-bottom: 2px;
        font-weight: bold;
    }
    .form-layout dt,
    .form-layout dd {
        width: 100%;
    }

    /* notice */
    .notice-box {
        display: block;
        padding: 0;
        background: none;
    }
    .notice-box h3 {
        padding: 0;
        background: none;
    }
    .notice-main-text {
        width: 100%;
    }
    .notice-main-text.long::before {
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0));
    }

    /* reserve overview */
    .room-info_wrap {
        padding: 8px;
    }

    /* reserve details */
    .reserve-details {
        margin-bottom: 24px;
    }
    .layout-horizontal-reserve-details {
        flex-direction: column;
    }
    .layout-reserve_inner {
        display: flex;
        flex-direction: column;
    }
    .layout-reserve-box {
        display: contents;
        -webkit-display: contents;
        -moz-display: contents;
    }
    .layout-status-overview_wrap {
        flex-direction: column;
    }
    .layout-reserve-action {
        width: auto;
        order: 1;
        display: flex;
        flex-direction: column;
    }
    .layout-summary-button {
        justify-content: center;
    }
    .layout-summary-button-DP {
        text-align: center;
    }
    .layout-reserve-box .ID-reserve {
        order: 2;
        margin-bottom: 8px;
    }
    .layout-reserve-box .layout-vertical-button {
        order: 1;
    }
    .layout-horizontal-reserve-details > dt {
        margin-bottom: 8px;
        font-weight: bold;
    }
    .layout-horizontal-reserve-details > dt,
    .layout-horizontal-reserve-details > dd {
        width: auto;
    }
    .layout-horizontal-reserve-details {
        margin-bottom: 24px;
    }
    .layout-vertical-reserve-details {
        margin-bottom: 32px;
    }
    .layout-vertical-reserve-details:nth-last-of-type(1)  {
        margin-bottom: 0;
    }

    .layout-lodger-change_inner {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .layout-lodger-change_inner {
        align-items: flex-start;
        flex-direction: column;
    }
    .layout-lodger-type {
        margin-bottom: 8px;
    }
    .item-gender {
        white-space: normal;
    }

    /* cancellation-policy */
    .layout-reserve-details-box {
        margin-top: 0;
    }

    /* option */
    .option-text-image_wrap {
        flex-direction: column;
    }
    .item-option-text {
        order: 2;
    }
    .item-option-image {
        order: 1;
        margin: 0 auto;
    }

    /* sns */
    .sns-button_wrap {
        display: block;
    }
    .sns-button_wrap a {
        width: 100%;
    }
    .sns-button_wrap .yahoo a {
        font-size: var(--size-font-basic);
    }
    .sns-button_wrap > *:nth-child(odd) {
        margin-right: 0;
    }

    /* bill */
    .layout-bill_wrap {
        width: 100%;
    }

    .layout-right-button button {
        position: relative;
        top: -30px;
        right: 0px;
    }

    /* coupon */
    .coupon-content {
        flex-direction: column;
    }
    .coupon-content-item {
        flex-direction: column;
    }
    .item-coupon-overview {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        align-items: start;
        width: 100%;
        margin-bottom: 24px;
        padding: 0;
    }
    .coupon-unable {
        width: 100%;
        height: 100%;
        padding: 20px;
        top: 0;
        left: 0;
    }

    /* Number of people and room change */
    .input-room-guest_wrap {
        padding: 10px;
    }
    .input-guest-list {
        flex-direction: column;
    }
    .input-guest-list li {
        width: 100%;
    }
    .add-room-list {
        flex-direction: column;
    }
    .add-room_wrap {
        flex-wrap: wrap;
    }
    .add-room-overview {
        display: contents;
        -webkit-display: contents;
        -moz-display: contents;
    }
    .add-room-overview_inner {
        margin-left: 16px;
        max-width: 157px;
        font-size: var(--size-font-s);
    }
    .item-room-text {
        width: 100%;
    }
    .add-room-tag_wrap > * {
        display: block;
    }
    .add-room-tag_wrap > * + * {
        margin: 0;
    }
    .add-room-action {
        justify-content: flex-end;
    }

    /* schedule */
    .layout-CICO-date_wrap {
        border: 1px solid var(--color-border-gray);
        border-radius: 3px;
        display: flex;
        align-items: center;
    }
    .layout-CICO-date_wrap input {
        width: 130px;
        border: none;
        font-size: 16px;
        letter-spacing: -0.05em;
    }
    .layout-CICO-date_wrap input.range {
        width: 260px;
    }

    /* payment */
    .tooltip_wrap.display-PC {
        display: none;
    }
    .tooltip_wrap.display-SP {
        display: inline-block;
        position: relative;
    }
    .tooltip-icon:hover {
        text-decoration: none;
    }

    /* tab */
    .tab-label {
        margin-left: 0;
        border-radius: 0;
    }
    .tab-label.active {
        border-bottom: 1px solid var(--color-white);
    }
    .tab-label a {
        padding: 8px 0;
    }
    .tab-label + .tab-label {
        border-left: none;
    }

    .layout-modal-card {
        width: 100%;
    }
/* end / @media screen and (max-width: 768px) */
}