@charset "utf-8";

/* --------------------------------------------


usage-type  利用区分


---------------------------------------------- */
.content-section {
    margin-bottom: 70px;
}

.usage-type-container {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

.usage-type-table-wrapper {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.usage-type-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 1.35rem;
  line-height: 1.5;
  background-color: #ffffff;
  border: 1px solid #b2b2b2;
}

.usage-type-table th {
  padding: 12px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  background-color: var(--c-blue, #004ea2);
  border: 1px solid var(--c-blue, #004ea2);
}

.usage-type-table td {
  padding: 14px 12px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #dcdcdc;
}

.usage-type-table .td-category-main {
  width: 78px;
  font-size: 1.5rem;
  font-weight: bold;
}

.usage-type-table .td-category-sub {
  width: 110px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0;
}

.usage-type-table .td-col-3 {
  width: 152px;
}

.usage-type-table .td-col-4 {
  width: 121px;
}

.usage-type-table .td-desc {
  text-align: left;
}

.usage-type-table .td-recruitment {
  padding: 0;
  width: 145px;
}

.recruitment-cell {
  padding: 12px 6px;
  line-height: 1.4;
}

.recruitment-cell:not(:last-child) {
  border-bottom: 1px solid #dcdcdc;
}

.u-bg-light-blue {
  background-color: #f0f5fa;
}

.u-text-blue {
  color: var(--c-blue, #004ea2);
}

.u-text-red {
  color: #d92535 !important;
}

.td-note {
  display: block;
  padding-top: 5px;
}

.price-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 70px;
  padding-top: 4px;
}

.price-title {
  margin-bottom: 12px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #222222;
}

.price-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 50%;
  z-index: 2;
}

.price-circle--low {
  color: #1a1a1a;
  border: 2px solid #004ea2;
  background-color: #ffffff;
}

.price-circle--high {
  color: #ffffff;
  border: 2px solid #fff;
  background-color: #004ea2;
}

.price-arrow-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 1;
  width: 100%;
  margin: -10px 0;
}

.price-arrow {
  width: 44px;
  height: 100%;
  background: linear-gradient(to bottom, #dbe4f0 0%, #004ea2 100%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
}

.usage-card-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
}

.usage-card {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px 32px 24px 22px;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
}

.usage-card__title {
  flex-shrink: 0;
  width: 22%;
  padding-right: 20px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.usage-card__body {
  flex: 1;
  padding: 10px 0 10px 24px;
  border-left-width: 1px;
  border-left-style: solid;
}

.usage-card__note {
  margin: 6px 0 0 0;
}

.usage-card--green {
  background-color: #f7f9f7;
  border-color: #3e7b57;
}

.usage-card--green .usage-card__title {
  color: #1e6638;
}

.usage-card--green .usage-card__body {
  border-left-color: #3e7b57;
}

.usage-card--pink {
  background-color: #fdf5f6;
  border-color: #d85c6c;
}

.usage-card--pink .usage-card__title {
  color: #cf2237;
}

.usage-card--pink .usage-card__body {
  border-left-color: #d85c6c;
}


/* --------------------------------------------------------------------------
   利用申し込み（タイムライン・注意事項）
   -------------------------------------------------------------------------- */
.apply-box {
  margin: 30px 0 50px;
}

.apply-label {
  display: inline-block;
  padding: 8px 24px 5px;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffffff;
  background-color: #004ea2;
}

.apply-lead {
  margin-bottom: 40px;
  line-height: 1.8;
  color: #222222;
}

.timeline-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 16px;
  padding: 50px 0 30px;
}

.timeline-base-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 38px;
  border: 1px solid #a0a0a0;
  background-color: #f9f9f9;
  z-index: 1;
}

.timeline-row {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 40px;
}

.timeline-row--top {
  margin-bottom: 20px;
}

.timeline-point {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.point-label {
  font-weight: bold;
  white-space: nowrap;
}

.point-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: 4px 0;
}

