@charset "utf-8";

@media screen and (max-width: 767px) {}
@media screen and (max-width: 899px) {}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 1300px) {}

/*----------------------------------------------------------
   normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
----------------------------------------------------------*/
/* Document */
html{line-height:1.15;-webkit-text-size-adjust:100%}
/* Sections */
body{margin:0}
main{display:block}
/* Grouping content */
hr{box-sizing:content-box;height:0}
pre{font-family:monospace,monospace;font-size:1em}
/* Text-level semantics */
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
/* Embedded content */
img{border-style:none}
/* Forms */
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,select{text-transform:none}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button; appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:0.35em 0.75em 0.625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield; appearance:textfield; outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* Interactive */
details{display:block}
summary{display:list-item}
/* Misc */
template{display:none}
[hidden]{display:none}

/* reset
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, p, table, th, td, time { margin: 0; padding: 0; font-size: inherit;}
h1, h2, h3, h4, h5, h6, em, b { font-weight: inherit;}
em, b, i { font-style: inherit;}
li { list-style: none;}
figure { margin: 0;}
img { vertical-align: top; width: 100%; height: auto; background-color: rgba(255, 255, 255, .01);}
table { border-collapse: collapse; border-spacing: 0;}
input, select, textarea { font-size: max(1.8rem, 18px); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color: transparent;}
input:focus::-ms-input-placeholder, textarea:focus::-ms-input-placeholder { color: transparent;}
input:focus::placeholder, textarea:focus::placeholder { color: transparent;}
button { margin: 0; padding: 0; border: 0; outline: none; background: transparent; box-shadow: 0 0 0 0 transparent; cursor: pointer;}

/*----------------------------------------------------------
   custom
----------------------------------------------------------*/
:root {
  --w_max: 1260;
  --w_full: 1300;
  --w_tb: 768;
  --w_sp: 375;
  --c_white: #fff;
  --c_black: #222;
  --c_gray: #dcdddd;
  --c_text01: #444;
  --c_text02: #555;
}

/*----------------------------------------------------------
   base
----------------------------------------------------------*/
html {
  position: relative;
  height: 100dvh;
  font-size: min(2.6667vw, 62.5%);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Droid Sans", "Yu Gothic", YuGothic, "\30E1\30A4\30EA\30AA", Meiryo, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3", "Hiragino Kaku Gothic ProN", "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 13.0rem;
}
body {
  text-align: center;
  position: relative;
  min-height: 100dvh;
  background-color: var(--c_white);
  color: var(--c_text01);
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  outline: none;
  opacity: 1;
  transition: all .3s;
  backface-visibility: hidden;
}
a::after,
a::before {
  transition: all .3s;
  backface-visibility: hidden;
}
a img {
  vertical-align: top;
  background-color: rgba(255, 255, 255, .01);
}

.skip { position: absolute; left: -9999px;}
.hide { display: none;}
.left { float: left;}
.right { float: right;}
.clear { clear: both;}
.cf::after { clear: both; content: ""; display: block;}
.txtr { text-align: right;}
.txtc { text-align: center;}
.ib { display: inline-block;}
.wb { word-break: keep-all; overflow-wrap: break-word; line-break: normal;}
.em { color: var(--c_em);}

.sp01 { margin-top: .5em;}
.sp02 { margin-top: 1em;}
.sp03 { margin-top: 1.5em;}
.sp04 { margin-top: 2em;}
.sp05 { margin-top: 2.5em;}

.sp { display: block;}
.pc { display: none;}
.noscript-text { padding: 1em;}

/* common */
section { position: relative; display: block;}
section::after { clear: both; content: ""; display: block;}
section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
.inner, .header-inner {
  text-align: left;
  position: relative;
  margin-inline: auto;
}
.inner {
  max-width: calc(var(--w_max) * 1px);
  padding-inline: 1.8rem;
}
.inner * { box-sizing: border-box;}

@media screen and (min-width: 768px) {
  html { scroll-padding-top: 22.4rem;
    font-size: clamp(50%, 50% + ((1vw - 7.68px) * 0.3759), 62.5%);} /* 768px => 1300px | 8px => 10px */
  body { font-size: 2.0rem;}
  .sp { display: none;}
  .pc { display: block;}
}
@media screen and (min-width: 900px) {
  .inner {
    padding-inline: 20px;
  }
}

/* module
----------------------------------------------------------*/
/* grid */
.grid {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .grid {
    flex-direction: row;
    justify-content: space-between;
  }
  .grid-rev {
    flex-direction: row-reverse;
  }
}

