@charset "UTF-8";
/* CSS Document */

.mb5p{ margin-bottom: 5% !important;}
.mb10p{ margin-bottom: 10% !important;}
.mb15p{ margin-bottom: 15% !important;}
.mb20p{ margin-bottom: 20% !important;}

  .mb100 { margin-bottom: 100px !important;}
  .mb60 { margin-bottom: 60px !important;}
  .mb30 { margin-bottom: 30px !important;}
  .mb20 { margin-bottom: 20px !important;}
  .mb15 { margin-bottom: 15px !important;}
  .mb10 { margin-bottom: 10px !important;}
  .mb8 { margin-bottom: 8px !important;}
  .mb0 { margin-bottom: 0px !important;}
  .center { text-align: center;}
.left { text-align: left !important;}

  @media screen and (max-width: 767px) {
    .mb100 { margin-bottom: 20% !important;}
    .mb60 { margin-bottom: 25% !important;}
    .mb30 { margin-bottom: 10% !important;}
    .mb20 { margin-bottom: 8% !important;}
    .mb15 { margin-bottom: 3% !important;}
    .mb10 { margin-bottom: 2% !important;}
    .mb8 { margin-bottom: 1% !important;}
    .sp_mb10 { margin-bottom: 10px !important;}
    .sp_mb30 { margin-bottom: 6% !important;}
    .sp_mb60 { margin-bottom: 18% !important;}
	.sp-left { text-align: left !important;}
	  }

  /*col-set*/
  .col-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(100% + 30px);
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .col1-2 { width: calc(50% - 30px);}
  .col1-3 { width: calc(33.33333333% - 30px);}
  .col2-3 { width: calc(66.66666666% - 30px);}
  .col1-4 { width: calc(25% - 30px);}
  .col3-4 { width: calc(75% - 30px);}
  .col1-5 { width: calc(20% - 30px);}
  .col1-6 { width: calc(16.66666666% - 30px);}
  .col1000-2618 { width: calc(38.2% - 30px);}
  .col1618-2618 { width: calc(61.8% - 30px);}

  .col1-2,
  .col1-3,
  .col2-3,
  .col1-4,
  .col3-4,
  .col1-5,
  .col1-6,
  .col1000-2618,
  .col1618-2618 {
    margin-right: 30px;
  }

  @media screen and (max-width: 767px) {
    .col-set {
      width: calc(100% + 5px);
    }

    .col1-2,
    .col1-3,
    .col2-3,
    .col1-4,
    .col3-4,
    .col1-5,
    .col1-6,
    .col1000-2618,
    .col1618-2618 {
      width: calc(100% - 5px);
      margin-right: 5px;
    }

    .sp-col1-2 {
      width: calc(50% - 5px);
    }
  }


.col_center{ display: flex; justify-content: center;}

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.fade-in.--2 {
  transition-delay: 300ms;
}
.fade-in.--3 {
  transition-delay: 500ms;
}