.color-blue { color: #004ea2; }
.point-dot.color-blue { background-color: #004ea2; }

.color-red { color: #d81c35; }
.point-dot.color-red { background-color: #d81c35; }

.point-11m .point-dot::after,
.point-apr .point-dot::after,
.point-mar .point-dot::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 49px;
  border-left: 1px dotted #004ea2;
  transform: translateX(-50%);
}

.point-5m .point-dot::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 47px;
  border-left: 1px dotted #d81c35;
  transform: translateX(-50%);
}

.point-11m { left: 10%; top: -32px; }
.point-apr { left: 35%; top: -32px; }
.point-mar { right: 10%; top: -32px; }
.point-5m  { left: 40%; top: 9px; }

.timeline-arrow-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2px;
}

.arrow-blue {
  position: absolute;
  left: 44%;
  right: 14%;
  top: -21px;
  background-color: #004ea2;
}

.arrow-blue::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -4px;
  border-right: 7px solid #004ea2;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.arrow-blue::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  border-left: 7px solid #004ea2;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.arrow-red {
  position: absolute;
  left: 47%;
  right: 12%;
  top: 36px;
  background-color: #d81c35;
}

.arrow-red::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -4px;
  border-right: 7px solid #d81c35;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.arrow-red::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  border-left: 7px solid #d81c35;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.timeline-pill {
  position: relative;
  z-index: 2;
  padding: 3px 20px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffffff;
  border-radius: 15px;
  white-space: nowrap;
}

.pill-blue { background-color: #004ea2; }
.pill-red  { background-color: #d81c35; }

.timeline-caption {
  margin-bottom: 40px;
}

.apply-notes {
  margin-top: 30px;
}

.notes-title {
  margin-bottom: 5px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #004ea2;
}

.notes-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.notes-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
}

.notes-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.text-link-blue {
  color: #004ea2;
  text-decoration: none;
  border-bottom: 1px dotted #004ea2;
}

.text-link-blue:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   一般枠（随時受付）
   -------------------------------------------------------------------------- */

.apply-card {
  padding: 24px 28px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.apply-card--blue {
  background-color: #f4f8fc;
}

.apply-card--pink {
  background-color: #fdf5f6;
}

.apply-card-title {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 1.8rem;
  font-weight: bold;
}

.apply-card-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
}

.apply-card-title--blue {
  color: #004ea2;
}

.apply-card-title--blue::before {
  background-color: #004ea2;
}

.apply-card-title--pink {
  color: #d81c35;
}

.apply-card-title--pink::before {
  background-color: #d81c35;
}

.apply-card-list {
  padding-left: 0;
  margin: 0 0 10px 0;
  list-style: none;
}

.apply-card-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 3px;
}

.apply-card-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.apply-card-text {
  margin: 0;
  line-height: 1.7;
  color: #222222;
}

/* --------------------------------------------------------------------------
   優先枠で利用を希望する方 & 下部共通案内枠
   -------------------------------------------------------------------------- */
.apply-label--green {
  background-color: #208649;
}

.notes-title--green {
  color: #208649;
}

.link-list-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: 15px;
}

.link-list-group .text-link {
  color: #208649;
}

.text-link:hover {
  color: #0b301a;
}

.info-card-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 96%;
  max-width: 880px;
  margin: 80px auto;
  padding: 24px 30px;
  border-radius: 8px;
  border: 4px solid #004ea2;
  background-color: #ffffff;
}

@media screen and (min-width: 1920px) {
  .info-card-box {
    max-width: 1000px;
  }
}


.info-card-box::after {
  content: "";
  position: absolute;
  top: -60px;
  right: 10px;
  z-index: -1;
  width: 134px;
  height: 83px;
  background: url("../image/use-index-mascot.svg") no-repeat center / contain;
  pointer-events: none;
}

.info-card-mascot {
  position: absolute;
  top: -65px;
  right: 50px;
  z-index: 2;
  pointer-events: none;
}


.info-card-title {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #004ea2;
}

.title-square {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #0056b3;
  flex-shrink: 0;
}

.u-mt-15 {
  margin-top: 15px;
}

.text-link-blue {
  color: #0056b3;
  text-decoration: none;
  border-bottom: 1px dotted #0056b3;
  font-weight: bold;
}