/* ===========### foundation ###=========== */
#Wrap {
  max-width: 100%;
}

.productListAll #pagination:first-child {
  display: none;
}

#breadcrumb {
  display: none;
}

@media screen and (min-width: 561px) {
  #pagination.below {
    max-width: 120rem;
    margin-inline: auto;
  }

  #sortBlock {
    width: 120rem;
    justify-content: end;
    margin: auto;
  }
}

.categorylist--bottom {
  margin-top: 0;
}

.NOE_20240508_lantinam_3 img,
.NOE_20240508_lantinam_3 picture,
.NOE_20240508_lantinam_3 iframe {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  vertical-align: bottom;
}

.NOE_20240508_lantinam_3 iframe {
  height: 100%;
}

.hacobune-app-container[data-v-43c29d38]{
  background: none;
  padding: 0;
}

.hacobune-unit-video-outline[data-v-5d0e34c6]{
  padding: 0;
}

.hacobune-app-container[data-v-43c29d38] {
  width: 100%;
}

/*************************************************
PC/SP共通
*************************************************/
.main_area {
  margin-top: 7.6rem;
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  letter-spacing: 0;
  font-feature-settings: normal;
  overflow: hidden;
  color: #000;
}

.credit_area {
  font-family: adobe-garamond-pro, serif;
  font-size: 1.8rem;
  font-weight: 400;
  font-style: normal;
  position: relative;
  z-index: 2;
  width: fit-content;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  -webkit-font-smoothing: antialiased;
}

.credit_area li a{
  display: inline;
  line-height: 1.11;
}

.credit_area li span {
  padding: 0 .5rem;
}

@media screen and (max-width: 767px) {
  .main_area {
    margin-top: 0;
    padding-top: calc(6*(100vw / 750));
  }
  
  .credit_area {
    font-size: calc(22*(100vw/750));
  }
  
  .credit_area li span {
    padding: 0 calc(6*(100vw / 750));
  }

}

/* ===============================================
* mv *
=============================================== */
.mv {
  padding: 18rem 0 7.4rem;
  background-color: #EEF2FB;
}

.mv_img {
  width: 38.1rem;
  margin: 0 auto 2.3rem;  
}

.mv .video01 {
  width: 49.2rem;
  margin: 0 auto 2.2rem;
}

.mv h2{
  font-size: 2.2rem;
  text-align: center;
}

.mv h2 span {
  display: block;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 500;
  padding-top: 1rem;
}

@media screen and (max-width: 767px) {
  .mv {
    padding: calc(44*(100vw / 750)) 0 calc(86*(100vw / 750));
  }
  
  .mv_img {
    width: calc(464*(100vw/750));
    margin: 0 auto calc(28*(100vw/750));
  }

  .mv .video01 {
    width: calc(600*(100vw/750));
    margin: 0 auto calc(27*(100vw / 750));
  }

  .mv h2{
    font-size: calc(28*(100vw/750));
  }
  
  .mv h2 span {
    font-size: calc(18*(100vw/750));
    padding-top: calc(12*(100vw / 750));
  }

}

/* ===============================================
* sec01 *
=============================================== */
.sec01 {
  padding: 0 0 5.8rem;
  background-color: #EEF2FB;
}

.sec01 .sec01_inner{
  width: 61.4rem;
  margin: 0 auto;
}

.sec01 .sec_box01{
  display: grid;
  width: 58.2rem;
  margin-left: auto;
  grid-template-columns: 25.7rem auto;
  grid-template-rows: 11.9rem auto;
}

.sec01 .img01 {
  width: 22.3rem;
  grid-column: 1;
  grid-row: 1/3;
}

.sec01 .img02 {
  grid-column: 2/3;
  grid-row: 2;
  position: relative;
}

/* .sec01 .img02::before {
  content: "";
  background: url(../img/comingsoon.png) center / contain no-repeat;
  width: 25rem;
  height: 9.2rem;
  position: absolute;
  top: -11.9rem;
} */

