@charset "UTF-8";
/* ************************************** _
タイトル：style.css
概要：project-v レイアウト用css
更新：2024.03.13
_ ************************************** */
/* Imported Styles
---------------------------------------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ====================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  /*line-height: 1.15;*/ /* 1 */
  /*-webkit-text-size-adjust: 100%;*/ /* 2 */
}

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

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

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 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 */
}

/**
 * 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: 1em; /* 2 */
}

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

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -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: 1em; /* 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;
}

/* Embedded content
   ====================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ====================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 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;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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 odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * 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. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* 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;
}

/* Misc
   ====================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* =========================================================================
   _setting
============================================================================ */
/* kill 'Browser standard style'
---------------------------------------------------------------------------- */
body, h1, h2, h3, h4, h5, h6, div, p, span, ul, ol, li, dl, dt, dd, table, tr, th, td, form, select, option, address, pre, strong, em, figure {
  box-sizing: border-box;
  /*font-size: 100%;*/
  font-style: normal;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

/* Re style
---------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  /*font-size: 62.5%;*/
  
}

a {
  transition: 0.3s;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  cursor: pointer;
  opacity: 0.7;
}

button {
  transition: 0.3s;
}
button:hover, button:active, button:focus {
  cursor: pointer;
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  a [href^="tel:"] {
    pointer-events: none;
  }
}
em {
  font-style: normal;
}

picture {
  display: inline-block;
}

img,
picture {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
  width: auto;
}

li {
  list-style: none;
}

strong {
  font-weight: bold;
}

table {
  border-collapse: collapse;
}

/* html5
---------------------------------------------------------------------------- */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* body
---------------------------------------------------------------------------- */
body {
  background-color: #111;
  background-size: auto;
  color: #fff;
  /*font-size: 1rem;*/
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif, Arial, Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.75;
  overflow-x: hidden;
  padding: 0;
}

/* ケータハムJAPAN　base.css より抜粋
---------------------------------------------------------------------------- */
@font-face {
  font-family: "SourceSansPro";
  src: url(../../../fonts/SourceSansPro-Light.eot);
  src: url(http://www.caterham-cars.jp/fonts/SourceSansPro-Light.eot?#iefix) format("embedded-opentype"), url(../../../fonts/SourceSansPro-Light.woff) format("woff"), url(../../../fonts/SourceSansPro-Light.ttf) format("truetype"), url(../../../fonts/SourceSansPro-Light.svg) format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceSansPro";
  src: url(../../../fonts/SourceSansPro-Bold.eot);
  src: url(http://www.caterham-cars.jp/fonts/SourceSansPro-Bold.eot?#iefix) format("embedded-opentype"), url(../../../fonts/SourceSansPro-Bold.woff) format("woff"), url(../../../fonts/SourceSansPro-Bold.ttf) format("truetype"), url(../../../fonts/SourceSansPro-Bold.svg) format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "SourceSansPro";
  src: url(../../../fonts/SourceSansPro-Italic.eot);
  src: url(http://www.caterham-cars.jp/fonts/SourceSansPro-Italic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/SourceSansPro-Italic.woff) format("woff"), url(../../../fonts/SourceSansPro-Italic.ttf) format("truetype"), url(../../../fonts/SourceSansPro-Italic.svg) format("svg");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "SourceSansPro";
  src: url(../../../fonts/SourceSansPro-BoldItalic.eot);
  src: url(http://www.caterham-cars.jp/fonts/SourceSansPro-BoldItalic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/SourceSansPro-BoldItalic.woff) format("woff"), url(../../../fonts/SourceSansPro-BoldItalic.ttf) format("truetype"), url(../../../fonts/SourceSansPro-BoldItalic.svg) format("svg");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Novecentowide";
  src: url(../../../fonts/Novecentowide-Book.eot);
  src: url(http://www.caterham-cars.jp/fonts/Novecentowide-Book.eot?#iefix) format("embedded-opentype"), url(../../../fonts/Novecentowide-Book.woff) format("woff"), url(../../../fonts/Novecentowide-Book.ttf) format("truetype"), url(../../../fonts/Novecentowide-Book.svg) format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Novecentowide-Medium";
  src: url(../../../fonts/Novecentowide-Medium.eot);
  src: url(http://www.caterham-cars.jp/fonts/Novecentowide-Medium.eot?#iefix) format("embedded-opentype"), url(../../../fonts/Novecentowide-Medium.woff) format("woff"), url(../../../fonts/Novecentowide-Medium.ttf) format("truetype"), url(../../../fonts/Novecentowide-Medium.svg) format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Novecentowide";
  src: url(../../../fonts/Novecentowide-Bold.eot);
  src: url(http://www.caterham-cars.jp/fonts/Novecentowide-Bold.eot?#iefix) format("embedded-opentype"), url(../../../fonts/Novecentowide-Bold.woff) format("woff"), url(../../../fonts/Novecentowide-Bold.ttf) format("truetype"), url(../../../fonts/Novecentowide-Bold.svg) format("svg");
  font-weight: bold;
  font-style: normal;
}
#footer {
  background: #002c0c url(../../../images/base/artwork.png) repeat-x 0 -1000px;
  color: #fff;
  font-family: SourceSansPro, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
#footer a {
  color: #fff;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}

#footerPromos {
  padding: 10px 0;
}
#footerPromos .info-box {
  position: relative;
  padding-bottom: 10px;
}

#footerSub p#siteby {
  float: right;
  font-size: 11px;
}

#footer-menu {
  padding-top: 19px;
}
#footer-menu ul,
#footer-menu ul.menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer-menu ul.menu li {
  float: left;
  width: 14%;
  margin-bottom: 20px;
}
#footer-menu ul.menu li a.level_1 {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  font-family: Novecentowide-Medium, Novecentowide, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#footer-menu ul.menu li li {
  float: none;
  width: auto;
  margin-bottom: 0;
}
#footer-menu div.level_2 {
  margin-top: 6px;
}
#footer-menu .level_3,
#footer-menu .defaultScreen {
  display: none;
}

