@charset "UTF-8";

.LB1019 {
  --color_blue-01: #ccd8db;
  --color_blue-02: #aebcc1;
  --color_gray-01: #d8d8d8;
  --color_gray-02: #adadad;
  --color_gray-03: #d8d8d6;
  --color_gray-04: #afb4b2;
  --font_en-01: "big-caslon-fb", serif;
  --font_en-02: "neue-haas-grotesk-display", sans-serif;
  --font_jp: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --ttl_color-blue: #457FA0;
  --ttl_color-orange: #D1664E;
  --ttl_color-navy: #135068;
  --ttl_color-purple: #555158;
  --ttl_color-black: #414347;
  --ttl_color-green: #326B66;
  --back_color-01: #EAE8E4;
  --back_color-02: #F0BF96;
  --back_color-03: #CED7D8;
  --back_color-04: #B7B3AE;
  --back_color-05: #6E809A;
  --back_color-06: #D2D6D5;
  color: #000;
  text-align: center;
}

.main-inner {
  margin-top: 0;
  width: 100% !important;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

@media (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: 0.7142857143vw;
  }
}

@media only screen and (min-width: 1401px) {
  html {
    font-size: 62.5%;
  }
}

@media only screen and (min-width: 768px) {
  .spOnly {
    display: none !important;
  }
}

.LB1019 {
  position: relative;
  font-feature-settings: normal;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  width: 100%;
  padding-bottom: 0;
  /* background-color: #e8e3da; */
  z-index: 5;
}

.LB1019 h1,
.LB1019 h2 {
  white-space: nowrap;
  font-family: "operetta-12", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #996a00;
}

.LB1019 li {
  list-style: none;
}

.LB1019 img,
.LB1019 svg {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 3;
}

.LB1019 picture,
.LB1019 span {
  display: block;
}

