@charset "UTF-8";
/* ============================================================
   kaigaidppack | app-sp.css
   スマホ（max-width: 768px）向けの上書き専用。
   ベースは app-common.css（モバイルファースト）。
   ここでは SP 固有の余白・文字サイズの微調整のみ。
   ============================================================ */

html,
body,
#wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

.App {
  max-width: 100%;
  overflow-x: clip;
}

.Section { padding: 40px 14px; }
.SectionTitle { font-size: 21px; }
.SectionHeadingEng { font-size: 34px; }
.SpOnly { display: inline; }

/* Search: SP */
.SearchWrap { padding: 28px 14px 38px; }
.SearchWrap::after {
  right: -230px;
  bottom: -300px;
  width: 430px;
  height: 596px;
}
.SearchBox { border-radius: 18px; padding: 10px; }
/*.SearchBox .kaigaiS > ul {
  display: flex !important;
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 !important;
  margin-left: 0rem !important;
  margin-bottom: 0 !important;
  padding: 0 0 4px !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.search_kaigaiBar .serchBox.kaigaiS .serchBox {
  width: 100%;
  box-sizing: border-box;
  padding: 0 3% 3%;
}
.SearchBox .kaigaiS > ul > li {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 172px;
  width: 172px !important;
  min-height: 42px;
  padding: 6px 10px !important;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  scroll-snap-align: start;
}
.SearchBox dl { display: grid; grid-template-columns: 1fr !important; gap: 6px; }
.SearchBox #kaigai_dp_tour form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
}
.SearchBox #kaigai_dp_tour form > dl,
.SearchBox #kaigai_dp_tour form > p,
.SearchBox #kaigai_dp_tour form > ul {
  grid-column: 1 / -1;
}
.SearchBox #kaigai_dp_tour form > #depday_wrap,
.SearchBox #kaigai_dp_tour form > #traveldays_wrap {
  grid-column: auto;
}
.SearchBox #depday_wrap dt,
.SearchBox #traveldays_wrap dt {
  font-size: 12px;
}
.SearchBox #depday_wrap dd,
.SearchBox #traveldays_wrap dd {
  width: 100%;
}
.SearchBox .column2WrapA01 .kaigaiTourWrap,
.SearchBox #topMainArea .kaigaiTourWrap,
.SearchBox #kaigai_dp .column2WrapA01 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.SearchBox .gadget_left_box,
.SearchBox .gadget_right_box {
  grid-template-columns: minmax(0, 1fr);
}
.SearchBox #topMainArea .forcia_dest dd,
.SearchBox #kaigai_dp .forcia_dest dd {
  grid-template-columns: 1fr;
}
.SearchBox .required { width: 32px; height: 22px; padding: 0; font-size: 10px; }
.search_kaigaiBar .serchBox.kaigaiS dt span.required {
  padding: 0;
}
.SearchBox select,
.SearchBox input:not([type="radio"]):not([type="checkbox"]),
.SearchBox button,
.SearchBox .topDropdownModalButton,
.SearchBox .otFormSelectCalender,
.SearchBox .otFormSelectRoom,
.SearchBox .base_gadget_calendar_box { height: 36px; }
.SearchBox .datePicker__dateText,
.SearchBox .roomChange__selectedText { line-height: 34px; }
.SearchBox #depday_wrap .otFormSelectCalender {
  position: relative;
  border: 1px solid #9a9a9a;
  padding: 0 32px 0 12px;
  background: #fff;
}
.SearchBox #depday_wrap .selectday {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  position: static;
}
.SearchBox #depday_wrap .air_gadget_calendar_btn {
  right: 8px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}
.SearchBox .otFormSelectRoom {
  border: 1px solid #9a9a9a;
  overflow: hidden;
}
.SearchBox .selectedRoom {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 0 !important;
  background: transparent;
}
#roomNum_wrap {
  clear: both;
  position: relative;
  margin-bottom: 0;
}
.SearchBox .btnSeach01,
.SearchBox .btnSeach,
.SearchBox .btnSeach a,
.SearchBox .forcia_search_air,
.SearchBox .forcia_search_dp { height: 48px; font-size: 18px; }
.SearchBox .linkList,
.SearchBox .tx10 { font-size: 12px; }*/
.SearchBanners { grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.SearchBox + .SearchBanners { margin-top: 22px !important; }
/*.SearchBanners li:last-child { grid-column: 1 / -1; width: calc((100% - 10px) / 2); margin: 0; }*/

/* Hero: SP */
.Section.Hero {
  --hero-sp-shift: clamp(0px, calc((100vw - 393px) / 2), 188px);
  height: 256px;
  min-height: 0;
  padding: 0;
  aspect-ratio: auto;
}
.HeroBlob.cyan { top: -279px; left: calc(-196px + var(--hero-sp-shift)); width: 267px; }
.HeroBlob.pink { top: 104px; left: calc(238px + var(--hero-sp-shift)); width: 371px; }
.HeroPiece--pc { display: none; }
.HeroPiece--sp-photo-left { left: calc(-24px + var(--hero-sp-shift)); top: 13px; width: 173px; }
.HeroPiece--sp-photo-right { left: calc(246px + var(--hero-sp-shift)); top: 26px; width: 184px; }
.HeroPiece--sp-photo-bottom { left: calc(-60px + var(--hero-sp-shift)); top: 111px; width: 183px; }
.HeroPiece--deco-guard1 { left: calc(-46px + var(--hero-sp-shift)); top: 6px; width: 22px; }
.HeroPiece--deco-guard2 { left: calc(-26px + var(--hero-sp-shift)); top: 4px; width: 24px; }
.HeroPiece--deco-tower { left: calc(78px + var(--hero-sp-shift)); top: 150px; width: 24px; }
.HeroPiece--deco-colosseum { left: calc(291px + var(--hero-sp-shift)); top: 185px; width: 46px; }
.HeroPiece--deco-taxi { left: calc(396px + var(--hero-sp-shift)); top: 129px; width: 65px; }
.HeroPiece--deco-lantern { left: calc(401px + var(--hero-sp-shift)); top: 69px; width: 22px; }
.HeroPiece--deco-pizza { left: calc(-25px + var(--hero-sp-shift)); top: 122px; width: 52px; }
.HeroPiece--deco-bus { left: calc(58px + var(--hero-sp-shift)); top: 227px; width: 37px; }
.HeroPiece--deco-mermaid { left: calc(-57px + var(--hero-sp-shift)); top: 197px; width: 45px; }
.HeroPiece--deco-flower { left: calc(363px + var(--hero-sp-shift)); top: 20px; width: 30px; }
.HeroPiece--deco-hula { left: calc(331px + var(--hero-sp-shift)); top: 159px; width: 52px; }
.HeroPiece--deco-opera { display: none; }
.HeroInner {
  left: calc(51px + var(--hero-sp-shift));
  top: 12px;
  width: 288px;
  height: 234px;
  max-width: none;
  transform: none;
}
.HeroCatch { padding-bottom: 9px; font-size: 12px; line-height: 1.5; }
.HeroCatch::before,
.HeroCatch::after {
  bottom: 2px;
  width: 25px;
  height: 3px;
  background: radial-gradient(circle, #f8c9cf 0 1.5px, transparent 2px) left center / 7px 3px repeat-x;
}
.HeroCatch::before { left: 132px; }
.HeroCatch::after { left: 220px; }
.HeroLogo {
  position: absolute;
  left: 44px;
  top: 24px;
  width: 198px;
  height: 163px;
  margin: 0;
  gap: 0;
}
.HeroLogoImg { width: 164px; margin-top: 13px; }
.HeroProductName {
  position: absolute;
  left: 13px;
  top: 126px;
  width: 172px;
  height: auto;
  padding: 2px 5px;
  font-size: 12.5px;
  line-height: 1.5;
}
.HeroPoints {
  position: absolute;
  left: 52px;
  top: 188px;
  width: 182px;
  max-width: 100%;
  margin: 0;
}
.HeroPointsIcons { width: 100%; max-width: 100%; }
.HeroPoints .HeroPointsLabels { width: 100%; max-width: 100%; height: 7px; margin-top: 4px; }
.HeroPointsLabels li { font-size: 8.6px; line-height: 1; }

/* Popular cities: SP */
.CityHeading {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  line-height: 47px;
  margin: 56px auto 16px;
}
.CityHeading .hl { display: block; color: #000; }
.CityGrid {
  grid-auto-columns: calc((100vw - 36px) / 2.5);
  gap: 5px;
  padding: 5px 14px 10px !important;
}
.CitySubHeading {
  justify-content: flex-start;
  max-width: none;
  margin-left: 14px;
  margin-right: 14px;
  text-align: left;
}
.CitySubHeading--other {
  justify-content: flex-start;
  margin-top: 0;
  text-align: left;
}
.CityTile {
  padding: 0;
}
.CityTile a {
  border-radius: 7px;
}
.CityOtherList {
  box-sizing: border-box;
  left: 50%;
  width: 343px;
  max-width: calc(100% - 28px);
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-50%);
}
.CityName { font-size: 19px; }
.CityChip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 109px;
  min-height: 40px;
  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;
}

/* Trip: SP */
.Section.TripWrap { padding-top: 64px; padding-bottom: 52px; }
.TripWrap .SectionTitle { font-size: 30px; line-height: 1.55; }
.TripHeaderDeco--person1 {
  top: 192px;
  left: 3%;
  width: 42px;
  height: auto;
}
.TripHeaderDeco--person2 {
  top: 207px;
  left: 14%;
  width: 38px;
  height: auto;
}
.TripHeaderDeco--right {
  display: block;
  top: 152px;
  right: 0%;
  width: 72px;
  height: auto;
}
.TripHeaderDeco--plane {
  display: block;
  top: 52px;
  left: 1%;
  width: 72px;
  height: auto;
}
.TripHeaderDeco--left {
  display: none;
}
.TripWrap .SectionHeadingEng {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -54px;
  display: block;
  width: 218px;
  max-width: 84vw;
  margin: 0;
  color: var(--c-pink);
  opacity: .2;
  font-size: 46px;
  line-height: .8;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-6.15deg);
}
.App .TripTabs {
  max-width: 100%;
  grid-template-columns: repeat(5, 156px);
  gap: 18px;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 58px 20px 18px;
  margin: 0 auto 96px;
}
.TripBadge { width: 80px; height: 80px; font-size: 18px; }
.TripBadge b { font-size: 42px; }
.TripTabPhoto img { height: 91px; border-radius: 10px; }
.TripTabLabel { min-height: 25px; font-size: 16px; }
.TripTabChevron { width: 14px; height: 14px; }
.TripFlightBand {
  height: 38px;
  --flight-dot-size: 7px;
  --flight-dot-radius: 3.5px;
  --flight-dot-fade: 4px;
  --flight-dot-step: 24px;
}
.TripFlightPlane { width: 41px; }
.TripFigmaStack { gap: 72px; padding-inline: 14px; }
.TripBlock {
  position: relative;
  width: 341px;
  max-width: calc(100vw - 52px);
  margin: 0 auto;
  padding: 0 0 30px;
  overflow: visible;
}
#Trip01::before,
#Trip03::before,
#Trip05::before {
  top: -58px;
  left: -182px;
  width: 214px;
  height: 297px;
}
#Trip02::after,
#Trip04::after {
  top: -168px;
  right: -208px;
  width: 238px;
  height: 391px;
}
.TripBlockFlight--pink {
  top: -58px;
  left: -182px;
  width: 214px;
  height: 297px;
}
.TripBlockFlight--cyan {
  top: -168px;
  right: -208px;
  width: 238px;
  height: 391px;
}
.TripBlockFlight--pink .TripBlockFlightOrbit {
  offset-path: path("M 100.6 23.5 C 138.8 22.8 186.6 30.7 195.1 55.1 C 203.6 79.9 176.7 97.5 162.7 111.1 C 144 130.2 157.6 155 174.9 174.4 C 198.4 200.2 157.2 217.4 109 226.4 C 76.7 232.5 63.8 246.5 56 272.7");
}
.TripBlockFlight--cyan .TripBlockFlightOrbit {
  offset-path: path("M 175.4 31.4 C 168.5 58.9 157.8 78 134.1 89.1 C 101.6 96.7 57.6 109.3 39.7 131.5 C 22.4 153.3 62.6 177.4 65.3 208.7 C 68.3 240.8 36.6 256.5 24 284 C 10.2 313.8 16.7 344 45.4 359.2 C 75.2 373.8 124.5 371.1 167.4 371.1");
}
.TripBlockFlightOrbit {
  width: 30px;
  height: 27px;
}
.TripBlockFlightPlane {
  width: 100%;
}
.TripBlockHead {
  position: relative;
  display: block;
  min-height: 130px;
  margin: 0 0 -1px;
  padding: 0;
  background: #fff;
  border: 1px solid #111;
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  box-shadow: 9px 9px 0 var(--c-cyan);
}
.TripBlockBadge {
  position: absolute;
  left: -24px;
  top: -38px;
  z-index: 5;
  width: 94px;
  height: 94px;
  transform: none;
}
.TripBlockBadge span { font-size: 24px; }
.TripBlockBadge b { font-size: 48px; }
.TripBlockTitle {
  padding: 21px 14px 15px 82px;
}
.TripBlockTitle h3 {
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: 0;
}
.TripBlockTitle p {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.58;
}
.TripDepartureSelect {
  position: absolute;
  left: 62px;
  top: -56px;
  z-index: 6;
  width: 254px;
  height: 36px;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
}
.TripDepartureSelect select {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  border-color: #111;
  border-radius: 5px;
  font-size: 13px;
}
.TripBlockBody {
  display: block;
  margin-top: 0;
  padding: 0 0 36px;
  background: #fff;
  border: 1px solid #111;
  border-top: 0;
  border-radius: 0 0 13px 13px;
  box-shadow: 9px 9px 0 var(--c-cyan);
  /*overflow: visible;*/overflow: hidden;/*プランが隠れるよう追記*/
}
.App .TripMainPhoto {
  width: 100%;
  /*height: 240px;*/height: auto;
  aspect-ratio: auto;
  border-radius: 0;
}
.TripAreaBar .TripAreaControl {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  z-index: 2;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  grid-template-areas: "prev current next";
  align-items: center;
  justify-items: center;
  width: 268px;
  height: 43px;
  margin: 0;
  gap: 10px;
  padding: 0;
  transform: translateX(-50%);
}
.TripAreaBar .TripAreaControl .TripAreaFlower {
  display: none;
}
.TripAreaBar .TripAreaControl .TripAreaCurrent {
  width: 100%;
  height: 43px;
  border-radius: 12px;
  padding: 6px 44px 6px 18px;
  border: 1px solid var(--c-cyan);
  background: #fff;
  font-size: 17px;
}
.TripAreaBar .TripAreaControl .TripAreaAutoplay {
  right: 10px;
}
.TripAreaBar .TripAreaControl .TripAreaArrow {
  width: 32px;
  height: 32px;
  min-height: 32px;
  font-size: 22px;
}
.TripAreaBar .TripAreaControl [data-trip-prev] {
  grid-area: prev;
}
.TripAreaBar .TripAreaControl [data-trip-next] {
  grid-area: next;
}
.TripProducts {
  width: calc(100vw - 30px);
  height: auto;
  min-height: 556px;
  margin: 225px 0 0 14px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.TripProductsTrack {
  gap: 14.625px;
  height: auto;
  align-items: stretch;
}
.TripProductSlide {
  flex: 0 0 574.625px;
  grid-template-columns: repeat(2, 280px);
  gap: 14.625px;
}
.TripProductCard {
  width: 280px;
  height: auto;
  min-height: 536px;
  font-size: 10px;
  overflow: visible;
  scroll-snap-align: start;
}
.TripProductRoute {
  min-height: 25px;
  padding: 13px;
}
.TripProductEscort {
  min-height: 54px;
  padding: 13px;
}
.TripProductCard img {
  width: calc(100% - 26px);
  height: 158px;
  margin: 0 13px;
}
.TripProductHotel {
  margin: 0 13px;
  min-height: 97px;
  padding: 9px 12px;
}
.TripProductPeriod {
  margin-top: 0;
}
.TripProductPrice { font-size: 20px; }
.TripAreaBar {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 392px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: 319px;
  margin-top: 0;
  padding: 12px 14px 14px;
  border-radius: 7px;
  transform: translateX(-50%);
}
.TripAreaBar::before {
  content: "おすすめ方面";
  position: relative;
  display: block;
  margin: 0 0 10px;
  padding-left: 34px;
  background: url("../images/theme_deco_flower.png") left center / 28px 28px no-repeat;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.TripAreaBar .TripAreaCityList {
  order: 1;
}
.TripAreaBar .TripAreaControl {
  order: 2;
}
.App .TripAreaBar ul {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.App .TripAreaBar ul::-webkit-scrollbar {
  display: none;
}
.TripAreaBar li {
  flex: 0 0 auto;
  min-width: 96px;
  background-color: #fff;
}

/* Theme nav: SPはFigma通り縦並び */
.ThemeNavTitle { font-size: 32px; line-height: 1.592; }
.ThemeNavTitle .hl { font-size: 36px; }
.ThemeNavGrid { grid-template-columns: 1fr; gap: 16px; }
.ThemeNavCard a { min-height: 80px; font-size: 16px; padding: 12px 8px 12px 16px; }
.StickyLocalNav {
  padding: 0 0;
}
.StickyLocalNavInner {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.StickyLocalNavList {
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.StickyLocalNavList::-webkit-scrollbar {
  display: none;
}
.StickyLocalNavItem {
  width: 147px;
  scroll-snap-align: start;
}
.StickyLocalNavItem a {
        min-height: 56px;
        /*border: 2px solid #000;*/
        border-radius: 9px;
        padding: 6px 10px 6px 10px;
        font-size: 12px;
}
.StickyLocalNavItem.is-active a {
  border-color: transparent;
}
.StickyLocalNavItem:nth-child(1) {
  width: 166px;
}
.StickyLocalNavItem:nth-child(2) {
  width: 197px;
}
.StickyLocalNavItem:nth-child(5) {
  width: 220px;
}
.StickyLocalNavDeparture {
  display: none;
}
#City,
#Trip,
#HotelRanking,
#ModelCourse,
#About {
  scroll-margin-top: 104px;
}

.FloatingSearchBtn {
  right: 4px;
  bottom: 64px;
  width: 82px;
  height: 82px;
}

/* Article carousel: SP */
.ArticleGrid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ArticleGrid::-webkit-scrollbar {
  display: none;
}
.ArticleGrid .ArticleCard {
  flex: 0 0 calc((100% - 16px) / 1.5);
  min-width: 0;
  scroll-snap-align: start;
}
.MoreBtn {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}

/* About: SP */
.Section.AboutWrap {
  background: linear-gradient(to bottom, var(--c-yellow) 0 72px, #fff 72px);
  padding-top: 76px;
}
.Section.AboutWrap::before {
  top: 34px;
  width: 156vw;
  min-width: 520px;
  height: 116px;
}
.AboutWrap .SectionTitle {
  gap: 18px;
  font-family: var(--font-base);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.45;
  max-width: 220px;
  margin: 24px auto 24px;
}
.AboutTitleScript {
  font-size: 44px;
}
.AboutDecoBalloon {
  top: 56px;
  right: 20px;
  width: 62px;
}
.AboutNav {
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  padding: 12px !important;
  border-radius: 18px;
  list-style: none;
  margin: 0 auto 34px !important;
}
.AboutNav li {
  min-width: 0;
}
.AboutNav .NavCard {
  width: 100%;
  min-height: 207px;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 12px 8px 14px;
  gap: 10px;
  text-decoration: none;
}
.AboutNav .NavCardImg {
  height: 76px;
}
.AboutNav .NavCardTtl {
  font-size: 16px;
  line-height: 1.42;
}
.AboutNav .NavCardTtlSm {
  font-size: 11px;
}
.AboutNav .NavCardChev img {
  width: 18px;
}
.AboutPointIntro {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 92%;
  min-height: 130px;
  margin: 48px auto;
  padding: 16px 24px;
  border: 2px solid #000;
  border-radius: 14px;
  background: #fff;
  box-shadow: 8px 8px 0 var(--c-cyan);
}
.AboutPointIntroText {
  margin: 0;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
.AboutPointIntroLogo {
  flex: 0 0 auto;
  display: block;
  width: 80px;
}
.Pt {
  box-sizing: border-box;
  position: relative;
  background: var(--c-yellow);
  border-radius: 24px;
  padding: 26px 16px;
  margin: 24px auto 64px;
  overflow: visible;
}
.PtHead {
  align-items: center;
  flex-direction: column;
  margin-top: -54px;
}
.PtTitle {
  position: relative;
  z-index: 4;
  font-size: 20px;
  text-align: center;
}
.PtBox {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 0;
  padding: 16px 16px;
}
.PtQ {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-navy);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.55;
  flex-direction: column;
}
.PtQMark {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 2px solid var(--c-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--c-navy);
}
.PtSol {
  position: relative;
  background: var(--c-pink);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 20px;
}
.PtSol::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid var(--c-pink);
  transform: translateX(-50%);
}
.PtNote {
  font-size: 11px;
  color: var(--c-text-sub);
  margin-top: 8px;
  line-height: 1.6;
}
.PtDec--p1planes {
  display: block;
  width: 107px;
  top: 149px;
  left: -13px;
  right: auto;
  z-index: 100;
}
.PtDec--p1laptop {
  display: block;
  width: 22%;
  max-width: 107px;
  top: 72px;
  right: -8px;
  z-index: 100;
}
.PtDec--p1phoneperson {
  display: block;
  width: 46px;
  top: 1140px;
  left: -8px;
  z-index: 100;
}
.PtDec--p1devices {
  display: block;
  width: 107px;
  top: 802px;
  right: -13px;
  z-index: 100;
}
.PtDec--p1person {
  display: block;
  width: 40px;
  top: 520px;
  left: -3px;
  z-index: 100;
}
.PtDec--p1kayak {
  display: block;
  width: 107px;
  right: -7px;
  bottom: -8px;
  z-index: 100;
}
.PtCircles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: 32px 16px;
  max-width: 100%;
  margin: 36px auto;
}
.PtCircles > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 16px) / 2);
}
.PtDec--p2heart {
  display: block;
  width: 160px;
  top: 79px;
  right: -49px;
  z-index: 100 !important;
}
.PtDec--p2luggage {
  display: block;
  width: 60px;
  top: 867px;
  left: -9px;
  z-index: 100;
}
.PtCircle {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F1F1F1;
  border-radius: 50%;
  text-align: center;
  overflow: visible;
}
.PtCircleBadge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-pink);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.PtCircleQ {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 3;
  color: var(--c-navy);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.45;
  padding: 0 9px;
}
.PtCircleImg--c1 {
  width: 108px;
  height: auto;
  z-index: 100;
  max-width: none;
  bottom: -30px;
}
.PtCircleImg--c2 {
  width: 33px;
  height: auto;
  z-index: 100;
  max-width: none;
  bottom: -48px;
}
.PtCircleImg--c3 {
  width: 50px;
  height: auto;
  z-index: 100;
  max-width: none;
  bottom: -40px;
}
.PtTaskal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--c-pink);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
margin-top: 50px;
}
.PtTaskalPhone img {
  width: 74px;
  height: auto;
  display: block;
}
.PtTaskalName {
  color: var(--c-cyan-deep);
  font-size: 2.5em;
}
.PtTaskalHead {
  font-weight: 700;
  font-size: 1.3rem;
}
.PtTaskalBody {
  background: #fff;
  border-radius: 12px;
  padding: 12px 10px;
  font-size: 13px;
  line-height: 1.75;
  width: 70%;
  text-align: center;
}
.PtFurtherBox {
  background: var(--c-pink);
  border-radius: 16px;
  padding: 16px 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}