#footer #footer-menu ul.menu li a.level_1:hover {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  #footer {
    background: #002C0C;
  }
  #footerSub {
    background: #003a14;
  }
  #footerInner {
    background: none;
  }
  #footer-menu div.level_2 {
    display: none;
  }
  #footer-menu ul.menu li {
    width: 50%;
  }
  #footer-menu ul ul,
  #footer-menu .level_2 {
    display: none;
  }
  #footer-menu li {
    width: 50%;
    margin-bottom: 10px;
  }
}
@media screen {
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  .grid-container:before, .clearfix:before, .grid-container:after, .clearfix:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }
  .grid-container:after, .clearfix:after {
    clear: both;
  }
  .grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }
  .grid-parent {
    padding-left: 0;
    padding-right: 0;
  }
  body {
    min-width: 320px;
  }
  .grid-container:before,
  .clearfix:before,
  .grid-container:after,
  .clearfix:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }
  .grid-container:after,
  .clearfix:after {
    clear: both;
  }
  .grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.grid-container {
  max-width: 1060px;
}

.subFooterBar {
  background: #003f1c url(../../../images/base/artwork.png) repeat-x 0 -1445px;
}
.subFooterBar p {
  margin: 17px 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

/* レイアウト
---------------------------------------------------------------------------- */
.innerContainer {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 640px) {
  .innerContainer {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.header {
  background: #000;
  display: block;
  margin: 0;
  padding-bottom: 10px;
  padding-top: 10px;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
}
.headerInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 0 20px;
  width: 100%;
}
.header .logo--caterham {
  min-height: 34px;
}
.header .logo--caterham img {
  aspect-ratio: auto 180/18;
  vertical-align: middle;
  width: 180px;
}
.header .logo--projectV img {
  aspect-ratio: auto 260/56;
  width: 260px;
}
.header .logo--space {
  width: 180px;
}

@media (max-width: 960px) {
  .headerInner {
    flex-wrap: wrap;
  }
  .header .logo--caterham {
    order: 1;
  }
  .header .logo--projectV {
    order: 3;
    text-align: center;
    width: 100%;
  }
  .header .logo--projectV img {
    aspect-ratio: auto 160/35;
    width: 160px;
  }
  .header .logo--space {
    order: 2;
  }
}
.page {
  margin: 0;
  padding: 0;
}

/* タイトル
---------------------------------------------------------------------------- */
.heading--hidden {
  font-size: 0;
  height: 0;
  margin: 0;
  position: absolute;
  opacity: 0;
  width: 0;
}

.heading--en {
  color: #fff;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 2rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.025em;
  line-height: 1;
  margin: 0 auto 40px 0;
  position: relative;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}
.heading--en.txt-c {
  margin: 0 auto 40px auto;
  text-align: center;
}
.heading--en.txt-r {
  margin: 0 0 40px auto;
  text-align: right;
}

/* ボタン
---------------------------------------------------------------------------- */
.btn {
  margin: 2em auto 0;
  width: 100%;
}
.btn a {
  border: 2px solid #c5d800;
  background-color: #c5d800;
  color: #000;
  border-radius: 3em;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.8rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  margin: 0 auto;
  max-width: 600px;
  padding: 0.5em 1em;
  position: relative;
  text-align: center;
  width: auto;
}
.btn a:hover, .btn a:active, .btn a:focus {
  background-color: transparent;
  color: #c5d800;
  opacity: 1;
}
.btn.type--whiteout a {
  border: 2px solid #c5d800;
  background-color: transparent;
  border-radius: 3em;
  color: #c5d800;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.8rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  margin: 0 auto;
  max-width: 600px;
  padding: 0.5em 1em;
  position: relative;
  text-align: center;
  width: auto;
}
.btn.type--whiteout a:hover, .btn.type--whiteout a:active, .btn.type--whiteout a:focus {
  background-color: #c5d800;
  color: #000;
  opacity: 1;
}
.btn.type--fixation a {
  max-width: 600px;
  width: 90%;
}
.btn.type--jp a {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.2rem;
  font-weight: 700;
  font-style: normal;
  max-width: 600px;
  width: 90%;
}

@media screen and (min-width: 768px) {
  .btn {
    margin: 2.78em auto 0;
    width: 100%;
  }
  .btn a {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 640px) {
  .btn.type--fixation a {
    font-size: 0.8rem;
  }
}
/* パーツ
---------------------------------------------------------------------------- */
::-moz-selection {
  background: #000;
  color: #c5d800;
  text-shadow: none;
}
::selection {
  background: #000;
  color: #c5d800;
  text-shadow: none;
}

.lang--en {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.deco--sideLine {
  position: relative;
}
.deco--sideLine:after {
  background-size: 30% 2px, 30% 2px;
  background-image: linear-gradient(270deg, #c5d800 0, rgba(140, 214, 0, 0) 100%), linear-gradient(90deg, #c5d800 0, rgba(140, 214, 0, 0) 100%);
  background-position: bottom right, bottom left;
  background-repeat: no-repeat;
  content: "";
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}

.playBtnWrapper {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 200px;
}
.playBtnWrapper .playBtn--off {
  display: inline-block;
}
.playBtnWrapper .playBtn--on {
  display: none;
}
.playBtnWrapper .playBtn--text {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  padding-left: 0.9em;
  text-transform: uppercase;
}
.playBtnWrapper:hover .playBtn--off, .playBtnWrapper:active .playBtn--off, .playBtnWrapper:focus .playBtn--off {
  display: none;
}
.playBtnWrapper:hover .playBtn--on, .playBtnWrapper:active .playBtn--on, .playBtnWrapper:focus .playBtn--on {
  display: inline-block;
}
.playBtnWrapper:hover .playBtn--text, .playBtnWrapper:active .playBtn--text, .playBtnWrapper:focus .playBtn--text {
  color: #c5d800;
}

/* アニメーション
---------------------------------------------------------------------------- */
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
.blur {
  animation-name: blurAnime;
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
}

.js-trigger--blur {
  opacity: 0;
}

/* ナビゲーション
---------------------------------------------------------------------------- */
.controlBtn {
  display: flex;
  align-items: center;
}

.sliderBtn {
  display: flex;
  margin-left: -10px;
  margin-right: 40px;
}
.sliderBtn .swiper-button-next,
.sliderBtn .swiper-button-prev {
  background-color: #c5d800;
  color: #000;
  height: 52px;
  padding: 14px 17px;
  position: relative;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color, border-color, box-shadow;
  width: 48px;
}
.sliderBtn .swiper-button-next:after,
.sliderBtn .swiper-button-prev:after {
  font-size: 27px;
}
.sliderBtn .swiper-button-next:hover,
.sliderBtn .swiper-button-prev:hover {
  background-color: #000;
  color: #fff;
}
.sliderBtn .swiper-button-next {
  border-radius: 0 50px 50px 0;
  margin: 20px 0 20px 10px;
}
.sliderBtn .swiper-button-prev {
  border-radius: 50px 0 0 50px;
  margin: 20px 10px 20px 0;
}

@media screen and (max-width: 414px) {
  .sliderBtn {
    margin-right: 15px;
  }
}
/* 各パート
---------------------------------------------------------------------------- */
/* hero
-------------------- */
.heroWrapper {
  position: relative;
  margin-top: 70px;
}
.heroWrapper::before, .heroWrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
.heroWrapper::after {
  background-size: 50% 10px, 50% 10px;
  background-position: top right, bottom left;
  background-image: linear-gradient(270deg, #c5d800 0, rgba(140, 214, 0, 0) 100%), linear-gradient(90deg, #c5d800 0, rgba(140, 214, 0, 0) 100%);
}

.hero {
  position: relative;
}
.hero:before, .hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
.hero::before {
  background-size: 100% 25%;
  background-position: top center;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4588235294) 0, rgba(0, 0, 0, 0) 100%);
}
.hero::after {
  background-size: 100% 25%;
  background-position: bottom center;
  background-image: linear-gradient(360deg, rgba(0, 0, 0, 0.4588235294) 0, rgba(0, 0, 0, 0) 100%);
}
.hero .heroImage {
  background: url("../images/photo_main.jpg") no-repeat center center;
  background-size: contain;
  min-height: 500px;
  max-height: 740px;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.hero .heroImage img {
  opacity: 0;
}
.hero .heroPhrases {
  display: inline-block;
  left: 0;
  margin: auto;
  max-width: 1200px;
  position: absolute;
  right: 0;
  top: 10%;
  text-align: center;
  width: calc((100% - 60px) * 0.75);
  z-index: 2;
}
.hero .heroPhrases img {
  aspect-ratio: auto 1065/25;
  vertical-align: middle;
}
.hero .heroYoutube {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  width: 150px;
  z-index: 2;
}
.hero .heroYoutubeWrapper {
  bottom: 0;
  display: flex;
  align-items: flex-end;
  left: 0;
  margin: auto;
  max-width: 1200px;
  padding: 40px 30px 40px 30px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

@media (min-width: 1333px) {
  .hero .heroImage {
    background-size: cover;
  }
}
@media (max-width: 960px) {
  .hero .heroPhrases {
    top: 12%;
  }
}
@media (max-width: 905px) {
  .hero .heroImage {
    background-size: cover;
  }
}
@media (max-width: 640px) {
  .hero .heroPhrases {
    top: 12%;
    width: calc(100% - 60px);
  }
}
body .modal-video-body {
  max-width: 1740px;
}

/* intro
-------------------- */
.introWRapper {
  background-color: #000;
  padding-top: 70px;
  padding-bottom: 70px;
}

.intro {
  font-size: 1.2rem;
  text-align: center;
}
.intro .heading--en {
  color: #c5d800;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
.intro .text {
  line-height: 1.5;
}

@media (max-width: 960px) {
  .introWRapper {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
/* photo cars & photo jp cars
-------------------- */
.carsGrid,
.jpCarsGrid {
  display: grid;
  gap: 0;
  grid-auto-columns: 1fr;
}
.carsGrid a:hover, .carsGrid a:active, .carsGrid a:focus,
.jpCarsGrid a:hover,
.jpCarsGrid a:active,
.jpCarsGrid a:focus {
  opacity: 1;
}
.carsGrid a:hover .image .icon--photoPlus, .carsGrid a:active .image .icon--photoPlus, .carsGrid a:focus .image .icon--photoPlus,
.jpCarsGrid a:hover .image .icon--photoPlus,
.jpCarsGrid a:active .image .icon--photoPlus,
.jpCarsGrid a:focus .image .icon--photoPlus {
  opacity: 1;
}
.carsGrid a:hover img,
.carsGrid a:hover picture, .carsGrid a:active img,
.carsGrid a:active picture, .carsGrid a:focus img,
.carsGrid a:focus picture,
.jpCarsGrid a:hover img,
.jpCarsGrid a:hover picture,
.jpCarsGrid a:active img,
.jpCarsGrid a:active picture,
.jpCarsGrid a:focus img,
.jpCarsGrid a:focus picture {
  transform: scale(1.05);
}
.carsGrid .image,
.jpCarsGrid .image {
  display: block;
  position: relative;
  overflow: hidden;
}
.carsGrid .image .icon--photoPlus,
.jpCarsGrid .image .icon--photoPlus {
  bottom: 0;
  fill: #c5d800;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.4s;
}
.carsGrid img,
.carsGrid picture,
.jpCarsGrid img,
.jpCarsGrid picture {
  transition: transform 0.4s;
  transform: scale(1);
  width: 100%;
}

.carsGrid {
  grid-template-areas: "one two three three" "four four three three" "four four five six";
}
.carsGrid #item-car01 {
  grid-area: one;
}
.carsGrid #item-car02 {
  grid-area: two;
}
.carsGrid #item-car03 {
  grid-area: three;
}
.carsGrid #item-car04 {
  grid-area: four;
}
.carsGrid #item-car05 {
  grid-area: five;
}
.carsGrid #item-car06 {
  grid-area: six;
}

@media (max-width: 960px) {
  .carsGrid {
    grid-template-areas: "one two" "three four" "five six";
  }
}
.jpCarsGrid {
  grid-template-areas: "pos--1 pos--2 pos--3 pos--4" "pos--5 pos--6 pos--7 pos--8" "pos--9 pos--10 pos--11 pos--12" "pos--13 pos--14 pos--15 pos--16" "pos--17 pos--18 pos--19 pos--20" "pos--21 pos--22 pos--23 pos--24" "pos--25 pos--26 pos--27 pos--28";
}
.jpCarsGrid #item-jpCar1 {
  grid-area: pos--1;
}
.jpCarsGrid #item-jpCar2 {
  grid-area: pos--2;
}
.jpCarsGrid #item-jpCar3 {
  grid-area: pos--3;
}
.jpCarsGrid #item-jpCar4 {
  grid-area: pos--4;
}
.jpCarsGrid #item-jpCar5 {
  grid-area: pos--5;
}
.jpCarsGrid #item-jpCar6 {
  grid-area: pos--6;
}
.jpCarsGrid #item-jpCar7 {
  grid-area: pos--7;
}
.jpCarsGrid #item-jpCar8 {
  grid-area: pos--8;
}
.jpCarsGrid #item-jpCar9 {
  grid-area: pos--9;
}
.jpCarsGrid #item-jpCar10 {
  grid-area: pos--10;
}
.jpCarsGrid #item-jpCar11 {
  grid-area: pos--11;
}
.jpCarsGrid #item-jpCar12 {
  grid-area: pos--12;
}
.jpCarsGrid #item-jpCar13 {
  grid-area: pos--13;
}
.jpCarsGrid #item-jpCar14 {
  grid-area: pos--14;
}
.jpCarsGrid #item-jpCar15 {
  grid-area: pos--15;
}
.jpCarsGrid #item-jpCar16 {
  grid-area: pos--16;
}
.jpCarsGrid #item-jpCar17 {
  grid-area: pos--17;
}
.jpCarsGrid #item-jpCar18 {
  grid-area: pos--18;
}
.jpCarsGrid #item-jpCar19 {
  grid-area: pos--19;
}
.jpCarsGrid #item-jpCar20 {
  grid-area: pos--20;
}
.jpCarsGrid #item-jpCar21 {
  grid-area: pos--21;
}
.jpCarsGrid #item-jpCar22 {
  grid-area: pos--22;
}
.jpCarsGrid #item-jpCar23 {
  grid-area: pos--23;
}
.jpCarsGrid #item-jpCar24 {
  grid-area: pos--24;
}
.jpCarsGrid #item-jpCar25 {
  grid-area: pos--25;
}
.jpCarsGrid #item-jpCar26 {
  grid-area: pos--26;
}
.jpCarsGrid #item-jpCar27 {
  grid-area: pos--27;
}
.jpCarsGrid #item-jpCar28 {
  grid-area: pos--28;
}

