* {
  box-sizing: inherit;
}

/* Base */
body {
  /*font-size: 9rem!important;*/
  /*font: inherit!important;*/
  font-family: 'Zen Kaku Gothic New', 'Helvetica', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Lucida Grande', 'Verdana', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', sans-serif;
}

#container {
  background-color: #FFFFFF;
  font-family: 'Zen Kaku Gothic New', 'Helvetica', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Lucida Grande', 'Verdana', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', sans-serif;
}

.header, .page-btm-row {
  box-sizing: border-box;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}

picture {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

#contents {
  background-color: #FFFFFF;
  max-width: 100vw;
}

.trac_menu {
  display: none !important;
}

.top_main_container {
  width: 100%;
  overflow: hidden;
}

/* Components */
.c_button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  width: 296px;
  height: 100px;
  font-size: calc(28 / 1366 * 100vw);
  text-align: center;
  cursor: pointer;
}

.c_button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all 0.3s ease 0s;
  background-color: #00A0DC;
}

.c_button img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.c_button__arrow {
  width: calc(12 / 1366 * 100vw);
}

.c_button span {
  position: relative;
  display: block;
}

.c_button--white {
  background-color: #fff;
  color: #000;
}

.c_button--white img {
  -webkit-filter: brightness(0) invert(0);
  filter: brightness(0) invert(0);
}

@media (hover:hover) {
  .c_button:hover::before {
    width: 100%;
  }

  .c_button:not(.c_button--white):hover img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
  }
}

@media screen and (min-width: 1366px) {
  .c_button {
    font-size: 28px;
  }

  .c_button__arrow {
    width: 12px;
  }

}

@media screen and (max-width: 768px) {
  .c_button {
    width: 187px;
    height: 56px;
    font-size: calc(18 / 375 * 100vw);
  }

  .c_button__arrow {
    width: calc(8 / 375 * 100vw);
  }
}

/* Titles */
.c_sect_ttl {
  font-size: calc(160 / 1366 * 100vw);
}

.c_sect_ttl small {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: calc(43 / 1366 * 100vw);
}

.c_content_ttl {
  font-size: calc(80 / 1366 * 100vw);
  line-height: 1;
}

@media screen and (min-width: 1366px) {
  .c_sect_ttl {
    font-size: 160px;
  }

  .c_sect_ttl small {
    font-size: 43px;
  }

  .c_content_ttl {
    font-size: 80px;
  }
}

@media screen and (max-width: 768px) {
  .c_sect_ttl {
    font-size: calc(88 / 375 * 100vw);
  }

  .c_sect_ttl small {
    font-size: calc(24 / 375 * 100vw);
  }

  .c_sect_ttl--sm,
  .c_content_ttl {
    font-size: calc(56 / 375 * 100vw);
  }
}

/* Header */
.c_header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 81px;
  display: flex;
  justify-content: center;
  mix-blend-mode: difference;
  border-bottom: #707070 1px solid;
  z-index: 4;
}

.c_header.overlay {
  margin-top: -82px;
  mix-blend-mode: inherit;
  border-bottom: transparent 1px solid;
  z-index: 5;
}

.c_header>div {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  transition-duration: 100ms;
}

.c_header>div {
  opacity: 0.3;
  border-bottom: transparent 4px solid;
  color: #FFF;
  max-width: calc(1366px / 4);
}

.c_header div span {
  font-size: 24px;
}

.c_header>div.active {
  /*filter: invert(49%) sepia(98%) saturate(2954%) hue-rotate(166deg) brightness(96%) contrast(102%);*/
  /*border-bottom: #00A0DC 4px solid;*/
  border-bottom: #FFFFFF 4px solid;
  opacity: 1;
}

@media (hover:hover) {
  .c_header>div:hover {
    /* 色変換のツールは以下サイトを参考 */
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    /* 黒を#00A0DCに変換 */
    /*filter: invert(49%) sepia(98%) saturate(2954%) hue-rotate(166deg) brightness(96%) contrast(102%);*/
    /* #00A0DCの補色 - >  #ff5f23 */
    /*filter: invert(40%) sepia(97%) saturate(1423%) hue-rotate(345deg) brightness(102%) contrast(103%);*/
    /*filter: invert(28%) sepia(93%) saturate(594%) hue-rotate(173deg) brightness(98%) contrast(90%);*/
    opacity: 1;
  }

  .c_header>div:hover>span {
    opacity: 0;
  }

  .c_header.overlay>div:hover {
    opacity: 1;
  }

  .c_header.overlay>div:hover>span {
    opacity: 1;
    /*00A0DCに変換*/
    filter: invert(49%) sepia(98%) saturate(2954%) hue-rotate(166deg) brightness(96%) contrast(102%);
  }
}

