:root {
   --theme-main-color: #EF1F75;
   --theme-main-dark: #781A23;
   --theme-main-pale: #EADADB;
   --theme-main-pale20: #D97C7C;
   --vivid-color: #C22A39;
   --yellow-pale: #F5D3A3;
   --yellow-color: #FFD805;
   --yellow-dark: #C28F3A;
   --green-pale: #93C47D;
   --green-color: #6AA84F;
   --green-dark: #3B6E47;
   
   --main-border-color: #ddd;
   --sub-border-color: #ccc;
   --main-text-color: #333;
   --sub-text-color: #666;
   --map-bg-color: #F2ECD6;
   --gray-bg-color: #eee;
   --white-color: #fff;
   --black-color: #000;
   --price-color: #C22A39;
   --gray-00-color:#F5F5F5;
   --gray-10-color:#EADADB;
   --gray-60-color:#999;
 
   --dp-bg-01: var(--theme-main-color);
   --dp-bg-02: #FFC7A7;
   --dp-bg-03: #FFD091;
   --dp-bg-transparent-70: #F5D3A370;
   --dp-bg-transparent-80: #e9be6280;
 
   --bg-transparent-95: #ffffff95;
   --bg-transparent-90: #ffffff90;
   --bg-transparent-80: #ffffff80;
   --bg-transparent-b5: #ffffffb5;
   --bg-transparent-e4: #ffffffe4;
 }

.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);
}

.swiper{
  width: 100%;
  max-width: none;
  padding: 1rem 1rem 1.5rem;
}

section * {
  box-sizing: border-box;
}

section h2{
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 2;
  position: relative;
  color: #241810;
  font-feature-settings: "palt";
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
}

#wrapper{
 overflow: hidden;  
 background: #FFF;
}
.App section {
  padding: 4rem 0 6rem;
}

.Section {
  border-top: none;
}

.Section.Hero .HeroMainImage img,
.Section.Hero .HeroMainLogo  img{
  opacity: 1;
  transform: none;
}

.Hero{
  position: relative;
  overflow: hidden;
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.Hero .LoadingSvg {
  position: absolute;
  left: -5vw;
  bottom: 40%;
  width: 110vw;
  height: auto;
}

.HeroImage{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 3;
  padding: 2rem 0;
}

.HeroMainLogo{
  position: absolute;
  bottom: 45px;
  left: 5px;
  z-index: 10;
}

.HeroNavLabel{
  font-size: 24px;
  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;
  width: 100%;
  height: 36px;
}
.HeroNavLabelEng img{
  height: 100%;
  width: auto;
  max-height: 36px
}

.Area{
  width: 100%;
  margin: 0 auto;
  --area-separator-height: 48px;
  --area-separator-pattern-size: 16px;
  position: relative;
  padding: var(--area-separator-height) 0 0;
  background-position: top center;
  background-size: 1200px auto;
  background-repeat: no-repeat;
  padding: 3rem 1rem 10rem;
}
.Area::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--area-separator-height);
  background:
      url(../images/bg_love01.svg) center top / auto var(--area-separator-pattern-size) repeat,
      linear-gradient(#fdf1f5, #fdf1f5);
  pointer-events: none;
  z-index: 1;
}
.Area::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -108px;
  transform: translateX(-50%);
  width: 160vw;
  height: 156px;
  background-image: url(../images/bg_love_xl02.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1800px auto;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1024px){
  .Area::after{
    height: 40px;
    background-size: 16px auto;
    top: 0;
  }
}
@media (max-width: 768px){
  .Area::after{
    height: 40px;
    background-size: 16px auto;
    top: 0;
  }
}
@media (max-width: 600px){
  .Area::after{
    height: 40px;
    background-size: 16px auto;
    top: 0;
  }
}
@media (max-width: 768px){
  .Area{
    --area-separator-height: 40px;
  }
}

.AreaHeading{
  width: 100%;
  max-width: 1080px;
  min-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #FFF;
}

.AreaTitle{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 3rem;
  position: relative;
  padding: 1rem 0rem 0 10rem;
}
.AreaTitle h2{
  width: 260px;
  min-width: 180px;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  font-feature-settings: "palt";
  padding-top: 1.25rem;
  color: #000;
  text-align: left;
  display: block;
}
.AreaTitleEng{
  font-size: 4.8rem;
  line-height: 1;
  text-align: left;
  width: 100%;
  font-family: "Allison", cursive;
  font-weight: 500;
  font-style: normal;
  color: #D72D88;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.AreaHeadingText{
  width: 100%;
  max-width: 900px;
  margin: 1.5rem auto 0;
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  gap: 1rem;
}