@media (max-width: 960px) {
  .jpCarsGrid {
    grid-template-areas: "pos--1 pos--2" "pos--3 pos--4" "pos--5 pos--6" "pos--7 pos--8" "pos--9 pos--10" "pos--11 pos--12" "pos--13 pos--14" "pos--15 pos--16" "pos--17 pos--18" "pos--19 pos--20" "pos--21 pos--22" "pos--23 pos--24" "pos--25 pos--26" "pos--27 pos--28";
  }
}
.pswp__top-bar .pswp__counter {
  color: rgba(197, 216, 0, 0.75);
}

.pswp__button--close .pswp__icn,
.pswp__button--zoom .pswp__icn {
  fill: #c5d800;
}

.pswp__button.pswp__button--arrow {
  background-color: rgba(197, 216, 0, 0.25);
  border-radius: 100%;
  width: 60px;
  height: 60px;
}
.pswp__button.pswp__button--arrow--prev .pswp__icn {
  left: 13px;
  width: 75%;
}
.pswp__button.pswp__button--arrow--next .pswp__icn {
  right: 15px;
  width: 75%;
}

.pswp__button:hover.pswp__button--arrow,
.pswp__button:active.pswp__button--arrow,
.pswp__button:focus.pswp__button--arrow {
  background-color: #000;
}
.pswp__button:hover.pswp__button--close .pswp__icn, .pswp__button:hover.pswp__button--zoom .pswp__icn,
.pswp__button:active.pswp__button--close .pswp__icn,
.pswp__button:active.pswp__button--zoom .pswp__icn,
.pswp__button:focus.pswp__button--close .pswp__icn,
.pswp__button:focus.pswp__button--zoom .pswp__icn {
  fill: #fff;
}

