@charset "UTF-8";

/* --------------------------------
   ItemSection
--------------------------------- */


  .ItemBox .ItemBoxHeader .tabWrap .tab {
    gap: 0.5rem;
    padding: 0 1rem 0.5rem;
    overflow-x: auto;
    justify-content: center;
  }
  .ItemBox .ItemBoxHeader .tabWrap .tab .tabItem {
    width: 100%;
    min-width: 82px;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem 0;
    border: 1px solid var(--main-border-color) !important;
    background-color: var(--white-color);
    border-bottom: none;
    border-radius: 0.5rem;
    box-shadow: 0 0 4px var(--sub-border-color);
    font-weight: 600;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap {
    /* padding: 2rem 0.75rem 1rem 0.75rem; */
    position: relative;
    /* background-color: var(--gray-00-color); */
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItemHeader {
    width: 100%;
    display: flex;
    position: relative;
    padding-left: 0.25rem;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemTitleSubLine {
    font-size: 0.875rem;
    font-weight: normal;
    padding: 0.25rem 1rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemTitleSubLine .ItemTitleSubLineIcon {
    background-color: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 250%;
    padding: 0.125rem;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemTitleSubLine .ItemTitleSubLineIcon.tentsuki-from-japan {
    background-color: #BB6253;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemTitleSubLine .ItemTitleSubLineIcon svg {
    width: 14px;
    height: 14px;
    color: var(--white-color);
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSubTitle {
    display: inline-block;
    background-color: var(--theme-main-dark);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: var(--white-color);
    font-size: 0.875rem;
    position: absolute;
    top: 2.2rem;
    right: 1rem;
    font-weight: 700;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap.is-tentsuki a .ItemSubTitle {
    display: inline-block;
    background-color: var(--theme-main-dark);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: var(--white-color);
    font-size: 0.875rem;
    position: absolute;
    top: auto;
      bottom:-0.5rem;
      right: 1rem;
    font-weight: 700;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--main-border-color);
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet:last-child {
    border-bottom: none;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap.is-tentsuki a .ItemSet{
    padding: 0;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner {
    display: flex;
    width: 100%;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetIcon {
    width: 48px;
    padding: 0.75rem 0;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetIcon svg {
    width: 32px;
    height: 32px;
    background-color: var(--green-pale);
    padding: 0.375rem;
    border-radius: 250%;
    color: var(--white-color);
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetBody {
    width: 100%;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetBody .ItemSetCardName {
    font-size: 1rem;
    font-weight: bold;
    display: block;
    width: 100%;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetBody .ItemSetCardSubTitlte {
    font-size: 0.75rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetBody .ItemSetCardRating {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetBody .ItemSetCardRating .starIcon {
    background-image: url("https://www.nta.co.jp/kaigai/assets/svg/star.svg");
    background-size: cover;
    display: inline-block;
    width: 1em;
    height: 1em;
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetBody .ItemSetCardRating .starIcon--active {
    background-image: url("https://www.nta.co.jp/kaigai/assets/svg/star-active.svg");
  }
  .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetBody .ItemSetCardRating .starIcon--half {
    background-image: url("https://www.nta.co.jp/kaigai/assets/images/star_half.png");
  }
  
  
  /* #Area01 .TentsukiTourPointLabel{ display: none !important; } */

  /* Tablet/Smartphone: hide ONLY the extra tablist UL (keep .slick-dots visible) */
  @media (max-width: 1024px){
    .ItemBox .ItemBoxItemFooter ul[role="tablist"]:not(.slick-dots),
    .ItemBox .js-pickup ul[role="tablist"]:not(.slick-dots){
      display: none !important;
    }
  }
  

  /* Tablet: 2列固定レイアウト（JSで .is-two-cols を付与） */
  @media (max-width: 1024px) and (min-width: 601px){
    /* 内側 */
    .ItemBoxContentItemInner .js-pickup .ItemBoxItem.is-two-cols{
      display: grid !important;
      grid-template-columns: repeat(2, minmax(260px, 1fr));
      gap: 12px;
      padding: 0;
      width: 100%;
    }
    .ItemBoxContentItemInner .js-pickup .ItemBoxItem.is-two-cols .ItemSetWrap{
      flex: none;
      scroll-snap-align: none;
    }
    /* 2列時はフッター（ドット領域）を非表示 */
    .ItemBoxContentItemInner .js-pickup .ItemBoxItem.is-two-cols + .ItemBoxItemFooter{
      display: none !important;
    }

    /* 外側（汎用） */
    .js-pickup .ItemBoxItem.is-two-cols{
      display: grid !important;
      grid-template-columns: repeat(2, minmax(260px, 1fr));
      gap: 12px;
      padding: 0;
      width: 100%;
    }
    .js-pickup .ItemBoxItem.is-two-cols .ItemSetWrap{ flex: none; scroll-snap-align: none; }
    .js-pickup .ItemBoxItem.is-two-cols + .ItemBoxItemFooter{ display: none !important; }

    /* より強い特異性での上書き（レガシーflex/スクロール設定を打ち消す） */
    .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem.is-two-cols{
      display: grid !important;
      grid-template-columns: repeat(2, minmax(260px, 1fr))!important;
      gap: 12px;
      overflow-x: visible !important;
      -webkit-overflow-scrolling: auto !important;
      scroll-snap-type: none !important;
    }
    .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem.is-two-cols .ItemSetWrap{
      flex: 0 0 auto !important;
      width: auto !important;
      max-width: none !important;
      scroll-snap-align: none !important;
    }
  }
  
  
  .ItemSection.TentsukiSection{
    background-color: var(--theme-main-color);
    background: linear-gradient(#B8171F, #AB141C, #8A0E15, #550509, #4A0307);
  }
  .ItemSection.TentsukiSection .ItemIntroductionWrap {
    width: 100%;
    padding: 0;
  }
  .ItemSection.TentsukiSection .ItemIntroductionWrap .ItemIntroductionWrapInner {
    border: none;
    background-color: transparent;
    border-radius: 0.5rem;
    display: block;
    padding: 0;
    position: relative;
    overflow: visible;
  }
  
  .TentsukiIntroHeading{
    width: 58%;
  }
  .TentsukiIntroSince{
    color: #FFF;
    font-size: 1rem;
    padding: 1rem 0.5rem 0.5rem;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  }
  .TentsukiIntroSince span{
    font-size: 1.4rem;
    font-weight: 600;
    padding-left: 0.5rem;
    letter-spacing: 2px;
  }
  .TentsukiIntroStartDate{
    width: 84%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    padding: 0.25rem 0.5rem;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  }
  .TentsukiIntroStartDate .StartDateText01{
    line-height: 1;
    font-size: 0.75rem;
    text-align: right;
  }
  .TentsukiIntroStartDate .StartDateText01 span{
    line-height: 1;
    font-size: 0.75rem;
    text-align: right;
    padding-right: 1rem;
  }
  .TentsukiIntroStartDate .StartDateText02{
    line-height: 1;
    font-size: 2rem;
    padding: 0 0.25rem;
    color: #B02418;
    letter-spacing: -3px;
  }
  
  .TentsukiIntroStartDate .StartDateText03{
    line-height: 1;
    font-size: 1.1rem;
  }
  .TentsukiIntroTitle{
    padding: 1.8rem 1.25rem 0.5rem 0.75rem;
    font-size: 2.2rem;
    text-align: center;
    line-height: 0.825;
    color: var(--white-color);
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  }
  .TentsukiIntroTitle span{
    font-size: 1.2rem;
    text-align: center;
    line-height: 1;
    font-weight: bold;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  }
  
  .TentsukiIntroBody{
    padding: 2rem 1.25rem 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .TentsukiTourPoint{
    width: 100%;
    background-color: var(--white-color);
    padding: 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    border-radius: 0.25rem;
  }
  .TentsukiTourPointLabel{
    width: 20%;
    max-width: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #D3B486;
    color: #000;
    padding: 0.25rem 0.5rem 1.5rem;
  }
  .TentsukiTourPointLabel::after{
    content: "";
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 1.5rem solid transparent;
    border-bottom: 1rem solid #FFF;
    border-right: 1.5rem solid transparent;
    z-index: 1;
  }
  .TentsukiTourPointLabel span{
    width: 100%;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B02418;
    line-height: 1;
  }
  .TentsukiTourPointBody{
    /* width: 80%; */
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 0.25rem 0.5rem;
    padding-right: 0;
  }
  .TentsukiTourPointTitle{
    width: 100%;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
  }
  .TentsukiTourPointText{
    font-size: 0.875rem;
  }
  .TentsukiTourPointText span{
    font-size: 0.75rem;
    color: #666;
  }
  .TentsukiIntroResult{
    position: absolute;
    top: -1.25rem;
    right: 0;
    width: 48%;
    max-width: 260px;
  }
  
  .ItemSection.TentsukiSection .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap {
    background-color: transparent;
    /* padding: 0.5rem 0.75rem 1rem 0.75rem; */
  }
  
  .TentsukiSection .SectionBanner a{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--main-text-color);
  }
  .TentsukiSection .SectionBanner a > p{
    width: 100%;
    color: var(--white-color);
  }
  
  
  .ItemBox:before {
    position: absolute;
    top: 0;
    left: -2rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 40%, var(--main-border-color) 70%, var(--gray-bg-color) 42%, transparent 100%);
    z-index: -1;
  }

  


.tabWrap .tab .tabItem.kaigai_sightseeing_tab {display:none;}/*観光付きプラン無い場合はタブを非表示/ある場合は表示*/

@media screen and (max-width: 374px) {
  .xsnone{
    display: none;
  }
}
.is-gray {
  background-color: var(--gray-10-color);
}
.is-gray .ItemBoxItemWrap {
  background-color: transparent !important;
}
.is-gray .SectionButton {
  padding: 1rem 3rem 1rem 1rem;
}
#wrapper,
#wrap {
  font-size: auto;
}
.SectionChangeDept {
  padding: 1rem 0.5rem;
}
.SectionChangeDept #switching_tab_menu {
  padding: 1rem 0;
}
.SectionChangeDept #switching_tab_menu li {
  width: calc(25% - 0.5rem);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.125rem;
  border: 1px solid var(--main-border-color);
  background-color: var(--white-color);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  border-radius: 0.25rem;
}
.SectionChangeDept #switching_tab_menu li.select {
  background-color: var(--vivid-color);
  border-color: var(--vivid-color);
  color: var(--white-color);
}
@media screen and (max-width: 759.9px) {
  .commonbnr li {
    overflow: hidden;
    margin: 0;
    padding: 0.5rem;
    /* background: var(--white-color); */
    box-sizing: border-box;
    display: block;
  }
  .commonbnr li img {
    width: 100%;
    margin-bottom: 0;
    border-radius: 0.25rem;
  }
}
.search_kaigaiBar .serchBox.kaigaiS > ul {border-bottom: none;}
.search_kaigaiBar .serchBox.kaigaiS > ul li {
  background: var(--gray-00-color);
  color: var(--main-text-color);
}
.search_kaigaiBar .serchBox.kaigaiS > ul li.select {
  background: var(--vivid-color);
  color: var(--white-color);
}
.search_kaigaiBar .serchBox.kaigaiS .serchBox {
  border: 3px solid var(--vivid-color);
}
/*.f-button {
  width: 100%;
  display: flex;
  padding: 1rem;
}
.btnSeach01 {
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 -1px 0 var(--vivid-color) inset;
  -moz-box-shadow: 0 -1px 0 var(--vivid-color) inset;
  box-shadow: 0 -1px 0 var(--vivid-color) inset;
  border: 1px solid var(--vivid-color);
  background-color: var(--vivid-color);
  color: var(--white-color) !important;
  position: relative;
  padding: 0.5rem;
  font-size: 1rem;
  width: 90%;
  max-width: 280px;
  margin: 1rem auto 0;
  background: url(https://www.nta.co.jp/shared2015/common/images/ic_search_01.png) no-repeat var(--vivid-color) 97% 50%;
  background-size: 12px auto;
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
}
.search_kaigaiBar button.btnSeach,
.search_kaigaiBar p.btnSeach a,
#tab_kaigai_hotel .base_gadget a.forcia_search_hotel {
  padding: 8px 0;
  background: url(https://www.nta.co.jp/shared2015/common/images/ic_search_01.png) no-repeat var(--vivid-color) 97% 50%;
  background-size: 12px auto;
  color: var(--white-color);
  border: none;
  font-size: 1rem;
  text-align: center;
  color: var(--white-color);
  width: 80%;
  max-width: 280px;
  margin: 1rem auto 0;
  display: block;
  -webkit-border-radius: 0.25rem;
  border-radius: 0.25rem;
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  clear: both;
}
#tab_kaigai_hotel .base_btn.type_next {
  background-color: var(--vivid-color)!important; 
  border-bottom: 3px solid rgba(0, 0, 0, 0.2)!important; 
}
.search_kaigaiBar .serchBox.kaigaiS dt span.required {
  background: var(--vivid-color);
  padding: 0.25rem;
  color: var(--white-color);
  font-size: 0.75rem;
  margin-right: 0.25rem;
  font-weight: normal;
  border-radius: 0.25rem;
}
.search_kaigaiBar input[type=text] {
  padding: 0.25rem 0.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--sub-border-color)!important;
  height: 30px!important;
  border-radius: 0.25rem!important;
  box-sizing: content-box;
}
.search_kaigaiBar .tx10 {
  font-size: 0.75rem;
  padding: 0 1rem;
}
.search_kaigaiBar .tx_L {
  font-size: 0.75rem;
}
#depday_wrap dd {
  width: 72%;
  display: inline-block;
  z-index: 0;
  border: 1px solid var(--sub-border-color) !important;
  border-radius: 0.25rem!important;
  font-size: 1rem;
}
.datePicker__dateText {
  height: 40px;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
#tab_kaigai_hotel .base_gadget_calendar img {
    position: absolute;
    top: -2px;
    right: 0;
    width: 27px;
    height: 30px;
}
#tab_kaigai_hotel .base_text, p.base_text {
	font-size: 0.75rem;
    float: left;
    margin: 8px 0;
}*/
  .SpotBody .slick-list {
  padding: 0 !important;
}
  .SpotBody .slick-list .slick-slide {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
.SpotBody .slick-list img {
  width: 100%;
}
.ItemBox .slick-list .slick-slide {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
.ItemBox .ItemCardImage .slick-list,
.ItemBox .ItemCardImage_noslick .slick-list {
  padding: 0 !important;
}
.ItemBox .ItemCardImage .slick-list .slick-slide,
.ItemBox .ItemCardImage_noslick .slick-list .slick-slide {
  margin-right: 0;
  margin-left:0;
  scale: 1;
}
.ItemBox .ItemCardImage .slick-dots {
  width: calc(100% - 1rem);
  position: absolute;
  bottom: 0.75rem;
  padding: 0;
  gap: 0.125rem;
}
.ItemBox .ItemCardImage .slick-dots li button:before {
  font-size: 1.6rem;
  bottom: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: var(--black-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ItemBox .ItemCardImage .slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: var(--vivid-color);
  line-height: 1;
  scale: 1.5;
  top: -44%;
  left: -2%;
}
  /* ItemBox 内のスライダー矢印位置（PC基準） */
  .ItemBox .slick-prev,
  .ItemBox .slick-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }
  .ItemBox .slick-prev{ left: 0 !important; }
  .ItemBox .slick-next{ right: 0 !important; }
  /* 矢印アイコンの可視化（ItemBox専用） */
  .ItemBox .slick-prev:before,
  .ItemBox .slick-next:before{
    font-family: "slick";
    font-size: 24px;
    line-height: 1;
    opacity: 0.9;
    color: var(--main-text-color);
  }

  /* disabled時も非表示にしない（クリック不可にして視認は残す） */
  .ItemBox .slick-prev.slick-disabled,
  .ItemBox .slick-next.slick-disabled{
    display: block !important;
    opacity: 0.35 !important;
    pointer-events: none;
  }
  @media screen and (max-width: 759.9px) {
    .slick-prev {
      left: -1.5rem !important;
    }
    .slick-next {
      right: 0.5rem !important;
    }
  }
  /* SP: slick dots を小さく調整（共通化後のサイズ上振れ対策） */
  @media screen and (max-width: 767px) {
    /* バナー専用のドット（丸）を一回り小さく */
    .slick-slide-banner_wrap .slick-dots li,
    .slick-slide-banner_wrap .slick-dots li button{
      width: 0.375rem !important;
      height: 0.375rem !important;
    }
    /* 汎用のドット（箇条書き記号ベース）も縮小 */
    .slick-dots li { width: 0.375rem; height: 0.375rem; }
    .slick-dots li button { width: 0.375rem; height: 0.375rem; }
    .slick-dots li button:before { font-size: 20px; }
  }
  .NavWrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
    transition: box-shadow 0.3s ease, height 0.3s ease!important;
  }
.NavWrap .ChangeDept {
  order: 1;
  width: 70%;
  background-color: var(--white-color);
  border-radius: 0.75rem;
}
.NavWrap.is_fixed .ChangeDept {
  order: 2;
  width: 24%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.25rem;
}
.NavWrap.is_fixed .ChangeDept span {
  width: auto;
  font-size: 0.5rem;
  text-align: center;
  line-height: 1;
  font-weight: normal;
}
.NavWrap.is_fixed .ChangeDept ul {
  width: 100%;
  padding: 0.25rem;
  border: 1px solid var(--main-b);
  font-size: 0.75rem;
}
.NavWrap .JumpToSection {
  order: 2;
  width: 100%;
}
.NavWrap .JumpToSection .SectionNav .SectionNavItem {
  width: 100%;
  border: 1px solid var(--main-b);
  border: none;
  background-color: var(--white-color);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  text-align: center;
}
.NavWrap .JumpToSection .SectionNav .SectionNavItem a {
  color: var(--main-text-color);
  line-height: 1.2;
  font-weight: bold;
}
.NavWrap.is_fixed {
  position: -webkit-fixed;
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  width: calc(100% - 1rem);
  background-color: var(--white-color);
  /* border-bottom: 1px solid var(--main-b); */
  padding: 0.25rem 0.75rem;
  gap: 1rem;
  /* box-shadow: 0px 0px 6px var(--sub-border-color); */
  border-radius: 1rem;
  /* transition: all 0.3s ease-in; */
}
.NavWrap.is_fixed .JumpToSection {
  order: 1;
  width: 76%;
}
.NavWrap.is_fixed .JumpToSection .SectionNav .SectionNavItem {
  width: 100%;
  border-right: 1px solid var(--main-b);
  border: none;
  border-radius: 0;
  background-color: var(--white-color);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: none;
}
.NavWrap.is_fixed .JumpToSection .SectionNav .SectionNavItem a {
  color: var(--main-text-color);
  line-height: 1.2;
  font-weight: bold;
  font-size: 0.5rem;
}
.NavWrap.is_fixed .JumpToSection .SectionNav .SectionNavItem .SectionNavItemIcon {
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  color: var(--main-text-color);
}
.NavWrap.is_fixed .JumpToSection .SectionNav .SectionNavItem .SectionNavItemIcon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.NavWrap.is_fixed .JumpToSection .SectionNav .SectionNavItem .SectionNavItemLabel {
  font-size: 0.75rem;
  height: auto;
  min-height: 1.5rem;
}
.gantt {
  display: grid;
  border: 0;
  border-radius: 0.25rem 0.25rem 0 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* box-shadow: 0 75px 125px -57px #7e8f94; */
}
.gantt__row {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--white-color);
}
.gantt__row:nth-child(odd) {
  background-color: var(--gray-00-color);
}
.gantt__row:nth-child(odd) .gantt__row-first {
  background-color: var(--gray-00-color);
}
.gantt__row:nth-child(3) .gantt__row-bars {
  border-top: 0;
}
.gantt__row:nth-child(3) .gantt__row-first {
  border-top: 0;
}
.gantt__row--empty {
  background-color: #ffd6d2 !important;
  z-index: 1;
}
.gantt__row--empty .gantt__row-first {
  border-width: 1px 1px 0 0;
}
.gantt__row--lines {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: transparent;
  grid-template-columns: repeat(12, 1fr);
}
.gantt__row--lines span {
  display: block;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.gantt__row--lines span:first-child {
  display: block;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.gantt__row--lines span.marker {
  background-color: rgba(10, 52, 68, 0.13);
  z-index: 2;
}
.gantt__row--lines:after {
  grid-row: 1;
  grid-column: 0;
  background-color: #1688b345;
  z-index: 2;
  height: 100%;
}
.gantt__row--months {
  color: var(--white-color);
  background-color: var(--theme-main-pale20) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  grid-template-columns: repeat(12, 1fr);
}
.gantt__row--months .gantt__row-first {
  border-top: 0 !important;
  background-color: #0a3444 !important;
}
.gantt__row--months span {
  text-align: center;
  font-size: 0.75rem;
  align-self: center;
  font-weight: 500;
  padding: 0.5rem 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--main-text-color);
}
.gantt__row-bars {
  list-style: none;
  display: grid;
  padding: 9px 0;
  margin: 0;
  grid-template-columns: repeat(24, 1fr);
  grid-gap: 8px 0;
  border-top: 1px solid rgba(221, 221, 221, 0.8);
  text-align: center;
}
.gantt__row-bars li {
  font-weight: 500;
  text-align: left;
  font-size: 0.75rem;
  min-height: 15px;
  background-color: var(--green-dark);
  padding: 0.25rem 0.5rem;
  color: var(--white-color);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  text-align: center;
  border-radius: 20px;
  grid-row: 1;
}
.gantt__row-bars li.is-straddle-start{
  border-radius: 20px 0 0 20px;
}
.gantt__row-bars li.is-straddle-end{
  border-radius: 0 20px 20px 0;
}
.gantt__row-bars li.stripes {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.1) 5px, rgba(255, 255, 255, 0.1) 12px);
}
.gantt__row-bars li:before, .gantt__row-bars li:after {
  content: "";
  height: 100%;
  top: 0;
  z-index: 4;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
}
.gantt__row-bars li:before {
  left: 0;
}
.gantt__row-bars li:after {
  right: 0;
}
.NavWrap.is_fixed .ChangeDept #deptSelect {
  width: 100%;
  padding: 0.25rem;
  font-size: 0.75rem;
  text-align: center;
}
.NavWrap.is_fixed .ChangeDept :before {
  width: 4px;
  height: 4px;
  right: 0;
  top: auto;
  bottom: 0.7rem;
}

 
  

 

 


 
/* .ItemSection .ItemBox .PlanPlusOuter .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap {
  transition: unset;
} */
/* .ItemSection .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap.PlanPlusOuterWrap .ItemBoxItem .ItemSetWrap{
  transition: unset;
} */


#Item{
  position: relative;
}
@media screen and (min-width: 760px), print {
  .ItemSection .ItemBox .ItemBoxHeader .tabWrap{
    max-width: 1200px!important;
    padding: 0.5rem!important;
  }
}
.swiper-slide {
  height: auto;
}
.swiper-slide figure {
  height: 100%;
}
.swiper-slide figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-scrollbar {
  margin-top: 16px;
  width: 100%;
  height: 100%;
  position: relative;
}
.swiper-scrollbar::before {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background-color: rgba(0, 0 , 0, 0.15);
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.slider__btn {
  aspect-ratio: 1/1;
  background-color: #fff;
}

  /*#Spot .slick-track {margin-left: unset!important;}*/

  /* SpotInner: 画像エリアを固定高にし、画像をカバーでフィット */
  .SpotSection .SpotWrap .SpotBody .SpotInner .SpotCard .SpotImage,
  .SpotSection .SpotWrap .SpotBody .SpotInner .SpotCard .Spotimage,
  .SpotInner .SpotCard .SpotImage,
  .SpotInner .SpotCard .Spotimage,
  .SpotInner .SpotImage,
  .SpotInner .Spotimage{
    height: 176px;
    overflow: hidden;
    background-color: var(--gray-bg-color);
    border-radius: 8px;
  }
  

  /* Spot カード自体にも角丸を適用 */
  

  /* #Theme セクションの最大幅 */
  

  /* Theme: バナーの矢印配置を左右対称に調整 */
  
  

  /* Theme: dots を丸にし、常にスライダーの下に配置 */
  

  /* SP: #Theme のドット径を一回り小さく（テーマ専用・後勝ち） */
  @media screen and (max-width: 767px){
    section#Theme .slick-slide-banner_wrap ul.slick-dots{ gap: 0.25rem !important; }
    section#Theme .slick-slide-banner_wrap ul.slick-dots li,
    section#Theme .slick-slide-banner_wrap ul.slick-dots li button{
      width: 6px !important;
      height: 6px !important;
    }
    section#Theme .slick-slide-banner_wrap ul.slick-dots li button:before{
      content: "" !important;
      font-size: 0 !important;
      line-height: 1 !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 6px !important;
      height: 6px !important;
      border-radius: 50% !important;
      background: rgba(0,0,0,0.25) !important;
      opacity: 1 !important;
    }
    section#Theme .slick-slide-banner_wrap ul.slick-dots li.slick-active button:before{
      background: var(--vivid-color) !important;
      opacity: 1 !important;
    }
    /* appendDots で .slick-slide-banner_wrap 外へ出ても効くよう、#Theme 直下の .slick-dots を強制上書き */
    section#Theme .slick-dots{ gap: 0.25rem !important; }
    section#Theme .slick-dots li,
    section#Theme .slick-dots li button{ width: 6px !important; height: 6px !important; }
    section#Theme .slick-dots li button:before{
      content: "" !important; font-size: 0 !important; line-height: 1 !important;
      position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
      width: 6px !important; height: 6px !important; border-radius: 50% !important; background: rgba(0,0,0,0.25) !important; opacity: 1 !important;
    }
    section#Theme .slick-dots li.slick-active button:before{ background: var(--vivid-color) !important; opacity: 1 !important; }
  }

  /* Theme: ドットのmin-heightリセット（ULは高さを確保） */
  

  /* Theme: SPで画像周りに白背景を敷いて白い線の見切れを解消 */
  /* @media screen and (max-width: 759.9px){
    .slick-slide-banner_wrap ul.recomandBox li{
      background: var(--white-color);
    }
  } */

  /* SpotInner: 矢印の伸び防止 + スマホ位置補正 */
  .SpotInner{ position: relative; }
  .SpotInner .slick-prev,
  .SpotInner .slick-next{
    top: 50%;
    transform: translateY(-50%);
    width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1 !important;
    z-index: 5;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    min-width: 2rem;
    min-height: 2rem;
    overflow: hidden;
    flex: 0 0 auto;
    border: none;
  }
  .SpotInner .slick-prev:before,
  .SpotInner .slick-next:before{
    font-size: 16px !important;
    line-height: 1 !important;
  }
  /* SP: 画面外に出ないように左右0.5rem */
  @media (max-width: 600px){
    /* カード左右の余白と干渉しないよう、若干内側に配置 */
    .SpotInner .slick-prev{ left: 0.5rem !important; right: auto !important; }
    .SpotInner .slick-next{ right: 0.5rem !important; left: auto !important; }
    /* slick-list の左右パディングを確保して、矢印の重なりを回避 */
    .SpotInner .slick-list{ padding: 0.75rem 0.75rem 1rem !important; position: relative; }
    /* 矢印の基準を slick-list にしてズレを防止 */
    .SpotInner .slick-prev,
    .SpotInner .slick-next{ position: absolute; }
  }

  /* SP/Tablet: Spot(Tripa)カードのテキストをPC同等に（黒） */
  .ArticleSection .SpotBody .SpotInner .SpotCardContents{
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    line-height: 1.25;
  }
  .ArticleSection .SpotBody .SpotInner .SpotCardContents .SpotCardTitle{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: var(--main-text-color);
    font-weight: bold;
    margin-bottom: 0.25rem;
  }
  .ArticleSection .SpotBody .SpotInner .SpotCardContents .SpotCardSubText{
    width: 100%;
    font-size: 0.875rem;
    color: var(--main-text-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .ArticleSection .SpotBody .SpotInner .SpotCardContents a{
    color: var(--main-text-color);
    text-decoration: none;
  }

  /* SP: タイトルを大、説明を小に */
  @media (max-width: 600px){
    .ArticleSection .SpotBody .SpotInner .SpotCardContents .SpotCardTitle{
      font-size: 1rem;
    }
    .ArticleSection .SpotBody .SpotInner .SpotCardContents .SpotCardSubText{
      font-size: 0.75rem;
    }
  }

  /* ContactSection SP styles */
  .ContactSection .SectionTextTitle{
    margin: 0 auto 1.25rem;
    max-width: 90%;
  }
  
  

  /* --- page.css --- */
/* ==============================
   Hero: 初期状態（チラつき防止用の最低限スタイル）
   animation.css が遅延しても、初期描画で非表示＋左下を担保する
=============================== */
 
  .Section {
    padding: 2rem 1rem;
  }
 
 
 
/* スマホ表示（768px以下）は上中央配置 */
@media (max-width: 768px){
  .HeroMainLogo{
    position: absolute !important;
    top: 2% !important;
    left: 50% !important;
    /* transform はアニメーション用に合成（位置調整 + アニメーション） */
    transform: translateX(-50%) translateY(var(--reveal-up, 0)) !important;
    bottom: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100;
    max-width: 86%;
    width: 100%;
    margin: 0 !important;
  }
  /* アニメーション完了時: 中央揃えを維持 */
  .Section.Hero .HeroMainLogo[data-reveal-manual="hero"].is-inview{
    transform: translateX(-50%) translateY(0) !important;
  }
  .HeroMainLogo img{
    width: 100%;
    height: auto;
    /* 画像のtransformはアニメーションに影響しないのでnoneでOK */
    transform: none !important;
  }
}
/* PC表示（769px以上）は左下配置 */
@media (min-width: 769px){
  .HeroMainLogo{
    bottom: 45px;
    left: 5px;
    transform: none;
    display: block;
    max-width: none;
    width: auto;
  }
}
/*
.HeroTitleEng{
  position: absolute;
  bottom: 14%;
  left: 8%;
  font-size: 8rem;
  line-height: 1.6;
  text-align: left;
  width: 100%;
  font-family: "Allison", cursive;
  font-weight: 400;
  font-style: normal;
  transform: rotate(-8deg);
  color: #D72D88;
}
*/
/* .HeroKirakira{
    width: 100%;
} */



.HeroImageSubItem01{
  position: absolute;
  left: -108px;
  top: 13px;
}
.HeroImageSubItem01 img{
  width: 56%;
  height: auto;
}
.HeroImageSubItem02{
  position: absolute;
  left: -126px;
  bottom: 93px;
  display: none;
}
.HeroImageSubItem02 img{
  width: 38%;
  height: auto;
}
.HeroImageSubItem03{
  position: absolute;
  right: -396px;
  top: 21px;
}
.HeroImageSubItem03 img{
  width: 46%;
  height: auto;
}
.HeroImageSubItem04{
  position: absolute;
  right: -200px;
    bottom: 30px;
}
.HeroImageSubItem04 img{
  width: 56%;
  height: auto;
}
/* スマホ表示（768px以下）: ハート画像の下左右に固定配置 */
@media (max-width: 768px){
  /* ハート画像は max-width: 94% で中央配置（左右3%ずつ余白） */
  /* 左側: ハート画像の左端に合わせる（画像サイズを考慮して外側に配置） */
  .HeroImageSubItem01{
    position: absolute !important;
    left: 0% !important;
    bottom: 5% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-12.5%) !important;
  }
  .HeroImageSubItem01 img{
    width: 50%;
    height: auto;
    max-width: 240px;
    /* transform はアニメーション用に残す（hero-float-zoom） */
  }
  /* 右側: ハート画像の右端に合わせる（画像サイズを考慮して外側に配置） */
  .HeroImageSubItem04{
    position: absolute !important;
    right: 0% !important;
    bottom: 5% !important;
    left: auto !important;
    top: auto !important;
    transform: translateX(12.5%) !important;
  }
  .HeroImageSubItem04 img{
    width: 50%;
    height: auto;
    max-width: 240px;
    /* transform はアニメーション用に残す（hero-float-zoom） */
  }
}

.HeroKirakira .HeroKirakiraItem01{
  position: absolute;
  left: 13%;
  top: 2%;
}
.HeroKirakira .HeroKirakiraItem01 img{
  width: 27px;
  height: auto;
}
.HeroKirakira .HeroKirakiraItem02{
  position: absolute;
  left: -1%;
  top: 40%;
}
.HeroKirakira .HeroKirakiraItem02 img{
  width: 24px;
  height: auto;
}
.HeroKirakira .HeroKirakiraItem03{
  position: absolute;
  left: -5%;
  bottom: 28%;
}
.HeroKirakira .HeroKirakiraItem03 img{
  width: 16px;
  height: auto;
}
.HeroKirakira .HeroKirakiraItem04{
  position: absolute;
  left: 13%;
  bottom: 5%;
}
.HeroKirakira .HeroKirakiraItem04 img{
  width: 18px;
  height: auto;
}
.HeroKirakira .HeroKirakiraItem05{
  position: absolute;
    right: 19%;
    bottom: 4%;
}
.HeroKirakira .HeroKirakiraItem05 img{
  width: 20px;
  height: auto;
}
.HeroKirakira .HeroKirakiraItem06{
  position: absolute;
  right: -8%;
  top: 61%;
}
.HeroKirakira .HeroKirakiraItem06 img{
  width: 16px;
  height: auto;
}
.HeroKirakira .HeroKirakiraItem07{
  position: absolute;
  right: -15%;
  top: 37%;
}
.HeroKirakira .HeroKirakiraItem07 img{
  width: 20px;
  height: auto;
}
.HeroKirakira .HeroKirakiraItem08{
  position: absolute;
  right: 35%;
  top: 6%;
}
.HeroKirakira .HeroKirakiraItem08 img{
  width: 16px;
  height: auto;
}

.HeroNav{
    width: 100%;
    max-width: 1080px;
    min-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.HeroNav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    max-width: 720px;
}
.HeroNav li{
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
    border: 1px solid #D72D88;
    background-color: #FFF;
    border-radius: 1rem;
    overflow: hidden;
}
.HeroNav a{
  align-items: center;
  /* justify-content: stretch; */
  flex-direction: column;
  gap: 1rem;
  position: relative;
  background-color: #FFF;
  /* border: 4px solid #D72D88; */
  border-radius: 24px;
  padding: 2.5rem 1rem;
  text-decoration: none;
  color: #000000;
  font-size: 1.2rem;
  /* font-weight: 600;
  line-height: 1.6; */
  position: relative;
  width: 100%;
  transition: all 0.6s ease-in-out;
}
.HeroNav li:hover,
.HeroNav li:focus-visible{
    transform: translateZ(0) scale(1.05);
    transition: all 0.3s ease-in-out;
}
 

/* --------------------------------
   Hero: 右上がりピンク背景帯
--------------------------------- */
.Section.Hero{
  position: relative;
  overflow: hidden; /* 帯のはみ出しを隠す */
  min-height: 56vh; /* 初期レンダ時から高さを確定して絶対配置の基準を安定 */
}
/* --------------------------------
   Hero bottom white curve block (outside section)
--------------------------------- */
.HeroBottomShape{
  /* 調整用 */
  --hero-bottom-height: 180px;
  height: var(--hero-bottom-height);
  background-image: url(../images/bg_love_xl03.svg);
  background-repeat: no-repeat;
  background-position: center top; /* カーブ頂点を上部に配置 */
  background-size: 2400px auto;   /* 画面幅に応じて後から調整可 */
  margin-top: -140px; /* セクションとの継ぎ目を少し重ねる */
  position: relative;
  z-index: 2;
}
/* @media (min-width: 1280px){
  .HeroBottomShape{ background-size: 1400px auto; }
} */
@media (max-width: 1024px){
  .HeroBottomShape{ --hero-bottom-height: 160px; background-size: 1100px auto; margin-top: -32px; }
}
@media (max-width: 768px){
  .HeroBottomShape{ --hero-bottom-height: 63px; background-size: 900px auto; margin-top: -24px; }
}
/* --------------------------------
   Hero bottom pattern band behind white curve
   白カーブの“背面”にハートを敷き、ズラして縁取り風に見せる
--------------------------------- */
.HeroBottomOutline{
  opacity: 0.35!important;
  position: relative;
  /* 帯の高さと重なり量は調整可 */
  --outline-height: 220px;   /* マスク内に十分な高さを確保 */
  --outline-overlap: -140px; /* 上方向にどれだけ被せるか（負数で上へ） */
  height: var(--outline-height);
  margin-top: var(--outline-overlap);
  z-index: 1; /* 白カーブ(.HeroBottomShape)より前に出して内側のハートを見せる */
  pointer-events: none;

  /* ピンク地 + 50%白ベール + 白ハートパターン（内側のみ表示） */
  background-color: #D72D88; /* 地色 */
  background-image:
    linear-gradient(rgba(255,255,255,.0125), rgba(255,255,255,.25)), /* 50%トーンダウン */
    url(../images/bg_love03.svg);                                 /* ハート */
  background-repeat: no-repeat, repeat;
  background-position: center bottom, center bottom; /* 先端まで届くよう下基準 */
  background-size: 100% 100%, auto 24px;

  /* マスクで内側だけ可視化（白カーブ形状） */
  -webkit-mask-image: url(../images/bg_love_xl03.svg);
          mask-image: url(../images/bg_love_xl03.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* マスクの基準を下端にして、中央の先端までパターンが続くようにする */
  -webkit-mask-position: center top;
          mask-position: center top;
  -webkit-mask-size: 2400px auto;
          mask-size: 2400px auto;
}
@media (max-width: 1024px){
  .HeroBottomOutline{
    --outline-height: 180px;
    --outline-overlap: -180px;
    background-size: 100% 100%, auto 11px;
  }
}
@media (max-width: 768px){
  .HeroBottomOutline{
    --outline-height: 197px;
        --outline-overlap: -210px;
        background-size: 100% 100%, auto 20px;
        mask-position: center top;
        transform: translateY(27px) !important;
  }
}
/* --------------------------------
   Hero bottom heart-shaped separator
   下部ハートカーブの切り返し
--------------------------------- */
/*
.Section.Hero{
  --hero-sep-height: 160px;
  --hero-sep-color: #D72D88;
  --hero-sep-heart-size: 14px;
}
.HeroSeparator{
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 140vw;
  height: var(--hero-sep-height);
  z-index: 2;
  background-color: var(--hero-sep-color);
  background-image: url(../images/bg_love03.svg);
  background-repeat: repeat;
  background-position: center top;
  background-size: auto var(--hero-sep-heart-size);
  -webkit-mask-image: url(../images/bg_love_xl02.svg);
          mask-image: url(../images/bg_love_xl02.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  pointer-events: none;
}
@media (max-width: 1024px){
  .Section.Hero{ --hero-sep-height: 140px; --hero-sep-heart-size: 12px; }
}
@media (max-width: 768px){
  .Section.Hero{ --hero-sep-height: 120px; --hero-sep-heart-size: 10px; }
  .HeroSeparator{ width: 160vw; }
}
*/

.Section.Hero.is-loaded::before{
  /* ロード完了で全幅表示（左→右へ伸びる） */
  clip-path: inset(0 0 0 0);
}
/* .Section.Hero::after{
  content: "";
  position: absolute;
  left: 50%;
  top: -4vw;
  transform: translateX(-50%) rotate(-5deg);
  width: 160vw;
  height: 44vh;
  min-height: 300px;
  background: #D72D88;
  z-index: -1;
} */
/* ヒーロー内の実要素は前面に */
.Section.Hero .HeroSlick,
.Section.Hero .HeroNav{
  position: relative;
  z-index: 3; /* ナビを前面に */
}
/* @media (max-width: 768px){
  .Section.Hero::before{
    height: 36vh;
    min-height: 220px;
    bottom: -12vw;
    transform: translateX(-50%) rotate(-7deg);
  }
} */

/* タブレット・PC向けヒーロー背景（768px以上） */
@media (min-width: 768px){
  .Section.Hero{
    height: auto;
    min-height: 600px;
    padding: 0.5rem 0 0;
    background: #D72D88;
    /* 2レイヤー: タイル + オフセットタイル（市松配置） */
    background-image: url(../images/hero_heart003_pad.svg), url(../images/hero_heart003_pad.svg);
    background-repeat: repeat, repeat;
    background-position: 0 0, 30px 30px; /* 全体を右下へ30px移動（2層目は+30px） */
    background-size: 60px 60px, 60px 60px;
  }
  .Section.Hero::before{
    content: "";
    position: absolute;
    left: 50%;
    height: 360px;
    bottom: 300px;
    transform: translateX(-50%) rotate(-5deg);
    width: 160vw;
    z-index: -1;
  }
}

/* PC向けの追加調整（1024px以上） */
@media (min-width: 1024px){
  .Section.Hero::before{
    height: 360px;  
    bottom: 300px; 
    transform: translateX(-50%) rotate(-5deg);
  }
}


  .Ranking{
    width: 100%;
    padding: 1rem 0 2rem!important;
    position: relative;
    z-index: 1;
  }

 

.Ranking::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* キラキラのアニメーション */
    
}

/*
.RankingTitleDecoration{
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    display: none;
}
.RankingTitleDecoration img{
    width: 98px;
    height: 98px;
}
.RankingTitleDecoration span.RankingTitleEng{
    font-size: 4rem;
    line-height: 1.6;
    text-align: left;
    font-family: "Allison", cursive;
    font-weight: 400;
    font-style: normal;
    transform: rotate(-2deg);
    color: #D72D88;
}
*/

 
.RankingItemTitleEng{
    font-size: 2.4rem;
    line-height: 1;
    text-align: left;
    font-family: "Allison", cursive;
    font-weight: 400;
    color: #D72D88;
    position: absolute;
    right: 21px;
    top: -38px;
}
.RankingItemImage{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* ランキング画像上にアニメーションSVGを重ねる */
/* 再適用: クラウン位置とサイズの最小指定（装飾を使う場合の安全側） */


/* ================================================ */
/* 4〜10位のみ、ホバー時の拡大率を上げて1位相当の見た目に寄せる（PCホバー環境限定） */

/* RankingListMore 配下も同様にホバーで拡大（PCホバー環境限定） */
.RankingItemTitleJp{
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
    color: #000000;
}

/* 
================================
Area
エリア
================================
*/
 

    /* 
    ================================
    AreaHero
    エリアヘッダー
    ================================
    */
    .AreaHero{
        width: 100%;
        margin: 2rem auto 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    /* スマホ表示（768px以下）での調整 */
    @media (max-width: 768px){
        .AreaHero{
            width: 100% !important;
            margin: 2rem auto 0 !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            justify-content: center !important;
        }
    }
    .AreaHeroInner{
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }
    /* スマホ表示（768px以下）での調整 */
    @media (max-width: 768px){
        .AreaHeroInner{
            padding-inline: var(--sp-pad, 16px) !important;
            padding: 0 !important;
        }
    }
/*
    .AreaHeroRank{
        position: absolute;
        top: -12px;
        left: -50px;
        z-index: 1;
        width: 140px;
        height: auto;
    }
    #Area04 .AreaHeroRank,#Area05 .AreaHeroRank,#Area06 .AreaHeroRank,#Area07 .AreaHeroRank,#Area08 .AreaHeroRank,#Area09 .AreaHeroRank,#Area10 .AreaHeroRank{
      padding: 0 1.6rem;
    }
*/
    
    /* .AreaHero img{
        width: 900px;
        object-fit: cover;
        border-radius: 1rem;
    } */
    .AreaHeroSub{
        picture{
            position: absolute;
            --area-hero-transform: translate(0, 0);
            /* reveal アニメ側が基準位置を尊重するように CSS 変数も連携 */
            --reveal-base-transform: var(--area-hero-transform);
            transform: var(--area-hero-transform);
            /* サブ画像の実画像は picture 内で 60% 表示のため、オーバーレイも同率で縮小 */
            --area-hero-overlay-scale: 0.6;
            img{
                /* 以前の見た目のまま（画像自体の拡大はしない） */
                width: 60%;
                height: auto;
                border-radius: 1rem;
            }
            /* caption{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                text-align: center;
                color: #fff;
                font-size: 1rem;
                font-weight: 700;
                padding: 0.5rem;
                background-color: rgba(0, 0, 0, 0.5);
            } */
        }
        /* ::after を画像サイズに一致させる（左上基準で縮小） */
        picture::after{
            transform: scale(var(--area-hero-overlay-scale, 1));
            transform-origin: top left;
        }
        .AreaHeroLeftTop{
            position: absolute;
            /* top: 0;
            left: 0;
            transform: translate(-76%, -24%); */
            top: 50%;
            left: 50%;
            --area-hero-transform: translate(-160%, -83%);
        }
        .AreaHeroLeftBottom{
            position: absolute;
            /* bottom: 0;
            left: 0;
            transform: translate(-69%, 64%); */
            top: 50%;
            left: 50%;
            --area-hero-transform: translate(-150%, 51%);
        }
        .AreaHeroRightTop{
            position: absolute;
            /* top: 0;
            right: 0;
            transform: translate(109%, -41%); */
            --area-hero-transform: translate(90%, -128%);
            top: 50%;
            left: 50%;
        }
        .AreaHeroRightBottom{
            position: absolute;
            /* bottom: 0;
            right: 0;
            transform: translate(110%, 38%); */
            --area-hero-transform: translate(95%, -1%);
            top: 50%;
            left: 50%;
        } 
    }
    /* PC表示（769px以上）のみ上記の絶対配置を適用 */
    @media (min-width: 769px){
        .AreaHeroSub picture{
            position: absolute;
            --area-hero-transform: translate(0, 0);
            --reveal-base-transform: var(--area-hero-transform);
            transform: var(--area-hero-transform);
            --area-hero-overlay-scale: 0.6;
            width: auto;
            height: auto;
            display: block;
            border-radius: 1rem;
        }
        .AreaHeroSub picture img{
            width: 60%;
            height: auto;
            border-radius: 1rem;
        }
        .AreaHeroSub picture::after{
            content: none;
        }
        /* PCはコンテナ側 ::after を使用（メイン中心基準のpxオフセットと同期） */
        .AreaHeroSub .AreaHeroLeftTop::after,
        .AreaHeroSub .AreaHeroLeftBottom::after,
        .AreaHeroSub .AreaHeroRightTop::after,
        .AreaHeroSub .AreaHeroRightBottom::after{
            content: "";
            transform: scale(var(--area-hero-overlay-scale, 1));
            transform-origin: top left;
            border-radius: inherit;
        }
        /* PC: 中央(50%,50%)を原点にpxで固定オフセット。幅が変わっても一定の余白を維持 */
        .AreaHeroSub .AreaHeroLeftTop{
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%) translate(-360px, -220px); */
        }
        .AreaHeroSub .AreaHeroLeftBottom{
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%) translate(-340px, 180px); */
        }
        .AreaHeroSub .AreaHeroRightTop{
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%) translate(340px, -240px); */
        }
        .AreaHeroSub .AreaHeroRightBottom{
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%) translate(360px, 20px); */
        }
    }
    /* スマホ表示（768px以下）はグリッドレイアウト */
    @media (max-width: 768px){
        .AreaHeroSub{
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px !important;
            padding: var(--sp-pad, 16px) !important;
        }
        .AreaHeroSub picture{
            position: static !important;
            inset: auto !important;
            transform: none !important;
            --area-hero-transform: translate(0, 0) !important;
            --reveal-base-transform: translate(0, 0) !important;
            /* グリッドでは画像は100%表示にするため、オーバーレイスケールは1 */
            --area-hero-overlay-scale: 1 !important;
            width: auto !important;
            display: block !important;
            aspect-ratio: 1 / 1 !important;
            border-radius: 12px !important;
            overflow: hidden !important;
        }
        /* SP/タブレット幅ではコンテナ側 ::after は無効化（picture::after のみ使用） */
        .AreaHeroSub .AreaHeroLeftTop::after,
        .AreaHeroSub .AreaHeroLeftBottom::after,
        .AreaHeroSub .AreaHeroRightTop::after,
        .AreaHeroSub .AreaHeroRightBottom::after{
            content: none !important;
        }
        .AreaHeroSub picture img{
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
            border-radius: inherit !important;
        }
        .AreaHeroSub .AreaHeroLeftTop,
        .AreaHeroSub .AreaHeroLeftBottom,
        .AreaHeroSub .AreaHeroRightTop,
        .AreaHeroSub .AreaHeroRightBottom{
            position: static !important;
            inset: auto !important;
            transform: none !important;
            width: auto !important;
            display: block !important;
            aspect-ratio: 1 / 1 !important;
            border-radius: 12px !important;
            overflow: hidden !important;
        }
    }

    /* タブレット〜小さめPC（769px〜1170px）: 4枚を横並び（4カラム）でメイン画像の下に */
    @media (min-width: 769px) and (max-width: 1170px){
        .AreaHeroSub{
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 12px !important;
            padding: 10px 0 !important;
            position: relative !important;
            width: 100% !important;
            max-width: 900px !important; /* メイン画像と同じ幅 */
            margin: 0 auto !important;
        }
        .AreaHeroSub picture{
            position: static !important;
            inset: auto !important;
            transform: none !important;
            --area-hero-transform: translate(0, 0) !important;
            --reveal-base-transform: translate(0, 0) !important;
            width: auto !important;
            display: block !important;
            aspect-ratio: 1 / 1 !important;
            border-radius: 12px !important;
            overflow: hidden !important;
        }
        .AreaHeroSub picture img{
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
            border-radius: inherit !important;
        }
        .AreaHeroSub .AreaHeroLeftTop,
        .AreaHeroSub .AreaHeroLeftBottom,
        .AreaHeroSub .AreaHeroRightTop,
        .AreaHeroSub .AreaHeroRightBottom{
            position: relative !important;
            inset: auto !important;
            transform: none !important;
            width: auto !important;
            display: block !important;
            aspect-ratio: 1 / 1 !important;
            border-radius: 12px !important;
            overflow: hidden !important;
        }
    }

    /* ================================================
       AreaHero 画像のトーン統一用ピンクグラデーションオーバーレイ
       - メイン画像用 picture は基準にするため relative
       - サブ画像は既に absolute（PC）なのでそのまま ::after を被せる
       - 違和感回避のためごく薄めのトーン
    ================================================ */
    
    .AreaHeroMain picture.AreaHeroMain::after,
    .AreaHeroSub .AreaHeroLeftTop::after,
    .AreaHeroSub .AreaHeroLeftBottom::after,
    .AreaHeroSub .AreaHeroRightTop::after,
    .AreaHeroSub .AreaHeroRightBottom::after{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1; /* 画像の上に重ねる */
      background: linear-gradient(
        to bottom,
        rgba(255, 192, 203, 0.08) 0%,   /* ピンク(薄) */
        rgba(255, 182, 193, 0.14) 100%  /* ピンク(やや濃) */
      );
      border-radius: inherit; /* SP側の角丸を踏襲 */
      border-radius: 32px;
    }

    /* サブ画像も picture 自体にオーバーレイを生成（PC/SPで transform 調整は後段で上書き） */
    .AreaHeroSub picture::after{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1; /* 画像の上に重ねる */
      background: linear-gradient(
        to bottom,
        rgba(255, 192, 203, 0.08) 0%,
        rgba(255, 182, 193, 0.14) 100%
      );
      border-radius: inherit;
    }

    .AreaInfoWrap{
        width: 100%;
        max-width: 860px;
        margin: 1rem auto 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: 1rem;
    }
    /* 
    ================================
    AreaBestSeason
    ベストシーズン
    ================================
    */
    .AreaBestSeason{
        width: 100%;
        min-width: 320px;
        /* max-width: 860px; */
        margin: 0;
        /* order: 2; */
    }
    .AreaBestSeasonTitle{
        font-size: 1rem;
        font-weight: 600;
        text-align: left;
    }
    .AreaBestSeasonContent{
        width: 100%;
        padding: 0 0 0 0.5rem;
        gap: 1rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    /* 
    ================================
    AreaInfo
    エリア情報
    ================================
    */
    .AreaInfo{
        width: 100%;
        min-width: 460px;
        margin: 0;
    }
    .AreaInfoTitle{
        font-size: 1rem;
        font-weight: 600;
        text-align: left;
    }
    .AreaInfoContent{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        /* padding: 0 0 0 0.5rem; */
        padding: 0;
    }

    .AreaInfoList{
        width: calc( 50% - 1rem);
        display: flex;
        background-color: #FFF9F1;
        padding: 0 0 0;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-feature-settings: "palt";
    }

    .AreaInfoListIcon{
        width: 6.2rem;
        height: 6.2rem;
        padding-left: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        svg{
            width: 100%;
            height: 100%;
        }
        img{
            width: 100%;
            /* height: 100%; */
        }
    }
    .AreaInfoListBody{
        width: 100%;
        min-width: 60px;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 0.25rem;
    }
    .AreaInfoListBody li {
        line-height: 1;
    }
    .AreaInfoListBody__title{
        font-size: 0.8rem;
        font-weight: 600;
    }
    .AreaInfoListBody__subtext{
        font-size: 0.6rem;
    }
    .AreaInfoListBodyStrong{
        font-size: 2.4rem;
        font-feature-settings: "palt";
        padding-right: 0.125rem;
        color: #D72D88;
        font-family: "Edu QLD Beginner", cursive;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }



/* 
================================
AreaButton
ボタンエリア
================================
*/
.AreaButton{
    margin: 2rem auto;
    /* background-color: #fdf1f5; */
    padding: 0 4rem 0.5rem;
    background-size: 2%;
}
.AreaButtonBox{ width: 100%; }
.AreaButtonBox{
    width: 100%;
    max-width: 360px;
}
.AreaButtonBox a{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}
.AreaButtonBox span{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: #D72D88;
    font-family: "Allison", cursive;
    font-weight: 400;
    font-style: normal;
}
.AreaButtonBox button{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 0.75rem 0.5rem;
  border: none;
  border-radius: 25rem;
  font-size: 0.875rem;
  letter-spacing: -0.25px;
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid var(--sub-border-color);
  background-color: var(--gray-00-color);
  transition: all 0.3s ease-in-out;
  color: var(--main-text-color);
  scale: 1;
}
.AreaButtonBox button:hover{
  opacity: 1!important;
  scale: 1.1;
}
.AreaButtonBox button svg{
  position: absolute;
  top: 50%;
  right: 0.5rem;
  margin-top: -0.5rem;
  fill: currentcolor;
  width: 1rem;
  height: 1rem;
}
.AreaButtonBox button.ButtonType_tour{
  background-color: #D72D88;
  border-color: #D72D88;
  color: #FFFFFF;
}
.AreaButtonBox button.ButtonType_info{
  background-color: #FFF9F1;
  border-color: #FF8F97;
  color: #000000;
  border-width: 4px;
}

/* PC: ボタンのレイアウトを安定させる（固定幅＋折り返し） */
@media (min-width: 769px){
  .AreaButtonInner{
    max-width: 900px; /* メイン画像と同じ幅に制限 */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;      /* 幅が足りなければ次の段へ */
    gap: 24px;            /* 行間・列間 */
    justify-content: center;
  }
  .AreaButtonBox{
    flex: 0 1 420px;      /* 固定に近い横幅で並べる */
    max-width: 420px;
  }
  /* 濃い色（検索）を優先して上段に、観光情報はスペースが足りなければ下段へ */
  .AreaButtonBox:has(.ButtonType_tour){ order: 1; }
  .AreaButtonBox:has(.ButtonType_info){ order: 2; }
}

/* --------------------------------
   Gantt months header color override
   月見出し背景色を #D72D88 に変更
--------------------------------- */
.Area .gantt .gantt__row--months{
    background-color: #FFF9F1 !important;
}





/* ==============================
   Tentsuki Layout (変則構成)
   PC: 2つのスライダーを横並び（各スライダー2枚表示）
   SP: 2つのスライダーを縦並び（各スライダー1枚表示）
============================== */
.js-tentsuki-layout {
    display: flex !important;
    flex-direction: row;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

/* .js-pickup .ItemBoxItemのgridを上書き（より具体的なセレクタで優先度を上げる） */
.js-tentsuki-layout .ItemBoxItem,
.ItemBoxItemWrap.js-tentsuki-layout .ItemBoxItem {
    flex: 1;
    min-width: 0; /* flexboxでの縮小時の対策 */
    display: block !important; /* .js-pickup .ItemBoxItemのdisplay: gridを上書き */
}

/* .js-pickupクラスがあってもgrid表示を無効化 */
.js-tentsuki-layout .js-pickup .ItemBoxItem,
.ItemBoxItemWrap.js-tentsuki-layout .js-pickup .ItemBoxItem,
.js-pickup .js-tentsuki-layout .ItemBoxItem {
    display: block !important;
    grid-template-columns: none !important;
}

@media (max-width: 768px) {
    .js-tentsuki-layout {
        flex-direction: column;
        gap: 12px;
    }
    
    .js-tentsuki-layout .ItemBoxItem,
    .ItemBoxItemWrap.js-tentsuki-layout .ItemBoxItem {
        width: 100%;
        display: block !important;
    }
    
    .js-tentsuki-layout .js-pickup .ItemBoxItem,
    .ItemBoxItemWrap.js-tentsuki-layout .js-pickup .ItemBoxItem,
    .js-pickup .js-tentsuki-layout .ItemBoxItem {
        display: block !important;
        grid-template-columns: none !important;
    }
}

/* Honeymoon PickUp slider - responsive grid + mobile scroll snap */
/*.js-pickup .ItemBoxItem:not(.slick-initialized){
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 0;
  }*/
  @media (max-width: 1024px){
    /* タブレット: 3枚表示の横スライド */
    .js-pickup .ItemBoxItem{
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      /* 横スクロール中にビューポートへチェーンしない（画面がガクッと動くのを防止） */
      overscroll-behavior-x: contain;
      /* 水平方向のパンを許可（iOS/Safari での誤ジェスチャ抑止） */
      touch-action: pan-x pan-y;
      padding: 0 12px 28px;
    }
    .js-pickup .ItemBoxItem::-webkit-scrollbar{ display: none; }
    .js-pickup .ItemBoxItem .ItemSetWrap{
      /* 3カラム: ギャップ12pxが2つ分ある前提 */
      flex: 0 0 calc((100% - 24px) / 3);
      scroll-snap-align: start;
    }
    .js-pickup .SliderDots{
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
    }
    .js-pickup .SliderDot{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ddd;
    }
    .js-pickup .SliderDot.is-active{
      background: #D72D88;
    }
  }
  @media (max-width: 768px){
    /* 小さめタブレット: 2枚表示の横スライド（親のflex/scroll設定は1024px以下で有効） */
    .js-pickup .ItemBoxItem .ItemSetWrap{
      /* 2カラム: ギャップ12pxが1つ分ある前提 */
      flex: 0 0 calc((100% - 12px) / 2);
    }
  }
  @media (max-width: 480px){
    .js-pickup .ItemBoxItem{
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      /* 横スクロール中にビューポートへチェーンしない（画面がガクッと動くのを防止） */
      overscroll-behavior-x: contain;
      /* 水平方向のパンを許可（iOS/Safari での誤ジェスチャ抑止） */
      touch-action: pan-x pan-y;
      padding: 0 12px 28px;
    }
    .js-pickup .ItemBoxItem::-webkit-scrollbar{ display: none; }
    .js-pickup .ItemBoxItem .ItemSetWrap{
      flex: 0 0 98%;
      scroll-snap-align: start;
    }
    .js-pickup .SliderDots{
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
    }
    .js-pickup .SliderDot{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ddd;
    }
    .js-pickup .SliderDot.is-active{
      background: #D72D88;
    }
  }

  /* Align hotel card title heights across slides/cards */
  .js-pickup .ItemSet.ItemSetHotel .ItemSetCardName{
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* default: up to 3 lines */
    line-clamp: 3;
  }
.AreaBodyHeading{
    width: 100%;
    max-width: 820px;
    margin: 0 auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
}
.AreaBodyHeadingIcon{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    position: relative;
}
.AreaBodyHeadingText{
    width: 100%;
    margin: 1rem auto;
    position: relative;
    max-width: 420px;
}
.AreaBodyHeadingEng{
    font-size: 3rem;
    font-weight: 400;
    text-align: left;
    width: 100%;
    font-family: "Allison", cursive;
    font-weight: 400;
    font-style: normal;
    transform: rotate(-8deg);
    color: #D72D88;
}
.AreaBodyHeadingText p{
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}
.ItemBox{
  padding: 3rem;
  border: 1px solid #D72D88;
  background-color: #f2dae226;
  width: 100%;
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem 1rem;
  max-width: calc(1200px + 2rem);
  max-width: 1200px;
  margin: 4rem auto 4rem;
  border-radius: 3rem;
  gap: 2rem;
}
.ItemBoxContent{
  width: 100%;
}



 

 
  




/* .Area.AreaEven .AreaButton{
    background-color: #CFE9C3;
} */
/* .Area.AreaEven .ItemBox{
    border: 1px solid #88e85c;
} */

 

/* 
================================
Area AreaEven
エリア個別対応
================================
*/

/* .Area{
  border-top: 32px solid #fdf1f5;
} */
/* .Area.AreaEven{
  border-top: 32px solid #CFE9C3;
}

.Area.AreaEven .AreaTitle h2 .AreaTitleEng{
  color: #6AA84F;
} */

.TentsukiTourPointLabel {
  width: 80px;
  max-width: 80px;
  margin: -1rem 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #D72D88;
  color: #FFF;
  padding: 1.5rem .5rem 2.5rem .5rem;
  font-feature-settings: "palt";
  font-size: 1.1rem;
  position: absolute;
  top: -30px;
  left: 0;
  z-index: 100;
}

.TentsukiTourPointLabel::after {
  content: "";
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
    border-bottom: 30px solid #fff;
    border-right: 40px solid transparent;
    z-index: 1;
}
.TentsukiTourPointLabel span {
  width: 100%;
  font-size: 3.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  line-height: 1;
  letter-spacing: -0.5rem;
    text-align: center;
    padding-right: 0.25rem;
}

#Area01 .AreaTitle h2 .AreaTitleJp{
  font-size: 2.8rem; /* 3文字 */
}
#Area01 .AreaTitle h2 .AreaTitleEng{
  font-size: 5rem;
  left: 40%;
}
#Area02 .AreaTitle h2 .AreaTitleJp{
  font-size: 2.6rem; /* 4文字 */
}
#Area02 .AreaTitle h2 .AreaTitleEng{
  font-size: 5rem;
}
#Area03 .AreaTitle h2 .AreaTitleJp{
  font-size: 2.6rem;
}
#Area03 .AreaTitle h2 .AreaTitleEng{
  font-size: 5rem;
}
#Area04 .AreaTitle h2{
  width: 360px;
  min-width: 240px;
}
#Area04 .AreaTitle h2 .AreaTitleJp{
  font-size: 2rem; /* 6-7文字 */
}
#Area04 .AreaTitle h2 .AreaTitleEng{
  font-size: 4.4rem;
}
#Area05 .AreaTitle h2 .AreaTitleJp{
  font-size: 2.6rem;
}
#Area05 .AreaTitle h2 .AreaTitleEng{
  font-size: 3.8rem;
  left: 44%;
}
#Area06 .AreaTitle h2 .AreaTitleJp{
  font-size: 2.8rem; /* 3文字 */
}
#Area06 .AreaTitle h2 .AreaTitleEng{
  font-size: 5rem;
  left: 48%;
}
#Area07 .AreaTitle h2{
  line-height: 1.2;
}
#Area07 .AreaTitle h2 .AreaTitleJp{
  font-size: 2.8rem; /* 6-7文字 */
  position: relative;
}
#Area07 .AreaTitle h2 .AreaTitleJp small{
  font-size: 1rem; /* 6-7文字 */
  position: absolute;
  bottom: -23px;
  left: 12px;
}
#Area07 .AreaTitle h2 .AreaTitleEng{
  font-size: 5rem;
  top: 80%;
}
#Area08 .AreaTitle h2 .AreaTitleJp{
  font-size: 2.5rem; /* 4文字 */
}
#Area08 .AreaTitle h2 .AreaTitleEng{
  font-size: 5rem;
}
#Area09 .AreaTitle h2 .AreaTitleJp{
  font-size: 2.5rem; /* 4文字 */
}
#Area09 .AreaTitle h2 .AreaTitleEng{
  font-size: 3rem;
  line-height: 1;
}
#Area10 .AreaTitle h2{
  width: 360px;
}
#Area10 .AreaTitle h2 .AreaTitleJp{
  font-size: 2rem; /* 6-7文字 */
}

