@charset "UTF-8";
/* ---------------------------------------------
*   l-contents
--------------------------------------------- */
html {
  scroll-behavior: smooth;
}
body{
    font-size: 1.2vw;
    color:#fff;
    background-color: #010512;
    position:relative;
}
a:hover{
    opacity:.8;
    transition: opacity 300ms;
    color:#ddd;
}
a:visited {
  color: #fff;
}
.pc{display:block !important;}
.sp{display:none !important;}
 
 .sample{
        width:100%;
  position: absolute;
  top: 327px;
  z-index: 9;
  opacity: .5;
  /*display:none;*/
 }

/* 初期は DOM に残すが見えない状態にする */
.specialBanner,
.specialBanner2 {
  width: 19vw;
  position: fixed;
  right: 0;
  bottom: 135px;
  z-index: 9999;

  /* アニメーションは opacity と transform のみ */
  transition: opacity 360ms cubic-bezier(.22,.9,.35,1),
              transform 360ms cubic-bezier(.22,.9,.35,1);

  /* 非表示状態（クリック不可に） */
  opacity: 0;
  transform: translateX(12%); /* 右からほんの少しスライドしてくる感じ */
  pointer-events: none;
  will-change: opacity, transform; /* ヒントでパフォーマンス改善 */
}

/* 表示状態 */
.specialBanner.is-visible,
.specialBanner2.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/*メニューが2つ*/
/* 
 .l-header-nav__list {
  width: 45vw;
}
*/

/*メニューが4つ*/ 
 .l-header-nav__list {
  width: 65vw;
}

.js-fadein-up-sp {
  opacity: 0;
  transform: translateY(30px);
}


.bnr_1 {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.bnr_1.is-visible {
  opacity: 1;
  pointer-events: auto;
}


 /* ---------------------------------------------
*   ページ内リンクのズレ調整
--------------------------------------------- */
#anchor-2{
    padding-top: 130px;
    margin-top:-130px;
}
#anchor-nav1{
    padding-top: 70px;
    margin-top:-70px;
}
#anchor-nav6{
    padding-top: 70px;
    margin-top:-70px;
}
/* ---------------------------------------------
*   c-section-01
--------------------------------------------- */
.c-section-01 {
  position: relative;
  height: 100vh !important;
  overflow: hidden;
      z-index:9;
}
.c-section-01 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-section-01 .overlay {
  position: absolute;
  inset: 0;
  background: black;
  opacity: 0;
  transition: none; /* JSで制御するので不要 */
}
.c-section-01 .title-img {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  width:45vw;
}


.scroll-hint {
  position: absolute;
  bottom: 100px;
  left: 20px;
  writing-mode: vertical-rl; /* 縦書き */
  text-orientation: mixed;
  font-size: 18px;
  font-family: sans-serif;
  color: #fff;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
  letter-spacing: 2px;
}

.scroll-hint .text {
  display: block;
  margin-bottom: 8px;
}

.scroll-hint .line {
  display: block;
  width: 1px;
  height: 115px;
  margin: 0 auto;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 100% 200%;
  animation: lineFlow 2s infinite;
}

@keyframes lineFlow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}


/*
.c-section-01 {
    position: relative;
    overflow: hidden;
    height:94.5vh;
    display: flex;
  justify-content: center;
  align-items: center;
}

.c-section-01__ttl-outer {
width: 42vw;
}

.main-visual-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
*/
/* ---------------------------------------------
*   c-section-02
--------------------------------------------- */
.c-section-02 {
    position: relative;
    background: url(../img/sec2-1.webp) 0 0 ;
     background-size: cover;
  width: 100%;
    height: 72.5vw;
    margin-top:-0.1vw;
    z-index:9;
}
.c-section-02 h2{
width: 42.5vw;
  padding-top: 16.3vw;
  margin-left: 51vw;
}
.c-section-02 .note{
width: 44.1vw;
  margin: 32.5vw auto;
}
/* ---------------------------------------------
*   c-section-03
--------------------------------------------- */