/* specData
-------------------- */
.specDataWRapper {
  background-color: #000;
  padding-bottom: 140px;
  padding-top: 70px;
  position: relative;
}
.specDataWRapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 100%, 100% 65%, 100% 100%, 0 100%);
  background-color: #111111;
}
.specDataWRapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 65%, 100% 100%, 100% 100%, 0 100%);
  background-color: #111111;
}

.specData {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
}
.specData__item {
  margin: 0 1em;
  text-align: center;
}
.specData__item .spec--data {
  font-size: 3rem;
  font-weight: 700;
}

@media (max-width: 960px) {
  .specDataWRapper {
    padding-bottom: 210px;
    padding-top: 70px;
  }
  .specData {
    flex-wrap: wrap;
    justify-content: center;
  }
  .specData__item {
    margin: 0.5em 0;
    padding: 0 1em;
    text-align: center;
    width: 48%;
  }
}
@media (max-width: 600px) {
  .specData__item {
    width: 50%;
  }
  .specData__item .spec--data {
    font-size: 2.2rem;
  }
}
/* message
-------------------- */
.messageWrapper {
  padding-top: 50px;
  padding-bottom: 120px;
}

.message {
  font-weight: 700;
  margin: 0 auto;
  max-width: 750px;
  text-align: center;
}
.message .heading--en {
  margin: 50px auto 20px;
}
.message .deco--line {
  margin: 20px auto;
}
.message .deco--line img {
  vertical-align: middle;
}
.message .speaker {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.2rem;
  font-weight: 700;
  font-style: normal;
  margin-top: 40px;
}