@media screen and (max-width: 768px) {
  .c_header div {
    display: flex;
    flex-direction: column;
    line-height: 12px;
  }

  .c_header div span {
    font-size: 12px;
  }
}

/* TOP - >  FirstView */
.c_top_fv {
  position: relative;
  width: 100%;
  height: calc(768px - 81px);
  background-color: #FFFFFF;
  max-width: calc(1200px + 24px * 2);
  padding: 90px 24px;
  margin: 0 auto;
  display: flex;
  justify-content: left;
  align-items: baseline;
  box-sizing: border-box;
  overflow: hidden;
}

.c_top_fv_glyph01 {
  display: block;
  width: calc(min(341px, (341 / 1344)* 100vw));
  position: absolute;
  left: calc(50% - min(1200px, 88vw) / 2);
  top: 90px;
}

.c_top_fv_glyph02 {
  display: block;
  width: calc(min(342px, (342 / 1344)* 100vw));
  position: absolute;
  left: calc(50% - min(1200px, 88vw) / 2);
  top: calc(90px + min(10vw, 128.81px));
}

.c_top_fv_wrxs4 {
  height: auto;
  position: absolute;
  top: 60%;
  left: 50%;
  width: 130%;
  transform: translate(-50%, -50%);
}

.c_top_fv_wrxs4 img {
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .c_top_fv {
    height: calc(667px - 81px);
    display: flex;
    align-items: center;
  }

  .c_top_fv>div {
    /*margin-top: -30px;*/
  }

  .c_top_fv_glyph01,
  .c_top_fv_glyph02 {
    position: relative;
    left: inherit;
    top: inherit;
    width: 43%;
  }

  .c_top_fv_wrxs4 {
    position: relative;
    width: 200%;
    margin: -25% 0 -5%;
    transform: translateX(-50%);
  }
}

/* TOP - >  Main Contents */
.c_top_main {
  position: relative;
  max-width: 1366px;
  overflow: hidden;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .c_top_main {
    height: auto;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .c_top_main>* {
    position: relative;
    left: inherit;
    right: inherit;
    top: inherit;
    width: 100%;
  }
}

/* Grid */
.c_top_main_grid {
  position: relative;
  display: grid;
  grid-template-rows: auto;
}

.c_top_main_grid__img {
  position: relative;
  z-index: 1;
}

.c_top_main_grid__img picture {
  width: 100%;
  height: 100%;
}

.c_top_main_grid__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c_top_main_grid__text {
  display: flex;
  align-items: center;
  padding: 50px 64px;
  font-size: 18px;
}

.c_top_main_grid__text--gray {
  position: relative;
}

.c_top_main_grid__text--gray::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #DDE2E6;
  content: "";
}

.c_top_main_grid__text>div {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 32px;
  box-sizing: border-box;
}

.c_top_main_grid__text h4 {
  font-weight: 900;
  line-height: 1.2;
  margin-top: 0.5em;
}

.c_top_main_grid__text p {
  font-weight: bold;
  line-height: 1.8;
}

.c_top_main_grid--01 {
  grid-template-columns: 40% 60%;
  grid-template-areas:
    "grid01_img01 grid01_text01"
    "grid01_img01 grid01_img02";
}

.c_top_main_grid--01__img01 {
  grid-area: grid01_img01;
}

.c_top_main_grid--01__img02 {
  grid-area: grid01_img02;
}

.c_top_main_grid--01__text01 {
  grid-area: grid01_text01;
}

.c_top_main_grid--02 {
  grid-template-columns: 60% 40%;
  grid-template-areas:
    "grid02_img01 grid02_text01";
  align-items: flex-start;
}

.c_top_main_grid--02__img01 {
  grid-area: grid02_img01;
}

.c_top_main_grid--02__text01 {
  grid-area: grid02_text01;
  min-height: calc(67.5% - 100px);
}

.c_top_main_grid--03 {
  grid-template-columns: 63% 37%;
  grid-template-areas:
    "grid03_img01 grid03_text01"
    "grid03_img01 grid03_img02"
    "grid03_img01 grid03_button01";
  grid-template-rows: auto 1fr;
}