/* link__btn-anchor */
.link__btn-anchor {
  position: relative;
}
.link__btn-anchor::after {
  content: "";
  position: absolute;
  top: 75%;
  right: calc(50% - .5rem);
  width: 1.0rem;
  height: 1.0rem;
  margin-top: -1.0rem;
  border: 0px;
  border-right: solid 1px var(--c_white);
  border-bottom: solid 1px var(--c_white);
  transform: rotate(45deg);
}
@media screen and (min-width: 768px) {
  .link__btn-anchor::after {
    top: 50%;
    right: 2.7rem;
    width: 1.3rem;
    height: 1.3rem;
  }
}

/*----------------------------------------------------------
   layout
----------------------------------------------------------*/
/* header
----------------------------------------------------------*/
#l-header .inner {
	padding-inline: min(calc(10 / var(--w_sp) * 100vw), 2.0rem);
}
.header__logo {
	position: relative;
	width: fit-content;
	margin-block: 1.4rem;
}
.header__logo a {
	display: block;
}
.header__logo img {
	width: 11.7rem;
	height: auto;
}
@media screen and (min-width: 768px) {
  .header__logo {
    margin-block: 2.0rem;
  }
  .header__logo img {
    width: 156px;
  }
}

/* #mv
----------------------------------------------------------*/
#mv {
  background-image: linear-gradient(207deg, #9e9e9f 0%, #5e606a 100%);
}
.mv__title--sub {
  text-align: center;
  padding-top: 5.4rem;
  color: #ffd400;
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 700;
}
.mv__title {
  text-align: center;
  padding: .5rem;
  color: var(--c_white);
  font-size: 3.0rem;
  line-height: 1.4;
  font-weight: 700;
}
.mv__liven {
  position: absolute;
  top: -.5rem;
  right: .5rem;
  color: #000;
  font-size: 1.4rem;
  font-weight: 700;
}
.mv__liven p {
  width: fit-content;
  padding-inline: 1.0rem;
  background-color: #ffbf00;
  white-space: nowrap;
}
.mv__liven p:nth-of-type(1) {
  transform: rotate(-13.3deg);
}
.mv__liven p:nth-of-type(2) {
  margin: -1.2rem 0 0 6.0rem;
  transform: rotate(-8.91deg);
}
.mv__image {
  position: relative;
  display: flex;
  margin-top: 2.0rem;
}
.mv__image::after {
	content: "";
  position: absolute;
  top: 0;
  left: calc(50% - var(--vw, 1vw) * 50);
	width: calc(var(--vw, 1vw) * 100);
	height: 1px;
  background-color: #ebebeb;
}
.mv__image li+li {
  border-left: solid 1px #ebebeb;
}
.mv__image li figure {
  display: block;
  position: relative;
}
.mv__image li figure>figcaption {
  position: absolute;
  bottom: calc(23 / 24 * 1em);
  left: 0;
  width: fit-content;
  padding: .5em .7em;
  background-image: linear-gradient(to right, #232323, #5c5c5c);
  color: var(--c_white);
  font-size: min(calc(12 / var(--w_sp) * 100vw), 1.8rem);
  line-height: 1;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #mv .inner {
    padding-inline: 0;
  }
}
@media screen and (min-width: 768px) {
  .mv__title--sub {
    padding-top: 64px;
    font-size: 4.0rem;
    line-height: 1;
  }
  .mv__title {
    font-size: 5.0rem;
  }
  .mv__liven {
    top: -2.0rem;
    font-size: 2.4rem;
  }
  .mv__image {
    margin-top: 3.2rem;
    border-right: solid 1px #ebebeb;
  }
  .mv__image li {
    border-left: solid 1px #ebebeb;
  }
  .mv__image li figure>figcaption {
    padding: 1.2rem 2.4rem;
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 1400px) {
  .mv__liven {
    right: -2.7rem;
  }
}

/* #l-main
----------------------------------------------------------*/
#l-main {
  padding-bottom: 4.8rem;
}
@media screen and (min-width: 768px) {
  #l-main {
    padding-bottom: 9.6rem;
  }
}