.gantt {
  width: 100%;
  border-radius: 0.5rem;
  /* border: 0.5px dotted #c5bab2 !important; */
}
.gantt__row--months {
  border-bottom: none!important; 
}
.gantt__row--months span {
  font-size: 0.7rem;
  font-weight: 400;
  padding: 0.25rem 0;
  font-feature-settings: "palt";
}
.gantt__row--lines span:first-child,
.gantt__row--months span:first-child{
  border-left: none!important;
}
.gantt__row--lines span:last-child,
.gantt__row--months span:last-child{
  border-right: none!important;
}

.gantt__row--lines span,
.gantt__row--months span{
  border-right: 0.5px dotted #c5bab2 !important;
}
.gantt__row-bars li {
  font-size: 0.75rem;
  border-radius: 2px;
}
.gantt__row-bars {
  padding: 8px 0;
}
.gantt__row-bars:first-child {
  padding: 8px 0 4px;
}
.gantt__row-bars:last-child {
  padding: 4px 0 8px;
}

.AreaBestSeasonMemoContent{
  padding: 0;
}
.AreaBestSeasonMemoContent li{
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: left;
  font-weight: normal;
}
.AreaBestSeasonMemoContent li span{
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
  font-weight: 600;
}

.ArticleSection .SpotBody {
  width: 100%;
  max-width: 1000px;
  margin: 0.75rem auto 2rem;
  padding: 0 0 1rem;
}