.c_top_main_grid--03__img01 {
  grid-area: grid03_img01;
}

.c_top_main_grid--03__img02 {
  grid-area: grid03_img02;
}

.c_top_main_grid--03__text01 {
  grid-area: grid03_text01;
  padding: 110px 64px;
}

.c_top_main_grid--03__button01 {
  grid-area: grid03_button01;
}

.c_top_main_grid--04 {
  grid-template-columns: 37% 63%;
  grid-template-areas:
    "grid04_text01 grid04_img01"
    "grid04_img02 grid04_img01";
  grid-template-rows: auto 1fr;
  align-items: flex-start;
}

.c_top_main_grid--04__img01 {
  grid-area: grid04_img01;
}

.c_top_main_grid--04__text01 {
  grid-area: grid04_text01;
  padding: 110px 64px;
}

.c_top_main_grid--04__button01 {
  grid-area: grid04_button01;
  position: absolute;
  left: 37%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
  transform: translate(-50%, 0);
}

.c_top_main_grid--05 {
  grid-template-columns: 37% 63%;
  grid-template-areas:
    "grid05_text01 grid05_img01";
}

.c_top_main_grid--05__img01 {
  grid-area: grid05_img01;
}

.c_top_main_grid--05__text01 {
  grid-area: grid05_text01;
}

.c_top_main_grid--06 {
  grid-template-columns: 63% 37%;
  grid-template-areas:
    "grid06_img01 grid06_button01";
  background-color: #000;
}

.c_top_main_grid--06__img01 {
  grid-area: grid06_img01;
}

.c_top_main_grid--06__button01 {
  grid-area: grid06_button01;
}

.c_top_main_grid--07 {
  grid-template-columns: 63% 37%;
  grid-template-areas:
    "grid07_img01 grid07_text01";
}

.c_top_main_grid--07__text01 {
  grid-area: grid07_text01;
}

.c_top_main_grid--07__img01 {
  grid-area: grid07_img01;
}

.c_top_main_grid--08 {
  grid-template-columns: 37% 63%;
  background: #000;
}

.c_top_main_grid--08__button01 a {
  margin-left: auto;
}

@media screen and (max-width: 768px) {
  .c_top_main_grid {
    display: block;
  }

  .c_top_main_grid__text {
    padding: 50px 24px;
    font-size: 16px;
  }

  .c_top_main_grid__text>div {
    gap: 24px;
  }

  .c_top_main_grid--01__text01::before {
    bottom: -50vw;
  }

  .c_top_main_grid--01__img02 {
    padding-left: 24px;
  }

  .c_top_main_grid--02__img01 {
    padding-right: 24px;
  }

  .c_top_main_grid--02__text01::before {
    top: -10vw;
    bottom: -67.5vw;
  }

  .c_top_main_grid--03__text01 {
    padding-top: 114px;
    padding-bottom: 96px;
  }

  .c_top_main_grid--03__img02 {
    position: absolute;
    top: auto;
    right: 0;
    width: calc(100% / 3 * 2);
    transform: translateY(-50%);
  }

  .c_top_main_grid--03__button {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .c_top_main_grid--04 {
    margin-bottom: 64px;
  }

  .c_top_main_grid--04__text01 {
    padding-top: 114px;
    padding-bottom: 96px;
  }

  .c_top_main_grid--04__img02 {
    position: absolute;
    top: auto;
    left: 0;
    width: calc(100% / 3 * 2);
    transform: translateY(-50%);
  }

  .c_top_main_grid--04__button01 {
    position: absolute;
    right: 0;
    left: auto;
    bottom: 0;
    transform: initial;
  }

  .c_top_main_grid--05__img01 {
    padding-right: 24px;
  }

  .c_top_main_grid--05__img01 picture {
    position: relative;
  }

  .c_top_main_grid--05__img01::before {
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    content: "";
  }

  .c_top_main_grid--06 {
    z-index: 1;
    padding-bottom: 40px;
  }

  .c_top_main_grid--06__img01 {
    width: calc(100% - 187px);
  }

  .c_top_main_grid--06__button01 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }

  .c_top_main_grid--06__button01 a {
    position: relative;
    transform: translateY(-50%);
  }

  .c_top_main_grid--07__img01 {
    padding-left: 24px;
  }

  .c_top_main_grid--08 {
    z-index: 1;
  }

  .c_top_main_grid--08__img01 {
    width: calc(100% - 187px);
    margin-left: auto;
  }

  .c_top_main_grid--08__button01 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .c_top_main_grid--08__button01 a {
    position: relative;
    transform: translateY(-50%);
  }
}

