@charset "UTF-8";
/* ============================================================
   kaigaidppack | app-common.css
   PC/SP 共通のベーススタイル（スケルトン）。
   - カラートークン・タイポ・セクション共通レイアウト・カード/チップ/ボタン等。
   - 画面幅別の上書きは app-pc.css / app-sp.css 側で行う。
   - 配色は Figma（海外DPパック）に準拠：cyan / pink / pale-yellow。
   ============================================================ */

:root {
  /* Brand colors */
  --c-cyan:        #00C1D3;
  --c-cyan-dark:   #00BDCD;
  --c-cyan-deep:   #009AAA;
  --c-pink:        #FFD2DC;
  --c-pink-deep:   #F64971;
  --c-yellow:      #F8FFCE;
  --c-yellow-badge:#FFD805;
  --c-red:         #D03557;
  --c-navy:        #172D80;

  /* Neutrals */
  --c-text:        #222222;
  --c-text-sub:    #666666;
  --c-border:      #DDDDDD;
  --c-bg:          #FFFFFF;
  --c-bg-gray:     #EEEEEE;
  --c-bg-soft:     #F5F8F9;

  /* Layout */
  --content-max:   1080px;
  --section-gap:   64px;
  --radius:        12px;

  /* Type */
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-eng:  "Corinthia", "Allison", cursive;
  --font-num:  "Bebas Neue", var(--font-base);
}

/* ---------- base ---------- */
.App {
  font-family: var(--font-base);
  color: var(--c-text);
  line-height: 1.7;
  font-size: 15px;
  word-break: break-word;
}
.App img { max-width: 100%; height: auto; vertical-align: bottom; }
/* <picture> はレイアウトに影響を与えないラッパーとして扱う（内側 img の width/height や絶対配置を維持） */
picture { display: contents; }
/* display:contents 下で <source> が grid/flex アイテム化して列を占有するのを防ぐ
   （TripBlockBody の2カラムグリッドで左カラムが空白になる不具合を修正。WebP選択には影響しない） */
picture > source { display: none; }
.App a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.App a:hover { opacity: .75; }
.App ul, .App ol, .App dl { list-style: none; margin: 0; padding: 0; }
.App .hl { color: var(--c-cyan-dark); }
.App strong { color: var(--c-pink-deep); font-weight: 700; }
.SpOnly { display: none; }

/* ---------- section frame ---------- */
.Section { padding: 48px 16px; }
.Section:nth-of-type(even) { background: var(--c-bg-soft); }
.SectionInner { max-width: var(--content-max); margin: 0 auto; }
.SectionContent { margin-top: 24px; }
.SectionLead { text-align: center; color: var(--c-text-sub); margin: 8px 0 0; }

/* section title */
.SectionTitle {
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  position: relative;
}
.SectionHeadingEng {
  display: block;
  font-family: var(--font-eng);
  font-weight: 700;
  color: var(--c-cyan);
  font-size: 40px;
  line-height: 1;
  margin-bottom: 4px;
}

/* ---------- skeleton placeholder ---------- */
.SkeletonImg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  background:
    repeating-linear-gradient(45deg, #f0f0f0 0 10px, #e8e8e8 10px 20px);
  color: #999;
  font-size: 12px;
  letter-spacing: .1em;
  border-radius: 8px;
}

/* ---------- Search ---------- */
.SearchWrap {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 28px 14px;
}
.SearchWrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -180px;
  bottom: -310px;
  width: 390px;
  height: 541px;
  background: url("../images/hero_bg_pink.png") center / contain no-repeat;
  opacity: .82;
  pointer-events: none;
}
.SearchWrap .SectionInner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
}
.SearchBox {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 20px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .1);
  padding: 20px 14px;
  overflow: visible;
}
/*.SearchBox .search_kaigaiBar,
.SearchBox .serchBox,
.SearchBox .content_wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  color: #111;
  font-family: var(--font-base);
}
.SearchBox .kaigaiS > ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.SearchBox .kaigaiS > ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 8px 10px;
  border: 2px solid var(--c-cyan);
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.SearchBox .kaigaiS > ul > li.select {
  background: var(--c-cyan);
  color: #fff;
}
.SearchBox .disnon_search_box,
.SearchBox [hidden] { display: none !important; }
.SearchBox dl {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 10px;
  float: none !important;
  clear: both;
}
.SearchBox dt {
  box-sizing: border-box;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.SearchBox dd {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
}
.SearchBox .required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  margin-right: 5px;
  background: #df1b1b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.SearchBox select,
.SearchBox input:not([type="radio"]):not([type="checkbox"]),
.SearchBox button,
.SearchBox .topDropdownModalButton,
.SearchBox .otFormSelectCalender,
.SearchBox .otFormSelectRoom,
.SearchBox .base_gadget_calendar_box {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none;
  height: 34px;
  border: 1px solid #9a9a9a;
  border-radius: 0;
  background: #fff;
  color: #111;
  font-family: var(--font-base);
  font-size: 13px;
  padding: 0 12px;
  text-align: left;
}
.SearchBox select,
.SearchBox input:not([type="radio"]):not([type="checkbox"]) { display: block; }
.SearchBox input[type="radio"],
.SearchBox input[type="checkbox"] {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 5px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: middle;
}
.SearchBox .dropdown,
.SearchBox .topDropdownModal,
.SearchBox .datePicker,
.SearchBox .topRoomChange,
.SearchBox .calendar_wrap,
.SearchBox .base_pull,
.SearchBox .base_gadget_calendar_box,
.SearchBox .js-kaigai-room-change-target,
.SearchBox .js-kaigai-room-change-modal {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
}
.SearchBox .topDropdownModalButton,
.SearchBox button { cursor: pointer; }
.SearchBox .topDropdownModal { min-width: 0; }
.SearchBox .topDropdownModalWrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.SearchBox #destination_wrap dd,
.SearchBox .forcia_dest dd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.SearchBox .forcia_dest dd > div { min-width: 0; }
.SearchBox .dropdown-menu { display: none; }
.SearchBox .type_calendar,
.SearchBox .roomChange__modalWrap,
.SearchBox .roomsChanger {
  display: none !important;
}
.SearchBox .datePicker__dateText,
.SearchBox .roomChange__selectedText {
  margin: 0;
  line-height: 32px;
}
.SearchBox .selectday,
.SearchBox .selectedRoom,
.SearchBox .base_gadget_calendar_box {
  position: relative;
}
.SearchBox .air_gadget_calendar_btn,
.SearchBox .ic_cal,
.SearchBox .base_gadget_calendar img {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}
.SearchBox .f-button,
.SearchBox .btnSeach {
  width: 100% !important;
  margin: 18px auto 0 !important;
  text-align: center !important;
}
.SearchBox .btnSeach01,
.SearchBox .btnSeach,
.SearchBox .btnSeach a,
.SearchBox .forcia_search_air,
.SearchBox .forcia_search_dp {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: min(100%, 740px) !important;
  min-width: 0 !important;
  height: 54px !important;
  margin: 0 auto !important;
  border: 2px solid #171f7a !important;
  border-radius: 6px !important;
  background: #171f7a !important;
  color: #fff !important;
  font-family: var(--font-base) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer;
}
.SearchBox .btnSeach01 span,
.SearchBox .btnSeach span,
.SearchBox .btnSeach a span,
.SearchBox .forcia_search_air span,
.SearchBox .forcia_search_dp span {
  color: #fff !important;
  line-height: 1 !important;
}
.SearchBox .btnSeach01:hover,
.SearchBox .btnSeach:hover,
.SearchBox .btnSeach a:hover,
.SearchBox .forcia_search_air:hover,
.SearchBox .forcia_search_dp:hover {
  background: #243594 !important;
  opacity: 1;
}
.SearchBox p.btnSeach {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 18px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
}
.SearchBox #topMainArea p.btnSeach,
.SearchBox #kaigai_dp p.btnSeach {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 952px !important;
}
.SearchBox button.btnSeach,
.SearchBox button.btnSeach01,
.SearchBox p.btnSeach > a,
.SearchBox a.forcia_search_air,
.SearchBox a.forcia_search_dp {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: min(100%, 740px) !important;
  height: 54px !important;
  margin: 0 auto !important;
  border: 2px solid #171f7a !important;
  border-radius: 6px !important;
  background: #171f7a !important;
  color: #fff !important;
  font-family: var(--font-base) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
}
.SearchBox .linkList,
.SearchBox .tx10 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 12px 0 0;
  font-size: 12px;
}
.SearchBox .linkList a,
.SearchBox .tx10 a {
  color: #006be8;
  font-weight: 700;
  text-decoration: none;
}
.SearchBox .column2WrapA01,
.SearchBox .kaigaiTourWrap {
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  float: none !important;
}
.SearchBox .base_gadget,
.SearchBox .base_gadget_in,
.SearchBox .section3,
.SearchBox .noTab,
.SearchBox .content_wrap_dp {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}
.SearchBox .gadget_left_box,
.SearchBox .gadget_right_box {
  box-sizing: border-box;
  display: grid;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  gap: 10px;
  margin: 0 !important;
  float: none !important;
}
.SearchBox .select_radio_btn {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.SearchBox .select_radio_btn p,
.SearchBox .select_radio_btn label {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  margin: 0;
  white-space: nowrap;
}
.SearchBox .forcia_person,
.SearchBox .forcia_airperson .base_tr {
  display: grid;
  gap: 8px;
}
.SearchBox .forcia_airperson .base_tr {
  grid-template-columns: auto minmax(72px, 1fr);
  align-items: center;
}
.SearchBox .forcia_airperson .base_tr br { display: none; }
.SearchBox .forcia_airperson .base_tr select,
.SearchBox .base_w50p,
.SearchBox .w300,
.SearchBox .w135,
.SearchBox .customSelecta {
  width: 100% !important;
  max-width: none !important;
}
.SearchBox .forcia_different_days {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-weight: 700;
}
.SearchBox .forcia_different_days input {
  flex: 0 0 auto;
}
.SearchBox .forcia_different_days input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 6px 0 0 !important;
}
.SearchBox .base_line { display: none; }
.SearchBox .tx10 br + a,
.SearchBox .tx10 a + a { margin-left: 0; }*/
.SearchBanners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 900px;
  width: 100%;
  margin: 24px auto 0 !important;
  padding: 0;
  list-style: none;
}
.SearchBox + .SearchBanners {
  margin-top: 24px !important;
}
.SearchBanner {
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  width: 100%;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.SearchBanner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- buttons ---------- */
.MoreBtnWrap { text-align: center; margin-top: 28px; }
.MoreBtn {
  display: inline-block;
  min-width: 220px;
  padding: 14px 32px;
  background: var(--c-cyan);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--c-cyan-deep);
}