.slick-slide img {
  border-radius: 8px;
}

section#Contact .SectionInner{
  padding: 4rem;
  background-color: #fff9f1;
}


.QaWrap{
  background-color: #fff9f1;
}
.QaWrap .SectionHeading{
  padding: 0 2rem;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
/* Generic section heading with heart separators */
.SectionHeading{ position: relative; padding: 2rem 0; }
.SectionHeading::before,
.SectionHeading::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 12px;
  background: url(../images/hero_heart002.svg) center / auto 12px repeat-x;
  opacity: .85;
  pointer-events: none;
}
.SectionHeading::before{ top: 0; }
.SectionHeading::after{ bottom: 0; }
.QaWrap .SectionHeading h2 picture{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.QaWrap .SectionHeadingSub{
  font-size: 1rem;
  width: 80%;
  text-align: center;
  padding: 1rem;
  margin: 0 auto;
}
.QaBody{
  padding: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.QaBody .QaBox{
  padding: 2rem;
  width: calc( 50% - 1rem);
  background-color: #fff;
  border-radius: 24px;
  position: relative;
}
.QaBody .QaBox.is-wide{
  width: 100%;
}
.QaBody .QaBox h3{
  padding: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.QaBody .QaBox h3 img{
  width: 4rem;
  height: 4rem;
}

.QaBoxBody{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: visible; /* グラフのラベル見切れ防止 */
}

.QaBox.is-wide .QaBoxBody {
  flex-direction: row;
  /* align-items: flex-start; */
  gap: 2rem;
}
.QaBoxBodyText{
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.QaBoxBodyTextMain{
  width: 100%;
  text-align: center;
}
.QaBoxBodyTextMain span{
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  background-color: var(--vivid-color);
  color: #fff;
  padding: 0.125rem 0.5rem;
}
.QaBoxBodyTextSub{
  width: 100%;
  padding: 1rem 0;
  line-height: 1.6;
  font-size: .95rem;
}
.QaBoxBodyTextList li{
  font-size: .85rem;
  padding: 0.75rem;
  margin: 0.5rem 0;
  background-color: #fdf1f5;
}

.QaBoxBodyTextList li span{
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
}

.QaBox .QaBoxBody .QaBoxBodyText{
  width: 100%;
  max-width: 100%;
} 

.QaBox .QaBoxBody .QaBoxBodySub{
  width: 100%;
  max-width: 100%;
  overflow: visible; /* ラベル見切れ防止 */
} 
.QaBox.is-wide .QaBoxBody .QaBoxBodyText{
  width: 100%;
  max-width: 50%;
} 

.QaBox.is-wide .QaBoxBody .QaBoxBodySub{
  width: 100%;
  max-width: 50%;
} 

/* Chart container */
.QaChart {
  flex: 1 1 360px;
  min-width: 280px;
  max-width: 520px;
  height: 360px; /* JS側でResizeObserverでも調整 */
}

/* ラベル風EChartsのラベルをカード間で見切れないように */
.QaBox .QaChart {
  overflow: visible;
}
/* ECharts が生成する内側ラッパーの overflow を強制的に可視化 */
.QaChart > div{ overflow: visible !important; }
/* SVG 自体の既定 overflow:hidden を無効化してラベルのはみ出しを許可 */
.QaChart svg{ overflow: visible; }


.QaBoxIcon{
  position: absolute;
  width: 80px;
  height: 80px;
}
#QaBox01 .QaBoxIcon{
  top: -22px;
  right: 0;
}
#QaBox02 .QaBoxIcon{
  top: -24px;
  left: -48px;
}
#QaBox03 .QaBoxIcon{
  top: -28px;
  right: -36px;
}
#QaBox04 .QaBoxIcon{
  top: -27px;
  left: -18px;
}
#QaBox04 .QaBoxIcon.is-bottom{
  top: auto;
  left: auto;
  bottom: -20px;
  right: -20px;
}