/* #intro */
#intro {
  margin-block: 4.4rem 4.8rem;
}
#intro .inner {
  text-align: center;
  width: fit-content;
}
#intro .intro__liven {
  position: relative;
  display: block;
  width: fit-content;
  color: #007943;
  padding-inline: 1em;
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 700;
  transform: rotate(-5.61deg);
}
#intro .intro__liven::before,
#intro .intro__liven::after {
	content: "";
  position: absolute;
  top: 0;
  bottom: 0;
	width: .2rem;
	height: 1em;
  margin-block: auto;
  background-color: #007943;
}
#intro .intro__liven::before {
  left: .5em;
  transform: rotate(-22deg);
}
#intro .intro__liven::after {
  left: calc(100% - .5em);
  transform: rotate(22deg);
}
#intro .intro__title {
  position: relative;
  width: fit-content;
  margin: 2.2rem auto 3.2rem;
  padding-left: 4.0rem;
  color: #232323;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 700;
}
#intro .intro__title span {
  display: block;
  position: relative;
}
#intro .intro__title span::after {
  z-index: -1;
	content: "";
  position: absolute;
  bottom: -.5rem;
  left: 0;
	width: 100%;
	height: 1.2rem;
  background-color: #ffbf00;
}
#intro .intro__text {
  text-align: left;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #intro {
    margin-block: 8.3rem 4.8rem;
  }
  #intro .intro__liven {
    font-size: 4.0rem;
  }
  #intro .intro__liven::before,
  #intro .intro__liven::after {
    width: .4rem;
  }
  #intro .intro__title {
    margin: 1.7rem auto 4.6rem;
    padding-left: 8.2rem;
    font-size: 6.4rem;
  }
  #intro .intro__title span::after {
    bottom: -.7rem;
    height: 2.2rem;
  }
  #intro .intro__text {
    text-align: center;
    font-size: 2.2rem;
  }
}

/* #anchor */
#anchor {
  z-index: 10;
  position: sticky;
  top: 0;
}
#anchor	.grid {
  flex-direction: row;
  align-items: center;
}
#anchor	.anchor__link li {
  width: calc(100% / 3);
}
#anchor	.anchor__link li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5.6rem;
  padding-bottom: 2.0rem;
  color: var(--c_white);
  font-size: 1.4rem;
}
#anchor	.anchor__link li:nth-of-type(1) a {
  background: #444 linear-gradient(to right, #808080, #525252);
}
#anchor	.anchor__link li:nth-of-type(2) a {
  background: #2d4c87 linear-gradient(to right, #008fcd, #2d4c87);
}
#anchor	.anchor__link li:nth-of-type(3) a {
  background: #564630 linear-gradient(to right, #ac9e89, #564630);
}
@media (any-hover: hover) {
  #anchor	.anchor__link li a:hover {
    background-image: none;
  }
}
@media screen and (max-width: 767px) {
  #anchor .inner {
    padding-inline: 0;
  }
}
@media screen and (min-width: 768px) {
  #anchor .anchor__link li a {
    height: 9.6rem;
    padding-bottom: 0;
    font-size: 2.4rem;
  }
}