/* Extetior */
.c_top_main_extetior__title {
  max-width: calc(1200px + 24px * 2);
  padding: 0 24px;
  margin: 64px auto calc(-14 / 1366* 100vw);
  line-height: 1;
  box-sizing: border-box;
}

@media screen and (min-width: 1366px) {
  .c_top_main_extetior__title {
    margin-bottom: -14px;
  }
}

@media screen and (max-width: 768px) {
  .c_top_main_extetior__title {
    padding: 0;
    margin-top: 150px;
    margin-bottom: calc(-8 / 375* 100vw);
    text-align: center;
  }
}

/* Sti Performance */
.c_top_main_stiperformance {
  position: relative;
}

.c_top_main_stiperformance_head {
  position: relative;
  padding: 0 0 67px 200px;
  color: #fff;
}

.c_top_main_stiperformance_head::before {
  position: absolute;
  top: 322px;
  bottom: 0;
  width: 1920px;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  content: "";
}

.c_top_main_stiperformance_head__titles {
  position: relative;
  margin: -160px 0 0 -136px;
}

.c_top_main_stiperformance_head__logo {
  display: block;
  width: 438px;
}

@media screen and (max-width: 768px) {
  .c_top_main_stiperformance_head {
    position: relative;
    padding: 120px 0 56px 24px;
  }

  .c_top_main_stiperformance_head::before {
    top: 0;
  }

  .c_top_main_stiperformance_head__titles {
    position: relative;
    margin: -56px 0 0 0;
  }

  .c_top_main_stiperformance_head__logo {
    height: 56px;
    width: auto;
  }
}

/* Sti performance Grid */
.c_top_stiperformance {
  max-width: 1920px;
  background-color: #000000;
  position: relative;
  margin: 0 auto;
}

.c_top_stiperformance_grid {
  max-width: 1366px;
  margin: 0 auto;
  background-color: #000000;
  width: 100%;

  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fit, 358px);
  grid-template-rows: 412px 412px 412px 412px 412px;
  column-gap: 63px;
  row-gap: 100px;
  padding-top: 80px;
}

.c_top_stiperformance_grid_item {
  position: relative;
  width: 358px;
  min-height: 412px;
  color: #FFFFFF;
}

.c_top_stiperformance_grid_item>a {
  position: relative;
  display: block;
}

.c_top_stiperformance_grid_item>a>img {
  max-width: 100%;
}

.c_top_stiperformance_grid_item_button {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
}

.c_top_stiperformance_grid_item_button>img {
  position: relative;
  z-index: 2;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease 0s;
}

.c_top_stiperformance_grid_item_button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all 0.3s ease 0s;
  background-color: #00A0DC;
}

@media (hover:hover) {
  .c_top_stiperformance_grid_item_button:hover::before {
    width: 100%;
  }

  .c_top_stiperformance_grid_item_button:hover>img {
    filter: inherit;
  }
}

@media screen and (min-width: 1200px) {
  .c_top_stiperformance_grid {
    padding-top: 0;
    padding-bottom: 410px;
  }

  .c_top_stiperformance_grid_item:nth-child(3n-2) {
    margin-top: 160px;
  }

  .c_top_stiperformance_grid_item:nth-child(3n-1) {
    margin-top: 400px;
  }

  .c_top_stiperformance_grid_item:nth-child(3n) {
    margin-top: 640px;
  }
}

.c_top_stiperformance_grid_item>h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 8px 0;
}

.c_top_stiperformance_grid_item_warranty {
  font-size: 12px;
  font-weight: lighter;
}

.c_top_stiperformance_grid_item_colors {
  margin-bottom: 8px;
  display: flex;
  gap: 4px;
}

.c_top_stiperformance_grid_item_colors>div {
  width: 30px;
  height: 6px;
  border: #FFFFFF 1px solid;
}

.c_top_stiperformance_grid_item_color_black {
  background-color: #000000;
}

.c_top_stiperformance_grid_item_color_gray {
  background-color: #E5E5E5;
}

.c_top_stiperformance_grid_item_color_gray02 {
  background-color: #ADAFBA;
}