/* ==============================
   QaBox card subtle glow
   ============================== */
.QaBox{
  background: #fff;
  border-radius: 16px;
  /* 目立たない柔らかい光彩（背景と分離） */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  overflow: visible; /* ラベルがカード外にはみ出しても見えるように */
}
.QaBox.is-wide{ border-radius: 20px; }

@media (max-width: 768px){
  .QaBox{
    border-radius: 12px;
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.06),
      0 1px 0 rgba(255, 255, 255, 0.65) inset;
  }
}
.App section.ArticleSection{
  background-color: #fff;
}
.App section.ArticleSection::before{
  display: none;
}
section#Contact .SectionInner {
  background-color: #fff;
}


.Section.ArticleSection .SectionTitle,
.Section.Ranking .SectionTitle,
.Section.QaWrap .SectionTitle,
.Section.SearchWrap .SectionTitle,
.Section.ContactSection .SectionTitle,
.Section.ThemeWrap .SectionTitle {
  width: calc(100% - 6rem);
  margin: 2rem auto 4rem;
  padding: 2rem 1rem 3rem;
  /* border: 1px solid #eadadb; */
  font-size: 1.8rem;
}

/* ==============================
   SectionTitle 共通: ハート仕切り線（上下）
============================== */
 




 
/* PC: 2x2グリッド表示 */
.ItemBoxContentItemInner .js-pickup .ItemBoxItem {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 0;
  width: 100%;
}

