@charset "UTF-8";
/* Break point
---------------------------------------------------------- */
/* Mixin
---------------------------------------------------------- */
/* Animation
---------------------------------------------------------- */
.a-fadeIn {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.a-fadeIn.-start {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* ==========================================================================//
//
//　変数
//
// ========================================================================== */
:root {
  /* Color
  ---------------------------------------------------------- */
  --color-main: #165EAA;
  --color-sub: #D8EBFF;
  --color-line: #CAD5D5;
  --color-font: #3B3C42;
  --color-link: #111987;
  --color-red: #EB3939;
  --grd-line: linear-gradient(90deg, #2279CF 0%, #38AEDC 100%);
  --grd-bg: linear-gradient(245deg, #EFFAFF 2.83%, #E5F3F9 68.05%, #C8E8F5 89.78%);
  --grd-gray: linear-gradient(99deg, #FDFDFD 0.49%, #EFEFEF 99.51%);
  --label-color-new: #0066C6;
  --label-color-new2: #C6E4FF;
  --label-color-recommend: #4EBCE4;
  --label-color-recommend2: #C4F2FF;
  --label-color-deprecated: #FFA550;
  --label-color-deprecated2: #FFD7B2;
  --label-color-discontinued: #EB3939;
  --label-color-discontinued2: #FFD7C2;
  --label-color-massProduced: #6FC56F;
  --label-color-massProduced2: #D5FDBE;
  --label-color-endOfLife: #989898;
  --label-color-endOfLife2: #D9D9D9;
  /* font
  ---------------------------------------------------------- */
  --font-serif: "Noto Serif JP", serif;
  --font-sansserif: "Noto Sans JP", sans-serif;
  --font-l: 300;
  --font-r: 400;
  --font-m: 500;
  --font-b: 700;
  --font-bl: 900;
  --lhS: 1.2;
  --lhM: 1.5;
  --lhL: 1.8;
  --lhLL: 2.3;
  /* width
  ---------------------------------------------------------- */
  --maxWidth: 1240px;
  --maxWidth2: 1040px;
  --sidePadding: 20px;
  --marginTop: 20px;
}
@media screen and (min-width: 768px) {
  :root {
    --sidePadding: 40px;
  }
}
@media screen and (min-width: 960px) {
  :root {
    --sidePadding: 80px;
  }
}
@media screen and (min-width: 768px) {
  :root {
    --marginTop: 40px;
  }
}

.p-product__lineup {
  padding-bottom: 70px;
  background: -webkit-linear-gradient(205deg, #FCFEFF 2.83%, #E5F3F9 68.05%, #C8E8F5 89.78%);
  background: linear-gradient(245deg, #FCFEFF 2.83%, #E5F3F9 68.05%, #C8E8F5 89.78%);
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-product__lineup {
    padding-bottom: 130px;
  }
}
.p-product__lineup::after {
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(263deg, rgba(252, 254, 255, 0) 43.99%, rgba(216, 240, 255, 0.5) 74.35%, rgba(200, 226, 255, 0.6) 89.09%);
  background: linear-gradient(187deg, rgba(252, 254, 255, 0) 43.99%, rgba(216, 240, 255, 0.5) 74.35%, rgba(200, 226, 255, 0.6) 89.09%);
  position: absolute;
  top: 0;
  left: 0;
}
.p-product__lineup::before {
  content: "";
  display: block;
  height: 100%;
  aspect-ratio: 1/1;
  background: url(/coselsync/product/images/bg-wave.webp) no-repeat center/cover;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-product__lineup::before {
    left: 30%;
  }
}
.p-product__lineup > * {
  position: relative;
  z-index: 2;
}
.p-product__lineup__list {
  max-width: var(--maxWidth);
  margin: 55px auto 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .p-product__lineup__list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 4em;
    margin-top: 90px;
  }
}
.p-product__lineup__list > * {
  border: 1px solid var(--color-main);
  background: var(--grd-gray);
}
@media screen and (min-width: 768px) {
  .p-product__lineup__list > * {
    width: calc(50% - 2em);
  }
}
.p-product__lineup__list > * a {
  display: block;
  padding: 20px 15px 15px;
}
@media screen and (min-width: 768px) {
  .p-product__lineup__list > * a {
    padding: 50px 20px 20px;
  }
}
@media screen and (min-width: 960px) {
  .p-product__lineup__list > * a:hover {
    text-decoration: none;
  }
}
@media screen and (min-width: 960px) and (min-width: 960px) {
  .p-product__lineup__list > * a:hover .c-arrowBox {
    background: var(--color-main);
    color: #fff;
  }
}
.p-product__lineup__list .-name {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  justify-items: center;
  color: var(--color-main);
  padding-bottom: 20px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-product__lineup__list .-name {
    padding-bottom: 30px;
  }
}
.p-product__lineup__list .-name .-en {
  font-size: 28px;
  font-size: 1.75rem;
  font-weight: var(--font-m);
}
@media screen and (min-width: 768px) {
  .p-product__lineup__list .-name .-en {
    font-size: 42px;
    font-size: 2.625rem;
  }
}
.p-product__lineup__list .-name .-jp {
  font-size: 16px;
  font-size: 1rem;
  font-weight: var(--font-r);
}
@media screen and (min-width: 768px) {
  .p-product__lineup__list .-name .-jp {
    font-size: 25px;
    font-size: 1.5625rem;
  }
}
.p-product__lineup__list .-name::after {
  content: "";
  display: block;
  width: 80%;
  max-width: 310px;
  height: 1px;
  background: var(--color-line);
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.p-product__lineup__list .-img {
  text-align: center;
}
.p-product__lineup__list .-img img {
  max-width: 430px;
}
.p-product__lineup__list .c-arrowBox {
  display: block;
  margin: 0 0 0 auto;
}
.p-product__series {
  padding-bottom: 70px;
}
.p-product__series-name {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--maxWidth);
  margin-top: 50px;
  padding-bottom: 10px;
  color: var(--color-main);
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-product__series-name {
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    padding-bottom: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.p-product__series-name::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--grd-line);
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  .p-product__series-name::after {
    width: 100%;
    position: relative;
  }
}
.p-product__series-name + * {
  margin-top: 30px;
}
.p-product__series-name .-en {
  font-size: 30px;
  font-size: 1.875rem;
  font-weight: var(--font-m);
}
@media screen and (min-width: 768px) {
  .p-product__series-name .-en {
    font-size: 42px;
    font-size: 2.625rem;
    padding-bottom: 0.2em;
  }
}
.p-product__series-name .-jp {
  font-size: 16px;
  font-size: 1rem;
  font-weight: var(--font-r);
}
@media screen and (min-width: 768px) {
  .p-product__series-name .-jp {
    font-size: 23px;
    font-size: 1.4375rem;
    padding-top: 2%;
  }
}