/* .items */
.items {
  padding-bottom: 2.4rem;
}
.items__head {
  position: relative;
  padding-bottom: 2.0rem;
}
.items-head__image {
  z-index: 2;
  position: relative;
  top: -5.6rem;
  right: 0;
  left: 0;
  width: 90%;
  margin-inline: auto;
}
.items-head-title__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -4.2rem;
  padding-block: 0 1.0rem;
}
.items-head-title__wrap::after {
	content: "";
  position: absolute;
  bottom: 0;
  right: 0;
	width: 100%;
	height: .2rem;
  background-image: linear-gradient(to right, #a6a6a6, #080808);
}
.items-head__title {
  color: #222;
  font-size: 3.2rem;
  font-weight: 700;
}
.items-head__text {
  text-align: center;
  font-size: 1.9rem;
}
.items-head__lead {
  padding: 1.6rem 1.4rem;
  color: var(--c_text02);
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  .items {
    padding-bottom: min(calc(80 / 1440 * 100vw), 8.0rem);
  }
  .items__head {
    padding-bottom: 3.2rem;
  }
  .items-head__image {
    position: absolute;
    top: max(calc(-96 / var(--w_full) * 100vw), -9.6rem);
    left: max(calc(-18 / var(--w_full) * 100vw), -1.8rem);
    right: auto;
    width: min(calc(566 / var(--w_full) * 100vw), 56.6rem);
    margin-inline: 0;
  }
  .items-head-title__wrap {
    flex-direction: row;
    justify-content: flex-end;
    gap: min(calc(32 / var(--w_full) * 100vw), 3.2rem);
    margin-top: 0;
    padding-block: min(calc(60 / var(--w_full) * 100vw), 6.0rem) 1.6rem;
  }
  .items-head-title__wrap::after {
    width: 80%;
  }
  .items-head__title {
    font-size: min(calc(48 / var(--w_full) * 100vw), 4.8rem);
  }
  .items-head__text {
    text-align: left;
    padding-right: min(calc(26 / var(--w_full) * 100vw), 2.6rem);
    font-size: min(calc(28 / var(--w_full) * 100vw), 2.8rem);
  }
  .items-head__lead {
    width: min(calc(664 / var(--w_full) * 100vw), 66.4rem);
    min-height: min(calc(140 / var(--w_tb) * 100vw), 21.6rem);
    margin: min(calc(20 / var(--w_tb) * 100vw), 4.0rem) 0 0 auto;
    padding: 0;
    font-size: min(calc(14.5 / var(--w_tb) * 100vw), 2.0rem);
  }
}

/* .lineup */
.lineup {
  overflow: hidden;
  border-radius: .4rem;
}
.lineup__title {
  text-align: center;
  padding-block: calc(11 / 28 * 1em) calc(7 / 28 * 1em);
  background-color: var(--c_gray);
  font-size: 1.8rem;
  font-weight: 700;
}
.lineup__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 1.0rem;
  background-color: var(--c_white);
  padding: 1.0rem 1.0rem 1.2rem;
}
.lineup__wrap li {
  display: flex;
  flex-direction: column;
  width: calc((100% - 1.0rem) / 2);
  background-color: #f9f9f9;
}
.lineup-ttl__wrap {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: calc(11 / 28 * 1em);
  color: var(--c_white);
}
.lineup__ttl {
  display: grid;
  grid-template-columns: 1em 1fr;
  grid-auto-rows: max-content;
  align-items: center;
  column-gap: calc(12 / 32 * 1em);
  row-gap: calc(3 / 32 * 1em);
  font-size: 1.6rem;
  line-height: 1.2;
}
.lineup-ttl__num {
  grid-row: span 2 / span 2;
  margin-top: calc(-2 / 32 * 1em);
}
.lineup-ttl__fn {
  font-size: min(calc(11 / var(--w_sp) * 100vw), 1.4rem);
  font-weight: 700;
}
.lineup-ttl__model {
  grid-column-start: 2;
  grid-row-start: 2;
  font-size: min(calc(11 / var(--w_sp) * 100vw), 1.3rem);
}
.lineup__image {
  margin: 0 1.0rem 1.2rem;
}
@media screen and (min-width: 768px) {
  .lineup__title {
    font-size: 2.8rem;
  }
  .lineup__wrap {
    gap: 1.6rem;
    padding: calc(20 / var(--w_tb) * 100vw);
  }
  .lineup__wrap li {
    width: calc((100% - 1.6rem * 3) / 4);
    margin-bottom: .8rem;
  }
  .lineup__ttl {
    font-size: min(calc(18 / var(--w_tb) * 100vw), 3.2rem);
  }
  .lineup-ttl__fn {
    font-size: min(calc(12 / var(--w_tb) * 100vw), 1.8rem);
  }
  .lineup-ttl__model {
    font-size: min(calc(11 / var(--w_tb) * 100vw), 1.6rem);
  }
  .lineup__image {
    margin: 0 2.15rem 2.4rem;
  }
}
@media screen and (min-width: 900px) {
  .lineup__wrap {
    padding: min(calc(40 / var(--w_full) * 100vw), 4.0rem) min(calc(40 / var(--w_full) * 100vw), 4.0rem) min(calc(32 / var(--w_full) * 100vw), 3.2rem);
  }
}