.c_top_stiperformance_grid_item_color_gray03 {
  background-color: #A3A3A1;
}

.c_top_stiperformance_grid_item_color_red {
  background-color: #C70E48;
}

.c_top_stiperformance_grid_item_price {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  font-size: 16px;
}

.c_top_stiperformance_grid_item_price + p {
  font-size: 12px;
}

.c_top_stiperformance_grid_item_price>p:not(.c_top_stiperformance_grid_item_price_number) {
  width: 160px;
  padding-right: 18px;
  padding-bottom: 5px;
  font-weight: bold;
}

p.c_top_stiperformance_grid_item_price_number {
  font-size: 24px;
  width: auto;
  /*margin-top: 9px;*/
}

p.c_top_stiperformance_grid_item_price_number + p {
  font-size: 12px;
}

.c_top_stiperformance_grid_item_price_number>span {
  margin-left: 4px;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .c_top_stiperformance_grid {
    padding-bottom: 32px;
    column-gap: 17px;
    row-gap: 32px;
    grid-template-columns: repeat(auto-fit, 155px);
    grid-template-rows: inherit;
    align-items: flex-start;
  }

  .c_top_stiperformance_grid h3 {
    font-size: 14px;
  }

  .c_top_stiperformance_grid_item {
    min-height: initial;
    height: auto;
  }

  .c_top_stiperformance_grid_item a {
    position: relative;
  }

  .c_top_stiperformance_grid_item a img:nth-child(2) {

    bottom: -3px;
    width: 28px;
    height: 28px;
    top: inherit;
  }

  .c_top_stiperformance_grid_item p {
    font-size: 10px;
  }

  p.c_top_stiperformance_grid_item_price_number {
    font-size: 20px;
  }

  p.c_top_stiperformance_grid_item_price_number span {
    font-size: 10px;
  }

  .c_top_stiperformance_grid_item {
    width: 155px;
  }

  .c_top_stiperformance_grid_item img {
    max-width: 100%;
  }

  .c_top_stiperformance_grid_item_price {
    flex-direction: column;
    align-items: flex-start;
  }

  .c_top_stiperformance_grid_item_price>p:not(.c_top_stiperformance_grid_item_price_number) {
    width: auto;
    padding: 0;
  }
}

/* Base kit */
.c_top_basekit_section {
  max-width: 1366px;
  position: relative;
  margin: 0 auto;
}

.c_top_basekit {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.c_top_basekit_heading {
  width: 100%;
}

.c_top_basekit_heading>img {
  margin-left: 83px;
  margin-top: 86px;
}

.c_top_basekit_heading>p {
  margin-left: 83px;
  font-size: 16px;
  font-weight: bold;
}

.c_top_basekit_bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 815px;
  height: 1321px;
  background-color: #DDE2E6;
}

.c_top_basekit_grid {
  padding-top: 80px;
  width: 100%;

  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fit, 358px);
  grid-template-rows: 370px 370px 370px;
  column-gap: 63px;
  row-gap: 40px;
}

.c_top_basekit_grid_item {
  position: relative;
  width: 358px;
  height: 412px;
  color: #000000;
}

.c_top_basekit_grid_item>a {
  display: block;
}

.c_top_basekit_grid_item>a>img {
  max-width: 100%;
}

.c_top_basekit_grid_item_button {
  position: absolute;
  top: 173px;
  right: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
}

.c_top_basekit_grid_item_button>img {
  position: relative;
  z-index: 2;
}

.c_top_basekit_grid_item_button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all 0.3s ease 0s;
  background-color: #00A0DC;
}

@media (hover:hover) {
  .c_top_basekit_grid_item_button:hover::before {
    width: 100%;
  }
}

/* to be responsive */
@media screen and (min-width: 1200px) {
  .c_top_basekit_grid {
    padding-bottom: 120px;
  }

  .c_top_basekit_grid_item:nth-child(3n-2) {
    margin-top: 20px;
  }

  .c_top_basekit_grid_item:nth-child(3n-1) {
    margin-top: 260px;
  }

  .c_top_basekit_grid_item:nth-child(3n) {
    margin-top: 500px;
  }
}


.c_top_basekit_grid_item>h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 8px 0;
}

.c_top_basekit_grid_item_warranty {
  font-size: 12px;
  font-weight: lighter;
}

.c_top_basekit_grid_item_price {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
}

