@charset "UTF-8";
/* Break point
---------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Jost&family=Noto+Sans+JP:wght@100..900&display=swap");
/* ==========================================================================//
//
//　変数
//
// ========================================================================== */
:root {
  /* Color
  ---------------------------------------------------------- */
  --color-font: #000000;
  --color-gray: #7B7B7B;
  --color-gray02:#BCBCBC;
  --color-main: #002A74;
  --color-sub: #0085A1;
  --color-back: #E7EAEB;
  --color-line01:#E8EDEF;
  --color-line02:#D9E1E3;
  --color-line03:#DCDCDC;
  --color-red: #EB0000;
  --color-highlight: #FFE600;
  /* Font
  ---------------------------------------------------------- */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Jost", sans-serif;
  --font-m: 500;
  --font-b: 700;
  --font11: 0.7rem;
  --font12: 0.79rem;
  --font13: 0.81rem;
  --font14: 0.88rem;
  --font16: 1rem;
  --font17: 1.06rem;
  --font18: 1.12rem;
  --font19: 1.19rem;
  --font20: 1.25rem;
  --font22: 1.42rem;
  --font24: 1.5rem;
  --font25: 1.6rem;
  --font28: 1.8rem;
  --font30: 1.875rem;
  --font32: 2rem;
  --font35: 2.18rem;
  --font36: 2.28rem;
  --font40: 2.5rem;
  --font43: 2.68rem;
  --font44: 2.75rem;
  --font45: 2.81rem;
  --font46: 2.88rem;
  --font48: 3rem;
  --font60: 3.75rem;
  --font80: 5rem;
  /* Radius
  ---------------------------------------------------------- */
  --radius: 2px;
  /* letter-spacing
  ---------------------------------------------------------- */
  --ls20: 0.02em;
  /* hight
  ---------------------------------------------------------- */
  --headerH: 60px;
  /* shadow
  ---------------------------------------------------------- */
  --shadow: 0 0 10px rgba(0,0,0,0.1) ;
}
@media screen and (min-width: 960px) {
  :root {
    --headerH: 98px;
  }
}

/* Placeholder
---------------------------------------------------------- */
/* ==========================================================================//
//
//　Message
//
// ========================================================================== */
.p-message_block {
  background-color: var(--color-back);
}

.p-message_img--PC {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-message_img--PC {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .p-message_img--SP {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .p-message_message-block::after {
    content: "";
    display: block;
    clear: both;
  }
}

@media screen and (min-width: 768px) {
  .p-message_image_president {
    max-width: 300px;
    float: right;
    margin-left: 2em;
  }
}
@media screen and (min-width: 960px) {
  .p-message_image_president {
    max-width: 500px;
  }
}

@media screen and (min-width: 768px) {
  .p-origin_block {
    grid-template-columns: 1fr 35%;
  }
}

.p-message_sign {
  max-width: 200px;
  margin: 0.5em 0 0 auto;
}

/* ==========================================================================//
//
//　Sustainability
//
// ========================================================================== */
.p-sustainability_block {
  background: url(/about/sustainability/images/img_sdgs_back.jpg) center center/cover no-repeat;
}
@media screen and (min-width: 768px) {
  .p-sustainability_block {
    display: grid;
    grid-template-columns: 1fr 40%;
    gap: 2rem;
  }
}
.p-sustainability_block .image_sdgs {
  width: 80%;
  max-width: 200px;
  margin: 2rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .p-sustainability_block .image_sdgs {
    width: 100%;
    max-width: 300px;
    margin-top: 0;
  }
}

.p-csr_block_logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  .p-csr_block_logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.p-csr_block_logo .logo_csr {
  max-height: 130px;
  width: auto;
}

.p-csr_indentItem {
  text-indent: calc(-3em - 1ex);
  padding-left: calc(3em + 1ex);
}

/* ==========================================================================//
//
//　Production
//
// ========================================================================== */
.p-production_main {
  --color-design: #7CC45C;
  --color-prototype: #4ABE9D;
  --color-process: #3AC2CF;
  --color-dev: #47A6DC;
  --color-mp: #6183C2;
  --color-shipping: #A9B7DE;
  --color-quality: #FFF282;
}

.p-production_block_flow {
  display: grid;
  grid-template-columns: auto 60%;
  gap: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--color-back);
}
@media screen and (min-width: 768px) {
  .p-production_block_flow {
    grid-template-columns: 1fr;
    font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
    gap: 0.5em;
  }
}
.p-production_block_flow .side_flow {
  background-color: var(--color-quality);
  text-align: center;
  -ms-flex-item-align: end;
      align-self: flex-end;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.13);
          box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.13);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