/* タブレット・スマホ: 横スクロールスライダーで1枚ずつ表示（gridを無効化） */
@media (max-width: 1024px) {
  .ItemBoxContentItemInner {
    flex-direction: column;
    gap: 12px;
  }
  
  .ItemBoxContentItemInner .js-pickup .ItemBoxItem {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 12px 28px;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }
  .ItemBoxContentItemInner .js-pickup .ItemBoxItem.slick-initialized {
    display: block !important;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    padding: 0 0 28px;
  }
  
  .ItemBoxContentItemInner .js-pickup .ItemBoxItem::-webkit-scrollbar {
    display: none;
  }
  
  .ItemBoxContentItemInner .js-pickup .ItemBoxItem .ItemSetWrap {
    flex: 0 0 98%;
    scroll-snap-align: start;
  }
  /* slick有効時は各カードのflex基準は不要 */
  .ItemBoxContentItemInner .js-pickup .ItemBoxItem.slick-initialized .ItemSetWrap {
    flex: none;
    scroll-snap-align: none;
  }
}
/* --- page_sp.css --- */
/* Smartphone overrides (<=600px)
   目的: 横スクロールを出さず安全に折り返す。PCの見た目は維持。
*/

/* 汎用余白 */
:root{ --sp-pad: 16px; }
.App section{ padding: 1.5rem 0 3rem; }