.c_top_basekit_grid_item_price + p {
  font-size: 12px;
}

.c_top_basekit_grid_item_price>p {
  font-weight: 500;
}

p.c_top_basekit_grid_item_price_number {
  font-size: 24px;
  width: auto;
}

.c_top_basekit_grid_item_price_number>span {
  margin-left: 4px;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .c_top_basekit_heading>img {

    width: 280px;
    margin: 64px 0 0 24px;
  }

  .c_top_basekit_heading>p {

    max-width: calc(100% - 48px);
    margin-left: 24px;
  }


  .c_top_basekit_grid {
    column-gap: 17px;
    row-gap: 32px;
    grid-template-columns: repeat(auto-fit, 155px);
    grid-template-rows: inherit;
  }

  .c_top_basekit_grid h3 {
    font-size: 14px;
  }

  .c_top_basekit_grid_item {
    height: 200px;
  }

  .c_top_basekit_grid_item a {
    position: relative;
  }

  .c_top_basekit_grid_item a img:nth-child(2) {
    bottom: -3px;
    width: 28px;
    height: 28px;
    top: inherit;
  }

  .c_top_basekit_grid_item p {
    font-size: 10px;
  }

  p.c_top_basekit_grid_item_price_number {
    font-size: 20px;
  }

  p.c_top_basekit_grid_item_price_number span {
    font-size: 10px;
  }

  .c_top_basekit_grid_item {
    width: 155px;
  }

  .c_top_basekit_grid_item_price {
    flex-direction: column;
  }

  .c_top_basekit_bg {
    width: 250px;
    height: 607px;
  }

  .c_top_basekit_section {
    margin-bottom: 75px;
  }
}

