:root {
  --pink: #ed3f70;
  --pink-dark: #d82a5e;
  --pink-soft: #fff0f4;
  --brown: #624534;
  --ink: #342720;
  --cream: #fffdf4;
  --gold: #e4c76d;
  --line: #eadfe0;
  --shadow: 0 2px 9px rgb(82 44 31 / 10%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgb(255 239 244 / 55%), transparent 28rem),
    #fff;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 10px 20px 20px;
}

.page-heading {
  padding: 0 0 12px;
  text-align: center;
}

.sale-label {
  margin: 0 0 3px;
  color: var(--pink-dark);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.heading-lead {
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: 800;
}

.section-heading {
    position: relative;
    padding: 32px 24px 32px 30px;
}
.destination-section .section-heading {
    padding: 32px 0;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

.section-heading h2 small {
  display: block;
  margin-bottom: 2px;
  font-size: 18px;
  letter-spacing: 0.12em;
}

.section-heading > p:last-child {
  margin: 7px 0 0;
  font-size: 16px;
  line-height: 1.7;
}

.section-number {
  position: absolute;
  left: 27px;
  top: 45px;
  display: grid;
  margin: 0;
  justify-items: center;
  color: inherit;
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.2;
}

.section-number span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1;
}

.featured-section {
    position: relative;
    /* overflow: hidden; */
    margin:0 auto 80px;
    margin-bottom: 42px;
    border-radius: 18px;
    background: EF8DA5;
    width: 1100px;
    background: #F9D0DB;
    padding: 32px 24px 32px 30px;
    border-radius: 16px;
}

.featured-section::after {
    content: "PICK UP";
    position: absolute;
    right: 44px;
    top: 50px;
    color: rgb(255 255 255 / 38%);
    font-family: Arial, sans-serif;
    font-size: 76px;
    font-weight: 900;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.section-heading--featured {
  z-index: 1;
  padding-right: 260px;
}

.section-heading--featured::before {
  background: #ffd560;
}

.section-heading--featured h2 small,
.section-heading--featured .section-number {
  /* color: #ffffff; */
}

.featured-grid {
  position: relative;
  z-index: 1;
/*   display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 15px; */
  /* padding: 0 22px 24px; */
}

.featured-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  /* box-shadow: 0 9px 22px rgb(97 16 43 / 23%); */
}

.featured-photo {
  position: relative;
  aspect-ratio: 1.8 / 1;
  overflow: hidden;
  background: #e9d9d9;
}

.featured-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms ease;
}

.featured-card:hover .featured-photo img {
  transform: scale(1.035);
}

.featured-ribbon,
.featured-place {
  position: absolute;
  z-index: 1;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.featured-ribbon {
  left: 0;
  top: 0;
  padding: 7px 13px 7px 11px;
  border-radius: 0 0 9px;
  background:#5172AA;
  box-shadow: 1px 2px 7px rgb(79 45 0 / 20%);
}

.featured-place {
  right: 8px;
  bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgb(45 35 29 / 78%);
}

.featured-body {
  padding: 24px;
}

.featured-label {
  margin: 0 0 3px;
  color: #d98718;
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.featured-body h3 {
    min-height: 42px;
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.45;
}

.featured-copy {
  min-height: 34px;
  margin: 5px 0 8px;
  font-size: 15px;
  line-height: 1.55;
}

.featured-button {
  min-height: 36px;
  padding: 0 11px;
  font-size: 10px;
}

.destination-section {
  position: relative;
  width: 1100px;
  margin: 0 auto;
}

.section-heading--destination {
  /* color: #24495a; */
}

.section-heading--destination::before {
  background: linear-gradient(90deg, #3ba8cf, #ef4973);
}

.section-heading--destination h2 small,
.section-heading--destination .section-number {
  /* color: #288eaf; */
}

.tour-board {
  /* overflow: hidden; */
  border: 2px solid #6D564A;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 80%) inset;
  padding-bottom:60px;
}
.tour-board:has(+.tour-board){
  margin-bottom:80px;
}

.destination-banner {
  position: relative;
  display: flex;
  min-height: 76px;
  margin: 0;
  padding: 13px 32px;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  border-radius:0;
  color: #fff;
  background: #6D564A;
}
.pt__searchbox{
  margin:80px auto;
}

.destination-banner::after {
/*   content: "";
position: absolute;
right: 0;
bottom: -18px;
width: 240px;
height: 50px;
border-radius: 50%;
background: rgb(210 231 212 / 70%);
filter: blur(8px); */
}

.destination-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.destination-title .flower {
  position: absolute;
  left: -8px;
  top: -7px;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  color: #ffd5de;
  font-size: 62px;
  text-shadow: 0 2px 5px rgb(126 57 28 / 22%);
  transform: rotate(-12deg);
}

.destination-banner h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.04em;
}

.destination-banner h2 strong {
  margin-right: 10px;
  font-size: 40px;
}

.destination-banner > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

.banner-link,
.senior-more {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.banner-link:hover,
.senior-more:hover,
.detail-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgb(63 39 25 / 18%);
}

.banner-link {
  position: absolute;
  z-index: 1;
  right: 17px;
  top: 17px;
  display: flex;
  min-height: 43px;
  padding: 0 17px;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--pink-dark);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 1px 8px rgb(18 58 80 / 20%);
}

.banner-link span,
.senior-more span {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--pink);
  font-size: 19px;
  line-height: 1;
}