/* コンテナ類の min-width 解除 + 余白付与 */
.HeroNav,
.RankingTitleWrap,
.RankingListMore,
.AreaHeading,
.ItemBoxHeading{
  min-width: 0 !important;
  padding-inline: 0;
}
.SectionInner {
  padding: var(--sp-pad);
}
.Section.Hero {
  min-height: 60vh;
  padding: 0 0;
}


.HeroImage {
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: 60%;
  padding: 0;
  height: auto !important;
}
.HeroMainImage {
  max-width: 94%;
  width: 100%;
  position: static;
  top: auto;
  left: auto;
  display: block;
  order: 2;
  padding-top: 29%;
  padding-bottom: 7%;
  margin: 0 auto;
}
/* 画像要素を確実にフィット */
.HeroMainImage img{
  width: 100%;
  height: auto;
  display: block;
}
.HeroMainLogo {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  max-width: 86%;
  width: 100%;
}
.HeroMainLogo img {
  width: 100%;
}
.HeroImageSubItem04 {
  position: absolute !important;
  left: auto !important;
  right: 0% !important;
  bottom: 2% !important;
  top: auto !important;
  transform: translateX(15%) !important;
}
.HeroImageSubItem04 img{
  width: 50%;
  height: auto;
  max-width: 240px;
  /* transform はアニメーション用に残す（hero-float-zoom） */
}
.HeroImageSubItem01 {
  position: absolute !important;
  left: 0% !important;
  bottom: 3% !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-15%) !important;
}
.HeroImageSubItem01 img{
  width: 50%;
  height: auto;
  max-width: 240px;
  /* transform はアニメーション用に残す（hero-float-zoom） */
}
.HeroImageSubItem03,.HeroImageSubItem02{
  display: none;
}