@media only screen and (max-width: 767px) {
  
  .pcOnly {
    display: none !important;
  }
  .LB1019 .mv_ttl {
    font-size: calc(58 * (100vw / 750));
    line-height: 1.241;
    letter-spacing: 0.03em;
  }

  .LB1019 .underline {
    position: relative;
    width: fit-content;
    margin: calc(90 * (100vw / 750)) auto calc(49 * (100vw / 750));
  }

  .LB1019 .underline::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content:
      "";
    width: 100%;
    height: 0.1rem;
    background: #996a00;
  }

  .LB1019 .mv_txt {
    padding-bottom: calc(130 * (100vw / 750));
    font-feature-settings: "palt";
    font-size: calc(26 * (100vw / 750));
    line-height: 2.269;
    letter-spacing: 0.05em;
  }

  /* gridWrap pickUp */
  .gridWrap .gridItem {
    margin: 0 auto calc(10 * (100vw / 750));
  }

  .item_ttl .num {
    margin-bottom: calc(23 * (100vw / 750));
    font-size: calc(134 * (100vw / 750));
    letter-spacing: 0.03em;
  }

  .item_ttl .en {
    margin-bottom: calc(29 * (100vw / 750));
    font-size: calc(60 * (100vw / 750));
    letter-spacing: 0.03em;
  }

  .item_ttl .jp {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    font-size: calc(24 * (100vw / 750));
    letter-spacing: 0.02em;
    color: #000;
  }

  .gridWrap.pickUp .item.--01,
  .gridWrap.pickUp .item.--02 {
    border: solid #996a00 calc(2 * (100vw / 750));
  }

  .gridWrap.pickUp .gridItem.--01 .item.--01 {
    border: none;
    padding: 0;
    margin: 0 auto calc(32 * (100vw / 750));
  }


  .gridWrap.pickUp .gridItem.--02 .item.--01 {
    width: calc(690 * (100vw / 750));
    margin: 0 auto 0;
    /* border: none; */
  }

  .gridWrap.pickUp .gridItem.--03 .item.--01 {
    margin: 0 auto calc(30 * (100vw / 750));
    border: none;
  }
  .gridWrap.pickUp .item.--02 {
    display: grid;
    width: calc(690 * (100vw / 750));
    margin: auto;
    grid-template-columns: calc(0 * (100vw / 750)) calc(289 * (100vw / 750)) calc(387 * (100vw / 750)) auto;
    grid-template-rows: calc(36 * (100vw / 750)) calc(65* (100vw / 750)) calc(371 * (100vw / 750)) auto;
    margin-bottom: calc(60 * (100vw / 750));
  }

  .gridWrap.pickUp .gridItem.--02 .item.--02 {
    grid-template-columns: calc(27 * (100vw / 750)) calc(322 * (100vw / 750)) calc(365 * (100vw / 750)) auto;
    grid-template-rows: calc(11* (100vw / 750)) calc(62 * (100vw / 750)) calc(370 * (100vw / 750)) auto;
  }
  
  .gridWrap.pickUp .gridItem.--03 .item.--02 {
    grid-template-columns: calc(0 * (100vw / 750)) calc(266 * (100vw / 750)) calc(365 * (100vw / 750)) auto;
    grid-template-rows: calc(38* (100vw / 750)) calc(64 * (100vw / 750)) calc(370 * (100vw / 750)) auto;
  }

  .gridWrap.pickUp .gridItem.--02 .item.--02 {
    padding-top: calc(30 * (100vw / 750));
    border-top: none;
    grid-template-columns: calc(0 * (100vw / 750)) calc(292 * (100vw / 750)) calc(365 * (100vw / 750)) auto;
  }

  .gridWrap.pickUp .item_ttl {
    grid-column: 3;
    grid-row: 3;
  }

  .gridWrap.pickUp .imgBox {
    grid-column: 2;
    grid-row: 2;
    width: calc(320* (100vw / 750));
  }

  .gridWrap.pickUp .gridItem.--03 .imgBox{
    margin-left: calc(-31* (100vw / 750));
  }

  .gridWrap.pickUp .item_txt {
    padding-bottom: calc(100 * (100vw / 750));
    grid-column: 1/5;
    grid-row: 4;
    font-size: calc(24 * (100vw / 750));
    line-height: 2.083;
    letter-spacing: 0.03em;
  }

  /*  */
  .mv.mainVisual,
  .gridWrap.pickUp,
  .gridWrap.lineUp {
    position: relative;
    background-color: #e8e3da;
    z-index: 5;
  }

  .gridWrap.pickUp .gridItem.--03 {
    width: 100%;
    padding: 0 0 calc(80 * (100vw / 750));
    margin: 0 auto 0;
  }

  .gridWrap.pickUp .gridItem.--03 .item.--02 {
    width: calc(690 * (100vw / 750));
    margin: 0 auto calc(40 * (100vw / 750));
  }

  /*  */
  .bgArea {
    position: relative;
    height: calc(455 * (100vw / 750));
    background-image: none;
  }
  .bgArea::before{
    content: "";
    display: block;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/img-0401_sp.jpg);
  }
  .bgArea::before {
    opacity: 0;
    transition: opacity 0.5s;
    position: relative;
  }
  .bgArea.onView::before {
    position: fixed;
    opacity: 1;
  }
  .bgArea.onView.none::before {
    position: relative;
    opacity: 0;
  }

  /*  */
  .gridWrap.lineUp {
    padding: calc(160 * (100vw / 750)) 0 0;
  }
  .gridWrap.lineUp .grid_ttl{
    margin-bottom: calc(57 * (100vw / 750));
    font-size: calc(60 * (100vw / 750));
    letter-spacing: 0.03em;
  }
  .gridWrap.lineUp .gridItem.--01{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding-bottom: calc(181 * (100vw / 750));
    margin: 0;
  }
  .gridWrap.lineUp .gridItem.--01 .item{
    position: relative;
    width: calc(250 * (100vw / 750));
    padding-bottom: calc(42 * (100vw / 750));
    border-top: calc(2 * (100vw / 750)) solid #996a00;
  }
  .gridWrap.lineUp .gridItem.--01 .item:nth-last-of-type(-n+3){
    border-bottom: calc(2 * (100vw / 750)) solid #996a00;
  }
  .gridWrap.lineUp .gridItem.--01 .item::before{
    position: absolute;
    right: calc(-1 * (100vw / 750));
    /* bottom: calc(-18 * (100vw / 750)); */
    top: 50%;
    transform: translateY(-50%);
    content:
    "";
    display: block;
    width: calc(2 * (100vw / 750));
    height: calc(300 * (100vw / 750));
    background: #996a00;
  }
   .gridWrap.lineUp .gridItem.--01 .item.--01,
   .gridWrap.lineUp .gridItem.--01 .item.--02{
     width: 50%;
   }
   .gridWrap.lineUp .gridItem.--01 .item .imgBox{
     width: calc(220 * (100vw / 750));
     margin: calc(0 * (100vw / 750)) auto calc(0 * (100vw / 750));
   }
  .gridWrap.lineUp .gridItem.--01 .item .prodName{
    /* font-feature-settings: 'palt'; */
    font-family: "nimbus-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(22* (100vw / 750));
    line-height: 1;
    letter-spacing: 0.05em;
  }

  /*  */
  .btnWrap{
    position: relative;
    width: 100%;
    text-align: center;
    background: #e8e3da;
    padding-bottom: calc(180* (100vw / 750));
    margin-bottom: calc(195* (100vw / 750));
  }
  .btnWrap a{
    display: block;
    width: calc(673 * (100vw / 750));
    margin: auto;
  }
}