.sec01 .img02_img{
  width: 32.6rem;
  margin-top: 1.2rem;
}

.sec01 .credit_area::before {
  content: "コラボアイテム";
  width: 12.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 1.4rem;
  color: #fff;
  background: #48ADC1;
  padding: 0.5rem 0 0.8rem;
  margin-bottom: 1.0rem;
}

.sec01 .credit_area li:nth-child(1){
  width: 100%;
}

@media screen and (max-width: 767px) {
  .sec01 {
    padding: 0 0 calc(139*(100vw / 750));
  }
  
  .sec01 .sec01_inner{
    width: calc(750*(100vw/750));
  }
  
  .sec01 .sec_box01{
    width: calc(711*(100vw/750));
    margin-left: auto;
    grid-template-columns: calc(314*(100vw/750)) auto;
    grid-template-rows: calc(145*(100vw/750)) auto;
  }
  
  .sec01 .img01 {
    width: calc(273*(100vw/750));
  }
  
  .sec01 .img02::before {
    content: "";
    background: url(../img/comingsoon_sp.png) center / contain no-repeat;
    width: calc(322*(100vw/750));
    height: calc(115*(100vw/750));
    top: calc(-145*(100vw / 750));
  }
  
  .sec01 .img02_img{
    width: calc(397*(100vw/750));
    margin-top: calc(15*(100vw/750));
  }
  
  .sec01 .credit_area::before {
    width: calc(150*(100vw/750));
    font-size: calc(18*(100vw/750));
    padding: calc(8*(100vw / 750));
    margin-bottom: calc(12*(100vw / 750));
  }


}

/* ===============================================
* sec02 *
=============================================== */
.sec02 {
  padding: 8.6rem 0 0;
}

.sec02 .sec_box01{
  display: grid;
  width: 90.6rem;
  margin: 0 auto;
  grid-template-columns: 42.8rem 5.6rem 11.7rem auto;
  grid-template-rows: 8.8rem 24.3rem 42.8rem auto;
}

.sec02 .img01 {
  width: 42.8rem;
  grid-column: 1;
  grid-row: 2/4;
}

.sec02 .video01 {
  width: 21.8rem;
  grid-column: 3/4;
  grid-row: 1/3;
}

.sec02 .img02 {
  width: 30.6rem;
  grid-column: 4;
  grid-row: 3/4;
}

.sec02 .img02_img {
  margin-bottom: 1.5rem;
}

.sec02 .credit_area{
  grid-column: 4;
  grid-row: 4/5;
}

.sec02 .credit_area li:nth-child(1){
  width: 100%;
}

@media screen and (max-width: 767px) {
  .sec02 {
    padding: 0;
  }
  
  .sec02 .sec_box01{
    width: calc(750*(100vw / 750));
    grid-template-columns: calc(46*(100vw / 750)) calc(266*(100vw / 750)) calc(45*(100vw / 750)) auto;
    grid-template-rows: calc(1112*(100vw / 750)) calc(56*(100vw / 750)) calc(147*(100vw / 750)) calc(210*(100vw / 750)) calc(15*(100vw / 750)) calc(47*(100vw / 750)) calc(226*(100vw / 750));
  }
  
  .sec02 .img01 {
    width: calc(750*(100vw/750));
    grid-column: 1/4;
    grid-row: 1/2;
  }
  
  .sec02 .video01 {
    width: calc(266*(100vw/750));
    grid-column: 2/3;
    grid-row: 3/5;
  }
  
  .sec02 .img02 {
    width: calc(373*(100vw/750));
    grid-column: 4/5;
    grid-row: 4/8;
  }

  .sec02 .credit_area{
    grid-column: 2/4;
    grid-row: 6/7;
  }
}

/* ===============================================
* sec03 *
=============================================== */
.sec03 {
  padding: 17rem 0 0;
}