.Section.Hero .HeroImageSub, .Section.Hero .HeroKirakira
 {
    /* z-index: 10; */
    pointer-events: auto;
    z-index: 3 !important;
}


/* ヒーローナビ: 縦積み・縮小 */
.HeroNav{ max-width: 100%; padding: 0.5rem;}
.HeroNav ul{ gap: 0.5rem;width: 100%; }
.HeroNav li{ max-width: none; }
.HeroNav a{ font-size: .85rem;
  padding: 1rem .125rem;
  gap: .25rem;
  flex-direction: column;
  text-align: center;
  height: auto;}
.HeroNavIcon img{ width: 48px; height: 48px; }
.HeroNavLabel {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  position: relative;
  color: #000000;
  text-align: center;
}
.HeroNavLabelEng{
  margin-bottom: 0.5rem;
    position: relative;
    color: #D72D88;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.HeroNavLabelEng img{
  max-height: 28px
}


/* ランキング: 折り返し許可 */

.RankingListInner{ flex-wrap: wrap; gap: 4rem; padding-inline: var(--sp-pad); }
/* SP: RankCrown（以前の指定に合わせる） */
.RankingItemImage .RankCrown,
.RankingItemImage img[src*="_ribon"]{
  max-width: 40px;
  width: auto;
  height: auto;
  top: -13px;
  left: -8px;
}
/* 4位以降のカードはやや小さめ（以前の指定） */
.RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(n+2) .RankingItemImage .RankCrown,
.RankingList > .RankingListInner:nth-of-type(3) .RankingItemBox .RankingItemImage .RankCrown,
.RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(n+2) .RankingItemImage img[src*="_ribon"],
.RankingList > .RankingListInner:nth-of-type(3) .RankingItemBox .RankingItemImage img[src*="_ribon"] {
  max-width: 32px;
}
.RankingItemTitleJp {
  font-size: 1.2rem;
}
.RankingItemTitleJp small {
  display: block;
  font-size: 70%;
  line-height: 2;
  padding-left: 0.5rem;
}
/* =========
   スマホ幅調整（〜767px）: 総合レイアウト最適化
========= */
@media (max-width: 767px){
  .RankingList{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 3.75rem;
    padding-inline: var(--sp-pad);
  }
  /* ラッパーをフラット化してアイテムを連続配置 */
  .RankingListInner{
    display: contents;
    gap: 0;
    padding-inline: 0;
  }
  /* RankingListMore は独立した2列グリッド */
  .RankingListMore{
    padding-inline: var(--sp-pad);
  }
  .RankingListMore .RankingListInner{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 3.75rem;
    padding-inline: 0;
  }
  .RankingList .RankingItemBox,
  .RankingListMore .RankingItemBox{
    width: 100%;
  }
  /* 1〜3位は全幅 */
  .RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(-n+3){
    grid-column: 1 / -1;
  }
  /* 4位も全幅、5位以降は自動で2列配置 */
  .RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(1){
    grid-column: 1 / -1;
  }

  /* 5〜10位の日本語タイトル高さを揃える */
  .RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(n+2) .RankingItemTitleJp,
  .RankingList > .RankingListInner:nth-of-type(3) .RankingItemBox .RankingItemTitleJp{
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    align-items: flex-start;
  }
  /*
  .RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(n+2) .RankingItemImage .RankCrown,
  .RankingList > .RankingListInner:nth-of-type(3) .RankingItemBox .RankingItemImage .RankCrown {
    max-width: 32px;
    top: 24px;
    left: 12px;
  }
  */
  .RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(n+2) .RankingItemTitleEng,
  .RankingList > .RankingListInner:nth-of-type(3) .RankingItemBox .RankingItemTitleEng {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    position: absolute;
    right: 3px;
    top: -30px;
  }
}

/* 1位〜3位 大きく（全幅・余白最小化） */
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(1),
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(2),
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(3){
  width: 100%;
}
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(1) .RankingItemImage,
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(2) .RankingItemImage,
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(3) .RankingItemImage{
  max-width: 100%;
}
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(1) .RankingItemTitleEng,
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(2) .RankingItemTitleEng,
.RankingList > .RankingListInner:nth-of-type(1) .RankingItemBox:nth-child(3) .RankingItemTitleEng{
  font-size: clamp(1.8rem, 9vw, 2.6rem);
}

/* 4位 少し小さく（全幅だが内側を絞る） */
.RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(1){
  width: 100%;
}
.RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(1) .RankingItemImage{
  max-width: 100%;
  margin-inline: auto;
}
.RankingList > .RankingListInner:nth-of-type(2) .RankingItemBox:nth-child(1) .RankingItemTitleEng{
  font-size: clamp(1.6rem, 8vw, 2.2rem);
}

/* Area（見出し・装飾） */
.Area{ background-size: 800px auto; padding: 3rem 1rem 6rem;}
.Area::before {
  top: -78px;
  width: 120vw;
  height: 90px;
  background-size: 600px auto;
}
.AreaTitle{ gap: 0; padding-top: .5rem; flex-wrap: wrap; padding: 0;}
.TentsukiTourPointLabel {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translate(-50%, 0);
  padding: 2.25rem .5rem 2.5rem .5rem;
}
.TentsukiTourPointLabel span{
  font-size: 2.2rem;
  letter-spacing: -0.25rem;
}
.TentsukiTourPointLabel::after {
  border-left: 40px solid transparent;
  border-bottom: 16px solid #fff;
  border-right: 40px solid transparent;
}
.AreaTitle h2 {
  width: auto;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 5rem;
}
.AreaTitle h2 .AreaTitleJp {
  font-size: 2rem!important;
}
/* AreaTitleEng を元の位置指定に戻す */
.AreaTitleEng{
  font-size: 4rem!important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: translate(0, 0) rotate(-8deg) !important;
  text-align: center;
}
 

.AreaHeadingText p {
  width: 100%;
  font-size: 0.9rem;
}
.AreaHeadingText h3 {
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* .AreaHero {
  order: 2;
}
.AreaInfoWrap {
  order: 3;
} */
/* Area ヒーロー（左右のサブ画像がはみ出さないよう調整） */
.AreaHeroInner{ padding-inline: var(--sp-pad); padding: 0; }
/* 2x2グリッド・均等化 */
.AreaHeroSub{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: var(--sp-pad);
  /* order: 4; */
  padding: 10px 0!important;
}
@media (max-width: 420px){
  .AreaHeroSub{ gap: 10px; }
}

.AreaHeroSub .AreaHeroRightTop,
.AreaHeroSub .AreaHeroRightBottom,
.AreaHeroSub .AreaHeroLeftTop,
.AreaHeroSub .AreaHeroLeftBottom{
  position: static;
  inset: auto;
  transform: none;
  width: auto; /* gridに任せる */
  display: block;
  aspect-ratio: 1 / 1; /* 正方形 */
  border-radius: 12px; /* 基本の角丸（内側は控えめ） */
  overflow: hidden; /* 角丸を適用 */
}

/* SP: オーバーレイ(::after)を各要素の内側にフィットさせるための基準付与 */
.AreaHeroSub .AreaHeroRightTop,
.AreaHeroSub .AreaHeroRightBottom,
.AreaHeroSub .AreaHeroLeftTop,
.AreaHeroSub .AreaHeroLeftBottom{
  position: relative; /* ::after(inset:0)の基準 */
  top: 0;
        left: 0;
        --area-hero-transform: translate(0, 0);
}

/* 念の為、メイン画像のpictureにも基準を付与（PC側と整合） */
 
.AreaHeroSub .AreaHeroRightTop img,
.AreaHeroSub .AreaHeroRightBottom img,
.AreaHeroSub .AreaHeroLeftTop img,
.AreaHeroSub .AreaHeroLeftBottom img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 同じ見え方にトリミング */
  display: block;
  border-radius: inherit;
}