@media screen and (min-width: 768px) {
  .p-production_block_flow .side_flow {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    justify-self: flex-end;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    -webkit-writing-mode: initial;
        -ms-writing-mode: initial;
            writing-mode: initial;
  }
}
.p-production_block_flow .side_flow > a {
  padding: 2.9em 1em;
  font-size: 90%;
  color: var(--color-mp);
  letter-spacing: 0.05em;
  display: block;
}
@media screen and (min-width: 768px) {
  .p-production_block_flow .side_flow > a {
    padding: 1em 6.2em;
    display: inline-block;
  }
}
@media screen and (min-width: 960px) {
  .p-production_block_flow .side_flow > a:hover {
    color: var(--color-main);
  }
  .p-production_block_flow .side_flow > a:hover .arrow svg {
    fill: var(--color-main);
  }
  .p-production_block_flow .side_flow > a:focus {
    color: var(--color-main);
  }
  .p-production_block_flow .side_flow > a:focus .arrow svg {
    fill: var(--color-main);
  }
}
.p-production_block_flow .side_flow > a .text {
  margin: 0;
}
.p-production_block_flow .side_flow > a .arrow svg {
  vertical-align: initial;
  fill: var(--color-mp);
}
@media screen and (min-width: 768px) {
  .p-production_block_flow .side_flow > a .arrow svg {
    vertical-align: -0.2em;
  }
}

