@charset "UTF-8";
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - custom property
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.MC250827oil {
  --color-white: #fff;
  --color-black: #000;
  --color-blue: #387FC0;
  --color-orange: #FAEAD3;
  --font-hiragino: "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --font-larken: "larken", sans-serif;
  --font-ja: var(--font-hiragino);
  --font-en: var(--font-larken);
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  overflow: clip;
  background-color: var(--color-orange);
}

.main-area {
  padding-top: 190px;
}

.main-area.lp {
  background-color: #FAEAD3;
  background-size: 100% auto;
  background-position: top center;
  position: relative;
  z-index: 0;
  margin-bottom: 0;
}
@media (max-width: 767px) {
.main-area {
  padding-top: 154px;
}
}

.header .header__inner {
  position: relative;
}

.header .header__inner::after {
  position: absolute;
  content: "";
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity .5s ease;
  z-index: -1;
}

.header .header__inner::after {
  opacity: 1;
  background: linear-gradient(0deg, rgba(250, 234, 211, 0) 0%, rgba(250, 234, 211, 1) 100%);
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - others
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .MC250827oil .hidden-desktop {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .MC250827oil .hidden-mobile {
    display: none !important;
  }
}
.MC250827oil img,
.MC250827oil video {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - position
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.MC250827oil .common-position {
  position: absolute;
}
.MC250827oil .common-grid {
  display: grid;
  gap: var(--row, 0) var(--column, 0);
}
.MC250827oil .common-flex_row {
  display: flex;
  flex-direction: row;
  gap: var(--row, 0) var(--column, 0);
}
.MC250827oil .common-flex_row_reverse {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--row, 0) var(--column, 0);
}
.MC250827oil .common-flex_column {
  display: flex;
  flex-direction: column;
  gap: var(--row, 0) var(--column, 0);
}
.MC250827oil .common-flex_column_reverse {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--row, 0) var(--column, 0);
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - rotate_txt01
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.rotate_txt01 {
  width: calc(527*(100vw / 1440));
  position: fixed;
  right: calc(-173*(100vw / 1440));
  top: calc(-162*(100vw / 1440));
  z-index: 50;
  animation: 18s linear infinite rotation;
  pointer-events: none;
}
.rotate_txt02 {
  width: calc(402*(100vw / 1440));
  position: fixed;
  left: calc(-151*(100vw / 1440));
  bottom: calc(-247 * (100vw / 1440));
  z-index: 50;
  animation: 18s linear infinite rotation;
  pointer-events: none;
}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

@keyframes rotation2{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(-360deg); }
}