.AreaHeadingText h3{
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  position: relative;
  display: inline;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
}
@media (prefers-reduced-motion: reduce){
  .AreaHeadingText h3{ background-size: 100% 100%; }
}
.AreaHeadingText p{
  width: 90%;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

.AreaHero{
    width: 100%;
    margin: 2rem auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
@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;
    }
}
.AreaHeroMain{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
@media (max-width: 768px){
  .AreaHeroMain{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .AreaHeroMain picture.AreaHeroMain{
    position: relative !important;
    display: block !important;
  }
  .AreaHeroMain picture.AreaHeroMain img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 1rem !important;
  }
}

.AreaHeroMain picture.AreaHeroMain{
  position: relative;
  display: block;
}
.AreaHeroMain picture.AreaHeroMain img{
  border-radius: 1rem;
}

html{
  scroll-behavior: smooth;
  color: #241810;
}
@media (max-width: 768px){
  .HeroImage{
    justify-content: center !important;
    align-items: flex-start;
    text-align: center;
  }
  .Section.Hero .HeroImage{
    justify-content: center !important;
  }
}

.HeroMainImage{
  max-width: 84%;
}
.PictureCredit{
  color: #666;
  font-size: 9px;
  /* position: absolute;
  bottom: -13px; */
}

.Section.ArticleSection .SectionTitle,
.Section.Ranking .SectionTitle,
.Section.QaWrap .SectionTitle,
.Section.SearchWrap .SectionTitle,
.Section.ContactSection .SectionTitle,
.Section.ThemeWrap .SectionTitle {
  background-color: #ffffffb3;
  max-width: 600px;
  border-radius: 0.5rem;
}

.Section .SectionTitle span.SectionHeadingEng{
  font-size: 3rem;
  line-height: 1;
  text-align: left;
  font-family: "Allison", cursive;
  font-weight: 500;
  font-style: normal;
  transform: rotate(-2deg);
  color: #D72D88;
  text-transform: capitalize;
  margin-bottom: 1.6rem;
}

section.QaWrap{
  position: relative;
  background-color: #FFF4E5;
  background-image:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url('../images/hero_heart001_pad.svg'),
    url('../images/hero_heart001_pad.svg');
  background-repeat: no-repeat, repeat, repeat;
  background-position: 0 0, 0 0, 40px 40px;
  background-size: 100% 100%, 80px 80px, 80px 80px;
}
section.QaWrap::before,
section.QaWrap::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: url('../images/bg_love01.svg');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 10px;
  pointer-events: none;
  z-index: 1;
}
section.QaWrap::before{ top: -1px; }
section.QaWrap::after{ bottom: -1px; }

.Section#Theme, section#Theme{
  background-color: #FDEFF4;
}

section#Theme .SectionInner{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

 .App section.SearchWrap{
   background-color: #FFF4E5;
 }

.App section.ArticleSection{
  background-color: #fff;
}
.App section.ArticleSection::before{
  display: none;
}

.SpotSection .SpotWrap .SpotBody .SpotInner .SpotCard,
.SpotInner .SpotCard{
  border-radius: 8px;
  overflow: hidden;
}

.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;
}

.SpotSection .SpotWrap .SpotBody .SpotInner .SpotCard .SpotImage img,
.SpotSection .SpotWrap .SpotBody .SpotInner .SpotCard .Spotimage img,
.SpotInner .SpotCard .SpotImage img,
.SpotInner .SpotCard .Spotimage img,
.SpotInner .SpotImage img,
.SpotInner .Spotimage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.AreaButton{
  width: 100%;
  border-radius: 8px;
  background-image: url(../images/bg_love02.svg);
  background-repeat: repeat;
}
.AreaButtonInner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 2rem;
  gap: 2rem;
}

.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;
}

@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; }
}

section#Contact .SectionInner{
  padding: 4rem;
}

.ContactSection .SectionTextTitle{ background-color: var(--green-dark); }

.ContactSection .SectionContent{
  margin: 0 auto;
}

