@charset "UTF-8";
/* media query

/* function
------------------------------------------ */
/* 変数
------------------------------------------ */
:root {
  --color-sub: #faf3dc;
}

/* overwrite
/* ------------------------------------------ */
/* #header {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(88, 98, 68)), to(rgba(88, 98, 68, 0)));
  background: linear-gradient(180deg, rgb(88, 98, 68), rgba(88, 98, 68, 0));
} */
/* .main-area.lp{
background-color: #edede6;
}

#header .header__inner .header__inner--left .header-logo a svg path {
  fill: #000;
}
#header .header__inner .header__inner--right .header-nav__user svg path {
  fill: #000;
}
#header .header__inner .header__inner--right .header-nav__search svg path {
  fill: #000;
}
#header .header__inner .header__inner--right .header-nav__cart svg path {
  fill: #000;
}
#header .header-nav__menuBtn span {
  background-color: #000;
}
#header .header-nav__menuBtn.open span {
  background-color: var(--color-main);
}
#header .header-menu a {
  color: #000;
}
#header .toggle-arrow::before, #header .toggle-arrow::after {
  background: #000;
} */

.header[data-header-theme="light"]{
  background: none;
}

.main-area{
  padding-top: 0;
}

.main-area.lp {
  margin-bottom: 0;
}

.header[data-header-theme="light"].c-active, .header[data-header-theme="dark"]{
  background: none;
}

#MC260618marine {
  /* 可変設定
  ------------------------------------------ */
  /*デザインの値*/
  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 480; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(
    var(--variable) * var(--ratio)
  ); /*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1); /*PCデザインの可変割合の計算式*/
  /* PC画面幅 1400px以上 固定 */
  /* PC画面幅 768～1400px 可変 */
  /* SP画面幅 767px以下 可変 */

  /* mixin
  ------------------------------------------ */
  /* reset
  ------------------------------------------ */
  /* animation
  ------------------------------------------ */
  /* 共通
  ------------------------------------------ */
  /* LP style
  ------------------------------------------ */
  margin: 0 auto;
  /* --color-white: #fff; */
  --color-blue-bg: #e9f3f3;
  --color-blue: #5ba2b3;
  --color-iceblue: #cde6eb;

  --font-dnp: "dnp-shuei-mincho-pr6n", sans-serif;
  --font-map: "map-roman-condensed", serif;
  --font-garamond: garamond-premier-pro-display, serif;
  --font-snell: "snell-roundhand-lt-std", sans-serif;
  /* --font-yu: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-semibold: 700;
  font-style: normal;
  color: var(--color-black);
  /* background-color: var(--color-blue-bg); */
}

/* 
font-family: garamond-premier-pro-display, serif;
font-weight: 400;
font-style: normal;

font-family: "map-roman-condensed", serif;
font-weight: 400;
font-style: normal;

font-family: "snell-roundhand-lt-std", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "dnp-shuei-mincho-pr6n", sans-serif;
font-weight: 400;
font-style: normal;
*/

@media (min-width: 1401px) {
  #MC260618marine {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比率 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}

@media (min-width: 768px) and (max-width: 1400px) {
  #MC260618marine {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */

    /* background-image: url(../img/pc-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat; */
    width: 100%;
  }
}