.c_top_parts {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: calc(1200px + 24px* 2);
  padding: 0 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.c_top_parts>h3 {
  margin: 40px 0 23px;
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 48px;
  font-weight: 400;
}

.c_top_parts_toggle_button {
  position: absolute;
  right: 0;
  top: 0;

  width: 120px;
  height: 56px;
  background-color: #DDE2E6;
  border: 0;

  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.c_top_parts_toggle_button>span {
  left: 0;
  top: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 400;
}

.c_top_parts_toggle_button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all 0.3s ease 0s;
  background-color: #00A0DC;
}

@media (hover:hover) {
  .c_top_parts_toggle_button:hover::before {
    width: 100%;
  }
}

.c_top_parts_table_container {
  margin: 0 -24px;
  padding: 0 24px;
  overflow-x: auto;
}

.c_top_parts_table_container>table {
  display: none;
  width: 100%;
  background-color: #DDE2E6;
}

.c_top_parts_table_container>table.active {
  display: table;
  opacity: 1;
}

.c_top_parts_table_container>table>thead {
  background-color: #00205B0F;
  height: 73px;
}

.c_top_parts_table_container>table>thead>tr>th {
  border: #DDE2E6 2px solid;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10px;
}

.c_top_parts_table_container>table>tbody>tr>td {
  border: #DDE2E6 2px solid;
  text-align: center;
  height: 41px;
  padding: 0 10px;
  font-size: 12px;
}

.c_top_parts_table_container>table>tbody>tr>td.bold {
  font-weight: bold;
}

.c_top_parts_table_container>table>tbody>tr:nth-child(2n -1) {
  background-color: #FFFFFF;
}

.c_top_parts_table_container>table>tbody>tr:nth-child(2n) {
  background-color: #FFFFFFCB;
}


/* c_top_eyecatch */
.c_top_eyecatch {
  position: relative;
  width: 1366px;
  max-width: 100%;
  margin: 120px auto 0;
  overflow: hidden;
}

.c_top_eyecatch_customization_button {
  width: 296px;
  height: 80px;
  position: absolute;
  right: 24px;
  bottom: 0;
  margin-bottom: -1px;
}

.c_top_eyecatch_customization_button>a {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.c_top_eyecatch>img {
  position: relative;
  left: 50%;
  width: 130%;
  transform: translateX(-50%);
  max-width: initial;
}

@media screen and (max-width: 768px) {
  .c_top_eyecatch {
    margin: 40px auto;
  }

  .c_top_eyecatch>img {
    width: 160%;
  }

  .c_top_eyecatch_customization_button {
    width: 180px;
    height: 56px;
    right: 8px;
  }

  .c_top_eyecatch_customization_button img {
    height: 26px;
  }
}

/* sticky-layer */
.sticky-layer {
  position: sticky;
  bottom: 0;
  max-width: 100%;
  height: 0;
  margin: 0 auto;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.sticky-layer.active {
  opacity: 1;
}

/* Footer */
.c_top_footer {
  background-color: #000000;
  width: 100%;
  height: 768px;
  z-index: 4;
  position: relative;
}

.c_top_footer_description {
  color: #FFFFFF;
  max-width: min(1176px, calc(100% - 64px));
  margin: 24px auto 0;
}

.c_top_footer_description li {
  margin: 12px 0;
  position: relative;
}

.c_top_footer_description li::before {
  content: "※";
  position: absolute;
  left: -12px;
}

.c_top_footer_description_p {
  color: #DDE2E6;
  margin: 24px 0 0;
  line-height: 20px;
  font-size: 12px;
}

@media screen and (max-width: 768px) {
  .c_top_footer {
    height: auto;
    min-height: 282px;
    width: 100%;
  }
}

.c_top_footer_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: calc(1200px + 24px* 2);
  padding: 32px 24px 38px;
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .c_top_footer_inner {
    width: 100%;
    padding: 40px 24px calc(60px + 56px)
  }
}

.c_top_footer_top_button {
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
  background-color: #FFFFFF;
  width: 306px;
  height: 102px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c_top_footer_top_button>a {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  text-decoration: none;
  color: #000;
}

.c_top_footer_top_button>a::after {
  display: none !important;
}

.c_top_footer_top_button img {
  z-index: 2;
}

.c_top_footer_top_button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all 0.3s ease 0s;
  background-color: #00A0DC;
}

@media (hover: hover) {
  .c_top_footer_top_button:hover::before {
    width: 100%;
  }
}

.c_top_footer_copylight {
  margin-top: auto;
}

.c_top_footer_glyph01,
.c_top_footer_glyph02 {
  width: 30%;
}

@media screen and (max-width: 768px) {
  .c_top_footer_top_button {
    position: absolute;
    right: 0;
    bottom: 0;
    right: 24px;
    background-color: #FFFFFF;

    left: 24px;
    text-align: center;
    width: calc(100% - 48px);
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .c_top_footer_top_button>a {
    font-size: 18px;
  }

  .c_top_footer_copylight {
    margin-top: 40px;
    padding-bottom: 0;
  }

  .c_top_footer_top_button a img {
    margin-left: 10px;
    height: 8px;
    object-fit: contain;
  }
}

@media screen and (max-width: 768px) {
  section.c_top_parts {
    margin: 0 0 64px;
  }

  .c_top_parts>h3 {
    font-size: 24px;
    gap: 16px;
  }

  .c_top_parts>h3>span:last-child {
    font-size: 20px;
  }

  .c_top_parts>.c_top_parts_toggle_button {
    width: 80px;
    height: 32px;
    margin-right: 24px;
    font-size: 12px;
  }

  .c_top_parts_table_container>table {
    width: 1200px;
  }

  /* item_buttons */
  .c_top_stiperformance_grid_item_button {
    width: 24px;
    height: 24px;
  }

  .c_top_stiperformance_grid_item_button>img {
    width: 5px;
    height: 8px;
  }

  .c_top_basekit_grid_item_button {
    bottom: 0;
    top: inherit;
    width: 24px;
    height: 24px;
  }

  .c_top_basekit_grid_item_button>img {
    /* original = >  5x8 px*/
    width: 5px;
    height: 8px;
  }
}

/* Utilities */
.u-inline-block {
  display: inline-block;
}

.anton {
  font-family: 'Anton', 'Helvetica', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Lucida Grande', 'Verdana', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', sans-serif;
}

.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: inline;
  }
}

/* Animation */
/* FadeIn */
.fade-in {
  opacity: 0;
  /*transition: all .8s ease .5s;   !* トランジションを設定 *!*/
}

.fade-in.t-50px {
  transform: translateY(50px);
}

.fade-in.t-100vh {
  transform: translateY(50vh);
}

.fade-in.dl-3 {
  transition: all .8s ease .3s;
}

.fade-in.dl-5 {
  transition: all .8s ease .5s;
}

.fade-in.dl-8 {
  transition: all .8s ease .8s;
}

.fade-in.dl-10 {
  transition: all .8s ease 1.0s;
}

.fade-in.in {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}