/* ---------- Hero ---------- */
.Section.Hero {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.HeroBlobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.HeroBlob { position: absolute; height: auto; }
.HeroBlob.cyan { top: -74.8%; left: -9.2%; display: block; width: 40.4%; }
.HeroBlob.pink { top: 50.9%; left: 56.7%; display: block; width: 56.1%; }
.HeroBlobShape {
  display: block;
  width: 100%;
  height: auto;
}
.HeroCyanTrail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.HeroCyanTrail path {
  fill: none;
  stroke: rgba(255, 255, 255, .86);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: .1 25;
}
.HeroCyanCar {
  position: absolute;
  z-index: 2;
  width: 9.8%;
  height: auto;
  left: 22%;
  top: 93.2%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-36deg);
  transform-origin: 50% 50%;
  animation: heroCyanCarDrive 7.2s linear infinite;
}
@keyframes heroCyanCarDrive {
  0% {
    left: 22%;
    top: 93.2%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-36deg) scale(.96);
  }
  6% {
    left: 22%;
    top: 93.2%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-36deg) scale(1);
  }
  14% {
    left: 25%;
    top: 88.4%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-28deg) scale(1);
  }
  22% {
    left: 29.7%;
    top: 84.5%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-11deg) scale(1);
  }
  30% {
    left: 35.7%;
    top: 81.9%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(5deg) scale(1);
  }
  38% {
    left: 42.9%;
    top: 80.1%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(17deg) scale(1);
  }
  46% {
    left: 50.5%;
    top: 79.1%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(21deg) scale(1);
  }
  54% {
    left: 57.9%;
    top: 78%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(18deg) scale(1);
  }
  62% {
    left: 65.3%;
    top: 76.6%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(16deg) scale(1);
  }
  70% {
    left: 72.6%;
    top: 75%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(9deg) scale(1);
  }
  78% {
    left: 79.2%;
    top: 72.7%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  87% {
    left: 84.9%;
    top: 69.9%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-15deg) scale(1);
  }
  96% {
    left: 88.6%;
    top: 66.2%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-25deg) scale(1);
  }
  100% {
    left: 88.6%;
    top: 66.2%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-25deg) scale(.96);
  }
}
.HeroPinkTrail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.HeroPinkTrail path {
  fill: none;
  stroke: #93dbe1;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: .1 27;
  opacity: .9;
}
.HeroPinkPlane {
  position: absolute;
  z-index: 2;
  width: 7.2%;
  height: auto;
  left: 77.6%;
  top: 7%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(3deg);
  transform-origin: 50% 50%;
  animation: heroPinkPlaneFlight 7.2s linear infinite;
}
@keyframes heroPinkPlaneFlight {
  0% {
    left: 77.6%;
    top: 7%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(3deg) scale(.96);
  }
  6% {
    left: 77.6%;
    top: 7%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(3deg) scale(1);
  }
  13% {
    left: 75.1%;
    top: 10.8%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(1deg) scale(1);
  }
  20% {
    left: 71.4%;
    top: 14.2%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(5deg) scale(1);
  }
  27% {
    left: 67.2%;
    top: 17.1%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(13deg) scale(1);
  }
  34% {
    left: 61.9%;
    top: 18.8%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(22deg) scale(1);
  }
  41% {
    left: 55.7%;
    top: 20.2%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(29deg) scale(1);
  }
  48% {
    left: 49%;
    top: 21%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(36deg) scale(1);
  }
  55% {
    left: 42.9%;
    top: 21.4%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(41deg) scale(1);
  }
  62% {
    left: 35.3%;
    top: 22%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
  }
  69% {
    left: 28.8%;
    top: 23.5%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
  }
  76% {
    left: 23.4%;
    top: 25.3%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(43deg) scale(1);
  }
  83% {
    left: 18.8%;
    top: 27.7%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(40deg) scale(1);
  }
  90% {
    left: 15.2%;
    top: 30%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(37deg) scale(1);
  }
  96% {
    left: 12.3%;
    top: 32.1%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(34deg) scale(1);
  }
  100% {
    left: 12.3%;
    top: 32.1%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(34deg) scale(.96);
  }
}
.HeroBg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.HeroPiece {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.HeroPiece--pc,
.HeroPiece--sp {
  z-index: 1;
}
.HeroPiece--deco {
  z-index: 2;
}
.HeroInner {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 4.3%;
  width: 43.4%;
  transform: translateX(-50%);
  text-align: center;
}
.HeroCatch {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 20px;
  font-weight: 700;
  color: #424242;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}
.HeroCatch::before,
.HeroCatch::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 59px;
  height: 8px;
  background: radial-gradient(circle, #f8c9cf 0 4px, transparent 4.5px) left center / 17px 8px repeat-x;
}
.HeroCatch::before { left: 45.5%; }
.HeroCatch::after { left: 76.1%; }
.HeroLogo {
  width: 56%;
  max-width: 100%;
  margin: 3.2% auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.HeroLogoImg { width: 210px; height: auto; }
.HeroProductName {
  display: block;
  box-sizing: border-box;
  width: 100%;
  background: var(--c-yellow);
  color: #010809;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.28;
  padding: 5px 10px;
  border-radius: 0;
  white-space: nowrap;
}
.HeroPoints { width: 59.5%; max-width: 100%; margin: 7.3% auto 0; }
.HeroPointsIcons { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; }
.HeroPoints .HeroPointsLabels {
  position: relative;
  display: block;
  width: 100%;
  height: 16px;
  max-width: none;
  margin: 6px auto 0;
  padding: 0;
}
.HeroPointsLabels li {
  position: absolute;
  top: 0;
  width: auto;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  color: #010809;
  white-space: nowrap;
  transform: translateX(-50%);
}
.HeroPointsLabels li:nth-child(1) { left: 8.04%; }
.HeroPointsLabels li:nth-child(2) { left: 36.01%; }
.HeroPointsLabels li:nth-child(3) { left: 64.14%; }
.HeroPointsLabels li:nth-child(4) { left: 92.67%; }

/* ---------- Theme nav (まずはここから / 5カード) ---------- */
.Section.ThemeNavWrap {
  position: relative;
  overflow: visible;
  background: #fff;
  padding: 10px 10px 10px;
}
.ThemeNavWrap .SectionInner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
}
.ThemeNavTitle {
  position: relative;
  z-index: 1;
  min-width: 100%;
  max-width: 373px;
  margin: 0 auto;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.592;
  letter-spacing: 0;
}
.ThemeNavTitle .hl {
  display: block;
  color: var(--c-cyan-dark);
}
.ThemeNavDeco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  height: auto;
}
.ThemeNavDeco--bus {
  top: -47px;
  left: calc(50% - 96px);
  width: 67px;
}
.ThemeNavDeco--flower {
  top: -63px;
  left: calc(50% + 34px);
  width: 65px;
}
.ThemeNavGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ThemeNavWrap .SectionContent {
  margin-top: 8px;
}
.ThemeNavWrap .ThemeNavGrid {
  padding: 16px 8px;
}
.ThemeNavCard a {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; text-align: left; height: 80px; min-height: 0; padding: 12px 8px 12px 16px;
  background: #fff; border: 2px solid var(--c-cyan); border-radius: 8px;
  font-weight: 500; font-size: 16px; line-height: normal; color: var(--c-text);
}
.ThemeNavCardText {
  display: block;
  font-weight: 500;
}
.ThemeNavCardLine {
  display: block;
}
.ThemeNavCardLine--small {
  font-size: 0.9em;
}
.ThemeNavChevron {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  position: relative;
}
.ThemeNavChevron::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--c-cyan);
  border-bottom: 2px solid var(--c-cyan);
  transform: translate(-50%, -70%) rotate(45deg);
}