.ContactSection .SectionTextTitle{
  display: block;
  color: var(--white-color);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  position: relative;
  text-align: center;
  line-height: 1.4;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.ContactSection .SectionTextTitle:before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--green-dark);
}
.ContactSection .contactBox:hover{ opacity: 0.8; }
.ContactSection .contactBox .contactBoxIcon svg{ width: 48px; height: 48px; }

.ContactSection .contactBox{
  width: 100%;
  padding: 0;
  border: 1px solid var(--main-border-color);
  background-color: var(--white-color);
  border-radius: 0.5rem;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.ContactSection .contactBox a{
  color: var(--main-text-color);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}
.ContactSection .contactBox .contactBoxIcon{
  width: 64px;
  min-width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
}
.ContactSection .contactBox .contactBoxContentTitle{ font-weight: bold; font-size: 1rem; }
.ContactSection .contactBox .contactBoxContentText{ font-size: 0.875rem; line-height: 1.6; }
.ContactSection .contactBox .contactBoxButton{ margin-left: auto; }
.ContactSection .contactBox + .contactBox{ margin-top: 1rem; }

@media screen and (max-width: 759.9px){
  .ContactSection .SectionContent{ padding: 0 1rem; }
}

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

.RankingItemImage img{
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.RankingItemImage{
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
}
.RankingItemImage{
  overflow: visible;
}

.RankingItemBox{
  width: 100%;
}
.RankingItemBox a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.RankingItemBox a:hover,
.RankingItemBox a:focus-visible{
  transform: translateZ(0) scale(1.05);
}
@media (prefers-reduced-motion: reduce){
  .RankingItemBox a{ transition: none; }
}
.RankingItemImage picture > img{
  transition: filter .35s ease, -webkit-clip-path .35s ease, clip-path .35s ease;
}
.RankingItemBox a:hover .RankingItemImage picture > img,
.RankingItemBox a:focus-visible .RankingItemImage picture > img{
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.12));
}

.RankingListInner{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
}

.RankingTitleWrap{
  width: 100%;
  max-width: 1080px;
  min-width: 760px;
  margin: 1rem auto 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
.RankingTitleWrap{
  position: relative;
  padding:  3rem 0;
  max-width: 600px;
}
.RankingTitleWrap::before,
.RankingTitleWrap::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  background: url(../images/hero_heart002_pad4.svg) center / auto 8px repeat-x;
  opacity: .85;
  pointer-events: none;
}
.RankingTitleWrap::before{ top: 0; }
.RankingTitleWrap::after{ bottom: 0; }

.RankingTitleWrap h2{
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.6;
  position: relative;
}

.RankingList{
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4rem;
  margin: 6rem auto;
}

.RankingListInner.is-last{
  width: 100%;
  max-width: 840px;
}

.RankingListMore{
  width: 100%;
  max-width: 800px;
  margin: 4rem auto 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}

.RankingListMore h3{
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  position: relative;
  padding: 2rem 6rem 3rem;
  padding-top: calc(1rem + 20px);
  padding-bottom: calc(1rem + 20px);
  margin-bottom: 3rem;
}
.RankingListMore h3::before,
.RankingListMore h3::after{
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  height: 8px;
  background: url(../images/hero_heart002_pad4.svg) center / auto 8px repeat-x;
  opacity: .85;
  pointer-events: none;
}
.RankingListMore h3::before{ top: 6px; }
.RankingListMore h3::after{ bottom: 6px; }

.RankingListMore .RankingItemBox a { gap: 0.5rem; }
.RankingListMore .RankingItemTitleJp{ font-size: 1.05rem; padding-top: 8px; }
.RankingListMore .RankingItemTitleEng { font-size: 2rem; width: 100%; display: flex; }

.RankingItemTitleJp{
  font-size: 1.25rem;
  font-weight: 600;
  text-align: left;
  color: #000000;
}

.RankingItemImage > img,
.RankingItemImage picture > img{
  position: relative;
  z-index: 0;
}
.RankingItemImage picture{
  position: relative;
  display: block;
}
.RankingItemImage picture::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 192, 203, 0.08) 0%,
    rgba(255, 182, 193, 0.14) 100%
  );
  border-radius: inherit;
}

.RankingItemImage .RankCrown,
.RankingItemImage img[src*="_ribon"]{
  position: absolute;
  pointer-events: none;
}
.RankingItemImage .RankRing{ z-index: 1; }
.RankingItemImage .RankCrown,
.RankingItemImage img[src*="_ribon"]{ z-index: 2; }
.RankingItemImage .RankCrown,
.RankingItemImage img[src*="_ribon"]{ 
  max-width: 48px;
  width: auto;
  height: auto;
  top: -14px;
  left: -14px;
  border-radius: 0;
}