.PtFurther .PtNote {
  margin-top: 10px;
  text-align: left;
}
.PtP3Dec--woman {
  width: 77%;
  max-width: 250px;
}
.PtP3Dec--new {
  position: absolute;
  top: -212px;
  right: -30px;
}
.SupportCaseGrid,
.SupportAfterGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  justify-items: center;
  gap: 45px 16px;
  align-items: flex-start;
}
.SupportCaseGrid > .SupportCase:last-child:nth-child(odd),
.SupportAfterGrid > .SupportCase:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 16px) / 2);
}
.SupportCase {
  width: 100%;
  min-width: 0;
}
.SupportQuestion {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
.SupportQuestionCircle {
  position: absolute;
  inset: 0;
  height: auto;
  border-radius: 50%;
  background: #f1f1f1;
}
.SupportQuestionBadge {
  position: absolute;
  z-index: 3;
  top: -24px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-pink);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
}
.SupportQuestion p {
  position: absolute;
  z-index: 3;
  top: 36px;
  left: 0;
  right: 0;
  width: auto;
  margin: 0;
  padding: 0 9px;
  color: var(--c-navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  transform: none;
}
.SupportQuestionImg {
  position: absolute;
  z-index: 100;
  display: block;
  max-width: none;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.SupportQuestionImg--dep1 { left: 50%; top: auto; bottom: 0; width: 80px; transform: translateX(-50%); }
.SupportQuestionImg--dep2 { left: 50%; top: auto; bottom: -2px; width: 140px; transform: translateX(-50%); }
.SupportQuestionImg--dep3 { left: 50%; top: auto; bottom: 13px; width: 60px; transform: translateX(-50%); }
.SupportQuestionImg--trip1 { left: 50%; top: auto; bottom: -5px; width: 32px; transform: translateX(-50%); }
.SupportQuestionImg--trip2 { left: 50%; top: auto; bottom: 1px; width: 75px; transform: translateX(-50%); }
.SupportQuestionImg--trip3 { left: 50%; top: auto; bottom: 3px; width: 127px; transform: translateX(-50%); }
.SupportQuestionImg--ret1 { left: 50%; top: auto; bottom: 20px; width: 80px; transform: translateX(-50%); }
.SupportDown {
  width: 12px;
  height: 12px;
  margin: 8px 0;
}
.SupportAnswer {
  gap: 8px;
  min-height: 86px;
  padding: 4px 0;
}
.SupportAnswerPhone {
  width: 42px;
  height: auto;
}
.SupportAnswerOperator {
  width: 54px;
  height: auto;
}
.SupportAnswer p {
  gap: 1px;
  line-height: 1.3;
  white-space: normal;
}
.SupportAnswer span {
  font-size: 11px;
}
.SupportAnswer strong {
  font-size: 15px;
}
.SupportMoreDetails {
  margin-top: 34px;
}
.SupportMoreLink {
  min-height: 58px;
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 14px;
}
.SupportMoreBody {
  padding: 18px 16px 20px;
}
.SupportMoreList {
  gap: 7px;
  font-size: 13px;
  line-height: 1.7;
}
.SupportScreen {
  width: 100%;
  min-width: 0;
}
.SupportScreen p {
  margin-bottom: 6px;
  font-size: 12px;
  text-align: center;
}
.SupportStage + .SupportStage {
  margin-top: 0;
}
.SupportStageHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 60px;
  text-align: center;
}
.SupportStageHead p {
  margin: 0;
  width: 70%;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}
.SupportSidePill {
  position: absolute;
  top: 53px;
  width: 60px;
  height: 72px;
  background: var(--c-yellow);
  pointer-events: none;
}
.SupportHeading {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  margin: 36px auto 32px;
  padding: 16px 24px;
  border: 3px solid #000;
  border-radius: 16px;
  background: #fff;
  box-shadow: 8px 8px 0 var(--c-cyan);
}
.SupportHeadingText span:first-child {
  font-size: 16px;
}
.SupportHeadingText strong {
  font-size: 24px;
}
.SupportHeadingText span:last-child {
  font-size: 24px;
}
.SupportHeadingChar {
  position: absolute;
  z-index: 1;
  right: -22px;
  bottom: -35px;
  width: 86px;
  pointer-events: none;
}
.TaskalIntroDevice {
  width: 74%;
}
.TaskalIntroText {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}
.TaskalIntroNotes {
  margin: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}

/* Feature: SP */
.Section.FeatureWrap { padding-bottom: 118px; }
.Section.FeatureWrap::after {
  bottom: -150px;
  height: 260px;
}
.FeatureMarkLogo { top: 14px; left: 12px; width: 58px; }
.FeatureHero { min-height: 250px; }
.FeatureHeroTitle { font-size: 18px; }
.FeatureHeroLogo { width: 220px; }
.FeatureFlightBand {
  height: 38px;
  --flight-dot-size: 7px;
  --flight-dot-radius: 3.5px;
  --flight-dot-fade: 4px;
  --flight-dot-step: 24px;
}
.FeatureFlightPlane { width: 41px; }
.FeatureHeading {
  margin: 18px auto 0;
  padding: 0 20px;
  font-size: 18px;
  line-height: 1.58;
}
.FeatureHeading::before,
.FeatureHeading::after {
  width: 7px;
  height: 58px;
  background-size: 7px 14px;
}
.FeatureWrap .SectionInner {
  box-sizing: border-box;
  padding: 32px 24px 36px;
}
.FeatureList { gap: 30px 18px; }
.FeatureItem { gap: 12px; }
.FeaturePhoto,
.FeaturePhoto img {
  width: 152px;
  height: 152px;
}
.FeatureCheck {
  width: 34px;
  height: 34px;
}
.FeatureCheck::after {
  width: 17px;
  height: 8px;
  border-left-width: 3px;
  border-bottom-width: 3px;
}
.FeatureItem p {
  max-width: 156px;
  font-size: 13px;
  line-height: 1.62;
}

/* もっと見るボタンは全幅に */
.MoreBtn { box-sizing: border-box; display: block; min-width: 0; width: 100%; max-width: 240px; margin: 0 auto; }

/* Flow */
.FlowSection { margin-top: 44px; }
.FlowBg--cyan,
.FlowBg--pink {
  display: none;
}
.FlowDeco--planes {
  display: none;
  left: -13px;
  top: 96px;
  width: 106px;
}
.FlowDeco--person {
  right: 27px;
  top: -45px;
  width: 58px;
}
.FlowHeading {
  min-height: 118px;
  margin-bottom: 34px;
  width: 92%;
  padding: 16px 24px;
  box-shadow: 8px 8px 0 var(--c-cyan);
}
.FlowHeading strong {
  font-size: 24px;
}
.FlowHeading em {
  font-size: 24px;
}
.FlowTimeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto;
  margin: 0 auto;
  padding: 10px;
}
.FlowTimeline::before {
  content: "";
  position: absolute;
  left: 62px;
  top: 63px;
  bottom: 63px;
  width: 6px;
  border-radius: 999px;
  background: var(--c-cyan);
  z-index: 2;
  pointer-events: none;
}
.FlowAccHead {
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: 10px;
  padding: 12px;
}
.FlowBadge {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c-cyan);
  color: #fff;
  line-height: 1;
}
.FlowToggle {
  display: none;
}
.FlowAccTitle { font-size: 17px; }
.FlowIcon {
  position: relative;
  max-width: 54px !important;
  max-height: 48px;
  z-index: 1;
}
.FlowAccBody {
  margin: 0 0 0 64px;
  padding: 14px 16px;
}
.FlowAccBody ul {
  margin: 4px 0 0;
  padding-left: 0;
}