@media screen and (max-width: 767px) {
  .rotate_txt01 {
    width: calc(217 * (100vw / 375));
    right: calc(-92 * (100vw / 375));
    top: calc(-1 * (100vw / 375));
  }
  .rotate_txt02 {
    width: calc(166 * (100vw / 375));
    left: calc(-58 * (100vw / 375));
    bottom: calc(14 * (100vw / 375));
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - hero
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.MC250827oil .hero {
  width: calc(826*(100vw / 1440));
  margin-left: 0;
  background-color: var(--color-blue);
}
.MC250827oil .hero_title {
  font-size: calc(95*(100vw / 1440));
  letter-spacing: 0.02em;
  line-height: 1.1052631579;
  color: var(--color-white);
  font-family: var(--font-en);
  font-weight: var(--font-weight-regular);
  padding: calc(21*(100vw / 1440)) calc(50*(100vw / 1440)) calc(20*(100vw / 1440)) calc(50*(100vw / 1440));
}

@media screen and (max-width: 767px) {
  .MC250827oil .hero {
    width: calc(312*(100vw / 375));
  }
  .MC250827oil .hero_title {
    font-size: calc(36 * (100vw / 375));
    line-height: 1.1111111111;
    white-space: nowrap;
    padding: calc(9 * (100vw / 375)) calc(19 * (100vw / 375)) calc(6 * (100vw / 375)) calc(19 * (100vw / 375));
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - main_container
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.MC250827oil .main_container {
  width: 100%;
  margin: 0 auto;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - product
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.MC250827oil .product {
  position: relative;
  width: 100%;
  height: calc(4829*(100vw / 1440));
  margin: 0 auto;
}
.MC250827oil .product_img {
  position: absolute;
}
.MC250827oil .product_img01 {
  width: calc(442*(100vw / 1440));
  left: calc(230*(100vw / 1440));
  top: 0;
  z-index: 40;
}
.MC250827oil .product_img02 {
  width: calc(576*(100vw / 1440));
  right: 0;
  top: calc(40*(100vw / 1440));
  z-index: 20;
}
.MC250827oil .product_img03 {
  width: calc(638*(100vw / 1440));
  left: calc(468*(100vw / 1440));
  top: calc(608*(100vw / 1440));
  z-index: 30;
}
.MC250827oil .product_img04 {
  width: calc(392*(100vw / 1440));
  left: 0;
  top: calc(723*(100vw / 1440));
  z-index: 30;
}
.MC250827oil .product_img05 {
  width: calc(296*(100vw / 1440));
  right: 0;
  top: calc(988*(100vw / 1440));
  z-index: 30;
}
.MC250827oil .product_img06 {
  width: calc(491*(100vw / 1440));
  left: calc(77*(100vw / 1440));
  top: calc(1176*(100vw / 1440));
  z-index: 20;
}
.MC250827oil .product_img07 {
  width: calc(675*(100vw / 1440));
  right: calc(70*(100vw / 1440));
  top: calc(1304*(100vw / 1440));
  z-index: 40;
}
.MC250827oil .product_img08 {
  width: calc(388*(100vw / 1440));
  left: 0;
  top: calc(1752*(100vw / 1440));
  z-index: 10;
}
.MC250827oil .product_img09 {
  width: calc(565*(100vw / 1440));
  left: calc(307*(100vw / 1440));
  top: calc(1968*(100vw / 1440));
  z-index: 5;
}
.MC250827oil .product_img10 {
  width: calc(389*(100vw / 1440));
  right: 0;
  top: calc(2297*(100vw / 1440));
  z-index: 45;
}
.MC250827oil .product_img11 {
  width: calc(519*(100vw / 1440));
  left: 0;
  bottom: calc(1153*(100vw / 1440));
  z-index: 4;
}
.MC250827oil .product_img12 {
  width: calc(529*(100vw / 1440));
  right: calc(135*(100vw / 1440));
  bottom: calc(1111*(100vw / 1440));
  z-index: 4;
}
.MC250827oil .product_img13 {
  width: calc(676*(100vw / 1440));
  left: calc(50*(100vw / 1440));
  bottom: calc(74*(100vw / 1440));
  z-index: 10;
}
.MC250827oil .product_img14 {
  width: calc(453*(100vw / 1440));
  right: 0;
  bottom: calc(683*(100vw / 1440));
  z-index: 10;
}
.MC250827oil .product_img15 {
  width: calc(410*(100vw / 1440));
  right: calc(415*(100vw / 1440));
  bottom: calc(476*(100vw / 1440));
  z-index: 20;
}
.MC250827oil .product_img16 {
  width: calc(576*(100vw / 1440));
  right: calc(62*(100vw / 1440));
  bottom: 0;
  z-index: 10;
}

@media screen and (max-width: 767px) {

}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - closing
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.MC250827oil .closing {
  width: 100%;
  margin: 0 auto;
  padding-bottom: calc(39*(100vw / 1440));
}
.MC250827oil .closing_inner {
  width: calc(370*(100vw / 1440));
  margin: 0 auto;
  padding-top: calc(60*(100vw / 1440));
  position: relative;
}
.MC250827oil .closing_btn {
  width: calc(235*(100vw / 1440));
  margin: 0 auto;
}
.MC250827oil .btn_deco01 {
  position: absolute;
  width: calc(47*(100vw / 1440));
  top: calc(62*(100vw / 1440));
  left: calc(80*(100vw / 1440));
  animation: blink 3s ease-in-out infinite;
}
.MC250827oil .btn_deco02 {
  position: absolute;
  width: calc(24*(100vw / 1440));
  top: calc(165*(100vw / 1440));
  right: calc(94*(100vw / 1440));
  animation: blink 3s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { 
    opacity: 1;
  }
  50% { 
    opacity: 0.2;
  }
}
.MC250827oil .closing_copy {
  font-size: calc(13*(100vw / 1440));
  line-height: 1.25;
  letter-spacing: 0;
  font-family: var(--font-ja);
  text-align: center;
  margin-top: calc(52*(100vw / 1440));
  color: #387FC0;
}
@media screen and (max-width: 767px) {
  .MC250827oil .closing {
    padding-bottom: calc(25 * (100vw / 375));
  }
  .MC250827oil .closing_inner {
    width: calc(375*(100vw / 375));
    padding-top: calc(39 * (100vw / 375));
  }
  .MC250827oil .closing_btn {
    width: calc(178*(100vw / 375));
  }
  .MC250827oil .btn_deco01 {
    width: calc(36*(100vw / 375));
    top: calc(41 * (100vw / 375));
    left: calc(107 * (100vw / 375));
  }
  .MC250827oil .btn_deco02 {
    width: calc(18*(100vw / 375));
    top: calc(118 * (100vw / 375));
    right: calc(120 * (100vw / 375));
  }
  .MC250827oil .closing_copy {
    font-size: calc(10*(100vw / 375));
    margin-top: calc(39 * (100vw / 375));
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - animation
//////////////////////////////////////////////////////////////////////////////////////////////
*/
  .MC250827oil .js-fade {
    opacity: 0;
    transform: scale(1.05);
    transition: ease-in, opacity 1500ms, transform 1500ms;
  }
  .MC250827oil .js-fade--active {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px) scale3d(1.001, 1.001, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
  }

  .MC250827oil .js-fadeIn-load {
  opacity: 0;
  transform: opacity 0.3s ease;
}

  .MC250827oil .js-fadeIn-load.active {
  animation: fadeIn-load 1s forwards;
}

@keyframes fadeIn-load {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
  .MC250827oil .js-fadeIn-load.delay1 {
    transition-delay: 1s;
    animation-delay: 1s;
  }
  .MC250827oil .js-fadeIn-load.delay2 {
    transition-delay: 2s;
    animation-delay: 2s;
  }

.MC250827oil .js-fadeIn {
  opacity: 0;
  transition: translate 1s, opacity 0.5s, transform 0.5s;
}

.MC250827oil .js-fadeIn.js-active {
  opacity: 1;
}