@media (hover: hover) and (pointer: fine){
  .RankingItemBox{ position: relative; }
  .RankingItemBox:hover{ z-index: 10; }

  .RankingItemBox a[href="#Area04"]:hover,
  .RankingItemBox a[href="#Area05"]:hover,
  .RankingItemBox a[href="#Area06"]:hover,
  .RankingItemBox a[href="#Area07"]:hover{
    transform: translateZ(0) scale(1.05);
  }
  .RankingItemBox a[href="#Area08"]:hover,
  .RankingItemBox a[href="#Area09"]:hover,
  .RankingItemBox a[href="#Area10"]:hover{
    transform: translateZ(0) scale(1.05);
  }
}

@media (hover: hover) and (pointer: fine){
  .RankingListMore .RankingItemBox{ position: relative; }
  .RankingListMore .RankingItemBox:hover{ z-index: 10; }
  .RankingListMore .RankingItemBox a:hover{
    transform: translateZ(0) scale(1.05);
  }
}

 /* slick base (shared) */
 .slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-dotted.slick-slider {
  margin-bottom: 0;
}
.slick-dots {
  position: absolute;
  bottom: -1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
.slick-dots .slick-active {
  color: var(--vivid-color);
  transition: all 0.3s ease-in-out;
}
.slick-dots li button:before {
  font-family: "slick";
  font-size: 36px;
  line-height: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: var(--black-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: var(--vivid-color);
  line-height: 1;
}
.slick-prev,
.slick-next {
  width: 2rem;
  height: 2rem;
  background-color: var(--white-color) !important;
  padding: 0.25rem !important;
  border-radius: 50%;
  background-size: 50% 50% !important;
  background-position: center !important;
  box-shadow: 0 0 6px var(--sub-border-color);
  transition: 0.3s;
}
.slick-prev:hover,
.slick-next:hover {
  scale: 1.1;
  opacity: 1;
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled{
  transition: 0.8s;
  opacity: 0;
}

/* slick banner arrows (shared) */
.slick-slide-banner_wrap{
  position: relative;
}
.slick-slide-banner_wrap .slick-prev,
.slick-slide-banner_wrap .slick-next{
  top: 50%;
  transform: translateY(-50%);
  width: 2rem !important;
  height: 2rem !important;
  padding: 0.25rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  min-width: 2rem;
  min-height: 2rem;
  overflow: hidden;
}

@media (min-width: 1025px){
  .slick-slide-banner_wrap .slick-prev{ left: -0.5rem !important; right: auto !important; }
  .slick-slide-banner_wrap .slick-next{ right: -0.5rem !important; left: auto !important; }
}
@media (max-width: 1024px){
  .slick-slide-banner_wrap .slick-prev{ left: 0.5rem !important; right: auto !important; }
  .slick-slide-banner_wrap .slick-next{ right: 0.5rem !important; left: auto !important; }
}

.slick-slide-banner_wrap .slick-dots{
  position: static !important;
  bottom: auto !important;
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  min-height: 1rem;
  height: auto !important;
}
.slick-slide-banner_wrap .slick-dots li{ width: 0.5rem !important; height: 0.5rem !important; margin: 0; display: inline-flex; align-items: center; justify-content: center; }
.slick-slide-banner_wrap .slick-dots li button{ padding: 0; width: 0.5rem !important; height: 0.5rem !important; }
.slick-slide-banner_wrap .slick-dots li button:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  opacity: 1;
}
.slick-slide-banner_wrap .slick-dots li.slick-active button:before{ background: var(--vivid-color); }
.slick-slide-banner_wrap .slick-dots li,
.slick-slide-banner_wrap .slick-dots li button{ min-height: 0 !important; }

/* Loading overlay (shared) */
.LoadingOverlay {
  display: none;
}

/* ItemBox base (shared) */
.ItemBox {
  position: relative;
}

.ItemBoxContent{
  width: 100%;
}

.ItemBoxHeading{
  width: 100%;
  max-width: 1080px;
  min-width: 760px;
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.ItemBoxHeading h4{
  font-size: 1.4rem;
  font-weight: 600;
  text-align: left;
}
.ItemBoxHeading h4::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ddd;
}

.ItemBoxHeading_Tentsuki{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.ItemBoxHeading_Tentsuki h4{
  font-size: 1.3rem;
  font-weight: 600;
  text-align: left;
  background-color: #cfe9c3;
  color: #000000;
  padding: 0.5rem 1rem;
  width: 100%;
  margin-bottom: 1rem;
  text-align: center;
  border-radius: 4px;
}
.ItemBoxHeading_dp h4{
  font-size: 1.3rem;
  font-weight: 600;
  text-align: left;
  background-color: #FFD805;
  color: #000000;
  padding: 0.5rem 1rem;
  width: 100%;
  margin-bottom: 1rem;
  text-align: center;
  border-radius: 4px;
}

/* ItemBox header base (shared) */
.ItemBox .ItemBoxHeader .tabWrap {
  border-bottom: none;
  padding: 0 1rem;
}

/* tabs base (shared) */
.ItemSection .ItemBox .ItemBoxHeader .tabWrap .tab {
  overflow:unset;
  /* justify-content: center; */
  gap: 0;
  padding: 1rem 6rem 1rem 6rem;
  padding: 1rem 1rem;
  padding: 0;
}
@media screen and (min-width: 760px), print {
  .ItemSection .ItemBox .ItemBoxHeader .tabWrap .tab {
    justify-content: center;
    padding: 1rem 1rem;
  }
}
.ItemBox .ItemBoxHeader .tabWrap .tab.is-many-tabs {
  justify-content: flex-start;
  /* padding: 0 1rem 0.5rem; */
}
.ItemSection .ItemBox .ItemBoxHeader .tabWrap .tab .tabItem {
  width: auto;
  min-width: auto;
  min-height: 60px;
}
@media screen and (min-width: 760px), print {
  .ItemSection .ItemBox .ItemBoxHeader .tabWrap .tab .tabItem  {
    min-width: 190px;
    min-height: 128px;
  }
}

.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 .ItemBoxHeader .tabWrap .tab .tabItem:hover {
  background-color: var(--white-color);
}
.ItemBox .ItemBoxHeader .tabWrap .tab .tabItem.is-selected {
  background-color: var(--vivid-color);
  border-color: var(--vivid-color);
  color: var(--white-color);
}

.ItemBox .ItemBoxHeader .tabWrap .tab .tabItem a {
  color: var(--main-text-color);
}
.ItemBox .ItemBoxHeader .tabWrap .tab .tabItem .tabItemSvg {
  width: 100%;
}
.ItemBox .ItemBoxHeader .tabWrap .tab .tabItem .tabItemSvg svg {
  width: 1rem;
  height: 1rem;
  color: var(--vivid-color);
}

.Section .SectionButton {
  display: block;
  width: 100%;
  padding: 1rem 3rem 1rem 3rem;
  border: none;
  margin: 2rem auto 0;
}
.Section .SectionButton .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;
  font-weight: 700;
  letter-spacing: -0.25px;
  line-height: 1.2;
  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);
}
.Section .SectionButton .Button:hover {
  background-color: var(--sub-border-color);
  opacity: 1!important;
}
.Section .SectionButton a .Button:hover{ opacity: 1!important; }
.Section .SectionButton a{ opacity: 1!important; }
.Section .SectionButton{ opacity: 1!important; }
.Section .SectionButton .Button svg {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  margin-top: -0.5rem;
  fill: currentcolor;
  width: 1rem;
  height: 1rem;
}

.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItemHeader .SectionTextTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
  padding: 0.5rem;
  position: relative;
  background-color: var(--theme-main-color);
  color: var(--white-color);
  border-radius: 0.25rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItemHeader .SectionTextTitle:before,
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemTitleWrap:before {
  display: none;
}

.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem {
  border-radius: 0.5rem;
  position: relative;
  padding-left: 0.25rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemImage {
  width: 100%;
  height: 120px;
  overflow: hidden;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemImage img {
  width: 100%;
  height: auto;
}

.ItemBox .ItemCard img {
  width: auto!important;
  height: 100%!important;
  max-height: 176px!important;
  margin: 0 auto!important;
  border-radius: 0.25rem!important;
}

.SectionBanner img {
  width: 100%;
  height: auto;
}

.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap {
  position: relative;
  background-color: var(--white-color);
  border: 1px solid var(--main-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap:hover {
  opacity: 1!important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a {
  color: var(--main-text-color);
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a:hover {
  opacity: 1!important;
}

.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");
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetTerm .ItemTermText {
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  color: var(--main-text-color);
}

.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice {
  padding: 0.5rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .PricePop {
  width: 100%;
  margin: 0.25rem auto 0.125rem;
  padding: 0.125rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-bg-color);
  gap: 0.25rem;
  border-radius: 0.25rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .PricePop .PricePopIcon {
  padding: 0.125rem;
  background-color: var(--white-color);
  border-radius: 5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .PricePop .PricePopIcon svg {
  width: 16px;
  height: 16px;
  fill: var(--theme-main-pale);
  color: var(--theme-main-color);
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .PricePop .PricePopText {
  font-size: 0.875rem;
  font-weight: 700;
  overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  /* padding-left: 0.25rem; */
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .PricePop .PricePopNumber {
  font-size: 0.75rem;
  width: 3.6rem;
  margin-left: auto;
  text-align: left;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .ItemPrice {
  width: 100%;
  padding: 0.25rem 0.25rem 0;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  color: var(--price-color);
  letter-spacing: -0.005rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .ItemPrice .ItemPriceCurrency {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .ItemPriceSubText {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  color: var(--main-text-color);
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet.ItemSetPrice .ItemPriceText {
  width: 100%;
  padding: 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  color: var(--main-text-color);
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardImage {
  width: 100%;
  max-height: 196px;
  overflow: hidden;
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner.Tentsuki001Wrap .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardImage {
  border-radius: 0;
  max-height: 210px;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardImage_noslick {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 196px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  /*border-radius: 0.25rem;*/
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardImage div.slick-slide{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--gray-bg-color);
  text-align: center;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardImage_noslick div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--gray-bg-color);
  width: 100%;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardImage img {
  display: block;
  max-height: 198px;
  border-radius: 0.25rem;
  width: auto;
  height: 100%;
  margin: 0 auto;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner.Tentsuki001Wrap .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardImage img {
  border-radius: 0;
  max-height: 216px;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap.is-tentsuki a .ItemSet .ItemCard .ItemCardImage img {
    width:100%;
    height:auto;
    max-height:unset!important;
    min-height:unset!important;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardImage_noslick img {
  display: block;
  max-height: 198px;
  border-radius: 0.25rem;
    width: 100%;
    height: auto;
    margin: 0;
}

.ItemCardCopy{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-size: 0.75rem;
  padding: 0 0.25rem;
}
.ItemCardTag{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0.5rem 8px;
  gap: 0.25rem;
  min-height: 40px;
}
.ItemCardTag li{
  width: 100%;
  max-width: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.125rem 0.25rem;
  background-color: #EEE;
  border: 1px solid #CCC;
  line-height: 1;
  height: 32px;
  text-align: center;
  flex-wrap: wrap;
  border-radius: 0.125rem;
}
.ItemCardTag li.tag-no1{
  background-color: #D0B460;
  border-color: #B48F22;
  color: #FFF;
}
.ItemCardTag li.tag-season{
  background-color: #121E8A;
  border-color: #162063;
  color: #FFF;
}
.ItemCardTag li.tag-highRating{
  background-color: #8B3636;
  border-color: #430808;
  color: #FFF;
}
.ItemCardTag li span{
  font-size: 0.625rem;
  width: 100%;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardText {
  text-align: center;
  margin-bottom: 0.5rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap.is-tentsuki a .ItemSet .ItemCard .ItemCardText {
  padding: 0.5rem;
  margin:8px;
  background-color: #FBF4E4;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardText .ItemCardTitle {
  font-size: 1rem;
  font-weight: bold;
  padding: 0.25rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemSet .ItemCard .ItemCardText .ItemCardSubText {
  font-size: 0.875rem;
  text-align: left;
  min-height: 4rem;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItemHeader p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemTitleWrap {
  position: relative;
  background-color: var(--gray-bg-color);
  overflow: visible;
  z-index: 2;
  min-height: 88px;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap a .ItemTitle {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 1rem;
  background-color: var(--gray-bg-color);
  border-radius: 0.5rem 0.5rem 0 0;
}
.ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap.is-tentsuki a .ItemTitle {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  padding: 0.75rem 1rem 0.25rem;
  background-color: var(--gray-bg-color);
  border-radius: 0.5rem 0.5rem 0 0;
  min-height: 3.4rem;
}
.ItemSection#Tentsuki5 .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap.is-tentsuki a .ItemTitle {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  padding: 0.75rem 1rem 0.25rem;
  background-color: var(--gray-bg-color);
  border-radius: 0.5rem 0.5rem 0 0;
  /*min-height: auto;*/
}

 .ItemBox .ItemBoxHeader .ItemBoxTitle {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #FBF4E4;
   max-width: 960px;
   margin: 0 auto;
   padding: 1rem;
   font-size: 0.85rem;
   border-radius: 0.5rem;
   font-weight: bold;
   text-align: center;
 }
 
/* swiper slides base (shared) */
.swiper-slide {
  height: auto;
}
.swiper-slide figure {
  height: 100%;
}
.swiper-slide figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.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%);
}
.swiper-scrollbar_position,
.swiper-scrollbar{
  display: none!important;
}

/* slick images in list (shared) */
.ItemBox .slick-list img {
  width: 100%;
}

/* slick dots hardening (shared) */
.slick-dots{ list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.slick-dots > li{ list-style: none !important; }
.slick-dots > li::marker{ content: "" !important; }
.slick-dots > li > button{ font-size: 0 !important; color: transparent !important; line-height: 0 !important; overflow: hidden; }

/* SectionTitle heart separator (shared) */
.Section .SectionTitle{
  position: relative;
  /* 既存の上下1remに、仕切り分の余白(20px)を足す */
  padding-top: calc(1rem + 20px);
  padding-bottom: calc(1rem + 20px);
}
.Section .SectionTitle::before,
.Section .SectionTitle::after{
  content: "";
  position: absolute;
  left: 1rem;   /* ボックス内の左右余白に揃える */
  right: 1rem;
  height: 1px; /* ハート行の高さ */
  background: url(../images/hero_heart002_pad4.svg) center / auto 1px repeat-x;
  opacity: .85;
  pointer-events: none;
}
.Section .SectionTitle::before{ top: 12px; }
.Section .SectionTitle::after{ bottom: 12px; }

/* ItemBox footer dots (shared) */
.ItemBoxItemFooter ul.slick-dots,
.ItemBoxItemFooter .slick-dots{
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding-left: 0;
  width: 100%;
}
.ItemBoxItemFooter .slick-dots > li{ list-style: none; }
.ItemBoxItemFooter .slick-dots > li::marker{ content: ""; }
.ItemBoxItemFooter .slick-dots > li > button{ font-size: 0; color: transparent; line-height: 0; overflow: hidden; }
.ItemBoxItemFooter .slick-dots li button:before{ font-size: 16px; line-height: 1; }
.ItemBoxItemFooter .slick-dots li.slick-active button:before{ opacity: 1; color: var(--vivid-color); }

/* QA list reset (shared) */
.QaBoxBodyTextList{ list-style: none; }

/* gantt row bars (shared) */
.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; }

/* Footer spacing tweaks by breakpoint (shared) */
@media (max-width: 600px){
  .ItemBoxItemFooter{ margin-top: 0.5rem; padding: 0.75rem 0.5rem; }
}

/* Tablet/SP: ホバー/アクティブ時の拡大で見切れないようにスケール無効化 (shared) */
@media (max-width: 1024px){
  .js-pickup .ItemBoxItem .ItemSetWrap:hover,
  .js-pickup .ItemBoxItem .ItemSetWrap:active{
    scale: 1 !important;
    transform: none !important;
  }
  /* slickスライドにも保険をかける */
  .js-pickup .ItemBoxItem .slick-slide:hover,
  .js-pickup .ItemBoxItem .slick-slide:active{
    scale: 1 !important;
    transform: none !important;
  }
}

/* ポインタがhover非対応端末でも確実に無効化 (shared) */
@media (hover: none){
  .js-pickup .ItemBoxItem .ItemSetWrap:hover,
  .js-pickup .ItemBoxItem .ItemSetWrap:active{
    scale: 1 !important;
    transform: 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;
  }
}

@media (min-width: 1025px){
  #Area02 .js-pickup .ItemBoxItem,
  #Area03 .js-pickup .ItemBoxItem{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  #Area02 .ItemBoxContentItemInner .js-pickup .ItemBoxItem,
  #Area03 .ItemBoxContentItemInner .js-pickup .ItemBoxItem{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}