/* .items__support */
.items__support {
  margin-top: 2.0rem;
  padding: 2.2rem 1.4rem;
  border-radius: .4rem;
  background-color: var(--c_gray);
}
.items-support__title {
  text-align: center;
  font-size: 2.0rem;
  line-height: 1.4;
}
.items-support__table {
  margin: 1.0rem auto 1.0rem;
  width: fit-content;
}
.items-support-table__inner {
  display: grid;
  grid-template-columns: calc(120 / 18 * 1em) 1fr;
  grid-auto-rows: max-content;
  padding-block: calc(10 / 18 * 1em) calc(6 / 18 * 1em);
	border-bottom: solid 1px #c4c4c4;
  font-size: 1.4rem;
  line-height: 1.6;
}
.items-support__table dt {
  text-align: center;
	position: relative;
  padding-right: calc(26 / 18 * 1em);
  color: var(--c_text02);
}
.items-support__table dt::after {
	content: "";
  position: absolute;
  top: calc(10 / 18 * 1em);
  right: calc(20 / 18 * 1em);
	width: 1px;
	height: calc(12 / 18 * 1em);
  background-color: #a4a4a4;
}
.items-support__table dd i,
.items-support__table dd span {
  display: inline-block;
  padding-right: calc(10 / 18 * 1em);
}
.items-support__table dd span.support-note {
  font-size: 1.2rem;
}
.items-support__note {
  display: flex;
  flex-direction: column;
  column-gap: 1em;
  margin: auto;
  width: fit-content;
  font-size: 1.2rem;
  line-height: 1.4;
}
.items-support__note li {
  position: relative;
  padding: .3em 0 0 1.2em;
}
.items-support__note li span {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 1.2em;
}
@media screen and (min-width: 768px) {
  .items__support {
    margin-top: 3.2rem;
    padding: 2.2rem 2.4rem;
  }
  .items-support__title {
    font-size: 2.4rem;
  }
  .items-support__table {
    margin: 1.0rem auto 1.8rem;
  }
  .items-support-table__inner {
    font-size: 1.8rem;
  }
  .items-support__table dd span.support-note {
    font-size: 1.4rem;
  }
  .items-support__note {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 900px) {
  .items-support__note {
    flex-direction: row;
  }
}

/* .items#mat */
#mat {
  margin-top: 9.6rem;
  background-color: #f2f2f2;
}
#mat .lineup__wrap>li:nth-of-type(1) .lineup-ttl__wrap { background-color: #000;}
#mat .lineup__wrap>li:nth-of-type(2) .lineup-ttl__wrap { background-color: #3f3e4c;}
#mat .lineup__wrap>li:nth-of-type(3) .lineup-ttl__wrap { background-color: #d5d5d5; color: #525252;}
#mat .lineup__wrap>li:nth-of-type(4) .lineup-ttl__wrap { background-color: #82847a;}
#mat .lineup__wrap>li:nth-of-type(5) .lineup-ttl__wrap { background-color: #4a4b43;}
#mat .lineup__wrap>li:nth-of-type(6) .lineup-ttl__wrap { background-color: #efefef; color: var(--c_text01);}
#mat .lineup__wrap>li:nth-of-type(7) .lineup-ttl__wrap { background-color: #66623f;}
#mat .lineup__wrap>li:nth-of-type(8) .lineup-ttl__wrap { background-color: #54583d;}
#mat .lineup__wrap>li:nth-of-type(8) .lineup-ttl__fn { font-size: min(calc(10.3 / var(--w_sp) * 100vw), 1.4rem);}
#mat .lineup__wrap>li:nth-of-type(9) .lineup-ttl__wrap { background-color: #617f58;}
#mat .lineup__wrap>li:nth-of-type(10) .lineup-ttl__wrap { background-color: #2c482f;}
#mat .lineup__wrap>li:nth-of-type(11) .lineup-ttl__wrap { background-color: #303a2d;}
#mat .lineup__wrap>li:nth-of-type(12) .lineup-ttl__wrap { background-color: #941426;}
#mat .lineup__wrap>li:nth-of-type(13) .lineup-ttl__wrap { background-color: #996ba9;}

@media screen and (min-width: 768px) {
  #mat {
    margin-top: 13.6rem;
  }
  #mat .lineup__wrap>li:nth-of-type(8) .lineup-ttl__fn { font-size: min(calc(11 / var(--w_tb) * 100vw), 1.8rem);}
}

/* .items#metalic */
#metalic {
  margin-top: 12.8rem;
  background-color: #f0f4fa;
}
#metalic .items-head-title__wrap::after {
  background-image: linear-gradient(to right, #2e3e5c, #019bdd);
}
#metalic .lineup__title,
#metalic .items__support {
  background-color: #dae1ea;
}
#metalic .lineup__wrap>li:nth-of-type(1) .lineup-ttl__wrap { background-color: #0d355d;}
#metalic .lineup__wrap>li:nth-of-type(2) .lineup-ttl__wrap { background-color: #6ed1f3; color:#003040;}
#metalic .lineup__wrap>li:nth-of-type(3) .lineup-ttl__wrap { background-color: #0a3926;}
#metalic .lineup__wrap>li:nth-of-type(4) .lineup-ttl__wrap { background-color: #060608;}
#metalic .lineup__wrap>li:nth-of-type(5) .lineup-ttl__wrap { background-color: #7c7270;}
#metalic .lineup__wrap>li:nth-of-type(6) .lineup-ttl__wrap { background-color: #89702a;}
#metalic .lineup__wrap>li:nth-of-type(7) .lineup-ttl__wrap { background-color: #db924a;}
#metalic .lineup__wrap>li:nth-of-type(7) .lineup-ttl__fn { font-size: min(calc(10 / var(--w_sp) * 100vw), 1.4rem);}
#metalic .lineup__wrap>li:nth-of-type(8) .lineup-ttl__wrap { background-color: #595a56;}