.c-section-03 h2{
width: 31vw;
  padding-top: 12.5vw;
  margin: 0 auto 7vw;
}
.c-section-03 .txt1 {
width: 37vw;
  margin: 0 auto 5.5vw;
}
.c-section-03 .txt2 {
width: 48vw;
  margin: 0 auto;
}

.c-section-03  .bg-image-clip {
  position: absolute;
  left: 0;
  width: 100%;
  height: 105.8vw;
  clip-path: inset(0); /* 切り抜き */

}
.c-section-03  {
  .bg-image-fixed {
    background-image: url(../img/sec11-1.webp);
  }
}
.c-section-03 .overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,12,35,1);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.c-section-03{
  position: relative;
  background-size: cover;
  background-position: center;
  width: 100%;
    height: 105.8vw;
  overflow: hidden;
}

/* ---------------------------------------------
*   c-section-04
--------------------------------------------- */
.c-section-04 {
    position: relative;
    background: url(../img/sec4-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    background-color:;
    height:89vw;
}
.c-section-04 h2{
width: 31.5vw;
  padding-top: 12vw;
  margin: 0 auto 12vw;
}
.c-section-04 .txt1 {
width: 82vw;
  margin-left: 13vw;
}
.c-section-04 .txt2 {
width: 24vw;
  margin-left: 12vw;
  margin-top: -6.5vw;
}

/* ---------------------------------------------
*   c-section-05
--------------------------------------------- */
.c-section-05 {
    position: relative;
    background: url(../img/sec5-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    background-color:;
    height:54.2vw;
}

.c-section-05 .txt1 {
width: 59vw;
  margin: auto;
  padding-top: 12.5vw;
}
.c-section-05 .txt2 {
width: 48vw;
  margin: 7.6vw 0 0 49vw;
}

/* ---------------------------------------------
*   c-section-06
--------------------------------------------- */
.c-section-06 {
    position: relative;
    background: url(../img/sec6-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    background-color:;
    height:65vw;
}
.c-section-06 .txt1 {
width: 84vw;
  margin-left: 2.8vw;
  padding-top: 12.9vw;
}
.c-section-06 .txt2 {
width: 24vw;
  margin-left: 57vw;
  margin-top: -9vw;
}

/* ---------------------------------------------
*   c-section-07
--------------------------------------------- */
.c-section-07 {
    position: relative;
    background: url(../img/sec7-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    background-color:;
    height:51.9vw;
}

.c-section-07 .txt1 {
width: 59vw;
  margin: auto;
  padding-top: 12.5vw;
}
.c-section-07 .txt2 {
width: 48vw;
  margin: 8.8vw 0 0 49vw;
}

/* ---------------------------------------------
*   c-section-08
--------------------------------------------- */
.c-section-08 {
    position: relative;
    background: url(../img/sec8-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    background-color:;
    height:67.3vw;
}
.c-section-08 .txt1 {
width: 85vw;
  margin-left: 13vw;
  padding-top: 12.5vw;
}
.c-section-08 .txt2 {
width: 24vw;
  margin-left: 12vw;
  margin-top: -6.5vw;
}

/* ---------------------------------------------
*   c-section-09
--------------------------------------------- */
.c-section-09 {
    position: relative;
    background: url(../img/sec9-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    background-color:;
    height:51.9vw;
}

.c-section-09 .txt1 {
width: 59vw;
  margin: auto;
  padding-top: 12.5vw;
}
.c-section-09 .txt2 {
width: 19vw;
  margin: 8.8vw 0 0 77.5vw;
}


/* ---------------------------------------------
*   c-section-10
--------------------------------------------- */
.c-section-10 {
    position: relative;
    background: #374c5e;
  width: 100%;
    background-color:;
    height:184.2vw;
}

.c-section-10 .txt1 {
width: 59vw;
  padding-top: 12.3vw;
  margin: auto;
}
.c-section-10 .txt2 {
width: 79vw;
  padding-top: 11.3vw;
  margin-left: 13vw;
}
.c-section-10 .txt3 {
width: 79vw;
  padding-top: 10vw;
  margin-left: 7.5vw;
}
.c-section-10 .txt4 {
width: 8.6vw;
  margin-top: -4vw;
  margin-left: 59vw;
}
.c-section-10 .txt5 {
width: 79.5vw;
  padding-top: 13.3vw;
  margin-left: 13vw;
}

/* ---------------------------------------------
*   Morris
--------------------------------------------- */
/* ---------------------------------------------
*   パララックス
--------------------------------------------- */
.section-wrapper {
  position: relative;
}
.bg-image-fixed {
  position: fixed; /* 背景を固定 */
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.l-contents3 .bg-image-clip {
  position: absolute;
  left: 0;
  width: 100%;
  height: 96.8vw;
  clip-path: inset(0); /* 切り抜き */

}
.l-contents3  {
  .bg-image-fixed {
    background-image: url(../img/sec11-1.webp);
  }
}
.l-contents3 .overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,12,35,1);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.l-contents3{
  position: relative;
  background-size: cover;
  background-position: center;
  height: 96.8vw;
  overflow: hidden;
}

.l-contents3 .morris_area{
	text-align:center;
padding-top: 11vw;
z-index:2;
}
.l-contents3 h2{
width: 55.8vw;
  margin: auto;
}
.l-contents3 .txt1{
width: 24vw;
  margin: 7.5vw auto 2.5vw;
}
.l-contents3 .txt2{
  width: 40vw;
  margin: 0 auto 7vw;
}
.l-contents3 .txt3{
width: 53vw;
  margin: auto;
}

/* ---------------------------------------------
*   100年後も、美しい世界へ。
--------------------------------------------- */
.l-contents4 {
osition: relative;
  background: #2e3c49;
  width: 100%;
  height: 47vw;
  padding-top: 12.5vw;
}
.l-contents4 .txt1{
width: 73.5vw;
  margin: auto;
}
/* ---------------------------------------------
*   open close
--------------------------------------------- */
nav{display:none;}
.set-open,.set-open2,.set-open3,.set-open4{
    display:block;
    cursor: pointer;
}
.btn_close,.btn_close2,.btn_close3,.btn_close4,.dnone{
    display:none !important;
}
.btn_close.selected,.btn_close2.selected,.btn_close3.selected,.btn_close4.selected{
    display:flex !important;
}
.c-section-02.bksize{height:288vw !important;}
.c-section-03.bksize{height:217vw !important;}
.c-section-04.bksize{height:214vw !important;}

.btn_open,.btn_open2,.btn_open3{
width: 20.5vw;
  margin: 0 auto 1vw;
}
.btn_open:hover,.btn_open2:hover,.btn_open3:hover{
    opacity:.8;
    transition: opacity 300ms;
}
.btn_close,.btn_close2,.btn_close3{
width: 20.5vw;
  margin: 3.2vw auto 4.3vw;
}
.btn_close:hover,.btn_close2:hover,.btn_close3:hover{
    opacity:.8;
    transition: opacity 300ms;
}
.footer{margin:0;}


	/**********/
	/**GIFT**/
	/**********/
	

	
.gift-00,.l-contents-gift {
    background-color: #010512;
}
.gift-lead{
width: 88vw;
  margin-top: 3.7vw;
  display: block;
  margin-left: 3vw;
  margin-bottom: 7.5vw;
}
.gift-h{
    width: 19vw;
  display: block;
  margin: auto;
}
.pro-lead{
    width:57vw;
      display: block;
  margin: auto;
}
/* ---------------------------------------------
*   g-section-00
--------------------------------------------- */
.g-section-00{
    position: relative;
    background: url(../img/gift1-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    height:171.5vw;
}
.g-section-00 .title{
width: 40vw;
  padding-top: 19.5vw;
  margin-left: 54vw;
}
.g-section-00 .lead{
width: 47vw;
  margin: 33vw auto 0;
}
.movie_area{
display: flex;
  margin-top: 6.5vw;
}
.movie_area video{
width: 35.5vw;
  margin-left: 13vw;
}
.g-section-00 .price{
width: 32vw;
  margin: 4.5vw 0 0 6vw;
}
.g-section-00 .gift-btn{
width: 24vw;
  margin-top: 2.2vw;
  margin-left: -1vw;
}
.g-section-00 .detail{
width: 74vw;
  margin: 7vw auto 0;
}
.gift-00 {
    position: relative;
    background: url(../img/gift2-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    height:104.8vw;
}
.gift-00 .title{
width: 25.5vw;
  margin: 11vw 0 0 64vw;
}
.gift-00 .text{
width: 49vw;
  margin: 43vw auto 0;
}

/* ---------------------------------------------
*   g-section-01
--------------------------------------------- */
.g-section-01 {
    position: relative;
    background: url(../img/gift3-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    height:81vw;
}
.g-section-01 .title{
width: 22.5vw;
  margin: auto;
  padding: 12vw 0 12vw;
}
.g-section-01 .item{
width: 68vw;
margin: 0 auto 0.5vw;
}
.g-section-01 .gift-btn{
width: 23.7vw;
  margin-left: 56.5vw;
}


/* ---------------------------------------------
*   g-section-02
--------------------------------------------- */
.g-section-02 {
    position: relative;
    background: url(../img/gift4-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    height:60.5vw;
}
.g-section-02 .item{
width: 69vw;
  margin: 0 0 2vw 14vw;
  padding-top: 13vw;
}
.g-section-02 .gift-btn{
width: 23.7vw;
  margin-left: 13.5vw;
}
/* ---------------------------------------------
*   g-section-03
--------------------------------------------- */
.g-section-03 {
    position: relative;
    background: url(../img/gift5-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    height:60.4vw;
}

.g-section-03 .item{
width: 68vw;
  margin: 0 0 -4.5vw 17.5vw;
  padding-top: 12vw;
}
.g-section-03 .gift-btn{
width: 23.7vw;
  margin-left: 56.5vw;
}
/* ---------------------------------------------
*   g-section-04
--------------------------------------------- */
.g-section-04 {
    position: relative;
    background: url(../img/gift4-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    height:60.5vw;
}
.g-section-04 .item{
width: 83vw;
  margin: 0 0 -14.5vw 14vw;
  padding-top: 13vw;
}
.g-section-04 .gift-btn{
width: 23.7vw;
  margin-left: 13.5vw;
}

/* ---------------------------------------------
*   g-section-05
--------------------------------------------- */
.g-section-05 {
    position: relative;
    background: url(../img/gift7-1.webp) 0 0;
     background-size: cover;
  width: 100%;
    height:54.4vw;
}

.g-section-05 .item{
width: 66vw;
  margin: 0 0 -5.5vw 17.5vw;
  padding-top: 11vw;
}
.g-section-05 .gift-btn{
width: 23.7vw;
  margin-left: 56.5vw;
}


/* ---------------------------------------------
*   c-section-12
--------------------------------------------- */
.l-contents2 {
    position: relative;
    background: url(../img/gift8-1.webp) 0 0;
     background-size: cover;
  width: 100%;
     padding-top: 7vw;
     padding-bottom:9vw;

}
.c-section-12 .title{
width: 23vw;
  margin: 0 auto 6vw;
}
.c-section-12 li{
    cursor: pointer;
}
.c-section-12 li:hover{
    opacity:.6;
}
.c-section-12 .nav_area{
    margin-bottom:4vw;
}
.c-section-12 .nav_area ul{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #001E62;
}
.c-section-12 .nav_area ul li{
    width:36.5vw;
}
.c-section-12 .nav_area ul.nav2{
}
.c-section-12 .nav_area .nav2_box{
    display:none;
}
.c-section-12 .nav_area_sub{
    margin-bottom: 5.2vw;
}
.c-section-12 .nav_area_sub ul{
  display: flex;
  justify-content: start;
}
.c-section-12 .nav_area_sub ul.nav1,.c-section-12 .nav_area_sub ul.nav2{
    margin-top:-1vw;
}
.c-section-12 .nav_area_sub ul.nav1 li{
    width: 24.6vw;
     border-left: 1px solid #fff;
}
.c-section-12 .nav_area_sub ul.nav1 li:hover,.c-section-12 .nav_area_sub ul.nav2 li:hover{
background-color: rgba(200, 200, 200, 0.2);
opacity:1;
}
.c-section-12 .nav_area_sub ul.nav1 li img{
    width: 9.6vw;
    margin: 0.5vw auto;
    display: block;
}
.c-section-12 .nav_area_sub ul.nav1 li:nth-child(2) img{
    width: 12vw;
}
.c-section-12 .nav_area_sub ul.nav1 li:nth-child(3) img{
    width: 9vw;
}
.c-section-12 .nav_area_sub ul.nav1 li:last-child{
     border-right: 1px solid #fff;
}
.c-section-12 .nav_area_sub ul.nav2{

}
.c-section-12 .nav_area_sub .nav2_sub_box{
    display:none;
}
.c-section-12 .nav_area_sub ul.nav2 li{
    width:18.5vw;
    border-left: 1px solid #fff;
    padding: 5px;
}
.c-section-12 .nav_area_sub ul.nav2 li img{
    width: 13vw;
    margin: auto;
    display: block;
}
.c-section-12 .nav_area_sub ul.nav2 li:last-child{
     border-right: 1px solid #fff;
}

.c-section-12 ul {
   width:74vw;
  display:flex;
  flex-wrap: wrap;
  margin:2vw auto;
  justify-content: start;
}
.c-section-12 .product_list ul li{
   width:17.26vw;
   background-color:#fff;
   margin: 0.62vw 0.62vw;
   padding: 1.5vw;
}
.c-section-12 .product_list ul li .copy{
    color:#001E62;
    text-align:center;
    font-size: 1.1vw;
    font-family: 'Noto Serif JP', serif;
}
.c-section-12 .product_list  ul li .name,.c-section-12 .product_list ul li .price{
    color:#6D6B6A;
    text-align:center;
    font-size: 0.9vw;
    margin-top:1vw;
}
.c-section-12 .product_list  ul li .day{
    color: #6D6B6A;
    text-align: center;
    font-size: 0.8vw;
    margin: 0.5vw auto -0.7vw;
    border: 1px solid;
    width: 9em;
}
.c-section-12 .product_list .title-kind{
    text-align: center;
    font-size: 1.5vw;
    color:#fff;
    margin-top: -100px;
  padding-top: 100px;
}
.c-section-12 .product_list .title-price{
    text-align: center;
    color: #fff;
    font-size: 1.5vw;
        margin-top: -100px;
  padding-top: 100px;
}

#kind-01, #price-01 { display: block; }
#kind-02, #kind-03, #price-02, #price-03, #price-04 { display: none; }

.pt15{padding-top:1.5vw;}
.price_list{
    display:none;
}
#kind-01,#kind-02,#kind-03,#price-01,#price-02,#price-03,#price-04{
    margin-bottom:3vw;
}
.c-section-12__bnr img{
  width: 69vw;
  margin: 10vw auto;
}
.nav_area_sub li.on{
background-color: rgba(255, 255, 255, 0.3);
}

/* ---------------------------------------------
*   種類で選ぶ、価格で選ぶ open close
--------------------------------------------- */
.dnone{
    display:none !important;
}
.dblock{
    display:block !important;
}