@charset "utf-8";

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
@import url("./analysis.css");

body, sub, sup { position: relative; } a:active, a:hover, input:focus { outline: 0; } abbr, acronym, fieldset, img, input, legend { border: 0; } legend, td, th { padding: 0; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } abbr[title] { border-bottom: 1px dotted; } b, optgroup, strong { font-weight: 700; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } pre, textarea { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } select { -moz-appearance: none; -webkit-appearance: none; appearance: none; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: 400; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; } q:after, q:before { content: ""; }

a,
img {
  vertical-align: top;
  display: inline-block;
}
html {
  font-size: 62.5%;
  line-height: 1.75;
}
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
}
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
a,
a:hover {
  text-decoration: none;
}


/* ===========================================
共通
=========================================== */
body {
  font-size: 1.2rem;
  background-color: #f4f8fa;
}
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
a {
  color: #000;
}
.pcOnly {
  display: block;
}
.spOnly {
  display: none;
}
.l-column {
  width: 960px;
  margin: 0 auto;
}
.centerTxt {
  text-align: center;
}
select::-ms-expand {
  display: none;
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }
  .l-column {
    width: 100%;
  }
  input,
  textarea {
    -webkit-appearance: none;
    border-radius: 0;
  }
}

.wrap {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.article {
  height: 100%;
  padding: 22px 22px 120px;
}
.content {
  position: relative;
}
.invisibleBox {
  opacity: 0;
  pointer-events: none;
}
.is-hide {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .wrap {
    /*min-height: 0;*/
  }
  .article {
    padding: 18px 10px 50px;
  }
}


/*共通*/
.noteTit {
  margin-left: 23px;
  color: #333;
  font-size: 1.2rem;
  font-weight: normal;
  display: inline-block;
}
.noteTit {
  margin-left: 23px;
  color: #333;
  font-size: 1.2rem;
  font-weight: normal;
  display: inline-block;
}
.noteTit span {
  font-weight: bold;
}
.noteTit a {
  color: #0096dc;
  text-decoration: underline;
}
.noteTit a:hover {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .noteTit {
    margin-left: 0;
  }
}

input:excludeTeamId {
  background: lime;
}

.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
.d-inlineBlock {
  display: inline-block !important;
}
.d-flex {
  display: flex !important;
}
.d-tableRow {
  display: table-row !important;
}
.flexw-w {
  flex-wrap: wrap !important;
}
.flexs-0 {
  flex-shrink: 0 !important;
}
.flexd-r {
  flex-direction: row !important;
}
.flexd-rr {
  flex-direction: row-reverse !important;
}
.flexd-c {
  flex-direction: column !important;
}
.flexd-cr {
  flex-direction: column-reverse !important;
}
.jc-fs {
  justify-content: flex-start !important;
}
.jc-c {
  justify-content: center !important;
}
.jc-fe {
  justify-content: flex-end !important;
}
.jc-sb {
  justify-content: space-between !important;
}
.ai-c {
  align-items: center !important;
}
.ai-fs {
  align-items: flex-start !important;
}
.ai-fe {
  align-items: flex-end !important;
}
@media screen and (max-width: 768px) {
  .d-mb-flex {
    display: flex !important;
  }
  .flexw-mb-w {
    flex-wrap: wrap !important;
  }
  .flexd-mb-c {
    flex-direction: column !important;
  }
  .jc-mb-c {
    justify-content: center !important;
  }
  .jc-mb-fe {
    justify-content: flex-end !important;
  }
  .ai-mb-c {
    align-items: center !important;
  }
  .ai-mb-fe {
    align-items: flex-end !important;
  }
}
.translate0 {
  transform: translate(0) !important;
}
.visibility-hidden {
  visibility: hidden;
}

.w-auto {
  width: auto !important;
}
.w-20p {
  width: 20% !important;
}
.w-30p {
  width: 30% !important;
}
.w-40p {
  width: 40% !important;
}
.w-48p {
  width: 48% !important;
}
.w-50p {
  width: 50% !important;
}
.w-70p {
  width: 70% !important;
}
.w-80p {
  width: 80% !important;
}
.w-90p {
  width: 90% !important;
}
.w-100p {
  width: 100% !important;
}
.w-0 {
  width: 0 !important;
}
.w-20 {
  width: 20px !important;
}
.w-50 {
  width: 50px !important;
}
.w-60 {
  width: 60px !important;
}
.w-80 {
  width: 80px !important;
}
.w-100 {
  width: 100px !important;
}
.w-120 {
  width: 120px !important;
}
.w-130 {
  width: 130px !important;
}
.w-150 {
  width: 150px !important;
}
.w-200 {
  width: 200px !important;
}
.w-250 {
  width: 250px !important;
}
.w-300 {
  width: 300px !important;
}
.w-350 {
  width: 350px !important;
}
.w-400 {
  width: 400px !important;
}
.w-450 {
  width: 450px !important;
}
.w-500 {
  width: 500px !important;
}
.w-550 {
  width: 550px !important;
}
.w-650 {
  width: 650px !important;
}
.w-700 {
  width: 700px !important;
}

.h-auto {
  height: auto !important;
}
.h-10 {
  height: 10px !important;
}
.h-30 {
  height: 30px !important;
}
.h-40 {
  height: 40px !important;
}
.h-500 {
  height: 500px !important;
}
.h-100p {
  height: 100% !important;
}

.min-w-auto {
  min-width: auto !important;
}
.min-h-0 {
  min-height: 0 !important;
}

.max-w-510 {
  max-width: 510px !important;
}
.max-w-200 {
  max-width: 200px !important;
}
.max-w-100p {
  max-width: 100% !important;
}

@media screen and (max-width: 768px) {
  .w-mb-0 {
    width: 0 !important;
  }
  .w-mb-40 {
    width: 40px !important;
  }
  .w-mb-50 {
    width: 50px !important;
  }
  .w-mb-80 {
    width: 80px !important;
  }
  .w-mb-100 {
    width: 100px !important;
  }
  .w-mb-150 {
    width: 150px !important;
  }
  .w-mb-200 {
    width: 200px !important;
  }
  .w-mb-300 {
    width: 300px !important;
  }
  .w-mb-100p {
    width: 100% !important;
  }
  .w-mb-auto {
    width: auto !important;
  }
  .min-w-mb-100 {
    min-width: 100px !important;
  }
}


.m-auto {
  margin: auto !important;
}
.m-0 {
  margin: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-3 {
  margin-top: 3px !important
}
.mt-5 {
  margin-top: 5px !important
}
.mt-10 {
  margin-top: 10px !important;
}
.mt-15 {
  margin-top: 15px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mt-25 {
  margin-top: 25px !important;
}
.mt-30 {
  margin-top: 30px !important;
}
.mt-35 {
  margin-top: 35px !important;
}
.mt-50 {
  margin-top: 50px !important;
}
.mt--10 {
  margin-top: -10px !important;
}
.mb--20 {
  margin-bottom: -20px !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-2 {
  margin-bottom: 2px !important;
}
.mb-5 {
  margin-bottom: 5px !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-30 {
  margin-bottom: 30px !important;
}
.mb-40 {
  margin-bottom: 40px !important;
}
.mb-70 {
  margin-bottom: 70px !important;
}
.mr-auto {
  margin-right: auto !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mr-5 {
  margin-right: 5px !important;
}
.mr-10 {
  margin-right: 10px !important;
}
.mr-15 {
  margin-right: 15px !important;
}
.mr-30 {
  margin-right: 30px !important;
}
.ml-auto {
  margin-left: auto !important;
}
.ml-5 {
  margin-left: 5px !important;
}
.ml-0 {
  margin-left: 0 !important;
}
.ml-10 {
  margin-left: 10px !important;
}
.ml-20 {
  margin-left: 20px !important;
}

@media screen and (max-width: 768px) {
  .mt-mb-10 {
    margin-top: 10px !important;
  }
  .mt-mb-20 {
    margin-top: 20px !important;
  }
  .mr-mb-0 {
    margin-right: 0 !important;
  }
  .mr-mb-auto {
    margin-right: auto !important;
  }
  .mr-mb-10 {
    margin-right: 10px !important;
  }
  .ml-mb-0 {
    margin-left: 0 !important;
  }
  .ml-mb-10 {
    margin-left: 10px !important;
  }
  .ml-mb-auto {
    margin-left: auto !important;
  }
  .mb-mb-0 {
    margin-bottom: 0 !important;
  }
  .mb-mb-10 {
    margin-bottom: 10px !important;
  }
  .mb-mb-20 {
    margin-bottom: 20px !important;
  }
}

.p-0 {
  padding: 0 !important;
}
.p-20 {
  padding: 20px !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pt-5 {
  padding-top: 5px !important;
}
.pt-10 {
  padding-top: 10px !important;
}
.px-10 {
  padding: 10px 0 !important;
}
.py-10 {
  padding: 10px 0 !important;
}
.pr-30 {
  padding-right: 30px !important;
}
.pt-30 {
  padding-top: 30px !important;
}
.pr-40 {
  padding-right: 40px !important;
}
.pl-5 {
  padding-left: 5px !important;
}
.pl-10 {
  padding-left: 10px !important;
}
.pl-30 {
  padding-left: 30px !important;
}
.pl-40 {
  padding-left: 40px !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-10 {
  padding-bottom: 10px !important;
}
@media screen and (max-width: 768px) {
  .pt-mb-20 {
    padding-top: 20px !important;
  }
  .pl-mb-20 {
    padding-left: 20px !important;
  }
  .pb-mb-20 {
    padding-bottom: 20px !important;
  }
}

.l-0 {
  left: 0 !important;
}

.fz-12 {
  font-size: 1.2rem !important;
}
.fz-13 {
  font-size: 1.3rem !important;
}
.fz-14 {
  font-size: 1.4rem !important;
}
.fz-15 {
  font-size: 1.5rem !important;
}
.fz-16 {
  font-size: 1.6rem !important;
}
.fz-20 {
  font-size: 2rem !important;
}
@media screen and (max-width: 768px) {
  .fz-mb-12 {
    font-size: 12px !important;
  }
}

.fw-n {
  font-weight: normal !important;
}
.fw-b {
  font-weight: bold !important;
}
.ta-r {
  text-align: right !important;
}
.ta-c {
  text-align: center !important;
}
.ta-l {
  text-align: left !important;
}
.lh-12 {
  line-height: 1.2 !important;
}
.wb-ba {
  word-break: break-all !important;
}
.ws-nw {
  white-space: nowrap !important;
}
.textOverFlow-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hangingIndent {
  padding-left: 1em !important;
  text-indent: -1em !important;
}
.tableLayout-fixed {
  table-layout: fixed !important;
}

.border-none {
  border: none !important;
}
.bt-0 {
  border-top: none !important;
}
.bb-0 {
  border-bottom: 0 !important;
}
.b-gray {
  border: 1px solid #acbbc3 !important;
}
.bt-ccc {
  border-top: 1px solid #ccc !important;
}
.bb-ccc {
  border-top: 1px solid #ccc !important;
}
.borderRadius-5 {
  border-radius: 5px;
}
.bl-C6C6C6 {
  border-left: 1px solid #C6C6C6 !important;
}
.border-707070 {
  border: 1px solid #707070 !important;
}

@media screen and (max-width: 768px) {
  .bl-mb-none {
    border-left: none !important;
  }
  .bt-mb-C6C6C6 {
    border-top: 1px solid #C6C6C6 !important;
  }
}

.va-t {
  vertical-align: top !important;
}

.position-static {
  position: static !important;
}
.position-relative {
  position: relative !important;
}
.z-100 {
  z-index: 100 !important;
}
.background-color-transparent {
  background-color: transparent !important;
}
.background-color-fff {
  background-color: #fff !important;
}
.cursor-pointer {
  cursor: pointer;
}
.pointerEvents-none {
  pointer-events: none !important;
}

@media screen and (max-width: 768px) {
  .noteTit {
    margin-left: 0;
  }
}

.ofi {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;";
}
.loadingLayer {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 1000;
}
.alertBox {
  width: 100%;
  max-width: 500px;
  height: 150px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #7ec8f2;
  box-shadow: 0 3px 8px rgba(78, 78, 78, .33);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  display: none;
  transform: translate(-50%, -50%);
}
.alertBox .inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .alertBox {
    max-width: 80%;
  }
}

.tooltipWrap {
  display: inline-block;
  position: relative;
  padding-right: 20px;
}
.tooltipIcon {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.tooltipIcon:after {
  content: "?";
  width: 18px;
  height: 17px;
  padding-bottom: 1px;
  color: #fff !important;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none !important;
  background-color: #999;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}
.tooltip {
  width: 370px;
  padding: 10px;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  display: none;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 102;
}
.tooltip .inner {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f4f8fc;
}
.tooltip:before,
.tooltip:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid #fff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  left: 25px;
  bottom: -18px;
  z-index: 11;
}
.tooltip:after {
  border-top: 20px solid #ccc;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  bottom: -20px;
  z-index: 10;
}
.tooltip.is-active {
  display: block;
}
.tooltipInModal {
  top: -70px;
  left: 231px;
}
.js-tooltipInModal:after {
  width: 18px;
  height: 18px;
  padding-left: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 768px) {
  .tooltipIcon:after {
    padding: 1px 0 0;
  }
  .tooltip {
    width: 95%;
    min-height: 100px;
    text-align: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .tooltip:before,
  .tooltip:after {
    content: normal;
  }
  .tooltipInModal {
    width: 280px;
    top: -110px;
    left: 0;
    transform: translateX(0);
  }
  .js-tooltipInModal:after {
    width: 17px;
    height: 17px;
    padding-left: 1px;
    padding-bottom: 1px;
  }
}

/* 新機能追加ツールチップ */
.newFeatureTooltipWrap {
  height: 1px;
  position: relative;
  z-index: 10;
  pointer-events: none;
}
.newFeatureTooltip {
  width: 236px;
  padding: 13px 12px 18px 11px;
  font-size: 1.2rem;
  line-height: 1.25;
  border-radius: 7px;
  display: inline-block;
  position: absolute;
  bottom: calc(100% + -10px);
  left: 12px;
  z-index: 10;
  background: url(../img/common/bg_tooltip_t.png) no-repeat 0 0 / contain;
  opacity: 0;
  visibility: hidden;
  transition: .5s;
}
.newFeatureTooltip.is-active {
  opacity: 1;
  visibility: visible;
}
.newFeatureTooltip:before {
  content: "";
  width: 236px;
  height: calc(100% - 27px);
  position: absolute;
  top: 15px;
  left: 0;
  z-index: 1;
  background: url(../img/common/bg_tooltip_c.png) repeat-y top center / contain;
}
.newFeatureTooltip:after {
  content: "";
  width: 236px;
  height: 27px;
  position: absolute;
  bottom: -15px;
  left: 0;
  z-index: 1;
  background: url(../img/common/bg_tooltip_b.png) no-repeat top center / contain;
}
.newFeatureTooltipContent {
  display: flex;
  position: relative;
  z-index: 5;
}
.newFeatureTooltipContent svg {
  margin-right: 6px;
  flex-shrink: 0;
}

.calendarSlotToggle {
  min-width: 40px;
  min-height: 27px;
  position: relative;
  border-width: 0px;
  border-radius: 3px;
  /* background: #F05194 url(../img/common/ico_cross_white.svg) no-repeat center / 13px auto; */
  box-shadow: 0px 3px #A2A2A2;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.calendarSlotToggle:active {
  box-shadow: none;
  bottom: -3px
}
.calendarSlotToggle:checked {
  background: #4FBCED url(../img/common/ico_circle_white.svg) no-repeat center / 16px auto;
  background-color: #4FBCED;
}

/* Tri-state visual classes for button usage */
.calendarSlotToggle.is-ng {
  background: #F05194 url(../img/common/ico_cross_white.svg) no-repeat center / 13px auto;
}
.calendarSlotToggle.is-ok {
  background: #4FBCED url(../img/common/ico_circle_white.svg) no-repeat center / 16px auto;
}
.calendarSlotToggle.is-triangle {
  background-color: #F0A650; /* caution-like color */
}
.calendarSlotToggle.is-triangle:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
}

/* 表示設定 */
.js-viewSettingTable .is-hideColumn {
  display: none;
}

.linkTxt {
  color: #0096dc;
  text-decoration: underline;
}
.linkTxt:hover {
  text-decoration: none;
}
.linkTxtHoverUnderlink {
  color: #0096dc;
}
.linkTxtHoverUnderlink:hover {
  text-decoration: underline;
}

/*テーブルソート*/
.js-sortableColumn {
  cursor: pointer;
}
.js-sortableColumn .inner {
  padding-right: 15px;
}
.js-sortableColumn .inner:before,
.js-sortableColumn .inner:after {
  content: "";
  background-color: #b5b5b5;
  width: 8px;
  height: 5px;
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  position: absolute;
  right: 7px;
}
.js-sortableColumn .inner:before {
  top: 11px;
}
.js-sortableColumn .inner:after {
  top: 18px;
  transform: rotate(-180deg);
}
.js-sortableColumn.asc .inner:before {
  background-color: #555;
}
.js-sortableColumn.desc .inner:after {
  background-color: #555;
}
.alwaysScrollTable {
  width: 1200px;
}

/* ボタン */
.btn {
  color: #0096dc;
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #50bdf0;
  border-radius: 4px;
  background-color: #fff;
  transition: .3s;
}
.btn:hover,
.btn.active {
  color: #fff;
  background-color: #50bdf0;
}
.btnS {
  padding: 0 10px;
  font-size: 1.4rem;
  font-weight: normal;
  border-radius: 2px;
  display: inline-flex;
}

/* 表示設定ボタン */
.btnViewSetting .btn {
  padding-left: 26px;
  position: relative;
}
.btnViewSetting .btn svg {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
  transition: .3s;
}
.btnViewSetting .btn:hover path {
  fill: #fff;
}
.reservation.team .headArea .btnViewSetting {
  display: none;
}

.btnCell {
  text-align: right;
}
.btnCell a {
  min-width: 54px;
  min-height: 20px;
  padding: 1px 5px;
  margin-left: auto;
  color: #0096dc;
  font-size: 1rem;
  font-weight: normal;
  text-decoration: none !important;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  background-color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.btnCell a:hover {
  color: #fff;
  background-color: #50bdf0;
}
.btnCaution {
  width: auto;
  min-height: 26px;
  margin: 3px 0 0;
  padding: 2px 5px 2px;
  color: #ff81e7;
  font-size: 1.4rem;
  border: 1px solid #ff81e7;
  border-radius: 2px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.btnCaution:hover {
  color: #fff;
  background-color: #ff81e7;
}

.btnBox {
  width: 100%;
  height: 100%;
  margin: 0 0 0 10px;
  padding: 0 0 1px;
  font-size: 1.2rem;
  border-radius: 2px;
  outline-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.btnLerge {
  min-width: 250px;
  min-height: 42px;
}

.btnGreen {
  color: #fff;
  font-weight: bold;
  border: 1px solid #7cd123;
  background-color: #7cd123;
}
.btnGreen:hover {
  color: #7cd123;
  background-color: #fff;
}
.btnGreenReverse {
  color: #7cd123;
  border: 1px solid #7cd123;
  background-color: #fff;
}
.btnGreenReverse:hover {
  color: #fff;
  background-color: #7cd123;
}
.btnBlue {
  color: #50bdf0;
  font-weight: bold;
  border: 1px solid #50bdf0;
  background-color: #fff;
}
.btnBlue:hover {
  color: #fff;
  background-color: #50bdf0;
}
.btnBlueReversal {
  color: #fff !important;
  font-weight: bold !important;
  border: 1px solid #fff !important;
  background-color: #50bdf0 !important;
}
.btnBlueReversal:hover {
  color: #50bdf0 !important;
  border: 1px solid #50bdf0 !important;
  background-color: #fff !important;
}

/* .content内白背景ブロック */
.contentBlock {
  position: relative;
}
.contentBlock > .inner {
  padding: 20px 21px;
  color: #333;
  border-radius: 5px 5px 0 0;
  background-color: #fff;
  position: relative;
}
.contentBlockTitBox {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.contentBlock table {
  width: 100%;
  font-size: 1.4rem;
}
.contentBlock tr {
  border-bottom: 1px solid #e2e2e2;
}
.contentBlock tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}
.contentBlock thead th:not(:first-child) {
  padding: 5px 5px 10px;
  font-size: 1.2rem;
  font-weight: bold;
}
.contentBlock tbody td:not(:first-child) {
  height: 40px;
  padding: 5px;
}

.contentBox + .contentBox {
  margin-top: 40px;
}
.contentBoxTit {
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 1px solid #707070;
}
.contentBox .txt {
  font-size: 1.2em;
}

/* アコーディオン */
.accordionTit {
  padding-right: 20px;
  font-size: 1.6rem;
  font-weight: bold;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: .3s;
}
.accordionTit svg {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 4px;
  display: block;
  pointer-events: none;
}
.accordionContent {
  display: none;
}
.accordionBlock.is-active {
  cursor: default;
}
.accordionTit.is-active,
.accordionTit:hover {
  color: #0096dc;
}
/* .accordionTit.is-active svg:after {
  transform: rotate(180deg);
} */
.accordionTit.is-active svg .expandLine49,
.accordionTit.is-active svg .expandLine51 {
  fill: #50bdf0;
  stroke: #50bdf0;
}
.contentBlock .accordionContent {
  margin-top: 15px;
}

/* 設定アイコン */
.configBox {
  width: 43px;
  height: 43px;
  padding: 50px 20px 20px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  overflow: hidden;
  transition: .3s;
}
.configBox.is-active {
  width: 110px;
  height: auto;
  background-color: #50bdf0;
}
.configBox .js-config {
  width: 23px;
  height: 23px;
  background: url(../img/common/ico_config.png) no-repeat center top /cover;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: .3s;
  cursor: pointer;
}
.configBox .js-config:hover {
  opacity: .7;
}
.configBox.is-active .js-config {
  background-position: center bottom;
}
.configBox .list {
  width: 100%;
  text-align: center;
  display: none;
}
.configBox.is-active .list {
  display: block;
}
.configBox .list li + li {
  margin-top: 10px;
}
.configBox .list a {
  color: #fff;
  font-size: 1.4rem;
  white-space: nowrap;
}
.configBox .list a:hover {
  text-decoration: underline;
}

/* 詳細モーダル内configBox */
.modalShowDetail .configBox {
  top: 20px;
  right: 20px;
}
.modalShowDetail .readonlyElement.checkbox:not(.is-active):checked + label:before {
  background-color: #dedede !important;
}

.editLink {
  padding-top: 1px;
  font-size: 1.4rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.editLink .editIcon {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
}
.editLink .editIcon img {
  padding-left: 5px;
}

.accordionTit .editLink a {
  padding-left: 5px;
  transition: .3s;
}
.accordionTit.is-active .editLink a,
.accordionTit:hover .editLink a {
  color: #0096dc;
}

.readonlyElement {
  border-color: #dedede !important;
  pointer-events: none !important;
}
.readonlyElement + label {
  pointer-events: none !important;
}
.readonlyElement + label:before,
.readonlyElement + label:after {
  border-color: #dedede !important;
}
.readonlyElement + label:after {
  background-color: #dedede !important;
}
.btn.readonlyElement {
  pointer-events: none !important;
  color: #989999 !important;
  border-color: #989999 !important;
  background-color: #fff !important;
}
.deleteTxt.readonlyElement {
  display: none;
}
.readonlyElement.is-active {
  border-color: #50bdf0 !important;
  pointer-events: all !important;
}
.readonlyElement.is-active + label {
  pointer-events: all !important;
}
.readonlyElement.is-active + label:before,
.readonlyElement.is-active + label:after {
  border-color: #50bdf0 !important;
}
.readonlyElement.is-active + label:after {
  background-color: #50bdf0 !important;
}
.btn.readonlyElement.is-active {
  pointer-events: all !important;
  color: #fff !important;
  border-color: #999 !important;
  background-color: #7cd123 !important;
}
.btn.readonlyElement.is-active:hover {
  color: #7cd123 !important;
  background-color: #fff !important;
}
.deleteTxt.readonlyElement.is-active {
  display: block;
}

.titleBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cssAccordion .cssAccordionToggle {
  display: none;
}
.cssAccordion .cssAccordionLabel,
.cssAccordion .cssAccordionContent {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.cssAccordion .cssAccordionLabel {
  margin-top: 3px;
  color: #555;
  cursor: pointer;
  font-size: 1.2rem;
  text-decoration: underline;
  position: relative;
}
.cssAccordion .cssAccordionLabel:hover {
  text-decoration: none;
}
.cssAccordion .cssAccordionLabel:before {
  content: '\958b\304f';
}
.cssAccordion .cssAccordionLabel svg {
  width: 15px;
  height: 15px;
  position: absolute;
  top: -1px;
  right: -20px;
}
.cssAccordion .cssAccordionContent {
	height: 0;
	overflow: hidden;
  opacity: 0;
  transition: .3s;
}
.cssAccordion .cssAccordionToggle:checked + .cssAccordionLabel:before {
  content: '\9589\3058\308b';
}
.cssAccordion .cssAccordionToggle:checked + .cssAccordionLabel + .cssAccordionContent {
	height: auto;
  padding-top: 10px;
  margin-bottom: -2px;
  opacity: 1;
}
.cssAccordion .cssAccordionToggle:checked + .cssAccordionLabel svg .expandLine49,
.cssAccordion .cssAccordionToggle:checked + .cssAccordionLabel svg .expandLine51 {
  fill: #50bdf0;
  stroke: #50bdf0;
}

.highlightDate {
  padding: 2px 5px 1px;
  color: #fff;
  border-radius: .5em;
  white-space: nowrap;
}
.highlightDate.primary {
  background-color: #50bdf0;
}
.highlightDate.secondary {
  background-color: #f0a650;
}

/* ===========================================
ヘッダー
=========================================== */
.header {
  background-color: #50bdf0;
  z-index: 12;
}
.header .inner {
  width: 100%;
  padding: 0 22px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.header .log {
  margin: 2px auto 0 0;
}
.header .log a {
  transition: .3s;
}
.header .log a:hover {
  opacity: .8;
}
.header .log img {
  width: auto;
  height: 27px;
  margin-top: -4px;
}
.header .shopInfo {
  margin-top: 3px;
  margin-right: auto;
  color: #fff;
  font-size: 1rem;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .header .gnavWrap {
    display: block !important;
    min-width: 0;
  }
}
.header .gNav {
  height: 100%;
}
.header .list {
  height: 100%;
  display: flex;
  align-items: center;
}
.header .list li {
  width: 90px;
}
.header .list a {
  width: 100%;
  height: 100%;
  padding: 8px 0 2px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  transition: .3s;
}
.header .list a:hover,
.header .list .active a {
  background-color: rgba(255, 255, 255, .3);
}
.master .header .list a {
  white-space: nowrap;
}
.header .list img {
  width: auto;
  height: 24px;
  margin-bottom: 1px;
}
.header .gNavOverlay {
  display: none;
}
.header .subNav {
  position: relative;
  z-index: 1;
  background-color: #dbe8ed;
}
.header .subNav .inner {
  min-height: 36px;
  padding: 7px 22px 8px;
}
.header .subNav .list {
  margin-left: auto;
}
.header .subNav li {
  width: auto;
  padding: 0 5px;
  color: #555;
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1;
  position: relative;
}
.header .subNav li + li:before {
  content: "";
  width: 1px;
  height: 100%;
  margin-top: 1px;
  background-color: #555;
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
}
.header .subNav a {
  padding: 0;
  color: #555;
  font-size: 1.1rem;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.header .subNav a:after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #555;
  position: absolute;
  bottom: -1px;
  left: 0;
  display: block;
}
.header .subNav a:hover {
  background-color: transparent;
  opacity: 1;
}
.header .subNav a:hover:after {
  display: none;
}
.header .guideLink {
  position: relative;
  transition: .3s;
  flex-shrink: 0;
}
.header .guideLink a {
  padding-left: 24px;
}
.header .guideLink a:after {
  content: normal;
}
.header .guideLink a span {
  padding-top: 2px;
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: left;
  text-decoration: underline;
}
.header .guideLink:hover a span {
  text-decoration: none;
}
.header .guideLink:before {
  content: "?";
  width: 18px;
  height: 18px;
  padding-top: 1px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  background-color: #7cd123;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .guideLink.attention:before {
  content: url(/common/img/common/gear.svg);
  height: 13px;
  padding-top: 5px;
  background-color: #F08A8A;
}
/*メモエリア*/
.memoArea {
  margin: 0 0 12px;
  display: flex;
word-break: break-all;
}
.memoArea.is_disabled {
  pointer-events: none;
}
.week .memoArea,
.month .memoArea {
  margin-top: 0;
}
.memoArea.active {
  padding: 20px;
  background-color: #fff;
}
.memoArea .ico {
  width: 30px;
  height: 26px;
  margin-right: 5px;
  flex-shrink: 0;
}
.memoArea .ico a {
  width: 100%;
  height: 100%;
  padding-top: 6px;
  display: flex;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  transition: .3s;
  overflow: hidden;
}
.memoArea .ico a:hover {
  background-color: #50bdf0;
}
.memoArea .ico a:hover img {
  margin-top: -23px;
}
.memoArea .body {
  padding-top: 3px;
  margin-left: 15px;
  font-size: 1.2rem;
  line-height: 1.5;
  word-break: break-all;
  overflow-wrap: break-word;
  line-break: anywhere;
}
.memoBody textarea {
  width: 100%;
  min-height: 140px;
  padding: 10px;
  font-size: 1.4rem;
  vertical-align: top;
}
.memoWrap + .btnSubmit {
  width: 126px;
  height: 33px;
  margin: 20px auto 0;
}
.memoWrap + .btnSubmit .btn {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .header .inner {
    width: 100%;
    height: 56px;
    padding: 0 10px;
    position: relative;
    z-index: 10;
  }
  .header .gnavWrap {
    width: 100%;
    position: absolute;
    top: 56px;
    left: 0;
    z-index: 100;
    background-color: #50bdf0;
    overflow-y: auto;
    display: none;
  }
  .header .gNav {
    width: 100%;
    height: calc(100% - 55px);
  }
  .header .list {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    border-top: 1px solid #fff;
  }
  .header .list li {
    width: 100%;
    min-height: 55px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #fff;
  }
  .header .list a {
    width: 100%;
    min-width: 200px;
    height: 100%;
    padding: 15px 0 15px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    text-align: center;
    transition: .3s;
  }
  .header .list a:hover,
  .header .list .active a {
    background-color: rgba(255, 255, 255, .3);
  }
  .header .list img {
    width: auto;
    height: 24px;
    position: absolute;
    left: 50%;
    transform: translateX(-70px);
  }
  .menuBtn {
    width: 30px;
    height: 34px;
    margin-top: -11px;
    position: absolute;
    top: 50%;
    right: 10px;
    /*transform: translateY(-50%);*/
    z-index: 10;
  }
  .menuBtn span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .menuBtn span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 1px;
  }
  .header .menuBtn span,
  .menuBtn.active span {
    background-color: #fff;
  }
  .menuBtn span:nth-of-type(1) {
    top: 0;
  }
  .menuBtn span:nth-of-type(2) {
    top: 9px;
  }
  .menuBtn span:nth-of-type(3) {
    top: 18px;
  }
  .gNavOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    background-color: #50bdf0;
  }

  /*エフェクト*/
  .menuBtn.is-active span:nth-of-type(1) {
    transform: translateY(9px) rotate(-45deg);
  }
  .menuBtn.is-active span:nth-of-type(2) {
    opacity: 0;
  }
  .menuBtn.is-active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(45deg);
  }

  /*サブナビ*/
  .header .guideLink span {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .header .subNav .inner {
    height: auto;
    padding: 7px 10px 8px;
    justify-content: flex-end;
  }
  .header .subNav .list {
    margin-top: -5px;
    border-top: none;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .header .subNav li {
    width: auto;
    min-width: 0;
    min-height: 0;
    margin-top: 5px;
    border-bottom: none;
  }
  .header .subNav a {
    min-width: 0;
    padding: 0;
    color: #555;
    font-size: 1.1rem;
    font-weight: normal;
  }
  .memoArea .body {
    width: calc(100vw - 60px - 15px - 30px);
  }
}


/* ===========================================
フッター
=========================================== */
.footer {
  height: 80px;
  padding: 15px 0 1.75px;
  margin-top: auto;
  color: #fff;
  background: #00a0e9;
  position: relative;
}
.footer:before {
  content: "";
  width: 3906px;
  height: 84px;
  background: url(../img/common/bg_footer.png) repeat-x center / contain;
  display: block;
  position: absolute;
  bottom: 50px;
  left: calc(50% - 1702px);
  /* transform: translateX(-50%); */
  z-index: 1;
  pointer-events: none;
}
.footer .nav {
  display: flex;
  justify-content: center;
}
.footer .nav .item a {
  color: #fff;
  font-size: 1.2rem;
  line-height: 2.041666667;
  transition: .3s;
}
.footer .nav .item a:hover {
  opacity: .6;
}
.footer .nav .item + .item {
  margin-left: 28px;
  position: relative;
}
.footer .nav .item + .item:before {
  content: "|";
  color: #fff;
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
}
.footer .copy {
  margin-top: 5px;
  color: #eaf2f5;
  font-family: Arial;
  font-size: 1rem;
  line-height: 2.45;
  text-align: center;
}
.footer.reservation {
  height: 0;
  padding: 0;
  margin: 0;
  background-color: #fff;
}
.footer.reservation:before {
  content: normal;
}

@media screen and (max-width: 768px) {
  .footer:before {
    width: 1302px;
    height: 56px;
    top: -37px;
    left: calc(50% - 500px);
    /* transform: translateX(-50%); */
    z-index: 1;
  }
}

/*個人情報保護方針ページフッター*/
.footerPolicy {
  height: 70px;
  padding-top: 15px;
}
.footerPolicy .inner {
  text-align: center;
}
.footerPolicy:before {
  bottom: 40px;
}

@media screen and (max-width: 768px) {
  .footerPolicy {
    height: auto;
    padding-top: 25px;
    padding-bottom: 20px;
  }
  .footerPolicy:before {
    bottom: auto;
    top: -25px;
  }
}

.btnPageTop {
  height: 36px;
  position: fixed;
  bottom: 0;
  right: 29px;
  z-index: 10;
  opacity: .5;
  transition: .3s;
}
.btnPageTop a {
  width: 100%;
  height: 100%;
  padding: 0 11px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  background-color: #459fe2;
  border: 1px solid #fff;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.btnPageTop svg {
  margin-right: 6px;
}
.btnPageTop svg * {
  transition: .3s;
}
.btnPageTop a:hover {
  color: #459fe2;
  background-color: #fff;
}
.btnPageTop a:hover #round {
  fill: #459fe2;
}
.btnPageTop a:hover #combine {
  fill: #fff;
}


@media screen and (max-width: 768px) {
  .btnPageTop {
    bottom: 0;
    right: 10px;
  }
  .btnPageTop span {
    display: none;
  }
  .btnPageTop svg {
    margin-right: 0;
  }
  .btnPageTop a:hover {
    color: #fff;
    background-color: #459fe2;
  }
  .btnPageTop a:hover #round {
    fill: #fff;
  }
  .btnPageTop a:hover #combine {
    fill: #459fe2;
  }
}

/* ===========================================
ログイン
=========================================== */
.header.login .inner {
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header.login .log {
  margin-right: 0;
}
.loginArea {
  margin: 30px auto 180px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.loginArea .tit {
  margin-bottom: 23px;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.636363636;
  text-align: center;
}
.loginArea input,
.loginArea button {
  width: 100%;
  max-width: 100%;
}
.loginArea .inputBox {
  width: 250px;
  margin: 0 auto;
}
.loginArea .inputBox + .inputBox {
  margin-top: 20px;
}
.loginArea .inputBox span {
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: bold;
}
.loginArea input {
  height: 42px;
  font-size: 1.4rem;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.loginArea .note {
  margin-top: 24px;
  color: #333;
  text-align: center;
}
.loginArea .note a {
  color: #0096dc;
  font-size: 1.25rem;
  text-decoration: underline;
}
.loginArea .note a:hover {
  text-decoration: none;
}
.loginArea .loginBtn {
  width: 250px;
  margin: 11px auto 0;
}
.loginArea .btnSubmit .btn {
  height: 50px;
  margin-top: 0;
}
.loginArea .errorMessage {
  margin: 20px 0 10px;
  color: #ff81e7;
  font-size: 1.4rem;
  line-height: 1.75;
  text-align: center;
}
.loginArea.lock .txt {
  margin-top: 40px;
  font-size: 1.4rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .loginArea {
    width: 100%;
    margin-bottom: 100px;
    padding: 0 20px;
  }
}

/* ===========================================
プランごとの出し分け
=========================================== */
.planChangeRequestArea {
  margin-top: 13px;
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.planChangeRequestArea .box {
  margin-bottom: 62px;
}
.planChangeRequestArea .box .txt {
  margin-bottom: 3px;
}
.planChangeRequestArea .box .list {
  width: 100%;
  max-width: 360px;
}
.planChangeRequestArea .box li {
  margin-bottom: 3px;
}
.planChangeRequestArea .btnSubmit {
  width: 100%;
  max-width: 250px;
  height: 50px;
  margin: 17px 0 0 !important;
}
.planChangeRequestArea .btnSubmit .btn {
  height: 100% !important;
  margin-top: 0;
}
.planChangeRequestArea .link {
  margin-top: 10px;
  font-size: 1.2rem;
  font-weight: normal;
}
.planChangeRequestArea .link a {
  color: #0096dc;
  text-decoration: underline;
}
.planChangeRequestArea .link a:hover {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .planChangeRequestArea .box {
    margin-bottom: 30px;
  }
}



/* ===========================================
TOP
=========================================== */
.newReservationArea {
  margin-bottom: 45px;
}
.newReservationArea .lead {
  margin-bottom: 10px;
  font-size: 1.4rem;
  line-height: 1.75;
}
.newReservationArea .scrollableTable {
  width: 100%;
}
.newReservationArea .table .linkingCell .inner {
  width: 70px;
  margin: 0 auto;
}
.newReservationArea .table .nameCell {
  width: 150px !important;
}
.newReservationArea .table .courseCell {
  width: 200px !important;
}
.newReservationArea .table .scheduledDateCell .inner {
  flex-direction: column;
  line-height: 1.5;
}
.navigationList {
  margin-top: -30px;
  display: flex;
  justify-content: center;
}
.navigationList li {
  width: 250px;
  margin-top: 30px;
  display: flex;
}
.navigationList li + li {
  margin-left: 30px;
}
.navigationList a {
  width: 100%;
  min-height: 50px;
}
.loadMore {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.loadMore .btn {
  width: 200px;
  height: 45px;
  font-weight: normal;
  border-radius: 2px;
}

@media screen and (max-width: 768px) {
  .newReservationArea .scrollableTable {
    width: 1000px;
  }
}
.scroll-hint-icon {
  z-index: 10;
}

.welcomeArea {
  padding: 23px 21px 17px;
  margin-bottom: 50px;
  background: #fff;
  border-radius: 5px;
  position: relative;
}
.welcomeArea .tit {
  font-size: 2.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.welcomeArea .inner {
  margin-top: 12px;
}
.welcomeArea .tit img {
  margin: -4px 4px 0 0;
}
.welcomeArea .btn {
  width: 81px;
  height: 23px;
  padding-right: 2px;
  border-radius: 2px;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 27px;
  right: 21px;
  cursor: pointer;
}
.welcomeArea .btn:before {
  content: "";
  width: 11px;
  height: 11px;
  background: url(../img/common/ico_arrow_blue.png) no-repeat center / contain;
  position: absolute;
  left: 8.5px;
  /* transform: rotate(-180deg); */
  transition: .4s;
}
.welcomeArea .btn.is-show:before {
  transform: rotate(-180deg);
}
.welcomeArea .btn:hover:before {
  background: url(../img/common/ico_arrow.png) no-repeat center / contain;
}
.welcomeArea .btn .indicate {
  padding-left: 17px;
  display: none;
}
.welcomeArea .btn .hide {
  padding-left: 16px;
}
.welcomeArea .btn.is-show .indicate {
  display: block;
}
.welcomeArea .btn.is-show .hide {
  display: none;
}
.welcomeArea .lead {
  margin-bottom: 18px;
  font-size: 1.8rem;
  line-height: 1.722222222;
}
.welcomeArea .progressList {
  margin-bottom: 25px;
  background: #fafafa;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.welcomeArea .progressList.done {
  display: none;
}
.welcomeArea .progressList li {
  width: calc((100% - 8px) / 3);
  padding: 19px 16px 12px;
  display: flex;
  flex-direction: column;
  border-bottom: 6px solid #eaeaea;
}
.welcomeArea .progressList li.done {
  border-bottom: 6px solid #8fce48 !important;
}
.welcomeArea .progressList li.done + li {
  border-bottom: 6px solid #c7e6a3;
}
.welcomeArea li .listTit {
  margin-bottom: 13px;
  font-size: 1.5rem;
  line-height: 1.733333333;
  font-weight: bold;
}
.welcomeArea li a {
  padding-left: 25px;
  color: #0096dc;
  font-size: 1.4rem;
  line-height: 1.714285714;
  text-decoration: underline;
  display: flex;
  align-items: center;
  position: relative;
}
.welcomeArea li.done a:before {
  content: "";
  width: 15px;
  height: 17px;
  background: url(../img/common/ico_check_blue.png) no-repeat center / contain !important;
  position: absolute;
  top: 3px;
  left: 0;
}
.welcomeArea li.setting a:before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../img/common/ico_setting_blue.png) no-repeat center / contain;
  position: absolute;
  top: 3px;
  left: 0;
}
.welcomeArea li.setting a:before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../img/common/ico_setting_blue.png) no-repeat center / contain;
  position: absolute;
  top: 3px;
  left: 0;
}
.welcomeArea li.reservation a:before {
  content: "";
  width: 17px;
  height: 18px;
  background: url(../img/common/ico_reservation_book_blue.png) no-repeat center / contain;
  position: absolute;
  top: 3px;
  left: 0;
}
.welcomeArea li.customer a:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/common/ico_customer_blue.png) no-repeat center / contain;
  position: absolute;
  top: 3px;
  left: 0;
}
.welcomeArea li.accountant a:before {
  content: "";
  width: 17px;
  height: 18px;
  background: url(../img/common/ico_accountant_blue.png) no-repeat center / contain;
  position: absolute;
  top: 3px;
  left: 0;
}
.welcomeArea .progressList li a:hover {
  text-decoration: none;
}
.welcomeArea .progressList li.done a {
  padding-left: 25px;
  color: #a0a0a0;
  text-decoration: none;
}
.welcomeArea .progressList li a img {
  margin-right: 8px;
}
.welcomeArea .howtoBox {
  padding: 0 16px 14px;
  border-bottom: 1px solid #ccc;
}
.welcomeArea .boxTit {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.733333333;
}
.welcomeArea .howtoBox .boxTit {
  margin-bottom: 14px;
}
.welcomeArea .howtoBox .list {
  display: flex;
  flex-wrap: wrap;
}
.welcomeArea .howtoBox .list li {
  width: calc(100% / 4);
  margin-bottom: 10px;
  padding-left: 40px;
}
.welcomeArea .howtoBox .list li:nth-of-type(4n + 1) {
  padding-left: 0;
}
.welcomeArea .howtoBox .list li a {
  color: #0096dc;
  text-decoration: underline;
}
.welcomeArea .howtoBox .list li a:hover {
  text-decoration: none;
}
.welcomeArea .guideBox {
  padding: 17px 16px;
  border-bottom: 1px solid #ccc;
}
.welcomeArea .guideBox .boxTit {
  margin-bottom: 7px;
}
.welcomeArea .txt {
  font-size: 1.4rem;
  line-height: 1.714285714;
}
.welcomeArea .guideBox .txt .mark {
  padding-left: 25px;
  color: #0096dc;
  position: relative;
}
.welcomeArea .guideBox .txt .mark:before {
  content: "";
  width: 21px;
  height: 21px;
  background: url(../img/common/ico_useage_blue.png) no-repeat center / contain;
  position: absolute;
  top: -3px;
  left: 2px;
}
.welcomeArea .guideBox .txt .question {
  padding-left: 25px;
  position: relative;
}
.welcomeArea .guideBox .txt .question:before {
  content: "?";
  width: 21px;
  height: 21px;
  color: #fff;
  font-weight: bold;
  background: #8fce48;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  left: 2px;
}
.welcomeArea .guideBox .txt a {
  text-decoration: underline;
}
.welcomeArea .guideBox .txt a:hover {
  text-decoration: none;
}
.welcomeArea .contactBox {
  padding: 17px 16px;
}
.welcomeArea .contactBox .boxTit {
  margin-bottom: 7px;
}
.welcomeArea .contactBox > .txt {
  margin-bottom: 16px;
}
.welcomeArea .contactBox .list {
  display: flex;
  justify-content: space-between;
}
.welcomeArea .contactBox .list li {
  width: calc((100% - 72px) / 3);
  /*width: calc((100% - 72px) / 4 );*/
  padding: 14px 10px;
  border: 1px solid #50bdf0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.welcomeArea .contactBox .list li .liTit {
  color: #0096dc;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.733333333;
}
.welcomeArea .contactBox .list li .liTit {
  margin-bottom: 1px;
  position: relative;
}
.welcomeArea .contactBox .list li.mail .liTit {
  padding-left: 24px;
}
.welcomeArea .contactBox .list li .liTit:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.welcomeArea .contactBox .list li.tel .liTit {
  padding-left: 24px;
}
.welcomeArea .contactBox .list li.mail .liTit:before {
  width: 18px;
  height: 14px;
  background: url(../img/common/ico_mail_blue.png) no-repeat center / contain;
}
.welcomeArea .contactBox .list li.tel .liTit:before {
  width: 18px;
  height: 24px;
  background: url(../img/common/ico_operator_blue.png) no-repeat center / contain;
}
.welcomeArea .contactBox .list li.web .liTit,
.welcomeArea .contactBox .list li.online .liTit {
  padding-left: 24px;
}
.welcomeArea .contactBox .list li.web .liTit:before,
.welcomeArea .contactBox .list li.online .liTit:before {
  width: 18px;
  height: 16px;
  background: url(../img/common/ico_pc_blue.png) no-repeat center / contain;
}
.welcomeArea .contactBox .list li a {
  padding-left: 0;
  margin-bottom: 6px;
  word-break: break-all;
}
.welcomeArea .contactBox .list li a:hover {
  text-decoration: none;
}
.welcomeArea .contactBox .list li .txt {
  font-size: 1.3rem;
  line-height: 1.538461538;
}
.informationArea {
  margin-bottom: 50px;
}
.informationArea .areaTit {
  display: flex;
  align-items: center;
}
.informationArea .areaTit .btn {
  width: 60px;
  height: 23px;
  margin-left: 10px;
  font-size: 1.2rem;
  font-weight: normal;
  border-radius: 2px;
}
.informationArea .lead {
  margin-bottom: 10px;
  font-size: 1.4rem;
  line-height: 1.75;
}
.informationList {
  padding: 17px 21px 15px;
  border-radius: 5px;
  background-color: #fff;
}
.informationList li {
  padding: 10px 0 10px;
  display: flex;
  font-size: 1.4rem;
}
.informationList li + li {
  border-top: 1px solid #ccc;
}
.informationList li a {
  color: #0096dc;
  text-decoration: underline;
}
.informationList li a:hover {
  text-decoration: none;
}
.informationList .readFlag {
  width: 16px;
  margin-right: 10px;
  position: relative;
  flex-shrink: 0;
}
.informationList .checkbox + label {
  margin: 0;
  position: absolute;
  top: 2px;
  left: 0;
}
.informationList .date {
  margin-right: 20px;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .informationList li {
    flex-direction: column;
  }
  .informationList .date {
    margin: 0 0 5px;
    padding-left: 25px;
  }
  .setting .informationList .date {
    padding-left: 0;
  }
}

/*OKABANコネクトアイコン*/
.connectIcon {
  width: 14px;
  height: 14px;
  color: #fff;
  font-size: 1rem;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #50bdf0;
  background-color: #50bdf0;
  border-radius: 50%;
  display: inline-block;
}
.table .connectIcon {
  margin-right: 3px;
}

@media screen and (max-width: 768px) {
  .welcomeArea {
    padding: 20px 21px;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 5px;
    position: relative;
  }
  .welcomeArea .tit {
    font-size: 1.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .welcomeArea .inner {
    margin-top: 12px;
  }
  .welcomeArea .tit img {
    width: 90px;
    height: auto;
    margin: 0 4px 0 0;
  }
  .welcomeArea .btn {
    width: 60px;
    height: 23px;
    border-radius: 0;
    font-size: 1.2rem;
    font-weight: normal;
    position: absolute;
    top: 24px;
    right: 21px;
    cursor: pointer;
  }
  .welcomeArea .btn:before {
    content: "";
    width: 8px;
    height: 8px;
    left: 5.5px;
  }
  .welcomeArea .btn.is-show:before {
    transform: rotate(-180deg);
  }
  .welcomeArea .btn:hover {
    background-color: transparent;
    color: #50bdf0;
  }
  .welcomeArea .btn:hover:before {
    background: url(../img/common/ico_arrow_blue.png) no-repeat center / contain;
  }
  .welcomeArea .btn .indicate {
    padding-left: 17px;
    display: none;
  }
  .welcomeArea .btn .hide {
    padding-left: 13px;
  }
  .welcomeArea .btn.is-show .indicate {
    display: block;
  }
  .welcomeArea .btn.is-show .hide {
    display: none;
  }
  .welcomeArea .lead {
    margin-bottom: 18px;
    font-size: 1.4rem;
  }
  .welcomeArea .progressList {
    margin-bottom: 25px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
  }
  .welcomeArea .progressList li {
    width: 100%;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    border-left: 6px solid #eaeaea;
    border-bottom: none !important;
  }
  .welcomeArea .progressList li + li {
    margin-top: 4px;
  }
  .welcomeArea .progressList li.done {
    border-left: 6px solid #8fce48 !important;
    border-bottom: none !important;
  }
  .welcomeArea .progressList li.done + li {
    border-left: 6px solid #c7e6a3;
  }
  .welcomeArea li .listTit {
    margin-bottom: 6px;
    font-size: 1.5rem;
    line-height: 1.733333333;
    font-weight: bold;
  }
  .welcomeArea li a {
    padding-left: 27px;
    color: #0096dc;
    font-size: 1.4rem;
    line-height: 1.714285714;
    text-decoration: underline;
    display: flex;
    align-items: center;
    position: relative;
  }
  .welcomeArea li.setting a:before {
    top: 3px;
    left: 0;
  }
  .welcomeArea li.reservation a:before {
    top: 3px;
    left: 0;
  }
  .welcomeArea li.customer a:before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../img/common/ico_customer_blue.png) no-repeat center / contain;
    position: absolute;
    top: 3px;
    left: -2px;
  }
  .welcomeArea li.accountant a:before {
    content: "";
    width: 17px;
    height: 18px;
    background: url(../img/common/ico_accountant_blue.png) no-repeat center / contain;
    position: absolute;
    top: 3px;
    left: 0;
  }
  .welcomeArea li.done a:before {
    content: "";
    width: 15px;
    height: 17px;
    background: url(../img/common/ico_check_blue.png) no-repeat center / contain !important;
    position: absolute;
    top: 3px;
    left: 3px;
  }
  .welcomeArea .progressList li a:hover {
    text-decoration: none;
  }
  .welcomeArea .progressList li.done a {
    padding-left: 27px;
    color: #a0a0a0;
    text-decoration: none;
  }
  .welcomeArea .progressList li a img {
    margin-right: 8px;
  }
  .welcomeArea .howtoBox {
    padding: 0 0 14px;
    border-bottom: 1px solid #ccc;
  }
  .welcomeArea .boxTit {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.733333333;
  }
  .welcomeArea .howtoBox .boxTit {
    margin-bottom: 14px;
  }
  .welcomeArea .howtoBox .list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .welcomeArea .howtoBox .list li {
    width: 100%;
    margin-bottom: 10px;
    padding-left: 40px;
  }
  .welcomeArea .howtoBox .list li + li {
    margin-top: 5px;
  }
  .welcomeArea .howtoBox .list li {
    padding-left: 0;
  }
  .welcomeArea .howtoBox .list li a {
    color: #0096dc;
    text-decoration: underline;
  }
  .welcomeArea .howtoBox .list li a:hover {
    text-decoration: none;
  }
  .welcomeArea .guideBox {
    padding: 17px 0;
    border-bottom: 1px solid #ccc;
  }
  .welcomeArea .guideBox .boxTit {
    margin-bottom: 7px;
  }
  .welcomeArea .txt {
    font-size: 1.4rem;
    line-height: 1.714285714;
  }
  .welcomeArea .guideBox .txt .mark {
    padding-left: 25px;
    color: #0096dc;
    position: relative;
  }
  .welcomeArea .guideBox .txt .mark:before {
    content: "";
    width: 21px;
    height: 21px;
    background: url(../img/common/ico_useage_blue.png) no-repeat center / contain;
    position: absolute;
    top: -3px;
    left: 2px;
  }
  .welcomeArea .guideBox .txt .question {
    padding-left: 25px;
    position: relative;
  }
  .welcomeArea .guideBox .txt .question:before {
    content: "?";
    width: 21px;
    height: 21px;
    color: #fff;
    font-weight: bold;
    background: #8fce48;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -4px;
    left: 2px;
  }
  .welcomeArea .guideBox .txt a {
    text-decoration: underline;
  }
  .welcomeArea .guideBox .txt a:hover {
    text-decoration: none;
  }
  .welcomeArea .contactBox {
    padding: 17px 0;
  }
  .welcomeArea .contactBox .boxTit {
    margin-bottom: 7px;
  }
  .welcomeArea .contactBox > .txt {
    margin-bottom: 16px;
  }
  .welcomeArea .contactBox .list {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .welcomeArea .contactBox .list li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .welcomeArea .contactBox .list li + li {
    margin-top: 15px;
  }
  .welcomeArea .contactBox .list li .liTit {
    color: #0096dc;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.733333333;
  }
  .welcomeArea .contactBox .list li .liTit {
    margin-bottom: 1px;
    position: relative;
  }
  .welcomeArea .contactBox .list li.mail .liTit {
    padding-left: 24px;
  }
  .welcomeArea .contactBox .list li .liTit:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .welcomeArea .contactBox .list li.tel .liTit {
    padding-left: 24px;
  }
  .welcomeArea .contactBox .list li.tel .liTit:before {
    width: 18px;
    height: 24px;
    background: url(../img/common/ico_operator_blue.png) no-repeat center / contain;
  }
  .welcomeArea .contactBox .list li.web .liTit,
  .welcomeArea .contactBox .list li.online .liTit {
    padding-left: 24px;
  }
  .welcomeArea .contactBox .list li.web .liTit:before,
  .welcomeArea .contactBox .list li.online .liTit:before {
    width: 18px;
    height: 16px;
    background: url(../img/common/ico_pc_blue.png) no-repeat center / contain;
  }
  .welcomeArea .contactBox .list li a {
    padding-left: 0;
    margin-bottom: 6px;
    word-break: break-all;
  }
  .welcomeArea .contactBox .list li a:hover {
    text-decoration: none;
  }
  .welcomeArea .contactBox .list li .txt {
    font-size: 1.3rem;
    line-height: 1.538461538;
  }
}
.topTable tr:not(:last-child) .lodgingCell {
  border-bottom-width: 2px;
}


/* ===========================================
予約一覧
=========================================== */
/*表示切り替えエリア*/
.headArea {
  width: 100%;
  min-height: 30px;
  margin: 0 auto 10px;
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.categoryList {
  width: calc((100% - 200px) / 2);
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
}
.categoryList li {
  width: 90px;
  margin: 4px 4px 0 0;
  display: flex;
}
.categoryList a {
  width: 100%;
  min-height: 21px;
  font-size: 1rem;
  border: 2px solid transparent;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
  pointer-events: none;
}
.reservation.rental .contentBlock tbody tr:nth-child(even) {
  background-color: transparent;
}
.reservation.group .headArea .title {
  margin-left: 0;
}
.lodging .headerLinkBox .btnSearch,
.lodging .headerLinkBox .btnViewSetting {
  display: none;
}
.headerLinkBox {
  width: calc((100% - 230px) / 2);
  margin-top: -10px;
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
.week .headerLinkBox {
  width: calc((100% - 400px) / 2);
}
.headerLinkBox .tabListWrap {
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.headerButtonWrap {
  margin-top: -10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}
.headerButtonWrap > * {
  margin-top: 10px;
}
.headerButtonWrap > * + * {
  margin-left: 10px;
}
.memoArea.active {
  width: 100%;
  margin-right: 10px;
}
.notDisplayModify .btnViewSetting {
  display: none;
}

@media screen and (max-width: 1350px) {
  .rosterList {
    margin-top: 40px;
  }
  .categoryList li {
    margin: 4px 4px 0 0;
  }
  /* .headerLinkBox,
  .month.beta .headerLinkBox {
    width: 50%;
  }
  .week .headerLinkBox {
    width: 100%;
  } */
  .reservation.analysis .headArea {
    margin-bottom: 12px;
  }
  .categoryList .blank {
    display: none;
  }
}

@media screen and (max-width: 1000px) {
  .week .headArea {
    padding-top: 40px;
  }
  .week .headerLinkBox {
    width: 100%;
  }
}

@media screen and (max-width: 950px) {
  .month .headerLinkBox {
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
  }
}

@media screen and (max-width: 768px) {
  .headArea {
    padding-top: 40px;
    flex-wrap: wrap;
  }
  .headerLinkBox,
  .month.beta .headerLinkBox {
    width: 100%;
  }
  .month .headerLinkBox {
    width: 50%;
    flex-direction: row-reverse;
    align-items: center;
  }
  .categoryList {
    width: 50%;
  }
}

/*リスト別表示*/
.rosterList {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .16);
  display: flex;
  overflow: hidden;
}
.rosterList li {
  width: 66px;
  display: flex;
}
.rosterList li + li {
  border-left: 1px solid #ccc;
}
.rosterList a {
  width: 100%;
  min-height: 33px;
  color: #333;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  transition: .3s;
}
.rosterList a:hover,
.rosterList .active a {
  color: #fff;
  background-color: #7cd123;
}

/*タイトル＋日付変更ボタン*/
.headTitleBox {
  margin-top: 3px;
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.headTitleBox .nav {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}
.headTitleBox a:not(.selectDate) {
  width: 100%;
  height: 100%;
  border: 1px solid #50bdf0;
  background-color: #f4fbfe;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.headTitleBox .nav a:after {
  content: "";
  width: 6px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  background: url(../img/common/ico_arrow_reservation.png) no-repeat top center / cover;
}
.headTitleBox .prev a:after {
  margin-left: 3px;
  transform: translate(-50%, -50%) translate(-3px, 10px);
}
.headTitleBox .next a:after {
  margin-left: -3px;
  transform: translate(-50%, -50%) translate(3px, 10px) scale(-1, 1);
}
.headTitleBox a[href=""] {
  background-color: #e2e2e2;
  pointer-events: none;
}
.headTitleBox a:not(.selectDate):hover {
  background-color: #50bdf0;
  opacity: .7;
}
.headTitleBox .nav a:hover:after {
  margin-top: -20px;
}
.headTitleBox a.selectDate {
  padding-right: 12px;
  border-bottom: 1px solid #bcbcbc;
  background: url(../img/common/ico_calendar.svg) no-repeat right center / 8px auto;
  transition: .3s;
}
.headTitleBox a.selectDate:hover {
  opacity: .6;
}
.headTitleBox .title {
  width: auto;
  margin: 0 19px 0 19px;
  font-size: 1.6rem;
  font-weight: bold;
  white-space: nowrap;
}
.logoOnlyPrint {
  display: none;
}

@media screen and (max-width: 1350px) {
  .headTitleBox {
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  .headTitleBox .title {
    font-size: 1.4rem;
  }
}

.headAreaNote {
  margin: 0 6px 0 0;
  margin-right: auto;
  font-size: 1rem;
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap: wrap; */
  align-items: center;
}
.headAreaNote .box {
  min-width: 90px;
  min-height: 40px;
  margin-right: 5px;
  padding: 2px 6px 2px;
  text-align: center;
  border: 1px solid #333;
}
.headAreaNote .txt {
  margin-bottom: 1px;
}
.headAreaNote a {
  color: #0096dc;
  text-decoration: underline;
}
.headAreaNote a:hover {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .headAreaNote {
    width: 100%;
    margin: 0;
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.7;
  }
  .headAreaNote .inner {
    width: 100%;
  }
  .headAreaNote .box {
    margin: 0 5px 5px 0;
  }
  .headAreaNote .txt {
    margin-bottom: 1px;
  }
}


/*表示期間切り替え*/
.tabListWrap {
  margin-top: -5px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.tabList {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .16);
  display: flex;
  overflow: hidden;
}
.tabList li {
  width: 60px;
  display: flex;
}
.analysis .tabList li {
  width: 70px;
}
.tabList li + li {
  border-left: 1px solid #ccc;
}
.tabList a {
  width: 100%;
  min-height: 33px;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.3;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  transition: .3s;
}
.tabList a:hover,
.tabList .active a {
  color: #fff;
  background-color: #7cd123;
}
.btnRegist a {
  padding: 0 10px;
  min-height: 26px;
  color: #0096dc;
  font-size: 1.4rem;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.btnRegist a:hover {
  color: #fff;
  background-color: #50bdf0;
}
.btnSearch a {
  padding: 0 10px;
  min-height: 26px;
  color: #0096dc;
  font-size: 1.4rem;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.btnSearch a:hover {
  color: #fff;
  background-color: #50bdf0;
}

@media screen and (max-width: 768px) {
  .rosterList {
    margin-top: 0;
    margin-bottom: 10px;
  }
  .rosterList li:first-child:nth-last-child(3),
  .rosterList li:first-child:nth-last-child(3) ~ li {
    width: 33.33333%;
    min-width: calc((100vw - 20px) / 3);
  }
  .rosterList li:first-child:nth-last-child(4),
  .rosterList li:first-child:nth-last-child(4) ~ li {
    width: calc(100% / 4);
    min-width: calc((100vw - 20px) / 4);
  }
  .rosterList li:first-child:nth-last-child(5),
  .rosterList li:first-child:nth-last-child(5) ~ li {
    width: calc(100% / 5);
    min-width: calc((100vw - 20px) / 5);
  }
  .rosterList li:first-child:nth-last-child(6),
  .rosterList li:first-child:nth-last-child(6) ~ li {
    width: calc(100% / 6);
    min-width: calc((100vw - 20px) / 6);
  }
  .rosterList li:first-child:nth-last-child(7),
  .rosterList li:first-child:nth-last-child(7) ~ li {
    width: calc(100% / 7);
    min-width: calc((100vw - 20px) / 7);
  }
  .rosterList li:first-child:nth-last-child(7) a,
  .rosterList li:first-child:nth-last-child(7) ~ li a {
    font-size: 1rem;
  }
  .rosterList a {
    min-height: 30px;
  }
  .tabListWrap {
    margin-top: 10px;
    margin-left: auto;
  }
  .tabList li {
    min-width: 45px;
  }
  .tabList li + li {
    border-left: 1px solid #ccc;
  }
  .tabList a {
    min-height: 30px;
  }
}

/*テーブル*/
.tableWrap {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.fixed_header_display_none_at_print {
  border-radius: 5px 0 0 0;
  z-index: 10;
}
.titTable {
  margin: 30px 0 10px;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}
.table {
  width: 100%;
  padding-right: 22px;
  margin-bottom: 0 !important;
  color: #333;
  background-color: #fff;
}
.scrollableTableWrap {
  width: 100%;
  overflow: auto;
}
.scrollableTable {
  width: 5000px;
  min-width: 100%;
  min-height: 120px;
  margin-bottom: -1px;
  overflow: hidden;
}
.table tr.even th,
.table tr.even td {
  background-color: #f3f3f3;
}
.table th {
  height: 34px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  border-right: 1px solid #ccc;
  background-color: #f1f1f1;
}
.table thead th {
  border-bottom: 2px solid #ccc;
}
.table td {
  height: 36px;
  padding: 5px 10px;
  font-size: 1.2rem;
  line-height: 1.2;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  text-align: center;
  word-break: break-all;
  /* line-break: anywhere; */
}
.table tr th:last-child,
.table tr td:last-child {
  border-right: none;
}
.fixed_header_display_none_at_print .table tr th:last-child,
.fixed_header_display_none_at_print .table tr td:last-child {
  border-right: 1px solid #ccc;
}
.table a,
.noFrameTable a {
  color: #0096dc;
  text-decoration: underline;
}
.table a:hover,
.noFrameTable a:hover {
  text-decoration: none;
}
.table th .inner,
.table td .inner {
  min-height: 35px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table td .directionColumn {
  flex-direction: column;
}
.table .modalIcon {
  transition: .3s;
}
.table a.modalIcon:hover {
  opacity: .6;
}
.table .modalIcon:after {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.table .modalIcon.attention:after {
  content: "!";
  background-color: #ff81e7;
}
.table .modalIcon.check:after {
  content: "";
  background: url(../img/common/ico_check.png) no-repeat #7cd123 center / 10px auto;
}
a.searchCustomer,
a.attention,
.attention {
  color: #ff81e7;
}
.attentionIcon {
  padding-left: 25px;
  position: relative;
}
.attentionIcon:after {
  content: "!";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff81e7;
}
a.unlinkingCustomer {
  color: #0096dc;
}
.table .linking {
  padding-left: 20px;
}
.table .linking:after {
  left: 0;
  transform: translate(0, -50%);
}
.table .remarksCell a {
  font-size: 1rem;
}
.table .remarks a {
  color: #0096dc;
}
.table .teamCol {
  width: 140px;
}
.table .staffCol {
  width: 87px;
}
.table .teamCol {
  font-weight: bold;
}
.table .teamCol span,
.table .staffCol span {
  display: block;
  font-weight: normal;
}
.table .teamCol .inner.taL {
  justify-content: flex-start;
}
.table .reserveIdCell {
  width: 120px !important;
}
.table .editCell {
  width: 35px !important;
}
.table .nameCell,
.table .hotelCell {
  width: 174px !important;
}
.table .nameCell.request {
  position: relative;
}
.table .nameCell.request::before {
  pointer-events: none;
  display: block;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  border: solid 1px #fff;
  background-color: #FF5555;
  content: '';
}

@media screen and (max-width: 767px) {
  .table .nameCell.request::before {
    top: 3px;
    right: 3px;
    width: 4px;
    height: 4px;
  }
}
.table .nameKanaCell {
  width: 174px !important;
}
.table .vehicleCell {
  width: 120px !important;
}
.table .categoryCell {
  width: 152px !important;
}
.table .courseCell {
  width: 120px !important;
}
.table .timeCell {
  width: 120px !important;
}
.table .reservationRouteCell {
  width: 110px !important;
}
.table .arrivalDepartureCell {
  width: 110px !important;
}
.table .scheduledDateCell {
  width: 150px !important;
}
.table .scheduledDateCell .inner {
  flex-direction: column;
}
.table .scheduledDaysCell {
  width: 65px !important;
}
.table .scheduledDaysCell .inner {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.table .scheduledDaysCell .scheduledDays {
  white-space: nowrap;
}
.table .scheduledDaysCell .dayFocus {
  width: 1.2em;
  height: 1.2em;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.table .scheduledDaysCell .start {
  background-color: #50bdf0;
}
.table .scheduledDaysCell .end {
  background-color: #f0a650;
}
.table .passengersNumberCell {
  width: 70px !important;
}
.table .scheduledDateLCell {
  width: 250px !important;
}
.table .representativeCell {
  width: 174px !important;
}
.table .birthdayCell {
  width: 100px !important;
}
.table .checkinCell {
  width: 70px !important;
}
.table .linkingCell {
  width: 90px !important;
}
.table .ageCell {
  width: 55px !important;
}
.table .rentalEquipCell {
  width: 150px !important;
}
.table .equipmentStrageCell {
  width: 100px !important;
}
.table .sexCell {
  width: 60px !important;
}
.table .telCell {
  width: 154px !important;
}
.telLink {
  pointer-events: none !important;
  color: #333 !important;
  text-decoration: none !important;
}
.table .emailCell {
  width: 220px !important;
  word-break: break-all;
}
.table .addressCell {
  width: 250px !important;
}
.table .emergencyNameCell {
  width: 114px !important;
}
.table .emergencyRelationCell {
  width: 114px !important;
}
.table .emergencyTelCell {
  width: 114px !important;
}
.table .priceCell {
  width: 100px !important;
}
.table .organizationCell {
  width: 120px !important;
}
.table .rentalCell {
  width: 60px !important;
}
.table .weightCell,
.table .heightCell {
  width: 60px !important;
}
.table .footSizeCell {
  width: 70px !important;
}
.table .eyesightCell {
  width: 60px !important;
}
.table .organizationCellCell {
  width: 60px !important;
}
.table .cCardCell,
.table .licenceNumberCell,
.table .divingCountCell {
  width: 130px !important;
}
.table .lastDiveDateCell {
  width: 100px !important;
}
.table .snorkelingExperienceCell,
.table .introDivingExperienceCell {
  width: 110px !important;
}
.table .visitCell {
  width: 60px !important;
}
.table .lastVisitCell {
  width: 60px !important;
}
.table .transferCell {
  width: 100px !important;
}
.table .staffCell {
  width: 80px !important;
}
.table .equipmentStorageCell {
  width: 70px !important;
}
.table .teamCell {
  width: 120px !important;
}
.table .staffCell,
.table .timeCell {
  width: 90px !important;
}
.table .menuCell {
  width: 120px !important;
}
.table .divingCountCell {
  width: 90px !important;
}
.table .remarksCell {
  width: 50px !important;
}
.table .staffCell {
  width: 90px !important;
}
.table .statusCell,
.table .accountantCell {
  width: 80px !important;
}
.table .accountantCell {
  width: 90px !important;
  padding: 5px 0;
}
.table .remarksCell {
  width: 180px !important;
  text-align: left;
}
.table td.remarksCell .inner {
  justify-content: flex-start;
}
.table td[data-id="remarks"] {
  text-align: left;
}
.table td[data-id="remarks"] .inner {
  justify-content: flex-start;
}
.table .reservedDateCell {
  width: 100px !important;
}
.table .paymentCell {
  width: 100px !important;
}
.table .btnAddReserveCell {
  width: 60px !important;
}
.table .bordingCell {
  width: 150px !important;
}
.table .memoCell {
  width: 100px !important;
}
.table .connectMailBodyCell {
  width: 70px !important;
}
.table .selectAllRecordsCell {
  width: 32px !important;
  padding: 0;
  vertical-align: middle;
  text-align: center;
}
.table .selectAllRecordsCell .selectAllRecordsWrap {
  position: static;
  transform: translateY(0);
}
.status.notYet {
  color: #ff81e7;
}
.status.partial {
  color: #7cd123;
}
.status.done {
  color: #0096dc;
}
.status.round {
  width: 76px;
  height: 18px;
  padding: 2px 0 1px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: .3s;
}
a.status.round:hover {
  opacity: .8;
}
.status.round.notYet {
  background-color: #ff81e7;
}
.status.round.partial {
  background-color: #7cd123;
}
.status.round.done {
  background-color: #50bdf0;
}

.connectMailBodyIcon {
  padding: 0 0 3px 4px;
  transition: .3s;
}
.connectMailBodyIcon:hover {
  opacity: .8;
}

.table tr.hiddenTr {
  display: none;
}
.table tr.hiddenTr.is-show {
  display: table-row;
}
.table tr.hiddenTr td,
.table tr.hiddenTr div,
.table tr.hiddenTr a,
.table tr.hiddenTr a:hover {
  color: #444;
}
.table-striped tr:nth-child(even) {
  background-color: #f3f3f3;
}


@media screen and (max-width: 768px) {
  .tableWrap {
    border-radius: 5px;
    border: 1px solid #ccc;
    overflow-x: scroll;
  }
  .fixed_header_display_none_at_print {
    border-radius: 5px 0 0 0;
  }
  .table {
    color: #333;
    background-color: #fff;
  }
  .memberTableWrap {
    width: 100%;
    margin-right: -22px;
  }
  .memberTable {
    width: 4000px;
    overflow: hidden;
  }
  .fixed_header_display_none_at_print .table tr th:last-child,
  .fixed_header_display_none_at_print .table tr td:last-child {
    border-right: 1px solid #ccc;
  }
  .table a:hover {
    text-decoration: none;
  }
  .table td .inner {
    min-height: 35px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .table .modalIcon {
    transition: .3s;
  }
  .table .modalIcon:after {
    width: 18px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .table .modalIcon.attention:after {
    content: "!";
    padding-top: 1px;
    background-color: #ff81e7;
  }
  .table .modalIcon.check:after {
    content: "";
    background: url(../img/common/ico_check.png) no-repeat #7cd123 center / 10px auto;
  }
  a.searchCustomer {
    color: #ff81e7;
  }
  a.unlinkingCustomer {
    color: #0096dc;
  }
  .table .linking {
    padding-left: 20px;
  }
  .table .linking:after {
    left: 0;
    transform: translate(0, -50%);
  }
  .table .remarks {
    font-size: 1rem;
  }
  .table .remarks a {
    color: #0096dc;
  }
  .table .teamCol {
    width: 140px;
  }
  .table .staffCol {
    width: 87px;
  }
  .table .teamCol {
    font-weight: bold;
  }
  .table .teamCol span,
  .table .staffCol span {
    display: block;
    font-weight: normal;
  }
  .table .teamCol .inner.taL {
    justify-content: flex-start;
  }
  .table .reserveIdCell {
    width: 50px !important;
  }
  .table .teamCell {
    width: 100px !important;
  }
  .table .nameCell,
  .table .nameKanaCell {
    width: 100px !important;
  }
  .telLink {
    pointer-events: all !important;
    color: #50bdf0 !important;
    text-decoration: underline !important;
  }
}

.tableInTableBodyWrap {
  display: none;
}
.tableInTableBody {
  display: none;
}
.tableInTableBody > td {
  height: 0 !important;
  padding: 0 !important;
}
.tableInTableBody .table tr:first-child td {
  border-top: none;
}


/* テーブル内アコーディオン */
.accordionHeadRow {
  cursor: pointer;
}
.accordionBodyRow {
  display: none;
}
.accordionBodyRow--even {
  background-color: #f3f3f3;
}
.accordionBodyRow td {
  height: 25px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.accordionBodyRow td .inner {
  min-height: 23px;
  font-size: 1rem;
}

/*モーダル*/
.overlay,
.overlayUpper,
.overlayUpperDouble {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  display: none;
}
.overlayUpper {
  z-index: 110;
}
.overlayUpperDouble {
  z-index: 210;
}
.modalContent,
.modalContentUpper,
.modalContentUpperDouble {
  width: 89.84375%;
  max-width: 920px;
  padding: 20px;
  color: #333;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: none;
}
.modalContentUpper {
  width: auto;
  z-index: 200;
}
.modalContentUpperDouble {
  width: 65%;
  z-index: 300;
}
.modalContentUpper .tit {
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.modalClose {
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -22px;
  right: -22px;
  z-index: 10;
  transition: .3s;
}
.modalContentUpper .modalAreaUpper {
  max-height: 80svh;
  padding-bottom: 20px;
  overflow: auto;
}
.modalAreaUpper .qrImg {
  width: 100%;
  max-width: 400px;
}
.modalAreaUpper .qrImg img {
  width: 100%;
  height: auto;
}
.modalClose:before,
.modalClose:after {
  content: "";
  width: 26px;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #333;
  transition: .3s;
}
.modalClose:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modalClose:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modalClose:hover {
  background-color: #50bdf0;
}
.modalClose:hover:before,
.modalClose:hover:after {
  background-color: #fff;
}
.modalContent .inner {
  max-height: 80vh;
  overflow-y: scroll;
}
.modalContent .modalResultArea,
.modalContent .modalSearchBox,
.modalContent .modalRegisthBox,
.modalContent .modalSettingArea,
.modalContent .modalTeamArea,
.modalContent .modalArea,
.modalContentUpper .modalAreaUpper,
.modalContentUpperDouble .inner {
  padding: 20px 20px 25px;
  background-color: #f4f8fc;
}
.modalAreaUpper .flexWrap {
  display: flex;
  justify-content: center;
}
.modalResultArea .tableWrap {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modalResultArea .tableWrap::-webkit-scrollbar {
  display: none;
}
.modalResultArea .table th:first-child {
  width: 138px;
}
.modalContent .modalBottomArea {
  margin-bottom: 20px;
  display: flex;
}
.modalContent .modalBottomAreaFull {
  width: 100%;
  background-color: #f4f8fc;
  /*justify-content: center;*/
}
.modalContent .modalSearchBox,
.modalContent .modalRegisthBox {
  width: calc(50% - 10px);
}
.modalContent .modalRegisthBox {
  margin-left: 20px;
}
.modalContent .tit {
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: bold;
}
.modalContent .titLeft {
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: bold;
}
.modalContent .titCenter {
  margin-bottom: 9px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.modalInputBox {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
}
.modalInputBox .input {
  max-width: 100%;
}
.modalContent .tableWrap + .titCenter {
  margin-top: 30px;
}
.modalContent .lead {
  margin-bottom: 16px;
  font-size: 1.2rem;
}
.modalContent .inputBox.center {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.modalContent .modalInput {
  max-width: 100%;
  height: 45px;
}
.modalContent .btn {
  min-height: 22px;
  padding: 2px 10px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #999;
  border-radius: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.modalContent a.btn:hover,
.modalContent button.btn:hover {
  background-color: #fff;
}
.modalContent .btnPrimary {
  margin: 0;
  background-color: #7cd123;
}
.modalContent span.btnPrimary {
  margin: 0 5px;
}
.modalContent .btnSecondary {
  background-color: #ff81e7;
}
.modalContent a.btnPrimary:hover,
.modalContent button.btnPrimary:hover {
  color: #7cd123;
}
.modalContent .btnSecondary {
  background-color: #ff81e7;
}
.modalContent a.btnSecondary:hover,
.modalContent button.btnSecondary:hover {
  color: #ff81e7;
}
.modalContent .hilight {
  color: #7cd123;
  font-weight: bold;
}
.modalContent .table .btn {
  width: 90px;
}
.modalContent .searchBox form {
  width: 100%;
  display: flex;
}
.modalContent .searchBox .inputBox {
  flex: 1;
}
.modalContent .searchBox .inputBox input {
  width: 100%;
  height: 33px;
  padding: 0 10px;
  font-size: 1.2rem;
  border: 1px solid #999;
}
.modalContent .searchBox .btn {
  width: 100px;
  margin-left: 10px;
  outline-style: none;
}
.modalContent .js-regist {
  width: 126px;
  display: flex;
}
.modalContent .modalBtn {
  height: 33px;
}
.modalContent .modalBtn a,
.modalContent .modalBtn button {
  height: 100%;
  font-size: 1.4rem;
}
.modalContent .js-regist a {
  width: 100%;
  min-height: 33px;
}
.modalInputBoxTransfer {
  padding-left: 30px;
  display: flex;
  justify-content: center;
}
.modalInputBoxTransfer.is-active {
  display: flex;
}
.transferOtherBox {
  width: 100%;
  max-width: 520px;
  min-width: 180px;
  margin: 0 auto;
  display: none;
}
.transferOtherBox .input {
  max-width: 100%;
  height: 42px;
}
.transferOtherBox.is-active {
  display: inline-block;
}
.modalInputBoxTransfer + .transferOtherBox {
  margin-top: 20px;
}
.modalInputBoxTransfer + .transferOtherBox.is-active {
  display: block;
}

.resultTable.rentalTable th {
  width: 25%;
}
.resultTable.remarksTable td {
  border-top: none;
  line-break: anywhere;
}
/*予約削除*/
.confirmModalWrap {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  display: none;
}
.confirmModalWrap.simple {
  color: #666;
  z-index: 1000;
}
.confirmModal {
  width: 450px;
  height: 200px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 102;
}
.confirmModal .confirmTxt {
  margin-bottom: 20px;
  font-size: 1.6rem;
  line-height: 1.35;
  text-align: center;
}
.confirmModal .confirmBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.confirmModal .confirmBtn li {
  width: 150px;
  height: 30px;
}
.confirmModal .confirmBtn li + li {
  margin-left: 20px;
}
.confirmModal .confirmBtn a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
}
.confirmModal .confirmBtn .confirmDelete {
  color: #fff;
  border: 1px solid #ff81e7;
  background-color: #ff81e7;
}
.confirmModal .confirmBtn .confirmDelete:hover {
  color: #ff81e7;
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .modalContent {
    padding: 10px;
  }
  .modalContent .modalResultArea,
  .modalContent .modalSearchBox,
  .modalContent .modalRegisthBox,
  .modalContent .modalSettingArea,
  .modalContent .modalTeamArea,
  .modalContent .modalArea {
    padding: 10px 10px 12px;
  }
  .modalClose {
    width: 40px;
    height: 40px;
    top: -15px;
    right: -15px;
  }
  .modalClose:before,
  .modalClose:after {
    width: 20px;
  }
  .modalContent .inner {
    max-height: 75vh;
  }
  .modalContent .titLeft {
    margin-bottom: 5px;
    font-size: 1.2rem;
  }
  .modalContent .titCenter {
    margin-bottom: 5px;
    font-size: 1.2rem;
  }
  .modalContent .tableWrap + .titCenter {
    margin-top: 20px;
  }
  .modalContent .table .btn {
    width: 70px;
  }
  .modalResultArea .table th:first-child {
    width: 90px;
  }
  .resultTable {
    min-width: 100%;
  }
  .resultTable.linking {
    min-width: 1000px;
  }
  .modalContent .modalBottomArea {
    display: block;
  }
  .modalContent .modalSearchBox,
  .modalContent .modalRegisthBox {
    width: 100%;
  }
  .modalContent .modalRegisthBox {
    margin: 20px 0 0;
  }
  .modalContent .searchBox form {
    display: block;
  }
  .modalContent .modalBtn {
    margin-top: 10px;
  }
  .modalContent .searchBox .btn {
    margin: 0;
  }
  .confirmModal {
    width: 90%;
    height: auto;
    min-height: 150px;
  }
  .confirmModal .confirmBtn li {
    width: 100px;
  }
  .confirmModal .confirmBtn li + li {
    margin-left: 20px;
  }
  .modalContentUpper {
    width: 89.84375%;
    z-index: 200;
  }
  .modalContentUpper .inner {
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }
  .modalContentUpperDouble {
    width: 89.84375%;
  }
}


/*チェックイン*/
.modalCheckinArea {
  padding: 20px 20px 30px;
  background-color: #f4f8fc;
}
.checkinTit {
  margin-bottom: 10px;
  color: #333;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}
.checkinTable {
  max-width: 960px;
  margin: 0 auto;
}
.modalCheckinArea .flexWrap {
  margin-top: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalCheckinArea .box {
  width: calc(50% - 10px);
  flex: 1 0 auto;
  margin-top: 10px;
}
.modalCheckinArea .box + .box {
  margin-left: 20px;
}
.modalCheckinArea .img {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  margin-left: auto;
  background-color: #fff;
}
.modalCheckinArea .img img {
  width: 100%;
  height: auto;
}
.modalCheckinArea .box a {
  width: 100%;
  max-width: 200px;
  height: 50px;
  color: #0096dc;
  font-size: 1.4rem;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.modalCheckinArea .box a:hover {
  color: #fff;
  background-color: #50bdf0;
}
.modalTable {
  width: 100%;
  table-layout: fixed;
  border: 1px solid #ccc;
  border-radius: 5px;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
  overflow: hidden;
}
.modalTable + .modalTable {
  margin-top: 28px;
}
.modalTable .col1 {
  width: 23.452380952%;
}
.modalTable .col2 {
  width: auto;
}
.modalTable tr + tr {
  border-top: 1px solid #ccc;
}
.modalTable th {
  padding: 16px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: right;
  vertical-align: top;
  background-color: #f3f3f3;
}
.modalTable thead th {
  padding: 4px 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.modalTable tr + tr th,
.modalTable tr + tr td {
  border-top: 1px solid #ccc;
}
.modalTable th + td {
  border-left: 1px solid #ccc;
}
.modalTable td {
  padding: 10px 14px;
  font-size: 1.4rem;
}
.modalTable .caption {
  font-size: 1rem;
  font-weight: bold;
}
.modalTable .formInputList li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}
.modalTable .formInputList li + li {
  margin-top: 14px;
}
.modalTable .formInputList .box {
  /*width: 100%;*/
  min-width: 200px;
  position: relative;
}
.modalTable .formInputList.list2Col .box {
  width: auto;
  min-width: 200px;
}
.modalTable .formInputList.sizeList li {
  flex-wrap: wrap;
}
.modalTable .formInputList.sizeList .box {
  min-width: 50px;
}
.withUnitInput {
  min-width: 0 !important;
}
.withUnitInput .input {
  width: 100px;
  min-width: 0 !important;
}
.modalTable .formInputList .box {
  margin-right: 20px;
}
.modalTable .formInputList .box:last-of-type {
  margin-right: 0;
}
.modalTable .formInputList .otherInput {
  display: inline-block;
}
.modalTable .formInputList .otherBox {
  width: 200px;
  display: none;
  position: relative;
}
.modalTable .age,
.modalTable .zip,
.modalTable .passengers_number {
  max-width: 90px;
}
.cancelCheckinTxt {
  margin: 30px 0;
  text-align: center;
}
.cancelCheckinTxt a,
.cancelCheckinTxt button {
  color: #ff81e7;
  font-size: 1.3rem;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.cancelCheckinTxt a:hover,
.cancelCheckinTxt button:hover {
  text-decoration: none;
}
.checklistBox {
  width: 100%;
  max-width: 510px;
  margin: 0 auto;
}
.menuSelect .hide {
  display: none;
}
.reservationForm .btnSubmit.checkin .btn {
  height: auto !important;
  min-height: 51px;
  padding: 5px 30px 5px 30px;
  line-height: 1.5;
}
.reservationForm .btnSubmit.checkin .btn:before {
  right: 15px;
}
.btnSubmit.checkin .btnBack {
  width: auto;
  height: auto;
  padding: 10px 30px;
  color: #0096dc;
  border: 1px solid #50bdf0;
  background-color: #fff;
}
.btnSubmit.checkin .btnBack:hover {
  color: #fff;
  background-color: #50bdf0;
}
.modalTable .dayList {
  display: flex;
  flex-wrap: wrap;
}
.modalTable .dayList .item {
  margin: 0 15px 0 0;
}
.modalTable .dayList .formError {
  margin-top: -23px !important;
  position: absolute !important;
  white-space: nowrap;
}
.priceSettingTr.is-disabled,
.periodDateTr.is-disabled {
  color: #ccc
}
.priceSettingTr.is-disabled .select,
.priceSettingTr.is-disabled a,
.priceSettingTr.is-disabled label:before,
.priceSettingTr.is-disabled label:after,
.periodDateTr.is-disabled .select,
.periodDateTr.is-disabled a,
.periodDateTr.is-disabled .selectWrapSimple:after {
  color: #ccc;
  border-color: #c5c5c5;
}


@media screen and (max-width: 768px) {
  .modalCheckinArea {
    padding: 20px 20px 30px;
    background-color: #f4f8fc;
  }
  .modalCheckinArea .flexWrap {
    flex-direction: column;
  }
  .modalCheckinArea .tit {
    margin-bottom: 10px;
    color: #333;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
  }
  .modalCheckinArea .box {
    width: 100%;
    flex: 1 0 auto;
    margin-top: 10px;
  }
  .modalCheckinArea .box + .box {
    margin: 10px 0 0;
  }
  .modalCheckinArea .img {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  .modalCheckinArea .img img {
    width: 100%;
    height: auto;
  }
  .modalCheckinArea .box a {
    width: 100%;
    max-width: 100%;
    height: 50px;
    color: #0096dc;
    font-size: 1.4rem;
    border: 1px solid #50bdf0;
    border-radius: 2px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
  }

  .modalTable {
    width: 100%;
    table-layout: fixed;
    border: 1px solid #ccc;
    border-radius: 5px;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;
    overflow: hidden;
  }
  .modalTable + .modalTable {
    margin-top: 28px;
  }
  .modalTable .col1 {
    width: 70px;
  }
  .modalTable .col2 {
    width: auto;
  }
  .modalTable tr + tr {
    border-top: 1px solid #ccc;
  }
  .modalTable th {
    padding: 16px 5px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: right;
    word-break: break-all;
    vertical-align: top;
    background-color: #f3f3f3;
  }
  .modalTable thead th {
    padding: 4px 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  .modalTable tr + tr th,
  .modalTable tr + tr td {
    border-top: 1px solid #ccc;
  }
  .modalTable th + td {
    border-left: 1px solid #ccc;
  }
  .modalTable td {
    padding: 10px 14px;
  }
  .modalTable .caption {
    font-size: 1rem;
    font-weight: bold;
  }
  .modalTable .formInputList li {
    flex-wrap: wrap;
  }
  .modalTable .formInputList li + li {
    margin-top: 14px;
  }
  .modalTable .formInputList .box {
    width: 100%;
    min-width: 100%;
    position: relative;
  }
  .modalTable .formInputList.list2Col .box {
    width: 100%;
    min-width: 100%;
  }
  .modalTable .formInputList .box + .box {
    margin: 10px 0 0;
  }
  .modalTable .formInputList .otherInput {
    display: inline-block;
  }
  .modalTable .formInputList .otherBox {
    width: 100%;
    display: none;
    position: relative;
  }
  .modalTable .zip {
    max-width: 90px;
  }
  .cancelCheckinTxt {
    margin: 10px 0;
    text-align: center;
  }
  .cancelCheckinTxt a {
    color: #ff81e7;
    font-size: 1.3rem;
    text-decoration: underline;
  }
  .cancelCheckinTxt a:hover {
    text-decoration: none;
  }
  .modalTable .dayList {
    margin-top: -5px;
  }
  .modalTable .dayList .item {
    margin-top: 5px;
  }
}

.ageBox.hide,
.rental.hide,
.rentalEquip.hide,
.rentalTrue.hide,
.organizationHasRank.hide,
.organizationOther.hasRank,
.cCardOtherBox,
.rankBox.hide {
  display: none;
}
.cCardOtherBox.is-show {
  display: block;
}
/* モーダル内の Cカード行は tr。block だとテーブルレイアウトが崩れる（OK-1138） */
.modalTable tr.cCardOtherBox.is-show {
  display: table-row;
}
.organizationSpecialty.is-hide {
  display: none;
}
.remarksTable td {
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: left;
}

/*週表示*/
.week .scrollableTableWrap {
  margin-right: 0;
}
.week .scrollableTable {
  width: 100%;
  min-width: 960px;
  height: 100%;
  margin-right: 0;
}
.week .scrollableTable th {
  width: calc(100% / 7) !important;
}
.week .scrollableTable th:nth-child(6),
.week .scrollableTable th:nth-child(7),
.week .scrollableTable th.holiday {
  color: #f05094;
}
.week .scrollableTable td .inner {
  height: 100%;
  display: block;
}
.week .scrollableTable td {
  height: 100%;
  padding: 0;
  vertical-align: top;
}
.week .scrollableTable td a {
  width: 100%;
  height: 100%;
  padding: 11px 10px 10px;
  color: #333;
  text-decoration: none;
  transition: .3s;
}
.week .scrollableTable td a:hover {
  background-color: rgba(80, 189, 240, .1);
}
.week .scrollableTable tr.odd td {
  background-color: #fff;
}
.week .scrollableTable .total {
  height: 20px;
  vertical-align: middle;
}
.week .scrollableTable .weekItem {
  width: 100%;
  min-height: 21px;
  padding: 2px 10px 3px;
  margin-bottom: 2px;
  color: #fff;
  font-size: 1rem;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.week .scrollableTable .weekItem.request {
  position: relative;
}
.week .scrollableTable .weekItem.request:after {
  pointer-events: none;
  display: block;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  border: solid 1px #fff;
  background-color: #FF5555;
  content: '';
}
@media screen and (max-width: 767px) {
  .week .scrollableTable .weekItem.request:after {
    width: 4px;
    height: 4px;
  }
}
.week .scrollableTable .memoCell {
  min-height: 35px;
  padding: 11px 10px 10px;
  vertical-align: top;
}
.week .scrollableTable .memoCell span {
  width: auto;
  height: auto;
  padding: 0;
  left: 0;
}

/*月表示*/
.month .scrollableTableWrap {
  margin-right: 0;
}
.week .scrollableTable,
.month .scrollableTable {
  width: 100%;
  min-width: 960px;
  height: 100%;
  margin-right: 0;
  table-layout: fixed;
}
.month .scrollableTable th {
  width: calc(100% / 7) !important;
}
.month .scrollableTable th:nth-child(6),
.month .scrollableTable th:nth-child(7),
.month .scrollableTable td:nth-child(6) a .day,
.month .scrollableTable td:nth-child(7) a .day,
.month .scrollableTable td.holiday a .day {
  color: #f05094;
}
.month .scrollableTable td.blankCell {
  background-color: transparent;
}
.month .scrollableTable td.outsideMonth {
  background-color: #f7f7f7;
}
.month .scrollableTable td.outsideMonth a {
  color: #999;
}
.month .scrollableTable td.outsideMonth a .day {
  color: #999;
}
.month .scrollableTable td.outsideMonth:nth-child(6) a .day,
.month .scrollableTable td.outsideMonth:nth-child(7) a .day,
.month .scrollableTable td.outsideMonth.holiday a .day {
  color: #d8a0b8;
}
.month .scrollableTable td.outsideMonth a:hover {
  background-color: rgba(80, 189, 240, .05);
}
.month .table td .inner {
  height: 100%;
  flex-wrap: wrap;
}
.month .scrollableTable tr.odd td {
  background-color: #fff;
}
.month .scrollableTable td {
  height: 100%;
  border-bottom: none;
  padding: 0;
  border-bottom: 2px solid #ccc;
}
.month .scrollableTable td a {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 15px 0 15px;
  display: flex;
  flex-direction: column;
  color: #333;
  text-decoration: none;
  transition: .3s;
}
.month .scrollableTable td a:hover {
  background-color: rgba(80, 189, 240, .1);
}
.month .scrollableTable td.blankCell a {
  pointer-events: none;
}
.month .scrollableTable .day {
  margin-bottom: 5px;
  font-size: 1.8rem;
  font-weight: bold;
  order: 1;
}
.month .scrollableTable .reserveNum {
  width: 100%;
  padding: 0 12px 0 8px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  order: 3;
}
.month .scrollableTable .reserveNum li {
  margin-top: 3px;
  font-size: 1rem;
  display: flex;
}
.month .scrollableTable .reserveNum .courseName {
  width: 60px;
  height: 18px;
  margin-right: 6px;
  text-align: right;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.month .scrollableTable .reserveNum .icon {
  margin: -1px 0 0 -1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1;
}
.month .scrollableTable .reserveNum .num {
  margin-left: 5px;
  padding-top: 2px;
}
.month .scrollableTable .reserveNum .icon span {
  width: 15px;
  height: 15px;
  margin: 1px 0 0 1px;
  border-radius: 50px;
  border: 1px solid #fff;
  display: block;
  order: 1;
}
.month .scrollableTable .total {
  width: 100%;
  min-height: 18px;
  padding: 0 12px 4px;
  font-size: 1rem;
  text-align: right;
  order: 2;
}

/*メモアイコン*/
.table .editMemo {
  padding: 0 0 0 15px;
  color: #555;
  font-size: 1rem;
  text-align: left;
  display: block;
  word-break: break-all;
}
.table .editMemo.is_disabled {
  pointer-events: none;
}
.table .editMemo .memoIcon {
  height: 13px !important;
  overflow: hidden;
  right: auto;
  left: 0;
}
.week .table .editMemo,
.month .table .editMemo {
  height: 100%;
  min-height: 1.5em;
  margin-top: auto;
  padding: 0 8px 0 15px;
  order: 4;
  overflow-wrap: break-word;
  line-break: anywhere;
  cursor: pointer;
  transition: .3s;
}
.week .table .editMemo:hover,
.month .table .editMemo:hover {
  opacity: .7;
}
.week .table .memoIcon,
.month .table .memoIcon {
  width: auto;
  top: 0;
  left: 0;
  transform: translateY(0);
}

.month .table .reserveNumCell {
  border-bottom: 1px solid #ccc;
}
.month .table .monthMemoCell {
  padding: 11px 10px 10px;
  border-top: none;
  border-bottom: 2px solid #ccc;
}
.month .table .lodgingCell {
  border-top: none;
  border-bottom: 1px solid #ccc;
  vertical-align: top;
}
.month .table .lodgingCell .inner {
  min-height: 100%;
  align-items: flex-start;
}
.month .table .lodgingCell a {
  padding: 7px 0;
}


/* 予約台帳表示改修 */
.reservationList {
  width: 100%;
}
.reservationList .itemRow {
  display: flex;
  align-items: center;
}
.reservationList .itemName {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-size: 1rem;
}
.reservationList .team .itemRow {
  min-height: 25px;
  padding: 5px;
  font-weight: bold;
}
.reservationList .team .itemRow .itemName {
  font-weight: bold;
}
.reservationList .itemReservationNum {
  margin-left: auto;
  padding-left: 2px;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
}
.listItem + .team {
  border-top: 1px solid #CCCCCC;
}
.reservationList .itemRow {
  min-height: 21px;
  padding: 6px 6px 5px;
}
.reservationList .member:not(:first-of-type) .itemRow {
  border-top: 1px solid #E8E8E8;
}
.reservationList .team + .member .itemRow,
.reservationList .course + .member .itemRow {
  border-top: none;
}
.reservationList .course > .itemRow {
  color: #fff;
}
.reservationDetails .course.fun .itemRow {
  background-color: #41A1ED;
}
.reservationDetails .course.c_card .itemRow {
  background-color: #F5BF35;
}
.reservationDetails .course.experience .itemRow {
  background-color: #AD6BC7;
}
.reservationDetails .course.snorkeling .itemRow {
  background-color: #39D0D0;
}
.reservationDetails .course.whale .itemRow {
  background-color: #6975BF;
}
.reservationDetails .course.joint_partnership .itemRow {
  background-color: #818181;
}
.reservationDetails .course.charter .itemRow {
  background-color: #E97E5D;
}
.reservationDetails .course.free_diving .itemRow {
  background-color: #96A0D2;
}
.reservationDetails .course.time .itemRow {
  background-color: #EB6D85;
}
.reservationDetails .course.skin_diving .itemRow {
  background-color: #5DB473;
}
.reservationDetails .course.lodging .itemRow{
  background-color: #AFCF34;
}
.reservationDetails .course.tour_event .itemRow {
  background-color: #D3871F;
}
.reservationDetails .course.field_activity .itemRow {
  background-color: #1CB546;
}
.reservationDetails .course.activity .itemRow {
  background-color: #FF6499;
}

/*** リクエスト表記 ***/
.reservation.week .reservationList .request,
.reservation.month .reservationList .request,
.top .reservationList .request {
  position: relative;
}
.reservation.week .reservationList .request::before,
.reservation.month .reservationList .request::before,
.top .reservationList .request::before
 {
  pointer-events: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 2;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  border: solid 1px #fff;
  background-color: #FF5555;
  content: '';
}
@media screen and (max-width: 767px) {
  .reservation.week .reservationList .request::before,
  .reservation.month .reservationList .request::before,
  .top .reservationList .request::before
   {
    width: 4px;
    height: 4px;
  }
}

.reservationDetailsWrap {
  padding: 15px 14px;
  margin-bottom: 9px;
  border: 1px solid #CCCCCC;
  border-radius: 7px;
  background-color: #fff;
}
.reservationDetails {
  width: calc(100% + 8px);
  margin-left: -8px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}
.reservationDetails .listItem {
  width: calc((100% - (10px * 4)) / 5);
  margin-left: 8px;
}
.reservationList.reservationDetails .course dt {
  padding: 8px 8px 7px;
  font-weight: bold;
  border-radius: 5px;
}
.reservationList.reservationDetails .course dd {
  height: 0;
  min-height: 0;
  padding: 0 8px;
  visibility: hidden;
  opacity: 0;
  transition: .2s;
}
.reservationDetails.reservationList .itemName {
  font-size: 1.2rem;
}
.reservationDetails.reservationList .course .itemRow {
  line-height: 1.2;
}
.reservationDetails.reservationList .course dd.itemRow {
  color: #333;
  border-bottom: 1px solid #EAEAEA;
  background-color: #fff;
}
.reservationDetails.is-active .course dd {
  height: auto;
  min-height: 21px;
  padding: 8px 8px 7px;
  visibility: visible;
  opacity: 1;
}
.reservationDetailsButton {
  width: 100%;
  border: 1px solid #E9E9E9;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.reservationDetailsButton span {
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
}
.reservationDetailsButton svg {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.is-active + .reservationDetailsButton svg .expandLine49,
.is-active + .reservationDetailsButton svg .expandLine51 {
  fill: #50bdf0;
  stroke: #50bdf0;
}

@media screen and (max-width: 768px) {
  .reservationDetails .listItem {
    width: calc(50% - 8px);
  }
}

.week .reservationList .joint_partnership.request:not(.member) .itemName:after {
  content: normal;
}
.month .cellContent {
  width: 100%;
  order: 2;
}
.month .reservationList .request .itemName:after {
  content: normal;
}
.month.beta .scrollableTable {
  min-width: 0;
}
.month.beta .scrollableTable .day {
  min-height: 40px;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #E8E8E8;
}
.week .scrollableTable td:not(.lodgingCell) a,
.month.beta .scrollableTable td:not(.lodgingCell) a {
  padding: 0;
}
.month.beta .table .reserveNumCell,
.month.beta .table .lodgingCell {
  border-bottom: none;
}
.month.beta .table .lodgingCell,
.month.beta .table .monthMemoCell {
  border-top: 1px solid #E8E8E8;
}

@media screen and (max-width: 768px) {
  .header .subNav .innerBeta {
    padding-top: 10px;
    padding-bottom: 5px;
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .header .guideLinkBeta {
    margin-top: 7px;
  }
  .header .guideLinkBeta a {
    padding-left: 24px;
  }
  .header .guideLinkBeta a span {
    opacity: 1;
    position: static;
  }
  .month.beta .scrollableTable .day {
    min-height: 30px;
  }
  .reservationList .course .itemRow,
  .reservationList .team .itemRow {
    padding: 3px 2px;
  }
  .reservationList .team .itemRow {
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
  }
  .reservationList .team .itemRow,
  .reservationList .member .itemRow {
    padding: 2px;
  }
  .reservationList .team .itemRow .itemReservationNum {
    margin-left: 0;
    padding-left: 0;
  }
  .month.beta .scrollableTable td a {
    min-height: 0;
  }
}

/* βテスト */
.week .scrollableTableWrap,
.month.beta .scrollableTableWrap {
  width: calc(100% + 44px);
  margin-left: -22px;
  margin-right: -22px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.overLimitItem {
  display: none;
}
/* .overLimitItemCount {
  width: 82.142857173%;
  margin: 5px auto 0;
  text-align: left;
  position: relative;
} */

@media screen and (max-width: 768px) {
  .week .scrollableTableWrap,
  .month.beta .scrollableTableWrap {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
  }
  .month.beta .table thead th,
  .month.beta .table .monthMemoCell {
    border-bottom: 0;
  }
  .month.beta .scrollableTable .day {
    font-weight: bold;
   }
}




@media screen and (max-width: 768px) {
  .month .scrollableTable {
    width: 100%;
    min-width: 0;
  }
  .month .scrollableTable td {
    height: auto;
    border-bottom: none;
  }
  .month .scrollableTable td a {
    min-height: 62px;
    padding: 5px 3px 7px;
  }
  .month .scrollableTable td .inner {
    min-height: 0;
  }
  .month .scrollableTable .day {
    margin-bottom: 2px;
    color: #666;
    font-size: 1.2rem;
    font-weight: normal;
  }
  .month .scrollableTable .reserveNum .courseName {
    display: none;
  }
  .month .scrollableTable .reserveNum {
    width: auto;
    margin: 2px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    order: 3;
  }
  .month .scrollableTable .reserveNum .num {
    display: none;
  }
  .month .scrollableTable .reserveNum .icon span {
    width: 7px;
    height: 7px;
    display: none;
  }
  .month .scrollableTable .reserveNum .icon span:first-of-type {
    display: block;
  }
  .month .scrollableTable .total {
    margin: 0;
    padding: 0;
    color: #0096dc;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    order: 2;
  }
  .month .scrollableTable .total span {
    display: none;
  }
  .month .scrollableTable .reserveNum .courseName {
    height: 17px;
  }

  /*メモアイコン*/
  .table .editMemo {
    padding: 0 0 0 15px;
    color: #555;
    font-size: 1rem;
    text-align: left;
    display: block;
  }
  .table .editMemo .memoIcon {
    height: 13px !important;
    overflow: hidden;
    right: auto;
    left: 0;
  }
  .week .table .editMemo {
    width: 100%;
  }
  .week .table .monthMemoCell,
  .month .table .monthMemoCell {
    height: 2em;
    padding: 5px;
  }
  .week .table .editMemo,
  .month .table .editMemo {
    min-height: 1.5em;
    margin-top: auto;
    padding: 0 0 0 15px;
    order: 4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .week .table .memoIcon,
  .month .table .memoIcon {
    width: auto;
    top: 0;
    left: 0;
    transform: translateY(0);
  }

  .month .scrollableTable .reserveNum .icon span {
    order: 2;
  }
  .month .scrollableTable .reserveNum .icon .request {
    order: 1;
  }

  /* メモモーダル */
  .modalContentMemo {
    height: 80vh;
  }
  .modalContentMemo .inner,
  .modalContentMemo .modalArea,
  .modalContentMemo .memoBody,
  .modalContentMemo form,
  .modalContentMemo textarea {
    height: 100%;
    max-height: 100%;
  }
  .modalContentMemo form {
    display: flex;
    flex-direction: column;
  }
  .modalContentMemo .memoWrap {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

/*カテゴリー色設定*/
.categoryList a {
  color: #fff;
}
/* ファン */
.categoryList .fun a {
  background-color: #41A1ED;
}
.categoryList .fun a:hover {
  background-color: #fff;
  border-color: #41A1ED;
}
.week .scrollableTable .weekItem.fun {
  background-color: #41A1ED;
}
.month .scrollableTable .reserveNum .fun .courseName {
  border: 1px solid #41A1ED;
  background-color: rgba(195, 227, 254, .5);
}
.month .scrollableTable .reserveNum .fun span {
  background-color: #41A1ED;
}
.month .scrollableTable .reserveNum span.request {
  border: 1px solid #FC7778;
  order: 2;
}

/* Cカード */
.categoryList .c_card a {
  background-color: #F5BF35;
}
.categoryList .c_card a:hover {
  background-color: #fff;
  border-color: #F5BF35;
}
.week .scrollableTable .weekItem.c_card {
  background-color: #F5BF35;
}
.month .scrollableTable .reserveNum .c_card .courseName {
  border: 1px solid #F5BF35;
  background-color: rgba(254, 252, 195, .5);
}
.month .scrollableTable .reserveNum .c_card span {
  background-color: #F5BF35;
}

/* 体験 */
.categoryList .experience a {
  background-color: #AD6BC7;
}
.categoryList .experience a:hover {
  background-color: #fff;
  border-color: #AD6BC7;
}
.week .scrollableTable .weekItem.experience {
  background-color: #AD6BC7;
}
.month .scrollableTable .reserveNum .experience .courseName {
  border: 1px solid #AD6BC7;
  background-color: rgba(233, 225, 255, .5);
}
.month .scrollableTable .reserveNum .experience span {
  background-color: #AD6BC7;
}

/* シュノーケリング */
.categoryList .snorkeling a {
  background-color: #39D0D0;
}
.categoryList .snorkeling a:hover {
  background-color: #fff;
  border-color: #39D0D0;
}
.week .scrollableTable .weekItem.snorkeling {
  background-color: #39D0D0;
}
.month .scrollableTable .reserveNum .snorkeling .courseName {
  border: 1px solid #39D0D0;
  background-color: rgba(218, 254, 195, .5);
}
.month .scrollableTable .reserveNum .snorkeling span {
  background-color: #39D0D0;
}

/* ホエール */
.categoryList .whale a {
  background-color: #6975BF;
}
.categoryList .whale a:hover {
  background-color: #fff;
  border-color: #6975BF;
}
.week .scrollableTable .weekItem.whale {
  background-color: #6975BF;
}
.month .scrollableTable .reserveNum .whale .courseName {
  border: 1px solid #6975BF;
  background-color: rgba(226, 226, 226, .5);
}
.month .scrollableTable .reserveNum .whale span {
  background-color: #6975BF;
}

/* マリンィビティアクテ */
.categoryList .activity a {
  background-color: #FF6499;
}
.categoryList .activity a:hover {
  background-color: #fff;
  border-color: #FF6499;
}
.week .scrollableTable .weekItem.activity {
  background-color: #FF6499;
}
.month .scrollableTable .reserveNum .activity .courseName {
  border: 1px solid #FF6499;
  background-color: rgba(226, 226, 226, .5);
}
.month .scrollableTable .reserveNum .activity span {
  background-color: #FF6499;
}

/* 乗合 */
.categoryList .jointPartnership a {
  background-color: #818181;
}
.categoryList .jointPartnership a:hover {
  background-color: #fff;
  border-color: #818181;
}
.categoryList .jointPartnership a {
  background-color: #818181;
}
.categoryList .jointPartnership a:hover {
  background-color: #fff;
  border-color: #818181;
}
.week .scrollableTable .weekItem.jointPartnership {
  background-color: #818181;
}
.month .scrollableTable .reserveNum .jointPartnership .courseName {
  border: 1px solid #818181;
  background-color: rgba(226, 226, 226, .5);
}
.month .scrollableTable .reserveNum .jointPartnership .guest {
  background-color: #818181;
  border: 1px solid #fff;
}
.month .scrollableTable .reserveNum .jointPartnership .staff {
  box-shadow: inset 0 0 0 1px #818181,
  inset 0 0 0 14px #fff;
  border: 1px solid transparent;
}

.categoryList .blank a {
  pointer-events: none;
}

/* チャーター */
.categoryList .charter a {
  background-color: #E97E5D;
}
.categoryList .charter a:hover {
  background-color: #fff;
  border-color: #E97E5D;
}
.week .scrollableTable .weekItem.charter {
  background-color: #E97E5D;
}
.month .scrollableTable .reserveNum .charter .courseName {
  border: 1px solid #E97E5D;
  background-color: rgba(245, 228, 252, .5);
}
.month .scrollableTable .reserveNum .charter span {
  background-color: #E97E5D;
}

/* フリーダイビング */
.categoryList .free_diving a {
  background-color: #96A0D2;
}
.categoryList .free_diving a:hover {
  background-color: #fff;
  border-color: #96A0D2;
}
.week .scrollableTable .weekItem.free_diving {
  background-color: #96A0D2;
}
.month .scrollableTable .reserveNum .free_diving .courseName {
  border: 1px solid #96A0D2;
  background-color: rgba(223, 250, 247, .5);
}
.month .scrollableTable .reserveNum .free_diving span {
  background-color: #96A0D2;
}

/* 時間予約 */
.categoryList .time a {
  background-color: #EB6D85;
}
.categoryList .time a:hover {
  background-color: #fff;
  border-color: #EB6D85;
}
.week .scrollableTable .weekItem.time {
  background-color: #EB6D85;
}
.month .scrollableTable .reserveNum .time .courseName {
  border: 1px solid #EB6D85;
  background-color: rgba(252, 228, 228, .5);
}
.month .scrollableTable .reserveNum .time span {
  background-color: #EB6D85;
}

/* スキンダイビング */
.categoryList .skin_diving a {
  background-color: #5DB473;
}
.categoryList .skin_diving a:hover {
  background-color: #fff;
  border-color: #5DB473;
}
.week .scrollableTable .weekItem.skin_diving {
  background-color: #5DB473;
}
.month .scrollableTable .reserveNum .skin_diving .courseName {
  border: 1px solid #5DB473;
  background-color: rgba(228, 247, 233, .5);
}
.month .scrollableTable .reserveNum .skin_diving span {
  background-color: #5DB473;
}

/* 宿泊 */
.categoryList .lodging a {
  background-color: #AFCF34;
}
.categoryList .lodging a:hover {
  background-color: #fff;
  border-color: #AFCF34;
}
.week .scrollableTable .weekItem.lodging {
  background-color: #AFCF34;
}
.month .scrollableTable .reserveNum .lodging .courseName {
  border: 1px solid #AFCF34;
  background-color: rgba(241, 247, 220, .5);
}
.month .scrollableTable .reserveNum .lodging span {
  background-color: #AFCF34;
}

/* ツアーイベント */
.categoryList .tour_event a {
  background-color: #D3871F;
}
.categoryList .tour_event a:hover {
  background-color: #fff;
  border-color: #D3871F;
}
.week .scrollableTable .weekItem.tour_event {
  background-color: #D3871F;
}
.month .scrollableTable .reserveNum .tour_event .courseName {
  border: 1px solid #D3871F;
  background-color: rgba(241, 245, 228, .5);
}
.month .scrollableTable .reserveNum .tour_event span {
  background-color: #D3871F;
}

/* フィールド */
.categoryList .field_activity a {
  background-color: #00B546;
}
.categoryList .field_activity a:hover {
  background-color: #fff;
  border-color: #00B546;
}
.week .scrollableTable .weekItem.field_activity {
  background-color: #00B546;
}
.month .scrollableTable .reserveNum .field_activity .courseName {
  border: 1px solid #00B546;
  background-color: rgba(255, 204, 204, .5);
}
.month .scrollableTable .reserveNum .field_activity span {
  background-color: #00B546;
}

/*一括編集*/
.selectEditRecordsRow {
  align-items: center;
  margin-bottom: 10px;
}
.selectEditRecordsRow .selectEditBox {
  margin-bottom: 0;
}
.selectEditBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 10px;
}
.selectEditBox .printBtn {
  display: none;
  font-size: 1.2rem;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 2px;
}
.reservation.custom .selectEditBox .printBtn,
.reservation.team .selectEditBox .printBtn  {
  display: flex;
  position: relative;
  cursor: pointer;
}
.reservation.custom .selectEditBox .printBtn::before,
.reservation.team .selectEditBox .printBtn::before {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 4px 0 0;
  background: url(../img/common/ico_print.svg) no-repeat center center / 100%;
  content: '';
  transition: .3s;
}
.reservation.custom .selectEditBox .printBtn:hover::before,
.reservation.team .selectEditBox .printBtn:hover::before {
  background-image: url(../img/common/ico_print-hover.svg);
}
.editSelectedRecordsBox {
  margin-bottom: 10px;
}
.selectEditBox .editSelectedRecordsBox {
  margin-bottom: 0;
}
.editSelectedRecordsBox .btn {
  width: 120px;
  min-height: 26px;
  padding-bottom: 1px;
  color: #0096dc;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.editSelectedRecordsBox .btn:hover {
  color: #fff;
}
.is-disabled .btn {
  pointer-events: none;
  color: #989999;
  border-color: #989999;
}
.selectAllRecordsWrap {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.selectColWrap {
  position: static;
  transform: translateY(0);
}
td .selectAllRecordsWrap {
  left: 0;
}
.selectAllRecordsWrap .checkbox + label {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  left: 0;
}

.selectAllRecordsWrap .checkbox + label:before {
  border-color: #ccc;
  border-radius: 2px;
  background-color: #fff;
}

.contentTime {
  margin-top: 40px;
}



/*フォームパーツ*/
.input {
  width: 100%;
  max-width: 200px;
  height: 25px;
  padding: 3px 8px 4px;
  color: #333;
  font-size: 1.2rem;
  border: 1px solid #50bdf0;
  -webkit-appearance: none;
}
.input:focus {
  border: 1px solid #50bdf0;
}
.input::-webkit-input-placeholder {
  color: #999;
  font-weight: normal;
}
.input:-ms-input-placeholder {
  color: #999;
  font-weight: normal;
}
.input::-moz-placeholder {
  color: #999;
  font-weight: normal;
}
.inputPref {
  max-width: 200px;
}
.inputFull {
  max-width: 100%;
}
.inputMedium {
  max-width: 231px;
}
.inputShort {
  max-width: 100px;
}
.inputReadonly {
  background-color: #f4f8fa;
}
.input--tall {
  min-height: 37px;
}
.customer.edit .input.inputShort {
  min-width: 0;
}
.radio.other + label + .otherBox,
.checkbox.other + label + .otherBox {
  display: none;
}
.radio.other:checked + label + .otherBox,
.checkbox.other:checked + label + .otherBox {
  display: inline-block;
  position: relative;
}
.cCardSelect {
  margin-top: -13px;
}
.rankSelect .formError {
  margin-top: 2px !important;
}
.radio,
.checkbox {
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.radio + label,
.checkbox + label {
  padding-left: 20px;
  margin: 7px 30px 0 0;
  font-size: 1.2rem;
  line-height: 1.5;
  cursor: pointer;
  position: relative;
  display: inline-block;
}
.radio + label:before,
.radio + label:after,
.checkbox + label:before,
.checkbox + label:after {
  content: "";
  position: absolute;
}
.radio + label:before,
.checkbox + label:before {
  width: 14px;
  height: 14px;
  top: 2px;
  left: 0;
  z-index: 1;
}
.radio + label:after,
.checkbox + label:after {
  z-index: 10;
  opacity: 0;
}
.radio + label:before,
.radio + label:after {
  border-radius: 50%;
  border: 1px solid #50bdf0;
}
.radio + label:after {
  width: 10px;
  height: 10px;
  top: 4px;
  left: 2px;
  background-color: #50bdf0;
}
.checkbox + label:before {
  border: 1px solid #666;
  border-radius: 2px;
  background-color: #fff;
}
.checkbox.blue + label:before {
  border: 1px solid #50BDF0;
}
.checkbox + label:after {
  width: 10px;
  height: 10px;
  top: 5px;
  left: 3px;
  z-index: 10;
  background: url(../img/common/ico_check.png) no-repeat center / cover;
}
.radio:checked + label:after,
.checkbox:checked + label:after {
  opacity: 1;
}
.checkbox:checked + label:before {
  background-color: #50bdf0;
}
.radioList {
  margin: -7px -5px 0;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.radioList.alignC {
  justify-content: center;
}
.radioList.alignFS {
  justify-content: flex-start;
}
.radio.bar + label,
.checkbox.bar + label,
.bar .radio + label,
.bar .checkbox + label {
  width: 100%;
  min-height: 42px;
  padding: 10px 10px 9px 38px;
  margin: 7px 5px 0;
  font-size: 1.4rem;
  border: 1px solid #acbbc3;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.radio.bar + label .price,
.checkbox.bar + label .price {
  width: 140px;
  padding-left: 5px;
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: right;
  flex-shrink: 1;
  align-self: center;
  word-break: break-all;
}
.radio.bar + label:before,
.radio.bar + label:after,
.checkbox.bar + label:before,
.checkbox.bar + label:after,
.bar .radio + label:before,
.bar .radio + label:after,
.bar .checkbox + label:before,
.bar .checkbox + label:after {
  top: 50%;
  transform: translateY(-50%);
}
.radio.bar + label:before,
.checkbox.bar + label:before,
.bar .radio + label:before,
.bar .checkbox + label:before {
  width: 21px;
  height: 21px;
  border: 1px solid #acbbc3;
  background-color: #fff;
  left: 10px;
}
.checkbox.bar + label:before,
.bar .checkbox + label:before {
  border-radius: 3px;
}
.radio.bar + label:after,
.checkbox.bar + label:after,
.bar .radio + label:after,
.bar .checkbox + label:after {
  width: 12px;
  height: 13px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background: url(../img/common/ico_check_blue.png) no-repeat center / cover;
  left: 16px;
}
.radio.bar:checked + label,
.checkbox.bar:checked + label,
.bar .radio:checked + label,
.bar .checkbox:checked + label {
  color: #fff;
  border: 1px solid #50bdf0;
  background-color: #50bdf0;
}
.radio.bar:checked + label:before,
.checkbox.bar:checked + label:before,
.bar .radio:checked + label:before,
.bar .checkbox:checked + label:before {
  border: 1px solid #50bdf0;
}
.radio.bar.half + label,
.checkbox.bar.half + label,
.bar.half .radio + label,
.bar.half .checkbox + label {
  width: calc(50% - 10px);
}
.bar.oneThird .radio + label,
.bar.oneThird .checkbox + label {
  width: calc(33.333333% - 10px);
}
.radio.bar.noFrame + label,
.checkbox.bar.noFrame + label {
  width: 100%;
  border: none;
  background-color: transparent;
}
.radio.bar.noFrame + label:before,
.checkbox.bar.noFrame + label:before {
  background-color: transparent;
}
.radio.bar.noFrame + label:after,
.checkbox.barnoFrame + label:after {
  background: url(../img/common/ico_check.png) no-repeat center / cover;
}
.radio.bar.noFrame:checked + label,
.checkbox.bar.noFrame:checked + label {
  color: #0096dc;
  border: none;
  background-color: transparent;
}
.radio.bar.noFrame:checked + label:before,
.checkbox.bar.noFrame:checked + label:before {
  color: #0096dc;
  border-color: #50bdf0;
  background-color: #50bdf0;
}
.radio.bar.noFrame.half + label,
.checkbox.bar.noFrame.half + label {
  width: calc(50% - 10px);
}
.radio.bar.aThird + label,
.checkbox.bar.aThird + label,
.bar.aThird .radio + label,
.bar.aThird .checkbox + label {
  width: calc((100% / 3) - 10px);
}
.radio.hide,
.radio.hide + label {
  display: none;
}

.checkbox.excludeTeamId + label,
.checkbox.excludeOptionId + label {
  color: #fff;
  border: 1px solid #50bdf0;
  background-color: #50bdf0;
}
.checkbox.excludeTeamId + label:after,
.checkbox.excludeOptionId + label:after {
  width: 15px;
  height: 3px;
  background: #50BEF1;
  left: 14px;
  opacity: 1;
}

@media screen and (min-width: 769px) {
  .radio.bar + label:hover,
  .checkbox.bar + label:hover,
  .bar .radio + label:hover,
  .bar .checkbox + label:hover {
    color: #fff;
    border: 1px solid #50bdf0;
    background-color: #50bdf0;
  }
  .radio.bar + label:hover:before,
  .checkbox.bar + label:hover:before,
  .bar .radio + label:hover:before,
  .bar .checkbox + label:hover:before {
    border: 1px solid #50bdf0;
  }
  .radio.bar.noFrame + label:hover,
  .checkbox.bar.noFrame + label:hover {
    color: #0096dc;
    border: none;
    background-color: transparent;
  }
  .radio.bar.noFrame + label:hover:before,
  .checkbox.bar.noFrame + label:hover:before {
    border-color: #acbbc3;
  }
}

.selectWrap {
  width: 170px;
  height: 42px;
  border: 1px solid #acbbc3;
  border-radius: 3px;
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
}
.selectWrap.wide {
  width: 245px;
}
.selectWrap:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 14px solid #333;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 14px solid transparent;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) translateY(7px);
  pointer-events: none;
}
.selectWrap select {
     -moz-appearance: none;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  padding: 0 15px 0 8px;
  outline-style: none;
}
/* .selectWrap select.is-init {
  color: #acbbc3;
} */
.radioList input[name="menu"],
.radioList input[name="menu"] + label {
  display: none;
}
.selectWrapSimple {
  margin: -1px 5px 0 0;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.selectWrapSimple:after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  position: absolute;
  bottom: 11px;
  right: 8px;
  transform: rotate(45deg);
  pointer-events: none;
}
.selectWrapSimple select {
  height: 24px;
  border: 1px solid #50bdf0;
  outline-style: none;
}
.selectWrap--compact {
  padding-bottom: 1px;
  border: 1px solid #333333;
  border-radius: 3px;
  cursor: default;
}
.selectWrap--compact:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 7px solid #000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: none;
  position: absolute;
  bottom: 7px;
  right: 6px;
  transform: rotate(0);
  pointer-events: none;
}
.selectWrap--compact select {
  height: 19px;
  cursor: pointer;
}

/*管理画面用セレクトボックス*/
.select {
  width: 100%;
  height: 25px;
  padding: 0 18px 4px 8px;
  color: #333;
  font-size: 1.2rem;
  border: 1px solid #50bdf0;
  border-radius: 0;
  -webkit-appearance: none;
          appearance: none;
}
.select.sizeS {
  padding: 0 16px 0px 6px;
}
.textarea {
  width: 100%;
  height: 200px;
  padding: 5px 8px 4px;
  border: 1px solid #50bdf0;
}
@media screen and (max-width: 768px) {
  .selectWrapSimple {
  }
  .select {
    width: auto;
  }
}


.btnSubmit {
  min-width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.btnSubmit .btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  width: 100%;
  max-width: 520px;
  margin: 41px auto 0;
  height: 60px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  border: 1px solid #999;
  border-radius: 2px;
  background-color: #7cd123;
  transition: .3s;
}
.btnSubmit .btn:hover {
  color: #7cd123;
  background-color: #fff;
}
.btnSubmit.is-disabled {
  pointer-events: none;
}
.btnSubmit.is-disabled .btn {
  background-color: #ccc;
}
.btnSubmit .rowWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  position: relative;
}
.btnSubmit .rowWrap .btn {
  margin: 0;
}
.btnSubmit .rowWrap .btnAdd,
.btnSubmit .rowWrap .btnBackCourse {
  max-width: 200px;
  margin-right: 20px;
  color: #7cd123;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.3;
  border: 1px solid #7cd123;
  border-radius: 2px;
  background-color: #fff;
  transition: .3s;
}
.btnSubmit .rowWrap .btnAdd:hover,
.btnSubmit .rowWrap .btnBackCourse:hover {
  color: #fff;
  border: 1px solid #fff;
  background-color: #7cd123;
}
.btnSubmit.btnSubmit--s .btn {
  margin-top: 0;
  height: 26px;
}

/*戻るボタン*/
.btnSubmit .btnBack {
  width: 120px;
  min-height: 26px;
  margin-top: 17px;
  color: #7cd123;
  font-size: 1.2rem;
  border: 1px solid #7cd123;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  transition: .3s;
}
.btnSubmit .btnBackL {
  width: 100%;
  max-width: 520px;
  margin: 41px auto 0;
  height: 60px;
  font-size: 1.4rem;
}
.btnSubmit .btnBack:hover {
  color: #fff;
  background-color: #7cd123;
}
.referenceBox {
  margin-top: 5px;
  word-break: break-all;
  overflow-wrap: break-word;
  line-break: anywhere;
}

@media screen and (max-width: 768px) {
  .input {
    width: 100%;
    max-width: 100%;
    height: 24px;
    padding: 5px 8px 5px;
    color: #333;
    font-size: 1.2rem;
    border: 1px solid #50bdf0;
  }
  .input:focus {
    border: 1px solid #50bdf0;
  }
  .input::-webkit-input-placeholder {
    color: #999;
    font-weight: normal;
  }
  .input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
  }
  .input::-moz-placeholder {
    color: #999;
    font-weight: normal;
  }
  .inputPref {
    max-width: 100%;
  }
  .inputFull {
    max-width: 100%;
  }
  .inputMedium {
    max-width: 100%;
  }
  .inputShort {
    width: 100px;
  }
  .customer.edit .input.inputShort {
    min-width: 0;
  }
  /*  .radioList {
    margin: 0;
  }*/
  .otherBox {
    margin-top: 5px;
  }
  .radio.other + label + .otherBox,
  .checkbox.other + label + .otherBox {
    display: none;
  }
  .radio.other:checked + label + .otherBox,
  .checkbox.other:checked + label + .otherBox {
    display: inline-block;
    position: relative;
  }
  .cCardSelect {
    margin-top: -13px;
  }
  .rankSelect .formError {
    margin-top: 2px !important;
  }
  .radio,
  .checkbox {
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
  }
  .radio + label,
  .checkbox + label {
    padding-left: 20px;
    margin: 7px 15px 0 0;
    line-height: 1.5;
    position: relative;
    display: inline-block;
  }
  .radio + label:before,
  .radio + label:after,
  .checkbox + label:before,
  .checkbox + label:after {
    content: "";
    position: absolute;
  }
  .radio + label:before,
  .checkbox + label:before {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 0;
    z-index: 1;
  }
  .radio + label:after,
  .checkbox + label:after {
    z-index: 10;
    opacity: 0;
  }
  .radio + label:before,
  .radio + label:after {
    border-radius: 50%;
    border: 1px solid #50bdf0;
  }
  .radio + label:after {
    width: 10px;
    height: 10px;
    top: 4px;
    left: 2px;
    background-color: #50bdf0;
  }
  .checkbox + label:before {
    border: 1px solid #666;
  }
  .checkbox + label:after {
    width: 10px;
    height: 10px;
    top: 5px;
    left: 3px;
    z-index: 10;
    background: url(../img/common/ico_check.png) no-repeat center / cover;
  }
  .radio:checked + label:after,
  .checkbox:checked + label:after {
    opacity: 1;
  }
  .radio.bar + label,
  .checkbox.bar + label {
    min-height: 35px;
    font-size: 1.2rem;
  }
  .radio.bar + label .price,
  .checkbox.bar + label .price {
    font-size: 1.2rem;
  }
  .radio.bar + label .price,
  .checkbox.bar + label .price {
    width: 80px;
    flex-shrink: 0;
  }
  .radio.bar.aThird + label,
  .checkbox.bar.aThird + label {
    width: calc(50% - 10px);
  }

  .btnSubmit {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btnSubmit .btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    width: 100%;
    max-width: 520px;
    margin: 20px auto 0;
    height: 60px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    border: 1px solid #999;
    border-radius: 2px;
    background-color: #7cd123;
    transition: 0s;
  }
  .btnSubmit .btn:hover {
    color: #7cd123;
    background-color: #fff;
  }
  .btnSubmit.is-disabled {
    pointer-events: none;
  }
  .btnSubmit.is-disabled .btn {
    background-color: #ccc;
  }
}
/*キャンセル表示非表示切り替え*/
.toggleShowCancel {
  margin-top: 10px;
  display: inline-flex;
}
.toggleButton .checkbox + label {
  min-height: 26px;
  padding: 2px 8px 1px 28px;
  margin: 0;
  color: #0096dc;
  font-size: 1.4rem;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.toggleButton .checkbox + label:before {
  width: 15px;
  height: 15px;
  border: 1px solid #50bdf0;
  border-radius: 3px;
  background-color: #fff;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
.toggleButton .checkbox + label:after {
  width: 12px;
  height: 13px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background: url(../img/common/ico_check_blue.png) no-repeat center / cover;
  top: 6px;
  left: 8px;
}
.toggleButton .checkbox:checked + label {
  color: #fff;
  background-color: #50bdf0;
}
.toggleButton .checkbox:checked + label:before {
  border-color: #fff;
}





/*バリデート */
.formError {
  margin: 0 0 1px !important;
  position: static !important;
}
.formError + input {
  border-color: #f542b8;
}

@media screen and (max-width: 768px) {
}

/*乗り合いフォーム*/
.divider {
  margin: 0 10px 5px 10px;
  color: #333;
  font-size: 2rem;
}
.dividerPlus {
  margin-right: 17px;
}
.reservationForm.jointPartnership .content {
  margin-bottom: 0;
}
.joint_partnership .area {
  position: relative;
}
.joint_partnership .area + .area {
  margin-top: 30px;
}
.jointPartnershipTax .item + .item {
  margin-left: -10px;
}
.jointPartnershipTax .radio.bar + label {
  padding-right: 0;
  white-space: nowrap;
  background-color: transparent;
  border: none;
}
.reservationForm.jointPartnership .calenderList .item .table .ok label:before {
  content: normal;
}
.reservationForm.jointPartnership .calenderList .item .table td:nth-child(1) .day {
  color: #333;
}
.reservationForm.jointPartnership .calenderList .item .table td:nth-child(6) .day {
  color: #6FA3D8;
}
.reservationForm.jointPartnership .calenderList .item .table td:nth-child(7) .day {
    color: #D86F6F;
}
.otherPrice .flexWrap + .flexWrap {
  margin-top: 15px;
}
.addContents {
  margin-top: 10px;
}
.jointPartnership .btnSubmit {
  margin-top: 10px;
}
.jointPartnership .tankWrap {
  margin-top: -15px;
}
.jointPartnership .tankWrap .itemWrap {
  margin-top: 15px;
  margin-right: 10px;
}
.passengersNum.is-disabled .selectWrap {
  pointer-events: none;
  background-color: #f3f3f3;
}

@media screen and (max-width: 768px) {
  .reservationForm.jointPartnership .flexWrap {
    display: flex;
    flex-wrap: wrap;
  }
  .reservationForm.jointPartnership .addContents {
    margin-top: 20px;
  }
  .reservationForm.jointPartnership .otherPrice .flexWrap + .flexWrap {
    margin-top: 30px;
  }
  .reservationForm.jointPartnership .otherPrice .itemWrap + .itemWrap {
    margin-top: 15px;
  }
  .reservationForm.jointPartnership .otherPrice .itemWrap.jointPartnershipTax {
    margin-top: 0;
  }
  .reservationForm.jointPartnership .otherPrice .itemWrap.jointPartnershipTax label {
    margin-top: 0;
  }
  .jointPartnership .btnSubmit {
    margin-top: 20px;
  }
}

/* ===========================================
チーム
=========================================== */
.noDivideBottomTable {
  min-width: 100%;
  min-height: 120px;
}
.noDivideBottomTable .innerTable {
  width: 100%;
}
.noDivideBottomTable .unDecidedTr {
  border-bottom-width: 2px;
}
.noDivideBottomTable .noDivideBottomCell {
  height: auto;
  padding: 2px 10px;
  /*border-bottom: none;*/
}
.noDivideBottomTable .unDecidedTr a {
  color: #ff81e7;
  text-decoration: underline;
}
.reservation.team .table .unDecidedTr .remarksCell a {
  color: #0096dc;
}
.reservation.team .contentBlock tbody tr:nth-child(even) {
  background-color: transparent;
}
.reservation.team td.nameCell,
.reservation.pickup td.nameCell,
.reservation.roster td.nameCell {
  text-align: left;
}
.reservation.team .staffCell .inner,
.reservation.pickup .staffCell .inner,
.reservation.roster .staffCell .inner {
  flex-direction: column;
}
.reservation.team .table .nameCell {
  width: 120px !important;
}
.editTxt {
  padding-right: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.editTxt .editIcon {
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: .3s;
}
.reservation .table .editIcon {
  transition: .3s;
}
.reservation .table .editIcon:hover {
  opacity: .7;
}
.reservation .table .editIcon img {
  vertical-align: middle;
}
.editTxt a:hover {
  opacity: .7;
  background-color: transparent;
}
.reservation .table .teamName a {
  display: block;
}
.reservation .TeamMemberNum {
  display: block;
  white-space: nowrap;
}
.timeWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.timeWrap .divider {
  width: 1em;
}
.team .table .staffCell {
  width: 100px !important;
}

/*乗り合いモーダル*/
.reservationForm.changeJointPartnership {
  padding-bottom: 0;
}
.changeJointPartnership .box + .box {
  margin-top: 30px;
}
.reservationForm.changeJointPartnership .content {
  margin-bottom: 20px;
}
.reservationForm.changeJointPartnership .btnSubmit {
  margin-top: 10px;
}
.reservationForm.changeJointPartnership .deleteTxt {
  margin-top: 7px;
}
.reservationForm.changeJointPartnership .tankWrap {
  margin-top: -15px;
}
.reservationForm.changeJointPartnership .tankWrap .itemWrap {
  margin-top: 15px;
  margin-right: 10px;
}
.reservationForm.changeJointPartnership .flexWrap .item {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .editTxt {
    padding-right: 15px;
  }
  .reservationForm.changeJointPartnership .content {
    margin-bottom: 30px;
  }
  .reservationForm.changeJointPartnership .flexWrap {
    display: flex;
    flex-wrap: wrap;
  }
  .reservationForm.changeJointPartnership .flexWrap + .flexWrap {
    margin-top: 30px;
  }
  .reservationForm.changeJointPartnership .jointPartnershipTax .radio.bar + label {
    margin: 0;
  }
  .reservationForm.changeJointPartnership .otherPrice .itemWrap + .itemWrap {
    margin-top: 15px;
  }
}

/* ===========================================
予約台帳
=========================================== */
.reservation .accordionTit {
  width: calc(100% + 42px);
  margin: -20px -21px;
  padding: 20px 21px;
  flex-wrap: wrap;
}
.reservation .accordionTit .TeamMemberNum {
  margin-left: 25px;
  pointer-events: none;
}
.reservation .scrollableTable {
  width: 100%;
}
.rentalEquipmentDetailArea {
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.rentalEquipmentDetailTableWrap {
  width: 350px;
}

/* 宿泊 */
.tableOverScreen-m .scrollableTable {
  width: 2000px;
}
.table-layout-fixed {
  table-layout: fixed;
}
.tableLodging {
  height: 100%;
}
.tableLodging th {
  width: 64px;
}
.tableLodging td {
  width: 64px;
  padding: 0;
}
.tableLodging td .cellInner {
  height: 100%;
  min-height: 45px;
}
.tableLodging td .reserved {
  width: 100%;
  height: 100%;
  min-height: 45px;
  padding: 0 5px;
  color: #000;
  text-decoration: none;
  background-color: #f1f5e4;
  transition: .3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.tableLodging td .reserved:hover {
  opacity: .6;
}
.tableLodging td .reserved.request:before {
  pointer-events: none;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 2;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  border: solid 1px #fff;
  background-color: #FF5555;
  content: '';
}
@media screen and (max-width: 767px) {
  .tableLodging td .reserved.request:before {
    width: 4px;
    height: 4px;
  }
}




/* ===========================================
乗船名簿
=========================================== */
.reservation.boarding .tableWrap + .areaTit {
  margin-top: 50px;
}
.reservation.boarding .memoCell .memoArea {
  width: 100%;
  margin: 0;
  justify-content: center;
}
.reservation.boarding .memoCell .memoArea .body {
  width: 100%;
  margin-left: 10px;
  text-align: left;
}
.flexWrap.bordingCheckin .img {
  margin-right: auto;
}
.reservation.boarding .table td {
  border-right: none;
  border-left: 1px solid #ccc;
}
.reservation.boarding .table .teamCell {
  border-left: none;
}

/*乗船名簿チェックイン*/
.reservationForm.checkinJointPartnership {
  padding-bottom: 0;
}
.reservationForm.checkinJointPartnership .btnSubmit {
  margin-top: 30px;
}
.reservationForm.checkinJointPartnership .btnSubmit .btn {
  max-width: 450px;
  font-size: 1.7rem;
  line-height: 1.5;
}

/* ===========================================
予約検索
=========================================== */
.reservation.search .searchQueryBox {
  margin-right: auto;
}
.form__row.reservationSearch .form__box {
  width: calc((100% - 67px) / 4);
}
.form__row.reservationSearch .form__box + .form__box {
  margin-left: 20px;
}
.reservationSearchArea input[name="course_id[]"],
.reservationSearchArea input[name="course_id[]"] + label {
  display: none;
}

@media screen and (max-width: 768px) {
  .form__row.reservationSearch .form__box {
    width: 100%;
  }
  .form__row.reservationSearch .form__box + .form__box {
    margin-left: 0;
  }
}


/* ===========================================
予約枠
=========================================== */
.reservationFrame .scrollableTable {
  width: 3000px;
}
.reservationFrame .scrollableTable .coursenameCell,
.reservationFrame .scrollableTable .allEditCell {
  width: 120px !important;
  padding: 5px;
}
.reservationFrame .scrollableTable .courseGroupCell {
  padding-top: 8px;
  padding-bottom: 12px;
}
.reservationFrame .labelGroupName:before {
  content: '\30b3\30fc\30b9\3092\307f\308b';
}
.reservationFrame .table thead {
  border-bottom: 2px solid #ccc;
}
.reservationFrame .table thead th {
  background-color: #f1f1f1;
  border-bottom-width: 1px;
}
.reservationFrame th,
.reservationFrame td {
  font-size: 1.4rem;
}
.reservationFrame th {
  width: 60px !important;
}
.reservationFrame td {
  width: 60px !important;
  height: 62px;
  padding: 0;
}
.weekendCell,
.holiday {
  color: #f05094;
}
.reservationFrame th .reservedCount {
  font-weight: normal;
}
.reservationFrame .reserveValCell {
  background-color: #f4fbfe;
}
.reservationFrame .reserveValCell .cellInner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* padding: 5px; */
}
.reservationFrame .reserveValCell .cellInner p {
  position: relative;
  z-index: 10;
}
.reservationFrame .reserveValCell .cellInner .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.reservationFrame .reserveValCell .cellInner .request {
  background-color: #fff;
}
.reservationFrame .reserveValCell .cellInner .ng {
  background-color: #f3f3f3;
}
.index .cellInner {
  cursor: pointer;
}
.cellInner.selected:after {
  content: '';
  width: 100%;
  height: 100%;
  border: 2px solid #5794D1;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 1;
  pointer-events: none;
}
.reservationFrame td .totalCount {
  color: #0096dc;
  font-weight: bold;
}
.reservationFrame .limitCount {
  margin-top: 6px;
}
.reservationFrame .limitCount span {
  color: #0096dc;
}
.reservationFrame .coursenameCell .inner {
  flex-direction: column;
}
.reservationFrame .groupIcon {
  width: 14px;
  height: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  background-color: #50bdf0;
  position: absolute;
  top: 5px;
  left: 0;
}
.reservationFrame .courseGroupCell {
  white-space: normal !important;
}
.reservationFrame .courseGroupCell .inner {
  padding-top: 4px;
  padding-left: 18px;
  text-align: left;
  align-items: flex-start;
}
.reservationFrame .includeCourse {
  color: #888;
  font-size: 1.2rem;
  display: block;
}
.pageTabBox {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.settingInfo {
  margin-bottom: 3px;
  position: relative;
}
.settingInfo .limitIcon:before {
  top: -3px;
}
.settingInfo .limitIcon:after {
  top: 0;
}
.settingInfo .noteTit {
  margin-left: 31px !important;
}
.reservationFrame .coursenameCell .coursenameCell__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.excludedFromCourseLimits {
  margin-top: 5px;
  color: #F5BF35;
  font-size: 1.2rem;
  text-align: right;
  align-self: flex-end;
}
.exceedingText {
  margin-top: 2px;
  color: #F5BF35;
  font-size: 1.2rem;
}
.exceedingText--box {
  width: 6em;
  margin: 0 auto;
  color: #000;
  font-size: 1.2rem;
  border-radius: 2px;
  text-align: center;
  background-color: #F5BF35;
  display: inline-block;
}
.limitIcon::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 33px solid transparent;
    border-left: 33px solid #F5BF35; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 1;
}
.limitIcon::after {
    content: "制限";
    display: block;
    color: #333;
    font-size: 10px;
    position: absolute;
    top: 5px;
    left: -1px;
    z-index: 2;
    transform: scale(0.8);
}
.hasReserved {
  color: #FF6499;
  font-weight: bold;
}

/*時間予約*/
.reservationFrameTabList {
  margin-bottom: 14px;
}
.reservationFrameTabList li {
  width: 70px;
}
.timeFrameNote .box {
  text-align: left;
}
.timeFrameNote .box a {
  margin-left: 10px;
}
.timeFrameNote .selectWrap {
  width: 200px;
  height: 28px;
  margin-top: 10px;
  font-size: 1.4rem;
}
.timeFrameWrap .selectWrap {
  width: 70px;
}
.timeFrameNote .txt {
  width: 300px;
  font-size: 1.4rem;
}
.edit .timeFrameNote {
  margin-bottom: 0;
}
.edit .timeFrameNote .selectWrap {
  width: 200px;
  margin-top: 0;
  height: auto;
  font-weight: bold;
  border: 0;
  border-bottom: 2px solid #acbbc3;
  border-radius: 0;
  background-color: transparent;
}
.edit .timeFrameNote .selectWrap:after {
  content: normal;
}
.timeFrameWrap .dividerHi {
  margin-right: 0;
  margin-left: 0;
}
.reservationFrame .iconDescription {
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
}
.reservationFrame .iconDescription .ico {
  margin: 7px 35px 0 0;
  position: relative;
  display: flex;
  align-items: center;
}
.reservationFrame .iconDescription .ico:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 23px;
  transform: translateY(-50%);
}
.reservationFrame .iconDescription .icoOk:after {
  width: 12px;
  height: 12px;
  border: 1px solid #50bdf0;
  border-radius: 50%;
  display: block;
}
.reservationFrame .iconDescription .icoRequest:after {
  width: 12px;
  height: 12px;
  margin-top: -1px;
  border: 1px solid #59D575;
  background-color: #fff;
}
.reservationFrame .iconDescription .icoNg:before {
  content: "";
  width: 12px;
  height: 2px;
  background-color: #cbcbcb;
  position: absolute;
  top: 50%;
  left: 23px;
  transform: translateY(-50%) rotate(-45deg);
}
.reservationFrame .iconDescription .icoNg:after {
  width: 12px;
  height: 2px;
  margin-top: 0;
  background-color: #cbcbcb;
  transform: translateY(-50%) rotate(45deg);
}
.reservationFrame .iconDescription .colorBox {
  position: relative;
  line-height: 1;
}
.reservationFrame .iconDescription .colorBox:after {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 23px;
  display: inline-block;
  border: 1px solid #ccc;
}
.reservationFrame .iconDescription .icoOk .colorBox:after {
  background-color: #f4fbfe;
}
.reservationFrame .iconDescription .icoRequest .colorBox:after {
  background-color: #fff;
}
.reservationFrame .iconDescription .icoNg .colorBox:after {
  background-color: #f3f3f3;
}

@media screen and (max-width: 768px) {
  .reservationFrame .headArea {
    align-items: flex-start;
  }
  .reservationFrame .btnRegist {
    margin: 0 0 0 auto;
  }
  .reservationFrame .btnRegist a {
    margin-top: 0;
  }
  .reservationFrameTabList {
    margin-bottom: 5px;
  }
  .edit .timeFrameNote {
    width: 100%;
    margin-top: -10px;
    margin-bottom: 10px;
  }
  .edit .timeFrameNote .selectWrap {
    width: 100%;
    height: auto;
  }
}

/*予約枠編集*/
.reservationFrame .scrollableTable .coursenameCell {
  width: 170px !important;
}
.reservationFrame .scrollableTable .coursenameCell .cssAccordionLabel {
  margin-top: 0;
}
.reservationFrame .scrollableTable .coursenameCell .cssAccordionLabel svg {
  position: static;
  transform: translateY(2px);
}
.reservationFrame .scrollableTable .allDayEditCell {
  padding: 5px 0;
}
.reservationFrame .scrollableTable .allDayEditCell p + p {
  margin-top: 2px;
}
.reservationFrame .scrollableTable .allDayEditCell span {
  width: 40px;
  margin-right: 5px;
  font-size: 1rem;
  font-weight: normal;
  display: inline-block;
}
.reservationFrame .scrollableTable .allDayEditCell .btn {
  width: 60px;
  min-height: 20px;
  margin: 0 auto;
  padding: 0;
  font-size: 1.2rem;
  text-decoration: none;
}
.reservationFrame .scrollableTable .allEditCell .inner {
  flex-wrap: wrap;
}
.reservationFrame .scrollableTable .allEditCell p + p {
  margin-top: 2px;
}
.reservationFrame .scrollableTable .allEditCell p span {
  margin-right: 5px;
  font-size: 1rem;
  display: inline-block;
}
.reservationFrame .inner {
  flex-wrap: wrap;
  flex-direction: column;
}
.reservationFrame th {
  width: 110px !important;
}
.reservationFrame .btnSubmit {
  margin-left: 11px;
}
.reservationFrame .btnSubmit .btn {
  margin-top: 0;
  height: 26px;
}
.allEditCell span {
  width: 40px;
}
.reservationFrame .input {
  width: 30px;
  height: 20px;
  padding: 3px 2px 4px;
  color: #0096dc;
  font-weight: bold;
  text-align: center;
  border-color: #707070;
}
.allEditCell .btnRegist {
  width: 60px;
  height: 20px;
  margin: 0 0 0 4px;
}
.allEditCell .btnRegist .js-allChange,
.js-allDayChange {
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 1.2rem;
  text-decoration: none;
  border-radius: 2px;
}
.reservationFrame .formError {
  white-space: nowrap !important;
  position: absolute !important;
  margin-top: -30px !important;
}
.reservationFrame .formError + input {
  border: 1px solid #ff81e7;
  background-color: #ffdefd;
}
.reservationFrame .js-allDayChange {
  width: 60px;
  margin: auto;
  text-decoration: none;
}
.periodSpecification {
  position: absolute;
  bottom: 0;
  left: 0;
}


@media screen and (max-width: 768px) {
  .reservationFrame .btnSubmit {
    margin: 0 0 0 10px;
  }
  .reservationFrame .btnSubmit .btn {
    margin-top: 0;
    height: 26px;
  }
  .reservationFrame .allDayEditCell .btnRegist {
    height: auto;
  }
  .reservationFrame .allDayEditCell .btn {
    min-width: 0;
    height: 20px;
  }
  .allEditCell span {
    width: 40px;
  }
  .reservationFrame .input {
    width: 35px;
    min-width: 40px;
    height: 20px;
    color: #0096dc;
    font-weight: bold;
    text-align: center;
    border-color: #707070;
  }
  .allEditCell .btnRegist {
    width: 54px;
    height: 20px;
    margin: 0 0 0 4px;
  }
  .allEditCell .btnRegist .btn {
    min-width: 60px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 2px;
  }
  .reservationFrame .formError {
    white-space: nowrap;
    position: absolute;
    margin-top: -30px;
  }
  .reservationFrame .formError + input {
    border: 1px solid #ff81e7;
    background-color: #ffdefd;
  }
  .reservationFrame.time.edit .coursenameCell {
    width: 120px !important;
  }
}

@media screen and (max-width: 1000px) {
  .reservationFrame .headArea {
    padding-top: 40px;
  }
}

/* タイムテーブル */
.timeTable .table {
  width: 3500px;
}
.reservationFrame .toggleEditableCell {
  padding: 4px;
}

/* 入力ON/OFFを切り替えるinput */
.toggleEditableElement {
}
.editableText {
  padding: 5px;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
.inlineEditor {
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 5px;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  display: block;
  border: 1px solid #50bdf0;
  outline: none;
  resize: none;
}


/* ===========================================
顧客名簿画面
=========================================== */
/*一覧*/
.searchArea {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.searchArea .tit {
  margin-right: 20px;
  font-size: 1.6rem;
  font-weight: bold;
}
.searchArea form {
  margin-right: 20px;
  margin-bottom: 1px;
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.searchArea .searchBox {
  display: flex;
}
.searchArea .inputBox {
  width: 100%;
  max-width: 350px;
  min-width: 200px;
  flex: 1;
}
.searchArea .input {
  width: 100%;
  max-width: 100%;
  height: 30px;
  border: 1px solid #acbbc3;
  border-radius: 3px;
}
.searchArea .btnSearch {
  height: 30px;
}
.searchArea .btnSearch .btn {
  max-width: 124px;
  min-width: 80px;
  height: 100%;
  margin: 0 0 0 10px;
  color: #fff;
  font-size: 1.2rem;
  border: 1px solid #7cd123;
  border-radius: 2px;
  outline-style: none;
  background-color: #7cd123;
}
.searchArea .btnSearch .btn:hover {
  color: #7cd123;
  background-color: #fff;
}
.searchArea .btnSearchDetail {
  max-width: 124px;
  min-width: 80px;
  height: 30px;
  margin-left: 10px;
}
.searchArea .btnSearchDetail .btn {
  width: 100%;
  height: 100%;
  color: #7cd123;
  font-size: 1.2rem;
  background-color: #fff;
  border: 1px solid #7cd123;
  border-radius: 2px;
}
.searchArea .btnSearchDetail .btn:hover {
  color: #fff;
  background-color: #7cd123;
}
.searchArea .btnRegist {
  /* margin: 2px 0 0 auto;
  height: 26px; */
}
.searchArea .btnRegist a {
  margin: 0;
  min-height: 26px;
}
.searchButtons {
  display: flex;
}

.searchDetailArea {
  margin-top: 30px;
  border: 2px solid #999;
}
.searchDetailArea .inner {
  min-height: 100px;
  padding: 30px 21px 35px;
  color: #333;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
}
.searchDetailArea .titCenter {
  width: 100%;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}
.searchDetailArea .searchFormArea {
  margin: 20px auto 0;
}
.searchResultArea {
  margin-bottom: 10px;
}
.resultList li {
  display: flex;
  flex-wrap: wrap;
}
.resultList li + li {
  margin-top: 5px;
}
.resultList .head {
  width: 12rem;
  font-weight: bold;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.resultList .head:after {
  content: "：";
  position: absolute;
  top: 0;
  right: 0;
}
.btnClear {
  width: 60px;
  height: 22px;
  margin-left: 10px;
  padding-top: 1px;
  color: #7cd123;
  font-size: 1rem;
  background-color: #fff;
  border: 1px solid #7cd123;
  border-radius: 2px;
  align-self: center;
}
.btnClear:hover {
  color: #fff;
  background-color: #7cd123;
}
.resultList {
  width: 50vw;
}
.resultList .countRow {
  font-size: 1.4em;
  font-weight: bold;
}
.resultList .countRow .body {
  display: flex;
}
.customerTable {
  min-width: 960px;
}

@media screen and (max-width: 870px) {
  .searchArea {
    margin-bottom: 5px;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .searchArea .tit {
    margin-bottom: 5px;
    font-size: 1.4rem;
    font-weight: bold;
  }
  .searchArea form {
    width: 100%;
    margin-bottom: 8px;
    justify-content: flex-end;
  }
  .searchArea .searchBox {
    width: 100%;
  }
  .searchArea .inputBox {
    width: 100%;
    max-width: 100%;
    flex: 1;
  }
  .searchArea .input {
    width: 100%;
    max-width: 100%;
    height: 30px;
    border: 1px solid #acbbc3;
    border-radius: 3px;
  }
  .searchArea .btnSearch {
    height: 30px;
  }
  .searchArea .btnSearch .btn {
    width: 80px;
    height: 100%;
    margin: 0 0 0 10px;
    color: #fff;
    font-size: 1.4rem;
    border: 1px solid #999;
    border-radius: 2px;
    outline-style: none;
    background-color: #7cd123;
  }
  .searchArea .btnSearch .btn:hover {
    color: #7cd123;
    background-color: #fff;
  }
  .searchArea .btnSearchDetail {
    min-width: 120px;
    height: 30px;
    order: 6;
  }
  .searchArea .btnSearchDetail .btn {
    width: 100%;
    height: 100%;
    color: #7cd123;
    font-size: 1.2rem;
    background-color: #fff;
    border: 1px solid #7cd123;
    border-radius: 2px;
  }
  .searchArea .btnSearchDetail .btn:hover {
    color: #fff;
    background-color: #7cd123;
  }
  .searchArea .btnRegist a {
    margin: 0;
    min-height: 26px;
  }
  .searchButtons {
    width: 100%;
    margin-top: 10px;
    margin-left: 100%;
  }
  .resultList {
    width: 70vw;
  }
  .resultList .body {
    width: calc(100% - 12em);
  }
  .resultList .countRow {
    flex-direction: column;
    align-items: flex-start;
  }
  .resultList .countRow .body {
    width: auto;
  }
  .btnClear {
    /* margin: -3px 0 0 auto; */
  }
  .customerTable {
    min-width: 1200px;
  }
}

/*顧客検索*/
.searchFormArea {
  width: 100%;
  max-width: 780px;
  margin: 35px auto 40px;
}
.searchFormArea .form__row + .form__row {
  margin-top: 15px;
}
.searchFormArea .form__btn {
  margin-top: 35px;
  display: flex;
  justify-content: center;
}
.searchFormArea .form__btn.column {
  align-items: center;
  flex-direction: column;
}
.searchFormArea .form__btn.column .deleteTxt {
  margin-top: 10px;
}
.searchFormArea .form__btn__submit {
  width: 148px;
  min-height: 32px;
}
.searchFormArea .organizationHasRank {
  display: none;
}
.searchFormArea .organizationHasRank .form__box {
  width: 100%;
}
.searchFormArea .organizationHasRank.is-show {
  display: flex;
}
.organizationHasRank .checkbox,
.organizationHasRank .checkbox + label {
  display: none;
}
.organizationHasRank .is-show,
.organizationHasRank .is-show + label {
  display: block;
}
.reservationSearchArea .courseRow {
  display: none;
}

@media screen and (max-width: 768px) {
  .searchFormArea {
    margin: 25px auto 30px;
  }
}

/*顧客割合*/
.analysisLabelCell {
  width: calc(100% - 200px) !important;
  white-space: nowrap;
}
.analysisNumCell {
  width: 100px !important;
  text-align: right;
}
thead .analysisNumCell {
  padding-right: 22px;
}
thead .analysisRateCell {
  padding-right: 25px;
}
.analysisRateCell {
  width: 100px !important;
  padding-right: 20px;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .customerUserTrendArea .noFrameTableArea:first-of-type {
    margin-top: -10px;
  }
  .customerUserTrendArea .noFrameTableArea .noFrameTable.tableShort {
    width: 100%;
    min-width: 0;
  }
  .analysisLabelCell {
    width: calc(100% - 100px) !important;
  }
  .analysisNumCell {
    width: 100px !important;
    text-align: right;
  }
  .analysisRateCell {
    width: 100px !important;
    padding-right: 20px;
    text-align: right;
  }
}

.periodArea {
  width: auto;
}
.periodArea form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.is-disabled {
  pointer-events: none !important;
}
.periodArea .is-disabled {
  background-color: #ccc !important;
}

/*顧客詳細*/
.profileArea .inner {
  min-height: 100px;
  padding: 20px 21px 15px;
  color: #333;
  border-radius: 5px 5px 0 0;
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: flex-start;
}
.profileArea .inner.fdC {
  flex-direction: column;
}
.profileArea .inner + .inner {
  margin-top: 30px;
}
.profileArea .innerTit {
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 1px solid #707070;
}
.customer .item {
  margin: 0 35px 20px 0;
  position: relative;
}
.profileArea {
  margin-top: 30px;
}
.profileArea:first-of-type {
  margin-top: 0;
}
.profileArea .subArea {
  width: 180px;
  margin-right: 50px;
  flex-shrink: 0;
}
.profileArea .subArea .img {
  width: 100%;
  height: 180px;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.profileArea .subArea img {
  width: 100%;
  height: 100%;
}
.profileArea .subArea .comment {
  width: 120px;
  margin: 24px auto 0;
  display: flex;
  position: relative;
}
.profileArea .subArea .comment a {
  width: 100%;
  min-height: 26px;
  color: #0096dc;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.profileArea .subArea .comment a:hover {
  color: #fff;
  background-color: #50bdf0;
}
.profileArea .subArea .comment span {
  width: 24px;
  height: 24px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #7cd123;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  position: absolute;
  top: -5px;
  right: -6px;
}
.profileArea .subArea .btnRegist {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.profileArea .mainArea {
  flex: 1;
}
.profileArea .txt {
  word-break: break-all;
}
.profileArea .infoBox {
  margin-bottom: 0;
}
.profileArea .infoBox p {
  position: relative;
}
.profileArea .infoBox .nameKana {
  font-size: 1.4rem;
  line-height: 1.2;
}
.profileArea .infoBox .name {
  margin-bottom: 20px;
  font-size: 2rem;
  font-weight: bold;
}
.profileArea .infoBox .nameKana .lastName {
  margin-right: 1.5em;
  padding-right: 0;
}
.profileArea .infoBox .lastName {
  margin-right: 1em;
}
.profileArea .line {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}
.profileArea .infoBox .infoGroup {
  /*margin-bottom: 20px;*/
  position: relative;
}
.profileArea .infoBox .infoGroup:last-of-type {
  margin-bottom: 0;
}
.profileArea .infoBox span {
  display: block;
}
.profileArea .infoBox .tit {
  font-size: 1.2rem;
  font-weight: bold;
}
.profileArea .infoBox .txt {
  min-height: calc(1.4rem * 1.75);
  font-size: 1.4rem;
}
.profileArea .infoBox .infoGroup.equipmentStorage .txt {
  display: flex;
}
.profileArea .infoBox .infoGroup.equipmentStorage .txt label {
  flex-shrink: 0;
}
.profileArea .infoBox .infoGroup.equipmentStorage .txt input[type="text"] {
  margin-top: 4px;
}
.btnBack {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}
.btnBack a {
  width: 100px;
  min-height: 29px;
  margin-bottom: 15px;
  color: #0096dc;
  font-size: 1.4rem;
  border: 1px solid #50bdf0;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.btnBack a:hover {
  color: #fff;
  background-color: #50bdf0;
}

@media screen and (max-width: 768px) {
  .profileArea .inner {
    padding: 18px 10px 20px;
    display: flex;
    flex-direction: column;
  }
  .profileArea .subArea {
    width: 180px;
    margin: 0 auto 20px;
  }
  .profileArea .infoBox .infoGroup {
    /*margin-bottom: 20px;*/
  }
  .customer .item {
    margin: 10px 35px 0 0;
  }
}



.commentWrap {
  position: relative;
}
.commentWrap .titCenter {
  margin-bottom: 30px;
}
.commentWrap .item {
  width: 100%;
  min-height: 100px;
  padding: 20px 20px 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
}
.commentWrap .item + .item {
  margin-top: 20px;
}
.commentWrap .tit {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 5px;
}
.commentWrap .txt {
  font-size: 1.4rem;
  line-height: 1.714285714;
}
.commentWrap .input {
  border-color: #666;
}
.commentWrap .commentHead {
  margin-bottom: 10px;
  display: flex;
}
.commentWrap .commentHead .date .input {
  margin-right: 20px;
}
.commentWrap .commentHead .date,
.commentWrap .commentHead .writer {
  font-size: 1.4rem;
  font-weight: bold;
}
.commentWrap .commentHead .date {
  margin-right: 8px;
}
.commentWrap .commentBody textarea {
  width: 100%;
  min-height: 136px;
  padding: 10px;
  border-color: #666;
}
.commentWrap .commentNone {
  margin-top: 18px;
  text-align: center;
}
.commentWrap .btnWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  right: 0;
}
.commentWrap .btnWrap .btn {
  width: 100%;
  height: 100%;
  padding-top: 3px;
  color: #0096dc;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  background-color: #fff;
  transition: .3s;
}
.commentWrap .btnAdd {
  width: 120px;
  height: 26px;
}
.commentWrap .btnAdd a:hover {
  color: #fff;
  background-color: #50bdf0;
}
.commentWrap .btnWrap .btnReset {
  width: 100%;
  margin: 10px 0;
  display: flex;
}
.commentWrap .btnWrap .btnReset a {
  width: 100%;
  min-height: 26px;
  color: #0096dc;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid #50bdf0;
  background-color: #fff;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.commentWrap .btnWrap .btnReset a:hover {
  color: #fff;
  background-color: #50bdf0;
}
.commentWrap .btnWrap .btnSave {
  width: 126px;
  display: flex;
}
.commentWrap .btnWrap .btnSave button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  width: 100%;
  min-height: 33px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid #999;
  border-radius: 2px;
  background-color: #7cd123;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.commentWrap .btnWrap .btnSave button:hover {
  color: #7cd123;
  background-color: #fff;
}
.commentWrap .btnWrapComment {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: absolute;
  top: 10px;
  right: 20px;
}
.commentWrap .btnWrapComment li {
  width: 48px;
  display: flex;
}
.commentWrap .btnWrapComment li + li {
  margin-left: 10px;
}
.commentWrap .btnWrapComment a {
  width: 100%;
  min-height: 26px;
  padding: 0;
  color: #0096dc;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid #50bdf0;
  background-color: #fff;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.commentWrap .btnWrapComment a:hover {
  color: #fff;
  background-color: #50bdf0;
}
.commentWrap .btnWrap .btnDelete {
  width: 48px;
  margin-top: 10px;
  display: flex;
}
.commentWrap .btnWrap .btnDelete a {
  width: 100%;
  min-height: 26px;
  padding: 0;
  color: #0096dc;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid #50bdf0;
  background-color: #fff;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.commentWrap .btnWrap .btnDelete a:hover {
  color: #fff;
  background-color: #50bdf0;
}

@media screen and (max-width: 768px) {
  .commentWrap .titCenter {
    margin-bottom: 75px;
  }
  .commentWrap .titCenter.mbM {
    margin-bottom: 50px;
  }
  .commentWrap .item {
    padding: 10px;
  }
  .commentWrap .commentHead {
    margin-bottom: 15px;
    display: block;
  }
  .commentWrap .commentHead .date {
    margin-bottom: 10px;
  }
  .commentWrap .btnWrap {
    width: 190px;
    top: 30px;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .commentWrap .btnWrapComment {
    right: 10px;
  }
  .commentWrap .btnWrap .btnSave {
    width: 100px;
  }
  .commentWrap .btnWrap .btnReset {
    width: 120px;
    margin: 0 10px 0 0;
  }
  .commentWrap .btnWrap .btnDelete {
    margin-top: 10px;
  }
}


/*履歴*/
.noFrameTableArea {
  position: relative;
}
.noFrameTableArea + .noFrameTableArea {
  margin-top: 30px;
}
.areaTit {
  margin-bottom: 4px;
  font-size: 1.6rem;
  font-weight: bold;
}
.noFrameTableArea .scrollableTableWrap {
  width: 100%;
  margin-right: 0;
}
.noFrameTableArea #reference-table.noFrameTable {
  table-layout: initial;
}
.noFrameTable {
  width: 100%;
  min-width: 100%;
  min-height: 120px;
  table-layout: fixed;
}
.noFrameTableArea .noFrameTable tr {
  border-bottom: 1px solid #ccc;
}
.noFrameTableArea .noFrameTable tr.hiddenTr {
  display: none;
}
.noFrameTableArea .noFrameTable tr.hiddenTr.is-show {
  display: table-row;
}
.noFrameTableArea .noFrameTable .is_inactive td {
  color: #666;
}
.noFrameTableArea .noFrameTable tr:nth-child(even) {
  background-color: #f3f3f3;
}
.notStripeTable  tr:nth-child(even) {
  background-color: transparent !important;
}
.noStripeTable  tr:nth-child(even) {
  background-color: #fff !important;
}
.noFrameTableArea .noFrameTable thead {
  border-bottom: 1px solid #707070;
}
.noFrameTableArea .noFrameTable th {
  padding-bottom: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2;
}
.noFrameTableArea .noFrameTable td {
  height: 40px;
  padding: 6px 10px 6px 0;
  font-size: 1.4rem;
  line-height: 1.5;
  vertical-align: middle;
  word-break: break-all;
}
.noFrameTableArea .noFrameTable .dateCell {
  width: 100px !important;
}
.noFrameTableArea .noFrameTable .statusCell {
  width: 100px !important;
}
.noFrameTableArea .noFrameTable .categoryCell {
  width: 80px !important;
}
.noFrameTableArea .noFrameTable .commentCell {
  width: 400px !important;
}
.noFrameTableArea .noFrameTable .courseCell {
  width: 80px !important;
}
.noFrameTableArea .noFrameTable .teamCell {
  width: 60px !important;
}
.noFrameTableArea .noFrameTable .responsibleCell {
  width: 60px !important;
}
.noFrameTableArea .noFrameTable .companionCell {
  width: 60px !important;
}
.noFrameTableArea .noFrameTable .remarksCell {
  width: 60px !important;
}
.noFrameTableArea .noFrameTable .btnCell {
  width: 60px !important;
  padding-right: 0;
}
.profileArea .historyArea .btnCell {
  width: 100px !important;
}
.noFrameTableArea .noFrameTable .btnCell .inner {
  padding: 6px 10px 6px 0;
  background-color: transparent;
  align-items: center;
}
.article.customer .profileArea .inner {
  min-height: 50px;
}
.profileArea .historyArea {
  margin-top: 30px;
}
.profileArea .historyArea .btnCell a {
  flex-shrink: 0;
}
.profileArea .historyArea .btnCell a + a {
  margin-left: 10px;
}
.noFrameTableArea th {
  padding-top: 5px;
}
.noFrameTableArea .noFrameTable .settingPriceCell {
  width: 80px !important;
}
.noFrameTableArea .noFrameTable .settingTaxCell {
  width: 50px !important;
}
.noFrameTableArea .noFrameTable .settingSurchargeCell {
  width: 100px !important;
}
.noFrameTableArea .noFrameTable .settingOpenCell {
  width: 50px !important;
}
.noFrameTableArea .noFrameTable .settingTimeIncludeCourseCell {
  width: 588px !important;
}
.noFrameTableArea .noFrameTable .settingTimeRangeCell {
  width: 100px !important;
}
.noFrameTableArea .noFrameTable .settingRentalCell {
  width: 500px !important;
}
.noFrameTableArea .noFrameTable .settingTeamTypeCell {
  width: 70%;
}
.noFrameTableArea .noFrameTable .settingStaffNameCell {
  width: 180px !important;
}
.noFrameTableArea .noFrameTable .settingStaffIDCell {
  width: 180px !important;
}
.noFrameTableArea .noFrameTable .settingAuthorityCell {
  width: 180px !important;
}
.noFrameTableArea .noFrameTable .settingStatusCell {
  width: 200px !important;
}
.noFrameTableArea .noFrameTable .settingTeamCell {
  width: 150px !important;
}
.noFrameTableArea .noFrameTable .settingTeamTypeCell {
  width: 500px !important;
}
.noFrameTableArea .noFrameTable .settingStatusCell {
  width: 200px !important;
}
.noFrameTableArea .noFrameTable .settingReservationRouteNameCell,
.noFrameTableArea .noFrameTable .settingPaymentNameCell {
  width: 500px !important;
}
.noFrameTableArea .noFrameTable .settingPaymentCodeCell {
  width: 120px !important;
}
.noFrameTableArea .noFrameTable .settingReservationRouteStatusCell,
.noFrameTableArea .noFrameTable .settingPaymentStatusCell {
  width: 100px !important;
}
.noFrameTableArea .noFrameTable .settingJointShopNameCell {
  width: 200px !important;
}
.noFrameTableArea .noFrameTable .settingJointPriceCell {
  width: 80px !important;
}
.noFrameTableArea .noFrameTable .settingJointPriceHalfCell {
  width: 80px !important;
}
.noFrameTableArea .noFrameTable .settingJointPriceTankCell {
  width: 60px !important;
}
.noFrameTableArea .noFrameTable .settingJointTaxCell {
  width: 60px !important;
}
.noFrameTableArea .noFrameTable .settingConnectSiteCell {
  width: 50px !important;
}
.noFrameTableArea .noFrameTable .settingConnectMenuCell {
  width: 200px !important;
}
.noFrameTableArea .noFrameTable .settingConnectOtaCell {
  width: 100px !important;
}
.noFrameTableArea .noFrameTable .settingConnectRouteCell {
  width: 400px !important;
}
.noFrameTableArea .noFrameTable .settingConnectCourseCell {
  width: 100px !important;
}
.noFrameTableArea .noFrameTable .settingConnectStatusCell {
  width: 40px !important;
}
.noFrameTableArea .noFrameTable .settingformItemNameCell {
  width: 120px !important;
  height: 55px;
}
.noFrameTableArea .noFrameTable .settingformItemCell {
  width: 70px !important;
  text-align: center;
}
.noFrameTableArea .noFrameTable td.settingformItemCell {
  padding-right: 0;
  text-align: center;
}
.noFrameTableArea .noFrameTable .btn2Cell {
  width: 90px !important;
}
.noFrameTableArea .noFrameTable .settingformItemLabelCell {
  width: 70px !important;
  padding-right: 10px;
  text-align: right;
}
.noFrameTableArea .noFrameTable .settingformItemCell label {
  margin-top: 0;
  margin-right: 0;
  padding-left: 0;
}
.noFrameTableArea .noFrameTable .btnCell label {
  margin: 0;
}
.noFrameTableArea .noFrameTable .settingformItemCell label:before,
.noFrameTableArea .noFrameTable .btnCell label:before {
  border-radius: 2px;
  border-color: #999;
}
.noFrameTableArea .noFrameTable .priceTd span {
  min-width: 5em;
  text-align: right;
  display: inline-block;
}
.noFrameTableArea .noFrameTable .collapseCell {
  text-align: center;
}
.setting.formItem .profileArea > .inner {
  /*padding-top: 40px;*/
}
.setting.formItem .noFrameTableArea .noFrameTable tr:nth-child(even) {
  background-color: #fff;
}
.setting.formItem .noFrameTableArea .noFrameTable tr.rowTr {
  background-color: #f3f3f3;
}
.setting.formItem .hasReference {
  border-bottom: none;
}
.setting.formItem .referenceTr {
  border-bottom: 1px solid #ccc;
}
.setting.formItem .referenceTr td {
  height: 0;
  padding-top: 0;
  vertical-align: top;
}
.setting.formItem .settingformItemCell.referenceCell {
  padding-left: 30px;
  padding-right: 30px;
  text-align: left;
}
.setting .referenceTextArea {
  width: 100%;
  padding: 5px 8px;
  margin-left: 8px;
  border-color: #999;
}
.setting.formItem .configBox {
  z-index: 100;
}
.setting.formItem.index .profileArea > .inner {
  flex-wrap: wrap;
}
.setting.formItem .btnCell {
  text-align: center;
}
.reservationFrame .noteTit {
  margin: 0 0 4px;
}
.setting.formItem .thInner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.setting.formItem .formLinkBox {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.setting.formItem .btnCustomerFormLink {
  width: 160px;
}
.setting.formItem .item {
  display: flex;
}
.setting.formItem .item .link {
  margin-left: 10px;
  word-break: break-all;
  overflow-wrap: break-word;
  line-break: anywhere;
}
.setting.formItem .item + .item {
  margin-top: 10px;
}
/* #preConfirm / #thanksPage 等: 言語別ブロックを縦並び（.item が flex のため子は1カラムに収める） */
.setting.formItem .preConfirmLangPreview {
  display: block;
  width: 100%;
  min-width: 0;
}
.setting.formItem .preConfirmLangPreview .referenceLangBlock {
  display: block;
  width: 100%;
}
.setting.formItem .btnCustomerFormLink a {
  width: 100%;
  padding: 1px 0;
  margin-left: auto;
  color: #0096dc;
  font-size: 1rem;
  font-weight: normal;
  text-decoration: none;
  border-radius: 2px;
  background-color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.setting.formItem .btnCustomerFormLink a:hover {
  color: #fff;
  background-color: #50bdf0;
}

.noFrameTableNote {
  margin-top: 19px;
  font-size: 1.2rem;
}
.noFrameTableNote a {
  color: #50bdf0;
  text-decoration: underline;
}
.noFrameTableNote a:hover {
  text-decoration: none;
}

.noFrameTableArea .noFrameTable .btnCell.btnHorizon {
  width: auto !important;
}
.noFrameTableArea .noFrameTable .btnCell.btnHorizon a {
  min-width: 34px;
}
.noFrameTableArea .noFrameTable .btnCell.btnHorizon a + a{
  margin-left: 3px;
}

@media screen and (max-width: 768px) {
  .noFrameTableArea .noFrameTable.tableShort {
    min-width: 400px;
  }
  .noFrameTableArea .noFrameTable.tableFull {
    min-width: 100%;
  }
  .noFrameTableArea .noFrameTable .settingStaffNameCell {
    width: 100px !important;
  }
  .noFrameTableArea .noFrameTable .settingStaffIDCell {
    width: 100px !important;
  }
  .noFrameTableArea .noFrameTable .settingAuthorityCell {
    width: 100px !important;
  }
  .noFrameTableArea .noFrameTable .settingStatusCell {
    width: 150px !important;
  }
  .noFrameTableArea .noFrameTable .settingRentalCell {
    width: 150px !important;
  }
  .noFrameTableArea .noFrameTable .settingTeamTypeCell {
    width: 150px !important;
  }
  .noFrameTableArea .noFrameTable .settingReservationRouteNameCell,
  .noFrameTableArea .noFrameTable .settingPaymentNameCell {
    width: 150px !important;
  }
  .noFrameTableArea .noFrameTable .settingReservationRouteStatusCell,
  .noFrameTableArea .noFrameTable .settingPaymentStatusCell {
    width: 80px !important;
  }
  .noFrameTableArea .noFrameTable .btnCell {
    width: 80px !important;
  }
  .noFrameTableArea .noFrameTable .btnCell .inner {
    flex-direction: column;
    justify-content: center;
  }
  .noFrameTableArea .noFrameTable .btnCell .inner a {
    margin-left: auto;
  }
  .noFrameTableArea .noFrameTable .btnCell .inner a + a {
    margin-top: 15px;
  }
  .noFrameTableArea .noFrameTable .settingformItemCell,
  .noFrameTableArea .noFrameTable .btnCell {
    width: 90px !important;
    text-align: center;
  }
  .setting.formItem .btnCustomerFormLink {
    width: 160px;
    height: 25px;
    flex-shrink: 0;
  }
  .setting.formItem .item {
    flex-direction: column;
  }
  .setting.formItem .item .link {
    margin: 5px 0 0 0;
    padding-right: 10px;
  }
  .setting.formItem .item + .item {
    margin-top: 10px;
  }
}

/*タブ切り替え*/
.tabs {
  margin-bottom: 10px;
  border-bottom: 2px solid #50bdf0;
  display: flex;
}
.tabs li {
  width: 200px;
  display: flex;
}
.tabs li + li {
  margin-left: 10px;
}
.tabs a {
  width: 100%;
  min-height: 34px;
  padding-top: 1px;
  color: #333;
  font-size: 1.4rem;
  line-height: 1.35;
  text-align: center;
  border-radius: 3px 3px 0 0;
  border: 2px solid #50bdf0;
  border-bottom: none;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.tabs a:hover,
.tabs a.is-active {
  color: #fff;
  background-color: #50bdf0;
}
.tabContents .tabItem {
  width: 100%;
  display: none;
}
.tabContents .tabItem.is-active {
  display: flex;
}
.tabContents .tabItem .inner {
  width: 100%;
}
.signature .tabList {
  margin-left: auto;
}
.setting.signature .tabContents .tabItem .txt {
  background-color: #fff;
}
.setting.signature .txt a {
  color: #0096dc;
}
.setting.signature .tabContents .tabItem .editableTxt {
  background-color: #eaeaea;
}
.setting.signature .focusTxt {
  margin-bottom: 5px;
  color: #ff81e7;
  font-size: 1.4rem;
}
.setting.signature .signature-lang-tabs {
  margin-top: 10px;
  margin-bottom: 15px;
  border-bottom-color: #9ccbe6;
}
.setting.signature .signature-lang-tabs li {
  width: auto;
  min-width: 80px;
  max-width: 140px;
}
.setting.signature .signature-lang-tabs a {
  min-height: 28px;
  font-size: 1.2rem;
  border-color: #9ccbe6;
}
.setting.signature .signature-lang-tabs a:hover,
.setting.signature .signature-lang-tabs a.is-active {
  background-color: #9ccbe6;
}

@media screen and (max-width: 768px) {
  .setting.signature .tabList {
    margin-left: auto;
  }
  .tabList.help {
    margin: 12px 0 0 auto;
  }
  .tabs li {
    width: calc(100% / 4);
  }
  .tabs a {
    padding: 1px 5px 0;
    font-size: 1.1rem;
  }
}
.earlyDiscountSetting {
  position: relative;
}
.earlyDiscountSetting .formError {
  position: absolute !important;
  margin-top: -16px !important;
}
@media screen and (max-width: 768px) {
  .earlyDiscountSetting .formError {
    position: static !important;
    margin-top: 0 !important;
  }
}

/* 予約可能日 */
.reservableDateArea .settingReservationTypeCellInner {
  display: flex;
  align-items: center;
}
.reservableDateArea .settingReservableDateCell {
  width: 80px !important;
}
.reservableDateArea .settingReservationTypeCell span {
  display: inline-flex;
}
.reservableDateArea .head {
  width: 200px;
}
.reservableDateArea .icon {
  margin-left: 10px;
  position: relative;
}
.reservableDateArea .icon:before,
.reservableDateArea .icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}
.reservableDateArea .icon.ng:before {
  width: 26px;
  height: 2px;
  margin-top: 3px;
  background-color: #CBCBCB;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.reservableDateArea .icon.ng:after {
  content: "";
  width: 26px;
  height: 2px;
  margin-top: 3px;
  background-color: #CBCBCB;
  position: absolute;
  top: calc(50%);
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.reservableDateArea .icon.tel:before {
  width: 18px;
  height: 24px;
  margin-top: 2px;
  background: url(../img/form/ico_tel-calender.svg) no-repeat center / cover;
  transform: translate(-50%, -50%);
}
.reservableDateArea .icon.request {
  background-color: #FFFFE0;
}
.reservableDateArea .icon.request:before {
  top: 0;
  left: 0;
  width: 23px;
  height: 23px;
  border: solid 2px #59D575;
  background-color: #fff;
  border-radius: 2px;
  z-index: 1;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}
.reservableDateArea .icon.request:after {
  display: none;
}
.setting.formItem .reservableDateArea .noFrameTable tr:nth-child(even) {
  background-color: #f3f3f3;
}
.settingCalenderList.calenderList {
  width: 500px;
  margin-top: 30px;
}
.settingCalenderList.calenderList .item {
  padding: 0;
  flex-direction: column;
}
.settingCalenderList.calenderList .item,
.settingCalenderList.calenderList .listContents {
  width: 100%;
}
.settingCalenderList.calenderList .titItem {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.settingCalenderList.calenderList th .inner {
  min-height: 35px;
  padding: 0;
  background-color: #f4f8fa;
}
.settingCalenderList.calenderList .item .table td:nth-child(6) .inner,
.settingCalenderList.calenderList .item .table td:nth-child(7) .inner {
  background-color: #fef4fd;
}
.settingCalenderList.calenderList td {
  pointer-events: none;
}
.btnSortSubmitWrap {
  display: none;
}
.btnSortSubmit {
  width: 100%;
  padding: 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, .8);
}

@media screen and (max-width: 768px) {
  .reservableDateArea .settingReservationTypeCell {
    width: auto !important;
  }
  .reservableDateArea .settingReservableDateCell {
    width: 60px !important;
  }
  .noFrameTableArea.reservableDateArea .noFrameTable .btnCell {
    width: 60px !important;
  }
  .reservableDateArea .settingReservationTypeCell span {
    display: inline-flex;
  }
  .reservableDateArea .head {
    width: 150px;
  }
  .reservableDateArea .icon {
    margin-left: 10px;
    position: relative;
  }
  .settingCalenderList.calenderList {
    width: 100%;
  }
  .settingCalenderList.calenderList .item,
  .settingCalenderList.calenderList .listContents {
    width: 100%;
  }
}


/* 日別料金ランク設定 */
.categoryRow + .categoryRow {
  margin-bottom: 30px;
}
.categoryRowTit {
  margin-bottom: 10px;
  font-size: 1.7rem;
  font-weight: bold;
}
.categoryRowItemWrap {
  width: 100%;
  margin: -30px 0 0 -20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.categoryRowItem {
  width: 422px;
  margin-top: 30px;
  margin-left: 20px;
}
.categoryRowTop {
  margin-bottom: 10px;
  display: flex;
}
.categoryRowTopTit {
  font-size: 1.5rem;
  font-weight: bold;
}
.categoryRowTopBtn {
  padding: 2px 4px;
  margin-left: auto;
  font-size: 1.2rem;
  border-radius: 2px;
  align-items: flex-start;
}
.categoryRowCalendar {
  border:1px solid #cbcbcb;
  border-radius: 5px;
  overflow:hidden;
}
.categoryRowItem .tdInner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.calendarDailyRank {
  width: 36px;
  height: 36px;
  margin-top: 4px;
  margin-bottom: 2px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dailyRanks .cellInner {
  padding: 5px;
}
.dailyRanks label:before {
  background-color: #fff;
}
.dailyRanks label {
  width: 50%;
  margin-left: 20px;
  text-align: left;
}
.rankId1 {
  background-color: #DD545E;
}
.rankId2 {
  background-color: #E2A959;
}
.rankId3 {
  background-color: #E5E05C;
}
.rankId4 {
  background-color: #AAE574;
}
.rankId5 {
  background-color: #84D9E5;
}

@media screen and (max-width: 768px) {
  .categoryRowItemWrap {
    margin: -30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
  }
  .categoryRowItem {
    width: 100%;
    margin-top: 30px;
    margin-left: 0;
  }
}


/*顧客情報編集*/
.customer.edit .item {
  margin: 0 15px 20px 0;
}
.customer.edit .item .item {
  margin-bottom: 0;
}
.customer.edit .inner {
  padding-bottom: 50px;
}
.customer.edit .infoBox .nameKana {
  margin-bottom: 20px;
  line-height: 1.75;
}
.customer.edit .infoBox .nameKana .lastName {
  margin-right: 15px;
}
.customer.edit .input {
  min-width: 200px;
}
.customer.edit .infoBox .name {
  font-size: 1.4rem;
  font-weight: normal;
}
.imgUpload {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  cursor: pointer;
}
.imgUpload .preview img {
  transition: .3s;
}
.btnImgUpload {
  width: 48px;
  height: 48px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #50bdf0;
  border-radius: 50%;
  background-color: #50bdf0;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: .3s;
}
.btnImgUpload .icoCamera {
  width: 24px;
  height: 23px;
  margin-top: -1px;
  overflow: hidden;
}
.btnImgUpload .icoCamera img {
  width: 100%;
  height: auto;
}
.imgUpload:hover img {
  opacity: .7;
}
.imgUpload:hover .btnImgUpload {
  background-color: #fff;
}
.imgUpload:hover .btnImgUpload img {
  margin-top: -23px;
}
.imgUpload + input {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}
.dayList.line {
  display: flex;
}
.dayList .item {
  display: flex;
}
/*.dayList .item .select {
  margin-right: 5px;
}*/
.dayListWrap .selectWrap {
  width: calc(100% - 2em);
  margin-right: 5px;
  display: inline-flex;
}
.dayListWrap .dayItem {
  display: flex;
  align-items: flex-end;
}
.dayListWrap .dayItemMedium {
  width: calc(150px + 2em);
}
.dayListWrap .dayItemSmall {
  width: calc(100px + 2em);
}
@media screen and (max-width: 768px) {
  .dayListWrap .dayItemMedium {
    width: calc(80px + 2em);
  }
  .dayListWrap .dayItemSmall {
    width: calc(60px + 2em);
  }
}

.dayListWrapWide .line {
  flex-wrap: wrap;
}
.dayListWrapWide .item {
  margin-top: 5px !important;
  margin-left: 5px !important;
}
.dayListWrapWide .item div {
  width: 108px;
  height: 42px;
  border: 1px solid #acbbc3;
  border-radius: 3px;
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
}
.dayListWrapWide .item div:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 14px solid #333;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 14px solid transparent;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) translateY(7px);
  pointer-events: none;
}
.dayListWrapWide .item div select {
     -moz-appearance: none;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  padding: 0 15px 0 8px;
  outline-style: none;
}
@media screen and (max-width: 768px) {
  .customer.edit .item {
    margin-left: 0;
  }
  .customer.edit .nameKana p,
  .customer.edit .name p {
    width: 100%;
  }
  .customer.edit .itemFull {
    width: 100%;
    margin-right: 0;
  }
  .customer.edit .profileArea .infoBox .nameKana p,
  .customer.edit .profileArea .infoBox .name p {
    margin: 0 0 10px;
  }
  .customer.edit .dayList .item,
  .customer.edit .dayList .item {
    margin-bottom: 10px;
  }
  .profileArea .line.address {
    display: block;
  }
  .edit .profileArea .line.address .item {
    margin: 0 10px 10px 0;
  }
}


/*履歴*/
.customer.history .historyNote {
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 5px;
  background-color: #e2e2e2;
}
.customer.history .profileArea:first-of-type .historyNote {
  background-color: #c3e3fe;
}
.customer.history .historyNote p {
  text-align: left;
}
.historyNote span {
  font-size: 1.6rem;
  font-weight: bold;
  display: block;
}
@media screen and (max-width: 768px) {
}


/* ===========================================
集計･分析
=========================================== */
.analysis .tabList {
  margin-left: auto;
}
.analysis .noFrameTableArea {
  margin-top: 0;
}
.analysis .noFrameTableArea + .noFrameTableArea {
  margin-top: 30px;
}
.analysis .headArea {
  margin-bottom: 10px;
}
.switchDispBox {
  display: flex;
  align-items: center;
}
.switchDispBox .tit {
  margin-right: 32px;
  font-size: 1.6rem;
  font-weight: bold;
}
.switchDispList {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
}
.switchDispList a {
  color: #0096dc;
}
.switchDispList a:hover {
  text-decoration: underline;
}
.switchDispList .active {
  color: #333;
  font-weight: bold;
  pointer-events: none;
}
.analysis .noFrameTable thead tr,
.analysis .noFrameTable tbody tr:last-child,
.accountant .noFrameTable thead tr,
.accountant .noFrameTable tbody tr:last-child {
  border-bottom-color: #333;
}
.analysis .noFrameTable tfoot tr {
  border-bottom: none;
}
.analysis .noFrameTable a {
  color: #0096dc;
  text-decoration: underline;
}
.analysis .noFrameTable a:hover {
  text-decoration: none;
}
.analysisDayCell {
  width: 300px !important;
}
.noFrameTableArea .noFrameTable .analysisCountCell,
.noFrameTableArea .noFrameTable .analysisPriceCell {
  width: 140px !important;
  padding-right: 0;
  text-align: right;
}
.yearly .analysisCategoryCell,
.yearly .analysisCourseCell {
  width: 250px !important;
}
.yearly .analysisCountCell,
.yearly .analysisReserveDateCountCell,
.yearly .analysisPriceCell,
.yearly .analysisSalesCell {
  width: 110px !important;
}
.yearly tbody .analysisPriceCell {
  padding-right: 0 !important;
  text-align: left;
}
.alignRText {
  display: inline-block;
  text-align: right;
  white-space: nowrap;
}
.alignRTextNum {
  min-width: 2.5em;
}
.alignRTextPrice {
  min-width: 6em;
}
.js-toggleTable {
  cursor: pointer;
  transition: .3s;
}
.js-toggleTable:hover {
  background-color: rgba(0, 0, 0, .1) !important;
}
.js-toggleTable span {
  padding-left: 10px;
  margin-right: .5em;
  display: inline-block;
  position: relative;
  transition: .3s;
}
.js-toggleTable span:before {
  content: "";
  width: 0;
  height: 0;
  margin-top: -5px;
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 10px solid #333;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: 50%;
}
.js-toggleTable.is-active span:before {
  transform: translateY(-50%) rotate(0);
}
.toggleTr {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  position: absolute;
}
.toggleTr.is-open {
  height: auto;
  overflow: visible;
  visibility: visible;
  position: static;
}

@media screen and (max-width: 768px) {
  .analysis .headArea + .noFrameTableArea .areaTit {
    margin-top: 0;
  }
  .switchDispBox {
    flex-direction: column;
    align-items: flex-start;
  }
  .switchDispBox .tit {
    margin-right: 32px;
    font-size: 1.4rem;
    font-weight: bold;
  }
  .switchDispList {
    margin-top: -2px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
  }
  .analysis .noFrameTableArea .noFrameTable {
    min-width: 500px;
  }
  .analysisDayCell {
    width: 120px !important;
  }
  .noFrameTableArea .noFrameTable .analysisCountCell,
  .noFrameTableArea .noFrameTable .analysisPriceCell {
    width: 140px !important;
  }
  .yearly .analysisCategoryCell,
  .yearly .analysisCourseCell {
    width: 150px !important;
  }
  .yearly .analysisCountCell,
  .yearly .analysisReserveDateCountCell,
  .yearly .analysisPriceCell,
  .yearly .analysisSalesCell {
    width: 150px !important;
  }
}

/*乗り合い*/
.accountant.jointPartnership .tabList a {
  cursor: pointer;
  pointer-events: all;
}
.accountant.jointPartnership .noFrameTable {
  min-width: 800px;
}
.accountant.jointPartnership .noFrameTable tbody tr:last-child {
  border-bottom-color: #ccc;
}
.accountant.jointPartnership .noFrameTable tbody tr:last-child {
  border-bottom-color: #ccc;
}
.accountant.jointPartnership .analysisJointShopCell,
.accountant.jointPartnership .analysisDateCell {
  width: 170px !important;
}
.accountant.jointPartnership .analysisJointTypeCell {
  width: 220px !important;
  padding-left: 10px;
}
.accountant.jointPartnership .analysisCountCell {
  width: 50px !important;
}
.accountant.jointPartnership tbody .analysisDateCell {
  padding-top: 9px;
  vertical-align: top;
  background-color: #fff;
}
.accountant.jointPartnership tbody .analysisDateCell .inner {
  min-height: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  background-color: transparent;
}
.accountant.jointPartnership .analysisJointCell {
  width: 120px !important;
  text-align: right;
  padding-right: 30px;
}
.accountant.jointPartnership thead .analysisJointCell {
  padding-right: 45px;
  text-align: right;
}

.accountant.jointPartnership tfoot tr {
  border-top: 1px double #707070;
  border-bottom: 1px solid #707070;
}
.accountant.jointPartnership tfoot td {
  font-weight: bold;
  background-color: #f3f3f3;
}
@media screen and (max-width: 768px) {
  .accountant .headArea {
    margin-bottom: 10px;
  }
  .accountant .headArea + .noFrameTableArea .areaTit {
    margin-bottom: 8px;
    line-height: 1.5;
  }
  .accountant.jointPartnership .analysisDateCell {
    width: 70px !important;
  }
  .accountant.jointPartnership .analysisJointTypeCell {
    width: 100px !important;
  }
  .accountant.jointPartnership .analysisCountCell {
    width: 30px !important;
  }
  .accountant.jointPartnership .analysisPriceCell {
    width: 70px !important;
  }
  .accountant.jointPartnership thead .analysisJointCell {
    padding-right: 0;
    text-align: center;
  }
  .accountant.jointPartnership tbody .analysisJointTypeCell {
    padding-left: 10px;
  }
  .accountant.jointPartnership .analysisJointCell {
    width: 80px !important;
    text-align: center;
  }
  .accountant.jointPartnership tbody .analysisDateCell .status {
    margin-top: 5px;
  }
}

/* デシル */
#mychartWrap {
  width: 100%;
  height: 400px;
  margin-top: 50px;
}

/* 会計検索 */
.amountList {
  display: flex;
  justify-content: flex-end;
}
.amountList > * + * {
  margin-left: 14px;
}
.amountList__item {
  font-size: 1.4rem;
  display: flex;
}
.amountList__item__head {
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .amountList {
    flex-direction: column;
  }
  .amountList > * + * {
    margin-left: 0;
  }
}


/* ===========================================
設定
=========================================== */
.setting .scrollableTableWrap {
  z-index: 10;
}
.setting .profileArea .mainArea {
  width: 100%;
}
.setting .showEditableArea .inner {
  flex-direction: column;
}
.setting .showEditableArea .editableTxt {
  padding: 18px 20px;
  background-color: #eaeaea;
}
.btnRegistSetting {
  display: flex;
  margin-left: auto;
}
.linkList {
  margin: -13px 0 0 -20px;
  display: flex;
  flex-wrap: wrap;
}
.linkList li {
  width: calc(50% - 20px);
  margin: 13px 0 0 20px;
  display: flex;
}
.linkList li a {
  width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  color: #0096dc;
  font-size: 1.4rem;
  border: 1px solid #50bdf0;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  align-items: center;
  transition: .3s;
}
.linkList li a:hover {
  color: #fff;
  background-color: #50bdf0;
}
.modalSettingArea td input,
.modalSettingArea td label {
  font-size: 1.4rem;
}
.modalSettingArea td .input {
  padding-top: 6px;
}
.modalSettingArea td .input.l {
  max-width: 100%;
}
.modalSettingArea td label:last-of-type {
  margin-right: 0;
}
.modalSettingArea td .box {
  margin-top: -7px;
}
.modalSettingArea .defaultStockTr .box {
  min-width: auto;
  margin-top: 0;
}
.setting .profileArea .configBox {
  min-height: 100px;
}
.modalSettingArea .infoFlag.hide {
  display: none;
}
.modalSettingArea .radio.hide,
.modalSettingArea .radio.hide + label {
  display: none;
}
.modalSettingArea .conditions {
  margin-top: 7px;
  display: flex;
}
.modalSettingArea .conditions span {
  width: 6em;
  display: inline-block;
}
.modalSettingArea .conditions input {
  flex: 1;
}
.setting .headArea {
  padding-top: 0;
  display: flex;
}
.setting .headArea .tabList li {
  width: 100px;
}
.courseColorIcon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-block;
}
.courseColorBox {
  gap: 8px 8px;
}
.courseColorBox [type="radio"] {
  display: none;
}
.courseColorBox .courseColorIcon {
  border: 2px solid transparent;
  cursor: pointer;
}
.courseColorBox :checked + .courseColorIcon,
.courseColorBox .courseColorIcon.is-color-selected {
  border-color: #333;
}
.isDisabledTr {
  pointer-events: none !important;
}
.isDisabledTr th,
.isDisabledTr td {
  color: #ccc;
}

@media screen and (max-width: 768px) {
  .setting .profileArea .configBox {
    min-height: 100px;
  }
  .btnRegistSetting {
    margin-right: 0;
    align-self: flex-end;
  }
  .linkList {
    margin: -10px 0 0 -10px;
  }
  .linkList li {
    width: calc(50% - 10px);
    margin: 10px 0 0 10px;
    /*width: 100%;*/
  }
}

/*カテゴリー*/
.settingCategorySelectCell {
  width: 794px !important;
}
.settingIncludeCourseCell {
  width: 660px !important;
}

/*ショップ基本情報*/
.shop .item {
  margin: 0 35px 20px 0;
  position: relative;
}
.shop .profileArea .subArea .img {
  border-radius: 0;
  border: 1px solid #e2e2e2;
  position: relative;
}
.shop .profileArea .subArea .img img {
  width: 100%;
  max-width: 150px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.shop .profileArea .shopName .txt {
  font-size: 2rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .shop .noFrameTableArea .noFrameTable .btnCell {
    width: 50px !important;
    text-align: right !important;
  }
}

/*ショップ情報編集*/
.shop.edit .item {
  margin: 20px 15px 0 0;
}
.shop.edit .inner {
  padding-bottom: 50px;
}
.shop.edit .infoBox .nameKana .lastName {
  margin-right: 15px;
}
.shop.edit .input {
  min-width: 200px;
}
.shop.edit .infoBox .name {
  font-size: 1.4rem;
  font-weight: normal;
}
.shop.edit .input.inputShort {
  min-width: 0;
}
.shop.edit .address .item {
  margin-top: 0;
}
#canvas {
  display: none;
}
.btnUpload {
  height: 26px;
  display: none;
}
.btnUpload .btn {
  width: 90px;
  margin-top: 0;
  font-size: 1.2rem;
}
.policy_url {
  color: #0096dc;
  text-decoration: underline;
}
.policyCheckbox + label {
  margin: 0;
  position: static;
  cursor: default;
}
.policyCheckbox + label:before {
  top: 4px;
}
.policyCheckbox + label:after {
  top: 7px;
}
.shop.edit .policy_url {
  display: none;
}
.shop.edit .policy_url:hover {
  text-decoration: none;
}
.shop.edit #use_policy_tempale_flag:checked + label + .policy_url {
  display: block;
}

@media screen and (max-width: 768px) {
  .shop.edit .item {
    margin: 10px 0 0 0;
  }
  .shop.edit .infoBox .nameKana .lastName {
    margin-right: 0;
  }
  .shop.edit .item {
    width: 100%;
  }
  .shop.edit .input {
    min-width: 200px;
  }
  .shop.edit .infoBox .name {
    font-size: 1.4rem;
    font-weight: normal;
  }
  .shop.edit .input.inputShort {
    max-width: 150px;
  }
  .shop.edit .imgUpload {
    cursor: pointer;
  }
  .shop.edit .imgUpload img {
    transition: .3s;
  }
  .shop.edit .imgUpload:hover img {
    opacity: .7;
  }
  .shop.edit .imgUpload + input {
    width: 0;
    height: 0;
    opacity: 0;
  }
}


.setting .profileArea .txt textarea {
  width: 100%;
  height: 200px;
  padding: 20px;
  border-color: #50bdf0;
  display: block;
}
.setting .scrollableTableWrap js-scrollable {
  width: 100%;
  margin-left: 0;
}

@media screen and (max-width: 768px) {
}

/*PDFダウンロード*/
.profileArea .txtBox {
  min-height: 0;
  padding-bottom: 20px;
}
.profileArea .txtBox .list {
  display: flex;
  align-items: center;
}
.profileArea .txtBox .list dt {
  margin-right: 42px;
  font-size: 1.2rem;
  font-weight: bold;
}
.profileArea .txtBox .list dd a {
  color: #0096dc;
  font-size: 1.4rem;
  text-decoration: underline;
}
.profileArea .txtBox .list dd a:hover {
  text-decoration: none;
}
.settingdescriptionCell {
  width: 300px !important;
}
.settingPdfCell {
  width: 100px !important;
}
.settingDisplayedCategoryCell {
  width: 70px !important;
}
.pdfDownload .box {
  width: 100%;
}
.pdfDownload .pdfDownloadformInner {
  width: 100%;
  padding-bottom: 30px;
  overflow-x: auto;
}
@media screen and (max-width: 768px) {
  .profileArea .txtBox .list {
    align-items: flex-start;
    flex-direction: column;
  }
  .profileArea .txtBox .list dt {
    margin-bottom: 5px;
  }
}


.modalTable input[type=file] {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.modalTable .fileLabel {
  width: 100px;
  height: 25px;
  padding: 1px 0;
  color: #fff;
  font-size: 1.2rem;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  background-color: #50bdf0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: .3s;
  cursor: pointer;
}
.modalTable .fileLabel:hover {
  color: #0096dc;
  background-color: #fff;
}
.addReserveLink {
  margin-top: 5px;
  display: flex;
}
.addReserveLink a {
  min-height: 20px;
  font-size: 1.2rem;
}
.modalTable .fileWrap {
  display: flex;
}
.modalTable .fileName,
.modalTable .fileDelete {
  margin-left: 20px;
  display: none;
  word-break: break-all;
}
.modalTable .fileName.is-show,
.modalTable .fileDelete.is-show {
  display: block;
}
.modalTable .fileName a {
  color: #0096dc;
  text-decoration: underline;
}
.modalTable .fileName a:hover {
  text-decoration: none;
}
.modalTable .fileDelete a {
  color: #ff81e7;
}
.modalTable .fileDelete a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .modalTable .fileWrap {
    flex-direction: column;
  }
  .settingdescriptionCell {
    width: 200px !important;
  }
  .modalTable .fileName {
    margin: 10px 0 0;
    line-height: 1.5;
  }
}

/*PDFダウンロードページ*/
.pdfDownloadPage .content {
  width: 510px;
  margin: 30px auto 86px;
  font-size: 1.4rem;
}
.pdfDownloadPage .pageTit {
  margin-bottom: 10px;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
}
.pdfDownloadPage .lead {
  margin-bottom: 30px;
  text-align: center;
}
.pdfDownloadPage .box:not(:first-of-type) {
  margin-top: 30px;
}
.pdfDownloadPage .boxTit {
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: bold;
}
.pdfDownloadPage .tableWrap {
  border: 1px solid #acbbc3;
  border-radius: 3px;
  overflow: hidden;
}
.pdfDownloadPage .table tr + tr {
  border-top: 1px solid #acbbc3;
}
.pdfDownloadPage .table th,
.pdfDownloadPage .table td {
  height: 44px;
  border: none;
  background-color: #fff;
}
.pdfDownloadPage .table th {
  padding-left: 22px;
  font-size: 1.4rem;
  text-align: left;
}
.pdfDownloadPage .table td {
  text-align: right;
}
.pdfDownloadPage .table .btn {
  width: 94px;
  min-height: 26px;
  border-radius: 2px;
  font-size: 1.2rem;
  text-decoration: none;
  display: inline-flex;
}
@media screen and (max-width: 768px) {
  .pdfDownloadPage .content {
    width: 100%;
    margin: 30px auto 86px;
    font-size: 1.4rem;
  }
  .pdfDownloadPage .lead {
    font-size: 1.2rem;
  }
}

/*カスタム*/
.customTab .form {
  width: 100%;
}
.sortTable {
  width: 100%;
}
.sortTable tr {
  border-bottom: 1px solid #ccc;
}
.sortTable tr:nth-child(even) {
  background-color: #f3f3f3;
}
.sortTable th {
  padding-bottom: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2;
}
.sortTable td {
  height: 40px;
  padding: 6px 10px 6px 0;
  font-size: 1.4rem;
  line-height: 1.5;
  vertical-align: middle;
  word-break: break-all;
}
.sortTable .settingSortCell {
  width: 50px;
  text-align: center;
  vertical-align: middle;
}
.sortTable .settingSortCell img {
  vertical-align: middle;
  cursor: pointer;
}
.sortTable .settingCustomTabLabelCell {
  width: 850px;
}
.sortTable .settingCustomTabStatusCell {
  width: 100px;
}
.sortTable .checkbox + label {
  margin-top: 0;
}
.ui-sortable-helper {
  box-shadow: 0 0 10px rgb(0 0 0 / 16%);
}
@media screen and (max-width: 768px) {
  .customTab .profileArea:not(#basic_setting) .inner {
    padding-top: 40px;
  }
}

/* 紹介キャンペーン */
.introduce .titArea {
  margin-bottom: 60px;
}
.introduce .titArea .lead {
  margin: 30px 0 20px;
}
.introduce .listBan {
  display: flex;
  justify-content: center;
}
.introduce .listBan li + li {
  margin-left: 20px;
}
.introduce .btnMore {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.introduce .btnMore a {
  width: 200px;
  height: 45px;
  font-weight: normal;
  border-radius: 2px;
}

@media screen and (max-width: 768px) {
  .introduce .titArea .lead {
    margin-top: 20px;
    text-align: left;
  }
  .introduce .listBan {
    flex-direction: column;
  }
  .introduce .listBan li + li {
    margin: 15px 0 0;
  }
  .introduce .listBan img {
    width: 100%;
    height: auto;
  }
}

/* ダウンロード */
.setting.download .profileArea .inner {
  padding-bottom: 24px;
}
.setting.download .message {
  margin-top: -20px;
  margin-bottom: 20px;
  color: #ff81e7;
  font-size: 1.4rem;
  text-align: center;
}

/* ツアー・イベント */
.addRowWrap .row {
  margin-bottom: 5px;
}

.optionsWrap {
  display: none;
}
.optionsWrap.is-active {
  display: block;
}

/* 自社ボートへの乗り合いショップ */
.iconAcceptInvite {
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: -35px;
  transform: translateY(-50%);
  background:url(../img/common/ico_collaboration.svg) no-repeat center bottom / 10px auto;
}
.iconAcceptInvite--text {
  color: #51BDF0;
  font-size: 10px;
  transform: scale(.9);
}
.iconMailSent {
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: -35px;
  transform: translateY(-50%);
  background:url(../img/common/ico_inviting.svg) no-repeat center 16px / 10px auto;
}
.iconMailSent--text {
  color: #51BDF0;
  font-size: 10px;
  transform: scale(.9);
}


/* デジタル同意書 */
.digitalForm .profileAreaWrap + .profileAreaWrap {
  margin-top: 45px;
}
.digitalFormStatus {
  padding: 3px 5px;
  margin-right: 5px;
  color: #333;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  border: 1px solid #989999;
  background-color: #fff;
}
.inputElement {
  width: 20px;
  height: 20px;
  margin-right: 13px;
  border: 1px solid #50BDF0;
  background-color: #fff;
  display: block;
  flex-shrink: 0;
}
.inputElement--checkbox {
  border-radius: 3px;
}
.inputElement--radio {
  border-radius: 50%;
}
.is-disabled label,
.is-disabled label:before,
.is-disabled label:after,
.is-disabled input {
  color: #999999;
  border-color: #999999;
}
.is-disabled label:after   {
  background-color: #999999;
}

.js-addDigitalForm:hover {
  color: #fff !important;
}

/* ===========================================
会計
=========================================== */
/*一覧*/
/*.accountant .headArea {
  padding-top: 0;
  justify-content: center;
}
.accountant .headArea .headTitleBox {
  position: static;
  transform: translateX(0);
}*/
.backPage a {
  color: #666;
  font-size: 1.2rem;
}
.backPage a:hover {
  text-decoration: underline;
}
.accountant .tabList {
  margin-left: auto;
}
.accountantDetail {
  padding-top: 2px;
  justify-content: center;
}
.accountantDetail .headTitleBox {
  position: static;
  transform: translateX(0);
}
.accountant .profileArea {
  margin-top: 0;
  margin-bottom: 40px;
}

.accountant .dayResultArea tbody tr:last-child {
  border-bottom: none;
}
.accountant .dayResultArea th,
.accountant .dayResultArea td {
  padding: 10px 0;
}
.accountant .dayResultArea td {
  font-weight: bold;
  text-align: right;
}
.accountant .dayResultArea tfoot tr {
  border-top: 1px solid #000;
  border-bottom-color: #e2e2e2;
}
.accountant .dayResultArea .grayBorderBottom {
  border-bottom: 1px solid #ccc;
}
.accountant .scrollableTableWrap {
  width: 100%;
  margin-right: 0;
}
.accountant .scrollableTable {
  width: 100%;
  min-width: 874px;
  min-height: 120px;
  table-layout: fixed;
}
.accountantList .item + .item {
  margin-top: 30px;
}
.accountantList .item a {
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  transition: .3s;
}
.accountantList .item a:hover {
  opacity: .7;
}
.accountantArea .subArea {
  width: 180px;
  height: 180px;
  margin-right: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.accountantArea .mainArea {
  flex: 1;
}
.accountantArea .status {
  width: 76px;
  height: 18px;
  margin-bottom: 7px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.accountantArea .status.notYet {
  background-color: #ff81e7;
}
.accountantArea .status.partial {
  background-color: #7cd123;
}
.accountantArea .status.done {
  background-color: #50bdf0;
}
.accountantArea .nameWrap {
  margin-bottom: 11px;
  display: flex;
  align-items: center;
}
.accountantArea .nameWrap .name {
  margin-right: 25px;
  font-size: 2rem;
  font-weight: bold;
}
.accountantArea .nameWrap .name span + span {
  margin-left: 1em;
}
.accountantArea .period {
  font-size: 1.4rem;
}
.accountantArea .period .head {
  font-size: 1.2rem;
  font-weight: bold;
}
.accountantTableWrap {
  width: 100%;
  padding: 12px;
  border: 2px solid #333;
}
.accountantTable {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.5;
}
.accountantTable th {
  padding: 0 0 1px 10px;
}
.accountantTable td {
  padding: 0 10px 1px 0;
  text-align: right;
}
.accountantTable .total {
  background-color: #e2e2e2;
}
.accountantTable .total th,
.accountantTable .total td {
  padding: 10px 10px;
  font-weight: bold;
}
.accountantTable .payment {
  background-color: #fff;
}
.accountantTable .payment th,
.accountantTable .payment td {
  padding: 5px 10px;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .accountantList .item a {
    padding: 10px;
    flex-direction: column;
  }
  .accountantArea .subArea {
    margin: 0 0 20px;
  }
  .accountantArea .mainArea {
    width: 100%;
  }
}

.accountantList .noFrameTableArea .noFrameTable .nameCell {
  width: 100px !important;
}
.accountantList .noFrameTableArea .noFrameTable .groupCell {
  width: 60px !important;
}
.accountantList .noFrameTableArea .noFrameTable .statusCell {
  width: 80px !important;
}
.accountantList .noFrameTableArea .noFrameTable .countCell {
  width: 50px !important;
}
.accountantList .noFrameTableArea .noFrameTable .scheduledDateLCell {
  width: 150px !important;
}
.accountantList .noFrameTableArea .noFrameTable .priceCell {
  width: 80px !important;
  text-align: right;
}
.accountantList .noFrameTableArea .noFrameTable td.priceCell {
  padding-right: 0;
}

/*詳細*/
/*.accountantDetailArea {
  display: flex;
}*/
.accountantTopArea {
  margin-bottom: 40px;
}
.accountantTopArea .nameWrap {
  margin-bottom: -10px;
}
.accountantTopArea .noFrameTableArea .noFrameTable {
  min-height: 0;
}
.accountantTopArea .noFrameTableArea .noFrameTable td {
  padding-right: 0;
}
.accountantTopArea .profileArea .inner {
  flex-direction: column;
}
.accountantTopArea .nameCell {
  width: 80px !important;
}
.accountantTopArea .statusCell {
  width: 400px !important;
}
.accountantTopArea .priceCell {
  width: 80px !important;
  padding-right: 0;
  text-align: right;
}
.accountantTopArea .status {
  margin: 0;
  padding-top: 2px;
}
.transactionData {
  margin-top: 10px;
  font-size: 1.4em;
}
.totalDetailArea {
  padding: 0 20px 26px;
  border-radius: 0 0 5px 5px;
  background-color: #fff;
  display: flex;
  align-items: flex-end;
}
.totalDetailArea .btnWrap .attention {
  margin-bottom: 5px;
  color: #ff81e7;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}
.totalDetailBox {
  padding: 14px 12px 12px;
  border: 2px solid #333;
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.accountant .detailBox {
  width: calc(50% - 5px);
  color: #333;
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
}
.accountant .detailBox .items {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
}
.accountant .detailBox li {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.accountant .detailBox li.is-payment-cancelled .head,
.accountant .detailBox li.is-payment-cancelled .body,
.accountant .detailBox li.is-auth-expired .head,
.accountant .detailBox li.is-auth-expired .body {
  text-decoration: line-through;
}
.accountant .detailBox li.authExpiredNote {
  justify-content: flex-start;
  color: #333;
  font-size: 1.3rem;
}
.setPaymentForm .accountantInputBox.is-auth-expired .authExpiredStrike,
.setPaymentForm .accountantInputBox.is-auth-expired .input.price {
  text-decoration: line-through;
}
.setPaymentForm .accountantInputBox .head .authExpiredNote {
  display: inline-block;
  margin-top: 2px;
  color: #333;
  font-size: 1.3rem;
  text-decoration: none;
}
.detailBox .subtotal {
  margin-top: auto;
}
.detailBox .subtotal li {
  min-height: 42px;
  font-weight: bold;
  align-items: center;
}
.detailBox .subtotal.total li {
  background-color: #e2e2e2;
}
.detailBox .subtotal.payment li {
  background-color: #c3e3fe;
}
.detailBox li.taxRow {
  margin-right: -1em;
  padding-left: calc(10px + 0.2em);
}
.accountant .btnWrap {
  width: 196px;
  margin-left: 20px;
}
.accountant .btnSubmit {
  height: 40px;
}
.accountant .btnSubmit a {
  margin-top: 0;
}
.accountant .btnReset {
  margin-top: 10px;
}
.btnWrapPdf {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #e2e2e2;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.btnWrapPdf .tit {
  width: 100%;
  margin-bottom: 9px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
.btnWrapPdf .btnPdf {
  width: calc(50% - 4px);
  height: 36px;
}
.btnWrapPdf .btnPdf a {
  height: 100%;
  font-size: 1.2rem;
  border-radius: 2px;
}
.buttonDisabledLayer {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

@media screen and (max-width: 768px) {
  .accountantTopArea .noFrameTable {
    min-width: 100%;
  }
  .accountantTopArea .nameWrap {
    margin-bottom: 0;
  }
  .accountantTopArea .nameCell {
    width: 80px !important;
  }
  .accountantTopArea .noFrameTableArea .noFrameTable .statusCell {
    width: 60px !important;
  }
  .accountantTopArea .priceCell {
    width: 80px !important;
    padding-right: 0;
    text-align: right;
  }
  .totalDetailArea {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    flex-direction: column;
  }
  .totalDetailBox {
    width: 100%;
    flex-direction: column;
  }
  .accountant .detailBox {
    width: 100%;
  }
  .accountant .detailBox + .detailBox {
    margin-top: 10px;
  }
  .accountant .detailBox .subtotal li {
    min-height: 42px;
    font-weight: bold;
    align-items: center;
  }
  .detailBox li.taxRow {
    padding-left: 10px;
  }
  .accountant .btnWrap {
    width: 196px;
    margin: 10px auto 0;
  }
  .accountant .btnSubmit {
    margin-bottom: 10px;
  }
}

.accountantDetailArea .accountantDetailBox {
  display: flex;
}
.accountantDetailArea .accountantDetailBox + .accountantDetailBox {
  margin-top: 40px;
}
.accountantDetailArea .customerInfoArea {
  width: 41.853360489%;
  height: 100%;
  margin-right: 21px;
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
}
.accountantDetailArea .nameWrap {
  margin-bottom: 0;
}
.accountantDetailArea .status {
  margin-bottom: 0;
}
.accountantDetailArea .period {
  margin-bottom: 15px;
}
.accountantDetailBox .detailBox {
  width: 100%;
}
.accountantDetailBox .detailBox .subtotal + .subtotal {
  margin-top: 5px;
}
.accountantDetailArea .btnSubmit {
  width: 100%;
  margin-top: 10px;
}
.accountant .btnReset {
  width: 150px;
  height: 34px;
  margin: 0 auto;
}
.accountant .btnReset .btn {
  height: 100%;
  font-size: 1.2rem;
  border-radius: 2px;
}
.accountantDetailArea .priceDetailArea {
  flex: 1;
}
.accountantDetailArea .priceDetailArea .item {
  padding: 13px 20px;
  border-radius: 5px;
  background-color: #fff;
}
.accountantDetailArea .priceDetailArea .item + .item {
  margin-top: 20px;
}
.accountantDetailArea .subArea {
  margin: 0 auto 20px;
}
.accountantDetailArea .priceDetailArea .list dt {
  margin-bottom: 13px;
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.accountantDetailArea .priceDetailArea .list dt .date {
  color: #0096dc;
  text-decoration: none;
}
.accountantDetailArea .priceDetailArea .list dt .date:hover {
  text-decoration: underline;
}
.accountantDetailArea .priceDetailArea .list dt .status {
  width: auto;
  min-width: 80px;
  min-height: 23px;
  padding: 0 10px;
  margin: -2px 0 0 10px;
  font-size: 1.2rem;
  border-radius: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  transition: .3s;
}
.accountantDetailArea .priceDetailArea .list dt .status:hover {
  color: #fff;
}
.accountantDetailArea .priceDetailArea .list dt .status1 {
  color: #7cd123;
  border: 1px solid #7cd123;
}
.accountantDetailArea .priceDetailArea .list dt .status2 {
  color: #0096dc;
  border: 1px solid #50bdf0;
}
.accountantDetailArea .priceDetailArea .list dt .status3,
.accountantDetailArea .priceDetailArea .list dt .status4,
.accountantDetailArea .priceDetailArea .list dt .status5 {
  color: #ff81e7;
  border: 1px solid #ff81e7;
}
.accountantDetailArea .priceDetailArea .list dt .status1:hover {
  background-color: #7cd123;
}
.accountantDetailArea .priceDetailArea .list dt .status2:hover {
  background-color: #50bdf0;
}
.accountantDetailArea .priceDetailArea .list dt .status3:hover,
.accountantDetailArea .priceDetailArea .list dt .status4:hover {
  background-color: #ff81e7;
}
.accountantDetailArea .priceDetailArea .list dt .status5:hover {
  background-color: #ff81e7;
}
.accountantDetailArea .priceDetailArea .list dd {
  padding: 10px;
  border: 1px solid #333;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.accountantDetailArea .priceDetailArea .list dd + dd {
  margin-top: 8px;
}
.accountantDetailArea .priceDetailArea .list dd .head {
  margin-right: 20px;
  font-size: 1.4rem;
}
.accountantDetailArea .priceDetailArea .list dd .price {
  margin: 0 0 0 auto;
  font-size: 1.4rem;
  font-weight: bold;
  white-space: nowrap;
}
.accountantDetailArea .priceDetailArea .disabled .price,
.accountantDetailArea .priceDetailArea .disabled .price {
  color: #999;
  text-decoration: line-through;
}
.accountantDetailArea .priceDetailArea .list dd .price.discount {
  color: #ff81e7;
}
.accountantDetailArea .priceDetailArea .list dd .price span {
  font-size: 1.2rem;
  font-weight: normal;
}
.accountantDetailArea .priceDetailArea .list dd .btn {
  width: 54px;
  margin-left: 8px;
  font-size: 1rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.accountantDetailArea .priceDetailArea .btnAdd .btn {
  width: 120px;
  margin-top: 8px;
  font-size: 1.2rem;
  border-radius: 2px;
}
.accountantDetailArea .priceDetailArea .form {
  display: flex;
  align-items: center;
}
.accountantDetailArea .priceDetailArea .form input {
  width: 100px;
  text-align: right;
  border-bottom: 1px solid #acbbc3;
}
.accountantDetailArea .priceDetailArea .form .tax {
  width: 90px;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
}
.accountantDetailArea .priceDetailArea .form .tax label {
  margin: 0 8px 0 0;
  white-space: nowrap;
}
.accountantDetailArea .priceDetailArea .form .btnSave {
  margin-left: auto;
}
.accountantDetailArea .hide {
  display: none;
}
.customerInfoArea .btnReset {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .accountantDetailBox {
    flex-direction: column;
  }
  .accountantDetailArea .customerInfoArea {
    width: 100%;
    height: 100%;
    margin: 0 0 20px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
  }
  .accountantDetailArea .priceDetailArea .list dd {
    flex-wrap: wrap;
  }
  .accountantDetailArea .priceDetailArea .list dd .head {
    width: 100%;
  }
}

/*モーダル*/
.accountantModalbox {
  margin-top: 30px;
  display: none;
  position: relative;
}
.accountantModalbox .radioList > .formError {
  margin-top: -23px !important;
}
.accountantModalbox .radioList > .formError .formErrorContent {
  padding-right: 10px;
  position: absolute !important;
}
.accountantModalbox .radioList > .formError ~ label {
  border-color: #ff81e7;
  background-color: #ffdefd;
}
.formError ~ label:before {
  border-color: #ff81e7;
}
.accountantInputBox {
  width: 100%;
  min-height: 42px;
  margin: 10px 10px 0 0;
  padding: 8px 11px 8px;
  font-size: 1.4rem;
  border: 1px solid #acbbc3;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.accountantInputBox .input {
  border: none;
  border-bottom: 1px solid #acbbc3;
}
.accountantInputBox .name {
  min-height: 25px;
  margin-right: 18px;
  font-size: 1.4rem;
  flex: 1;
  position: relative;
}
.accountantInputBox .input {
  max-width: 100%;
  /*height: 100%;*/
  padding-right: 0;
  padding-left: 0;
  font-size: 1.4rem;
}
.accountantInputBox .priceBox {
  width: 140px;
  position: relative;
}
.accountantInputBox .priceBox .input {
  font-size: 1.4rem;
  text-align: right;
}
.accountantInputBox .input:focus {
  border-bottom-color: #50bdf0;
}
.accountantInputBox .tax {
  min-height: 25px;
  margin-left: 13px;
  position: relative;
}
.accountantInputBox .tax .radio + label {
  margin: 0;
}
.accountantInputBox #tax1 + label,
.accountantInputBox #discount_tax1 + label,
.accountantInputBox #other_tax1 + label {
  margin-right: 18px;
}
.accountantInputBox .addAccountantBtn {
  margin-left: 30px;
}
.accountantInputBox .addAccountantBtn .btn {
  border-color: #50bdf0;
  background-color: #50bdf0;
}
.accountantInputBox .addAccountantBtn .btn:hover {
  color: #0096dc;
}
.deleteTxt {
  margin-top: 20px;
  text-align: center;
}
.deleteTxt a {
  color: #ff81e7;
  font-size: 1.3rem;
  text-decoration: underline;
}
.deleteTxt a:hover {
  text-decoration: none;
}
.deleteTxtBtn {
  display: flex;
  justify-content: center;
}
.deleteTxtBtn a {
  padding: 0 10px;
  min-height: 26px;
  color: #ff81e7;
  font-size: 1.4rem;
  border: 1px solid #ff81e7;
  border-radius: 2px;
  background-color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.deleteTxtBtn a:hover {
  color: #fff;
  background-color: #ff81e7;
}
.accountantBtn {
  display: none;
}
.accountantModalOtherInput + label + .accountantInputBox {
  margin-left: 5px;
  position: relative;
  display: none;
}
.accountantModalOtherInput:checked + label + .accountantInputBox {
  display: flex;
}
.accountantModalbox .rentalOther .price .formError {
  padding-right: 0;
  text-align: right;
}
.accountantModalbox .rentalOther .tax .formError ~ label {
  background-color: #fff;
}
.accountantInputBox + .statusTxt {
  margin-top: 5px;
  text-align: right;
}

@media screen and (max-width: 768px) {
  #menuBox .half + label,
  .checkbox.bar.half + label {
    width: 100%;
    margin-right: 0;
  }
  .accountantInputBox {
    margin-right: 5px;
    margin-left: 5px;
    padding: 10px 10px 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .accountantInputBox .name {
    width: 100%;
    min-height: 0;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .accountantInputBox .price {
    width: 100%;
  }
  .accountantInputBox .price .input {
    text-align: left;
  }
  .accountantInputBox .tax {
    width: 100%;
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
  }
  .accountantInputBox .addAccountantBtn {
    margin: 20px auto 0;
  }
  .accountantModalbox .rentalOther .formError {
    text-align: left;
  }
  .accountantModalbox .rentalOther .formError .formErrorContent {
    padding-right: 0;
    text-align: left;
  }
}

/*精算モーダル*/
.setPaymentForm .box + .box {
  margin-top: 17px;
}
.setPaymentForm form + form {
  margin-top: 17px;
}
.setPaymentForm input[name="payment_master_id"].is-disabled {
  pointer-events: none;
}
.setPaymentForm input[name="payment_master_id"].is-disabled + label {
  background-color: #e2e2e2;
  pointer-events: none;
}
.setPaymentForm input[name="payment_master_id"].is-disabled + label:before {
  background-color: #e2e2e2;
}
.setPaymentForm .accountantInputBox {
  width: 50%;
}
.setPaymentForm .paymentPriceArea {
  margin: 0 -5px;
  display: flex;
  align-items: flex-end;
}
.setPaymentForm .paymentPriceArea .accountantInputBox {
  width: calc((100% / 3) - 10px);
  margin: 0 5px;
}
.setPaymentForm .paymentPriceArea .btn {
  width: 115px;
  min-height: 42px;
  margin-left: 5px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  background-color: #50bdf0;
  border-color: #50bdf0;
  outline: none;
}
.setPaymentForm .paymentPriceArea .btn:hover {
  color: #0096dc;
}
.setPaymentForm .accountantInputBox {
  margin-top: 0;
}
.setPaymentForm .accountantInputBox .priceBox {
  width: 100%;
}
.setPaymentForm .paymentPriceArea .accountantInputBox p {
  width: 100%;
  display: flex;
  position: relative;
}
.setPaymentForm .paymentPriceArea .accountantInputBox .formError {
  top: -21px !important;
  left: -7px !important;
  white-space: nowrap;
}
.setPaymentForm .paymentPriceArea .accountantInputBox .head {
  margin-right: auto;
  white-space: nowrap;
}
.setPaymentForm .paymentPriceArea .accountantInputBox .input,
.setPaymentForm .paymentPriceArea .accountantInputBox .dateSelect {
  width: 100%;
  max-width: 136px;
  text-align: right;
}
.setPaymentForm .paymentPriceArea .accountantInputBox .dateSelect {
  border-bottom: 1px solid #acbbc3;
}
.setPaymentForm .paymentPriceArea.is-disabled {
  pointer-events: none;
}
.setPaymentForm .paymentPriceArea.is-disabled .accountantInputBox {
  background-color: #e2e2e2;
}
.setPaymentForm .paymentPriceArea.is-disabled .input {
  background-color: transparent;
}
.setPaymentForm .paymentPriceArea.is-disabled .btnAddPayment {
  pointer-events: none;
  border-color: #e2e2e2;
  background-color: #e2e2e2;
}
.setPaymentForm .calcPaymentArea {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.setPaymentForm .calcPaymentBox {
  width: calc(50% - 5px);
}
.setPaymentForm .calcPaymentBox .detailBox {
  width: 100%;
}
.setPaymentForm .calcPaymentBox .detailBox + .detailBox {
  margin-top: 9px;
}
.setPaymentForm .calcPaymentBox .accountantInputBox {
  width: 100%;
  align-items: flex-start;
  position: relative;
}
.setPaymentForm .calcPaymentBox .accountantInputBox .head {
  font-size: 1.4rem;
  white-space: nowrap;
}
.setPaymentForm .calcPaymentBox select {
  font-size: 1.2rem;
  appearance: none;
  border: none;
  background-color: transparent;
  pointer-events: none;
}
.setPaymentForm .calcPaymentBox.payment .priceBox {
  display: flex;
}
.setPaymentForm .calcPaymentBox.payment .accountantInputBox + .accountantInputBox {
  margin-top: 9px;
}
.setPaymentForm .calcPaymentBox .accountantInputBox .input {
  max-width: 140px;
  margin-left: auto;
}
.setPaymentForm .calcPaymentBox .accountantInputBox .input[name^="payment_date"] {
  max-width: 90px;
  margin-right: 0;
  text-align: center;
  border-bottom: none;
  pointer-events: none;
}
.setPaymentForm .calcPaymentBox .accountantInputBox .input.disabled {
  padding-bottom: 3px;
  border-bottom: none;
  background-color: #fff;
  pointer-events: none;
}
.setPaymentForm .calcPaymentBox.payment .btnEdit {
  margin-left: 10px;
  display: flex;
}
.setPaymentForm .calcPaymentBox .accountantInputBox .btn {
  min-width: 54px;
  white-space: nowrap;
}
.setPaymentForm .calcPaymentBox.payment .js-edit {
  color: #0096dc;
  border-color: #50bdf0;
}
.setPaymentForm .calcPaymentBox.payment .js-edit:hover {
  color: #fff;
  background-color: #50bdf0;
}
.setPaymentForm .calcPaymentBox.payment .subButtons {
  display: none;
}
.setPaymentForm .calcPaymentBox.payment .is-editing .subButtons {
  display: block;
}
.setPaymentForm .calcPaymentBox.payment .subButtons a + a {
  margin-left: 10px;
}
.setPaymentForm .calcPaymentBox.payment .btnOk {
  color: #fff;
  text-align: center;
  background-color: #50bdf0;
  border-color: #50bdf0;
}
.setPaymentForm .calcPaymentBox.payment .btnOk:hover {
  color: #0096dc;
  background-color: #fff;
}
.setPaymentForm .calcPaymentBox.payment .btnNg {
  color: #999;
  border-color: #999;
}
.setPaymentForm .calcPaymentBox.payment .btnNg:hover {
  color: #fff;
  background-color: #999;
}
.setPaymentForm .calcPaymentBox.payment .is-editing {
  flex-direction: column;
}
.setPaymentForm .calcPaymentBox.payment .is-editing .js-edit {
  display: none;
}
.setPaymentForm .calcPaymentBox.payment .is-editing .input {
  margin-right: 0;
  border-bottom: 1px solid #acbbc3;
  pointer-events: all;
}
.setPaymentForm .calcPaymentBox .is-editing .input {
  border-bottom: 1px solid #acbbc3;
  pointer-events: all;
}
.setPaymentForm .calcPaymentBox.payment .is-editing .btnEdit {
  margin-top: 10px;
  margin-left: auto;
}
.setPaymentForm .calcPaymentArea .restPrice {
  margin-bottom: 5px;
  color: #ff81e7;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: right;
  position: absolute;
  top: -25px;
  right: 10px;
}
.setPaymentForm .dateSelectWrap {
  /*width: 100%;*/
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.setPaymentForm .dateSelect {
  border-bottom: 1px solid #333;
  display: inline-flex;
  justify-content: flex-end;
}
.setPaymentForm .dateSelect dt {
  padding: 2px 0 0;
  font-size: 1.2rem;
  margin-right: 29px;
}
.setPaymentForm .dateSelect dd {
  position: relative;
}

.setPaymentForm .dateSelect .selectWrapSimple {
  margin: 0;
}
.setPaymentForm .dateSelect .selectWrapSimple:after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #333;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
}
.setPaymentForm .dateSelect .selectWrapSimple select {
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 2px 19px 2px 13px;
  background-color: #fff;
  cursor: pointer;
}
.setPaymentForm .btnWrap {
  width: 100%;
  margin-top: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.setPaymentForm .btnWrap .paymentClose {
  width: 196px;
  height: 42px;
}
.setPaymentForm .btnWrap .btn {
  width: 100%;
  height: 100%;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.setPaymentForm .btnWrap .paymentClose .btn {
  color: #0096dc;
  font-size: 1.2rem;
  border: 1px solid #50bdf0;
}
.setPaymentForm .btnWrap .paymentClose .btn:hover {
  color: #fff;
  background-color: #50bdf0;
}
.setPaymentForm .btnWrap.is-paid .paymentClose {
  display: none;
}
.setPaymentForm .btnWrap .salesSave {
  width: 196px;
  height: 42px;
  display: none;
}
.setPaymentForm .btnWrap.is-paid .salesSave {
  display: block;
}
.setPaymentForm .btnWrap .salesSave .btn {
  padding-bottom: 1px;
  color: #fff;
  font-size: 1.4rem;
  border: 1px solid #999;
  background-color: #7cd123;
  outline: none;
}
.setPaymentForm .btnWrap.is-disabled .btn {
  color: #fff;
  border: 1px solid #e2e2e2;
  background-color: #e2e2e2;
  pointer-events: none;
}
.setPaymentForm .btnWrap .salesSave .btn:hover {
  color: #7cd123;
  background-color: #fff;
}
.setPaymentForm .formError {
  position: absolute !important;
  top: -5px !important;
  left: 10px !important;
}
.setPaymentForm .paymentPriceArea .formError {
  top: 0 !important;
  left: 0 !important;
}


@media screen and (max-width: 768px) {
  .setPaymentForm .accountantInputBox {
    width: 100%;
  }
  .setPaymentForm .paymentPriceArea {
    flex-direction: column;
  }
  .setPaymentForm .paymentPriceArea .btn {
    margin: 10px auto 0 0;
  }
  .setPaymentForm .accountantInputBox {
    margin: 0;
  }
  .setPaymentForm .accountantInputBox .priceBox {
    width: 100%;
  }
  .setPaymentForm .paymentPriceArea {
    margin: 0;
    display: flex;
    align-items: flex-end;
  }
  .setPaymentForm .paymentPriceArea .accountantInputBox {
    width: 100%;
    margin: 0;
  }
  .setPaymentForm .paymentPriceArea .accountantInputBox + .accountantInputBox {
    margin-top: 10px;
  }
  .setPaymentForm .calcPaymentArea {
    flex-direction: column;
  }
  .setPaymentForm .calcPaymentBox {
    width: 100%;
  }
  .setPaymentForm .calcPaymentBox .detailBox {
    width: 100%;
  }
  .setPaymentForm .calcPaymentBox .accountantInputBox + .accountantInputBox {
    margin-top: 10px;
  }
  .setPaymentForm .calcPaymentBox .accountantInputBox .input {
    margin-right: 0;
  }
  .setPaymentForm .calcPaymentBox.payment .btnEdit {
    margin: 5px 0 0 auto;
  }
  .setPaymentForm .calcPaymentBox.total {
    margin-top: 10px;
  }
  .setPaymentForm .btnWrap .paymentClose {
    height: 40px;
  }
}

/* 精算モーダル */
.paymentBox--wrap {
  width: 80vw;
  max-width: 788px;
}

.tabContents .paymentBox.tabItem.is-active {
  display: block;
}
.paymentBox__lead {
  margin-bottom: 15px;
  font-size: 1.4rem;
  text-align: center;
}
.paymentBox--wrap .js-tabs {
  max-width: 184px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
}
.paymentBox--wrap .js-tabs li {
  width: 100%;
}
.paymentBox--wrap .js-tabs .is-active {
  color: #fff;
  background-color: #7cd123;
}
.paymentBox__detail .paymentBox__line {
  display: flex;
  gap: 10px 10px;
  justify-content: space-between;
}
.paymentBox__detail .paymentBox__line +.paymentBox__line {
  margin-top: 10px;
}
.paymentBox__detail__item--wrap {
  width: calc(50% - 10px);
}
.paymentBox__detail__item {
  width: 100%;
  padding: 10px 17px 7px;
  font-size: 1.4rem;
  border: 1px solid #ACBBC3;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.paymentBox__detail__item + .paymentBox__detail__item {
  margin-top: 10px;
}
.paymentBox__detail__item dt {
  font-weight: bold;
}
.paymentBox__detail__item dd {
  margin-left: auto;
}
.paymentBox__detail__item .input {
  padding-right: 0;
  font-size: 1.4rem;
  text-align: right;
  border: none;
  border-bottom: 1px solid #acbbc3;
}
.payment__detail__item--disabled {
  background-color: #E2E2E2;
}
.cancelPrice.auto {
  width: 52%;
  padding: 0;
  margin-bottom: 10px;
  pointer-events: none;
}
.cancelPrice.auto dt {
  width: 69.6386%;
  padding: 10px 17px 7px;
  border-right: 1px solid #ACBBC3;
  background-color: #E2E2E2;
}
.cancelPrice.auto dd {
  padding: 10px 17px 7px;
}
.paymentBox__cancelFee {
  width: 100%;
  padding: 20px 17px 20px;
  border-radius: 5px;
  background-color: #fff;
}
.paymentBox__cancelFee__title {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: bold;
}
.btn.paymentBox--submit {
  width: 176px;
  height: 37px;
}
.btn.toggleCancelFee {
  width: auto;
  padding: 2px 8px 2px 8px;
  font-size: 1.2rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  transition: 0s;
}
.btn.toggleCancelFee.is-active {
  color: #fff;
  border: 1px solid #50bdf0;
  background-color: #50bdf0;
}
.btn.toggleCancelFee svg {
  margin-left: 2px;
}
.btn.toggleCancelFee.is-active svg {
}
:hover > .svgArrowRound .circle,
.is-active .svgArrowRound .circle {
  fill: #fff;
}
:hover > .svgArrowRound .line,
.is-active .svgArrowRound .line {
  stroke: #6dbceb;
}



.paymentConfirmBox {
  width: 55vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.paymentConfirmBox__lead {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.58823529;
}
.paymentConfirmBox__lead .confirmPrice {
  padding: 4px 12px 2px;
  margin-right: 5px;
  font-size: 2rem;
  border: 1px solid #B5C2CA;
  border-radius: 3px;
  background-color: #fff;
  display: inline-block;
}



@media screen and (max-width: 768px) {
  #refund.paymentBox:visible {
    display: flex;
    flex-direction: column;
  }
  .paymentBox--wrap {
    width: 79vw;
    padding: 10px;
  }
  .paymentBox__detail .paymentBox__line {
    display: block;
  }
  .paymentBox__detail__item {
    width: 100%;
  }
  .paymentBox__detail .paymentBox__detail__item + .paymentBox__detail__item {
    margin-top: 10px;
  }
  .paymentBox__detail .radio.bar.aThird + label, .checkbox.bar.aThird + label {
    width: 100%;
  }
  .paymentConfirmBox {
    width: auto;
  }
  .paymentBox__detail__item--wrap {
    width: 100%;
  }
  .paymentBox__detail__item--wrap + .paymentBox__detail__item--wrap {
    margin-top: 10px;
  }
  .cancelPrice.auto {
    width: 100%;
    flex-direction: column;
  }
  .cancelPrice.auto dt {
    width: 100%;
    border-right: none;
  }
  .paymentBox__cancelFee {
    height: 200px;
    overflow-y: auto;

  }
}

/* ===========================================
利用規約
=========================================== */
.terms {
  margin: 23px 0 150px;
}
.terms .inner {
  width: 780px;
  margin: 0 auto;
  color: #333;
}
.terms .mainTit {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.636363636;
  text-align: center;
}
.terms .lead,
.terms .txt {
  font-size: 1.4rem;
  line-height: 1.75;
}
.terms .lead {
  margin-top: 34px;
}
.terms .termsList {
  margin-top: 25px;
}
.terms .termsList .item + .item {
  margin-top: 31px;
}
.terms .termsList .tit {
  margin-top: -3px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 2.571428571;
}
.terms .termsList .tit + .txt {
  margin-top: 4px;
}

@media screen and (max-width: 768px) {
  .terms {
    margin: 23px 0 50px;
  }
  .terms .inner {
    width: 100%;
    padding: 0 10px;
  }
  .terms .lead {
    margin-top: 15px;
  }
}


/* ===========================================
メール配信
=========================================== */
.disabledOverla {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, .7);
}
.disabledOverla .txt {
  font-size: 1.6rem;
}
.mail .btnRegist {
  margin: 0 0 0 auto;
}
.btnArea {
  display: flex;
  justify-content: center;
}

.status.round.mail.notYet {
  background-color: #ff81e7;
}
.status.round.mail.sending {
  background-color: #7cd123;
}
.status.round.mail.done {
  background-color: #bbb;
}
.mail .overBox {
  padding: 10px 20px;
  margin-top: 30px;
  color: #ff81e7;
  font-size: 1.4rem;
  text-align: center;
  border: 1px solid #ff81e7;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mail .btnArea .btn {
  width: 196px;
  height: 42px;
  margin-top: 0;
}
.mail .btnArea {
  margin-top: 27px;
}
.mail .btnArea .btnTest {
  margin-right: 19px;
}
.mail .btnArea .btnTest .btn {
  width: 94px;
  font-size: 1rem;
  border-radius: 2px;
}
.js-deleteSelectRecipient.is-disabled {
  pointer-events: none;
  color: #989999;
  border-color: #989999;
}
.mail .pagingArea {
  margin-top: 15px;
}


.clearBtnBox {
  padding-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: 3px;
  right: 0;
}
.clearBtnBox .deleteSelectRecipient {
  white-space: nowrap;
}
.clearBtnBox .clearRecipientList {
  white-space: nowrap;
}
.clearBtnBox .count {
  margin-left: 20px;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .mail .noFrameTableArea .noFrameTable .btnCell {
    text-align: right;
  }
  .mail .noFrameTableArea .noFrameTable th {
    padding-top: 30px;
  }
  .clearBtnBox {
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0;
  }
  .clearBtnBox a {
    /* margin-bottom: 5px; */
  }
  .clearBtnBox .deleteSelectRecipient {
    order: 2;
  }
  .clearBtnBox .clearRecipientList {
    order: 3;
  }
  .clearBtnBox .count {
    margin-top: 10px;
    order: 1;
  }
}


/* ===========================================
ページング
=========================================== */
.pagingArea {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.pagingArea .lead {
  margin-bottom: 10px;
  font-size: 1.2rem;
}
.paging {
  display: flex;
  justify-content: center;
}
.paging li + li {
  margin-left: 6px;
}
.paging a,
.paging span {
  min-width: 25px;
  height: 28px;
  color: #4ebaec;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.paging a,
.paging span:not(.between) {
  border: 1px solid #ccc;
}
.paging span.between {
  min-width: calc(1em + 4px);
}
.paging li:hover a,
.paging span.active {
  color: #fff;
  background-color: #4ebaec;
}
.paging .pagingBtn {
  min-width: 53px;
  position: relative;
}
.paging .pagingBtn svg {
  width: 5px;
  height: auto;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.paging .pagingBtn:hover svg path {
  stroke: #fff;
}
.paging .prev a {
  padding-left: 10px;
}
.paging .prev svg {
  left: 7px;
}
.paging .next a {
  padding-right: 10px;
}
.paging .next svg {
  right: 7px;
}
@media screen and (max-width: 768px) {
  .paging .pagingBtn {
    display: none;
  }
}









/* ===========================================
ユーティリティー
=========================================== */
.mt10 {
  margin-top: 10px !important;
}
@media screen and (max-width: 768px) {
}


/* ===========================================
フォームパーツ
=========================================== */
input.is-disabled {
  background-color: #f3f3f3;
  pointer-events: none;
}
.formArea {
  padding-bottom: 80px;
  color: #333;
  font-size: 1.4rem;
}
.formArea .content {
  width: 510px;
  margin: 30px auto 86px;
}
.formArea .pageTit {
  margin-bottom: 10px;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
}
.formArea .lead {
  margin-bottom: 30px;
  text-align: center;
}
.formArea .box + .box {
  margin-top: 30px;
}
.formArea .boxTit {
  margin-bottom: 5px;
  font-weight: bold;
}
.formArea .input {
  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 0 10px;
  font-size: 1.4rem;
  border-color: #acbbc3;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.formArea .btnBackForm {
  margin-top: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.formArea .btnBackForm a {
  width: 120px;
  min-height: 26px;
  color: #7cd123;
  font-size: 1.2rem;
  border: 1px solid #7cd123;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  transition: .3s;
}
.formArea .btnBackForm a:hover {
  color: #fff;
  background-color: #7cd123;
}
.formError + .input {
  border-color: #f542b8;
}
.form__row {
  display: flex;
  flex-wrap: wrap;
}
.form__box {
  display: flex;
  flex-direction: column;
}
.form__box + .form__box {
  margin-left: 6.7%;
}
.form__box__tit {
  margin-bottom: 3px;
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
}
.form__list {
  width: calc(100% + 7px);
  margin: -7px 0 0 -7px;
  display: flex;
  flex-wrap: wrap;
}
.form__list--quarter .radio + label,
.form__list--quarter .checkbox + label {
  width: calc(25% - 10px);
  min-width: 145px;
}
.form__list--quarter label:nth-of-type(4n) {
  margin-right: 0;
}
.form__list--half .radio + label,
.form__list--half .checkbox + label {
  width: calc(50% - 10px);
}
.form__list--half label:is(:visible):nth-of-type(2n) {
  margin-right: 0;
}
.form__list--oneThird .radio + label,
.form__list--oneThird .checkbox + label {
  width: calc((100% / 3) - 10px);
}
.form__list--oneThird label:nth-of-type(3n) {
  margin-right: 0;
}
.form__list .item {
  margin-right: 50px;
}
.inputDivider {
  color: #333;
  font-size: 1.2rem;
  margin: 0 9px;
  align-self: center;
}
.inputDivider--s {
  margin: 0 5px;
}
.btnSkipCompanion {
  display: flex;
  justify-content: center;
}
.btnSkipCompanion a {
  padding: 2px 5px;
  color: #50bdf0;
  font-weight: normal;
  display: inline-flex;
  justify-content: center;
  align-items: start;
  border-radius: 2px;
}
.form__row--dateRow .item {
  width: calc(108px + 1.5em);
  display: flex;
  align-items: flex-end;
}
.form__row--dateRow .item + .item {
  margin-left: 17px;
}
.form__row--dateRow .selectWrapSimple {
  width: calc(100% - 1.5em);
  margin-right: 0.5em;
  height: auto;
  min-height: 30px;
  border: 1px solid #acbbc3;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.form__row--dateRow .selectWrapSimple:after {
  width: 0;
  height: 0;
  top: 50%;
  right: 12px;
  border-top: 7px solid #333;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translateY(-50%) translateY(5px) translateX(8px);
}
.form__row--dateRow .selectWrapSimple select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  padding: 0 15px 0 8px;
  outline-style: none;
}
.form__row--dateRow ..dayList.line {
  width: calc(50% - 20px);
  display: flex;
  align-items: flex-end;
}

@media screen and (max-width: 768px) {
  .form__row {
    flex-direction: column;
  }
  .form__row--periodRow {
    flex-direction: row;
  }
  .form__box + .form__box {
    margin: 20px 0 0;
  }
  .form__box__tit {
    margin-bottom: 5px;
    color: #333;
    font-size: 1.4rem;
    font-weight: bold;
  }
  .form__list--quarter .radio + label,
  .form__list--quarter .checkbox + label,
  .form__list--half .radio + label,
  .form__list--half .checkbox + label,
  .form__list--oneThird .radio + label,
  .form__list--oneThird .checkbox + label {
    width: calc(50% - 10px);
    min-width: auto;
  }
  .form__list--quarter label:nth-of-type(2n),
  .form__list--half label:nth-of-type(2n),
  .form__list--oneThird label:nth-of-type(2n) {
    margin-right: 0;
  }
  .form__list .item {
    margin: 20px 0 0;
  }
  .inputDivider {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(90deg) translateX(5px);
    margin: 0;
    pointer-events: none;
  }
  .inputDivider.row {
    width: 30px;
    padding-right: 8px;
    transform: rotate(0) translateX(5px);
  }
  .form__box.age .dateList {
    width: 30%;
  }
  .form__box.age .dateList__item--y {
    width: 100%;
  }
  .form__box.age .inputDivider + .dateList {
    margin-top: 0;
  }
}


/*input[type="text"] 12px*/
.input.bar {
  max-width: 100%;
  border: 1px solid #acbbc3;
  border-radius: 3px;
  background-color: #fff;
}

.input.wm {
  width: 350px;
}
.input.ws {
  width: 159px;
}
.input.hs {
  min-height: 30px;
}
@media screen and (max-width: 768px) {
  .input.ws {
    width: auto;
  }
  .input.hs {
    min-height: 30px;
  }
  .form__row--periodRow .input {
    width: calc(50% - 1em);
  }
}

/*radio, checkbox*/
.radio.bar--m + label,
.checkbox.bar--m + label {
  min-height: 30px;
  padding: 3px 10px 5px 35px;
  font-size: 1.2rem;
}
.radio.bar--s + label,
.checkbox.bar--s + label {
  min-width: 120px;
  min-height: 30px;
  padding: 3px 10px 5px 35px;
  font-size: 1.2rem;
}
.radio.bar--m + label:before,
.checkbox.bar--m + label:before,
.radio.bar--s + label:before,
.checkbox.bar--s + label:before {
  width: 14px;
  height: 14px;
}
.radio.bar--m + label:after,
.checkbox.bar--m + label:after,
.radio.bar--s + label:after,
.checkbox.bar--s + label:after {
  width: 9px;
  height: 10px;
  left: 13px;
}
@media screen and (max-width: 768px) {
  .radio.bar--s + label,
  .checkbox.bar--s + label {
    min-width: calc(50% - 5px);
  }
}

/*セレクトボックス*/
.selectWrap.bar {
  width: 159px;
  height: auto;
  min-height: 30px;
  border: 1px solid #acbbc3;
  border-radius: 3px;
  background-color: #fff;
}
.selectWrap.bar--m {
  font-size: 1.2rem;
}
.selectWrap.bar:after {
  border-top: 10px solid #333;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid transparent;
  transform: translateY(-50%) translateY(5px);
}


.form__btn__submit {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  width: 100%;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  border: 1px solid #999;
  border-radius: 2px;
  background-color: #7cd123;
  transition: .3s;
}
.form__btn__submit:hover {
  color: #7cd123;
  background-color: #fff;
}
.form__dateList {
  display: flex;
}
.dateList {
  width: calc(50% - 20px);
  display: flex;
  align-items: flex-end;
}
.dateList__item {
  display: flex;
  align-items: flex-end;
}
.dateList__item--y {
  width: calc(108px + 1.5em);
}
.dateList__item--m,
.dateList__item--d {
  width: calc(80px + 1.5em);
}
.dateList__item .selectWrap {
  width: calc(100% - 1.5em);
  margin-right: .5em;
}
.dateList__item + .dateList__item {
  margin-left: 17px;
}
.dateList__item .selectWrap:after {
  border-top: 7px solid #333;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translateY(-50%) translateY(5px) translateX(8px);
}

@media screen and (max-width: 768px) {
  .inputDivider + .dateList {
    margin-top: 10px;
  }
  .dateList {
    width: 100%;
  }
  .dateList__item .select {
    padding-right: 20px;
  }
  .dateList__item--y {
    width: calc(25% + 1.5em);
    flex-shrink: 0;
  }
  .dateList__item--m,
  .dateList__item--d {
    width: calc(30% + 1.5em);
  }
}


/*ローディングアイコン*/
.submitOverlay {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, .9);
}
.submitOverlay .loader {
  font-size: 20px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  -webkit-animation: load5 1.1s infinite ease;
          animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
          transform: translateZ(0);
}
.overlayMessage {
  margin-top: 70px;
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
}
.submitOverlay.calendar {
  position: absolute;
  background-color: rgba(255, 255, 255, .6);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0 -2.6em 0 0 #50bdf0, 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .5), -1.8em -1.8em 0 0 rgba(80, 189, 240, .7);
  }
  12.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .7), 1.8em -1.8em 0 0 #50bdf0, 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .5);
  }
  25% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .5), 1.8em -1.8em 0 0 rgba(80, 189, 240, .7), 2.5em 0 0 0 #50bdf0, 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  37.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .5), 2.5em 0 0 0 rgba(80, 189, 240, .7), 1.75em 1.75em 0 0 #50bdf0, 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  50% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .5), 1.75em 1.75em 0 0 rgba(80, 189, 240, .7), 0 2.5em 0 0 #50bdf0, -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  62.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .5), 0 2.5em 0 0 rgba(80, 189, 240, .7), -1.8em 1.8em 0 0 #50bdf0, -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  75% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .5), -1.8em 1.8em 0 0 rgba(80, 189, 240, .7), -2.6em 0 0 0 #50bdf0, -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  87.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .5), -2.6em 0 0 0 rgba(80, 189, 240, .7), -1.8em -1.8em 0 0 #50bdf0;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0 -2.6em 0 0 #50bdf0, 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .5), -1.8em -1.8em 0 0 rgba(80, 189, 240, .7);
  }
  12.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .7), 1.8em -1.8em 0 0 #50bdf0, 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .5);
  }
  25% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .5), 1.8em -1.8em 0 0 rgba(80, 189, 240, .7), 2.5em 0 0 0 #50bdf0, 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  37.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .5), 2.5em 0 0 0 rgba(80, 189, 240, .7), 1.75em 1.75em 0 0 #50bdf0, 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  50% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .5), 1.75em 1.75em 0 0 rgba(80, 189, 240, .7), 0 2.5em 0 0 #50bdf0, -1.8em 1.8em 0 0 rgba(80, 189, 240, .2), -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  62.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .5), 0 2.5em 0 0 rgba(80, 189, 240, .7), -1.8em 1.8em 0 0 #50bdf0, -2.6em 0 0 0 rgba(80, 189, 240, .2), -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  75% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .5), -1.8em 1.8em 0 0 rgba(80, 189, 240, .7), -2.6em 0 0 0 #50bdf0, -1.8em -1.8em 0 0 rgba(80, 189, 240, .2);
  }
  87.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, .2), 1.8em -1.8em 0 0 rgba(80, 189, 240, .2), 2.5em 0 0 0 rgba(80, 189, 240, .2), 1.75em 1.75em 0 0 rgba(80, 189, 240, .2), 0 2.5em 0 0 rgba(80, 189, 240, .2), -1.8em 1.8em 0 0 rgba(80, 189, 240, .5), -2.6em 0 0 0 rgba(80, 189, 240, .7), -1.8em -1.8em 0 0 #50bdf0;
  }
}

/*顧客情報ローディングアイコン*/
.ajaxLoader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*** ダミーセレクトボックス ***/
/* .selectWrap #dummmySelectBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  pointer-events: none;
} */


/*―――――――――――――――――――――――――――――――――――――――――――――
/* キャッシュバックキャンペーン
――――――――――――――――――――――――――――――――――――――――――――――*/
.introduce.reservationForm .titArea {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.introduce.reservationForm .content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.introduce.reservationForm .pageTit {
  margin-bottom: 10px;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
}
.introduce.reservationForm .lead {
  text-align: center;
}
.introduce.reservationForm textarea {
  width: 100%;
  height: 184px;
  padding: 13px 10px;
  border-color: #acbbc3;
  border-radius: 3px;
  vertical-align: bottom;
}
.introduce.reservationForm .boxTit span:not(.typeStr):not(.foreignItemName) {
  min-width: 42px;
  height: 14px;
  padding: 1px 5px 0;
  margin-right: 10px;
  color: #fff;
  font-size: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #ff81e7;
  border-radius: 7px;
  transform: translateY(-1px);
}


/*―――――――――――――――――――――――――――――――――――――――――――――
/* 設定　予約フォーム
――――――――――――――――――――――――――――――――――――――――――――――*/
.calendarBox {
  padding: 0;
  position: relative;
  background-color: transparent;
}
.confirmBox {
  margin-bottom: 30px;
}
.calendarBox .tit {
  display: none;
}
.calendarBox .lead {
  display: none;
}
.boxScheduledDate__lead {
  margin: 0 0 15px 0;
  font-size: 14px;
}
.calendarBox .titItem {
  margin-bottom: 15px;
  font-size: 1.4rem;
  text-align: center;
}
.calenderListWrap {
  overflow: hidden;
  position: relative;
}
.calenderListWrap .btnArrow {
  width: auto;
  height: auto;
  transform: none;
  position: absolute;
  top: 22px;
  cursor: pointer;
  transition: .3s;
}
.calenderListWrap .btnArrow:before {
  display: block;
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  width: 28px;
  height: 28px;
  margin: auto;
  background: url(../img/form/ico_arrow-calender-left.svg) no-repeat top left / 100%;
  content: '';
  border: none;
  transform: none;
}
.calenderListWrap .btnArrow.prev {
  left: calc(50% - 53px);
}
.calenderListWrap .btnArrow.next {
  right: calc(50% - 120px);
}
.calenderListWrap .btnArrow.prev:before,
.calenderListWrap .btnArrow.next:before {
  border: none;
  transform: none;
}
.calenderListWrap .btnArrow.next:before {
  background-image: url(../img/form/ico_arrow-calender-right.svg);
}
.calenderListWrap .btnArrow:hover {
  opacity: .7;
}
.calenderListWrap .btnArrow.is-disabled {
  pointer-events: none;
  opacity: 0.3;
}
.calenderListWrap .btnArrow.is-disabled:before {
  border-right-color: #c0c0c0;
}
.calenderList {
  width: 1300%;
  position: relative;
  display: flex;
  align-items: flex-start;
}
.calenderList .item {
  width: 100%;
  padding: 0;
}
.calenderList .item .listContents {
  border: solid 2px #D5D5D5;
  border-radius: 6px;
  overflow: hidden;
}
.calenderList .item .table {
  width: 100%;
  border-style: hidden;
}
.calenderList .item .table th,
.calenderList .item .table td {
  border-right: 1px solid #CBCBCB;
  border-bottom: 1px solid #CBCBCB;
}
.calenderList .item .table th {
  height: 34px;
  padding: 0;
  background-color: #f3f3f3;
}
.calenderList .item .table th .sat {
  color: #6FA3D8;
}
.calenderList .item .table th .sun {
  color: #D86F6F;
}
.calenderList .item .table td {
  height: 96px;
  padding: 0;
  background-color: #fff;
  cursor: pointer;
  transition: .3s;
}
.calenderList .item .table .day {
  font-size: 1.6rem;
}
.calenderList .item .table td:nth-child(1) .day {
  color: #D86F6F;
}
.calenderList .item .table td:nth-child(7) .day {
  color: #6FA3D8;
}
.calenderList .item .table td.holiday {

}
.calenderList .item .table td.blankCell {
  background-color: transparent;
}
.calenderList .item .table td.blankCell {
  pointer-events: none;
}
.calenderList .item .table .tdInner {
  height: 100%;
  position: relative;
}
.calenderList .item .table input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  opacity: 0;
}
.calenderList .item .table label {
  width: 100%;
  height: 100%;
  padding: 16px 10px;
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: .3s;
}
.calenderList .item .table label:before {
  content: "";
  margin-top: 8px;
  position: absolute;
  top: calc(50% + 12px);
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .3s;
}
.calenderList .item .table td:has(.calendarCoursePrice:not(:empty)) label:before {
  top: calc(50% + 5px);
}
.calenderList .item .table td:has(.calendarCoursePrice:not(:empty)) label:after {
  top: calc(50% + 5px);
}
.calenderList.tourEventCalendarList.multi .item .table td:has(.calendarCoursePrice:not(:empty)) label:before {
  top: calc(50% + -4px);
}
.calenderList.tourEventCalendarList.multi .item .table td:has(.calendarCoursePrice:not(:empty)) label:after {
  top: calc(50% + -4px);
}

/*** 昨日以前の日 ***/
.calenderList .item .table .past {
  pointer-events: none;
}
.calenderList .item .table .past .day {
  color: #CBCBCB !important;
}
.calenderList .item .table .past label:before {
  width: 20px;
  height: 2px;
  margin-top: 3px;
  background-color: #999;
}

/*** 予約可能 ***/
.calenderList .item .table .ok {
  background-color: #FFFFE0;
}
.calenderList .item .table .ok label:before {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 2px solid #50A0F0;
  border-radius: 50%;
  background-color: #fff;
  transition: .3s;
}
.calenderList .item .table .ok input:checked + label:before,
.calenderList .item .table .ok input.is-active + label:before {
  background-color: #7CD122;
  border-color: #fff;
}
.calenderList .item .table .ok:hover {
  border: double 1px #7CD122;
}
.calenderList .item .table .ok:hover:has(input:checked) {
  border: solid 1px #CBCBCB;
}

/*** 予約リクエストアイコン ***/
.calenderList .item .table .request {
  background-color: #FFFFE0;
}
.calenderList .item .table .request:hover {
  border: double 1px #7CD122;
}
.calenderList .item .table .request:hover:has(input:checked) {
  border: solid 1px #CBCBCB;
}
.calenderList .item .table .request label:before {
  width: 23px;
  height: 23px;
  border: solid 2px #59D575;
  background-color: #fff;
  border-radius: 2px;
  z-index: 1;
  box-sizing: border-box;
}
.calenderList .item .table .request input:checked + label::before {
  border-color: #fff;
  background-color: #7CD122;
}
.calenderList .item .table .request label:after {
  display: none;
}
.calenderList .item .table .request label:before {
  margin-top: 3px;
}
.calenderList .item .table .request label:after {
  display: none;
}

/*** 予約不可アイコン ***/
.calenderList .item .table .ng {
  pointer-events: none;
}
.calenderList .item .table .ng label:before {
  width: 34px;
  height: 2px;
  margin-top: 3px;
  background-color: #CBCBCB;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.calenderList .item .table .ng label:after {
  content: "";
  width: 34px;
  height: 2px;
  margin-top: 3px;
  background-color: #CBCBCB;
  position: absolute;
  top: calc(50% + 12px);
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.calenderList .item .table .ng .day {
  color: #CBCBCB !important;
}
.calenderList .item .table .ng .calendarCoursePrice {
  color: #CBCBCB !important;
}

/*** tel ***/
.calenderList .item .table .tel {
  background-color: #FFFFE0;
}
.calenderList .item .table .tel label:before {
  width: 18px;
  height: 24px;
  margin-top: 2px;
  background: url(../img/form/ico_tel-calender.svg) no-repeat center / cover;
  transform: translate(-50%, -50%);
}

/*** 今日 ***/
.calenderList .item .table td.today .day {
  background-color: #F83D85;
  border-radius: 3px;
  margin: -4px 5px 0;
  padding: 3px 3px;
  color: #fff;
}

/*** 祝日 ***/
.calenderList .item .table td.holiday .day {
  color: #D86F6F;
}

.calenderList .item .table input:checked + label {
  color: #fff !important;
  background-color: #7CD122 !important;
}
.calenderList .item .table input:checked + label .day {
  color: #fff !important;
}
.calenderList .addDate {
  cursor: default !important;
  pointer-events: none !important;
}
.calenderList .addDate input + label {
  color: #fff !important;
  background-color: #50bdf0 !important;
}
.calenderList .addDate input + label:before {
  border-color: #fff !important;
}
.calenderList .addDate.request input + label:before {
  width: 0 !important;
  height: 0 !important;
  border-bottom: 22px solid #50bdf0 !important;
  border-left: 14px solid transparent !important;
  border-right: 14px solid transparent !important;
  z-index: 1 !important;
}
.calenderList .addDate.request input + label:after {
  content: "" !important;
  margin-top: 9px !important;
  border-bottom: 17px solid #fff !important;
  border-left: 11px solid transparent !important;
  border-right: 11px solid transparent !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
}
.calenderList .item .table .is-active label {
  color: #fff;
  background-color: #50bdf0;
}
.reservationForm .calenderList .formError {
  display: none !important;
}
.reservationForm .calenderList .formError + input,
.reservationForm .calenderList .formError ~ label {
  background-color: transparent;
  border-color: transparent;
}
.calenderList .iconDescription {
  margin-top: 18px;
  font-size: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 40px;
  background-color: #fff;
  padding: 15px 30px;
  border-radius: 12px;
}
.calenderList .iconDescription .ico {
  position: relative;
  padding: 0 0 0 24px;
}
.calenderList .iconDescription .ico:before,
.calenderList .iconDescription .ico:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.calenderList .iconDescription .icoOk:before {
  width: 18px;
  height: 18px;
  border: 1px solid #50bdf0;
  border-radius: 50%;
  display: block;
}
.calenderList .iconDescription .icoRequest:before {
  width: 18px;
  height: 18px;
  border: solid 1px #59D575;
}
.calenderList .iconDescription .icoNg:before {
  width: 22px;
  height: 1px;
  background-color: #cbcbcb;
  transform: translateY(-50%) rotate(-45deg);
}
.calenderList .iconDescription .icoNg:after {
  content: "";
  width: 22px;
  height: 1px;
  margin-top: 0;
  background-color: #cbcbcb;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
}
.calenderList .iconDescription .icoTel:before {
  width: 15px;
  height: 19px;
  background: url(../img/form/ico_tel-calender.svg) no-repeat center / 100%;
}
.calenderList .iconDescription .icoTel a {
  text-decoration: underline;
  color: #50A0F0;
}
.calenderList .iconDescription .icoTel a:hover {
  text-decoration: none;
}
.calenderList .iconDescription .icoNgBar:before {
  content: "";
  width: 12px;
  height: 2px;
  background-color: #999;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/*** .calendarCoursePrice ***/
.calendarCoursePrice {
  width: 100%;
  color: #333;
  font-size: 11px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 7px;
  z-index: 10;
  pointer-events: none;
  transition: .3s;
}
.calenderList .item .table input:checked + label + .calendarCoursePrice {
  color: #fff;
}

.selectWrap #dummmySelectBox {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: #fff;
  width: 50px;
  border-radius: 5px;
}
.is-error .selectWrap #dummmySelectBox {
  background-color: #ffdefd;
}

.selectWrapSimple #dummmySelectBox {
  display: block;
  position: absolute;
  top: 3px;
  left: 1px;
  z-index: 0;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  pointer-events: none;
  background-color: #fff;
  border-radius: 0px;
  border: none;
  appearance: none;
  padding: 0px 18px 4px 8px;
  color: #333;
  font-size: 1.2rem;
}

@media screen and (max-width: 767px) {
  .calendarBox {
    padding: 0;
    position: relative;
    background-color: transparent;
  }
  .confirmBox {
    margin-bottom: 30px;
  }
  .calendarBox .tit {
    display: none;
  }
  .calendarBox .lead {
    display: none;
  }
  .boxScheduledDate__lead {
    margin: 0 0 15px 0;
    font-size: 14px;
  }
  .calendarBox .titItem {
    margin-bottom: 15px;
    font-size: 1.4rem;
    text-align: center;
  }
  .calenderListWrap {
    overflow: hidden;
    position: relative;
  }
  .calenderListWrap .btnArrow {
    width: auto;
    height: auto;
    transform: none;
    position: absolute;
    top: 22px;
    cursor: pointer;
    transition: .3s;
  }
  .calenderListWrap .btnArrow:before {
    top: 0;
    right: 20px;
    bottom: 0;
    width: 28px;
    height: 28px;
  }
  .calenderListWrap .btnArrow.prev {
    left: calc(50% - 53px);
  }
  .calenderListWrap .btnArrow.next {
    right: calc(50% - 120px);
  }
  .calenderListWrap .btnArrow.prev:before,
  .calenderListWrap .btnArrow.next:before {
    border: none;
    transform: none;
  }
  .calenderListWrap .btnArrow.next:before {

  }
  .calenderListWrap .btnArrow:hover {
    opacity: .7;
  }
  .calenderListWrap .btnArrow.is-disabled {
    pointer-events: none;
    opacity: 0.3;
  }
  .calenderListWrap .btnArrow.is-disabled:before {
    border-right-color: #c0c0c0;
  }
  .calenderList {
    width: 1300%;
    position: relative;
    display: flex;
    align-items: flex-start;
  }
  .calenderList .item {
    width: 100%;
    padding: 0;
  }
  .calenderList .item .listContents {
    border-width: 1px;
    border-radius: 6px;
    overflow: hidden;
  }
  .calenderList .item .table {
    width: 100%;
    border-style: hidden;
  }
  .calenderList .item .table th,
  .calenderList .item .table td {
    border-right: 1px solid #CBCBCB;
    border-bottom: 1px solid #CBCBCB;
  }
  .calenderList .item .table th {
    height: 26px;
    padding: 0;
    background-color: #f3f3f3;
    font-size: 10px;
  }
  .calenderList .item .table th .inner {
    min-height: inherit;
  }
  .calenderList .item .table td {
    height: 62px;
    padding: 0;
    background-color: #fff;
    cursor: pointer;
    transition: .3s;
  }
  .calenderList .item .table .day {
    font-size: 1.3rem;
  }
  .calenderList .item .table td:nth-child(1) .day {

  }
  .calenderList .item .table td:nth-child(7) .day {

  }
  .calenderList .item .table td.holiday {

  }
  .calenderList .item .table td.blankCell {

  }
  .calenderList .item .table td.blankCell {

  }
  .calenderList .item .table .tdInner {
    height: 100%;
    position: relative;
  }
  .calenderList .item .table input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
    opacity: 0;
  }
  .calenderList .item .table label {
    padding: 10px 6px;
  }
  .calenderList .item .table label:before {
    content: "";
    margin-top: 8px;
    position: absolute;
    top: calc(50% + 8px);
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
    box-sizing: border-box;
  }
  .calenderList .item .table td:has(.calendarCoursePrice:not(:empty)) {
    height: 78px;
  }
  .calenderList .item .table td:has(.calendarCoursePrice:not(:empty)) label:before {
    top: calc(50% - 1px);
  }
  .calenderList .item .table td:has(.calendarCoursePrice:not(:empty)) label:after {
    top: calc(50% - 1px);
  }


  /*** 昨日以前の日 ***/
  .calenderList .item .table .past {
    pointer-events: none;
  }
  .calenderList .item .table .past .day {

  }
  .calenderList .item .table .past label:before {
    display: none;
    width: 20px;
    height: 2px;
    margin-top: 3px;
    background-color: #999;
  }

  /*** 予約可能 ***/
  .calenderList .item .table .ok {

  }
  .calenderList .item .table .ok label:before {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border-radius: 50%;
    transition: .3s;
  }
  .calenderList .item .table .ok input:checked + label:before,
  .calenderList .item .table .ok input.is-active + label:before {

  }
  .calenderList .item .table .ok:hover {

  }
  .calenderList .item .table .ok:hover:has(input:checked) {

  }

  /*** 予約リクエストアイコン ***/
  .calenderList .item .table .request {

  }
  .calenderList .item .table .request label:before {
    width: 14px;
    height: 14px;
  }
  .calenderList .item .table .request input:checked + label::before {

  }
  .calenderList .item .table .request label:after {
    display: none;
  }
  .calenderList .item .table .request label:before {
    margin-top: 3px;
  }
  .calenderList .item .table .request label:after {
    display: none;
  }

  /*** 予約不可アイコン ***/
  .calenderList .item .table .ng {
    pointer-events: none;
  }
  .calenderList .item .table .ng label:before {
    width: 18px;
    height: 2px;
    margin-top: 3px;
    background-color: #CBCBCB;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .calenderList .item .table .ng label:after {
    content: "";
    width: 18px;
    height: 2px;
    margin-top: 3px;
    background-color: #CBCBCB;
    position: absolute;
    top: calc(50% + 8px);
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .calenderList .item .table .ng .day {

  }
  .calenderList .item .table .ng .calendarCoursePrice {

  }

  /*** tel ***/
  .calenderList .item .table .tel {

  }
  .calenderList .item .table .tel label:before {
    width: 11px;
    height: 14px;
    margin-top: 2px;
    transform: translate(-50%, -50%);
  }

  /*** 今日 ***/
  .calenderList .item .table td.today .day {
    border-radius: 3px;
    margin: -4px 5px 0;
    padding: 3px 3px;
  }

  /*** 祝日 ***/
  .calenderList .item .table td.holiday .day {

  }

  .calenderList .item .table input:checked + label {

  }
  .calenderList .item .table input:checked + label .day {

  }
  .calenderList .addDate {

  }
  .calenderList .addDate input + label {

  }
  .calenderList .addDate input + label:before {

  }
  .calenderList .addDate.request input + label:before {

  }
  .calenderList .addDate.request input + label:after {

  }
  .calenderList .item .table .is-active label {

  }
  .reservationForm .calenderList .formError {

  }
  .reservationForm .calenderList .formError + input,
  .reservationForm .calenderList .formError ~ label {

  }

  /*** アイコン説明 ***/
  .calenderList .iconDescription {
    margin-top: 8px;
    font-size: 1.0rem;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 13px;
    padding: 10px 15px;
    border-radius: 12px;
  }
  .calenderList .iconDescription .ico {
    position: relative;
    padding: 0 0 0 18px;
  }
  .calenderList .iconDescription .ico:before,
  .calenderList .iconDescription .ico:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .calenderList .iconDescription .icoOk:before {
    width: 11px;
    height: 11px;
    border: 1px solid #50bdf0;
    border-radius: 50%;
    display: block;
  }
  .calenderList .iconDescription .icoRequest:before {
    width: 11px;
    height: 11px;
    border: solid 1px #59D575;
  }
  .calenderList .iconDescription .icoNg:before {
    width: 14px;
    height: 1px;
    background-color: #f05094;
    transform: translateY(-50%) rotate(-45deg);
  }
  .calenderList .iconDescription .icoNg:after {
    content: "";
    width: 14px;
    height: 1px;
    margin-top: 0;
    background-color: #f05094;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
  }
  .calenderList .iconDescription .icoTel:before {
    width: 9px;
    height: 11px;
  }
  .calenderList .iconDescription .icoTel a {
    text-decoration: underline;
    color: #50A0F0;
  }
  .calenderList .iconDescription .icoTel a:hover {
    text-decoration: none;
  }
  .calenderList .iconDescription .icoNgBar:before {
    content: "";
    width: 12px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

}


/*―――――――――――――――――――――――――――――――――――――――――――――
/* デジタル同意書
――――――――――――――――――――――――――――――――――――――――――――――*/
/* 設定画面 */
.subItemInner {
  padding: 10px 0 10px 30px;
  margin-left: 34px;
  position: relative;
}
.subItemInner.last {
  margin-bottom: 15px;
}
.subItemInner::before {
  content: '';
  width: 2px;
  height: 110%;
  position: absolute;
  top: -1px;
  left: 0;
  background-color: #50BDF0;
}
/* .subItemLeadWrap {
  margin-top: 5px;
} */

.agreement .inner {
  max-width: 600px;
}
.agreement .mainTit {
  color: #18476F;
}
.agreement .lead {
  margin-top: 15px;
}
.agreementBox {
  padding: 20px 15px;
  background-color: #E0F0FD;
}
.confirm__checkbox {
  color: #18476F;
  font-weight: bold;
}
.confirm__checkbox__label {
  padding-left: 22px !important;
}
.agreement__lead {
  margin-bottom: 5px;
  color: #18476F;
  font-size: 14px;
  font-weight: bold;
}
.agreementList__item {
  line-height: 1.75;
}
.agreementList__item__lead {
  font-size: 14px;
}
.checkbox + .agreementList__label {
  margin-top: 0 !important;
  margin-right: 0 !important;
  padding-left: 30px;
}
.checkbox + .agreementList__label:before,
.checkbox + .agreementList__label:after {
  top: 50% !important;
  transform: translateY(-50%);
}
.checkbox + .agreementList__label:before {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background-color: #fff;
}
.checkbox + .agreementList__label:after {
  width: 15px;
  height: 15px;
}
.radio + .agreementList__label {
  padding-left: 30px;
}
.radio + .agreementList__label:before {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  top: 0;
}
.radio + .agreementList__label:after {
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
}
.agreementList__item + .agreementList__item {
  margin-top: 20px;
}

.agreement .reservationForm {
  color: #333;
  background-color: transparent;
}
.documentItem + .documentItem {
  margin-top: 30px;
}
.documentLinkBox--wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.documentLinkBox {
  max-width: 800px;
  min-width: 300px;
}
.documentLinkBox .c-linkBox__link {
  min-height: 41px;
  padding: 7px 11px 9px;
  color: #333333;
  font-size: 14px;
  border: 1px solid #D5D5D5;
  border-radius: 3px;
  align-self: center;
}
.documentLinkBox .c-linkBox + .c-linkBox {
  margin-top: 10px;
}
.agreement .reservationForm .btnSubmit {
  position: static;
}
.agreement .reservationForm .btnSubmit .btn {
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  width: 100%;
  max-width: 520px;
  margin: 41px auto 0;
  height: 60px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  border: 1px solid #999;
  border-radius: 2px;
  background-color: #7cd123;
  transition: .3s;
}
.agreement .reservationForm .btnSubmit .btn:hover {
  color: #7cd123;
}
.agreement .reservationForm .linkTxt {
  color: #0096dc;
}
.hasAlert {
  position: relative;
}
.hasAlert:before {
  content: '';
  width: 19px;
  height: 17px;
  position: absolute;
  top: 5px;
  left: -25px;
  background: url(/common/img/common/ico_attention.svg) no-repeat center / cover;
}
.table .hasAlert {
  padding-left: 10px;
}
.table .hasAlert:before {
  top: -1px;
  left: -10px;
}

@media screen and (max-width: 767px) {
  .agreement .inner {
    padding: 0 30px;
  }
  .hasAlert:before {
    top: 4px;
    left: -25px;
  }
}

.agreementList--sub {
  padding: 33px 30px 34px;
  margin-top: 23px;
  border: 1px solid #E3E3E3;
  border-radius: 10px;
  background-color: #fff;
}
.agreementList--sub__lead {
  min-height: 30px;
  padding: 5px 14px;
  margin-bottom: 25px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  border-radius: 5px;
  background-color: #5C5C5C;
  position: relative;
  display: flex;
  align-items: center;
}
.agreementList--sub__lead .iconArrow {
  width: 12px;
  height: 5px;
  margin-right: 6px;
  position: relative;
}
.agreementList--sub__lead .iconArrow:before,
.agreementList--sub__lead .iconArrow:after {
  content: '';
  position: absolute;
}
.agreementList--sub__lead .iconArrow:before {
  width: 100%;
  height: 2px;
  background-color: #fff;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.agreementList--sub__lead .iconArrow:after {
  width: 6px;
  height: 6px;
  top: 50%;
  right: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
.agreementList--sub .agreementList__item + .agreementList__item {
  margin-top: 28px;
}

@media screen and (max-width: 767px) {
  .agreementList--sub {
    padding: 20px 15px;
  }
  .agreementList--sub__lead {
    padding: 5px 10px;
    margin-bottom: 20px;
  }
  .agreementList--sub__lead .iconArrow {
    width: 10px;
    height: 4px;
  }
  .agreementList--sub__lead .iconArrow:after {
    width: 6px;
    height: 6px;
    right: -2px;
  }
}


/*―――――――――――――――――――――――――――――――――――――――――――――
/* 予約台帳 モーダル乗り合い
――――――――――――――――――――――――――――――――――――――――――――――*/
.reservationForm.changeJointPartnership .content {
  width: 100%;
  max-width: 510px;
  margin: 0 auto;
}
.reservationForm.changeJointPartnership .flexWrap {
  display: flex;
  align-items: flex-end;
}
.reservationForm.changeJointPartnership .unitPosFix .item {
  display: flex;
  align-items: flex-end;
}
.reservationForm.changeJointPartnership .unitPosFix .item .input,
.reservationForm.changeJointPartnership .unitPosFix .item .selectWrap {
  margin-right: 5px;
}
.reservationForm.changeJointPartnership .boxTit  {
  font-size: 1.4rem;
  font-weight: bold;
}
.reservationForm.changeJointPartnership .item.ss {
  width: calc(80px + 2em);
}
.reservationForm.changeJointPartnership .item.ss .selectWrap{
  width: calc(100% - 2em);
  display: inline-flex;
}
.reservationForm.changeJointPartnership .item.m {
  width: 245px;
}
.reservationForm.changeJointPartnership input {
  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 0 10px;
  font-size: 1.4rem;
  border-color: #acbbc3;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.reservationForm.changeJointPartnership textarea {
  width: 100%;
  height: 184px;
  padding: 13px 10px;
  border-color: #acbbc3;
  border-radius: 3px;
  vertical-align: bottom;
}
/* ===========================================
予約
=========================================== */

.rankBox .radio,
.rankBox .radio + label,
.organizationSpecialty .checkbox,
.organizationSpecialty .checkbox + label {
  display: none;
}
.rankBox .radio.is-active,
.rankBox .radio.is-active + label,
.organizationSpecialty .checkbox.is-active,
.organizationSpecialty .checkbox.is-active + label {
  display: inline-flex;
}
.reservationForm .rankBox .radio.is-active,
.reservationForm .rankBox .radio.is-active + label {
  display: flex;
}
.rankBox .cCardOther + label {
  display: inline-block;
}
.organizationSpecialty {
  display: none;
}
.organizationSpecialty.is-active {
  display: block;
}
.checkinTable .organizationSpecialty.is-active {
  display: block;
}

/********************************************************
乗合
********************************************************/
article.boat .noFrameTableArea .noFrameTable td {
  background-color: #fff;
}
.coloredBg td{
  background-color: #f3f3f3 !important;
}
.rowController {
  display: flex;
  align-items: center;
}
.rowController span {
  margin-left: 5px;
  flex-shrink: 0;
}
.js-rowController {
  cursor: pointer;
  transition: .3s;
}
.js-rowController:hover {
  background-color: #4FBCED;
}
.js-rowController:hover:before,
.js-rowController:hover:after {
  background-color: #fff;
}
.firstRow .removeRow,
.middleRow .addRow,
.hasOtherRows .addRow {
  visibility: hidden;
}
.boatTable tr:not(.dateFirstRow) .dateColumn a {
  display: none;
}
.blankBoatRow .boatIdWrap,
.blankBoatRow .typeIdWrap,
.blankBoatRow .calendarDisplayName,
.blankBoatRow .c-icon--remove,
.blankBoatRow .calendarSlotToggle {
  visibility: hidden;
}
.form--boat .is-disabled {
  color: #ccc;
}
.form--boat .is-disabled input,
.form--boat .is-disabled label {
  border-color: #c5c5c5;
}
.form--boat .is-disabled label:before,
.form--boat .is-disabled label:after {
  color: #ccc;
  border-color: #c5c5c5;
}

.boatDefaultSetting .row {
  margin-bottom: 0;
  padding-right: 3em;
  position: relative;
}
.boatDefaultSetting .row + .row {
  padding-top: 10px;
  border-top: 1px solid #d2d2d2;
}
.boatDefaultSetting .item {
  margin-right: 10px;
  margin-bottom: 7px;
}
.boatDefaultSetting .item:last-of-type {
  margin-right: 0;
}
.boatDefaultSetting .selectWrapSimple {
  margin: 0;
}
.boatDefaultSetting .selectWrapSimple .select {
  vertical-align: bottom;
}
.boatDefaultSetting .js-deleteRow {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}


/********************************************************

予約台帳カスタムタブの印刷用CSS

********************************************************/
@media print {
  .print-style .article .table td {
    page-break-before: always;
  }
}
@page {
  margin: 5mm;
}
body.print-style {
  width: 100%; /* ページの幅を少し狭める */
  margin: 0 auto; /* 左右の余白を自動調整 */
  max-width: 100%; /* 最大幅を設定 */
  page-break-after: always;
  -webkit-print-color-adjust: exact;
  background-color: #fff;
  padding: 0;
  overflow: visible;
}
.print-style .printBtn {
  display: none !important;
}
.print-style .logoOnlyPrint {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
}
.print-style .developerFixedMessage {
  display: none !important;
}

.print-style .header {
  display: none;
}

.print-style .headerLinkBox {
  display: none;
}
.print-style .wrap {
  width: 100%;
  overflow: visible;
}

.print-style .article {
  width: 100%;
  padding: 0;
}

.print-style .rosterList {
  display: none;
}

.print-style .editSelectedRecordsBox {
  display: none;
}

.print-style .footer {
  display: none;
}

.print-style .toggleShowCancel {
  display: none;
}

.print-style .btnPageTop {
  display: none;
}

.print-style .headTitleBox .nav {
  display: none;
}

.print-style .headTitleBox a.selectDate {
  background: none;
  border: none;
  font-size: 1.4rem;
}

.print-style .reservationDetails {
  margin-bottom: 0;
}

.print-style .reservationDetailsButton {
  display: none;
}

.print-style .editCell {
  display: none;
}

.print-style .memoArea .ico {
  display: none;
}

.print-style .memoArea.active {
  padding: 0;
  font-size: 1.4rem;
}

.print-style .reservationDetails .listItem {
  margin-left: 5px;
}
.print-style .reservationList.reservationDetails .course dt {
  padding: 6px 5px;
}
.print-style .reservationDetails.reservationList .course dt.itemRow {
  border: solid 1px #000;
  color: #000;
  background-color: transparent;
}
.print-style .reservationDetails.reservationList .itemName {
  font-size: 1.4rem;
}
.print-style .reservationList .itemReservationNum {
  font-size: 1.3rem;
}
.print-style .reservationDetailsWrap {
  padding: 10px 8px
}
.print-style .reservationList.reservationDetails .course dd {
  height: auto;
  min-height: 21px;
  padding: 8px 8px 7px;
  visibility: visible;
  opacity: 1;
}

/*―――――――――――――――――――――――――――――――――――――――――――――
/* table
――――――――――――――――――――――――――――――――――――――――――――――*/
.print-style .scrollableTableWrap {
  overflow: visible !important;
}
.print-style .table {
  width: 100% !important;
  overflow: visible;
  min-width: 0;
  max-width: 100% !important;
    height: auto;
}

.print-style .table a {
  color: #000;
  text-decoration: none;
}

.print-style .table th,
.print-style .table td {
  font-size: 1.5rem;
  padding: 8px 5px;
  page-break-inside: avoid;
  height: 30px;
}
.print-style .table th .inner, .print-style .table td .inner {
  min-height: 24px;
}
.print-style .article .table th,
.print-style .article .table td {
  width: auto !important;
}
.print-style .table .remarksCell {
  width: auto !important;
  max-width: 260px !important;
}
.print-style .table .cCardCell {
  width: 130px !important;
}

.print-style .linkingCell .modalIcon::after {
  display: none;
}

.print-style .linkingCell .linking {
  padding-left: 0;
}

.print-style .selectAllRecordsCell {
  display: none;
}

.print-style .js-sortableColumn .inner {
  padding-right: 0;
}

.print-style .js-sortableColumn .inner::before,
.print-style .js-sortableColumn .inner::after {
  display: none;
}

.print-style .fixed_header_display_none_at_print {
  display: none;
}


.js-approve.reverse {
  color: #fff !important;
  background-color: #50bdf0 !important;
}


.reservationSearchArea .radio.bar:checked + label:after {
    width: 8px;
    height: 8px;
    background-color: #50bdf0;
    border-radius: 50%;
    background-image: none;
    left: 14px;
}

/* 配色
* 後々Sassで分割する
* #RRGGBB{不透明度}
* 33: 20%
* 参考： https://toriton.link/coding/opacity_colorcode/
* /form/calendar_embed/v2.calendar.cssにも同様の記述があるので、
* 追加・変更をする際には合わせて対応する必要あり
*/
.color1--bg {
  background-color: #41A1ED;
}
.color1--bg--light {
  background-color: #41A1ED33;
}
.color2--bg {
  background-color: #F5BF35;
}
.color2--bg--light {
  background-color: #F5BF3533;
}
.color3--bg {
  background-color: #AD6BC7;
}
.color3--bg--light {
  background-color: #AD6BC733;
}
.color4--bg {
  background-color: #39D0D0;
}
.color4--bg--light {
  background-color: #39D0D033;
}
.color5--bg {
  background-color: #96A0D2;
}
.color5--bg--light {
  background-color: #96A0D233;
}
.color6--bg {
  background-color: #5DB473;
}
.color6--bg--light {
  background-color: #5DB47333;
}
.color7--bg {
  background-color: #FF6499;
}
.color7--bg--light {
  background-color: #FF649933;
}
.color8--bg {
  background-color: #00B546;
}
.color8--bg--light {
  background-color: #00B54633;
}
.color9--bg {
  background-color: #6975BF;
}
.color9--bg--light {
  background-color: #6975BF33;
}
.color10--bg {
  background-color: #E97E5D;
}
.color10--bg--light {
  background-color: #E97E5D33;
}
.color11--bg {
  background-color: #D3871F;
}
.color11--bg--light {
  background-color: #D3871F33;
}
.color12--bg {
  background-color: #EB6D85;
}
.color12--bg--light {
  background-color: #EB6D8533;
}
.color13--bg {
  background-color: #818181;
}
.color13--bg--light {
  background-color: #81818133;
}
.color14--bg {
  background-color: #AFCF34;
}
.color14--bg--light {
  background-color: #AFCF3433;
}

/* アイコン */
.is-active .iconExpand .expandLine49,
.is-active .iconExpand .expandLine51 {
  fill: #50bdf0;
  stroke: #50bdf0;
}
.c-icon {
  position: relative;
}
.c-icon:before,
.c-icon:after {
  content: '';
  display: block;
  position: absolute;
}
.c-icon--ok {
  width: 16px;
  height: 16px;
  border: 2px solid #4FBCED;
  border-radius: 50%;
}
.c-icon--ng {
  padding-left: 13px;
}
.c-icon--ng:before,
.c-icon--ng:after {
  width: 16px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #F05194;
}
.c-icon--ng:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.c-icon--ng:after {
  transform: translate(-50%, -50%) rotate(45deg);
}
.c-icon--triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #F0A650;
  position: relative;
}

.c-icon--round {
  width: 17px;
  height: 17px;
  position: relative;
  border: 1px solid #4FBCED;
  border-radius: 50%;
  background-color: #fff;
}
.c-icon--add:before,
.c-icon--add:after {
  width: 10px;
  height: 2px;
  background-color: #4FBCED;
  top: 50%;
  left: 50%;
}
.c-icon--add:before,
.c-icon--remove:before {
  transform: translate(-50%, -50%);
}
.c-icon--add:after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.c-icon--remove:before {
  width: 5px;
  height: 2px;
  background-color: #4FBCED;
  top: 50%;
  left: 50%;
}
.c-icon--remove:after {
  content: normal;
}

/* コピーアイコン */
.c-icon--copy > * {
  transition: .3s;
}
.c-icon--copy .c-icon--copy__circle {
  path: #0096DC;
}
.c-icon--copy .c-icon--copy__file {
  fill: #0096DC;
}
.c-icon--copy:hover .c-icon--copy__circle {
  fill: #0096DC;
}
.c-icon--copy:hover .c-icon--copy__file {
  fill: #fff;
}
td[data-id^="digital_form"] .js-copy {
  margin: 3px 0 0 -5px;
}


/* Sticky Header Table */
.c-stickyHeaderTableWrap {
  overflow: auto;
  height: calc(100vh - 230px);
}
@media screen and (max-width: 768px) {
  .c-stickyHeaderTableWrap {
    height: calc(100dvh - 150px);
  }
}
.c-stickyHeaderTableWrap--flexHeight {
  height: auto;
}
.c-stickyHeaderTable {
  table-layout: auto;
  border-collapse: separate;
}
.c-stickyHeaderTable tr {
  background-color: transparent !important;
}
.c-stickyHeaderTable th {
  padding-right: 20px !important;
}
.c-stickyHeaderTable td {
  padding-right: 30px !important;
  border-bottom: 1px solid #ccc;
}
.boatTable.c-stickyHeaderTable th:nth-child(1),
.boatTable.c-stickyHeaderTable th:nth-child(2),
.boatTable.c-stickyHeaderTable th:nth-child(3),
.boatTable.c-stickyHeaderTable th:nth-child(4) {
  padding-right: 5px !important;
}
.boatTable.c-stickyHeaderTable td:nth-child(1),
.boatTable.c-stickyHeaderTable td:nth-child(2),
.boatTable.c-stickyHeaderTable td:nth-child(3),
.boatTable.c-stickyHeaderTable td:nth-child(4) {
  padding-right: 5px !important;
}
.c-stickyHeaderTable th {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.c-stickyHeaderTable .selectAllRecordsCell {
  width: 25px;
  min-width: 0;
  padding: 0;
}
.c-stickyHeaderTable .selectAllRecordsCell  .inner {
  padding: 0;
  justify-content: flex-start !important;
}
.c-stickyHeaderTable .selectAllRecordsWrap {
  position: static !important;
  transform: translateY(0);
}
.c-stickyHeader {
  position: sticky;
  z-index: 10;
}
.c-stickyHeader--row1 {
  top: 0;
}
.c-stickyHeader--col1 {
  left: 0;
}
.c-stickyHeader--col2 {
  left: 25px;
  z-index: 9;
}
.c-stickyHeader--row1.c-stickyHeader--col1,
.c-stickyHeader--row1.c-stickyHeader--col2 {
  z-index: 11;
}

.c-linkBox {
  width: 100%;
}
.c-linkBox__link {
  width: 100%;
  height: 100%;
  word-break: break-all;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  transition: .3s;
}
.c-linkBox__link:hover {
  color: #fff;
  background-color: #7CD122;
}

.c-btn--plain {
  width: 100%;
  min-height: 30px;
  color: #333;
  font-size: 14px;
  border: 1px solid #A0AAAF;
  border-radius: 3px;
  background-color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.c-btn--plain:hover {
  color: #fff;
  background-color: #A0AAAF;
}

/* module */
.m-qr {
  width: 100%;
  padding: 10px;
  background-color: #fff;
}
.m-qr img {
  width: 100%;
  height: auto;
}

/* トーストメッセージ */
.toastMessage {
  max-width: 80%;
  min-width: 300px;
  min-height: 30px;
  padding: 3px 9px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .16);
  background-color: rgba(104, 188, 237, .83);
  display: flex;
  align-items: center;
  position: fixed;
  top: 77px;
  left: 33px;
  z-index: 1000;
  transition: .3s;
  opacity: 0;
}
.toastMessage img {
  margin-right: 2px;
}
.toastMessage.ng {
  background-color: rgba(255, 129, 231, .83);
}
.toastMessage.ng img {
  margin-right: 4px;
}
.toastMessage.show {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .toastMessage {
    left: 10px;
  }
}

/* OK-1134: 絞り込み（category / connect） */
.category .filterItems label,
.connect .filterItems label {
  position: relative;
  top: 1px;
}
.setting .filterAccordionHead .js-filterTitleCount {
  font-size: 12px;
}
.setting .filterAccordionHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.setting .filterAccordionHead .js-filterResetBtn,
.setting .filterAccordionHead .js-filterUncheckAllBtn {
  margin-left: 20px;
  padding: 0 10px;
  min-height: 26px;
  color: #0096dc;
  font-size: 1.4rem;
  font-weight: normal;
  border: 1px solid #50bdf0;
  border-radius: 2px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
  cursor: pointer;
}
.setting .filterAccordionHead .js-filterResetBtn:hover,
.setting .filterAccordionHead .js-filterUncheckAllBtn:hover {
  color: #fff;
  background-color: #50bdf0;
}

/* OK-1134: コース表 #sortTable（FixedMidashi rows:1; cols:0 + CSS sticky 左右列 + 列リサイズ）
   - 上ヘッダー固定は FM が clone を position:fixed で viewport 上端に表示
   - 本体行の左右 sticky 列は CSS position:sticky でラップ内スクロール時に固定
   - 表本体は border-collapse: separate（CSS sticky 用） */
.category #sortTable.noFrameTable.alwaysScrollTable {
  width: max-content;
  min-width: 0;
  max-width: none;
  border-collapse: separate;
  border-spacing: 0;
}
.category #sortTable th,
.category #sortTable td {
  font-size: 1.2rem;
}
/* 英数字のみの長い語（金額・日付など）を列幅で折り返す。
   td 直下を JS で div.courseTable-cellWrap に包み、その div の幅で折り返しを強制する。
   なお、グローバル .w-* の固定幅は enhancedScrollableTable.js が
   インライン `width: !important` で上書きする */
.category #sortTable tbody td > .courseTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
/* 偶数行の背景（border-collapse: separate 用に td に背景を当てる）。
   sticky 化された courseTable-colCategory / courseTable-actionCol も
   この td 一律ルールで偶奇背景を受け取るため、横スクロール時に背後の
   セルが透けない */
.category #sortTable tbody tr:nth-child(even) td {
  background-color: #f3f3f3;
}
.category #sortTable tbody tr:nth-child(odd) td {
  background-color: #fff;
}
.category #sortTable tbody tr {
  background-color: transparent;
}
.category #sortTable tbody td {
  border-bottom: 1px solid #ccc;
}
.courseTable-colGripsLayer,
.reservationDayTable-colGripsLayer,
.reservationRepresentativeTable-colGripsLayer,
.reservationRequestTable-colGripsLayer,
.reservationGroupTable-colGripsLayer,
.reservationCustomTable-colGripsLayer,
.reservationPickupTable-colGripsLayer,
.reservationTourEventTable-colGripsLayer,
.reservationRentalTable-colGripsLayer,
.reservationTeamTable-colGripsLayer,
.reservationTimeTable-colGripsLayer,
.reservationSearchTable-colGripsLayer,
.reservationLodgingTable-colGripsLayer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}
.courseTable-colGripsLayer .courseTable-colGrip,
.reservationDayTable-colGripsLayer .reservationDayTable-colGrip,
.reservationRepresentativeTable-colGripsLayer .reservationRepresentativeTable-colGrip,
.reservationRequestTable-colGripsLayer .reservationRequestTable-colGrip,
.reservationGroupTable-colGripsLayer .reservationGroupTable-colGrip,
.reservationCustomTable-colGripsLayer .reservationCustomTable-colGrip,
.reservationPickupTable-colGripsLayer .reservationPickupTable-colGrip,
.reservationTourEventTable-colGripsLayer .reservationTourEventTable-colGrip,
.reservationRentalTable-colGripsLayer .reservationRentalTable-colGrip,
.reservationTeamTable-colGripsLayer .reservationTeamTable-colGrip,
.reservationTimeTable-colGripsLayer .reservationTimeTable-colGrip,
.reservationSearchTable-colGripsLayer .reservationSearchTable-colGrip,
.reservationLodgingTable-colGripsLayer .reservationLodgingTable-colGrip {
  z-index: 11;
  width: 10px;
  margin-left: -5px;
  cursor: col-resize;
  pointer-events: auto;
  touch-action: none;
  background: transparent;
  border-left: 1px solid transparent;
  box-sizing: border-box;
  transition: background-color 0.1s, border-left-color 0.1s;
}
.courseTable-colGripsLayer .courseTable-colGrip:hover,
body.is-courseTableColDragging .courseTable-colGripsLayer .courseTable-colGrip,
.reservationDayTable-colGripsLayer .reservationDayTable-colGrip:hover,
body.is-reservationDayTableColDragging .reservationDayTable-colGripsLayer .reservationDayTable-colGrip,
.reservationRepresentativeTable-colGripsLayer .reservationRepresentativeTable-colGrip:hover,
body.is-reservationRepresentativeTableColDragging .reservationRepresentativeTable-colGripsLayer .reservationRepresentativeTable-colGrip,
.reservationRequestTable-colGripsLayer .reservationRequestTable-colGrip:hover,
body.is-reservationRequestTableColDragging .reservationRequestTable-colGripsLayer .reservationRequestTable-colGrip,
.reservationGroupTable-colGripsLayer .reservationGroupTable-colGrip:hover,
body.is-reservationGroupTableColDragging .reservationGroupTable-colGripsLayer .reservationGroupTable-colGrip,
.reservationCustomTable-colGripsLayer .reservationCustomTable-colGrip:hover,
body.is-reservationCustomTableColDragging .reservationCustomTable-colGripsLayer .reservationCustomTable-colGrip,
.reservationPickupTable-colGripsLayer .reservationPickupTable-colGrip:hover,
body.is-reservationPickupTableColDragging .reservationPickupTable-colGripsLayer .reservationPickupTable-colGrip,
.reservationTourEventTable-colGripsLayer .reservationTourEventTable-colGrip:hover,
body.is-reservationTourEventTableColDragging .reservationTourEventTable-colGripsLayer .reservationTourEventTable-colGrip,
.reservationRentalTable-colGripsLayer .reservationRentalTable-colGrip:hover,
body.is-reservationRentalTableColDragging .reservationRentalTable-colGripsLayer .reservationRentalTable-colGrip,
.reservationTeamTable-colGripsLayer .reservationTeamTable-colGrip:hover,
body.is-reservationTeamTableColDragging .reservationTeamTable-colGripsLayer .reservationTeamTable-colGrip,
.reservationTimeTable-colGripsLayer .reservationTimeTable-colGrip:hover,
body.is-reservationTimeTableColDragging .reservationTimeTable-colGripsLayer .reservationTimeTable-colGrip,
.reservationSearchTable-colGripsLayer .reservationSearchTable-colGrip:hover,
body.is-reservationSearchTableColDragging .reservationSearchTable-colGripsLayer .reservationSearchTable-colGrip,
.reservationLodgingTable-colGripsLayer .reservationLodgingTable-colGrip:hover,
body.is-reservationLodgingTableColDragging .reservationLodgingTable-colGripsLayer .reservationLodgingTable-colGrip {
  background: rgba(0, 150, 220, 0.25);
  border-left-color: #0096dc;
}
/* SP では列リサイズ自体を無効化する（タッチでの幅変更は対応しない） */
@media screen and (max-width: 768px) {
  .courseTable-colGripsLayer,
  .reservationDayTable-colGripsLayer,
  .reservationRepresentativeTable-colGripsLayer,
  .reservationRequestTable-colGripsLayer,
  .reservationGroupTable-colGripsLayer,
  .reservationCustomTable-colGripsLayer,
  .reservationPickupTable-colGripsLayer,
  .reservationTourEventTable-colGripsLayer,
  .reservationRentalTable-colGripsLayer,
  .reservationTeamTable-colGripsLayer,
  .reservationTimeTable-colGripsLayer,
  .reservationSearchTable-colGripsLayer,
  .reservationLodgingTable-colGripsLayer {
    display: none !important;
  }
}
body.is-courseTableColDragging,
body.is-reservationDayTableColDragging,
body.is-reservationRepresentativeTableColDragging,
body.is-reservationRequestTableColDragging,
body.is-reservationGroupTableColDragging,
body.is-reservationCustomTableColDragging,
body.is-reservationPickupTableColDragging,
body.is-reservationTourEventTableColDragging,
body.is-reservationRentalTableColDragging,
body.is-reservationTeamTableColDragging,
body.is-reservationTimeTableColDragging,
body.is-reservationSearchTableColDragging,
body.is-reservationLodgingTableColDragging {
  cursor: col-resize !important;
  user-select: none;
}
body.is-courseTableColDragging *,
body.is-reservationDayTableColDragging *,
body.is-reservationRepresentativeTableColDragging *,
body.is-reservationRequestTableColDragging *,
body.is-reservationGroupTableColDragging *,
body.is-reservationCustomTableColDragging *,
body.is-reservationPickupTableColDragging *,
body.is-reservationTourEventTableColDragging *,
body.is-reservationRentalTableColDragging *,
body.is-reservationTeamTableColDragging *,
body.is-reservationTimeTableColDragging *,
body.is-reservationSearchTableColDragging *,
body.is-reservationLodgingTableColDragging * {
  cursor: col-resize !important;
}
/* .w-* の min-width 指定は #sortTable 直下のセル（th/td）にだけ効かせる。
   セル内子要素にも掛かると、子要素が親 td より大きくなりレイアウトを壊す */
.category #sortTable > thead > tr > .w-50,
.category #sortTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.category #sortTable > thead > tr > .w-80,
.category #sortTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.category #sortTable > thead > tr > .w-100,
.category #sortTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.category #sortTable > thead > tr > .w-130,
.category #sortTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.category #sortTable > thead > tr > .w-150,
.category #sortTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.category #sortTable > thead > tr > .w-200,
.category #sortTable > tbody > tr > .w-200 {
  min-width: 200px;
}
/* セル内の white-space: nowrap (.ws-nw) は cellWrap 内では解除して折り返し可能にする */
.category #sortTable tbody td > .courseTable-cellWrap .ws-nw {
  white-space: normal !important;
}
/*
  z-index 層ガイド（#sortTable / .courseTable-*）
  ───────────────────────────────────────────────
   3 : tbody td.courseTable-colCategory (左固定)
   3 : tbody td.courseTable-actionCol   (右固定)
   4 : tbody td.settingSortCell         (並べ替え表示時の最左)
   7 : thead th.courseTable-colCategory / th.courseTable-actionCol
   8 : thead th.settingSortCell:not(.is-hide)
   ※ thead 側を tbody 側より高くするのは、横スクロール時に
     thead 内の sticky 列が tbody 内 sticky 列の上に重なるため。
  10 : .fixed_header_display_none_at_print (FixedMidashi clone)
  11 : *-colGripsLayer / *-colGrip (列リサイズ grip — position:fixed)
  12 : .overlay (モーダル背景) / .header
 100 : .modalContent
   ※ grip は sticky 列・FM より上、モーダルより下に配置する。
*/
.category #sortTable .settingSortCell {
  width: 50px !important;
  min-width: 50px;
}
/* 右アクション列 sticky */
.category #sortTable .courseTable-actionCol {
  width: 180px !important;
  min-width: 180px;
}
.category #sortTable tbody td.courseTable-actionCol {
  position: sticky;
  right: 0;
  z-index: 3;
}
/* カテゴリー列 sticky 左（本体行） */
.category #sortTable tbody td.courseTable-colCategory {
  position: sticky;
  left: 0;
  z-index: 3;
}
/* 並べ替えモード時の並べ替え列固定（本体行） */
.category #sortTable.is-sortColumnVisible tbody td.settingSortCell {
  position: sticky;
  left: 0;
  z-index: 4;
}
.category #sortTable.is-sortColumnVisible tbody td.courseTable-colCategory {
  left: 50px;
}
/* ヘッダー側の sticky は #sortTable 内のみにスコープする
   （FM clone (.fixed_header_display_none_at_print) は本体と一緒に左右スクロールする仕様。
    clone まで対象に広げると同ページの他テーブル（カテゴリー一覧）にも波及するため避ける） */
.category #sortTable thead th.courseTable-colCategory {
  position: sticky;
  left: 0;
  z-index: 7;
  background-color: #fff;
}
.category #sortTable thead th.courseTable-actionCol {
  position: sticky;
  right: 0;
  z-index: 7;
  background-color: #fff;
}
/* 並べ替え列が表示されているとき。is-sortColumnVisible は JS が source table に付与する。
   :has() に頼らずクラスで判定し、未対応ブラウザでも崩れないようにする */
.category #sortTable.is-sortColumnVisible thead th.settingSortCell:not(.is-hide) {
  position: sticky;
  left: 0;
  z-index: 8;
  background-color: #fff;
}
.category #sortTable.is-sortColumnVisible thead th.courseTable-colCategory {
  left: 50px;
}
/* SP では右アクション列の sticky を解除する */
@media screen and (max-width: 768px) {
  .category #sortTable tbody td.courseTable-actionCol,
  .category #sortTable thead th.courseTable-actionCol {
    position: static;
    right: auto;
    z-index: auto;
  }
}

/* OK-1158: 予約台帳列幅可変（viewSettingEnhancedTable.js PAGE_PROFILES と対応） */
.reservation.all #reservationDayTable.scrollableTable,
.reservation.all #reservationRepresentativeTable.scrollableTable,
.reservation.all #reservationRequestTable.scrollableTable,
.reservation.all #reservationGroupTable.scrollableTable,
.reservation.all #reservationCustomTable.scrollableTable {
  width: max-content;
  min-width: 0;
  max-width: none;
}
.reservation.all #reservationDayTable tbody td > .reservationDayTable-cellWrap,
.reservation.all #reservationRepresentativeTable tbody td > .reservationRepresentativeTable-cellWrap,
.reservation.all #reservationRequestTable tbody td > .reservationRequestTable-cellWrap,
.reservation.all #reservationGroupTable tbody td > .reservationGroupTable-cellWrap,
.reservation.all #reservationCustomTable tbody td > .reservationCustomTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.reservation.all #reservationDayTable tbody td > .reservationDayTable-cellWrap .ws-nw,
.reservation.all #reservationRepresentativeTable tbody td > .reservationRepresentativeTable-cellWrap .ws-nw,
.reservation.all #reservationRequestTable tbody td > .reservationRequestTable-cellWrap .ws-nw,
.reservation.all #reservationGroupTable tbody td > .reservationGroupTable-cellWrap .ws-nw,
.reservation.all #reservationCustomTable tbody td > .reservationCustomTable-cellWrap .ws-nw {
  white-space: normal !important;
}
.reservation.all #reservationDayTable > thead > tr > .w-50,
.reservation.all #reservationDayTable > tbody > tr > .w-50,
.reservation.all #reservationRepresentativeTable > thead > tr > .w-50,
.reservation.all #reservationRepresentativeTable > tbody > tr > .w-50,
.reservation.all #reservationRequestTable > thead > tr > .w-50,
.reservation.all #reservationRequestTable > tbody > tr > .w-50,
.reservation.all #reservationGroupTable > thead > tr > .w-50,
.reservation.all #reservationGroupTable > tbody > tr > .w-50,
.reservation.all #reservationCustomTable > thead > tr > .w-50,
.reservation.all #reservationCustomTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.reservation.all #reservationDayTable > thead > tr > .w-60,
.reservation.all #reservationDayTable > tbody > tr > .w-60,
.reservation.all #reservationRepresentativeTable > thead > tr > .w-60,
.reservation.all #reservationRepresentativeTable > tbody > tr > .w-60,
.reservation.all #reservationRequestTable > thead > tr > .w-60,
.reservation.all #reservationRequestTable > tbody > tr > .w-60,
.reservation.all #reservationGroupTable > thead > tr > .w-60,
.reservation.all #reservationGroupTable > tbody > tr > .w-60,
.reservation.all #reservationCustomTable > thead > tr > .w-60,
.reservation.all #reservationCustomTable > tbody > tr > .w-60 {
  min-width: 60px;
}
.reservation.all #reservationDayTable > thead > tr > .w-80,
.reservation.all #reservationDayTable > tbody > tr > .w-80,
.reservation.all #reservationRepresentativeTable > thead > tr > .w-80,
.reservation.all #reservationRepresentativeTable > tbody > tr > .w-80,
.reservation.all #reservationRequestTable > thead > tr > .w-80,
.reservation.all #reservationRequestTable > tbody > tr > .w-80,
.reservation.all #reservationGroupTable > thead > tr > .w-80,
.reservation.all #reservationGroupTable > tbody > tr > .w-80,
.reservation.all #reservationCustomTable > thead > tr > .w-80,
.reservation.all #reservationCustomTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.reservation.all #reservationDayTable > thead > tr > .w-100,
.reservation.all #reservationDayTable > tbody > tr > .w-100,
.reservation.all #reservationRepresentativeTable > thead > tr > .w-100,
.reservation.all #reservationRepresentativeTable > tbody > tr > .w-100,
.reservation.all #reservationRequestTable > thead > tr > .w-100,
.reservation.all #reservationRequestTable > tbody > tr > .w-100,
.reservation.all #reservationGroupTable > thead > tr > .w-100,
.reservation.all #reservationGroupTable > tbody > tr > .w-100,
.reservation.all #reservationCustomTable > thead > tr > .w-100,
.reservation.all #reservationCustomTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.reservation.all #reservationDayTable > thead > tr > .w-120,
.reservation.all #reservationDayTable > tbody > tr > .w-120,
.reservation.all #reservationRepresentativeTable > thead > tr > .w-120,
.reservation.all #reservationRepresentativeTable > tbody > tr > .w-120,
.reservation.all #reservationRequestTable > thead > tr > .w-120,
.reservation.all #reservationRequestTable > tbody > tr > .w-120,
.reservation.all #reservationGroupTable > thead > tr > .w-120,
.reservation.all #reservationGroupTable > tbody > tr > .w-120,
.reservation.all #reservationCustomTable > thead > tr > .w-120,
.reservation.all #reservationCustomTable > tbody > tr > .w-120 {
  min-width: 120px;
}
.reservation.all #reservationDayTable > thead > tr > .w-130,
.reservation.all #reservationDayTable > tbody > tr > .w-130,
.reservation.all #reservationRepresentativeTable > thead > tr > .w-130,
.reservation.all #reservationRepresentativeTable > tbody > tr > .w-130,
.reservation.all #reservationRequestTable > thead > tr > .w-130,
.reservation.all #reservationRequestTable > tbody > tr > .w-130,
.reservation.all #reservationGroupTable > thead > tr > .w-130,
.reservation.all #reservationGroupTable > tbody > tr > .w-130,
.reservation.all #reservationCustomTable > thead > tr > .w-130,
.reservation.all #reservationCustomTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.reservation.all #reservationDayTable > thead > tr > .w-150,
.reservation.all #reservationDayTable > tbody > tr > .w-150,
.reservation.all #reservationRepresentativeTable > thead > tr > .w-150,
.reservation.all #reservationRepresentativeTable > tbody > tr > .w-150,
.reservation.all #reservationRequestTable > thead > tr > .w-150,
.reservation.all #reservationRequestTable > tbody > tr > .w-150,
.reservation.all #reservationGroupTable > thead > tr > .w-150,
.reservation.all #reservationGroupTable > tbody > tr > .w-150,
.reservation.all #reservationCustomTable > thead > tr > .w-150,
.reservation.all #reservationCustomTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.reservation.all #reservationDayTable > thead > tr > .w-200,
.reservation.all #reservationDayTable > tbody > tr > .w-200,
.reservation.all #reservationRepresentativeTable > thead > tr > .w-200,
.reservation.all #reservationRepresentativeTable > tbody > tr > .w-200,
.reservation.all #reservationRequestTable > thead > tr > .w-200,
.reservation.all #reservationRequestTable > tbody > tr > .w-200,
.reservation.all #reservationGroupTable > thead > tr > .w-200,
.reservation.all #reservationGroupTable > tbody > tr > .w-200,
.reservation.all #reservationCustomTable > thead > tr > .w-200,
.reservation.all #reservationCustomTable > tbody > tr > .w-200 {
  min-width: 200px;
}

/* OK-1158: 送迎予約台帳（pickup — FM cols:1・複数アコーディオン表） */
.reservation.pickup .reservationPickupTable.scrollableTable {
  width: max-content;
  min-width: 0;
  max-width: none;
}
.reservation.pickup .reservationPickupTable tbody td > .reservationPickupTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.reservation.pickup .reservationPickupTable tbody td > .reservationPickupTable-cellWrap .ws-nw {
  white-space: normal !important;
}
.reservation.pickup .reservationPickupTable > thead > tr > .w-50,
.reservation.pickup .reservationPickupTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.reservation.pickup .reservationPickupTable > thead > tr > .w-60,
.reservation.pickup .reservationPickupTable > tbody > tr > .w-60 {
  min-width: 60px;
}
.reservation.pickup .reservationPickupTable > thead > tr > .w-80,
.reservation.pickup .reservationPickupTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.reservation.pickup .reservationPickupTable > thead > tr > .w-100,
.reservation.pickup .reservationPickupTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.reservation.pickup .reservationPickupTable > thead > tr > .w-120,
.reservation.pickup .reservationPickupTable > tbody > tr > .w-120 {
  min-width: 120px;
}
.reservation.pickup .reservationPickupTable > thead > tr > .w-130,
.reservation.pickup .reservationPickupTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.reservation.pickup .reservationPickupTable > thead > tr > .w-150,
.reservation.pickup .reservationPickupTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.reservation.pickup .reservationPickupTable > thead > tr > .w-200,
.reservation.pickup .reservationPickupTable > tbody > tr > .w-200 {
  min-width: 200px;
}

/* OK-1158: ツアー・イベント予約台帳（course-tour-event — FM cols:2） */
.reservation.tourEvent #reservationTourEventTable.scrollableTable {
  width: max-content;
  min-width: 0;
  max-width: none;
}
.reservation.tourEvent #reservationTourEventTable tbody td > .reservationTourEventTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.reservation.tourEvent #reservationTourEventTable tbody td > .reservationTourEventTable-cellWrap .ws-nw {
  white-space: normal !important;
}
.reservation.tourEvent #reservationTourEventTable > thead > tr > .w-50,
.reservation.tourEvent #reservationTourEventTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.reservation.tourEvent #reservationTourEventTable > thead > tr > .w-60,
.reservation.tourEvent #reservationTourEventTable > tbody > tr > .w-60 {
  min-width: 60px;
}
.reservation.tourEvent #reservationTourEventTable > thead > tr > .w-80,
.reservation.tourEvent #reservationTourEventTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.reservation.tourEvent #reservationTourEventTable > thead > tr > .w-100,
.reservation.tourEvent #reservationTourEventTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.reservation.tourEvent #reservationTourEventTable > thead > tr > .w-120,
.reservation.tourEvent #reservationTourEventTable > tbody > tr > .w-120 {
  min-width: 120px;
}
.reservation.tourEvent #reservationTourEventTable > thead > tr > .w-130,
.reservation.tourEvent #reservationTourEventTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.reservation.tourEvent #reservationTourEventTable > thead > tr > .w-150,
.reservation.tourEvent #reservationTourEventTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.reservation.tourEvent #reservationTourEventTable > thead > tr > .w-200,
.reservation.tourEvent #reservationTourEventTable > tbody > tr > .w-200 {
  min-width: 200px;
}

/* OK-1158: レンタル予約台帳（rental — FM cols:1・複数アコーディオン表） */
.reservation.rental .reservationRentalTable.scrollableTable {
  width: max-content;
  min-width: 0;
  max-width: none;
}
.reservation.rental .reservationRentalTable tbody td > .reservationRentalTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.reservation.rental .reservationRentalTable tbody td > .reservationRentalTable-cellWrap .ws-nw {
  white-space: normal !important;
}
.reservation.rental .reservationRentalTable > thead > tr > .w-50,
.reservation.rental .reservationRentalTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.reservation.rental .reservationRentalTable > thead > tr > .w-60,
.reservation.rental .reservationRentalTable > tbody > tr > .w-60 {
  min-width: 60px;
}
.reservation.rental .reservationRentalTable > thead > tr > .w-80,
.reservation.rental .reservationRentalTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.reservation.rental .reservationRentalTable > thead > tr > .w-100,
.reservation.rental .reservationRentalTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.reservation.rental .reservationRentalTable > thead > tr > .w-120,
.reservation.rental .reservationRentalTable > tbody > tr > .w-120 {
  min-width: 120px;
}
.reservation.rental .reservationRentalTable > thead > tr > .w-130,
.reservation.rental .reservationRentalTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.reservation.rental .reservationRentalTable > thead > tr > .w-150,
.reservation.rental .reservationRentalTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.reservation.rental .reservationRentalTable > thead > tr > .w-200,
.reservation.rental .reservationRentalTable > tbody > tr > .w-200 {
  min-width: 200px;
}

/* OK-1158: チーム予約台帳（team — FM cols:1・複数アコーディオン表） */
.reservation.team .reservationTeamTable.scrollableTable {
  width: max-content;
  min-width: 0;
  max-width: none;
}
.reservation.team .reservationTeamTable tbody td > .reservationTeamTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.reservation.team .reservationTeamTable tbody td > .reservationTeamTable-cellWrap .ws-nw {
  white-space: normal !important;
}
.reservation.team .reservationTeamTable > thead > tr > .w-50,
.reservation.team .reservationTeamTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.reservation.team .reservationTeamTable > thead > tr > .w-60,
.reservation.team .reservationTeamTable > tbody > tr > .w-60 {
  min-width: 60px;
}
.reservation.team .reservationTeamTable > thead > tr > .w-80,
.reservation.team .reservationTeamTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.reservation.team .reservationTeamTable > thead > tr > .w-100,
.reservation.team .reservationTeamTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.reservation.team .reservationTeamTable > thead > tr > .w-120,
.reservation.team .reservationTeamTable > tbody > tr > .w-120 {
  min-width: 120px;
}
.reservation.team .reservationTeamTable > thead > tr > .w-130,
.reservation.team .reservationTeamTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.reservation.team .reservationTeamTable > thead > tr > .w-150,
.reservation.team .reservationTeamTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.reservation.team .reservationTeamTable > thead > tr > .w-200,
.reservation.team .reservationTeamTable > tbody > tr > .w-200 {
  min-width: 200px;
}

/* OK-1158: 時間予約台帳（time — FM cols:2・単一表） */
.reservation.all #reservationTimeTable.scrollableTable,
.reservation.all #reservationTimeTable.noDivideBottomTable {
  width: max-content;
  min-width: 0;
  max-width: none;
}
.reservation.all #reservationTimeTable tbody td > .reservationTimeTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.reservation.all #reservationTimeTable tbody td > .reservationTimeTable-cellWrap .ws-nw {
  white-space: normal !important;
}
.reservation.all #reservationTimeTable > thead > tr > .w-50,
.reservation.all #reservationTimeTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.reservation.all #reservationTimeTable > thead > tr > .w-60,
.reservation.all #reservationTimeTable > tbody > tr > .w-60 {
  min-width: 60px;
}
.reservation.all #reservationTimeTable > thead > tr > .w-80,
.reservation.all #reservationTimeTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.reservation.all #reservationTimeTable > thead > tr > .w-100,
.reservation.all #reservationTimeTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.reservation.all #reservationTimeTable > thead > tr > .w-120,
.reservation.all #reservationTimeTable > tbody > tr > .w-120 {
  min-width: 120px;
}
.reservation.all #reservationTimeTable > thead > tr > .w-130,
.reservation.all #reservationTimeTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.reservation.all #reservationTimeTable > thead > tr > .w-150,
.reservation.all #reservationTimeTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.reservation.all #reservationTimeTable > thead > tr > .w-200,
.reservation.all #reservationTimeTable > tbody > tr > .w-200 {
  min-width: 200px;
}

/* OK-1158: 予約検索（search — FM cols:1・単一表・もっと見る AJAX 行あり） */
.reservation.search #reservationSearchTable.scrollableTable {
  width: max-content;
  min-width: 0;
  max-width: none;
}
.reservation.search #reservationSearchTable tbody td > .reservationSearchTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.reservation.search #reservationSearchTable tbody td > .reservationSearchTable-cellWrap .ws-nw {
  white-space: normal !important;
}
.reservation.search #reservationSearchTable > thead > tr > .w-50,
.reservation.search #reservationSearchTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.reservation.search #reservationSearchTable > thead > tr > .w-60,
.reservation.search #reservationSearchTable > tbody > tr > .w-60 {
  min-width: 60px;
}
.reservation.search #reservationSearchTable > thead > tr > .w-80,
.reservation.search #reservationSearchTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.reservation.search #reservationSearchTable > thead > tr > .w-100,
.reservation.search #reservationSearchTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.reservation.search #reservationSearchTable > thead > tr > .w-120,
.reservation.search #reservationSearchTable > tbody > tr > .w-120 {
  min-width: 120px;
}
.reservation.search #reservationSearchTable > thead > tr > .w-130,
.reservation.search #reservationSearchTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.reservation.search #reservationSearchTable > thead > tr > .w-150,
.reservation.search #reservationSearchTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.reservation.search #reservationSearchTable > thead > tr > .w-200,
.reservation.search #reservationSearchTable > tbody > tr > .w-200 {
  min-width: 200px;
}

/* OK-1158: 宿泊台帳・明細表（lodging — FM cols:3） */
.reservation.lodging #reservationLodgingTable.scrollableTable {
  width: max-content;
  min-width: 0;
  max-width: none;
}
.reservation.lodging #reservationLodgingTable tbody td > .reservationLodgingTable-cellWrap {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.reservation.lodging #reservationLodgingTable tbody td > .reservationLodgingTable-cellWrap .ws-nw {
  white-space: normal !important;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-50,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-50 {
  min-width: 50px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-60,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-60 {
  min-width: 60px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-80,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-80 {
  min-width: 80px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-100,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-100 {
  min-width: 100px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-120,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-120 {
  min-width: 120px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-130,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-130 {
  min-width: 130px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-150,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-150 {
  min-width: 150px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-200,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-200 {
  min-width: 200px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-250,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-250 {
  min-width: 250px;
}
.reservation.lodging #reservationLodgingTable > thead > tr > .w-300,
.reservation.lodging #reservationLodgingTable > tbody > tr > .w-300 {
  min-width: 300px;
}