.lp_block * {
  font-family:"Lato", 'Noto Sans JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

p#breadCrumb{ display: none;}
.lp_block {
  color: #1F5658;
	background: linear-gradient(0deg, #d7a700cc, #2e866ecc 50%, #0c3349cc);
	 margin-top: 94px !important;
}

.lp_block p{ word-break: break-all; color: #1F5658; line-height: 2.3; font-size: 1.2rem; font-family: "Noto Sans JP", serif;}
div.cont_block{ padding: 0 3vw;}
@media (max-width: 767px) {
.lp_block {
    margin-top: 20px!important;
	min-width: 360px;
  }
div.cont_block{ padding: 0 7vw;}
}

.lp_block .title{ background: linear-gradient(0deg, #d7a700cc, #2e866ecc 50%, #0c3349cc), rgb(255 255 255 / 80%); color: #E3E0D5; padding:13% 3vw; margin: 15% 0;}
.lp_block .title p{ color: #E3E0D5; letter-spacing: 2px;}
.lp_block .title h2{ font-size: 3.5rem; letter-spacing: 1px;}

.lp_block h3{ font-size: 2.5rem; margin: 40px 0 20px 0; color: #1F5658; font-family: "Noto Sans JP", serif;}
.lp_block h4{ font-size: 1.35rem; color: #1F5658; font-family: "Noto Sans JP", serif;}

p.sub_text{ font-size: 70%; text-align: center; line-height: 1.3;}
p.sub_text02{ font-size: 60%;}

p.sub_text span.tax,
p.sub_text02 span.tax{ font-size: 80%;}

p.more_btn{ margin-bottom: 6px;}
p.more_btn a{ width: 100%; display: block; text-align: center; text-decoration: none; border: 1px solid; padding: 3px;}
p.bay_btn a{ width: 100%; display: block; text-align: center; text-decoration: none; padding: 5px; background: #0C3349; color: #ffffff;}
p.all_btn a{ width: 100%; display: block; text-align: center; text-decoration: none; padding: 5px; background: #0C3349; color: #ffffff; letter-spacing: 2px; font-size: 1.5rem;}
p.more_btn:hover,
p.bay_btn:hover,
p.all_btn:hover{ opacity: 0.7;}

p.all_btn{ padding: 20% 0;}

div.product h4{ line-height: 1.5; font-size: 1.75rem;}
div.product h5{ font-size: 1.5rem; line-height: 1.6; font-weight: 600;}
div.product p.sub_text{ line-height: 1;}
div.product p.limited{ border: 1px solid #0C3349; display:table; color: #0C3349;  padding: 4px 8px; line-height: 1; margin: -5px auto 20px;}

div.product p{ line-height: 2;}
div.product p.bay_btn a{ font-size: 1.5rem; letter-spacing: 1px;}
	
.lp_block .cont_block.present{ background: #E3E0D5; padding: 15% 3vw;}
.lp_block .cont_block.present img{ border: 1px solid;}
.lp_block .cont_block.present h3{ margin: 0 0 5px 0; font-size: 1.75rem; line-height: 1.5; font-weight: normal;}
.lp_block .cont_block.present .col-set p.bay_btn a{padding: 3px;}

@media (max-width: 767px) {
.lp_block .cont_block.present{ padding: 15% 7vw;}

}

@media (max-width: 767px) {
  .pcOnly{
      display: none !important;
    }
}
@media (min-width: 767px) {
  .spOnly{
    display: none !important;
  }
}


@media (max-width: 767px) {
.lp_block p{  font-size: 1.25rem;}
.sp-col1-2 { width: calc(50% - 20px); margin-right: 20px; display: flex; flex-direction: column; justify-content: space-between;}
p.sub_text{ font-size: 70%;}
p.sub_text02{ font-size: 60%;}

p.sub_text span.tax,
p.sub_text02 span.tax{ font-size: 80%;}
}


@media (max-width: 500px) {	
#wapper { padding-top: 0px !important; }
}




/* PC */

#Wrap { width: 100%;}

  .lp_block {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    z-index: 0;
  }

  /* layout */
  .lp_contents_inner {
    grid-column: 2;
    margin-inline: auto;
    width: 37.8rem;
	  background: #ffffff;
  }
/*  .lp_contents .readArea::before,
.lp_contents .epilogueArea::before {
    margin: auto;
    right: 0;
    background-position: center;
    width: 37.8rem;
  }
  .lp_block .mvArea-wrap {
    background-color: #fff;
  }*/
  .lp_block .fixed_area {
    display: grid;
    grid-template-columns: 1fr 37.8rem 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .lp_block .fixed_area .fixed_pcb {
    position: -webkit-sticky;
    position: sticky;
    display: grid;
    place-items: center;
    pointer-events: all;
    height: 100vh;
  }
  .lp_block .fixed_area .fixed_left {
    top: 0;
    grid-column: 1;
    -webkit-clip-path: border-box;
            clip-path: border-box;
  }
  .lp_block .fixed_area .fixed_left::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .lp_block .fixed_area .fixed_right {
    top: 0;
    grid-column: 3;
    -webkit-clip-path: border-box;
            clip-path: border-box;
  }
  .lp_block .fixed_area .fixed_right::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }




@media (max-width: 769px) { 
.lp_contents {
  width: 100%;
  max-width: calc(750 * 37.8rem/750);
}
	
.lp_contents_inner { width: 100%;}
}