.card-stage {
    position: relative;
    margin:32px;
    padding-bottom: 92px;
    border-bottom: 4px dotted #E2C3A6;
}

.tour-grid {
  /* display: grid; */
  /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
  gap: 12px;
}

.tour-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow);
}

.card-photo {
  aspect-ratio: 1.97 / 1;
  overflow: hidden;
  background: #dceaf2;
}

.card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-photo--resort {
  aspect-ratio: 1.86 / 1;
}

.card-body {
  padding: 24px;
}

.card-body h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.45;
}

.bullet-list {
    margin: 5px 0 10px;
    font-size: 14px;
    line-height: 1.55;
}

.feature-row {
  display: flex;
  min-height: 60px;
  gap: 24px;
  align-items: flex-start;
}

.feature-row--short {
  gap: 27px;
}

.feature {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 9.5px;
  white-space: nowrap;
}

.feature-icon {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 4px;
  color: #fff;
  font-size: 19px;
  box-shadow: 0 2px 5px rgb(63 44 31 / 17%);
}

.feature-icon--blue { background: #5799d4; }
.feature-icon--pink { background: #e84e83; }
.feature-icon--green { background: #54af72; }

.hotel-name {
    display: flex;
    min-height: 25px;
    margin: 1px 0 5px;
    align-items: start;
    gap: 8px;
    font-size: 16px;
    border-top: 4px dotted #E2C3A6;
    padding-top: 24px;
}

.hotel-name span {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 3px;
  color: #fff;
  background: var(--brown);
  font-size: 14px;
}

.price-row {
  gap: 8px;
}

.price {
  margin: 0;
  color: #d81f56;
  font-size: 32px;
  font-weight: 800;
  width: 100%;
  /* white-space: nowrap; */
}

.price small {
  margin-left: 1px;
  font-family: inherit;
  font-size: 13px;
}

.detail-button {
    display: flex;
    width: 100%;
    padding: 16px 0;
    margin-top: 16px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    color: #fff;
    background: #583b2e;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.detail-button span {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  color: #684838;
  background: #fff;
  font-size: 18px;
}

.round-arrow {
  position: absolute;
  z-index: 3;
  top: 34%;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--pink);
  font-family: Arial, sans-serif;
  font-size: 37px;
  line-height: 1;
  box-shadow: 0 1px 4px rgb(90 23 45 / 24%);
  cursor: pointer;
}

.round-arrow--left { left: -1px; }
.round-arrow--right { right: -1px; }

.senior-panel {
    position: relative;
    margin: 32px;
    padding: 32px;
    border-radius: 13px;
    background: #F3E7DB;
    margin-top: 64px;
}

.senior-subsection-label {
  position: absolute;
  left: 17px;
  top: 8px;
  margin: 0;
  color: #8d7851;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.senior-subsection-label span {
  margin-right: 7px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: #d5a935;
  letter-spacing: 0;
}

.senior-heading-row {
  display: grid;
  grid-template-columns: auto minmax(310px, auto) 1fr auto;
  min-height: 68px;
  align-items: center;
  gap: 13px;
  margin-bottom:24px;
}

.senior-symbol {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--pink);
  font-size: 24px;
  letter-spacing: -6px;
  border: 5px solid #ffe5ec;
}

.senior-heading-row h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.senior-heading-row > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.senior-more {
  display: flex;
  min-width: 152px;
  min-height: 51px;
  padding: 7px 11px 7px 15px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #f05a85, #ec3970);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 3px 9px rgb(168 30 74 / 22%);
}

.senior-more span {
  color: var(--pink);
  background: #fff;
}

.tour-grid--senior {
  gap: 13px;
}

.senior-card .card-photo {
  aspect-ratio: 2 / 1;
}

.senior-card .card-body {
  padding:24px;
}

.senior-card .card-body h3 {
  /* min-height: 22px; */
    font-size: 15px;
    font-weight: 600;
    color: #c39378;
}
.description {
  min-height: 31px;
  margin: 3px 0 8px;
  font-size: 18px;
  line-height: 1.45;
}

.comfort-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* min-height: 70px; */
  gap: 8px;
  align-items: start;
  margin: 16px 0 24px 0;
}