.sec03 .sec_box01 {
  display: grid;
  width: 72.2rem;
  margin: 0 auto;
  position: relative;
  padding-top: 9.3rem;
}

.sec03 .sec_box01::before {
 content: "";
 background: url(../img/bg01.jpg) center / contain no-repeat;
 width: 30.7rem;
 height: 39.3rem;
 position: absolute;
 left: 5.4rem;
 top: -.5rem;
}

.sec03 .img01 {
  width: 47.4rem;
  margin: 0 auto 4.2rem;
  z-index: 2;
}

.sec03 .img01_img {
  width: 100%;
  margin-bottom: 1.5rem;
}

.sec03 .credit_area{
  justify-content: end;
}

.sec03 .credit_area::before {
  content: "";
  width: 100%;
  order: 2;
}

.sec03 .credit_area::after {
  content: "";
  width: 100%;
}

.sec03 .credit_area li:nth-child(n+3) {
  order: 1;
}

.sec03 .img02 {
  width: 72.2rem;
  margin: 0 auto;
  display: flex;
}

.sec03 .img02_img {
  width: 36.1rem;
}

@media screen and (max-width: 767px) {
  .sec03 {
    padding: calc(139*(100vw/750)) 0 0;
  }
  
  .sec03 .sec_box01 {
    width: calc(750*(100vw/750));
    padding-top: calc(119*(100vw / 750));
  }
  
  .sec03 .sec_box01::before {
    content: "";
    width: calc(375*(100vw/750));
    height: calc(479*(100vw / 750));
    left: 0;
    top: 0;
  }
  
  .sec03 .img01 {
    width: calc(578*(100vw/750));
    margin: 0 auto calc(50*(100vw/750));
  }
  
  .sec03 .img01_img {
    margin-bottom: calc(21*(100vw / 750));
  }
  
  .sec03 .img02 {
    width: 100%;
  }
  
  .sec03 .img02_img {
    width: calc(375*(100vw/750));
  }
}

/* ===============================================
* sec04 *
=============================================== */
.sec04 {
  padding: 20rem 0 0;
}

.sec04_inner{
  width: 61.4rem;
  margin: 0 auto; 
}

.sec04 .sec_box01 {
  width: 58.2rem;
  margin-right: auto;
  display: grid;
  grid-template-columns: 15.4rem 8.2rem auto;
  grid-template-rows: 41.4rem 25.7rem auto;
}

.sec04 .img01 {
  width: 42.8rem;
  grid-column: 2 / 4;
  grid-row: 1 / 4;
}