.StickyLocalNav {
  box-sizing: border-box;
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff60;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-110%);
  transition: opacity .24s ease, transform .24s ease;
}
.StickyLocalNav.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.StickyLocalNavInner {
  box-sizing: border-box;
  background: #fff;
}
.StickyLocalNavList {
  box-sizing: border-box;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.StickyLocalNavItem {
  box-sizing: border-box;
  flex: 0 0 auto;
}
.StickyLocalNavItem a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  color: var(--c-text);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  background: #fff;
}
.StickyLocalNavItem a > span:first-child {
  white-space: nowrap;
}
.StickyLocalNavItem.is-active a {
  background: var(--c-yellow);
}
.StickyLocalNavChevron {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}
.StickyLocalNavChevron::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translate(-50%, -50%) rotate(45deg);
}
.StickyLocalNavDeparture {
  box-sizing: border-box;
  display: none;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.StickyLocalNavDeparture select {
  box-sizing: border-box;
  min-width: 160px;
  height: 64px;
  border: 2px solid #333;
  border-radius: 8px;
  background: #fff;
  color: var(--c-text);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  padding: 0 42px 0 18px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #df8558 50%),
    linear-gradient(135deg, #df8558 50%, transparent 50%);
  background-position:
    calc(100% - 24px) 50%,
    calc(100% - 16px) 50%;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}
#City,
#Trip,
#HotelRanking,
#ModelCourse,
#About {
  scroll-margin-top: 112px;
}

.FloatingSearchBtn {
  position: fixed;
  z-index: 4990;
  right: 28px;
  bottom: 132px;
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18));
  transition: transform .18s ease, filter .18s ease;
}
.FloatingSearchBtn:hover,
.FloatingSearchBtn:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .22));
}
.FloatingSearchBtn img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Feature (コース充実 / 写真バンド＋4カード) ---------- */
.Section.FeatureWrap {
  position: relative;
  overflow: hidden;
  background: var(--c-yellow);
  padding: 0 0 96px;
}
.Section.FeatureWrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -180px;
  width: 132vw;
  min-width: 620px;
  height: 260px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}
.FeatureHero {
  position: relative;
  overflow: hidden;
  background: #111;
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.FeatureHero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); }
.FeatureHeroSlides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.FeatureHeroSlide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.FeatureHeroSlide.is-active { opacity: 1; }
.FeatureMarkLogo {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 18px;
  width: 74px;
  height: auto;
  pointer-events: none;
}
.FeatureHeroInner { position: relative; z-index: 1; text-align: center; color: #fff; padding: 24px 16px; text-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
.FeatureHeroTitle { font-weight: 700; font-size: 22px; }
.FeatureHeroLogo { width: 300px; max-width: 82%; height: auto; margin-top: 10px; }
.FeatureFlightBand {
  position: relative;
  z-index: 1;
  height: 46px;
  overflow: hidden;
  background: var(--c-yellow);
  --flight-dot-size: 8px;
  --flight-dot-radius: 4px;
  --flight-dot-fade: 4.5px;
  --flight-dot-step: 29px;
}
.FeatureFlightBand::before,
.TripFlightBand::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--flight-dot-size);
  background: radial-gradient(circle, #f8c9cf 0 var(--flight-dot-radius), transparent var(--flight-dot-fade)) left center / var(--flight-dot-step) var(--flight-dot-size) repeat-x;
  opacity: .86;
  transform: translateY(-50%);
  pointer-events: none;
}
.FeatureFlightTrail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.FeatureFlightTrail path {
  display: none;
}
.FeatureFlightPlane {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -56px;
  width: 50px;
  height: auto;
  transform: translateY(-50%) rotate(-20deg);
  transform-origin: 50% 50%;
  animation: featureFlightPlane 11s linear infinite;
  pointer-events: none;
}
@keyframes featureFlightPlane {
  0% {
    left: -56px;
    opacity: 0;
    transform: translateY(-50%) rotate(-20deg) scale(.96);
  }
  6% {
    left: -56px;
    opacity: 1;
    transform: translateY(-50%) rotate(-20deg) scale(1);
  }
  94% {
    left: calc(100% + 56px);
    opacity: 1;
    transform: translateY(-50%) rotate(-20deg) scale(1);
  }
  100% {
    left: calc(100% + 56px);
    opacity: 0;
    transform: translateY(-50%) rotate(-20deg) scale(.96);
  }
}
/* 見出し */
.FeatureHeading {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: block;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.45;
  margin: 28px auto 0;
  padding: 0 90px;
}
.FeatureHeading::before,
.FeatureHeading::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 86px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--c-cyan) 0 4px, transparent 4.5px) center top / 9px 17px repeat-y;
  pointer-events: none;
}
.FeatureHeading::before {
  left: 0;
  transform: translateY(-50%) rotate(-22deg);
}
.FeatureHeading::after {
  right: 0;
  transform: translateY(-50%) rotate(22deg);
}
.FeatureWrap .SectionInner {
  position: relative;
  z-index: 1;
  padding-top: 28px;
}
/* 4カード */
.FeatureList {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 12px;
  margin: 0;
}
.FeatureItem { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.FeaturePhoto { position: relative; width: 150px; }
.FeaturePhoto img {
  box-sizing: border-box;
  display: block;
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  border: 7px solid #fff; box-shadow: none;
}
.FeatureCheck {
  position: absolute; top: 0; left: 0;
  width: 42px; height: 42px; border-radius: 50%; background: var(--c-cyan);
}
.FeatureCheck::after {
  content: ''; position: absolute; left: 50%; top: 48%;
  width: 16px; height: 8px; border-left: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.FeatureItem p {
  max-width: 260px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.7;
}
.FeatureItem b { font-weight: 700; }

/* ---------- Trip (今度の休みは / Figma版) ---------- */
.Section.TripWrap {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-left: 0;
  padding-right: 0;
}
.TripWrap::before,
.TripWrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}
.TripWrap::before {
  top: 210px;
  left: -190px;
  width: 360px;
  height: 360px;
  background: rgba(255, 210, 220, .22);
}
.TripWrap::after {
  display: none;
  right: -180px;
  top: 920px;
  width: 430px;
  height: 860px;
  background: rgba(0, 193, 211, .5);
}
.TripWrap > .SectionTitle,
.TripWrap > .SectionInner {
  position: relative;
  z-index: 1;
}
.TripHeaderDecos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.TripHeaderDeco {
  position: absolute;
  display: block;
  height: auto;
}
.TripWrap .SectionHeadingEng {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -34px;
  display: block;
  width: 598px;
  max-width: 84vw;
  margin: 0;
  color: var(--c-pink);
  opacity: .5;
  font-size: 96px;
  line-height: .8;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-6.15deg);
}
.TripHeaderDeco--left { top: 78px; left: 9%; width: 88px; }
.TripHeaderDeco--photo { display: none; }
.TripHeaderDeco--plane { display: none; }
.TripHeaderDeco--right { display: none; }
.TripHeaderDeco--person1 { top: 242px; left: 5%; width: 42px; height: 77px; }
.TripHeaderDeco--person2 { top: 250px; left: 14%; width: 38px; height: 69px; }
.TripWrap .SectionInner {
  max-width: none;
}
.TripWrap .SectionContent {
  position: relative;
  isolation: isolate;
  margin-top: 24px;
  --trip-tabs-bg-height: 292px;
}
.TripWrap .SectionContent::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 100vw;
  height: var(--trip-tabs-bg-height);
  transform: translateX(-50%);
  background-color: var(--c-yellow);
}
.TripFlightBand {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 46px;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
  --flight-dot-size: 8px;
  --flight-dot-radius: 4px;
  --flight-dot-fade: 4.5px;
  --flight-dot-step: 29px;
}
.TripFlightTrail {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.TripFlightTrail path {
  display: none;
}
.TripFlightPlane {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -56px;
  width: 50px;
  height: auto;
  transform: translateY(-50%) rotate(-20deg);
  transform-origin: 50% 50%;
  animation: tripFlightPlane 11s linear infinite;
  pointer-events: none;
}
@keyframes tripFlightPlane {
  0% {
    left: -56px;
    opacity: 0;
    transform: translateY(-50%) rotate(-20deg) scale(.96);
  }
  6% {
    left: -56px;
    opacity: 1;
    transform: translateY(-50%) rotate(-20deg) scale(1);
  }
  94% {
    left: calc(100% + 56px);
    opacity: 1;
    transform: translateY(-50%) rotate(-20deg) scale(1);
  }
  100% {
    left: calc(100% + 56px);
    opacity: 0;
    transform: translateY(-50%) rotate(-20deg) scale(.96);
  }
}
.App .TripTabs {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 24px;
  width: 100%;
  margin: 0 auto 48px;
  padding: 80px 48px 16px;
  overflow-x: auto;
  background: transparent;
}
.TripTab {
  min-width: 0;
}
.TripTab a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--c-text);
  text-decoration: none;
}
.TripTabPhoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.TripTabPhoto img {
  display: block;
  order: 2;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.TripBadge {
  order: 1;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--c-cyan);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 29px;
  font-weight: 400;
  line-height: .9;
  text-transform: uppercase;
}
.TripBadge b {
  display: block;
  font-family: var(--font-num);
  font-size: 64px;
  font-weight: 400;
  line-height: .9;
}
.TripTabLabel {
  min-height: 35px;
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}
.TripTabChevron {
  width: 21px;
  height: 21px;
  border-right: 3px solid #111;
  border-bottom: 3px solid #111;
  transform: rotate(45deg);
}
.TripFigmaStack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 72px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 42px;
}
.TripFigmaStack ~ .TripPanel {
  display: none !important;
}
.TripBlock {
  position: relative;
  z-index: 1;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.TripBlock::before,
.TripBlock::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.TripBlock > * {
  position: relative;
  z-index: 1;
}
#Trip01::before,
#Trip03::before,
#Trip05::before {
  top: 28px;
  left: -232px;
  width: 286px;
  height: 397px;
  background-image: url("../images/hero_bg_pink_clean.png");
  transform: rotate(180deg);
}
#Trip02::after,
#Trip04::after {
  top: 18px;
  right: -198px;
  width: 244px;
  height: 401px;
  background-image: url("../images/hero_bg_cyan_clean.png");
  transform: rotate(180deg);
}
.TripBlockFlight {
  position: absolute;
  z-index: 1;
  width: 286px;
  height: 397px;
  pointer-events: none;
}
.TripBlockHead,
.TripBlockBody,
.TripAreaBar {
  position: relative;
  z-index: 2;
}
.TripBlockFlight--pink {
  top: 28px;
  left: -232px;
  --trip-flight-shift-x: -16px;
}
.TripBlockFlight--cyan {
  top: 18px;
  right: -198px;
  width: 244px;
  height: 401px;
  --trip-flight-shift-x: 24px;
}
.TripBlockFlightTrail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateX(var(--trip-flight-shift-x, 0px));
}
.TripBlockFlightTrail path {
  fill: none;
  stroke: #f6b8c5;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: .1 30;
}
.TripBlockFlight--cyan .TripBlockFlightTrail path {
  stroke: #9bdce1;
}
.TripBlockFlightOrbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 27px;
  animation: tripBlockFlightPathSwap 28s linear infinite;
  offset-anchor: 50% 50%;
  offset-distance: 0%;
  offset-rotate: auto 0deg;
  opacity: 1;
  transform: translateX(var(--trip-flight-shift-x, 0px)) translateZ(0);
  will-change: offset-distance, opacity;
}
.TripBlockFlight--pink .TripBlockFlightOrbit {
  offset-path: path("M 133.7 31.9 C 185 31 248.5 42.2 261.5 74.8 C 272.7 108.4 236.3 130.8 213.9 155.1 C 189.7 180.3 208.3 210.2 239.1 236.3 C 270.9 269 209.3 290.4 140.2 303.5 C 98.2 311.9 84.2 334.3 74.9 365.1");
}
.TripBlockFlight--cyan .TripBlockFlightOrbit {
  offset-path: path("M 179.9 32 C 170.5 74 149.1 86.2 113.6 96.4 C 73.5 104.8 42.7 126.3 36.1 145.9 C 27.7 176.7 66.9 195.4 66.9 215 C 67.9 246.7 37.1 269.1 24.9 291.5 C 9.1 327.9 28.7 356.8 62.3 373.6 C 90.3 383 137.9 381.1 174.3 381.1");
}
.TripBlockFlightOrbit--delay {
  animation-delay: -14s;
}
.TripBlockFlightPlane {
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(0);
  will-change: transform;
}
@keyframes tripBlockFlightPath {
  to { offset-distance: 100%; }
}
@keyframes tripBlockFlightPathSwap {
  0% {
    offset-distance: 0%;
    opacity: 1;
  }
  49.9% {
    offset-distance: 100%;
    opacity: 1;
  }
  50% {
    offset-distance: 100%;
    opacity: 0;
  }
  50.01%,
  100% {
    offset-distance: 0%;
    opacity: 0;
  }
}
.TripBlockHead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  background: transparent;
}
.TripBlockBadge {
  grid-row: span 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--c-cyan);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-weight: 400;
  line-height: .9;
  transform: translateY(-12px);
}
.TripBlockBadge span {
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
}
.TripBlockBadge b {
  font-size: 52px;
  font-weight: 400;
}
.TripBlockTitle h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
}
.TripBlockTitle p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.TripDepartureSelect {
  box-sizing: border-box;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--c-yellow);
  border-radius: 6px;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.TripDepartureSelect select,
