@charset "UTF-8";
:root {
  --text-color: #fff;
  --bg: #000;
  --bg2: #383838;
  --title: "Zen Old Mincho", serif;
  --text: "Zen Old Mincho", serif;
  --en-num: "Zen Old Mincho", serif;
}

/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
  /* 2 */
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px;
  /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit;
  /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "←";
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*anime
-----------------------------------------------*/
.car-move {
  -webkit-animation-name: CarAnime;
          animation-name: CarAnime;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes CarAnime {
  0% {
    opacity: 0;
    transform: translate(100px, -100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes CarAnime {
  0% {
    opacity: 0;
    transform: translate(100px, -100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
/* 共通の初期設定：スクロールするまで透明にする */
.CarMoveTrigger,
.fadeUpTrigger,
.fadeInTrigger,
.fadeLineTrigger01,
.fadeLineTrigger02,
.fadeLineTrigger03,
.fadeLeftTrigger,
.fadeLeftTrigger01,
.fadeLeftTrigger02,
.fadeLeftTrigger03,
.fadeLeftTrigger04,
.fadeLeftTrigger05,
.fadeRightTrigger01,
.blurTrigger,
.blurTrigger--sp {
  opacity: 0;
}

.fadeRightTrigger,
.fadeRightTrigger02,
.fadeRight--imgTrigger {
  overflow: hidden;
  position: relative;
  opacity: 0;
}

/* fadeUp アニメーション */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
    /* 100px下から上へフェードイン */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻る */
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
    /* 100px下から上へフェードイン */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻る */
  }
}
.fadeIn {
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeInAnime {
  from {
    opacity: 0;
    transform: translateY(-50px);
    /* 100px下から上へフェードイン */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻る */
  }
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
    transform: translateY(-50px);
    /* 100px下から上へフェードイン */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻る */
  }
}
/* fadeRight アニメーション */
.fadeRight {
  opacity: 1;
}
.fadeRight::before {
  -webkit-animation: fadeRightAnime 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
          animation: fadeRightAnime 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #000;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
@media (max-width: 600px) {
  .fadeRight::before {
    -webkit-animation: none;
            animation: none;
    inset: inherit;
  }
}

.fadeRight--img {
  opacity: 1;
  overflow: hidden;
  position: relative;
}
.fadeRight--img::before {
  -webkit-animation: fadeRightAnime 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
          animation: fadeRightAnime 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #000;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@-webkit-keyframes fadeRightAnime {
  100% {
    transform: translateX(100%);
    /* 右から左へフェードイン */
  }
}

@keyframes fadeRightAnime {
  100% {
    transform: translateX(100%);
    /* 右から左へフェードイン */
  }
}
.fadeLeft01 {
  opacity: 1;
  overflow: hidden;
  position: relative;
}
.fadeLeft01::before {
  -webkit-animation: fadeLeft01Anime 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
          animation: fadeLeft01Anime 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #000;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@-webkit-keyframes fadeLeft01Anime {
  100% {
    transform: translateX(-100%);
    /* 右から左へフェードイン */
  }
}

@keyframes fadeLeft01Anime {
  100% {
    transform: translateX(-100%);
    /* 右から左へフェードイン */
  }
}
.fadeRight01 {
  -webkit-animation-name: fadeRightAnime01;
          animation-name: fadeRightAnime01;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

.fadeRightCar {
  -webkit-animation-name: fadeRightAnime01;
          animation-name: fadeRightAnime01;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

.fadeRight02 {
  opacity: 1;
}
.fadeRight02::before {
  -webkit-animation: fadeRightAnime02 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
          animation: fadeRightAnime02 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #000;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
@media (max-width: 600px) {
  .fadeRight02::before {
    -webkit-animation: none;
            animation: none;
    inset: inherit;
  }
}

@-webkit-keyframes fadeRightAnime01 {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    /* 元の位置に戻る */
  }
}

@keyframes fadeRightAnime01 {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    /* 元の位置に戻る */
  }
}
@-webkit-keyframes fadeRightAnime02 {
  100% {
    transform: translateX(-100%);
    /* 右から左へフェードイン */
  }
}
@keyframes fadeRightAnime02 {
  100% {
    transform: translateX(-100%);
    /* 右から左へフェードイン */
  }
}
.fadeLeft {
  -webkit-animation-name: fadeLeft;
          animation-name: fadeLeft;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
    /* 右から左へフェードイン */
  }
  to {
    opacity: 1;
    transform: translateX(0);
    /* 元の位置に戻る */
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
    /* 右から左へフェードイン */
  }
  to {
    opacity: 1;
    transform: translateX(0);
    /* 元の位置に戻る */
  }
}
.fadeLeft02 {
  -webkit-animation-name: fadeLeft;
          animation-name: fadeLeft;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

.fadeLeft03 {
  -webkit-animation-name: fadeLeft03;
          animation-name: fadeLeft03;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeLeft03 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    /* 元の位置に戻る */
    background: linear-gradient(270deg, #3B3B3B 0%, #000000 100%);
  }
}

@keyframes fadeLeft03 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    /* 元の位置に戻る */
    background: linear-gradient(270deg, #3B3B3B 0%, #000000 100%);
  }
}
.fadeLeft04 {
  -webkit-animation-name: fadeLeft04;
          animation-name: fadeLeft04;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  background: #000;
}

@-webkit-keyframes fadeLeft04 {
  from {
    opacity: 0;
    background: #000;
  }
  to {
    opacity: 1;
    /* 元の位置に戻る */
    background: linear-gradient(-90deg, #3B3B3B 17.25%, #000 60%);
  }
}

@keyframes fadeLeft04 {
  from {
    opacity: 0;
    background: #000;
  }
  to {
    opacity: 1;
    /* 元の位置に戻る */
    background: linear-gradient(-90deg, #3B3B3B 17.25%, #000 60%);
  }
}
.fadeLeft05 {
  -webkit-animation-name: fadeLeft05;
          animation-name: fadeLeft05;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  background: #000;
}

@-webkit-keyframes fadeLeft05 {
  from {
    opacity: 0;
    background: #000;
  }
  to {
    opacity: 1;
    /* 元の位置に戻る */
    background: linear-gradient(-90deg, #3B3B3B 17.25%, #1F1F1F 51%);
  }
}

@keyframes fadeLeft05 {
  from {
    opacity: 0;
    background: #000;
  }
  to {
    opacity: 1;
    /* 元の位置に戻る */
    background: linear-gradient(-90deg, #3B3B3B 17.25%, #1F1F1F 51%);
  }
}
/* fadeLine アニメーション */
.fadeLine,
.fadeLine02 {
  -webkit-animation-name: fadeLine;
          animation-name: fadeLine;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  background: #000;
  /* 黒背景を指定 */
}

@-webkit-keyframes fadeLine {
  from {
    opacity: 0;
    transform: translate(100%, -200%);
    /* 初期位置：右上 */
  }
  to {
    opacity: 1;
    transform: translate(0);
    /* 元の位置に戻る */
  }
}

@keyframes fadeLine {
  from {
    opacity: 0;
    transform: translate(100%, -200%);
    /* 初期位置：右上 */
  }
  to {
    opacity: 1;
    transform: translate(0);
    /* 元の位置に戻る */
  }
}
.fadeLine03 {
  -webkit-animation-name: fadeLine03;
          animation-name: fadeLine03;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeLine03 {
  from {
    opacity: 0;
    transform: translate(200%, -200%);
    /* 初期位置：右上 */
  }
  to {
    opacity: 1;
    transform: translate(0);
    /* 元の位置に戻る */
  }
}

@keyframes fadeLine03 {
  from {
    opacity: 0;
    transform: translate(200%, -200%);
    /* 初期位置：右上 */
  }
  to {
    opacity: 1;
    transform: translate(0);
    /* 元の位置に戻る */
  }
}
.blur,
.blur--sp {
  -webkit-animation-name: blurAnime;
          animation-name: blurAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.blur--sp {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

@-webkit-keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/*base
-----------------------------------------------*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-size: clamp(1.3rem, 2.17vw, 2.4rem);
  font-family: var(--text);
  color: var(--text-color);
  background-color: var(--bg);
  letter-spacing: 0.05em;
  line-height: 1.5;
}

img {
  vertical-align: bottom;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

a {
  transition: 0.3s;
}
a:hover, a:focus {
  opacity: 0.8;
}

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #000;
  /* Loading画像中央配置　*/
}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#splash_logo img {
  width: 500px;
}
@media (max-width: 600px) {
  #splash_logo img {
    width: 200px;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.section {
  position: relative;
}
.section__title {
  font-family: var(--title);
  font-weight: 700;
  font-size: clamp(2.3rem, 3.83vw, 4.8rem);
  margin-bottom: 40px;
}
.section__title span img {
  vertical-align: sub;
  width: 55px;
}
.section__sub-title {
  font-family: var(--title);
  font-weight: 700;
  font-size: clamp(2rem, 3.33vw, 4rem);
  margin-bottom: 15px;
}
@media (max-width: 600px) {
  .section__title {
    margin-bottom: 18px;
  }
  .section span img {
    width: 25px;
    height: 25px;
  }
}

#page-top {
  width: 54px;
  height: 74px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 9998;
  opacity: 0;
  transition: 0.3s;
}
#page-top.active {
  opacity: 1;
}

#skip {
  width: 52px;
  height: 15px;
  position: fixed;
  top: 280px;
  right: 12.5vw;
  z-index: 9998;
}
@media (max-width: 600px) {
  #skip {
    top: 150px;
    right: 21px;
  }
}

.triangle {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  right: 0;
  top: -450px;
  background: url(../img/texture.webp);
  height: calc(tan(60deg) * 1440px / 2);
  width: 1440px;
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
          clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
@media (max-width: 600px) {
  .triangle {
    top: -290px;
    width: 900px;
    height: calc(tan(60deg) * 900px / 2);
  }
}

.bg-line {
  position: absolute;
  z-index: -1;
  -webkit-clip-path: polygon(56% 0, 100% 0, 44% 100%, 0 129%);
          clip-path: polygon(56% 0, 100% 0, 44% 100%, 0 129%);
  background: linear-gradient(-90deg, #3B3B3B 17.25%, #1F1F1F 51%);
  width: 100%;
  height: 85%;
}

.light__title {
  font-size: clamp(2rem, 3.33vw, 4rem);
}
.light__textbox {
  position: relative;
  max-width: 1051px;
  margin-inline: auto;
  padding: 100px 16px;
  text-align: center;
}
.light__textbox::before, .light__textbox::after {
  content: "";
  position: absolute;
  transform: translateX(-50%);
  transition: transform 0.5s ease-in-out;
}
.light__textbox::before {
  content: url(../img/light-group-2.webp);
  right: 0;
  top: 0;
}
.light__textbox::after {
  content: url(../img/light-group-1.webp);
  left: 0;
  bottom: 0;
}
.light__textbox.blur::before, .light__textbox.blur::after {
  transform: translateX(0);
  opacity: 1;
}
.light__textbox.animate::before {
  -webkit-animation: animate1 2s linear infinite;
          animation: animate1 2s linear infinite;
}
.light__textbox.animate::after {
  -webkit-animation: animate2 2s linear infinite;
          animation: animate2 2s linear infinite;
}
@-webkit-keyframes animate1 {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  90% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes animate1 {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  90% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes animate2 {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  90% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes animate2 {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  90% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
  }
}
.light__textbox--reverse::before {
  content: url(../img/light-group-1.webp);
  right: inherit;
  left: 0;
}
.light__textbox--reverse::after {
  content: url(../img/light-group-2.webp);
  left: inherit;
  right: 0;
}
@media (max-width: 600px) {
  .light__textbox {
    padding: 40px 31px;
  }
  .light__textbox--ps {
    padding: 40px 10px;
  }
  .light__textbox::before, .light__textbox::after {
    content: url(../img/light-group-1-sp.webp);
  }
}

.pc-none {
  display: block;
}
@media (max-width: 600px) {
  .pc-none {
    display: none;
  }
}

.tb-none {
  display: none;
}
@media (max-width: 1024px) {
  .tb-none {
    display: block;
  }
}

.sp-none {
  display: none;
}
@media (max-width: 600px) {
  .sp-none {
    display: block;
  }
}

/*header
-----------------------------------------------*/
.header {
  padding-top: 117px;
  padding-left: 174px;
}
.header__logo {
  width: min(421px, 100%);
  min-width: 249px;
  position: relative;
}
.header__logo img {
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 8.9/1.1;
}
.header__logo::after {
  content: url(../img/light-02.webp);
  display: block;
  text-align: center;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease-in 1s;
}
.header__logo.fadeUp::after {
  opacity: 1;
}
@media (max-width: 1024px) {
  .header {
    padding-left: inherit;
    padding-top: 66px;
  }
  .header__logo {
    margin-inline: auto;
  }
}
@media (max-width: 600px) {
  .header {
    width: 249px;
    margin-inline: auto;
  }
}

/*footer
-----------------------------------------------*/
.footer {
  margin-bottom: 150px;
}
.footer__logo {
  max-width: 500px;
  display: block;
  margin: 0 auto 375px;
}
.footer__top {
  margin-inline: auto;
  text-align: center;
}
.footer__top a {
  width: 300px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.footer__top a::after {
  margin-top: 15px;
  display: block;
  content: url(../img/light-03.webp);
  opacity: 0;
  transition: opacity 0.5s ease-in 1s;
}
.footer__top a.fadeUp::after {
  opacity: 1;
}
@media (max-width: 1024px) {
  .footer {
    margin-bottom: 72px;
  }
  .footer__logo {
    margin-bottom: 99px;
  }
}
@media (max-width: 600px) {
  .footer__logo img {
    -o-object-fit: contain;
       object-fit: contain;
    aspect-ratio: 268/159;
    height: 159px;
  }
}

.top {
  max-width: 1440px;
  margin-inline: auto;
  overflow: hidden;
}

/*fv
-----------------------------------------------*/
.fv {
  position: relative;
}
.fv::before {
  content: "";
  position: absolute;
  right: 0;
  top: -140px;
  z-index: -1;
  width: min(794px, 55%);
  height: min(794px, 100%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
}
.fv__img {
  position: relative;
  z-index: 10;
  width: min(909px, 100%);
  margin-left: 14.7%;
}
.fv__img img {
  aspect-ratio: 6/4;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 1024px) {
  .fv::before {
    top: -60px;
    width: min(794px, 100%);
  }
  .fv__img {
    margin-inline: auto;
  }
}
@media (max-width: 600px) {
  .fv::before {
    background: inherit;
  }
  .fv__img {
    z-index: 0;
    margin-top: -160px;
  }
}

/*story
-----------------------------------------------*/
.story {
  z-index: 0;
}
.story__bg-line {
  rotate: -90deg;
  left: 0;
  top: -463px;
}
.story__bg-line02 {
  z-index: 0;
  -webkit-clip-path: polygon(70% 0, 100% 0, 36% 100%, 0 100%);
          clip-path: polygon(70% 0, 100% 0, 36% 100%, 0 100%);
  rotate: 18deg;
  right: 136px;
  top: 458px;
  width: 120%;
}
.story__bg-line03 {
  z-index: 0;
  background: url(../img/texture.webp) no-repeat;
  -webkit-clip-path: polygon(0 63%, 100% 0, 100% 37%, 0 100%);
          clip-path: polygon(0 63%, 100% 0, 100% 37%, 0 100%);
  rotate: -306deg;
  left: 170px;
  bottom: -971px;
  width: 100%;
}
.story__top {
  opacity: 0;
  max-width: 784px;
  margin-left: auto;
  margin-bottom: 100px;
  position: relative;
  z-index: 3;
}
.story__item--left {
  margin-bottom: 160px;
}
.story__img {
  max-width: 936px;
  position: relative;
  z-index: -1;
}
.story__img--right {
  margin-left: auto;
}
.story__text {
  position: absolute;
  bottom: 40px;
  left: 218px;
}
.story__num {
  width: 116px;
}
.story__num--right {
  margin-left: auto;
}
.story__flag01 {
  position: absolute;
  top: 528px;
  right: 120px;
  z-index: 10;
  -webkit-clip-path: polygon(0 0, 100% 28%, 100% 100%, 0 72%);
          clip-path: polygon(0 0, 100% 28%, 100% 100%, 0 72%);
  background: linear-gradient(180deg, #5A5758 -14.91%, #000000 106.46%);
  box-shadow: inset -5px -5px 6px 0px rgba(0, 0, 0, 0.8);
  width: 499px;
  height: 784px;
}
.story__flag01::before, .story__flag01::after {
  position: absolute;
  content: url(../img/light-01.webp);
  opacity: 0;
  transition: opacity 0.5s ease-in 1s;
}
.story__flag01::before {
  top: -22px;
  left: -31px;
  rotate: -1deg;
}
.story__flag01::after {
  bottom: -33px;
  left: 3px;
  rotate: -1deg;
}
.story__flag01.fadeIn::before, .story__flag01.fadeIn::after {
  opacity: 1;
}
.story__flag02 {
  position: absolute;
  bottom: -240px;
  left: 70px;
  z-index: 10;
  -webkit-clip-path: polygon(0 28%, 100% 0, 100% 72%, 0 100%);
          clip-path: polygon(0 28%, 100% 0, 100% 72%, 0 100%);
  background: linear-gradient(180deg, #5A5758 -14.91%, #000000 106.46%);
  box-shadow: inset -5px -5px 6px 0px rgba(0, 0, 0, 0.8);
  width: 499px;
  height: 784px;
  text-align: right;
}
.story__flag02::before, .story__flag02::after {
  position: absolute;
  content: url(../img/light-01.webp);
  opacity: 0;
  transition: opacity 0.5s ease-in 1s;
}
.story__flag02::before {
  top: -16px;
  left: -26px;
  rotate: -49deg;
}
.story__flag02::after {
  bottom: -15px;
  left: 0px;
  rotate: -49deg;
}
.story__flag02.fadeIn::before, .story__flag02.fadeIn::after {
  opacity: 1;
}
.story__textbox {
  padding-top: 180px;
  width: min(418px, 100%);
  margin-inline: auto;
}
@media (max-width: 1279px) {
  .story__text {
    left: 32px;
  }
  .story__flag01, .story__flag02 {
    width: 440px;
  }
  .story__flag01 {
    right: 16px;
    -webkit-clip-path: polygon(0 0, 100% 26%, 100% 100%, 0 74%);
            clip-path: polygon(0 0, 100% 26%, 100% 100%, 0 74%);
  }
  .story__flag01::before {
    top: -30px;
    left: -63px;
    rotate: inherit;
  }
  .story__flag01::after {
    bottom: -38px;
    left: -38px;
    rotate: inherit;
  }
  .story__flag02 {
    left: 16px;
    -webkit-clip-path: polygon(0 27%, 100% 0, 100% 71%, 0 100%);
            clip-path: polygon(0 27%, 100% 0, 100% 71%, 0 100%);
  }
  .story__flag02::before {
    top: -19px;
    left: -54px;
    rotate: -51deg;
  }
  .story__flag02::after {
    bottom: -34px;
    left: -62px;
    rotate: -51deg;
  }
}
@media (max-width: 1024px) {
  .story__bg-line {
    top: -1032px;
    rotate: -73deg;
  }
  .story__bg-line02 {
    rotate: 35deg;
    right: 230px;
    top: 380px;
  }
  .story__bg-line03 {
    background: linear-gradient(180deg, #3B3B3B 8.25%, #000 67%);
    -webkit-clip-path: polygon(70% 0, 100% 0, 36% 100%, 0 100%);
            clip-path: polygon(70% 0, 100% 0, 36% 100%, 0 100%);
    rotate: -82deg;
    left: 440px;
    bottom: -770px;
    width: 120%;
  }
  .story__list {
    margin-bottom: 300px;
  }
  .story__item--left {
    margin-top: 1200px;
    margin-bottom: 360px;
  }
  .story__flag01 {
    top: 596px;
  }
  .story__flag02 {
    left: 170px;
    bottom: 300px;
  }
  .story__img {
    margin-inline: auto;
  }
  .story__text {
    left: inherit;
    right: 40px;
    bottom: 180px;
  }
}
@media (max-width: 600px) {
  .story {
    z-index: -25;
  }
  .story__img img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .story__num img {
    width: 65px;
    height: 45px;
  }
  .story__textbox {
    padding: 120px 50px 0;
    letter-spacing: 0.01em;
  }
  .story__bg-line {
    top: -950px;
    background: linear-gradient(-90deg, #5A5758 17.25%, #1F1F1F 51%);
  }
  .story__bg-line02 {
    rotate: 50deg;
    right: 230px;
    top: -100px;
    width: 650px;
    -webkit-clip-path: polygon(74% 0, 100% 0, 36% 100%, 0 100%) !important;
            clip-path: polygon(74% 0, 100% 0, 36% 100%, 0 100%) !important;
  }
  .story__bg-line03 {
    rotate: -78deg;
    left: 160px;
    bottom: -300px;
    width: 140%;
  }
  .story__top {
    text-align: center;
  }
  .story__list {
    margin-top: -100px;
  }
  .story__item--left {
    margin-top: 550px;
  }
  .story__item--right {
    margin-top: -350px;
  }
  .story__flag01, .story__flag02 {
    width: 268px;
    height: 472px;
  }
  .story__flag01 {
    -webkit-clip-path: polygon(0 0, 100% 23%, 100% 100%, 0 77%);
            clip-path: polygon(0 0, 100% 23%, 100% 100%, 0 77%);
    top: 367px;
  }
  .story__flag01:before {
    top: -110px;
    left: -230px;
    rotate: -3deg;
  }
  .story__flag01::after {
    bottom: -31px;
    left: -240px;
    rotate: -2deg;
  }
  .story__flag02 {
    left: 15px;
  }
  .story__flag02::before {
    top: -100px;
    left: -64px;
    rotate: -51deg;
  }
  .story__flag02::after {
    bottom: -33px;
    left: -81px;
    rotate: -52deg;
  }
  .story__text {
    bottom: 218px;
  }
}

/*engine
-----------------------------------------------*/
.engine__bg-line {
  background: linear-gradient(270deg, #3B3B3B 0%, #000000 100%);
  box-shadow: inset 8px 0px 6px 0px rgba(0, 0, 0, 0.8);
  z-index: 0;
  -webkit-clip-path: polygon(0 60%, 100% 0, 100% 40%, 0 100%);
          clip-path: polygon(0 60%, 100% 0, 100% 40%, 0 100%);
  rotate: -8deg;
  top: 436px;
  width: 120%;
}
.engine__bg-line--02 {
  width: 1840px;
  height: 967px;
  rotate: -165deg;
  top: 566px;
  right: -830px;
  left: inherit;
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 50%, 0 100%);
          clip-path: polygon(0 50%, 100% 0, 100% 50%, 0 100%);
}
.engine__bg-line--02::before {
  position: absolute;
  content: url(../img/light-01.webp);
  top: 100px;
  left: 1566px;
  rotate: -115deg;
  opacity: 0;
  transition: opacity 0.5s ease-in 1s;
}
.engine__bg-line--02.fadeLeft::before, .engine__bg-line--02.fadeLeft::after {
  opacity: 1;
}
.engine__title {
  width: min(626px, 100%);
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: 130px;
  margin-top: 190px;
}
.engine__box {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: min(722px, 100%);
  margin-right: 100px;
  margin-bottom: 500px;
}
.engine__img {
  position: relative;
  z-index: -1;
  width: min(1270px, 100%);
}
@media (max-width: 1279px) {
  .engine__bg-line--02 {
    right: -1070px;
  }
  .engine__box {
    max-width: 600px;
  }
  .engine__img--02 img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (max-width: 1024px) {
  .engine__title {
    margin-bottom: 200px;
  }
  .engine__bg-line--01 {
    top: 900px;
    rotate: 54deg;
    z-index: 1;
  }
  .engine__bg-line--02 {
    top: 690px;
    z-index: 1;
  }
  .engine__bg-line--03 {
    background: url(../img/texture.webp) no-repeat;
    -webkit-clip-path: polygon(0 55%, 100% 0, 100% 45%, 0 100%);
            clip-path: polygon(0 55%, 100% 0, 100% 45%, 0 100%);
    left: -42px;
    top: -686px;
    z-index: 1;
    width: 120%;
    height: 100%;
  }
  .engine__box {
    padding: 0 16px;
    margin-top: 40px;
    margin-right: 40px;
    margin-bottom: 350px;
  }
}
@media (max-width: 940px) {
  .engine__bg-line--02 {
    top: 600px;
  }
}
@media (max-width: 840px) {
  .engine__bg-line--02 {
    top: 520px;
  }
}
@media (max-width: 600px) {
  .engine__img img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .engine__img--01 {
    margin-top: 0px;
  }
  .engine__title {
    text-align: center;
    margin-top: -362px;
    margin-bottom: 0;
  }
  .engine__text {
    margin-top: -30px;
  }
  .engine__bg-line--01 {
    top: 400px;
  }
  .engine__bg-line--02 {
    top: 423px;
    width: 450px;
    height: 450px;
    rotate: -153deg;
    right: -168px;
  }
  .engine__bg-line--02::before {
    top: 100px;
    left: 178px;
    rotate: -115deg;
  }
  .engine__bg-line--03 {
    top: -329px;
    left: -120px;
    rotate: 5deg;
    width: 200%;
  }
  .engine__box {
    max-width: 283px;
    margin-top: -300px;
    margin-right: 0px;
    margin-bottom: 160px;
  }
}

/*products
-----------------------------------------------*/
.products {
  width: min(1080px, 100%);
  margin-inline: auto;
  margin-bottom: 364px;
}
@media (max-width: 1024px) {
  .products {
    margin-bottom: 60px;
  }
}
@media (max-width: 600px) {
  .products img {
    aspect-ratio: 375/209;
    height: 209px;
  }
}

/*meister
-----------------------------------------------*/
.meister__img01 {
  width: min(612px, 100%);
  margin-bottom: 140px;
}
.meister__img02 {
  width: min(819px, 100%);
  margin-inline: auto;
  margin-bottom: 281px;
}
.meister__bg-line {
  background: linear-gradient(270deg, #3B3B3B 0%, #000000 100%);
  box-shadow: inset 8px 0px 6px 0px rgba(0, 0, 0, 0.8);
  z-index: -1;
  -webkit-clip-path: polygon(0 55%, 100% 0, 100% 45%, 0 100%);
          clip-path: polygon(0 55%, 100% 0, 100% 45%, 0 100%);
  width: 120%;
}
.meister__bg-line--01 {
  rotate: -4deg;
  top: -116px;
  left: -188px;
}
.meister__bg-line--02 {
  rotate: -136deg;
  top: inherit;
  left: -210px;
  bottom: -433px;
}
.meister__flex {
  display: flex;
  align-items: center;
  margin-left: 100px;
}
.meister__textbox::after {
  display: block;
  content: url(../img/light-02.webp);
  margin-top: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease-in 1s;
}
.meister__textbox.fadeRight01::after {
  opacity: 1;
}
@media (max-width: 1279px) {
  .meister__img01 {
    max-width: 400px;
  }
  .meister__img01 img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (max-width: 1024px) {
  .meister__bg-line--01 {
    rotate: 0deg;
  }
  .meister__flex {
    flex-direction: column;
    margin-inline: auto;
  }
  .meister__img01 {
    margin-bottom: 0;
  }
  .meister__img02 {
    margin-bottom: 166px;
  }
}
@media (max-width: 600px) {
  .meister__bg-line {
    width: 100%;
  }
  .meister__bg-line--01 {
    rotate: 11deg;
    top: -124px;
    left: -5px;
  }
  .meister__bg-line--02 {
    rotate: -121deg;
    bottom: -316px;
  }
  .meister__img01 img {
    aspect-ratio: auto 203/192;
    height: 192px;
  }
  .meister__img02 img {
    -o-object-fit: contain;
       object-fit: contain;
    aspect-ratio: auto 375/299;
    height: 299px;
  }
  .meister__textbox {
    text-align: center;
  }
}

/*nsx
-----------------------------------------------*/
.nsx {
  margin-bottom: 136px;
}
.nsx__img {
  max-width: 1080px;
  margin-inline: auto;
}
@media (max-width: 600px) {
  .nsx {
    margin-bottom: 100px;
  }
  .nsx__img img {
    -o-object-fit: contain;
       object-fit: contain;
    aspect-ratio: auto 376/209;
    height: 209px;
  }
}

/*photo
-----------------------------------------------*/
.photo {
  margin-bottom: 287px;
}
.photo__textbox {
  margin-bottom: 200px;
}
.photo__bg-line {
  box-shadow: inset 8px 0px 6px 0px rgba(0, 0, 0, 0.8);
  z-index: -1;
  width: 100%;
}
.photo__bg-line--01 {
  -webkit-clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
          clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
  background: linear-gradient(-90deg, #3B3B3B 17.25%, #000 60%);
  rotate: -82deg;
  top: -200px;
  left: 0;
}
.photo__bg-line--02 {
  -webkit-clip-path: polygon(0 70%, 100% 0, 100% 30%, 0 100%);
          clip-path: polygon(0 70%, 100% 0, 100% 30%, 0 100%);
  rotate: 30deg;
  top: inherit;
  bottom: -160px;
}
.photo__imgbox {
  z-index: -99;
  position: relative;
  max-width: 1087px;
  margin-top: -145px;
  margin-bottom: 287px;
  margin-left: auto;
}
.photo__wrap {
  max-width: 840px;
  margin: 0 auto;
}
.photo__logo {
  max-width: 1086px;
  max-width: 491px;
}
.photo__title {
  text-align: center;
}
.photo__title::after {
  display: block;
  content: url(../img/light-02.webp);
  opacity: 0;
  transition: opacity 0.5s ease-in 1s;
}
.photo__title.blur::after {
  opacity: 1;
}
@media (max-width: 1024px) {
  .photo {
    margin-bottom: 100px;
  }
  .photo__text--02 {
    margin-left: 52px;
  }
  .photo__text--03 {
    margin-left: 104px;
  }
  .photo__bg-line {
    top: -300px;
  }
  .photo__bg-line--02 {
    top: inherit;
  }
  .photo__muffler img {
    aspect-ratio: 6/4;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .photo__logo {
    width: 300px;
    margin-inline: auto;
  }
  .photo__logo img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .photo__imgbox {
    margin-top: 0;
    margin-bottom: 43px;
  }
}
@media (max-width: 600px) {
  .photo__textbox {
    margin-bottom: 70px;
  }
  .photo__bg-line--01 {
    top: -110px;
    rotate: -69deg;
  }
  .photo__bg-line--02 {
    rotate: 44deg;
    bottom: -95px;
  }
  .photo__logo {
    top: -20px;
  }
  .photo__muffler img {
    aspect-ratio: auto 375/213;
    height: 213px;
  }
}

.slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto 240px;
}
@media (max-width: 1024px) {
  .slider {
    margin-bottom: 112px;
  }
}

.slider img {
  width: min(690px, 60vw);
  /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
}

.slider .slick-slide {
  transform: scale(0.8);
  /*左右の画像のサイズを80%に*/
  transition: all 0.5s;
  /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;
  /*透過50%*/
}

.slider .slick-slide.slick-center {
  transform: scale(1);
  /*中央の画像のサイズだけ等倍に*/
  opacity: 1;
  /*透過なし*/
}
.slider .slick-slide.slick-center img {
  max-width: 864px;
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: inherit;
  bottom: -70px;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  /*クリックをしたら出てくる枠線を消す*/
  /*矢印の色*/
  height: 52px;
  width: 35px;
}
@media (max-width: 600px) {
  .slick-prev,
.slick-next {
    height: 22px;
    width: 34px;
  }
}

.slick-prev {
  content: url(../img/arrow-prev.webp);
  /*戻る矢印の位置と形状*/
  left: -1.5%;
}
@media (max-width: 600px) {
  .slick-prev {
    left: 4%;
  }
}

.slick-next {
  content: url(../img/arrow-next.webp);
  /*次へ矢印の位置と形状*/
  right: -1.5%;
}
@media (max-width: 600px) {
  .slick-next {
    right: 4%;
  }
}

.zoom {
  margin-bottom: 200px;
  width: min(1075px, 100%);
  margin-inline: auto;
}
@media (max-width: 1279px) {
  .zoom {
    max-width: 900px;
  }
  .zoom img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (max-width: 1024px) {
  .zoom {
    margin-bottom: 100px;
  }
}
@media (max-width: 600px) {
  .zoom img {
    aspect-ratio: auto 385/257;
    height: 257px;
  }
}
/*# sourceMappingURL=style.css.map */