.featured-section .comfort-row > div,
.tour-grid--standard .comfort-row > div,
.senior-card .comfort-row > div > div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.2;
}
.comfort-row > div > div:nth-of-type(2){
  font-weight: normal;
  margin: 4px 0;
    line-height: 150%;
    color: #2c2a2a;
}

.comfort-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 4px;
  color: #fff;
  font-size: 17px;
}

.comfort-icon--blue { background: #5596cf; }
.comfort-icon--green { background: #54aa72; }
.comfort-icon--red { background: #ec4b4d; }
.comfort-icon--pink { background: #e85284; }
.comfort-icon--orenge { background: #ff9b2f; }
.comfort-icon--purple { background: #6f56b9; }




.option-title {
    margin: 0;
    padding: 24px 0 16px;
    border-radius: 4px 4px 0 0;
    /* background: #fff8f8; */
    font-size: 16px;
    text-align: center;
    border-top: 4px dotted #E2C3A6;
}
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 70px;
  padding: 8px 4px 5px;
  margin-bottom:24px;
  background: #fff9f8;
}

.option-grid > div {
    font-weight: 500;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 6px;
    padding: 0 4px;
    border-right: 1px solid #f3e6e4;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 16px;
}

.option-grid > div:last-child {
  border-right: 0;
}

.tag {
    min-width: 60px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-style: normal;
}

.tag--blue { background: #4d94cf; }
.tag--green { background: #50a56a; }
.tag--orange { background: #e46535; }
.tag--purple { background: #944088; }

.senior-card .hotel-name {
  margin-top: 7px;
}

.detail-button--compact {
  min-height: 36px;
  padding: 0 12px;
  font-size: 10.5px;
}

.notes {
  margin: 12px 0 0;
  font-size: 9px;
  font-weight: 700;
}

.ptt_icons2{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
  margin:16px 0;
}
.splide__pagination {
    bottom: -60px;
}
.splide__arrow, .splide__pagination__page.is-active {
    background: rgb(239 141 165);
    opacity: 1;
}
.splide__arrow svg{
  fill:#fff;
}
#pt__depBtn {
    background: #6D564A;
    opacity: 1;
    color: #fff;
    padding: 16px;
    box-shadow: 0 0 0px 3px #6D564A;
    border-radius: 8px;
    position: fixed;
    bottom: 96px;
    right: 16px;
    z-index: 3;
    font-size: 14px;
}
.pt__special > div{
  color:#6D564A;
}
.pt__special > div .fen{
  color:#C39378;
}
.pt__nv {
    background: #C39378;
    box-shadow: 0 0 2px 0px #fff;
}
.pt__nv:has(> :nth-child(2):last-child) {
    justify-content: center;
}
.pt__nv:has(> :nth-child(2):last-child) a {
    border-right: 1px solid #fff9f3;
}

.type_senior{
  display: none;
}
.pt__cnv ul{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}
.pt__cnv a {
    background: #6e564a;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 32px;
    border-radius: 8px;
    color: #fff;
    justify-content: center;
}
.pt__cnv small {
    display: block;
    text-align: center;
}
#cls_mokuteki,#nv_mokuteki{display: none;}
.pt__area-dom--btn {
    color: #FFF9F3;
    background: #C39378;
    display: block;
    margin: 64px auto 0;
    border-radius: 32px;
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    width: calc(100% - 64px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .banner-link,
  .senior-more,
  .detail-button,
  .featured-photo img {
    transition: none;
  }
}
@media (max-width: 680px) {
  #nv_mokuteki{
    display: block;
  }
  .section-heading--featured{
    padding: 0;
    margin-bottom: 32px;
  }
  .featured-section{
    width: 100%;
    border-radius:32px 32px 0 0;
    padding: 60px 24px 120px;
  }
    .destination-section {
        width: 100%;
        padding: 24px;
        margin: 0;
    }
  .destination-section .section-heading {
/*       padding: 32px;
background: #6D564A;
color: #fff;
border-radius: 32px 32px 0 0; */
  }  
  .destination-title{
    display: block;
  }
  .destination-title{
        white-space: normal;
  }
  .destination-banner{
        display: block;
        padding: 16px 24px;
        border-radius: 8px;
  }
  .destination-banner > p{
    font-size:14px;
    line-height: 1.4;
  }
  .destination-banner h2{
           font-size: 16px;
           
  }
  .destination-banner h2 strong{
    margin-right:4px;
  }
  .destination-banner h2 strong{
    font-size:20px;
  }
  .tour-board{
    border:none;
    background:none;
  }
  .card-stage {
      margin: 24px 0;
  }
  .senior-panel {
      margin: 0;
      padding: 0;
      margin-top: 54px;
  }    
  .senior-heading-row h2{
    white-space: normal;
    font-size: 24px;
  }
  .senior-heading-row{
    display: block;
  }
    .senior-panel {
        padding: 54px 32px 140px;
        margin: 0 -32px;
        border-radius: 48px 48px 0 0;
    }
  .splide__arrow {
      bottom: -82px;
      top: inherit;
  }
  .senior-card .tour-card{
    padding:24px;
  }
  .senior-card .card-body{
   padding:24px;
  }
  .senior-heading-row > p {
      margin-top: 8px;
      font-size: 13px;
      line-height: 1.5;
  }  
  .pt__cnv ul {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      width: 100%;
      padding: 0;
      gap:0;
  }
.pt__cnv a {
        display: flex;
        flex-wrap: wrap;
        padding: 16px 0;
        padding: 0;
        background: inherit;
        color: #6e564e;
padding: 16px;
    font-size: 18px;
    width: 100%;
    display: block;
    color: #6d564a;
        text-align: center;
  
}
#cls_mokuteki{display: flex;}

.pt__cnv_ttl img{width: 110px;margin:0 auto;}
.pt__cnv a i{display: none;}
.pt__cnv li + li {
    border-top: 3px solid #e2c3a6;
}
  .pt__cnv {
      display: none;
      background: #fce7ed;
      padding: 40px 24px 40px;
      width: calc(100% - 24px);
      border-radius: 8px;
      background-size: 100% auto;
      position: fixed;
      z-index: 100;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
  }
  .pt__cnv ul{
    background: #FFF9F3;
    border-radius: 8px;
    overflow-y: scroll;
    max-height: 35dvh;
    border: 3px solid #e2c3a6;
    margin-top: 32px;
  }
  .tour-board:has(+.tour-board){margin-bottom:0;}
  .card-stage{
    border-bottom: none;
    margin-bottom:0;
  }
.pt__area-dom--btn {
    margin: 32px auto 0;
    width: 100%;
}
  
  
}
@media (min-width: 768px) {
    .pt__selDep, .pt__selArea {
        width: 600px;
    }
}