.TripAreaControl select {
  box-sizing: border-box;
  height: 34px;
  min-width: 128px;
  padding: 0 34px 0 14px;
  border: 1px solid #7e7e7e;
  border-radius: 5px;
  background: #fff;
  color: #111;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #d98f5c 50%),
    linear-gradient(135deg, #d98f5c 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.TripBlockBody {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
  padding: 20px 14px 16px;
  background: #fff;
  border-radius: 8px 8px 0 0;
}
.App .TripMainPhoto {
  display: block;
  width: 100%;
  aspect-ratio: 556 / 300;
  object-fit: cover;
  border-radius: 7px;
}
.TripProducts {
  overflow: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.TripProducts::-webkit-scrollbar {
  display: none;
}
.TripProductsTrack {
  display: flex;
  height: 100%;
}
.TripProductsTrack[hidden] {
  display: none;
}
.TripProductSlide {
  box-sizing: border-box;
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.TripProductCard {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e3d6;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1.45;
}
.TripProductRibbon {
  display: block;
  height: 20px;
  background: #ffd900;
  padding: 0 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
}
.TripProductRoute {
  min-height: 25px;
  margin: 0;
  padding: 7px 10px;
  background: #f0f0f0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.TripProductEscort {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px 7px;
}
.TripProductEscortIcon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #98cb78;
padding: 2px;
}
/*.TripProductEscortIcon::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 5px auto 0;
  border: 2px solid #fff;
  border-radius: 50%;
}
.TripProductEscortIcon::after {
  content: "+";
  position: absolute;
  left: 22px;
  top: 21px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}*/
.TripProductEscort p {
  margin: 0;
  min-width: 0;
  color: #555;
  font-size: 11px;
  line-height: 1.25;
}
.TripProductEscort b,
.TripProductEscort span {
  display: block;
}
.TripProductEscort b {
  color: #333;
  font-size: 12px;
}
.TripProductAirport {
  align-self: start;
  padding: 3px 5px;
  border-radius: 3px;
  background: #a55252;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.TripProductCard img {
  display: block;
  width: calc(100% - 18px);
  margin: 0 9px;
  height: 86px;
  object-fit: cover;
}
.TripProductHotel {
  margin: 8px 9px 0;
  padding: 9px 10px;
  background: #f8f2e7;
}
.TripProductHotel h4,
.TripProductCard h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.TripProductHotel p {
  margin: 6px 0 0;
  color: #555;
  font-size: 12px;
  line-height: 1.55;
}
.TripProductText {
  margin: 4px 8px 0;
  color: #555;
  line-height: 1.45;
}
.TripProductPeriod {
  margin: 8px 0 0;
  padding: 7px 8px;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  color: #777;
  font-size: 9px;
  text-align: center;
}
.TripProductPrice {
  margin: 7px 8px 0;
  color: #e6244d;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.TripProductNote {
  margin: 2px 8px 8px;
  color: #999;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.TripAreaBar {
  margin-top: 0;
  padding: 12px 14px 14px;
  background: var(--c-yellow);
  border-radius: 0 0 8px 8px;
}
.TripAreaControl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.TripAreaFlower {
  position: relative;
  padding-left: 34px;
  font-weight: 700;
  font-size: 13px;
}
.TripAreaFlower::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  background: url("../images/theme_deco_flower.png") center / contain no-repeat;
  transform: translateY(-50%) rotate(-15deg);
}
.TripAreaControl button,
.TripAreaArrow {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-cyan);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-family: var(--font-base);
  font-weight: 700;
  cursor: pointer;
}
.TripAreaArrow {
  position: relative;
}
.TripAreaCurrent {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  height: 48px;
  padding: 6px 18px 5px;
  border: 1px solid var(--c-cyan);
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.TripAreaCurrentText {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.TripAreaDots {
  display: inline-flex;
  gap: 4px;
  margin-top: 5px;
}
.TripAreaDots button {
  position: relative;
  display: block;
  width: 5px;
  height: 5px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d9d9d9;
  color: inherit;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
.TripAreaDots button.is-active {
  background: var(--c-cyan);
}
.TripAreaControl .TripAreaAutoplay {
  box-sizing: border-box;
  position: absolute;
  right: 8px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 9px, transparent 9.5px),
    conic-gradient(var(--c-pink) calc(var(--trip-city-progress, 0) * 1turn), #dfe9eb 0);
  cursor: pointer;
  transform: translateY(-50%);
}
.TripAreaArrow::after,
.TripAreaDots button::after,
.TripAreaControl .TripAreaAutoplay::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 5;
  padding: 5px 8px;
  border-radius: 4px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .15s ease;
}
.TripAreaArrow:hover::after,
.TripAreaArrow:focus-visible::after,
.TripAreaDots button:hover::after,
.TripAreaDots button:focus-visible::after,
.TripAreaControl .TripAreaAutoplay:hover::after,
.TripAreaControl .TripAreaAutoplay:focus-visible::after {
  opacity: 1;
}
.TripAreaControl .TripAreaAutoplay:not(.is-paused):hover::after {
  content: "一時停止中...";
}
.TripAreaAutoplayIcon {
  box-sizing: border-box;
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 0;
  border: 0;
  border-left: 3px solid var(--c-cyan);
  border-right: 3px solid var(--c-cyan);
}
.TripAreaAutoplay.is-paused {
  background:
    radial-gradient(circle, #fff 0 9px, transparent 9.5px),
    conic-gradient(#dfe9eb 1turn, #dfe9eb 0);
}
.TripAreaAutoplay.is-paused .TripAreaAutoplayIcon {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--c-cyan);
  border-right: 0;
}
.App .TripAreaBar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 10px;
}
.TripAreaBar li {
  box-sizing: border-box;
  min-width: 90px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.TripAreaBar li button {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #111;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: center;
  cursor: pointer;
}
.TripAreaBar li.is-active {
  background: var(--c-pink);
}
.TripAreaBar li.is-active button {
  border-color: #e4a8bb;
}
/* ---------- Popular Cities ---------- */
.Section.CityWrap { position: relative; overflow: hidden; background: #fff; padding: 68px 0 80px; }
.Section.CityWrap::before { content: ''; position: absolute; width: 285px; height: 285px; border-radius: 50%; background: rgba(255, 210, 220, .18); top: 29px; left: -128px; z-index: 0; }
.Section.CityWrap::after { content: ''; position: absolute; width: 276px; height: 276px; border-radius: 50%; background: rgba(0, 193, 211, .08); bottom: 92px; right: -88px; z-index: 0; }
.CityDeco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.CityCircleFlight {
  position: absolute;
  z-index: 1;
  width: 285px;
  height: 285px;
  border-radius: 50%;
  pointer-events: none;
}
.CityCircleFlight--pink {
  top: 29px;
  left: -128px;
}
.CityCircleFlight--cyan {
  right: -88px;
  bottom: 92px;
  width: 276px;
  height: 276px;
}
.CityCircleFlightOrbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: cityCircleFlightOrbit 16s linear infinite;
  transform-origin: 50% 50%;
}
.CityCircleFlightOrbit--clockwise {
  animation-name: cityCircleFlightOrbitClockwise;
}
.CityCircleFlightOrbit--delay {
  animation-delay: -8s;
}
.CityCircleFlightPlane {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 36px;
  height: auto;
  transform: translateX(-50%) rotate(180deg);
  transform-origin: 50% 50%;
}
.CityCircleFlightOrbit--clockwise .CityCircleFlightPlane {
  transform: translateX(-50%) rotate(0deg);
}
@keyframes cityCircleFlightOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes cityCircleFlightOrbitClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.CityScript {
  position: absolute; top: 29px; left: 40%; transform: translateX(34px) rotate(-6.15deg);
  font-family: var(--font-eng); font-weight: 700; line-height: .72; white-space: nowrap;
}
.CityScriptPopular { display: block; color: var(--c-pink); opacity: .2; font-size: 58px; }
.CityScriptCities { display: block; color: var(--c-cyan); opacity: .5; font-size: 47px; margin-left: 78px; }
.CityDecoImg { position: absolute; height: auto; }
.CityDecoImg--tower { width: 62px; top: 59px; left: 20px; }
.CityDecoImg--person { width: 60px; top: 252px; right: 36px; transform: rotate(10.83deg); }
.CityHeading { position: relative; z-index: 1; text-align: center; font-weight: 700; font-size: 36px; line-height: 52px; margin: 56px auto 32px; }
.CityWrap .SectionInner { position: relative; z-index: 1; }
.CityWrap .SectionContent { margin-top: 24px; }
.CitySubHeading {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 auto 16px;
  max-width: 343px;
  padding: 8px 16px;
  text-align: center;
}
.CitySubHeading--other { margin-top: 0; }
.CityGrid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: 112px;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 5px 26px 10px !important;
  scroll-snap-type: x proximity;
}
.CityGrid::-webkit-scrollbar { display: none; }
.CityTile { box-sizing: border-box; padding: 8px; }
.CityTile a { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; box-shadow: none; }
.CityTile a::before { display: none; }
.CityTile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.CityTile small {
  font-size: 70%;
  color: #999;
  display: block;
  text-align: right;
}
.CityName {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px; line-height: normal; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.CityOtherList { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; max-width: 343px; margin: 0 auto; padding: 8px; position: relative; z-index: 1; }
.CityChip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 105px;
  min-height: 36px;
  background: #fff;
  border: 0;
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--c-pink);
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.CityChip a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 1px solid #333;
  border-radius: inherit;
  padding: 8px 6px;
  color: inherit;
  text-decoration: none;
}

/* ---------- Article grid (model course / hotel ranking / recommend) ---------- */
.Section.ModelCourseWrap { background: var(--c-yellow); }
.ArticleLogoWrap { text-align: center; margin-top: 2px; }
.TripaLogo { width: 120px; height: auto; }
.ArticleGrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ArticleCard { position: relative; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 6px rgba(0, 0, 0, .15); }
.ArticleCard > a { display: block; color: inherit; }
.ArticleCard img { width: 100%; aspect-ratio: 512 / 298; object-fit: cover; display: block; }
.ArticleCard .SkeletonImg { min-height: 130px; border-radius: 0; }
.ArticleTitle { font-size: 13px; font-weight: 700; line-height: 1.5; padding: 10px 12px 0; }
.ArticleMeta { font-size: 12px; color: var(--c-text-sub); padding: 4px 12px 0; }
.ArticleLink { display: inline-block; color: var(--c-cyan-dark); font-weight: 700; padding: 6px 12px 12px; font-size: 13px; }
.RankNo {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  width: 32px; height: 32px; line-height: 32px; text-align: center;
  background: var(--c-cyan); color: #fff; font-family: var(--font-num); font-size: 20px; border-radius: 50%;
}
/* ページャ（矢印＋ドット） */
.ArticlePager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.ArticlePagerArrow { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ArticlePagerArrow.prev { background: #eee; color: #999; border: 1px solid var(--c-border); }
.ArticlePagerArrow.next { background: #fff; color: var(--c-cyan); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.ArticleDots { display: flex; gap: 12px; align-items: center; }
.ArticleDots i { width: 6px; height: 6px; border-radius: 50%; background: #ccc; display: block; }
.ArticleDots i.is-active { background: #999; width: 8px; height: 8px; }
/* Hotel Ranking（バナー型カード） */
.Section.HotelRankingWrap { background: #fff; }
.SectionHeadingEng.pink { color: #F4A6C0; }
.ArticleFoot { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 12px; }
.ArticleFoot .ArticleMeta, .ArticleFoot .ArticleLink { padding: 0; }
.HotelRankGrid .ArticleTitle { padding-bottom: 12px; }
/* おすすめホテルランキングは 400x300 バナー画像をそのまま表示（クロップしない） */
.HotelRankGrid .ArticleCard img { aspect-ratio: 4 / 3; }
/* バナーは元画像が 400px のため、カード(li)を最大 400px で固定して引き伸ばしを防ぐ
   （PCグリッド・SP横スクロールカルーセルの両方で有効。PCの2カラム上限400px＋中央寄せは app-pc.css 側） */
.HotelRankGrid .ArticleCard { max-width: 400px; }

/* ---------- About (Point / TASKAL / FAQ / Flow) ---------- */
.Section.AboutWrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--c-yellow) 0 164px, #fff 164px);
}
.Section.AboutWrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 70px;
  width: 1540px;
  max-width: none;
  min-width: 118vw;
  height: 310px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}
.AboutWrap .SectionInner {
  position: relative;
  z-index: 1;
  max-width: 1273px;
}
.AboutWrap .SectionTitle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  overflow: visible;
}
.AboutTitleScript {
  position: static;
  z-index: auto;
  display: flex;
  align-items: baseline;
  gap: .16em;
  color: var(--c-cyan);
  font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  font-size: 82px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  opacity: .24;
  white-space: nowrap;
  pointer-events: none;
}
.AboutTitleMain {
  display: block;
}
.AboutTitleScript span:first-child {
  color: var(--c-pink);
}
.AboutWrap .SectionInner::before {
  content: "";
  position: absolute;
  display: none;
  pointer-events: none;
}
.AboutDecoBalloon {
  position: absolute;
  z-index: 1;
  width: 92px;
  height: auto;
  pointer-events: none;
}
/* ページ内ナビ（pink帯＋白カード） */
.AboutNav { background: var(--c-pink); border-radius: 28px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-content: center; align-items: stretch; margin: 0 auto 32px; list-style: none; }
.AboutNav li { min-width: 0; }
.NavCard { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center; background: #fff; border-radius: 22px; padding: 16px 12px; font-weight: 700; line-height: 1.35; color: #111; transition: transform .15s ease, box-shadow .15s ease; }
.NavCard:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.NavCardImg { display: flex; align-items: center; justify-content: center; height: 96px; }
.NavCardImg img { height: 100%; width: auto; display: block; }
.NavCardTtl { font-size: 15px; }
.NavCardTtlSm { display: block; font-size: 12px; font-weight: 700; }
.NavCardChev { margin-top: auto; padding-top: 6px; }
.NavCardChev img { width: 22px; height: auto; display: block; }
.AboutPointIntro {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 794px;
  min-height: 130px;
  margin: 48px auto;
  padding: 22px 34px;
  border: 2px solid #000;
  border-radius: 14px;
  background: #fff;
  box-shadow: 14px 14px 0 var(--c-cyan);
}
.AboutPointIntroLogo {
  flex: 0 0 auto;
  display: block;
  width: 104px;
}
.AboutPointIntroLogo img {
  display: block;
  width: 100%;
  height: auto;
}
.AboutPointIntroText {
  margin: 0;
  color: #000;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
.SupportHeading {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 778px);
  min-height: 158px;
  margin: 36px auto 28px;
  padding: 22px;
  border: 3px solid #000;
  border-radius: 16px;
  background: #fff;
  box-shadow: 10px 10px 0 var(--c-cyan);
}
.SupportHeadingText {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  color: #000;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0;
}
.SupportHeadingText span,
.SupportHeadingText strong {
  display: block;
  color: #000;
}
.SupportHeadingText span:first-child {
  font-size: clamp(22px, 7vw, 32px);
}
.SupportHeadingText strong {
  font-size: clamp(34px, 12vw, 46px);
}
.SupportHeadingText span:last-child {
  font-size: clamp(34px, 12vw, 46px);
}
.SupportHeadingChar {
  position: absolute;
  z-index: 2;
  right: -22px;
  bottom: -34px;
  width: 86px;
  pointer-events: none;
}
.SupportHeadingChar img {
  display: block;
  width: 100%;
  height: auto;
}

.TaskalIntro {
  box-sizing: border-box;
  width: min(100%, 1198px);
  margin: 34px auto 54px;
  padding: 28px 18px;
  border-radius: 24px;
  background: var(--c-yellow);
}
.TaskalIntroMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.TaskalIntroDevice {
  display: block;
  width: min(100%, 365px);
  height: auto;
}
.TaskalIntroText {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
}
.TaskalIntroText span {
  display: block;
}
.TaskalIntroNotes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.SupportExamplesHtml {
  position: relative;
  width: 100vw;
  max-width: 1440px;
  margin: 36px 50% 54px;
  transform: translateX(-50%);
  color: #000;
}
.SupportStage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 36px 16px 48px;
}
.SupportStage + .SupportStage {
  margin-top: 42px;
}
.SupportSidePill {
  position: absolute;
  top: 13px;
  width: 84px;
  height: 72px;
  background: var(--c-yellow);
  pointer-events: none;
}
.SupportSidePill--left {
  left: 0;
  border-radius: 0 999px 999px 0;
}
.SupportSidePill--right {
  right: 0;
  border-radius: 999px 0 0 999px;
}
.SupportExamplesInner {
  position: relative;
  z-index: 1;
  width: min(100%, 1038px);
  margin: 0 auto;
}
.SupportExamplesKicker {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
.SupportStageHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  text-align: center;
}
.SupportStageHead h3 {
  margin: 0;
  color: var(--c-cyan);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
}
.SupportStageHead p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}
.SupportCaseGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}
.SupportCase {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.SupportQuestion {
  position: relative;
  width: min(100%, 333px);
  height: 382px;
}
.SupportQuestionCircle {
  position: absolute;
  left: 0;
  right: 0;
  top: 49px;
  height: 333px;
  border-radius: 50%;
  background: #f1f1f1;
}
.SupportQuestionBadge {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 109px;
  height: 109px;
  border-radius: 50%;
  background: var(--c-pink);
  color: #000;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
}
.SupportQuestion p {
  position: absolute;
  z-index: 3;
  top: 121px;
  left: 50%;
  width: 258px;
  margin: 0;
  color: var(--c-navy);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
}
.SupportQuestionImg {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.SupportQuestionImg--dep1 { left: 50px; top: 226px; width: 231px; }
.SupportQuestionImg--dep2 { left: 14px; top: 75px; width: 305px; }
.SupportQuestionImg--dep3 { left: 92px; top: 286px; width: 150px; }
.SupportQuestionImg--trip1 { left: 128px; top: 222px; width: 79px; }
.SupportQuestionImg--trip2 { left: 89px; top: 267px; width: 146px; }
.SupportQuestionImg--trip3 { left: 41px; top: 266px; width: 252px; }
.SupportQuestionImg--ret1 { left: 86px; top: 271px; width: 160px; }
.SupportDown {
  display: block;
  width: 16px;
  height: 16px;
  margin: 10px 0;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(45deg);
}
.SupportAnswer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 138px;
  padding: 8px;
  box-sizing: border-box;
}
.SupportAnswerPhone {
  flex: 0 0 auto;
  width: 68px;
  height: 136px;
  object-fit: contain;
}
.SupportAnswerOperator {
  flex: 0 0 auto;
  width: 92px;
  height: 122px;
  object-fit: contain;
  object-position: bottom;
}
.SupportAnswer p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.SupportAnswer span {
  font-size: 17px;
}
.SupportAnswer strong {
  font-size: 26px;
  font-weight: 900;
  color: #000;
}
.SupportMoreDetails {
  width: min(100%, 1038px);
  margin: 38px auto 0;
}
.SupportMoreLink {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 74px;
  margin: 0;
  padding: 18px 24px;
  border-radius: 16px;
  background: var(--c-pink);
  color: #000;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}
.SupportMoreLink::-webkit-details-marker {
  display: none;
}
.SupportMoreLink::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}
.SupportMoreDetails[open] .SupportMoreLink::after {
  transform: rotate(-135deg) translate(-2px, -1px);
}
.SupportMoreBody {
  box-sizing: border-box;
  background: #f1f1f1;
  padding: 28px 32px;
}
.SupportMoreList {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  list-style: none;
}
.SupportMoreList li {
  position: relative;
  padding-left: 1.15em;
}
.SupportMoreList li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
}
.SupportAfterGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  justify-items: center;
}
.SupportScreen {
  width: min(100%, 507px);
}
.SupportScreen p {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
}
.SupportScreen img {
  display: block;
  width: 100%;
  height: auto;
}
.SupportAfterNote {
  margin: 16px 0 0;
  padding: 0 16px;
  font-size: 11px;
  line-height: 1.55;
}

/* DPパックとは：イラスト主体ブロックは Figma 書き出し画像（PC/SP出し分け）。
   モバイル基準＝SP版画像をフル幅で。PC幅・スケール調整は app-pc.css 側。 */
.AboutFig { display: block; width: 100%; margin: 0 auto 18px; }
.AboutFig img { display: block; width: 100%; height: auto; margin: 0 auto; }

/* ============================================================
   DPパックとは：3つのPOINT（実HTML/CSS。テキストはHTML、イラストのみ画像）
   ============================================================ */
.Pt { box-sizing: border-box; position: relative; background: var(--c-yellow); border-radius: 24px; padding: 26px 16px; margin: 24px 0; overflow: visible; }
/* 見出し：シアン丸バッジ＋タイトル */
.PtHead { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.PtBadge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; background: var(--c-cyan); color: #fff; border-radius: 50%; padding: 0; font-family: var(--font-num); font-weight: 400; line-height: 1; box-shadow: none; }
.PtBadgeP { font-size: 17px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.PtBadgeN { font-size: 38px; font-weight: 400; line-height: .85; }
.PtTitle { font-size: 19px; font-weight: 700; line-height: 1.4; color: #000; }
/* 白い本文ボックス */
.PtBox { position: relative; z-index: 2; background: #fff; border-radius: 0; padding: 20px 16px; }

/* POINT1：悩み→解決 */
.PtQa { position: relative; z-index: 1; padding: 16px 0; }
.PtQa + .PtQa { border-top: 1px solid #eee; }
.PtQ { display: flex; align-items: flex-start; gap: 12px; color: var(--c-navy); font-weight: 700; font-size: 15px; line-height: 1.55; }
.PtQMark { flex: 0 0 auto; width: 32px; height: 32px; border: 2px solid var(--c-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; color: var(--c-cyan); }
.PtSol { position: relative; background: var(--c-pink); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.PtSol::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 18px solid var(--c-pink);
  transform: translateX(-50%);
}
.PtSol p { font-weight: 700; line-height: 1.6; }
.PtNote { font-size: 12px; color: var(--c-text-sub); margin-top: 8px; line-height: 1.6; }
.PtNote--center { text-align: center; }

/* POINT2：導入＋例えば円＋TASKAL＋さらに */
.PtLead { color: var(--c-navy); font-weight: 700; font-size: 15px; line-height: 1.6; margin-bottom: 25px; }
.PtCircles { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 auto 22px; max-width: 290px; list-style: none; padding: 0; }
.PtCircle { position: relative; aspect-ratio: 1 / 1; background: #F1F1F1; border-radius: 50%; text-align: center; overflow: hidden; }
.PtCircleBadge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; background: var(--c-pink); color: #000; font-size: 11px; font-weight: 700; line-height: 1.25; display: flex; align-items: center; justify-content: center; z-index: 3; }
.PtCircleQ { position: absolute; top: 74px; left: 0; right: 0; z-index: 3; color: var(--c-navy); font-weight: 700; font-size: 13px; line-height: 1.45; padding: 0 24px; }
.PtCircleImg { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: auto; max-width: 78%; height: 46%; object-fit: contain; object-position: bottom; z-index: 1; }
.PtCircleImg--c1 { height: 50%; max-width: 86%; }
.PtCircleImg--c2 { height: 50%; }
.PtCircleImg--c3 { height: 40%; }

/* TASKAL コールアウト（ピンク枠） */
.PtTaskal { display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--c-pink); border-radius: 16px; padding: 20px 16px; text-align: center; }
.PtTaskalPhone img { width: 92px; height: auto; display: block; }
.PtTaskalHead { font-weight: 700; }
.PtTaskalLead { font-weight: 700; line-height: 1.55; }
.PtTaskalName { color: var(--c-cyan-deep); font-size: 1.15em; }
.PtTaskalBody { background: #fff; border-radius: 12px; padding: 14px 16px; text-align: left; font-size: 13px; line-height: 1.75; }
.PtTaskalLink { margin-top: 6px; font-size: 12px; }
.PtTaskalLink a { color: var(--c-text); text-decoration: underline; }

/* さらに */
.PtFurther { margin-top: 22px; text-align: center; }
.PtFurtherHead { font-weight: 700; font-size: 18px; color: var(--c-navy); margin-bottom: 10px; }
.PtFurtherBox { background: var(--c-pink); border-radius: 16px; padding: 16px 18px; font-weight: 700; line-height: 1.6; }
.PtFurther .PtNote { margin-top: 10px; }

/* POINT3 */
.PtP3Para { color: var(--c-navy); font-weight: 700; font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.PtP3Decs { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-top: 14px; }
.PtP3Dec { height: auto; }
.PtP3Dec--woman { width: 58%; max-width: 250px; }
.PtP3Dec--new { width: 38%; max-width: 170px; }
.PtP3Dec--cal { display: none; }

/* 装飾（絶対配置）。本文ボックス内の装飾は「白背景の上・テキストの下」、
   ハートは白ボックスの背面に置く（z-index 制御）。 */
.PtDec { position: absolute; pointer-events: none; }
.PtDec img { display: block; width: 100%; height: auto; }
.PtBox > .PtDec { z-index: 0; }
.Pt > .PtDec--p2heart { z-index: 1; }
/* モバイル：主要装飾のみ控えめに表示 */
.PtDec--p1planes { display: block; width: 88px; top: 2px; right: 10px; }
.PtDec--p2heart  { display: block; width: 92px; top: 0; right: 4px; }
.PtDec--p1person, .PtDec--p1devices, .PtDec--p1kayak { display: none; }

/* About イラスト（旧CSS実装。現在は画像化のため未使用だが他参照に備え残置） */
.TroubleCard .TroubleCharImg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); max-width: 88%; max-height: 52%; width: auto; height: auto; margin: 0; }
.TaskalBox .TaskalPhone { width: 100%; max-width: 140px; height: auto; }
.PointBody .Point3Img { display: block; max-width: 340px; width: 72%; height: auto; margin: 16px auto 0; }
.SupportQ .SupportCharImg { display: block; height: 92px; width: auto; max-width: 100%; margin: 6px auto 0; object-fit: contain; }
.SupportSection .SupportScreenImg { display: block; width: 100%; max-width: 280px; height: auto; margin: 8px auto; }

/* Point ブロック（淡黄＋POINT円バッジ＋白カード本文） */
.PointBlock { background: var(--c-yellow); border-radius: 24px; padding: 26px 18px; margin-bottom: 28px; }
.PointHead { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.PointBadge { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; background: var(--c-cyan); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.PointBadge b { font-family: var(--font-num); font-size: 34px; font-weight: 400; }
.PointTitle { font-size: 20px; font-weight: 700; flex: 1 1 auto; line-height: 1.4; }
.PointBody { background: #fff; border-radius: 16px; padding: 20px 16px; }
.PointBody > p { margin: 0 0 12px; }
.PointTrouble {
  position: relative; background: #fff; border: 2px solid var(--c-navy); color: var(--c-navy);
  border-radius: 14px; padding: 14px 16px 14px 54px; margin: 12px 0; font-weight: 700;
}
.PointTrouble::before {
  content: "?"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%) rotate(-15deg);
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.PointSolution {
  position: relative; background: var(--c-pink); color: #2F2E41;
  border-radius: 14px; padding: 14px 16px 14px 54px; margin: 12px 0;
}
.PointSolution::before {
  content: "✓"; position: absolute; left: 12px; top: 16px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-cyan); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.PointPair { margin-bottom: 18px; }
.PointPair:last-child { margin-bottom: 0; }
.PointSolution > p { margin: 0; }
.PointSolution > p + p { margin-top: 8px; }
.PointSolutionNote { font-size: 13px; color: #555; }
/* 「例えばこんな時に」円形カード */
.TroubleCards { display: grid; grid-template-columns: 1fr; gap: 30px; margin: 22px 0; list-style: none; padding: 0; justify-items: center; }
.TroubleCard { position: relative; width: 240px; max-width: 100%; aspect-ratio: 1 / 1; background: #F1F1F1; border-radius: 50%; overflow: hidden; margin-top: 34px; display: flex; flex-direction: column; align-items: center; padding: 46px 24px 0; text-align: center; }
.TroubleCardLabel { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 74px; height: 74px; border-radius: 50%; background: var(--c-pink); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1.25; margin: 0; }
.TroubleCard p { font-weight: 700; color: var(--c-navy); font-size: 14px; line-height: 1.55; }
/* TASKAL パネル（スマホ左／本文右の2カラム） */
.TaskalBox { background: var(--c-pink); border-radius: 16px; padding: 22px; margin: 18px 0; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.TaskalLeft { flex: 0 0 auto; }
.TaskalRight { flex: 1 1 auto; }
.TaskalCallout { background: #fff; border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.TaskalHead { font-weight: 900; font-size: 20px; text-align: center; color: var(--c-pink-deep); }
.TaskalLead { font-weight: 700; text-align: center; color: var(--c-cyan-deep); margin: 6px 0 0; }
.TaskalName { font-size: 1.35em; }
.TaskalLink { font-size: 13px; margin-top: 10px; text-align: center; }
.TaskalLink a { color: var(--c-cyan-dark); text-decoration: underline; }
.TaskalExtra { background: #fff; border: 2px solid var(--c-pink); border-radius: 14px; padding: 16px; margin-top: 14px; text-align: center; }
.TaskalExtraHead { display: inline-block; background: var(--c-pink-deep); color: #fff; border-radius: 999px; padding: 4px 18px; font-weight: 700; margin-bottom: 10px; }
.TaskalDetail { margin-top: 14px; font-size: 14px; }
/* サポートサービスの一例（カテゴリ縦積み／各カテゴリ内は横並びQ&A） */
.SupportSection { margin-top: 28px; }
.SupportTitle { font-weight: 700; font-size: 18px; margin-bottom: 8px; text-align: center; }
.SupportCat { margin-top: 36px; }
.SupportCatHead { color: var(--c-cyan-dark); font-weight: 900; font-size: 28px; text-align: center; }
.SupportCatSub { font-weight: 700; text-align: center; margin: 6px 0 26px; }
.SupportRow { display: grid; grid-template-columns: 1fr; gap: 30px; justify-items: center; }
.SupportItem { display: flex; flex-direction: column; align-items: center; max-width: 280px; }
.SupportCircle {
  position: relative; width: 240px; max-width: 100%; aspect-ratio: 1 / 1;
  background: #F1F1F1; border-radius: 50%; margin-top: 34px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding: 46px 24px 0; text-align: center;
}
.SupportCircleLabel {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 74px; border-radius: 50%; background: var(--c-pink);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1.25;
}
.SupportQText { font-weight: 700; color: var(--c-navy); font-size: 14px; line-height: 1.55; }
.SupportCircleImg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); max-width: 88%; max-height: 52%; width: auto; height: auto; }
.SupportChev { width: 14px; height: 14px; border-right: 3px solid var(--c-cyan); border-bottom: 3px solid var(--c-cyan); transform: rotate(45deg); margin: 16px 0; }
.SupportAns { font-size: 14px; line-height: 1.7; text-align: center; }
.SupportAns b { font-weight: 700; font-size: 1.18em; }
.SupportRetScreen { text-align: center; }
.SupportScreenCap { font-weight: 700; margin-bottom: 8px; }
.SupportScreenImg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }

/* FAQ（見出しカード＋淡黄パネル＋アコーディオン） */
.FaqHeading {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 778px);
  min-height: 157px;
  margin: 64px auto 34px;
  padding: 32px;
  border: 3px solid #000;
  border-radius: 16px;
  background: #fff;
  box-shadow: 10px 10px 0 var(--c-cyan);
}
.FaqHeadingTitle {
  margin: 0;
  color: #000;
  font-size: clamp(36px, 10vw, 64px);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0;
}
.FaqSection { position: relative; margin-top: 36px; background: var(--c-yellow); border-radius: 16px; padding: 24px 16px; }
.FaqAcc { position: relative; border: 2px solid #000; border-radius: 14px; background: #fff; overflow: hidden; margin-bottom: 18px; }
.FaqAccHead { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; font-weight: 700; font-size: 18px; }
.FaqAccHead::-webkit-details-marker { display: none; }
.FaqAcc[open] > .FaqAccHead { background: var(--c-pink); border-bottom: 2px solid #000; }
.FaqAccTtl { flex: 1 1 auto; }
/* ＋ / × トグル（CSS描画） */
.FaqAccToggle { position: relative; flex: 0 0 auto; width: 24px; height: 24px; }
.FaqAccToggle::before, .FaqAccToggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; background: #000; transform: translate(-50%, -50%); transition: transform .2s ease; }
.FaqAccToggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.FaqAcc[open] .FaqAccToggle::before { transform: translate(-50%, -50%) rotate(45deg); }
.FaqAcc[open] .FaqAccToggle::after { transform: translate(-50%, -50%) rotate(-45deg); }
.FaqAccBody { padding: 6px 18px 10px; }
.FaqQa { padding: 18px 0; border-bottom: 1px solid #ccc; }
.FaqQa:last-child { border-bottom: 0; }
.FaqQ { display: flex; align-items: flex-start; gap: 12px; font-weight: 700; }
.FaqA { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding-left: 40px; }
.FaqMark { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; line-height: 1; }
.FaqMark--q { background: var(--c-cyan); color: #fff; }
.FaqMark--a { background: var(--c-pink); color: #333; }
.FaqTxt { flex: 1 1 auto; line-height: 1.7; }
.FaqTxt p { margin: 0; }
.FaqTxt p + p { margin-top: .7em; }
.FaqList { margin: .45em 0 0; padding-left: 1.3em; }
.FaqList li + li { margin-top: .25em; }
.FaqA .FaqTxt { color: var(--c-text-sub); }
.FaqANote { display: block; font-size: 12px; color: var(--c-text-sub); margin-top: 4px; }
.FaqANote a, .FaqEmpty a, .FaqTxt a { color: var(--c-cyan); text-decoration: underline; }
.FaqEmpty { padding: 6px 0 12px; font-size: 14px; color: var(--c-text-sub); }
.FaqMoreWrap { margin-top: 6px; }
.FaqMore { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--c-cyan); color: #fff; font-weight: 700; font-size: 18px; border-radius: 14px; padding: 16px 20px; }
.FaqMore::after { content: ""; width: 9px; height: 9px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); }
.FaqChar { position: absolute; right: 14px; bottom: 12px; width: 58px; height: auto; pointer-events: none; }

/* Flow（ご予約からご出発までの流れ） */
.FlowSection {
  box-sizing: border-box;
  position: relative;
  width: min(100%, 1198px);
  margin: 64px auto 54px;
}
.FlowBg,
.FlowDeco {
  position: absolute;
  display: block;
  pointer-events: none;
}
.FlowBg {
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.FlowBg--cyan {
  right: -110px;
  top: -120px;
  width: 230px;
  height: 380px;
  background-image: url("../images/hero_bg_cyan.png");
}
.FlowBg--pink {
  left: -130px;
  top: 710px;
  width: 220px;
  height: 310px;
  background-image: url("../images/hero_bg_pink.png");
}
.FlowDeco {
  z-index: 3;
  height: auto;
}
.FlowDeco--planes {
  left: -34px;
  top: 86px;
  width: 142px;
}
.FlowDeco--person {
  right: 24px;
  top: 40px;
  width: 82px;
}
.FlowHeading {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 778px);
  min-height: 158px;
  margin: 0 auto 44px;
  padding: 22px;
  border: 3px solid #000;
  border-radius: 8px;
  background: #fff;
  box-shadow: 10px 10px 0 var(--c-cyan);
}
.FlowHeading h2 {
  margin: 0;
  color: #000;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
  letter-spacing: 0;
}
.FlowHeading span {
  display: block;
}
.FlowHeading strong,
.FlowHeading em {
  color: #000;
  font-style: normal;
  font-weight: 700;
}
.FlowHeading strong {
  font-size: clamp(34px, 11vw, 46px);
}
.FlowHeading em {
  font-size: clamp(26px, 8vw, 34px);
}
.FlowTimeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 1020px);
  margin: 0 auto;
  padding: 10px;
}
.FlowTimeline::before {
  content: "";
  position: absolute;
  left: 66px;
  top: 63px;
  bottom: 63px;
  width: 6px;
  border-radius: 999px;
  background: var(--c-cyan);
  z-index: 2;
  pointer-events: none;
}
.FlowAcc {
  position: relative;
  box-sizing: border-box;
  border: 0;
  border-radius: 16px;
  background: var(--c-yellow);
  padding: 16px;
  overflow: visible;
}
.FlowAccHead {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 78px 28px;
  gap: 14px;
  align-items: center;
  min-height: 74px;
  padding: 8px 12px;
  border-radius: 0;
  background: transparent;
  list-style: none;
  cursor: pointer;
}
.FlowAccHead::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: #fff;
  pointer-events: none;
}
.FlowAcc[open] .FlowAccHead::before {
  background: transparent;
}
.FlowAccHead > * {
  position: relative;
  z-index: 3;
}
.FlowAccHead::-webkit-details-marker {
  display: none;
}
.FlowBadge {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--c-cyan);
  color: #fff;
  font-family: var(--font-num);
  font-weight: 400;
  line-height: 1;
}
.FlowBadge span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.FlowBadge b {
  font-size: 32px;
  font-weight: 400;
  line-height: .9;
}
.FlowAccTitle {
  color: #000;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}
.FlowIcon {
  display: block;
  justify-self: center;
  max-width: 78px;
  max-height: 58px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.FlowToggle {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-pink);
}
.FlowToggle::before,
.FlowToggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: #000;
  transform: translate(-50%, -50%);
}
.FlowToggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.FlowAcc[open] .FlowToggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.FlowAccBody {
  position: relative;
  z-index: 2;
  margin: 16px 0 0 76px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  color: #000;
  font-size: 14px;
  line-height: 1.75;
}
.FlowAccBody p {
  margin: 0;
}
.FlowAccBody p + p {
  margin-top: 10px;
}
.FlowLead {
  font-weight: 700;
}
.FlowAccBody ul {
  margin: 8px 0 0;
  padding-left: 1.3em;
}
.FlowAccBody li {
  margin: 4px 0;
}
.FlowNote {
  display: block;
  margin-top: 4px;
  color: var(--c-text-sub);
  font-size: .92em;
}
.FlowAccBody a {
  color: var(--c-cyan-dark);
  font-weight: 700;
  text-decoration: underline;
}

.Footnote { font-size: 12px; color: var(--c-text-sub); margin-top: 24px; }

/* ---------- Contact (ご予約・ご相談) ---------- */
.Section.ContactWrap { background: #EEEEEE; }
.ContactHeading { text-align: center; font-weight: 700; font-size: 24px; }
.ContactGroup { margin-top: 28px; }
.ContactGroup:first-of-type { margin-top: 20px; }
.ContactSubHeading { text-align: center; font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.ContactList { display: flex; flex-direction: column; gap: 12px; }
.contactBox a {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--c-border); border-radius: 8px; padding: 18px 20px;
}
.contactBoxIcon { flex: 0 0 auto; color: #222; display: flex; }
.contactBoxIcon svg { width: 28px; height: 28px; }
.contactBoxContent { flex: 1 1 auto; }
.contactBoxContentTitle { font-weight: 700; }
.contactBoxContentText { font-size: 13px; color: var(--c-text-sub); }
.contactBoxButton { flex: 0 0 auto; color: #222; display: flex; }
.contactBoxButton svg { width: 20px; height: 20px; }

/* ---------- Recommend (日本旅行のおすすめ情報 / プレースホルダ) ---------- */
.Section.RecommendWrap { background: #fff; }
.RecommendHeading { text-align: center; font-weight: 700; font-size: 24px; line-height: 1.5; }
.RecommendGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.RecommendItem {
  display: flex; align-items: center; justify-content: center;
  min-height: 130px; background: #fff; border: 2px solid #ccc; border-radius: 8px; color: #999;
}

/* ---------- dirPath / anchor link ---------- */
#dirPathBlock { max-width: var(--content-max); margin: 0 auto; padding: 8px 16px; font-size: 12px; color: var(--c-text-sub); }
#dirPathBlock a { color: var(--c-cyan-dark); }
#anchorLinkBlock { text-align: center; padding: 24px 16px; }
#anchorLinkBlock a { color: var(--c-cyan-dark); font-weight: 700; }