.p-production_flow {
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.13);
          box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.13);
  /* ----- 開発サイクルの背景 ----- */
  /* ----- 生産 ----- */
}
@media screen and (min-width: 768px) {
  .p-production_flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.p-production_flow .item_flow {
  --arrowH: 2.5em;
  --flowH: 7em;
  text-align: center;
  position: relative;
  background-color: var(--colorSelf);
  height: var(--flowH);
  /* ----- 色 ----- */
}
@media screen and (min-width: 768px) {
  .p-production_flow .item_flow {
    --arrowH: 1em;
  }
}
.p-production_flow .item_flow > a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .p-production_flow .item_flow > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    z-index: 2;
  }
}
.p-production_flow .item_flow .arrow_flow {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -6.5vw;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-production_flow .item_flow .arrow_flow {
    height: var(--flowH);
    bottom: 0;
  }
}
.p-production_flow .item_flow .parts_arrow {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .p-production_flow .item_flow .parts_arrow {
    width: var(--flowH);
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: top right;
            transform-origin: top right;
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 768px) {
  .p-production_flow .item_flow .parts_arrow.cycle {
    right: 1em;
  }
}
.p-production_flow .item_flow .parts_arrow.single {
  right: 1px;
}
.p-production_flow .item_flow.design {
  --colorSelf: var(--color-design);
}
.p-production_flow .item_flow.prototype {
  --colorSelf: var(--color-prototype);
}
.p-production_flow .item_flow.process {
  --colorSelf: var(--color-process);
}
.p-production_flow .item_flow.dev {
  --colorSelf: var(--color-dev);
}
.p-production_flow .item_flow.mp {
  --colorSelf: var(--color-mp);
}
.p-production_flow .item_flow.shipping {
  --colorSelf: var(--color-shipping);
}
@-webkit-keyframes gradationAnim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradationAnim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.p-production_flow .cycle_development {
  position: relative;
  z-index: 1;
}
.p-production_flow .cycle_development::after {
  content: "";
  display: block;
  width: calc(100% + 40px);
  height: 130%;
  background: linear-gradient(312deg, rgba(68, 199, 133, 0.733) 0%, rgba(186, 245, 217, 0.308) 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  border-radius: 3em;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .p-production_flow .cycle_development::after {
    height: 10rem;
  }
}
@media screen and (min-width: 768px) {
  .p-production_flow .cycle_development {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-production_flow .cycle_production {
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-production_flow .cycle_production {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-production_flow .cycle_production .arrow_connect {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (min-width: 768px) {
  .p-production_flow .cycle_production .arrow_connect {
    height: var(--flowH);
  }
}
.p-production_flow .cycle_production .arrow_connect .parts_arrow {
  right: calc(100% + 1px);
}
.p-production_flow .text_development {
  color: #13b766;
  position: absolute;
  bottom: calc(100% + 0.5em);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-weight: bold;
}

.p-production_sec {
  /* ----- 色 ----- */
}
@media screen and (min-width: 768px) {
  .p-production_sec {
    display: grid;
    grid-template-columns: minmax(13%, 18%) auto;
  }
}
.p-production_sec .arrow_sec {
  --arrowH: 5rem;
  --sectionMargin: 3rem;
  display: none;
  background-color: var(--colorSelf);
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--font20);
  color: #fff;
  /* ----- 開発サイクル矢印 ----- */
}
.p-production_sec .arrow_sec::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(var(--arrowH) + 5px);
  -webkit-clip-path: polygon(100% 0, 100% calc(var(--sectionMargin) + 5px), 50% 100%, 0 calc(var(--sectionMargin) + 5px), 0 0);
          clip-path: polygon(100% 0, 100% calc(var(--sectionMargin) + 5px), 50% 100%, 0 calc(var(--sectionMargin) + 5px), 0 0);
  background-color: var(--colorSelf);
  position: absolute;
  top: calc(100% - 5px);
  left: 0;
  z-index: 2;
}
.p-production_sec .arrow_sec::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(var(--arrowH) + 8px);
  -webkit-clip-path: polygon(100% 0, 100% calc(var(--sectionMargin) + 8px), 50% 100%, 0 calc(var(--sectionMargin) + 8px), 0 0);
          clip-path: polygon(100% 0, 100% calc(var(--sectionMargin) + 8px), 50% 100%, 0 calc(var(--sectionMargin) + 8px), 0 0);
  background-color: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-production_sec .arrow_sec {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.p-production_sec .arrow_sec > span {
  padding-top: 3rem;
}
.p-production_sec .arrow_sec.cycleArrow.arrow_next::before, .p-production_sec .arrow_sec.cycleArrow.arrow_next::after, .p-production_sec .arrow_sec.cycleArrow.arrow_both::before, .p-production_sec .arrow_sec.cycleArrow.arrow_both::after {
  content: none;
}
.p-production_sec .arrow_sec.cycleArrow .arrow_cycle {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  z-index: 1;
}
.p-production_sec .arrow_sec.cycleArrow .arrow_cycle .parts_cycleArrow {
  position: relative;
  z-index: 1;
}
.p-production_sec .arrow_sec.cycleArrow .arrow_cycle svg {
  width: 100%;
  height: auto;
}
.p-production_sec .content_sec {
  border-top: 1px solid var(--colorSelf);
}
@media screen and (min-width: 768px) {
  .p-production_sec .content_sec {
    width: 85%;
    max-width: 960px;
    margin-right: 0;
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  .p-production_sec .content_sec .gridContent {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 5%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.p-production_sec .content_sec .gridContent .image_content {
  max-width: 480px;
}
.p-production_sec.sec_design {
  --colorSelf: var(--color-design);
}
.p-production_sec.sec_prototype {
  --colorSelf: var(--color-prototype);
}
.p-production_sec.sec_process {
  --colorSelf: var(--color-process);
}
.p-production_sec.sec_dev {
  --colorSelf: var(--color-dev);
}
@media screen and (min-width: 768px) {
  .p-production_sec.sec_dev {
    padding-left: 1em;
  }
}
@media screen and (min-width: 960px) {
  .p-production_sec.sec_dev {
    padding-left: 0;
  }
}
.p-production_sec.sec_mp {
  --colorSelf: var(--color-mp);
}
@media screen and (min-width: 768px) {
  .p-production_sec.sec_mp {
    padding-left: 1em;
  }
}
@media screen and (min-width: 960px) {
  .p-production_sec.sec_mp {
    padding-left: 0;
  }
}
.p-production_sec.sec_shipping {
  --colorSelf: var(--color-shipping);
}
@media screen and (min-width: 768px) {
  .p-production_sec.sec_shipping {
    padding-left: 1em;
  }
}
@media screen and (min-width: 960px) {
  .p-production_sec.sec_shipping {
    padding-left: 0;
  }
}
.p-production_sec.sec_quality {
  --colorSelf: var(--color-quality);
}
@media screen and (min-width: 768px) {
  .p-production_sec.sec_quality {
    padding-left: 1em;
  }
}
@media screen and (min-width: 960px) {
  .p-production_sec.sec_quality {
    padding-left: 0;
  }
}

.p-production_sec_separate {
  border: 4px solid var(--color-quality);
}
.p-production_sec_separate .arrow_sec {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-production_sec_separate .arrow_sec {
    display: block;
  }
}
.p-production_sec_separate .image_content_in {
  max-width: 360px;
}

.p-production_block_cycle {
  --backW: 20px;
  --backH: 4rem;
  --backPos_top: calc(var(--backH) / -2);
  --backPos_bottom: calc(var(--backW) / -2);
  --borderW: 4px;
  position: relative;
  padding: 0 1em;
}
@media screen and (min-width: 960px) {
  .p-production_block_cycle {
    --backW: 100px;
    --backH: 5rem;
    --borderW: 1rem;
    padding: 0;
  }
}
.p-production_block_cycle::before {
  content: "";
  display: block;
  width: calc(100% + var(--backW) - var(--borderW));
  height: calc(100% + var(--backH) - var(--borderW));
  background-color: #fff;
  border-radius: 2rem;
  position: absolute;
  top: calc(var(--backPos_top) + var(--borderW) / 2);
  left: calc(var(--backPos_bottom) + var(--borderW) / 2);
  z-index: -3;
}
.p-production_block_cycle::after {
  content: "";
  display: block;
  width: calc(100% + var(--backW));
  height: calc(100% + var(--backH));
  background: linear-gradient(312deg, rgba(68, 199, 133, 0.733) 0%, rgba(186, 245, 217, 0.308) 100%);
  position: absolute;
  top: var(--backPos_top);
  left: var(--backPos_bottom);
  z-index: -4;
  border-radius: 2rem;
  background-size: 200% 200%;
  -webkit-animation: gradationAnim 5s ease infinite;
          animation: gradationAnim 5s ease infinite;
}

/* ==========================================================================//
//
//　Strength
//
// ========================================================================== */
@media screen and (min-width: 768px) {
  .p-strength_list .item_strength {
    display: grid;
    grid-template-columns: auto 50%;
    gap: 5%;
  }
}
.p-strength_list .item_strength .image {
  max-width: 620px;
}

/* ==========================================================================//
//
//　Service
//
// ========================================================================== */
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: translateX(-50%) rotate(0deg) scale(1);
            transform: translateX(-50%) rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) rotate(360deg) scale(1.1);
            transform: translateX(-50%) rotate(360deg) scale(1.1);
  }
  100% {
    -webkit-transform: translateX(-50%) rotate(720deg) scale(1);
            transform: translateX(-50%) rotate(720deg) scale(1);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: translateX(-50%) rotate(0deg) scale(1);
            transform: translateX(-50%) rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) rotate(360deg) scale(1.1);
            transform: translateX(-50%) rotate(360deg) scale(1.1);
  }
  100% {
    -webkit-transform: translateX(-50%) rotate(720deg) scale(1);
            transform: translateX(-50%) rotate(720deg) scale(1);
  }
}
.p-service_block {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 6rem;
}
@media screen and (min-width: 768px) {
  .p-service_block {
    grid-template-columns: repeat(3, 1fr);
    gap: 8%;
  }
}
@media screen and (min-width: 768px) {
  .p-service_block .item_service {
    display: grid;
    grid-template-rows: auto 1fr 33%;
  }
}
.p-service_block .image_item {
  width: 60%;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-service_block .image_item {
    width: 70%;
  }
}
.p-service_block .image_item::after {
  content: "";
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--gradient);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: blur(15px);
          filter: blur(15px);
}
.p-service_block .image_item.image_01 {
  --gradient: linear-gradient(45deg, rgba(252, 120, 163, 1) 0%, rgba(255, 237, 88, 1) 100%);
}
.p-service_block .image_item.image_02 {
  --gradient: linear-gradient(45deg, rgba(194, 218, 105, 1) 0%, rgba(62, 179, 112, 1) 100%);
}
.p-service_block .image_item.image_03 {
  --gradient: linear-gradient(45deg, rgba(95, 127, 201, 1) 0%, rgba(68, 202, 241, 1) 100%);
}

/* ==========================================================================//
//
//　Product
//
// ========================================================================== */
.p-product_back {
  padding: 4rem 0;
  background: url(/product/images/img_product_back.jpg) center center/cover no-repeat;
  position: relative;
}
.p-product_back::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-main);
  mix-blend-mode: multiply;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
}
.p-product_back .content {
  position: relative;
  color: #fff;
  z-index: 1;
  display: grid;
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-product_back .content {
    gap: 2rem;
  }
}

.p-product_marker {
  display: block;
  width: 15px;
  height: 15px;
  background-color: var(--color-main);
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: var(--top);
  left: var(--left);
}

.p-product_item_image {
  max-width: 500px;
}
.p-product_item_image::before {
  content: "";
  display: block;
  width: 1px;
  height: var(--height);
  background-color: var(--color-main);
  position: absolute;
  top: var(--top);
  left: calc(var(--left) + 7px);
}
@media screen and (min-width: 768px) {
  .p-product_item_image::before {
    width: var(--width);
    height: 1px;
    top: calc(var(--top) + 7px);
  }
}

.p-product_item_motor {
  max-width: 400px;
}

/* ==========================================================================//
//
//　Industrial
//
// ========================================================================== */
@media screen and (min-width: 768px) {
  .p-industrial_item {
    display: grid;
    grid-template-columns: 36% 28% auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.p-industrial_item.item_01 {
  --top: 47%;
  --left: 43%;
  --height: 58%;
}
@media screen and (min-width: 768px) {
  .p-industrial_item.item_01 {
    --width: 65%;
  }
}
.p-industrial_item.item_02 {
  --top: 37%;
  --left: 70%;
  --height: 85%;
}
@media screen and (min-width: 768px) {
  .p-industrial_item.item_02 {
    --width: 47%;
  }
}
.p-industrial_item.item_03 {
  --top: 53%;
  --left: 38%;
  --height: 55%;
}
@media screen and (min-width: 768px) {
  .p-industrial_item.item_03 {
    --width: 72%;
  }
}
.p-industrial_item.item_04 {
  --top: 53%;
  --left: 65%;
  --height: 55%;
}
@media screen and (min-width: 768px) {
  .p-industrial_item.item_04 {
    --width: 58%;
  }
}

/* ==========================================================================//
//
//　CV
//
// ========================================================================== */
@media screen and (min-width: 768px) {
  .p-cv_item {
    display: grid;
    grid-template-columns: 36% 28% auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.p-cv_item.item_01 {
  --top: 63%;
  --left: 40%;
  --height: 68%;
}
@media screen and (min-width: 768px) {
  .p-cv_item.item_01 {
    --width: 75%;
  }
}
.p-cv_item.item_02 {
  --top: 25%;
  --left: 37%;
  --height: 88%;
}
@media screen and (min-width: 768px) {
  .p-cv_item.item_02 {
    --width: 84%;
  }
}
@media screen and (min-width: 768px) {
  .p-cv_item.item_02 .p-product_item_image::before {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
}

/* ==========================================================================//
//
//　Automotive
//
// ========================================================================== */
.p-automotive_image {
  max-width: 900px;
}
.p-automotive_image .label_E, .p-automotive_image .label_D, .p-automotive_image .label_C, .p-automotive_image .label_B, .p-automotive_image .label_A {
  font-size: clamp(0.69rem, 0.535rem + 0.78vw, 1rem);
  color: #fff;
  line-height: 0;
  border: 2px solid #fff;
}
@media screen and (min-width: 960px) {
  .p-automotive_image .label_E, .p-automotive_image .label_D, .p-automotive_image .label_C, .p-automotive_image .label_B, .p-automotive_image .label_A {
    font-size: var(--font18);
  }
}
.p-automotive_image .label_A {
  --color-label: var(--color-sub);
  top: 57%;
  left: 66%;
}
.p-automotive_image .label_B {
  --color-label: #E4410E;
  top: 42%;
  left: 63%;
}
.p-automotive_image .label_C {
  --color-label: var(--color-main);
  top: 53%;
  left: 53%;
}
.p-automotive_image .label_D {
  --color-label: #DE9B00;
  top: 39%;
  left: 32%;
}
.p-automotive_image .label_E {
  --color-label: #00A146;
  top: 50%;
  left: 69%;
}

@media screen and (min-width: 768px) {
  .p-automotive_list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 3em;
  }
}
@media screen and (min-width: 960px) {
  .p-automotive_list {
    grid-template-columns: repeat(3, auto);
  }
}
.p-automotive_list .label_A {
  --color-label: var(--color-sub);
  color: #fff;
}
.p-automotive_list .label_B {
  --color-label: #E4410E;
  color: #fff;
}
.p-automotive_list .label_C {
  --color-label: var(--color-main);
  color: #fff;
}
.p-automotive_list .label_D {
  --color-label: #DE9B00;
  color: #fff;
}
.p-automotive_list .label_E {
  --color-label: #00A146;
  color: #fff;
}
.p-automotive_list .smaller {
  font-size: 85%;
}