/* FAQ */
.FaqHeading {
  width: 92%;
  min-height: 80px;
  margin: 44px auto 24px;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 8px 8px 0 var(--c-cyan);
}
.FaqHeadingTitle {
  font-size: 24px;
  line-height: 1.25;
}
.FaqA {
  padding-left: 0;
}
.FaqA .FaqTxt {
  color: var(--c-text-sub);
}
.FaqChar {
  position: absolute;
  right: -35px;
  bottom: -7px;
  width: 93px;
  height: auto;
  opacity: .75;
  pointer-events: none;
}
.FaqMore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--c-cyan);
  color: #fff !important;
  font-weight: 700;
  font-size: 18px;
  border-radius: 14px;
  padding: 16px 20px;
}

@media (min-width: 600px) and (max-width: 767px) {
  .HeroBlob.cyan {
    top: -324px;
    left: -90px;
    width: 300px;
  }

  .HeroBlob.pink {
    left: auto;
    right: -94px;
    width: 430px;
  }

  .FeatureList {
    width: 520px;
    max-width: 520px;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 30px 20px;
  }

  .FeatureItem p {
    max-width: 180px;
  }

  .CityOtherList {
    width: calc(100% - 48px);
    max-width: 640px;
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
  }

  .CityChip {
    width: calc((100% - 20px) / 3);
  }

  .TripBlock {
    width: min(430px, calc(100vw - 52px));
  }

  #Trip01::before,
  #Trip03::before,
  #Trip05::before,
  .TripBlockFlight--pink {
    left: calc(50% - 50vw - 80px);
  }

  #Trip02::after,
  #Trip04::after,
  .TripBlockFlight--cyan {
    right: calc(50% - 50vw - 80px);
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .PtDec--p1planes {
    display: block;
    width: 160px;
    top: 139px;
    left: -43px;
    right: auto;
    z-index: 100;
  }

  .PtDec--p1person {
    display: block;
    width: 61px;
    top: 445px;
    left: -3px;
    z-index: 100;
  }

  .PtDec--p1laptop {
    display: block;
    width: 22%;
    max-width: 124px;
    top: -18px;
    right: -8px;
    z-index: 100;
  }

  .PtDec--p1devices {
    display: block;
    width: 127px;
    top: 652px;
    right: -23px;
    z-index: 100;
  }

  .PtDec--p1kayak {
    display: block;
    width: 137px;
    right: -27px;
    bottom: -8px;
    z-index: 100;
  }

  .PtDec--p1phoneperson {
    display: block;
    width: 71px;
    top: 829px;
    left: -23px;
    z-index: 100;
  }

  .PtDec--p2heart {
    display: block;
    width: 270px;
    top: 7px;
    right: -79px;
    z-index: 100 !important;
  }

  .PtLead {
    color: var(--c-navy);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 58px;
  }

  .PtCircleBadge {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--c-pink);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }

  .PtCircleQ {
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    z-index: 3;
    color: var(--c-navy);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.45;
    padding: 0 9px;
  }

  #Support .PtCircles {
    gap: 28px 24px;
    margin-bottom: 60px;
  }

  #Support .PtCircleImg {
    height: auto;
    max-width: none;
  }

  #Support .PtCircleImg--c1 {
    width: clamp(190px, 27vw, 286px);
    bottom: -4px;
  }

  #Support .PtCircleImg--c2 {
    width: clamp(45px, 7.2vw, 72px);
    bottom: 4px;
  }

  #Support .PtCircleImg--c3 {
    width: clamp(80px, 13vw, 142px);
    bottom: -8px;
  }

  .PtDec--p2luggage {
    display: block;
    width: 170px;
    top: 854px;
    left: -4px;
    z-index: 100;
  }

  .PtTaskal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--c-pink);
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
  }

  .PtP3Dec--woman {
    width: 55%;
    max-width: 250px;
  }

  .PtP3Dec--new {
    position: absolute;
    top: -152px;
    right: 0;
    width: 137px;
  }

  .TaskalIntroDevice {
    width: 34%;
  }

  .TaskalIntroNotes {
    margin: 0;
    padding: 8px 60px !important;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
  }

  .SupportQuestionBadge {
    position: absolute;
    z-index: 3;
    top: -24px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--c-pink);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transform: translateX(-50%);
  }

  .SupportQuestion p {
    position: absolute;
    z-index: 3;
    top: 66px;
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    padding: 0 9px;
    color: var(--c-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    transform: none;
  }

  .SupportCaseGrid,
  .SupportAfterGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    justify-items: center;
    gap: 24px;
    align-items: center;
  }

  .SupportCaseGrid > .SupportCase:last-child:nth-child(odd),
  .SupportAfterGrid > .SupportCase:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: auto;
    width: 100%;
  }

  .SupportQuestionImg--dep1 {
    left: 50%;
    top: auto;
    bottom: 0;
    width: 158px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--dep2 {
    left: 50%;
    top: auto;
    bottom: -2px;
    width: 220px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--dep3 {
    left: 50%;
    top: auto;
    bottom: 13px;
    width: 100px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--trip1 {
    left: 50%;
    top: auto;
    bottom: -5px;
    width: 60px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--trip2 {
    left: 50%;
    top: auto;
    bottom: 1px;
    width: 105px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--trip3 {
    left: 50%;
    top: auto;
    bottom: 3px;
    width: 157px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--ret1 {
    left: 50%;
    top: auto;
    bottom: 20px;
    width: 120px;
    transform: translateX(-50%);
  }

  .App .FlowDeco--person {
    right: calc(50% - 264px);
    width: 120px;
    top: -34px;
  }

  .FlowIcon {
    max-width: 89px !important;
    max-height: 68px;
    z-index: 2;
    margin-right: 16px;
  }

  .FlowTimeline::before {
    content: "";
    position: absolute;
    left: 63px;
    top: 63px;
    bottom: 63px;
    width: 6px;
    border-radius: 999px;
    background: var(--c-cyan);
    z-index: 2;
    pointer-events: none;
  }

  .FaqChar {
    position: absolute;
    right: -20px;
    bottom: -10px;
    width: 213px;
    height: auto;
    opacity: .75;
    pointer-events: none;
  }
}

/* ============================================================
   タブレット帯 (768〜1180px) — SPレイアウト流用時の間延び調整
   本文コンテンツだけを「スマホ最大幅(768px)」で中央寄せして横長化を防ぐ。
   装飾(セクション直下のabsolute)・全幅背景・横スクロールカルーセルは触らない。
   ============================================================ */
@media (min-width: 768px) and (max-width: 1180px) {
  .Section.Hero {
    height: min(46vw, 470px);
    min-height: 354px;
    padding: 0;
  }

  .HeroBlob.cyan {
    top: -467px;
    left: -214px;
    width: 430px;
  }

  .HeroBlob.pink {
    top: auto;
    left: auto;
    right: -202px;
    bottom: -470px;
    width: 500px;
  }

  .HeroPiece--sp {
    display: none;
  }

  .HeroPiece--pc {
    display: block;
  }

  .HeroPiece--pc,
  .HeroPiece--deco {
    transform: translate(-50%, -50%);
  }

  .HeroPiece--deco-opera {
    display: block;
  }

  .HeroInner {
    left: 50%;
    top: 4.3%;
    width: 46%;
    height: auto;
    max-width: 470px;
    transform: translateX(-50%);
    text-align: center;
  }

  .HeroCatch {
    padding-bottom: 14px;
    font-size: clamp(17px, 1.8vw, 25px);
    line-height: 1.5;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .HeroCatch::before,
  .HeroCatch::after {
    bottom: 4px;
    width: 48px;
    height: 6px;
    background: radial-gradient(circle, #f8c9cf 0 3px, transparent 3.5px) left center / 13px 6px repeat-x;
  }

  .HeroCatch::before {
    left: 45.5%;
  }

  .HeroCatch::after {
    left: 77.1%;
  }

  .HeroLogo {
    position: static;
    width: 56%;
    height: auto;
    max-width: 100%;
    margin: 6.2% auto 0;
    gap: 12px;
  }

  .HeroLogoImg {
    width: 86%;
    max-width: 240px;
    margin-top: 0;
  }

  .HeroProductName {
    position: static;
    width: 100%;
    height: auto;
    padding: .33em .45em;
    font-size: clamp(15px, 2.1vw, 17px);
    line-height: 1.28;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .HeroPoints {
    position: static;
    width: 59.3%;
    max-width: 300px;
    margin: 8.6% auto 0;
  }

  .HeroPoints .HeroPointsLabels {
    width: 100%;
    max-width: 100%;
    height: 16px;
    margin-top: 6px;
  }

  .HeroPointsLabels li {
    font-size: clamp(10px, 1.45vw, 14px);
    line-height: 1.2;
  }

  .HeroPiece--pc-photo-center { left: 30.5%; top: calc(44% - 22px); width: 25%; }
  .HeroPiece--pc-photo-right { left: 70%; top: calc(43% - 22px); width: 24%; }
  .HeroPiece--pc-photo-bottom-left { left: 20%; top: calc(68% + 12px); width: 27%; }
  .HeroPiece--pc-photo-top-right { left: 91%; top: calc(32% - 34px); width: 22%; }
  .HeroPiece--pc-photo-left-mid { left: 7%; top: calc(52% - 20px); width: 17%; }
  .HeroPiece--pc-photo-right-lower { left: 85%; top: calc(61% - 2px); width: 20%; }
  .HeroPiece--deco-guard1 { left: 3.7%; top: 9.3%; width: 3.4%; }
  .HeroPiece--deco-guard2 { left: 7.5%; top: 8.5%; width: 3.2%; }
  .HeroPiece--deco-tower { left: 34%; top: 64%; width: 3.6%; }
  .HeroPiece--deco-colosseum { left: 68%; top: 68%; width: 7%; }
  .HeroPiece--deco-taxi { left: 94.6%; top: 44.35%; width: 8%; }
  .HeroPiece--deco-lantern { left: 82.95%; top: 34.75%; width: 3.3%; }
  .HeroPiece--deco-pizza { left: 18.5%; top: 40%; width: 7.4%; }
  .HeroPiece--deco-bus { left: 28.95%; top: 83.91%; width: 6.3%; }
  .HeroPiece--deco-mermaid { left: 6.3%; top: 76.95%; width: 7%; }
  .HeroPiece--deco-flower { left: 78.35%; top: 15.99%; width: 4.5%; }
  .HeroPiece--deco-hula { left: 75%; top: 74%; width: 7%; }
  .HeroPiece--deco-opera { left: 96.3%; top: 68.13%; width: 7%; }

  .FeatureList {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .FeaturePhoto,
  .FeaturePhoto img {
    width: 182px;
    height: 182px;
  }

  .SearchBanners {
	display: flex;
	justify-content: center;
	width: max-content;
	max-width: 100%;
  }

  /*.SearchBanners li:last-child {
    grid-column: auto;
    width: auto;
    margin: 0;
  }*/

  .CityOtherList {
    box-sizing: border-box;
    left: 50%;
    width: 100%;
    max-width: calc(100% - 28px);
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-50%);
    gap: 16px;
  }

  .CityChip {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    min-height: 48px;
    background: #fff;
    border: 0;
    border-radius: 4px;
    box-shadow: 2px 2px 0 var(--c-pink);
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }

  .PtDec--p1planes {
    display: block;
    width: 160px;
    top: 139px;
    left: -43px;
    right: auto;
    z-index: 100;
  }

  .PtDec--p1person {
    display: block;
    width: 61px;
    top: 445px;
    left: -3px;
    z-index: 100;
  }

  .PtDec--p1laptop {
    display: block;
    width: 22%;
    max-width: 124px;
    top: -18px;
    right: -8px;
    z-index: 100;
  }

  .PtDec--p1devices {
    display: block;
    width: 127px;
    top: 652px;
    right: -23px;
    z-index: 100;
  }

  .PtDec--p1kayak {
    display: block;
    width: 137px;
    right: -27px;
    bottom: -8px;
    z-index: 100;
  }

  .PtDec--p1phoneperson {
    display: block;
    width: 71px;
    top: 829px;
    left: -23px;
    z-index: 100;
  }

  .PtDec--p2heart {
    display: block;
    width: 270px;
    top: 7px;
    right: -79px;
    z-index: 100 !important;
  }

  .PtLead {
    color: var(--c-navy);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 58px;
  }

  .PtCircleBadge {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--c-pink);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }

  .PtCircleQ {
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    z-index: 3;
    color: var(--c-navy);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.45;
    padding: 0 9px;
  }

  .PtDec--p2luggage {
    display: block;
    width: 170px;
    top: 854px;
    left: -4px;
    z-index: 100;
  }

  .PtTaskal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--c-pink);
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
  }

  .PtP3Dec--woman {
    width: 55%;
    max-width: 250px;
  }

  .PtP3Dec--new {
    position: absolute;
    top: -152px;
    right: 0;
    width: 137px;
  }

  .TaskalIntroDevice {
    width: 34%;
  }

  .TaskalIntroNotes {
    margin: 0;
    padding: 8px 60px !important;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
  }

  .SupportQuestionBadge {
    position: absolute;
    z-index: 3;
    top: -24px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--c-pink);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transform: translateX(-50%);
  }

  .SupportQuestion p {
    position: absolute;
    z-index: 3;
    top: 66px;
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    padding: 0 9px;
    color: var(--c-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    transform: none;
  }

  .SupportCaseGrid,
  .SupportAfterGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    justify-items: center;
    gap: 24px;
    align-items: center;
  }

  .SupportCaseGrid > .SupportCase:last-child:nth-child(odd),
  .SupportAfterGrid > .SupportCase:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: auto;
    width: 100%;
  }

  .SupportQuestionImg--dep1 {
    left: 50%;
    top: auto;
    bottom: 0;
    width: 158px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--dep2 {
    left: 50%;
    top: auto;
    bottom: -2px;
    width: 220px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--dep3 {
    left: 50%;
    top: auto;
    bottom: 13px;
    width: 100px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--trip1 {
    left: 50%;
    top: auto;
    bottom: -5px;
    width: 60px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--trip2 {
    left: 50%;
    top: auto;
    bottom: 1px;
    width: 105px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--trip3 {
    left: 50%;
    top: auto;
    bottom: 3px;
    width: 157px;
    transform: translateX(-50%);
  }

  .SupportQuestionImg--ret1 {
    left: 50%;
    top: auto;
    bottom: 20px;
    width: 120px;
    transform: translateX(-50%);
  }

  .FlowIcon {
    max-width: 89px !important;
    max-height: 68px;
    z-index: 2;
    margin-right: 16px;
  }

  .FlowTimeline::before {
    content: "";
    position: absolute;
    left: 63px;
    top: 63px;
    bottom: 63px;
    width: 6px;
    border-radius: 999px;
    background: var(--c-cyan);
    z-index: 2;
    pointer-events: none;
  }

  .FaqChar {
    position: absolute;
    right: -20px;
    bottom: -10px;
    width: 213px;
    height: auto;
    opacity: .75;
    pointer-events: none;
  }

  .SearchBox .kaigaiS > ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    padding: 0 0 6px !important;
    scroll-snap-type: none;
  }

  .SearchBox .kaigaiS > ul > li {
    flex: 1 1 auto;
    width: auto !important;
    min-height: 54px;
    padding: 8px 10px !important;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    scroll-snap-align: none;
  }

  .TripBlock {
    width: min(520px, calc(100vw - 52px));
    z-index: 0;
    isolation: isolate;
  }

  .TripBlock::before,
  .TripBlock::after {
    z-index: -2;
  }

  .TripBlockFlight {
    z-index: -1;
  }

  #Trip01::before,
  #Trip03::before,
  #Trip05::before,
  .TripBlockFlight--pink {
    left: calc(50% - 50vw - 120px);
  }

  #Trip02::after,
  #Trip04::after,
  .TripBlockFlight--cyan {
    right: calc(50% - 50vw - 120px);
  }

  #Trip01::before,
  #Trip03::before,
  #Trip05::before {
    width: 290px;
    height: 384px;
  }

  #Trip02::after,
  #Trip04::after {
    width: 244px;
    height: 401px;
  }

  .TripBlockFlight--pink {
    width: 290px;
    height: 384px;
  }

  .TripBlockFlight--cyan {
    width: 244px;
    height: 401px;
  }

  .TripBlockFlight--pink .TripBlockFlightOrbit {
    offset-path: path("M 136.3 30.4 C 188.1 29.5 252.9 39.7 264.4 71.3 C 275.8 103.3 239.5 126.1 220.5 143.7 C 195.1 168.3 213.5 200.4 237 225.4 C 268.9 258.9 213 281.1 147.7 292.7 C 103.9 300.6 86.4 318.7 75.9 352.6");
  }

  .TripBlockFlight--cyan .TripBlockFlightOrbit {
    offset-path: path("M 179.8 32.2 C 172.8 60.4 161.8 80 137.5 91.4 C 104.2 99.2 59.1 112.1 40.7 134.9 C 23 157.2 64.2 181.9 66.9 214 C 70.1 246.9 37.5 263 24.6 291.2 C 10.5 321.8 17.1 352.8 46.5 368.4 C 77.1 383.3 127.7 380.6 171.6 380.6");
  }

  #Support .PtCircles {
    gap: 28px 24px;
    margin-bottom: 60px;
  }

  #Support .PtCircleImg {
    height: auto;
    max-width: none;
  }

  #Support .PtCircleImg--c1 {
    width: clamp(190px, 27vw, 286px);
    bottom: -4px;
  }

  #Support .PtCircleImg--c2 {
    width: clamp(45px, 7.2vw, 72px);
    bottom: 4px;
  }

  #Support .PtCircleImg--c3 {
    width: clamp(80px, 13vw, 142px);
    bottom: -8px;
  }

  @media (min-width: 1024px) {
    .Section.Hero {
      height: min(43vw, 515px);
      min-height: 440px;
    }

    .HeroInner {
      width: 44%;
    }

    .HeroPiece--pc-photo-center { left: 32%; top: calc(44% - 26px); width: min(22.5%, 288px); }
    .HeroPiece--pc-photo-right { left: 70%; top: calc(45% - 26px); width: min(23.5%, 301px); }
    .HeroPiece--pc-photo-bottom-left { left: 21%; top: calc(71% + 18px); width: min(27%, 360px); }
    .HeroPiece--pc-photo-top-right { left: 92%; top: calc(34% - 44px); width: min(23%, 294px); }
    .HeroPiece--pc-photo-left-mid { left: 9%; top: calc(55% - 26px); width: min(17.5%, 224px); }
    .HeroPiece--pc-photo-right-lower { left: 85%; top: calc(60% - 6px); width: min(20%, 256px); }
    .HeroPiece--deco-pizza { left: 20%; top: 42%; }
    .HeroPiece--deco-tower { left: 34.5%; top: 63%; }
    .HeroPiece--deco-colosseum { left: 67.5%; top: 65%; }
    .HeroPiece--deco-hula { left: 75%; top: 69%; }

    .TripBlock {
      width: min(620px, calc(100vw - 80px));
    }

    #Support .PtCircleImg--c1 {
      width: clamp(190px, 27vw, 286px);
    }

    #Support .PtCircleImg--c2 {
      width: clamp(80px, 7.2vw, 72px);
      bottom: 4px;
    }

    #Support .PtCircleImg--c3 {
      width: clamp(114px, 16vw, 142px);
    }

    .App .FlowDeco--person {
      right: calc(50% - 384px);
      width: 120px;
      top: -34px;
    }
  }

  /* 装飾が本文と一体のブロックは「ブロックごと」中央寄せ（装飾も一緒に寄せる）。
     .Pt は角丸カード(背景・装飾・本文を内包)なので、カード単位で中央へ寄せる。 */
  .App .Pt {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 装飾を内包しない本文ラッパー・カードグリッドは本文だけ中央寄せ。
     詳細度を .App 付きに揃え、既存の .App スコープ指定に確実に勝たせる。 */
  .App .FaqHeading,
  .App .FaqSection,
  .App .FlowHeading,
  .App .FlowTimeline,
  .App .SupportHeading,
  .App .TaskalIntro,
  .App .ThemeNavGrid {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Trip カテゴリタブ: 左詰め → 中央寄せ（収まらない幅では safe で先頭揃えに戻る） */
  .App .TripTabs {
    justify-content: safe center;
  }

  /* Flow の人物装飾は本文と連携しているので、中央寄せした本文カラムの右端へ追従させる
     （384 = 768/2。768px幅では right:0 = 従来どおり、幅が広がるほどカラム縁へ寄る） */
  .App .FlowDeco--person {
    right: calc(50% - 264px);
    width: 120px;
    top: -34px;
  }
}

@media (min-width: 600px) and (max-width: 1180px) {
  .TripAreaBar {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 392px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    width: calc(100% - 16px);
    margin-top: 0;
    padding: 12px 14px 14px;
    border-radius: 7px;
    transform: translateX(-50%);
  }
}

/*copyright*/
.copyright {
	position: absolute;
	left: 2%;
	top: auto;
	font-size: 10px;
}