@media (max-width: 767px) {
  #MC260618marine {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}

/* @media (min-width: 768px) {
  .MC260618marine {
    padding-top: min(50px, calc(50 * (100vw / 1440)));
  }
} */

/* @media (max-width: 767px) {
  .MC260618marine{
    padding-top: calc(50 * (100vw / 375));
  }
} */


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

.MC260618marine a{
  display: inline-block;
}

.MC260618marine * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/* 
.MC260618marine{
  border-top: solid 1px var(--color-black);
} */

/* .pc-bg{
  display: none;
} */

@media (max-width: 767px) {
  .hidden-mobile{
    display: none;
  }

  .hidden-desktop{
    display: block;
  }
}

@media (min-width: 768px) {
  .hidden-mobile{
    display: block;
  }

  .hidden-desktop{
    display: none;
  }
}

.MC260618marine {
  overflow-x: clip;
}


/* PC
------------------------------------------ */
@media (min-width: 768px) {
  /* #MC260618marine{
    position: relative;
  } */

  #MC260618marine .fixed-bg{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(0deg, rgba(225, 240, 245, 1), rgba(244, 249, 249, 1) 70%);
    /* background-image: linear-gradient(0deg, rgba(225, 240, 245, 1), rgba(243, 243, 243, 1) 70%); */
    z-index: -1;
    /* background: linear-gradient(4deg, rgba(225, 240, 245, 1), rgba(244, 249, 249, 1)); */
  }

  .MC260618marine{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* background: linear-gradient(90deg, rgba(225, 240, 245, 1), rgba(233, 243, 243, 1) 70%); */
    z-index: 1;
  }

  .MC260618marine .lp-cont{
    width: calc(480 * var(--formula_pc));
    padding-top: calc(148 * var(--formula_pc));
  }

  .MC260618marine .lp-right-area,
  .MC260618marine .lp-left-area{
    flex: 1;
    display: grid;
    place-items: center;
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    height: 100vh;
    padding-top: calc(50 * (100vw / 1440));
  }

  .MC260618marine .lp-left-area_content{
    width: calc(287.8245 * var(--formula_pc));
    height: calc(160.6815 * var(--formula_pc));
    margin: 0 auto;
  }

  .MC260618marine .lp-right-area_content{
    width: calc(296.3333 * var(--formula_pc));
    height: calc(59.3333 * var(--formula_pc));
    margin: 0 auto;
  }
}

.main-area__inner .lp-cont{
  margin: 0 auto;
  overflow: clip;
  background-color: var(--color-blue-bg);
}


/* mv
------------------------------------------ */
@media (max-width: 768px) {
  #MC260618marine{
    padding-top: calc(250 * var(--formula));
    background-color: var(--color-blue-bg);
  }
}

.MC260618marine .mv .mv_inner{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  padding-top: calc(35 * var(--formula));
  margin-bottom: calc(110 * var(--formula));
}