/* 外側4隅だけ角丸を大きく（24px） - クラス別に正確指定 */
/* .AreaHeroSub .AreaHeroLeftTop{ border-top-left-radius: 24px; }
.AreaHeroSub .AreaHeroLeftBottom{ border-top-right-radius: 24px; }
.AreaHeroSub .AreaHeroRightTop{ border-bottom-left-radius: 24px; }
.AreaHeroSub .AreaHeroRightBottom{ border-bottom-right-radius: 24px; } */

/* Area 情報ブロック: 縦積み */
.AreaInfoWrap{ flex-wrap: wrap !important; gap: 1rem;  }
.AreaBestSeason,
.AreaInfo{ min-width: 0; width: 100%; margin: 0; }
.AreaInfoContent{ padding: 0; }
.AreaBestSeasonContent{ padding: 0; }
/* .AreaInfoList{ width: 100%; } */
.AreaInfoList{
  width: 47%;
}
.AreaInfoListIcon {
  width: 5rem;
  height: 5rem;
  padding-left: 0.25rem;
}
.AreaInfoListBody__title {
  font-size: 0.6rem;
}
.AreaInfoListBodyStrong {
  font-size: 1.4rem;
}


.AreaButtonInner {
  flex-wrap: wrap;
  padding: 1rem var(--sp-pad) 2rem;
  gap: 0;
}
.AreaButtonBox span {
  font-size: 2rem;
}
.AreaBody{
  padding: var(--sp-pad) 0;
}
.AreaBodyHeading {
  max-width: none;
  flex-wrap: wrap;
  gap: 0;
  padding-inline: var(--sp-pad);
  padding: 0 0.5rem 1rem;
}
.AreaBodyHeadingEng {
  font-size: 2rem;
  text-align: center;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
}
.AreaBodyHeadingIcon {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.AreaBodyHeadingText {
  width: 100%;
  margin: 0 auto 0.5rem;
  position: relative;
  max-width: 420px;
}
.AreaBodyHeadingText p {
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: left;
}
/* ItemBox 見出しなど */
.ItemBox{ padding: 1.25rem 0.5rem 0 0.5rem; border-radius: 1.25rem; margin: .5rem auto 0; gap: 0; }
.ItemBoxHeading h4{ font-size: 1.2rem; }

/* 英字や大見出しの過大を抑制 */
.RankingItemTitleEng{ font-size: clamp(1.6rem, 8vw, 2.2rem); }
.ItemBoxHeading_Tentsuki,
.ItemBoxHeading_dp {
  flex-wrap: wrap;
  gap: 0;
}
.ItemBoxHeading_Tentsuki h4,
.ItemBoxHeading_dp h4 {
  font-size: 0.85rem;
}
/* SP: 商品カード（slick）見切れ対策・レイアウト調整 */
.ItemBox .ItemBoxContent{ overflow: visible;width: 100%; }
.ItemBox .ItemBoxContent .ItemBoxContentInner{ overflow: visible; }
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap{ overflow: visible;width: 100%; }
/* slick の内側に余白を付与し、カードの影や左右ののぞき見を許可 */
.ItemBox .slick-list{ padding: 0 .75rem !important; overflow: hidden; }
.ItemBox .slick-track{ overflow: visible; }
/* 注意: ピックアップのカルーセル(`.js-pickup`)は `page.css` 側で
   `.js-pickup .ItemBoxItem{ overflow-x:auto; display:flex; ... }` を設定しているため、
   ここでの一般指定は `.js-pickup` 配下には適用しない */
.ItemBox:not(.js-pickup) .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem {
  overflow: visible;
  padding: 0;
}

/* ===== 横スワイプで“画面”が動かないように強制ガード ===== */
/* ルートの横スクロールは禁止 */
html, body{ overflow-x: hidden; overscroll-behavior-x: none; }
/* ページ主要コンテナでも横方向をクリップして安全側に */
#wrapper, .App, .Section{ overflow-x: clip; overscroll-behavior-x: none; }
/* slick は migrate.css で touch-action: pan-y が入っているため SP では横パンを許可 */
.ItemBox .slick-slider,
.ItemBox .slick-list,
.ItemBox .slick-track{ touch-action: pan-x !important; }
/* 手動スワイプのチェーン停止（iOS/Safari等） */
.js-pickup .ItemBoxItem{ overscroll-behavior-x: contain; touch-action: pan-x pan-y; }

/*
.HeroTitleEng{ font-size: clamp(2.4rem, 14vw, 3.6rem);
  left: 28%;
  bottom: auto;
  top: 6%;
  transform: translate(-50%, 0) rotate(-8deg)!important;
  text-align: center;
}
*/

/* 装飾（キラキラ等）のはみ出し抑止。必要に応じて非表示 */
.HeroKirakira .HeroKirakiraItem01{ right: 0; }
.HeroKirakira .HeroKirakiraItem02{ left: 0; }
.HeroKirakira .HeroKirakiraItem03{ right: 0; }
.HeroKirakira .HeroKirakiraItem04{ left: 0; }
@media (max-width: 420px){
  .HeroKirakira,
  .HeroKirakira .HeroKirakiraItem01,
  .HeroKirakira .HeroKirakiraItem02,
  .HeroKirakira .HeroKirakiraItem03,
  .HeroKirakira .HeroKirakiraItem04{ display: none!important; }
}
@media (max-width: 600px){
  .HeroKirakira,
  .HeroKirakira .HeroKirakiraItem01,
  .HeroKirakira .HeroKirakiraItem02,
  .HeroKirakira .HeroKirakiraItem03,
  .HeroKirakira .HeroKirakiraItem04{ display: none!important; }
}

/* ===== SPヒーロー: 端末の高さが低い時のズレ防止 =====
   PC側の .Section.Hero が vh 依存のため、高さが不安定になる。
   SPでは dvh 優先＋pxフォールバックで安定させる。 */
@supports (height: 1dvh){
  .Section.Hero{
    height: auto !important;
    min-height: 60dvh; /* 安定した見え方（SE縦でも十分な高さ） */
    background-color: #D72D88;
  }
  .Section.Hero::before,
  .Section.Hero::after{
    height: 50dvh;
    min-height: 180px;
  }
  .Section.Hero::before {
    bottom: 20%;
  }
  .Section.Hero::after {
    background-color: #fff;
  }
}
@supports not (height: 1dvh){
  .Section.Hero{
    height: auto !important;
    min-height: 520px; /* dvh非対応端末向けの固定基準 */
  }
  .Section.Hero::before,
  .Section.Hero::after{
    height: 220px;
    min-height: 220px;
  }
}

/* 細々とした安全策 */
#wrapper{ overflow-x: hidden; }
img{ max-width: 100%; height: auto; }





.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemSetInner .ItemSetBody .ItemSetCardName {
  font-size: .8rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSubTitle
 {
    font-size: 0.75rem;
    top: 2.3rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardText .ItemCardSubText {
  font-size: 0.7rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .ItemPriceText
 {
    font-size: 0.7rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .ItemPriceSubText {
  font-size: 0.7rem;
}



section#Contact .SectionInner {
  padding: 2rem 1rem;
  background-color: #fff9f1;
}
.ContactSection .contactBox .contactBoxIcon
 {
    min-width: 64px;
}






.QaWrap .SectionHeading {
  padding: 0 0;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

/* Qa chart layout (SP) */
.QaBox.is-wide .QaBoxBody {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}


.QaChart {
  width: 100%;
  min-width: 0;
  height: 260px; /* smaller on SP */
}


.QaBody {
  padding: 0;
  max-width: none;
  margin: 0 auto;
}
.QaBody .QaBox{
  width: 100%;
  background-color: #fff;
  position: relative;
}
.QaBody .QaBox.is-wide{
  width: 100%;
}
.QaBoxIcon{
  position: absolute;
  width: 80px;
  height: 80px;
}
#QaBox01 .QaBoxIcon{
  top: -22px;
  right: 0;
}
#QaBox02 .QaBoxIcon{
  top: -15px;
  left: -15px;
}
#QaBox03 .QaBoxIcon{
  top: -19px;
  right: -23px;
}
#QaBox04 .QaBoxIcon{
  top: -27px;
  left: -18px;
}

.QaBoxBody{
  flex-wrap: wrap;
}
.QaBox.is-wide .QaBoxBody {
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
}

.QaBox.is-wide .QaBoxBody .QaBoxBodyText{
  width: 100%;
  max-width: 100%;
  order: 2;
} 

.QaBox.is-wide .QaBoxBody .QaBoxBodySub{
  width: 100%;
  max-width: 100%;
  order: 1;
} 

.QaBody .QaBox h3 {
  padding: 1rem;
  font-size: 1.4rem;
  flex-direction: column;
}

/* ===== 端末の高さが低いときの微調整（SP限定） ===== */
/* @media (max-width: 768px) and (max-height: 720px){
  .HeroImage{ min-height: 64%; }
  .HeroMainLogo{ top: 56%; }
  .HeroMainLogo img{ max-width: 86%; }
  .HeroTitleEng{ top: 4%; }
}
@media (max-width: 768px) and (max-height: 640px){
  .HeroImage{ min-height: 58%; }
  .HeroMainLogo{ top: 56%; }
  .HeroMainLogo img{ max-width: 86%; }
  .HeroTitleEng{ top: 2%; font-size: clamp(2.0rem, 12vw, 3.2rem); }
} */


.Section.ArticleSection .SectionTitle,
.Section.Ranking .SectionTitle,
.Section.QaWrap .SectionTitle,
.Section.SearchWrap .SectionTitle,
.Section.ContactSection .SectionTitle,
.Section.ThemeWrap .SectionTitle {
  width: calc(100% - 3rem);
  margin: 2rem auto 2rem;
  padding: 2.4rem 1rem 2rem;
  /* border: 1px solid #eadadb; */
  font-size: 1.2rem;
}

.RankingListMore h3 {
  width: calc(100% - 3rem);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  position: relative;
  padding: 2rem 1rem 2rem;
  padding-top: calc(1rem + 20px);
  padding-bottom: calc(1rem + 20px);
  margin-bottom: 3rem;
  text-align: center;
}

.AreaButton {
  margin: 2rem auto 0;
  /* background-color: #fdf1f5; */
  padding: 0 0 0.5rem;
  background-size: 10%;
}



#Area07 .AreaTitle h2 .AreaTitleJp {
  font-size: 2.8rem;
  position: relative;
  height: auto;
  line-height: 1;
}
#Area07 .AreaTitle h2 .AreaTitleJp small {
  font-size: 0.85rem;
  position: static;
  bottom: auto;
  left: auto;
}



.ItemBoxContentItemInner{
  width: 100%;
  max-width: 100%;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

/*----------------------------------------------------
NTA調整 add 20251121
----------------------------------------------------*/
.search_kaigaiBar {

}