/* unveiling
-------------------- */
.unveilingWrapper {
  padding-top: 70px;
  padding-bottom: 70px;
}

.unveiling .swiper {
  width: 100%;
  height: 100%;
}
.unveiling .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.unveiling .swiper-slide picture,
.unveiling .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* specification
-------------------- */
.specificationWrapper {
  background-color: #000;
  padding-top: 210px;
  padding-bottom: 250px;
  position: relative;
}
.specificationWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 100%, 100% 90%, 100% 100%, 0 100%);
  background-color: #111111;
}
.specificationWrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 90%, 100% 100%, 100% 100%, 0 100%);
  background-color: #111111;
}

.specification {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.specification .heading--en {
  width: 100%;
}
.specification .heading--en span {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.2rem;
  font-weight: 700;
  font-style: normal;
}
.specification .specificationList {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 0.9rem;
  font-weight: 700;
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  width: 52%;
}
.specification .specificationList dt,
.specification .specificationList dd {
  border-top: 1px solid #fff;
  line-height: 1.425;
  margin-top: 20px;
  padding-top: 20px;
}
.specification .specificationList dt:first-of-type,
.specification .specificationList dd:first-of-type {
  border-top-width: 0;
  margin-top: 0;
  padding-top: 0;
}
.specification .specificationList dt:last-of-type,
.specification .specificationList dd:last-of-type {
  border-bottom: 1px solid #fff;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.specification .specificationList dt {
  border-top: 1px solid #fff;
  font-weight: 400;
  margin-top: 20px;
  padding-top: 20px;
  width: 200px;
}
.specification .specificationList dd {
  border-top: 1px solid #fff;
  font-weight: 600;
  margin-top: 20px;
  padding-left: 15px;
  padding-top: 20px;
  width: calc(100% - 200px);
}
.specification .specificationPhoto {
  opacity: 0.75;
  padding-left: 15px;
  text-align: center;
  width: 48%;
}

@media (max-width: 960px) {
  .specification {
    justify-content: flex-start;
  }
  .specification .specificationList {
    width: 100%;
  }
  .specification .specificationList dt {
    width: 22%;
  }
  .specification .specificationList dd {
    width: 78%;
  }
  .specification .specificationPhoto {
    margin-top: 20px;
    padding: 0;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .specification .specificationList dt {
    margin-bottom: 1em;
    width: 100%;
  }
  .specification .specificationList dd {
    border-top-width: 0;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;
    width: 100%;
  }
}
/* silhouette
-------------------- */
.silhouetteWrapper {
  padding-top: 140px;
  padding-bottom: 140px;
}

.silhouette {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
}
.silhouette .silhouettePhotos {
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.silhouette .silhouettePhotos--item:first-child {
  margin: 5vw -100px 12vw 0;
  position: relative;
  width: 80%;
  z-index: 10;
}
.silhouette .silhouettePhotos--item:first-child::before, .silhouette .silhouettePhotos--item:first-child::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.silhouette .silhouettePhotos--item:first-child::before {
  background: linear-gradient(135deg, #c5d800 0%, rgba(0, 0, 0, 0) 30%);
  top: -2px;
  left: -2px;
}
.silhouette .silhouettePhotos--item:first-child::after {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 80%, #c5d800 100%);
  bottom: -2px;
  right: -2px;
}
.silhouette .silhouettePhotos--item:first-child picture,
.silhouette .silhouettePhotos--item:first-child img {
  display: block;
  position: relative;
  z-index: 1;
}
.silhouette .silhouettePhotos--item:last-child {
  margin: 17vw 0 0 -20%;
  width: 80%;
  z-index: 0;
}
.silhouette .silhouetteContents {
  font-size: 1rem;
  max-width: 480px;
  margin-top: 100px;
  padding-left: 30px;
  width: 52%;
}
.silhouette .silhouetteContents .heading--en {
  margin-bottom: 20px;
}
.silhouette .silhouetteContents .text {
  line-height: 1.5;
}
.silhouette .silhouetteContents .speaker {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  margin-top: 20px;
}

@media (max-width: 960px) {
  .silhouette {
    flex-wrap: wrap;
    justify-content: center;
  }
  .silhouette .silhouettePhotos {
    width: 85%;
  }
  .silhouette .silhouettePhotos--item:first-child {
    margin: 0 -100px 17vw 0;
    width: 90%;
  }
  .silhouette .silhouettePhotos--item:last-child {
    margin: 20vw 0 0 -10%;
    width: 90%;
  }
  .silhouette .silhouetteContents {
    margin: 40px auto 0;
    max-width: 480px;
    padding-left: 0;
    width: 100%;
  }
}
/* concept
-------------------- */
.conceptWrapper {
  padding-top: 70px;
  padding-bottom: 70px;
}

.concept .swiper {
  width: 100%;
  height: 100%;
}
.concept .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.concept .swiper-slide picture,
.concept .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* praise
-------------------- */
.praiseWrapper {
  padding-top: 140px;
  padding-bottom: 140px;
}

.praise {
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  width: 100%;
}
.praise--icon{
  display: flex;
  justify-content: center;
  align-items: center;
}
.praise .swiper {
  width: 100%;
  height: 100%;
}
.praise .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px 30px 20px;
}
.praise .swiper-slide picture,
.praise .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.praise .praise--heading {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 30px;
}
.praise .praise--comment {
  font-size: 1.0rem;
  margin-top: 20px;
}
.praise .praise--speaker {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 40px;
}
.praise .sliderBtn {
  justify-content: flex-end;
  margin: 20px 0 0 0;
}

/* others
-------------------- */
.othersWrapper {
  padding: 140px 20px 140px 20px;
  position: relative;
}
.othersWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 60%, 50% 55%, 100% 100%, 0 100%);
  background-color: #000;
}
.othersWrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 55%, 100% 60%, 100% 100%, 0 100%);
  background-color: #000;
}

.others {
  background-color: #000;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  padding: 1px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1;
}
.others:before, .others:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.others:before {
  background: linear-gradient(135deg, #c5d800 0%, rgba(0, 0, 0, 0) 20%);
}
.others:after {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 80%, #c5d800 100%);
}
.others .othersInner {
  background-color: #000;
  display: block;
  padding-top: 70px;
  padding-bottom: 70px;
  position: relative;
  z-index: 2;
}