.MC260618marine .mv_inner::after{
  content: "";
  position: absolute;
  background-image: url(../img/mv-frame.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(750 * var(--formula));
  height: calc(1162 * var(--formula));
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

.MC260618marine .mv_ttl{
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(90 * var(--formula));
  width: calc(556.0254 * var(--formula));
  z-index: 2;
  pointer-events: none;
}

/* intro
------------------------------------------ */
.MC260618marine .intro .intro_txt{
  font-family: var(--font-dnp);
  font-weight: var(--fw-medium);
  font-size: calc(26 * var(--formula));
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 2;
  font-feature-settings: "palt";
}

/* lp__inner 共通
------------------------------------------ */
.MC260618marine a,
.MC260618marine p,
.MC260618marine h4,
.MC260618marine span{
  color: var(--color-blue);
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
}

.MC260618marine .crdt{
  text-align: center;
  border-bottom: 1px solid var(--color-blue);
  margin-top: calc(30 * var(--formula));
}

.MC260618marine .crdt a,
.MC260618marine .crdt span{
  display: inline-block;
  font-family: var(--font-garamond);
  font-weight: var(--fw-regular);
  font-size: calc(26 * var(--formula));
  line-height: 1.2692307692;
  letter-spacing: 0.1em;
  text-align: center;
}

.MC260618marine .crdt a{
  line-height: 1;
}


.MC260618marine .item_color{
  display: inline-block;
  font-family: var(--font-garamond);
  font-weight: var(--fw-regular);
  font-size: calc(24 * var(--formula));
  line-height: 1.375;
  letter-spacing: 0.1em; 
  text-align: center;
  margin-top: calc(20 * var(--formula));
}

.MC260618marine .item{
  margin-top: calc(145 * var(--formula));
}

.MC260618marine .line__wrapper{
  width: 100%;
  height: calc(60 * var(--formula));
  margin-bottom: calc(75 * var(--formula));
}

.MC260618marine .ttl__wrapper{
  margin-bottom: calc(41 * var(--formula));
}

.MC260618marine .item_ttl{
  font-family: var(--font-map);
  font-size: calc(100 * var(--formula));
  text-align: center;
  line-height: 1;
}

.MC260618marine .item_ttl .font-adjust{
  font-size: calc(75 * var(--formula));
  line-height: 1.25;
}

.MC260618marine .item_subttl{
  /* font-family: var(--font-snell);
  font-size: calc(60 * var(--formula));
  text-align: center;
  line-height: 1;
  word-spacing: calc(-11 * var(--formula));
  letter-spacing: 0.015em; */

  width: calc(318.1011 * var(--formula));
  transform: translateY(calc(8 * var(--formula)));
  margin: calc(4 * var(--formula)) auto 0;
}

.MC260618marine .item_block.--01{
  margin-bottom: calc(20 * var(--formula));
}

.MC260618marine .item_txt{
  font-family: var(--font-garamond);
  font-size: calc(22 * var(--formula));
  letter-spacing: 0.1em;
  line-height: 1.5;
  width: calc(690 * var(--formula));
  text-align: justify;
  margin: calc(40 * var(--formula)) auto 0;
}

.MC260618marine .item_block.--02{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(110 * var(--formula));
  z-index: 1;
}

.MC260618marine .item_bg_ttl{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-snell);
  color: var(--color-iceblue);
  font-size: calc(180 * var(--formula));
  z-index: -1;;
}

.MC260618marine .item_img_flex{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  /* margin-top: calc(20 * var(--formula)); */
}

.MC260618marine .item_img a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.MC260618marine .item_img.s_280{
  width: calc(280 * var(--formula));
}


.MC260618marine .item_img.s_220{
  width: calc(220 * var(--formula));
}

.MC260618marine .item_frame{
  position: relative;
  z-index: 1;
}

.MC260618marine .item_frame::after{
  content: "";
  position: absolute;
  top: 0;
  background-image: url(../img/item-frame.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: calc(1125 * var(--formula));
  z-index: 2;
  pointer-events: none;
}


/* item
------------------------------------------ */
/* ----------------- 01 ---------------- */
.MC260618marine .item.--01{
  margin-top: calc(136 * var(--formula));
}

.MC260618marine .item.--01 .item_img_flex{
  column-gap: calc(20 * var(--formula));
}

/* ----------------- 02 ---------------- */
.MC260618marine .item.--02 .item_bg_ttl{
  letter-spacing: -0.025em;
}


.MC260618marine .item.--02 .crdt{
  margin-top: calc(43 * var(--formula));
}

/* ----------------- 03 ---------------- */
.MC260618marine .item.--03 .item_bg_ttl{
  letter-spacing: -0.03em;
  transform: translateX(-51%);
}

.MC260618marine .item.--03 .crdt{
  margin-top: calc(35 * var(--formula));
}

/* ----------------- 04 ---------------- */
.MC260618marine .item.--04 .item_bg_ttl{
  letter-spacing: -0.03em;
}

.MC260618marine .item.--04 .crdt{
  margin-top: calc(33 * var(--formula));
}

/* ----------------- 05 ---------------- */
.MC260618marine .item.--05 .item_bg_ttl{
  letter-spacing: -0.03em;
  transform: translateX(-51%);
}

/* ----------------- 06 ---------------- */
.MC260618marine .item.--06 .item_ttl{
  font-size: calc(100 * var(--formula));
  transform: translateX(calc(-8 * var(--formula)));
}

.MC260618marine .item.--06 .ttl__wrapper{
  margin-bottom: calc(25 * var(--formula));
}

.MC260618marine .item.--06 .item_txt{
  margin: calc(52 * var(--formula)) auto 0;
}

.MC260618marine .item.--06 .item_block.--01 .item_img{
  width: calc(600 * var(--formula));
  margin: 0 auto;
  padding-top: calc(13 * var(--formula));
}

.MC260618marine .item.--06 .item_img_flex{
  column-gap: calc(20 * var(--formula));
}

.MC260618marine .item.--06 .item_bg_ttl{
  word-spacing: calc(-32 * var(--formula));
  white-space: nowrap;
  transform: translateX(-51%);
}

.MC260618marine .item.--06 .item_block.--01 .item_frame::after{
  width: calc(634.4697 * var(--formula));
  background-image: url(../img/item05_2-frame.png);
  left: 50%;
  transform: translate(-50%);
}

.MC260618marine .item.--06 .crdt{
  margin-top: calc(35 * var(--formula));
}

/* ----------------- 07 ---------------- */
.MC260618marine .item.--07 .item_bg_ttl{
  letter-spacing: -0.019em;
  transform: translateX(-51.5%);
}

.MC260618marine .item.--07 .crdt{
  margin-top: calc(46 * var(--formula));
}

/* ----------------- 08 ---------------- */
.MC260618marine .item.--08 .line__wrapper{
  margin-bottom: calc(72 * var(--formula));
}


.MC260618marine .item.--08 .item_txt{
  letter-spacing: 0.099em;
  text-align: justify;
}

.MC260618marine .item.--08 .item_img_flex{
  column-gap: calc(20 * var(--formula));
}

.MC260618marine .item.--08 .crdt{
  margin-top: calc(33 * var(--formula));
}

/* ----------------- 09 ---------------- */
.MC260618marine .item.--09 .line__wrapper{
  margin-bottom: calc(69 * var(--formula));
}

.MC260618marine .item.--09 .font-adjust{
  display: inline-block;
  margin-bottom: calc(6 * var(--formula));
}

.MC260618marine .item.--09 .item_subttl{
  margin-top: calc(10 * var(--formula));
}

.MC260618marine .item.--09 .item_txt{
  margin: calc(36 * var(--formula)) auto 0;
}

.MC260618marine .item.--09 .item_bg_ttl{
  letter-spacing: -0.045em;
  transform: translateX(-53.2%);
  z-index: -1;
}

.MC260618marine .item.--09 .item_block.--02{
  position: relative;
  padding-top: calc(112 * var(--formula));
}

.MC260618marine .item.--09 .item_block.--02::before{
  content: "";
  position: absolute;
  background-image: url(../img/SVG/lumine_exclusive.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(140 * var(--formula));
  height: calc(140 * var(--formula));
  right: calc(18 * var(--formula));
  top: calc(24 * var(--formula));
  z-index: -2;
}

/* ----------------- lastsec ---------------- */
.MC260618marine .cai_btn a{
  width: 101%;
  transform: translateX(calc(-4 * var(--formula)));
  margin: calc(120 * var(--formula)) 0 calc(100 * var(--formula));
}

.MC260618marine .copy_writing{
  width: calc(506.8555 * var(--formula));
  margin: 0 auto;
  padding-bottom: calc(65 * var(--formula));
}


/*******************************
.animation
*******************************/
.js-show.fadeIn.delay_1{
  transition-delay: 0.2s;
}

.js-show.anim_delay_1{
  transition-delay: 0.2s;
  animation-delay: 0.2s;
}

.js-show.fadeIn.delay_2{
  transition-delay: 0.5s;
}

/*  fadeIn ___________________________*/
.js-show.fadeIn {
  opacity: 0;
  -webkit-transition: opacity 2.0s ease-out 0s;
  transition: opacity 2.0s ease-out 0s;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.js-show.fadeIn.js-scrollIn {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/*  zoomOut img ___________________________*/
.js-show.zoomOut{
  overflow: hidden
}

.js-show.zoomOut img {
  opacity: 0;
  transition: 2s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: scale(1.1);
}

.js-show.zoomOut.js-scrollIn img {
  opacity: 1;
  transform: none;
}