@media screen and (min-width: 768px) {
  #metalic .items-head__image {
    right: -1.8rem;
    left: auto;
  }
  #metalic .items-head-title__wrap {
    justify-content: flex-start;
  }
  #metalic .items-head-title__wrap::after {
    right: auto;
    left: 0;
  }
  #metalic .items-head__lead {
    margin-left: 0;
  }
  #metalic .lineup__wrap>li:nth-of-type(7) .lineup-ttl__fn { font-size: min(calc(10 / var(--w_tb) * 100vw), 1.6rem);}
}

/* .items#pearl */
#pearl {
  margin-top: 12.8rem;
  background-color: #f9f7f4;
}
#pearl .items-head-title__wrap::after {
  background-image: linear-gradient(to right, #d5ccbe, #958876);
}
#pearl .lineup__title,
#pearl .items__support {
  background-color: #ece9e5;
}
#pearl .lineup__wrap>li:nth-of-type(1) .lineup-ttl__wrap { background-color: #f8f3e7; color: #4c473c;}
#pearl .lineup__wrap>li:nth-of-type(2) .lineup-ttl__wrap { background-color: #e9e5dc; color: #4c473c;}
#pearl .lineup__wrap>li:nth-of-type(3) .lineup-ttl__wrap { background-color: #3f4449;}
#pearl .lineup__wrap>li:nth-of-type(4) .lineup-ttl__wrap { background-color: #626c72;}

/* footer
----------------------------------------------------------*/
#l-footer {
  padding: 3.2rem 2.4rem;
  background: #222;
  color: #fff;
}
.footer_inner {
  text-align: left;
  max-width: 920px;
  margin: 0 auto;
}
.footer_contact {
  padding: 32px 24px;
  background: #444;
}
.footer_contact_info {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-bottom: 32px;
}
.footer_contact_info_item_data {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 700;
}
.footer_contact_info_item_data.footer_contact_info_item_data__num {
  margin-top: 7px;
  font-size: 1.6rem;
  line-height: 1;
}
.footer_contact_info_item_note {
  width: 100%;
  margin-top: 13px;
}
.footer_contact_info_item_note_text {
  font-size: 1rem;
}
.footer_contact_info_reception_data {
  font-size: 1.2rem;
  line-height: 1.9;
}
.footer_contact_info_reception_data__title::after {
  display: inline-block;
  content: "：";
}
.footer_contact_toMailform {
  padding-top: 32px;
  border-top: solid 1px #787878;
}
.footer_contact_toMailform_link {
  text-align: center;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 9px 6.0rem;
  border: solid 1px #fff;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 500;
  transition: opacity 0.3s;
}
.footer_contact_toMailform_link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background-image: url(../images/arrow-next.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.footer_contact_toMailform_link:hover {
  opacity: 0.6;
}
.footer_copy {
  text-align: center;
  margin-top: 30px;
}
.footer_copy_text {
  color: #fff;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2.8;
}

@media screen and (min-width: 768px) {
  footer {
    padding: min(2.21429vw, 31px) min(2.85714vw, 40px) min(2.85714vw, 40px);
  }
  .footer_contact {
    padding: 48px 40px;
  }
  .footer_contact_info {
    gap: 25px;
  }
  .footer_contact_info_item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 29px 32px;
  }
  .footer_contact_info_item_data {
    font-size: 1.8rem;
    line-height: 1.1;
  }
  .footer_contact_info_item_data.footer_contact_info_item_data__num {
    margin-top: 0;
    font-size: 2.2rem;
  }
  .footer_contact_info_item_note_text {
    font-size: 1.4rem;
    line-height: 1.4;
  }
  .footer_contact_info_reception {
    display: flex;
  }
  .footer_contact_info_reception_data {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .footer_contact_toMailform_link {
    width: 400px;
    padding: 21px;
  }
  .footer_contact_toMailform_link::after {
    right: 24px;
  }
  .footer_copy {
    margin-top: 54px;
  }
  .footer_copy_text {
    font-size: 1.2rem;
    line-height: 2.3;
  }
}