@charset "utf-8";
/* ===========================================
 * MODAL
 * ======================================== */
.modal {
  display: none;
}
.modal.is-open {
  width: 100vw;
  height: 100vh;
  margin: auto;
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: block;
}
.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ===========================================
 * DETAIL
 * ======================================== */
.detail__wrap {
  width: min(calc(100% - 60px), 315px);
  height: min(calc(100% - 60px), 500px);
  padding: 20px;
  margin-inline: auto;
  color: #FFFFFF;
  border-radius: 10px;
  background-color: #FFFFFF;
  display: block;
  position: relative;
  z-index: auto;
}
.detail__inner {
  max-height: 460px;
  overflow-y: scroll;
}
.detail__btn__close {
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 9999px;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -20px;
  right: -20px;
  cursor: pointer;
}
.detail__btn__close::before,
.detail__btn__close::after {
  content: "";
  background: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
}
.detail__btn__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.detail__btn__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* .detail__box {} */
.detail__box__inner {
  display: grid;
  gap: 10px;
}
.detail__btn {
  width: 100%;
  padding-block: 10px;
  font: 600 normal 14px / 1.5 var(--font-fm-main);
  color: #111111;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail__btn > span {
  width: fit-content;
  display: block;
}
.detail__number {
  font: 600 normal 14px / 1.5 var(--font-fm-main);
  color: #424242;
  display: flex;
  justify-content: space-between;
}
.detail__people {
  padding: 4px 6px;
  font: 600 normal 12px / 1.0 var(--font-fm-main);
  color: #424242;
  border: 1px solid #424242;
  border-radius: 4px;
  display: block;
}
.detail__tit {
  font: 600 normal 14px / 1.5 var(--font-fm-main);
  color: #111111;
}
.detail__txt {
  font: 300 normal 14px / 1.5 var(--font-fm-main);
  color: #111111;
}
.detail__con {
  font: 300 normal 14px / 1.5 var(--font-fm-main);
  color: #424242;
}
.detail__caution {
  font: 300 normal 14px / 1.5 var(--font-fm-main);
  color: #424242;
}
/* accordion */
/* ======================================== */
.detail__accordion {
  padding-block: 14px;
  border-bottom: 2px dotted #999999;
}
.detail__accordion:last-of-type {
    border-bottom: none;
  }
.detail__accordion__btn {
  padding-right: 40px;
  font: 600 normal 16px / 1.5 var(--font-fm-main);
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: auto;
}
.detail__accordion__btn__icon {
	width: 30px;
	height: 30px;
	aspect-ratio: 1 / 1;
	position: absolute;
	z-index: auto;
	right: 10px;
}
.detail__accordion__btn__icon::before,
.detail__accordion__btn__icon::after {
	content: "";
	width: 45%;
	height: 2px;
	margin: auto;
	border-radius: 9999px;
	background-color: #999999;
	position: absolute;
	z-index: auto;
	inset: 0;
}
.detail__accordion__btn__icon::after {
	transform: rotate(90deg);
	transition: 0.3s;
}
.detail__accordion[open] .detail__accordion__btn__icon::after {
	transform: rotate(0);
}
.detail__accordion__contents {
  padding-top: 14px;
  display: grid;
  gap: 10px;
}
/* michinoeki */
/* ======================================== */
.detail__michinoeki__img {
  border-radius: 10px;
  overflow: hidden;
}
.detail__michinoeki__txt {
  font: 300 normal 13px / 1.5 var(--font-fm-main);
  color: #111111;
}

/* ===========================================
 * READMORE
 * ======================================== */
/* .readmore {} */
.readmore__contents {
  max-height: 270px;
	overflow: hidden;
	transition: max-height 0.6s;
}
/* .readmore__contents.show {} */
.readmore__btn {
  position: relative;
  z-index: auto;
}
.readmore__btn::before {
  content: "";
  width: 100%;
  height: 40px;
  margin-inline: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
  position: absolute;
  z-index: auto;
  right: 0;
  left: 0;
  top: -40px;
}
.readmore__btn.show::before {
  display: none;
}