.sec04 .credit_area {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.sec04 .credit_area::before {
  content: "";
  width: 100%;
  order: 2;
}

.sec04 .credit_area::after {
  content: "";
  width: 100%;
}

.sec04 .credit_area li:nth-child(n+3) {
  order: 1;
}

.sec04 .credit_area li:nth-child(n+5) {
  order: 2;
}

.sec04 .img02 {
  width: 21.4rem;
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .sec04 {
    padding: calc(185*(100vw/750)) 0 0;
  }
  
  .sec04_inner{
    width: calc(750*(100vw/750));
  }
  
  .sec04 .sec_box01 {
    width: calc(710*(100vw/750));
    grid-template-columns: calc(189*(100vw / 750)) calc(100*(100vw / 750)) auto;
    grid-template-rows: calc(504*(100vw / 750)) calc(315*(100vw / 750)) auto;
  }
  
  .sec04 .img01 {
    width: calc(521*(100vw/750));
  }
  
  .sec04 .img02 {
    width: calc(262*(100vw/750));
  }

}

/* ===============================================
* sec05 *
=============================================== */
.sec05 {
  padding: 18rem 0 0;
}

.sec05 .sec_box01 {
  width: 47.4rem;
  margin: 0 auto;
}

.sec05 .img01 {
  margin-bottom: 1.1rem;
}

.sec05 .credit_area::before {
  content: "";
  width: 100%;
  order: 2;
}

.sec05 .credit_area::after {
  content: "";
  width: 100%;
}

.sec05 .credit_area li:nth-child(n+4) {
  order: 1;
}

@media screen and (max-width: 767px) {
  .sec05 {
    padding: calc(149*(100vw/750)) 0 0;
  }
  
  .sec05 .sec_box01 {
    width: calc(578*(100vw/750));
    margin: 0 auto;
  }
  
  .sec05 .img01 {
    margin-bottom: calc(15*(100vw/750));
  }
}

/* ===============================================
* bg_02 *
=============================================== */
.sec06_07{
  position: relative;
}

.sec06_07::before {
  content: "";
  background: url(../img/bg02.jpg) center / contain repeat-x;
  width: 100%;
  height: 70.4rem;
  position: absolute;
  bottom: 22.4rem;
} 

@media screen and (max-width: 767px) {
  .sec06_07::before {
    content: "";
    background: url(../img/bg02_sp.jpg) center / contain repeat-x;
    width: 100%;
    height: calc(1322*(100vw/750));
    bottom: calc(286*(100vw/750));
  } 
} 

/* ===============================================
* sec06 *
=============================================== */
.sec06 {
  padding: 13.6rem 0 0;
  position: relative;
  z-index: 2;
}

.sec06 .sec06_inner{
  width: 72rem;
  margin: 0 auto;  
}

.sec06 .sec_box01 {
  width: 69.5rem;
  margin-right: auto;
  display: grid;
  grid-template-columns: 40.3rem auto;
  grid-template-rows: 6.4rem auto;
}

.sec06 .img01 {
  width: 38.6rem;
  grid-column: 1;
  grid-row: 1/3;
}

.sec06 .img02 {
  width: 26.5rem;
  grid-column: 2;
  grid-row: 2;
}
.sec06 .img02_img{
  margin-bottom: 1.5rem;
}

.sec06 .credit_area li{
  width: 100%;
}

@media screen and (max-width: 767px) {
  .sec06 {
    padding: calc(156*(100vw/750)) 0 0;
  }
  
  .sec06 .sec06_inner{
    width: calc(750*(100vw/750));
    margin: 0 auto;
  }
  
  .sec06 .sec_box01 {
    width: calc(750*(100vw/750));
    margin-right: 0;
    grid-template-columns: calc(426*(100vw/750)) auto;
    grid-template-rows: calc(78*(100vw/750)) auto;
  }
  
  .sec06 .img01 {
    width: calc(407*(100vw/750));
  }
  
  .sec06 .img02 {
    width: calc(324*(100vw/750));
  }
  .sec06 .img02_img{
    margin-bottom: calc(15*(100vw/750));
  }
} 

/* ===============================================
* sec07 *
=============================================== */
.sec07 {
  padding: 17.5rem 0 0;
  position: relative;
  z-index: 2;
}
.sec07 .sec07_inner{
  width: 71rem;
  margin: 0 auto; 
}

.sec07 .sec_box01 {
  width: 69.7rem;
  margin-left: auto;
  display: grid;
  grid-template-columns: 1.2rem 25.5rem 4.9rem auto;
  grid-template-rows: 15.6rem 31.9rem auto;
}

.sec07 .video01 {
  width: 25.5rem;
  grid-column: 2;
  grid-row: 2;
}

.sec07 .img02 {
  width: 38.1rem;
  grid-column: 4;
  grid-row: 1/4;
}
.sec07 .img02_img{
  margin-bottom: 1.2rem;
}

.sec07 .credit_area::before {
  content: "";
  width: 100%;
  order: 2;
}

.sec07 .credit_area::after {
  content: "";
  width: 100%;
}

.sec07 .credit_area li:nth-child(n+3) {
  order: 1;
}

@media screen and (max-width: 767px) {
  .sec07 {
    padding: calc(123*(100vw/750)) 0 0;
  }
  .sec07 .sec07_inner{
    width: calc(659*(100vw/750));
    margin: 0 auto; 
  }
  
  .sec07 .sec_box01 {
    width: calc(562*(100vw/750));
    grid-template-columns: calc(252*(100vw/750)) auto;
    grid-template-rows: calc(790*(100vw/750)) auto;
  }
  
  .sec07 .video01 {
    width: calc(310*(100vw/750));
    grid-column: 2;
    grid-row: 4;
  }
  
  .sec07 .img02 {
    width: calc(465*(100vw/750));
    grid-column: 1/3;
    grid-row: 1;
  }
  .sec07 .img02_img{
    margin-bottom: calc(15*(100vw/750));
  }
}

/* ===============================================
* sec08 *
=============================================== */
.sec08 {
  padding: 8.4rem 0 0;
}

.sec08 .img01{
  display: flex;
  column-gap: 1.5rem;
  justify-content: center;
}

.sec08 .img01_img{
  width: 27.6rem;
}

.sec08 .vol_txt{
  display: inline-block;
  font-family: adobe-garamond-pro, serif;
  font-size: 1.8rem;
  color: #676767;
  margin-top: 0.5rem;
  margin-left: 0.6rem;
}

.sec08 .vol_txt span{
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .sec08 {
    padding:  calc(102*(100vw/750)) 0 0;
  }
  
  .sec08 .img01{
    column-gap: calc(19*(100vw/750));
  }
  
  .sec08 .img01_img{
    width: calc(336*(100vw/750));
  }
  
  .sec08 .vol_txt{
    font-size: calc(22*(100vw/750));
    margin-top: calc(10*(100vw/750));
    margin-left: calc(6*(100vw/750));
  }
  
  .sec08 .vol_txt span{
    font-size: calc(20*(100vw/750));
  }
}
/* ===============================================
* sec09 *
=============================================== */
.sec09 {
  background: #EEF2FB;
  margin-top: 7.4rem;
  padding: 5.9rem 0 4.1rem;
}

.sec09--logo {
  width: 16.8rem;
  margin: auto;
}

.sec09--logo+p {
  font-weight: 600;
  position: relative;
  color: #707070;
  font-size: 2.2rem;
  line-height: 1.3636363636;
  letter-spacing: 0;
  text-align: center;
  margin: 3.2rem auto 0;
  width: fit-content;
}

.sec09--logo+p a{
  display: inline;
}

.sec09--logo+p span {
  position: absolute;
  width: 12.5rem;
  top: 16.9rem;
  right: -1.4rem;
}

.sec09--staff {
  font-family: adobe-garamond-pro, serif;
  font-weight: normal;
  text-align: center;
  margin-top: 13.3rem;
  color: #010101;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  .sec09 {
    margin-top: calc(90*(100vw / 750));
    padding: calc(59*(100vw / 750)) 0 calc(100*(100vw / 750));
  }

  .sec09--logo {
    width: calc(133* (100vw /750));
    margin: auto;
  }

  .sec09--logo+p {
    font-weight: 600;
    font-size: calc(18* (100vw /750));
    line-height: 1.3888888889;
    text-align: center;
    margin-top: calc(29*(100vw / 750));
  }

  .sec09--logo+p span {
    width: calc(100* (100vw /750));
    top: calc(130* (100vw /750));
    right: 0;
  }

  .sec09--staff {
    margin-top: calc(69*(100vw / 750));
    font-size: calc(20* (100vw /750));
    line-height: 1.5;
  }
}



@media screen and (min-width: 768px) and (max-width: 1366px) {
  html {
    font-size: calc(10* (100vw / 1366)) !important;
  }
}



/* ▽ animation ▽ */
.js_imgFadeIn {
  opacity: 0;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.imgAnimated {
  opacity: 1;
}