@media only screen and (min-width: 768px) {
  .pcOnly.maxWidth{
    width: 100%;
  }
  .LB1019 .mainVisual .imgBox {
    width: 96.0rem;
    margin: auto;
    padding: 50px 0 0;
  }
  .LB1019 .mv_ttl {
    font-size: 3.8rem;
    line-height: 1.141;
    letter-spacing: 0.05em;
  }

  .LB1019 .underline {
    position: relative;
    width: fit-content;
    margin: 7rem auto 4.1rem;
  }

  .LB1019 .underline::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content:
      "";
    width: 100%;
    height: 0.1rem;
    background: #996a00;
  }

  .LB1019 .mv_txt {
    padding-bottom: 9rem;
    font-feature-settings: "palt";
    font-size: 1.5rem;
    line-height: 2.267;
    letter-spacing: 0.125em;
  }

  /* gridWrap pickUp */
  .gridWrap .gridItem {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    height: 74.0rem;
    margin: 0 auto;
    flex-direction: row;
    border-top: solid #996a00 0.1rem;
  }
  .gridWrap .gridItem.--02{
    flex-direction: row-reverse;
    height: auto;
  }

  .item_ttl .num {
    margin-bottom: 1.7rem;
    font-size: 10.2rem;
    line-height: 1;
    letter-spacing: 0.03em;
  }

  .item_ttl .en {
    margin-bottom: 2rem;
    font-size: 4.5rem;
    letter-spacing: 0.03em;
  }

  .item_ttl .jp {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    color: #000;
  }

  .gridWrap.pickUp .item.--01,
  .gridWrap.pickUp .item.--02 {
    width: 65.7rem;
    border-left: solid #996a00 .1rem;
  }

  .gridWrap.pickUp .gridItem.--02 .item.--01{
    width: 50.0rem;
    border-left: none;
    border-right: solid #996a00 0.1rem;
    }
  .gridWrap.pickUp .gridItem.--02 .item.--02{
  width: 59.6rem;
  }


  .gridWrap.pickUp .gridItem.--03 .item.--01 {
    width: 50rem;
    padding: 6.8rem 7.8rem;
    border: none;
    border-left: solid #996a00 0.1rem;
  }

  .gridWrap.pickUp .gridItem.--01 .item.--01 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gridWrap.pickUp .gridItem.--01 .item.--01 > *{
    width: 50.0rem;
  }

  .gridWrap.pickUp .gridItem.--01 .item.--02 {
    display: grid;
    grid-template-columns: 5rem 15.3rem  1.5rem auto;
    grid-template-rows: 10.7rem 19.7rem 9rem auto;
  }

  .gridWrap.pickUp .item.--02 {
    display: grid;
    grid-template-columns: 6.7rem 12rem  12.8rem auto;
    grid-template-rows: 13.1rem 18.1rem 10.8rem auto;
    border-right: solid #996a00 0.1rem;
  }
  .gridWrap.pickUp .gridItem.--02 .item.--02 {
    display: grid;
    grid-template-columns: 5rem 13.2rem 2.3rem auto;
    grid-template-rows: 4.7rem 19.9rem 11.5rem auto;
    border-right: solid #996a00 0.1rem;
  }

  .gridWrap.pickUp .item_ttl {
    grid-column: 3;
    grid-row: 2;
    width: fit-content;
    z-index: 10;
  }

  .gridWrap.pickUp .imgBox {
    grid-column: 2;
    grid-row: 3;
    width: 23rem;
  }

  .gridWrap.pickUp .gridItem.--03 .imgBox {
    width: 23rem;
    margin: -0.2rem 0 -0.6rem;
}

  .gridWrap.pickUp .gridItem.--01 .imgBox o,g {
    transform: translateX(-.3rem);
  }

  .gridWrap.pickUp .item_txt {
    grid-column: 4;
    grid-row: 4;
    font-size: 1.3rem;
    line-height: 1.923;
    letter-spacing: 0.05em;
  }

  /*  */
  .mv.mainVisual,
  .gridWrap.pickUp,
  .gridWrap.lineUp {
    position: relative;
    background-color: #e8e3da;
    z-index: 5;
  }

  .gridWrap.pickUp .gridItem.--03 {
    border-bottom: solid #996a00 0.1rem;
  }

  .gridWrap.pickUp .gridItem.--03 .item.--02 {
  grid-template-columns: 6.5rem 12.2rem 3rem auto;
  grid-template-rows: 11.7rem 20.1rem 11.5rem auto;
  }

  /*  */
  .bgArea {
    display: flex;
    height: 39rem;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../img/img-0401_pc.jpg);
  }

  /*  */
  .gridWrap.lineUp {
    padding: 10rem 0 0;
  }
  .gridWrap.lineUp {}
  .gridWrap.lineUp .grid_ttl{
    margin-bottom: 5.3rem;
    font-size: 4.5rem;
    letter-spacing: 0.03em;
  }
  .gridWrap.lineUp .gridItem.--01{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 115rem;
    height: auto;
    padding-bottom: 0;
    border: none;
    /* border-bottom: solid #996a00 0.1rem; */
  }
  .gridWrap.lineUp .gridItem.--01 .item.--06,
  .gridWrap.lineUp .gridItem.--01 .item.--07,
  .gridWrap.lineUp .gridItem.--01 .item.--08,
  .gridWrap.lineUp .gridItem.--01 .item.--09{
    border: none;
  }
  .gridWrap.lineUp .gridItem.--01 .item{
    position: relative;
    width: 23rem;
    padding: 0 0 3.7rem;
    border-top: .1rem solid #996a00;
    border-bottom: .1rem solid #996a00;
  }
  .gridWrap.lineUp .gridItem.--01 .item .imgBox{
    width: 21rem;
    margin: auto;
  }
  .gridWrap.lineUp .gridItem.--01 .item.right::before,
  .gridWrap.lineUp .gridItem.--01 .item::before{
    position: absolute;
    right: -.1rem;
    /* bottom: -1.8rem; */
    top: 50%;
    transform: translateY(-50%);
    content:
    "";
    display: block;
    width: 0.1rem;
    height: 30.0rem;
    background: #996a00;
  }
  .gridWrap.lineUp .gridItem.--01 .item.right::before{
    right: auto;
    left: -.1rem;
  }
   .gridWrap.lineUp .gridItem.--01 .item.--05::before,
   .gridWrap.lineUp .gridItem.--01 .item.--09::before,
   .gridWrap.lineUp .gridItem.--01 .item.--14::before{
     display: none;
   }
  .gridWrap.lineUp .gridItem.--01 .item .prodName{
    /* font-feature-settings: 'palt'; */
    font-family: "nimbus-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 0.05em;
  }
   .gridWrap.lineUp .gridItem.--02 .item.--01{
     width: 21rem;
     margin: auto;
   }

  /*  */
  .btnWrap{
    position: relative;
    width: 100%;
    text-align: center;
    background: #e8e3da;
    padding: 11.6rem 0 12rem;
    margin-bottom: 15rem;
  }
  .btnWrap a{
    display: block;
    width: 42rem;
    margin: auto;
  }

  /* gridWrap pickUp */
  .gridWrap {}

  .gridWrap.pickUp {
    padding: 0 0 9.7rem;
    margin: 0 auto 0;
}
}


/***************************** section-06 *****************************/

/***************************** animation *****************************/
.LB1019 .js_fade,
.LB1019 .js_d_fade > * {
  visibility: hidden;
  opacity: 0;
  transform: translate(0, 40px);
  transition: all ease 1.5s;
}
.LB1019 .js_fade.active,
.LB1019 .js_d_fade.active > * {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}
.LB1019 span.js_fade.active,
.LB1019 span.js_d_fade.active > * {
  opacity: 0.5;
}
.LB1019 a {
  transition: .3s!important;
}
a:hover {
    opacity: .7!important;
}

/***************************** animation *****************************/