@charset "UTF-8";
:root{
  --scale: 1;
  --px: 1px;
  --rem: 1rem;
  --font_color: #333;
  --black: #000;
  --main-red:#DC001C;
  --point-red:#FBE1E4;
  --sub-red:#9A0013;
  --path-red:#6c0713;
  --gray1: #D3D3D3;
  --gray2: #939393;
  --gray3: #FAFAFA;
  --gray4: #6E6E6E;
  --gray5: #D9D9D9;
  --gray6: #CCCCCC;

 	--100vw: 100vw;
	--1rem: 1rem;
	/* --px: calc(1px * var(--scale));
	--rem: calc(1rem * var(--scale)); */
	--scale: max(1, var(--window-width) / 1440);
  --window-width: calc(tan(atan2(var(--100vw), 1px)) * min(1, 16 / tan(atan2(var(--1rem), 1px))));
  --space-side: calc(100vw * var(--my-side-margin) / var(--my-width));
  --space-slim-side: calc(100vw * var(--my-side-margin2) / var(--my-width));
  --my-width: 390;
  --my-side-margin: 16;
  --my-side-margin2: 38;
  --my-gutter: 16;
  --my-grid-number: 4;

  --vw-min: 365;
  --vw-max: 1440;

  --fs-sp: 14;
  --fs-pc: 15;
  --fs-pc-sub: 18;
  --fs-sp-h2: 44;
  --fs-pc-h2: 58;

  --fs-fluid: calc(
    (var(--fs-sp) * 1px) +
    (var(--fs-pc) - var(--fs-sp)) * 1px *
    (var(--window-width) - var(--vw-min)) /
    (var(--vw-max) - var(--vw-min))
     );

  --fs-fluid-sub: calc(
    (var(--fs-sp) * 1px) +
    (var(--fs-pc-sub) - var(--fs-sp)) * 1px *
    (var(--window-width) - var(--vw-min)) /
    (var(--vw-max) - var(--vw-min))
  );
    --fs-fluid-h2: calc(
    (var(--fs-sp-h2) * 1px) +
    (var(--fs-pc-h2) - var(--fs-sp-h2)) * 1px *
    (var(--window-width) - var(--vw-min)) /
    (var(--vw-max) - var(--vw-min))
  );
  --px: clamp(1px, calc(100vw / 1440), 1.3px);
  --rem: clamp(1rem, calc(100vw / 1440 * 1rem), 1.3rem);
}
@supports (width: tan(1deg)) {
  :root{
    --100vw: 100vw;
    --1rem: 1rem;
    --window-width: calc(
      tan(atan2(var(--100vw), 1px)) * min(1, 16 / tan(atan2(var(--1rem), 1px)))
    );
    --scale: max(1, var(--window-width) / 1440);
    /* --px: calc(1px * var(--scale));
    --rem: calc(1rem * var(--scale)); */
  }
}

@media screen and (min-width: 768px){
    :root {
        --my-width: 1440;
        --my-side-margin: 46;
        --my-gutter: 20;
        --my-grid-number: 12;
    }
}


/* =====================================================
  1.0 - Foundation
===================================================== */
.upper {
  text-transform: uppercase;
}

.cap {
  text-transform: capitalize;
}

/*
  Reset
-----------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  opacity: 0;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

#wpadminbar{
  /* display: none; */
  position: fixed;
}

/*
  Base
-----------------------------------------------------*/
*,
:before,
:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  color: var(--font_color);
  text-rendering: optimizeLegibility;
  font: 1em/2 "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
  position: relative;
  padding-top: calc(100 * var(--px));
}

body.home{
  padding-top: calc(38 * var(--px));
}
@media screen and (min-width: 768px) {
  body {
    padding-top: calc(200 * var(--px));
  }
}
body.is-drawerActive {
  overflow: hidden;
}

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

a {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  color: inherit;
}

.en-font {
  font-family:"Noto Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  line-height: 1.5;
}

.en-font-head {
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  line-height: 1.5;
}

.white {
  background-color: #fff;
}

.opacity a{
  transition: .3s ease-in-out;
}
.opacity a:hover {
  filter: brightness(1.30);
}

.cursor {
  cursor: pointer;
}

.bg-black{
  background-color: var(--black);
  color: #fff;

}

/*
 Settings
--------------------------------- */
/*
  Base
--------------------------------- */
/*
  <div class="flex">
    <div class="flex__item">A</div>
    <div class="flex__item">B</div>
    <div class="flex__item">C</div>
  </div>
*/
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.flex__item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
}

/*
  Direction
--------------------------------- */
/*
  <div class="flex" data-dir="reverse">
    <div class="flex__item">A</div>
    <div class="flex__item">B</div>
    <div class="flex__item">C</div>
  </div>
*/
.flex[data-dir=normal] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.flex[data-dir=reverse] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

/*
  Alignment
--------------------------------- */
/*
  <div class="flex" data-align="center">
    <div class="flex__item">A</div>
    <div class="flex__item">B</div>
    <div class="flex__item" data-align="end middle">C</div>
  </div>
*/
.flex[data-align~=start] {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.flex[data-align~=center] {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.flex[data-align~=end] {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.flex[data-align~=justify] {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.flex[data-align~=top] {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.flex[data-align~=middle] {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex[data-align~=bottom] {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.flex[data-align~=baseline] {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.flex__item[data-align~=start] {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.flex__item[data-align~=center] {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex__item[data-align~=end] {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.flex__item[data-align~=top] {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
.flex__item[data-align~=middle] {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
.flex__item[data-align~=bottom] {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

/*
  Grid
--------------------------------- */
/*
  <div class="flex" data-gutter="normal">
    <div class="flex__item" data-grid="sp12 tab4 lap6">A</div>
    <div class="flex__item" data-grid="sp6 tab4 lap3">B</div>
    <div class="flex__item" data-grid="sp6 tab4 lap3">C</div>
  </div>
*/
.flex[data-gutter] {
  width: auto;
}
.flex[data-gutter] > .flex__item {
  border: solid transparent;
  background-clip: padding-box;
}
.flex[data-gutter=small] {
  margin: -1.25vw;
}
.flex[data-gutter=small] > .flex__item {
  border-width: 1.25vw;
}
.flex[data-gutter=normal] {
  margin: -2.5vw;
}
.flex[data-gutter=normal] > .flex__item {
  border-width: 2.5vw;
}
.flex[data-gutter=large] {
  margin: -3.75vw;
}
.flex[data-gutter=large] > .flex__item {
  border-width: 3.75vw;
}
.flex__item[data-grid~=sp1] {
  width: 8.3333333333%;
}
.flex__item[data-grid~=sp2] {
  width: 16.6666666667%;
}
.flex__item[data-grid~=sp3] {
  width: 25%;
}
.flex__item[data-grid~=sp4] {
  width: 33.3333333333%;
}
.flex__item[data-grid~=sp5] {
  width: 41.6666666667%;
}
.flex__item[data-grid~=sp6] {
  width: 50%;
}
.flex__item[data-grid~=sp7] {
  width: 58.3333333333%;
}
.flex__item[data-grid~=sp8] {
  width: 66.6666666667%;
}
.flex__item[data-grid~=sp9] {
  width: 75%;
}
.flex__item[data-grid~=sp10] {
  width: 83.3333333333%;
}
.flex__item[data-grid~=sp11] {
  width: 91.6666666667%;
}
.flex__item[data-grid~=sp12] {
  width: 100%;
}
.flex__item[data-grid~=spFive] {
  width: 20%;
}

@media screen and (min-width: 375px) {
  .flex__item[data-grid~=se1] {
    width: 8.3333333333%;
  }
  .flex__item[data-grid~=se2] {
    width: 16.6666666667%;
  }
  .flex__item[data-grid~=se3] {
    width: 25%;
  }
  .flex__item[data-grid~=se4] {
    width: 33.3333333333%;
  }
  .flex__item[data-grid~=se5] {
    width: 41.6666666667%;
  }
  .flex__item[data-grid~=se6] {
    width: 50%;
  }
  .flex__item[data-grid~=se7] {
    width: 58.3333333333%;
  }
  .flex__item[data-grid~=se8] {
    width: 66.6666666667%;
  }
  .flex__item[data-grid~=se9] {
    width: 75%;
  }
  .flex__item[data-grid~=se10] {
    width: 83.3333333333%;
  }
  .flex__item[data-grid~=se11] {
    width: 91.6666666667%;
  }
  .flex__item[data-grid~=se12] {
    width: 100%;
  }
  .flex__item[data-grid~=seFive] {
    width: 20%;
  }
  .flex__item[data-grid~=seAuto] {
    width: auto;
  }
}
@media screen and (min-width: 480px) {
  .flex__item[data-grid~=sp1] {
    width: 8.3333333333%;
  }
  .flex__item[data-grid~=sp2] {
    width: 16.6666666667%;
  }
  .flex__item[data-grid~=sp3] {
    width: 25%;
  }
  .flex__item[data-grid~=sp4] {
    width: 33.3333333333%;
  }
  .flex__item[data-grid~=sp5] {
    width: 41.6666666667%;
  }
  .flex__item[data-grid~=sp6] {
    width: 50%;
  }
  .flex__item[data-grid~=sp7] {
    width: 58.3333333333%;
  }
  .flex__item[data-grid~=sp8] {
    width: 66.6666666667%;
  }
  .flex__item[data-grid~=sp9] {
    width: 75%;
  }
  .flex__item[data-grid~=sp10] {
    width: 83.3333333333%;
  }
  .flex__item[data-grid~=sp11] {
    width: 91.6666666667%;
  }
  .flex__item[data-grid~=sp12] {
    width: 100%;
  }
  .flex__item[data-grid~=spFive] {
    width: 20%;
  }
  .flex__item[data-grid~=spAuto] {
    width: auto;
  }
}
@media screen and (min-width: 768px) {
  .flex[data-gutter=small] {
    margin: -0.5vw;
  }
  .flex[data-gutter=small] > .flex__item {
    border-width: 0.5vw;
  }
  .flex[data-gutter=normal] {
    margin: -1vw;
  }
  .flex[data-gutter=normal] > .flex__item {
    border-width: 1vw;
  }
  .flex[data-gutter=large] {
    margin: -1.5vw;
  }
  .flex[data-gutter=large] > .flex__item {
    border-width: 1.5vw;
  }
  .flex__item[data-grid~=tab1] {
    width: 8.3333333333%;
  }
  .flex__item[data-grid~=tab2] {
    width: 16.6666666667%;
  }
  .flex__item[data-grid~=tab3] {
    width: 25%;
  }
  .flex__item[data-grid~=tab4] {
    width: 33.3333333333%;
  }
  .flex__item[data-grid~=tab5] {
    width: 41.6666666667%;
  }
  .flex__item[data-grid~=tab6] {
    width: 50%;
  }
  .flex__item[data-grid~=tab7] {
    width: 58.3333333333%;
  }
  .flex__item[data-grid~=tab8] {
    width: 66.6666666667%;
  }
  .flex__item[data-grid~=tab9] {
    width: 75%;
  }
  .flex__item[data-grid~=tab10] {
    width: 83.3333333333%;
  }
  .flex__item[data-grid~=tab11] {
    width: 91.6666666667%;
  }
  .flex__item[data-grid~=tab12] {
    width: 100%;
  }
  .flex__item[data-grid~=tabFive] {
    width: 20%;
  }
  .flex__item[data-grid~=tabAuto] {
    width: auto;
  }
}
@media screen and (min-width: 1024px) {
  .flex__item[data-grid~=lap1] {
    width: 8.3333333333%;
  }
  .flex__item[data-grid~=lap2] {
    width: 16.6666666667%;
  }
  .flex__item[data-grid~=lap3] {
    width: 25%;
  }
  .flex__item[data-grid~=lap4] {
    width: 33.3333333333%;
  }
  .flex__item[data-grid~=lap5] {
    width: 41.6666666667%;
  }
  .flex__item[data-grid~=lap6] {
    width: 50%;
  }
  .flex__item[data-grid~=lap7] {
    width: 58.3333333333%;
  }
  .flex__item[data-grid~=lap8] {
    width: 66.6666666667%;
  }
  .flex__item[data-grid~=lap9] {
    width: 75%;
  }
  .flex__item[data-grid~=lap10] {
    width: 83.3333333333%;
  }
  .flex__item[data-grid~=lap11] {
    width: 91.6666666667%;
  }
  .flex__item[data-grid~=lap12] {
    width: 100%;
  }
  .flex__item[data-grid~=lapFive] {
    width: 20%;
  }
  .flex__item[data-grid~=lapAuto] {
    width: auto;
  }
}
@media screen and (min-width: 1200px) {
  .flex__item[data-grid~=desk1] {
    width: 8.3333333333%;
  }
  .flex__item[data-grid~=desk2] {
    width: 16.6666666667%;
  }
  .flex__item[data-grid~=desk3] {
    width: 25%;
  }
  .flex__item[data-grid~=desk4] {
    width: 33.3333333333%;
  }
  .flex__item[data-grid~=desk5] {
    width: 41.6666666667%;
  }
  .flex__item[data-grid~=desk6] {
    width: 50%;
  }
  .flex__item[data-grid~=desk7] {
    width: 58.3333333333%;
  }
  .flex__item[data-grid~=desk8] {
    width: 66.6666666667%;
  }
  .flex__item[data-grid~=desk9] {
    width: 75%;
  }
  .flex__item[data-grid~=desk10] {
    width: 83.3333333333%;
  }
  .flex__item[data-grid~=desk11] {
    width: 91.6666666667%;
  }
  .flex__item[data-grid~=desk12] {
    width: 100%;
  }
  .flex__item[data-grid~=deskFive] {
    width: 20%;
  }
  .flex__item[data-grid~=deskAuto] {
    width: auto;
  }
}
@media screen and (min-width: 1024px) {
  .flex__item[data-grid~=vr1] {
    width: 8.3333333333%;
  }
  .flex__item[data-grid~=vr2] {
    width: 16.6666666667%;
  }
  .flex__item[data-grid~=vr3] {
    width: 25%;
  }
  .flex__item[data-grid~=vr4] {
    width: 33.3333333333%;
  }
  .flex__item[data-grid~=vr5] {
    width: 41.6666666667%;
  }
  .flex__item[data-grid~=vr6] {
    width: 50%;
  }
  .flex__item[data-grid~=vr7] {
    width: 58.3333333333%;
  }
  .flex__item[data-grid~=vr8] {
    width: 66.6666666667%;
  }
  .flex__item[data-grid~=vr9] {
    width: 75%;
  }
  .flex__item[data-grid~=vr10] {
    width: 83.3333333333%;
  }
  .flex__item[data-grid~=vr11] {
    width: 91.6666666667%;
  }
  .flex__item[data-grid~=vr12] {
    width: 100%;
  }
  .flex__item[data-grid~=vrFive] {
    width: 20%;
  }
  .flex__item[data-grid~=vrAuto] {
    width: auto;
  }
}
@media screen and (min-width: 2000px) {
  .flex__item[data-grid~=wide1] {
    width: 8.3333333333%;
  }
  .flex__item[data-grid~=wide2] {
    width: 16.6666666667%;
  }
  .flex__item[data-grid~=wide3] {
    width: 25%;
  }
  .flex__item[data-grid~=wide4] {
    width: 33.3333333333%;
  }
  .flex__item[data-grid~=wide5] {
    width: 41.6666666667%;
  }
  .flex__item[data-grid~=wide6] {
    width: 50%;
  }
  .flex__item[data-grid~=wide7] {
    width: 58.3333333333%;
  }
  .flex__item[data-grid~=wide8] {
    width: 66.6666666667%;
  }
  .flex__item[data-grid~=wide9] {
    width: 75%;
  }
  .flex__item[data-grid~=wide10] {
    width: 83.3333333333%;
  }
  .flex__item[data-grid~=wide11] {
    width: 91.6666666667%;
  }
  .flex__item[data-grid~=wide12] {
    width: 100%;
  }
  .flex__item[data-grid~=wideFive] {
    width: 20%;
  }
  .flex__item[data-grid~=wideAuto] {
    width: auto;
  }
}
@media screen and (min-width: 768px) {
  .align_center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.space-evenly {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

/* =====================================================
  2.0 - Layout
===================================================== */
/*
  Centering
-----------------------------------------------------*/
.wrap {
  padding-inline: var(--space-side);
}

.l-footer-temp_inner .wrap{
   padding-inline: var(--space-slim-side);
   position: relative;
}
@media screen and (min-width: 768px) {
  .wrap.w_120{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 0;
  }
    .wrap.w_100{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding-inline: 0;
  }
    .wrap.w_90{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding-inline: 0;
  }
}

.c-wrap{
  width: 90%;
  margin: auto;
  max-width: 800px;
}


/*
  Header
-----------------------------------------------------*/
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

  .admin-bar .l-header {
    top: 42px;
  }
@media screen and (min-width: 768px) {
  .admin-bar .l-header {
    top: 2em;
  }
}

/*
  Contents
-----------------------------------------------------*/
.l-contents {
  clear: both;
  padding: calc(100 * var(--px)) 0;
  overflow: hidden;
}

.l-contents.__bottom{
   padding-top:0;
}

.l-contents.__ss{
  padding-top: calc(80 * var(--px)) ;
}

.top_about.l-contents{
  padding: calc(195 * var(--px)) 0 calc(100 * var(--px));
}

.wrap.products-wrap{
  overflow: hidden;
}

.l-contents.products_flex{
  overflow: unset;
}

.l-contents.top_line-up{
  padding-block: calc(90 * var(--px));
  margin-bottom: calc(90 * var(--px));
}
@media screen and (min-width: 768px){
  .l-contents{
    padding: calc(200 * var(--px)) 0;
  }
  .l-contents.__ss{
    padding: calc(100 * var(--px)) 0 calc(120 * var(--px));
  }
  .l-contents.__120 {
    padding-block: calc(120 * var(--px));
  }
  .top_about.l-contents{
    padding-block: calc(190 * var(--px));
  }
  .l-contents.top_line-up{
    padding-block: calc(100 * var(--px));
  }
}

/*
  Main
-----------------------------------------------------*/
.l-main {
  clear: both;
  position: relative;
}

@media screen and (min-width: 768px) {
  .l-main.-single {
    width: auto;
    float: none;
  }
}
/*
  fade animation
*/
.Scroll-Fade {
  /* opacity: 0; */
}

.isActive {
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-name: fadeUp;
          animation-name: fadeUp;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.is-fade-image {
  opacity: 0;
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.is-fade-image.isFade {
  opacity: 1;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

/*
  front page
-----------------------------------------------------*/
.swiper_new-item{
  position: relative;
  padding-bottom: calc(80 * var(--px));
  padding-left: var(--space-side);
}
.top_new-items .swiper-button-prev,
.top_new-items .swiper-button-next{
  top: auto;
  bottom: 0;
  transform: none;
  width: 17px;
  height: 30px;
  color: #fff;
}
.top_new-items .swiper-button-prev{
  left: var(--space-side);
}
.top_new-items .swiper-button-next{
    left: 100px;
}
.top_new-items .swiper-button-next:after,
.top_new-items .swiper-button-prev:after{
    font-size: 30px;
}

@media screen and (min-width: 768px){
  .top_new-items .swiper-button-next{
    left: 140px;
  }
}

.top_about{
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.5) 29%, rgba(0, 0, 0, 0.8) 35%, #000 40%), url(../images/t-about_sp.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}
.top_about_tex{
  font-size: calc(14px + (20 - 14) * (100vw - 365px) / (1440 - 365));
}

@media screen and (min-width: 768px){
  .top_about{
    background: url(../images/t-about.jpg) ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

  }
  .top_about_inner{
    display: flex;
    text-align: left;
  }
  .top_about_inner_left{
    width: 50%;
  }
}

.top_news{
  background-color: #fff;
  color: var(--font_color);
}

.top_line-up .line-up__list{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.top_line-up .line-up__link{
  padding: calc(40 * var(--px)) 0 calc(30 * var(--px));
  background-color: #fff;
  border-top: 1px solid var(--gray1);
  display: block;
  text-align: center;
  position: relative;
  color: var(--font_color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top_line-up .line-up__link::before{
  content: "";
  background-color: var(--main-red);
  width: 20px;
  height: 3px;
  position: absolute;
  top: -1px;
  left: 10px;
}

.top_line-up .line-up__item:nth-child(even) .line-up__link {
  border-left: 1px solid var(--gray1);
}

.top_line-up .line-up__link .en_name{
  color: var(--font_color);
  font-weight: 700;
  font-size: clamp(15.6px, calc(15.6px + (26 - 15.6) * (100vw - 365px) / (1440 - 365)), 26px);
}

.top_line-up .line-up__link .jp_name{
  color: var(--gray2);
  font-size: clamp(11.2px, calc(11.2px + (16 - 11.2) * (100vw - 365px) / (1440 - 365)), 16px);
}

@media screen and (min-width: 768px){
  .top_line-up .line-up__list{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .top_line-up .line-up__item:nth-child(even) .line-up__link {
  border-left: none;
  }
  .top_line-up .line-up__item:not(:nth-child(1)):not(:nth-child(4)) .line-up__link {
     border-left: 1px solid var(--gray1);
  }

  .top_line-up .line-up__link .line-up__img{
    overflow: hidden;
  }
  .top_line-up .line-up__link .line-up__img img{
    transition: transform .6s cubic-bezier(.4, 0, 0, 1);
  }
  .top_line-up .line-up__link:hover .line-up__img img{
    transform: scale(1.1);
  }
  .top_line-up .line-up__link::before{
    width: 40px;
    left: 30px;
  }
}


/*
  footer-template
-----------------------------------------------------*/
.l-footer-temp{
  display: grid;
  grid-template-columns: 1fr;
  color: #fff;
}

.l-footer-temp_inner{
  border-top: 1px solid #fff;
  padding:calc(40 * var(--px)) 0 calc(50 * var(--px)) ;
  position: relative;
}

.l-footer-temp_inner.__contact{
  background-color: var(--black);
}

.l-footer-temp_inner.__download{
  background-color: var(--font_color);
}

.l-footer-temp_grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(30 * var(--px));
}

.l-footer-temp_head{
  font-weight: 700;
  letter-spacing: .25px;
}

.l-footer-temp_head .en_tit{
  display: block;
  font-size: calc(58px * (0.7 + 0.3 * (var(--window-width) - 365) / (1440 - 365)));
}

.l-footer-temp_head .jp_tit{
  font-size: calc(15 * var(--px));
  display: block;
}

.l-footer-temp .tex{
  font-size: calc(14 * var(--px));
}

@media screen and (min-width: 768px) {
  .l-footer-temp{
  grid-template-columns: 1fr 1fr;
  }
  .l-footer-temp .tex{
    font-size: calc(15 * var(--px));
  }
  .l-footer-temp_grid{
    gap: calc(40 * var(--px))
  }
  .l-footer-temp_head .en_tit,
  .l-footer-temp_head .jp_tit,
  .l-footer-temp .tex{
    text-align: center;
  }
  .l-footer-temp_inner.__download{
    border-left: 1px solid #fff;
  }
}
/*
  Footer
-----------------------------------------------------*/
.l-footer {
  clear: both;
  background-color: #fff;
  padding-block:calc(90 * var(--px)) ;
}

.l-footer_logo{
  margin-bottom: calc(80 * var(--px));
}

.l-footer_logo_link{
  display: inline-block;

}

.l-footer .l-footer_nav_link{
  color: var(--font_color);
  font-size: calc(15 * var(--px));
  padding-block: calc(20 * var(--px));
  border-top: 1px solid var(--gray1);
  display: block;
  font-weight: 500;
}

.l-footer_right{
  padding-bottom: calc(54 * var(--px));
}

.l-footer_nav_list{
  padding-top: calc(45 * var(--px));
}

.l-footer_nav_sub{
  margin:  0 0 calc(30 * var(--px)) calc(8 * var(--px));
  color: var(--gray2);
  font-size: calc(14 * var(--px));
}
.l-footer_nav_sub_link{
  margin-bottom: calc(10 * var(--px));
}

.l-footer-privacy{
  color: var(--gray2);
  font-size: calc(11 * var(--px));
  margin-bottom: calc(10 * var(--px));
  position: relative;
  background: linear-gradient(var(--font_color), var(--font_color)) 0 100% / 0 1px no-repeat;
  transition: background .6s cubic-bezier(.4, 0, 0, 1);
  display: inline-block;
}



.l-footer-copy{
  color: var(--gray2);
  font-size: calc(10 * var(--px));
}
@media screen and (min-width: 768px) {
  .l-footer-flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    justify-content: space-between;
  }
  .l-footer_logo_link img{
    width: 423.38px;
  }

  .l-footer .l-footer_nav_link{
    border-top: none;
    padding: 0;
    margin-bottom: calc(20 * var(--px));
    color: var(--gray4)
  }

  .l-footer .l-footer_nav_link,
  .l-footer_nav_sub_link{
    position: relative;
    background: linear-gradient(var(--font_color), var(--font_color)) 0 100% / 0 1px no-repeat;
    transition: background .6s cubic-bezier(.4, 0, 0, 1);
    display: inline-block;
  }

  .l-footer .l-footer_nav_link:hover,
  .l-footer_nav_sub_link:hover{
    background-size: 100% 1px;
    color: var(--font_color);
  }

  .l-footer_right{
    display: flex;
    gap:calc(50 * var(--px));
  }
  .l-footer_nav_list{
    padding-top: 0;
    margin-right: calc(42 * var(--px));
  }

  .l-footer_nav_sub_link{
    font-weight: 400;
  }

  .l-footer_right{
    padding-bottom: calc(100 * var(--px));
  }

  .l-footer-bottom{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    justify-content: space-between;
  }

  .l-footer-copy,
  .l-footer-privacy{
    font-size: calc(12 * var(--px));
    color: var(--gray4);
  }

  .l-footer-privacy:hover{
    background-size: 100% 1px;
    color: var(--font_color);
  }

}

/*
  about-page
-----------------------------------------------------*/
.area_about .area_about_tit{
  font-weight: 700;
  font-size: clamp( 20.8px,  calc( 20.8px + (26 - 20.8) * (100vw - 365px) / (1440 - 365) ), 26px);
  padding: calc(60 * var(--px)) 0 calc(30 * var(--px));
}

.area_about_img img{
  width: 100%;
}

.area_about_tex{
padding-top: calc(60 * var(--px));
 font-size: var(--fs-fluid-sub);
}

.area_about_tex .par{
  padding-bottom: 1em;
}

.area_about_tex .par:last-of-type{
  padding-bottom: 0;
}

.area_company{
  padding: calc(50 * var(--px)) 0 calc(120 * var(--px));
  overflow: hidden;
}

.area_company__body{
  background-color: #fff;
  color: var(--font_color);
  position: relative;
}

.area_company__body:before{
  content: "";
  background: #fff;
  width: 120%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.area_company_item{
  border-bottom: 1px solid var(--gray1);
  padding-bottom: calc(30 * var(--px));
  margin-bottom: calc(30 * var(--px));
  position: relative;
}

.area_company_item:last-of-type{
  margin-bottom: 0;
}

.area_company_item:before{
  content: "";
  width: 65px;
  height: 1px;
  background-color: var(--main-red);
  position: absolute;
  bottom: -1px;
  left: 0;
}

.area_company_dt{
  font-size: var(--fs-fluid);
  font-weight: 700;
}

@media screen and (min-width: 768px){
  .area_about .area_about_tit{
    padding-top: calc(75 * var(--px));
  }
  .area_company_item:before{
    width: 25%;

  }
  .area_company_item{
    display: grid;
    grid-template-columns: 25% 1fr;
  }
}


.area_faq{
  background-color: var(--font_color);
  color: var(--font_color);
}


.area_faq_item{
  background-color: #fff;
  margin-top: 4px;
  padding-block: calc(40 * var(--px));
}

.area_faq_item:first-of-type{
  margin-top: 0;
}

.area_faq_inner{
  width: 87%;
  margin: 0 auto;
  display: grid;
  gap: calc(20 * var(--px));
}

.faq_a{
  padding-top: calc(20 * var(--px));
}

.area_faq_inner .__item{
  font-size: var(--fs-fluid);
  position: relative;
  line-height: 1.5;
  /* min-height: 40px; */
  font-weight: 700;
  /* padding-bottom: calc(20 * var(--px)); */
  display: flex;
  align-items: center;
  gap: 10px;
}
.area_faq_inner .__mark{
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: #fff;
  background-color: var(--main-red);
  text-align: center;
  line-height: 40px;
}

.faq_q_tex .q{
  background-color: var(--main-red);
}

.faq_a_tex .answer{
  background-color: var(--point-red);
  color: var(--main-red);
}

.answer_text{
  flex-basis: calc(100% - 40px);
}

.area_faq_inner .__item.faq_a_tex{
  align-items: flex-start;
}

/* .area_faq_inner .__item:before{
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  font-weight: 400;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
.faq_q_tex:before{
  color: #fff;
  background-color: var(--main-red);
  content: "Q";
}
.faq_a_tex:before{
  color: var(--main-red);
  background-color: var(--point-red);
  content: "A";
} */
@media screen and (min-width: 768px){
  .faq_a_tex{
    font-size: calc(14 * var(--px));
  }
  .area_faq_inner .__item{
    gap: 20px;
  }
  .area_faq_inner .__mark{
    width: 52px;
    height: 52px;
    line-height: 52px;
  }
  .area_faq_inner .__item:before{
    font-size: 40px;
  }
  .area_faq_inner .__item:before{
    width: 52px;
    height: 52px;
    line-height: 52px;
  }
  .area_faq_inner .__item{
    /* padding-left: calc(82 * var(--px));
    min-height: 52px; */

  }
}





/*
  contact-page
-----------------------------------------------------*/
.p-contact .p-contact_intro{
  font-size: calc(15 * var(--px));
}

.p-contact_body{
  padding-top: calc(50 * var(--px));
  text-align: left;
}

.form__inner tr{
  display: flex;
  padding-top: calc(40 * var(--px));
  justify-content: space-between;
  flex-direction: column;
  gap: 10px;
}

.form__inner th{
  font-weight: 700;
}

.form__inner td{
  width: 100%;
  display: block;
}

.page-contact table{
  width: 100%;
}

.form__inner input[type="text"],
.form__inner input[type="password"],
.form__inner input[type="email"],
.form__inner input[type="tel"],
.form__inner input[type="search"],
.form__inner input[type="url"],
.form__inner input[type="date"],
.form__inner select,
.form__inner textarea {
  width: 100%;
  padding: calc(13 * var(--px)) calc(20 * var(--px));
  color: var(--font_color);
  border: none;
  line-height: 24px;
}

.wpcf7-list-item{
  margin: 0;
}

.form__inner .wpcf7-radio{
  display: flex;
  flex-direction: column;
}

.agreement{
  font-size: calc(12 * var(--px));
  padding-top: calc(58 * var(--px));
}

.req{
  color: var(--main-red);
}

@media screen and (min-width: 768px){
  .p-contact .p-contact_intro{
    text-align: center;
  }
  .p-contact_body{
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
  }
  .form__inner tr{
    flex-direction: row;
  }
  .form__inner td{
    width: 70%;
  }
  .form__inner .wpcf7-radio{
    flex-direction: row;
    gap: 20px;
  }
  .agreement{
    text-align: center;
  }
}


/*
  thanks-page
-----------------------------------------------------*/
.page-thanks .page__body .__tex{
  text-align: center;
  font-size: calc(14 * var(--px));
}

@media screen and (min-width: 768px){
.page-thanks .page__body .__tex{
  font-size: calc(20 * var(--px));
}
}

/*
  404
-----------------------------------------------------*/
.page-not-found .page__body .__tex{
  text-align: center;
  font-size: calc(14 * var(--px));
}

.page-not-found .page__body .__tex.__space{
  padding-bottom: calc(20 * var(--px));
}

@media screen and (min-width: 768px){
.page-not-found .page__body .__tex{
  font-size: calc(20 * var(--px));
}
}
/*
 privacy-page
-----------------------------------------------------*/
.pp_read {
  padding-bottom: calc(60 * var(--px));
}
.pp_read .__text{
  font-size: var(--fs-fluid);
  padding-bottom: calc(10 * var(--px));
}

.pp_item{
  padding-top: calc(40 * var(--px));
}
.pp_item:first-child{
  padding-top: 0;
}

.pp_tit{
  font-size: calc( 19.2px + (24 - 19.2) * (100vw - 365px) / (1440 - 365));
  font-weight: 700;
  position: relative;
  padding-bottom: calc(10 * var(--px));
  margin-bottom: calc(10 * var(--px));
}

.pp_tit:before{
  content: "";
  width: 20px;
  height: 2px;
  background-color: var(--main-red);
  position: absolute;
  bottom: 0;
}

.pp_num{
  padding-right: 4%;
}

.pp_text .__text{
  font-size: var(--fs-fluid);
}

@media screen and (min-width: 768px){
  .pp_read {
    padding-bottom: calc(74 * var(--px));
  }
  .pp_read .__text{
    padding-bottom: 0;
  }
  .pp_item{
    padding-top: calc(50 * var(--px));
  }
  .pp_tit:before{
    width: 30px;
  }
}

/*
  p-project
-----------------------------------------------------*/
.p-project__title,
.p-article__title{
  font-weight: 700;
}
/*
  product single
-----------------------------------------------------*/

.s-products .p-article__title{
  font-size: clamp(30.8px, calc(30.8px + (44 - 30.8) * (100vw - 365px) / (1440 - 365)), 44px);
  text-align: center;
  color: var(--main-red);
}

.s-products .p-article__sub{
  text-align: center;
  font-weight: 700;
  padding-bottom: calc(40 * var(--px));
  font-size: clamp(14px, calc(14px + (24 - 14) * (100vw - 365px) / (1440 - 365)), 24px);
}

.p-article__tex_list{
  padding-top: calc(40 * var(--px));
}

.s-products .p-article__flex__left .main_slider .c-card__thumbnail{
  /* padding-block: calc(50 * var(--px)); */
  padding:calc(50 * var(--px)) 0 calc(20 * var(--px)) ;
}

.main_slider .swiper-slide.c-card__thumbnail{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.slider-thumbnail .swiper-slide.c-card__thumbnail{
  aspect-ratio: 1 / .8;
  overflow: hidden;
}

.main_slider .swiper-slide.c-card__thumbnail img,
.slider-thumbnail .swiper-slide.c-card__thumbnail img{
  width: 100%;
  /* height: 100%; */
  display: block;
  object-fit: cover;
  object-position: center;
}

/*  */
.p-article__tex_item{
  font-size: var(--fs-fluid);
  padding-bottom: 1%;
}

.s-products__btn-area{
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(40 * var(--px));
}

.s-products__acc{
  padding-top: calc(60 * var(--px));
}

.acc__tit{
  font-weight: 700;
  font-size: clamp(15px, calc(15px + (16 - 15) * (100vw - 365px) / (1440 - 365)), 16px);
  padding-bottom: calc(10 * var(--px));
  border-bottom: 1px solid var(--gray1);
  position: relative;
}

.acc__tit:before{
    position: absolute;
    top: 30%;
    right: 0;
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    content: "";
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 3px solid var(--font_color);
    border-right: 3px solid var(--font_color);
    z-index: 1;
}

.open.acc__tit:before{
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}


.acc__list{
  display: none;
  padding-top: calc(20 * var(--px));
  font-size: var(--fs-fluid)
}

.s-products__spec{
  padding: calc(40 * var(--px)) 0 calc(60 * var(--px));
}

.p-article__features_img{
  padding-top: calc(10 * var(--px));
}

.p-article__features_img:first-of-type{
  padding-top: 0;
}

.p-article__h2{
  background: linear-gradient(90deg, #DC001C 95%, rgba(220, 0, 28, 0) 100%);
  color: #fff;
  padding: calc(8 * var(--px)) calc(20 * var(--px));
  margin: calc(60 * var(--px)) 0 calc(20 * var(--px));
}

.p-article__h2 .en_tit{
  font-weight: 700;
  padding-right: calc(16 * var(--px));
  font-size: clamp(18.5px, calc(18.5px + (25 - 18.5) * (100vw - 365px) / (1440 - 365)), 25px);
}

.p-article__h2 .jp_tit{
  font-size: clamp(12px, calc(12px + (16 - 12) * (100vw - 365px) / (1440 - 365)), 16px);
  font-weight: 900;
}


.p-article__features_img img{
  width: 100%;
}

.s-products__img img{
  width: 100%;
}

@media screen and (min-width: 768px){
  .acc__tit,
  .slider-thumbnail .c-card__thumbnail{
    cursor: pointer;
  }
  .slider-thumbnail .c-card__thumbnail{
    padding: calc(16 * var(--px)) 0 0;
  }
}


/* スライダー */
.slider-thumbnail .swiper-slide {
  /* width: calc(100% / 3); */
}
.main_slider{
  margin-bottom: 18px;
  border: 1px solid var(--gray1);
  /* width: 100%; */
}
.swiper-slide img {
  width: 100%;
  /* height: auto;
  width: 100%; */
}

.slider-thumbnail .c-card__thumbnail{
  outline: 1px solid var(--gray1);
  outline-offset: -1px;
  padding: calc(16 * var(--px)) 0 calc(10 * var(--px));

}

.p-article__flex__left{
  width: 100%;
}




@media screen and (min-width: 768px){
  .p-article__tex_list{
    padding-top: 0;
  }
  .p-article__h2{
    margin-bottom: calc(40 * var(--px));
  }
  .p-article__flex{
    display: flex;
    gap: 80px;
    justify-content: space-between;
    padding-bottom: calc(90 * var(--px));
  }
  .p-article__flex__left{
    width: 47%;
  }
  .p-article__tex{
    width: 50%;
  }
  .s-products__btn-area{
    grid-template-columns: 1fr 1fr;
    padding-top: calc(40 * var(--px));
  }
}



/*
  product
-----------------------------------------------------*/
.c-grid__products .c-grid__link{
  display: block;
  border: 1px solid var(--gray5);
  padding-block: calc(20 * var(--px));
  background-color: #fff;
  color: var(--font_color);
}

.c-grid__products .c-card__body{
  display: grid;
  justify-items: center;
}
.c-grid__products .p-project__title{
  text-align: center;
  font-size: calc(16px + (18 - 16) * (100vw - 365px) / (1440 - 365));
}

.p-project__sub{
  padding-inline: 5%;
  text-align: center;
  font-size: calc(12px + (14 - 12) * (100vw - 365px) / (1440 - 365));
}


@media screen and (min-width: 768px){
  .c-grid__products .c-grid__link{
    padding-black: calc(30 * var(--px));
  }
  .c-grid__products .c-card__body .c-card__thumbnail{
    overflow: hidden;
  }

  .c-grid__products .c-card__body .c-card__thumbnail img{
    transition: transform .6s cubic-bezier(.4, 0, 0, 1);
  }

  .c-grid__products .c-grid__link:hover .c-card__thumbnail img{
    transform: scale(1.1);
  }
}
/*
  other series
-----------------------------------------------------*/
.p-other-series{
  border-top: 1px solid var(--main-red);
  padding-top: calc(40 * var(--px));
}

.p-other-series{
  padding-bottom: calc(120 * var(--px));
}

.series__list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--px)) calc(16 * var(--px));
  text-align: center;
}

.series__link{
  display: block;
  padding-bottom: calc(10 * var(--px));
}

.series__item{
  border: 1px solid var(--gray5);
  position: relative;
}

.series__item:before,
.series__item:after{
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
}

.series__item::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--main-red);
  border-left: 2px solid var(--main-red);
}

.series__item::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--main-red);
  border-right: 2px solid var(--main-red);
}

.series__item .en_name{
  font-weight: 700;
}

.series__item .jp_name{
  color: var(--gray2);
  font-size: calc(12px + (16 - 12) * (100vw - 365px) / (1440 - 365));
}

@media screen and (min-width: 768px){
  .archive-products .p-other-series{
    padding-bottom: calc(200 * var(--px));
  }
  .p-other-series{
    padding-top: calc(70 * var(--px));
  }
  .series__item .en_name{
    font-size: calc(20 * var(--px));
  }

  .p-other-series__inner{
    display: flex;
  }
  .p-other-series__left{
    width: 25.5%;
  }
  .series__list{
    grid-template-columns: 1fr 1fr 1fr;
    text-align: left;
    gap: calc(28 * var(--px)) calc(20 * var(--px));
  }
  .series__flex{
    display: flex;
            align-items: center;
  }

  .series__item::before,
  .series__item::after{
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
  }
  .series__left{
    width: 47.5%;
    overflow: hidden;
  }
  .series__link{
    padding-block: calc(20 * var(--px));
  }
  .series__link .series__left img{
    transition: transform .6s cubic-bezier(.4, 0, 0, 1);

  }
  .series__link:hover .series__left img{
     transform: scale(1.1);
  }


}




/*
  taxonomy_product
-----------------------------------------------------*/
.archive_products_body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(45 * var(--px)) calc(20 * var(--px));
}

@media screen and (min-width: 768px){
  .archive_products_body{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/*
  product archive
-----------------------------------------------------*/
.products-term-block{
  padding-bottom: calc(100 * var(--px));
}

.archive-products .archive_products_body{
  display: flex;
  flex-wrap:wrap;
  gap: clamp(12px, calc(24 * var(--px)), 24px);

}

.archive_products_body > * {
  box-sizing: border-box;
  flex: 0 0 calc((100% - clamp(12px, calc(24 * var(--px)), 24px)) / 2);
  min-width: 0;
}

/* 1枚目・2枚目だけ1カラム */
.archive_products_body > *:nth-child(-n+2) {
  flex-basis: 100%;
}


@media screen and (min-width: 768px){
  .products_flex{
    display: flex;
    gap: 40px;
    justify-content: space-between;
  }
  .products-term-block{
    padding-bottom: calc(200 * var(--px));
  }
  .archive-products .products_body{
    width: 82%;
    position: relative;
    background-color: var(--gray3);
    padding: calc(100 * var(--px)) calc(65 * var(--px)) 0 calc(112 * var(--px));
  }

    .archive-products .products_body:before{
      content: "";
      background-color: var(--gray3);
      width: 120%;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
  }

  .products_body_inner{
    position: relative;
  }

  .archive-products .archive_products_body > *{
  box-sizing: border-box;
  flex: 0 0 calc((100% - (clamp(12px, calc(24 * var(--px)), 24px) * 2)) / 3);
  min-width: 0;
  }

  .archive-products .archive_products_body > *:nth-child(-n+2){
    flex-basis: calc((100% - clamp(12px, calc(24 * var(--px)), 24px)) / 2);
  }

  .products-cat-item{
    padding-bottom: calc(50 * var(--px));
  }

  .products-cat-link .en_tit{
    font-size: calc(22 * var(--px));
    display: block;

  }
  .products-cat-link .jp_tit{
    color: var(--main-red);
  }
}
/*
  news
-----------------------------------------------------*/
.p-article__text {
  transition: .3s ease-in-out;
  font-size: clamp(13px , calc(13px + (16 - 13) * (100vw - 365px) / (1440 - 365)) , 16px);
}
.c-grid__item .c-grid__date,
.p-article .c-grid__date{
  gap: calc(40 * var(--px));
  align-items: center;
}

.p-article__text.__cat{
  padding: calc(5 * var(--px)) calc(20 * var(--px));
  background-color: var(--gray3);
}



.p-news .p-project__title{
  font-size: var(--fs-fluid);
  padding-top: calc(24 * var(--px));
  transition: .3s ease-in-out;
}
@media screen and (min-width: 768px) {
.p-news .p-project__title{
  padding-top: 0;

}
}

/*
  news archive
-----------------------------------------------------*/
.archive_news_body .c-grid__link{
  border-bottom: 1px solid var(--gray1);
  padding-block: calc(30 * var(--px));
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;

}

.archive_news_body .c-grid__item:first-of-type .c-grid__link{
  border-top: 1px solid var(--gray1);
}

@media screen and (min-width: 768px){
  .c-card__body{
    display: flex;
    /* gap: calc(20 * var(--px)); */
  }

  .archive_news_body .c-grid__link .c-card__body{
    position: relative;
    transition: .3s ease-in-out;
    gap: calc(20 * var(--px));
  }

  .archive_news_body .c-grid__link .c-card__body:before{
    content: "";
    width: 10px;
    height: 10px;
    /* background-color: var(--main-red); */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .archive_news_body .c-grid__link:hover .__time,
  .archive_news_body .c-grid__link:hover .p-project__title{
    color : var(--main-red);

  }
  .archive_news_body .c-grid__link:hover .p-article__text.__cat{
    background-color: var(--main-red);
    color: #fff;
  }
  .archive_news_body .c-grid__link:hover .c-card__body{
    /* transform: translateX(50px); */
    padding-left: 50px;
  }
  .archive_news_body .c-grid__link:hover  .c-card__body:before{
     background-color: var(--main-red);
  }

}


/*
  news single
-----------------------------------------------------*/
.s-news .p-article__title {
  font-size: clamp(14px , calc(14px + (36 - 14) * (100vw - 365px) / (1440 - 365)) , 36px);
  font-weight: 700;
  padding: calc(20 * var(--px)) 0 calc(30 * var(--px));
  border-bottom: 1px solid var(--gray1);
  margin-bottom: calc(30 * var(--px));
}
.s-news .p-article__eyecatch {
  margin-bottom: calc(40 * var(--px));
}


@media screen and (min-width: 768px) {
  .s-news .p-article__title  {
    padding: calc(40 * var(--px)) 0 calc(50 * var(--px));
    margin-bottom: calc(70 * var(--px));
  }
  .s-news .p-article__eyecatch {
    margin-bottom: calc(60 * var(--px));
  }
}

.p-article + .p-article {
  border-top: 1px solid #ddd;
}
.p-article__body {
  line-height: 2;
}
.p-article__body h1,
.p-article__body h2,
.p-article__body h3,
.p-article__body h4,
.p-article__body h5,
.p-article__body h6,
.p-article__body p,
.p-article__body blockquote,
.p-article__body pre,
.p-article__body ul,
.p-article__body ol,
.p-article__body table,
.p-article__body figure {
  margin: 1em 0;
}
@media screen and (min-width: 768px) {
  .p-article__body h1,
  .p-article__body h2,
  .p-article__body h3,
  .p-article__body h4,
  .p-article__body h5,
  .p-article__body h6,
  .p-article__body p,
  .p-article__body blockquote,
  .p-article__body pre,
  .p-article__body ul,
  .p-article__body ol,
  .p-article__body table,
  .p-article__body figure {
    margin: 1.5rem 0 1em;
  }
}
.p-article__body h1,
.p-article__body h2,
.p-article__body h3,
.p-article__body h4,
.p-article__body h5,
.p-article__body h6 {
  font-weight: bold;
}
.p-article__body h1 {
  font-size: 1.5em;
}
@media screen and (min-width: 768px) {
  .p-article__body h1 {
    font-size: 2em;
  }
}
.p-article__body h2 {
  font-size: 1.5em;
  padding: 0.25em 0;
}
@media screen and (min-width: 768px) {
  .p-article__body h2 {
    font-size: 1.75em;
  }
}
.p-article__body h3 {
  font-size: 1.25em;
  padding: 0.5em 1em;
}
@media screen and (min-width: 768px) {
  .p-article__body h3 {
    font-size: 1.5em;
  }
}
.p-article__body h4 {
  font-size: 1.125em;
  padding-left: 1em;
  border-left: 0.25rem solid #263238;
}
@media screen and (min-width: 768px) {
  .p-article__body h4 {
    font-size: 1.25em;
  }
}
.p-article__body h5 {
  font-size: 1em;
}
@media screen and (min-width: 768px) {
  .p-article__body h5 {
    font-size: 1.125em;
  }
}
.p-article__body blockquote {
  background-color: #eee;
  padding: 0.25em 1em;
  border-left: 0.25em solid #263238;
}
.p-article__body blockquote p {
  margin: 1em 0;
}
.p-article__body ul,
.p-article__body ol {
  padding-left: 1.25em;
}
.p-article__body ul {
  list-style-type: disc;
}
.p-article__body ol {
  list-style-type: decimal;
}
.p-article__body dl {
  margin: 1.5em 0 0;
  position: relative;
  z-index: 0;
}
.p-article__body dt {
  position: relative;
  font-weight: bold;
  margin: 0 0.5em;
  padding: 0 0.5em;
  background-color: #fff;
  display: inline-block;
  z-index: 1;
}
.p-article__body dd {
  position: relative;
  top: -1em;
  padding: 2em 1em 1em;
  border: 1px solid #263238;
}

.p-article__body a{
    text-decoration: underline;
    color: var(--main-red);
}

.p-article__body strong{
   font-weight: 700;
}
.p-article__footer {
  margin: 2rem 0;
}


@media screen and (min-width: 768px) {
  .p-article__footer {
    margin: 4rem 0;
  }
}
/* =====================================================
  3.0 - Object
===================================================== */
/*
  3.1 - Component
-----------------------------------------------------*/

/*
  Button
*/
.btn {
  padding-top: calc(60 * var(--px));
}

.l-footer-temp .btn{
  padding-top: 0;

}

.btn.__shop{
  padding-top: 0;

}
.top_line-up .btn{
  text-align: center;

}

.btn.__center,
.btn.__center_sp{
  text-align: center;

}


@media screen and (min-width: 768px) {
  .btn {
    padding-top: calc(80 * var(--px));
  }

  .btn.__contact{
    padding-top: 0;
  }
  .btn.__center_sp{
    text-align: left;
  }

  .btn.__center_pc{
    text-align: center;
  }
}



.c-button {
  color: #fff;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  font-size: calc(18 * var(--px));
  width: 270px;
  display: inline-block;
  text-align: center;
  position: relative;
  line-height: 54px;
}


.c-button.btn__arrow:before {
  content: "";
  background-image: url(../images/arrow_white.svg);
  position: absolute;
  top: 50%;
  right: 7%;
  transform: translateY(-50%);
  width: 17px;
  height: 27px;
  transition: all 0.3s ease 0s;
  background-repeat: unset;
}

.c-button.btn__arrow.__red:before {
  background-image: url(../images/arrow_red.svg);
}

.c-button.btn__arrow.__back:before{
    left: 7%;
    right: auto;
    transform: rotate(180deg) translateY(50%);

}


.s-products__btn .c-button{
  width: 100%;
}

.c-button.btn__red{
  background-color: var(--main-red);
}

.c-button.btn__white{
  border: 2px solid var(--main-red);
  color: var(--main-red);
  background: #fff;
}

.l-footer-temp .c-button{
  width: 100%;
}


@media screen and (min-width: 768px){
  .top_about .c-button.btn__center{
    margin: 0 0 0 auto
  }

  .c-button.btn__arrow:hover:before,
  .l-footer-temp_inner:hover .c-button.btn__arrow:before{
    right: 4%;
  }

  .l-footer-temp_inner:before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--path-red);
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.5s ease;
    transition-property: transform;
  }

  .l-footer-temp_inner:hover:before{
    transform: scaleY(1);
    transform-origin: bottom;

  }

  .l-footer-temp .c-button{
    max-width: 270px;
  }

  .c-button.btn__arrow.__back:hover:before{
    left: 4%;
    right: auto;

  }

}

/*
  丸ボタン
*/
.c-button.__circle{
  width: auto;
  display: inline-flex;
  padding: 0;
  gap: 10px;
  flex-direction: column;
  align-items: center;
}
.c-button.__circle .btn_tex{
  font-size: clamp(71px, calc(71px + (67 - 71) * (100vw - 365px) / (1440 - 365)), 67px);
  font-weight: 500;
  line-height: 1;
}

.c-button.__circle .arrow{
    width: 100px;
    height: 100px;
    background-color: var(--main-red);
    border-radius: 100%;
    position: relative;
    display: block;
    transition: all .6s cubic-bezier(.4, 0, 0, 1);
}

.c-button.__circle .arrow:after{
    content: "";
    z-index: 1;
    position: absolute;
    background: url(../images/arrow_white.svg) 0 0 no-repeat;
    background-position: 50% 50%;
    width: 27px;
    height: 27px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.c-button.__circle:hover .arrow{
  scale: .7;
}

@media screen and (min-width: 768px){
  .c-button.__circle{
    gap: 20px;
    flex-direction: row;
  }
}

/*
  contact_Button
*/
.wpcf7-submit {
  background-color: var(--main-red);
  display: inline-block;
  text-transform: capitalize;
  margin: 0 auto;
  padding: calc(16 * var(--px)) 0 calc(16 * var(--px)) ;
  width: 270px;
  color: #fff;
  font-family:"Noto Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-size: calc(18 * var(--px));
  border: none;
}



/*
  3.2 - Project
-----------------------------------------------------*/
/*
  パンくず
*/
.l-breadcrumbs{
  font-size: calc(12 * var(--px));
  margin-bottom: calc(100 * var(--px));
  color: var(--gray6);
}
@media screen and (min-width: 768px) {
  .l-breadcrumbs{
    margin-bottom: calc(50 * var(--px));
  }

  .l-breadcrumbs a{
    padding-block: 0;
    position: relative;
    background: linear-gradient(var(--gray6), var(--gray6)) 0 100% / 0 1px no-repeat;
    transition: background .6s cubic-bezier(.4, 0, 0, 1);
  }
  .l-breadcrumbs a:hover{
    background-size: 100% 1px;
  }
}

/*
  Header
*/
.l-header_inner{
  position: relative;
}

.bg-white .l-header.is-Header{
  background-color: #fff;
  -webkit-transition: color 0.3s ease-in;
    transition: color 0.3s ease-in;
}

.bg-white .l-header.is-Header .l-header-nav_link{
  color: var(--font_color);
  -webkit-transition: color 0.3s ease-in;
    transition: color 0.3s ease-in;
}

.bg-black .l-header.is-Header{
  background-color: var(--black);
  -webkit-transition: color 0.3s ease-in;
    transition: color 0.3s ease-in;
}



/*
  Global Nav
*/
.l-header-nav_sp{
  margin-right: 54px;
}

.l-header-nav_sp .link_contact{
  display: block;
  height: 21px;
  position: relative;
  z-index: 2;
}

.l-header-nav_sp .link_contact svg{
  stroke: #fff;
}

.p-globalNav {
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  padding: calc(130rem / 16) calc(50rem / 16) calc(80rem / 16);
  /* padding: calc(130 * var(--px)) calc(50 * var(--px)) calc(80 * var(--px)); */
  width: 100%;
  background-color: var(--font_color);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-transform: translateX(110%);
          transform: translateX(110%);
}

.l-header-nav_sp .l-header-nav_item{
  border-bottom: 1px solid #fff;
}

.l-header-nav_sp .l-header-nav_item:first-of-type{
  border-top: 1px solid #fff;
}

.l-header-nav_link{
  display: block;
  font-size: calc(15 * var(--px));
  padding-block: calc(20 * var(--px));
  color: #fff;
}

.l-header-nav_ig{
  padding-top: calc(50 * var(--px));

}

.is-drawerActive .p-globalNav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

body.is-drawerActive{
  height: 100%;
  overflow: hidden;
}

.is-drawerActive .bg-white .l-header.is-Header .l-header-nav_link,
.is-drawerActive .l-header.is-Header .l-header-nav_link{
  color: #fff;

}



@media screen and (min-width: 768px) {
  .p-globalNav {
    overflow-y: inherit;
  }

  .l-header-nav_pc .l-header-nav_list{
    display: flex;
    gap: calc(40 * var(--px));
    align-items: center;
  }
  .l-header-nav_pc .__line{
    padding-block: 0;
    position: relative;
    background: linear-gradient(#fff, #fff) 0 100% / 0 1px no-repeat;
    transition: background .6s cubic-bezier(.4, 0, 0, 1);
  }

  .bg-white .l-header.is-Header .__line{
    transition: background .6s cubic-bezier(.4, 0, 0, 1);
    background: linear-gradient(var(--font_color), var(--font_color)) 0 100% / 0 1px no-repeat;
  }

  .l-header-nav_pc .__line:hover,
  .bg-white .l-header.is-Header .__line:hover{
    background-size: 100% 1px;
  }
  .l-header-nav_pc .l-header-nav_item:last-of-type .l-header-nav_link{
    border: 1px solid #fff;
    padding: calc(6 * var(--px)) calc(58 * var(--px)) ;
    position: relative;
  }

  .l-header-nav_pc .l-header-nav_item:last-of-type{
    position: relative;
  }

  .l-header-nav_pc .l-header-nav_item:last-of-type:before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.5s ease;
    transition-property: transform;
  }

  .bg-white .l-header-nav_pc .l-header-nav_item:last-of-type:before{
    background: var(--font_color);
  }

  .bg-white .l-header-nav_pc .l-header-nav_item:last-of-type:hover .l-header-nav_link{
    color: #fff;

  }

  .l-header-nav_pc .l-header-nav_item:last-of-type:hover .l-header-nav_link{
    color: var(--font_color);
  }

  .l-header-nav_pc .l-header-nav_item:last-of-type:hover:before{
    transform: scaleY(1);
    transform-origin: bottom;
  }

  .bg-white .l-header.is-Header .l-header-nav_pc .l-header-nav_item:last-of-type .l-header-nav_link{
    border-color: var(--font_color);
  }

  .bg-white .l-header.is-Header .l-header-nav_pc .l-header-nav_item:last-of-type .__line{
    border-color: var(--font_color);
  }
}

/*
  logo
-----------------------------------------------------*/
.p-header__title{
  z-index: 2;

}

.l-header .header-logo {
  width: 123px;
  padding: 1em 0;
  display: inline-block;
  line-height: 0;
}

.front-page .l-header .header-logo{
  opacity: 0;
}

.front-page .is-HeaderAnimation .header-logo{
  opacity: 1;

}
@media screen and (min-width: 768px) {
  .l-header .header-logo {
    padding: 1.875em 0;
    width: 128.21px;
  }
}

.l-footer ._logo {
  width: 120px;
}
@media screen and (min-width: 768px) {
  .l-footer ._logo {
    width: 204px;
  }
}
/*
  logo-top
-----------------------------------------------------*/
.top_logo .top_logo_img{
  width: 170px;
  padding-bottom: calc(20 * var(--px));
}

@media screen and (min-width: 768px) {
  .top_logo .top_logo_img{
    width: 190px;
    padding-bottom: calc(20 * var(--px));

  }
}

/*
  hero
-----------------------------------------------------*/
.hero-wrap{
  margin-inline: var(--space-side);
  /* margin-top: calc(90 * var(--px)); */
  position: relative;
}

.mv_tit{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  left: 10%;
}

.mv_tit_tex{
  font-size: clamp(68px, calc(68px + (105 - 68) * (100vw - 365px) / (1440 - 365)), 105px);
  font-weight: 700;
  display: block;
  position: relative;
  line-height: 1;
  padding-bottom: calc(40 * var(--px));
}

.mv_tit_tex::before{
    content: "";
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg, rgba(220, 0, 28, 0) 0%, #DC001C 8%, #DC001C 92%, rgba(220, 0, 28, 0) 100%);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.mv_tit_sub{
  font-size: clamp(24px, calc(24px + (40 - 24) * (100vw - 365px) / (1440 - 365)), 40px);
   font-weight: 700;
}

@media screen and (min-width: 768px){
  .mv_tit{
    left: 5%;
  }
}


/*
下層_h1 下線
-----------------------------------------------------*/

.p-hero__title {
  font-weight: 900;
  padding-bottom: calc(17 * var(--px));
  position: relative;
  margin-bottom: calc(80 * var(--px));
  letter-spacing: .25px;

}
.p-hero__title .en_tit{
  font-size: calc(36 * var(--px));
  display: block;
}
.p-hero__title .jp_tit{
  font-size: calc(12 * var(--px));
  display: block;
}
.p-hero__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: linear-gradient(90deg, var(--main-red) 0%, var(--main-red) 80%, rgba(220, 0, 28, 0) 100%);
}


@media screen and (min-width: 768px) {
.p-hero__title .en_tit{
  font-size: calc(90 * var(--px));
  display: inline-block;
}
.p-hero__title .jp_tit{
  font-size: calc(18 * var(--px));
  display: inline-block;
  padding-left: calc(20 * var(--px));
}
.p-hero__title{
  margin-bottom: calc(120 * var(--px));
}
}
/*
  下層_h1 画像
-----------------------------------------------------*/
.p-hero__eyecatch {
    position: relative;
    height: 262.5px;
    overflow: hidden;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
.p-hero__eyecatch:before {
  background-size: 100%;
  text-align: center;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.p-hero__eyecatch__title{
    letter-spacing: .25px;
    font-weight: 900;
    position: absolute;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    color: #fff;
}

.p-hero__eyecatch__title .en_tit{
  font-size: calc(36 * var(--px));
  display: block;
}
.p-hero__eyecatch__titlee .jp_tit{
  font-size: calc(12 * var(--px));
  display: block;
}

.page-about .p-hero__eyecatch:before {
  background-image: url(../images/bg_about_sp.png);
}

.archive-products .p-hero__eyecatch:before {
  background-image: url(../images/bg_products_sp.png);
}
@media screen and (min-width: 768px) {

  .p-hero__eyecatch{
    height: 400px;
  }
  .p-hero__eyecatch:before{
    /* height: 399px; */

  }
  .page-about .p-hero__eyecatch:before {
    background-image: url(../images/bg_about.png);
  }
  .archive-products .p-hero__eyecatch:before {
    background-image: url(../images/bg_products.png);
  }
 .p-hero__eyecatch__title .en_tit{
    font-size: calc(90 * var(--px));
  }
 .p-hero__eyecatch__title .jp_tit{
    font-size: calc(18 * var(--px));
  }
}

/*
  h2
-----------------------------------------------------*/
.section_tit{
  font-weight: 800;
  padding-bottom: calc(60 * var(--px));
  position: relative;
  letter-spacing: .25px;
  text-align: center;
  color: #fff;
}
.section_tit.__black{
  color: var(--font_color);
}

.section_tit.__left{
  text-align: left;

}
.section_tit .en_tit{
  font-size: clamp(calc(var(--fs-sp-h2) * 1px), var(--fs-fluid-h2), calc(var(--fs-pc-h2) * 1px));;
  display: block;
  padding-bottom: calc(15 * var(--px));
  position: relative;
}

.section_tit.__left .en_tit{
  display: inline-block;
}

.section_tit .en_tit:before{
  content: "";
  max-width: 280px;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, rgba(220, 0, 28, 0) 0%, #DC001C 5%, #DC001C 95%, rgba(220, 0, 28, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.section_tit.__left .en_tit:before{
  background: linear-gradient(90deg, #DC001C 95%, rgba(220, 0, 28, 0) 100%);
}
.section_tit .jp_tit{
  font-size: calc(15 * var(--px));
  display: block;
  padding-top: calc(16 * var(--px));
}


/*
  h2 sub
-----------------------------------------------------*/
.section_sub-tit{
  color: var(--main-red);
  padding-bottom: calc(40 * var(--px));
}

.section_sub-tit .en_tit{
  font-weight: 900;
  display: block;
  font-size: calc(25 * var(--px));

}

.section_sub-tit .jp_tit{
  font-weight: 900;
  display: block;
}
/*
  h2 top about
-----------------------------------------------------*/
.section_about-tit{
  font-weight: 900;
  text-align: center;
  font-size: calc(
  43px + (80 - 43) * (100vw - 365px) / (1440 - 365)
  );
  letter-spacing: .25px;
}
@media screen and (min-width: 768px){
  .section_about-tit{
    text-align: left;
  }
}

/*
  h2-archive products
-----------------------------------------------------*/
.products-term-tit{
  border-bottom: 2px solid var(--main-red);
  padding-bottom: 1%;
  margin-bottom: calc(30 * var(--px))
;
}
.products-term-tit .en_tit{
  font-weight: 900;
  display: block;
  font-size: clamp(30px, calc(30px + (50 - 30) * (100vw - 365px) / (1440 - 365)), 50px);

}

.products-term-tit .jp_tit{
  font-size: clamp(14px, calc(14px + (16 - 14) * (100vw - 365px) / (1440 - 365)), 16px);
}

@media screen and (min-width: 768px){
  .products-term-tit{
    margin-bottom: calc(50 * var(--px));
  }
  .products-term-tit .en_tit{
    display: inline-block;
    padding-right: calc(30 * var(--px));
  }
}


/*
  loading
*/
.top-op,
.top-op2 {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}

.top-op {
  z-index: 99;
  background: #fff;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: top-op;
          animation-name: top-op;
}

.top-op2 {
  z-index: 100;
  background: #eff2ef;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: top-op2;
          animation-name: top-op2;
}

@-webkit-keyframes top-op {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}

@keyframes top-op {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
@-webkit-keyframes top-op2 {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
@keyframes top-op2 {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
/*
 モチーフ
-----------------------------------------------------*/
.path,
.path__wrap{
  position: relative;
}

.path::before{
  content: "";
  position: absolute;
  background-color: var(--path-red);
}

.bg-white.path::before{
  background-color: var(--sub-red)

}

.path.path__header:before{
  height: 340px;
  top: -46px;
  right: 0;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 100% 100%);
  width: 100%;
}
.path.path__about:before{
  height: 185px;
  top: 0;
  clip-path: polygon(0% 0%, 50% 0%, 0% 100%, 0% 100%);
  width: 100%;
  left: 0;
}

.path.path__line-up:before{
    height: 100%;
    top: 0;
    right: 0;
    clip-path: polygon(0% 0%, 30% 0%, 90% 100%, 0% 100%);
    width: 100%;
}

.path.path__footer:before{
    height: 340px;
    top: 0;
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 100% 100%);
    width: 100%;
    left: 0;
    background-color: var(--gray3);
}

@media screen and (min-width: 768px){
  .path.path__header:before{
    height: 1070px;
  }
  .path.path__about:before{
    height: 713px;
  }
  .path.path__footer:before{
    height: 100%;
    clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 90% 100%);


  }
}


/*
  Article
*/


/*
  Author
*/
.p-author {
  margin-top: 1rem;
  border: 1px solid #ddd;
}
.p-author__title {
  background-color: #263238;
  color: #fff;
  display: inline-block;
  padding: 0.25rem 1rem;
}
.p-author__name {
  padding: 1rem;
}

/*
  Comments
*/
.p-comments {
  margin-top: 1em;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .p-comments {
    margin-top: 2em;
  }
}
.p-comments__title {
  padding: 0.5em;
  font-size: 1.25em;
}
@media screen and (min-width: 768px) {
  .p-comments__title {
    padding: 1.5em;
    font-size: 1.5em;
  }
}
.p-comments__form {
  padding: 0.5em;
}
@media screen and (min-width: 768px) {
  .p-comments__form {
    padding: 1.5em;
  }
}

.comment + .comment {
  border-top: 1px solid #ddd;
}
.children .comment {
  border-top: 1px dotted #ddd;
}
.comment .children {
  padding-left: 3em;
}
.comment .reply {
  text-align: right;
}
.comment-body {
  overflow: hidden;
  padding: 0.5em;
}
@media screen and (min-width: 768px) {
  .comment-body {
    padding: 1.5em;
  }
}
.comment-author {
  float: left;
  overflow: hidden;
  margin-right: 1.5em;
  text-align: center;
}
.comment-author img {
  display: block;
  overflow: hidden;
  margin-bottom: 0.5em;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}
@media screen and (min-width: 768px) {
  .comment-author img {
    width: 5rem;
    height: 5rem;
  }
}
.comment-author .fn {
  font-size: 0.625rem;
}
@media screen and (min-width: 768px) {
  .comment-author .fn {
    font-size: 0.75rem;
  }
}
.comment-author .says {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip-path: inset(50%);
}
.comment-content {
  overflow: hidden;
}
.comment-respond {
  padding: 1.5em;
  border: 1px solid #ddd;
}
.comment-reply-title {
  margin-bottom: 0.25rem;
  font-weight: bold;
}
.comment-form {
  margin-top: 0.25rem;
}
.comment-form .logged-in-as {
  margin: 0.25rem 0;
}
.comment-form .comment-form-comment {
  margin: 1rem 0;
}
.comment-form input,
.comment-form textarea {
  padding: 0.5em;
  border-radius: 0.5em;
  font-size: 1em;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
  line-height: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.comment-form input[type=text],
.comment-form input[type=search] {
  display: inline-block;
  width: 80%;
  outline: none;
  border: 1px solid #ddd;
}
@media screen and (min-width: 768px) {
  .comment-form input[type=text],
  .comment-form input[type=search] {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .comment-form input[type=text],
  .comment-form input[type=search] {
    width: 80%;
  }
}
.comment-form input[type=text]:focus,
.comment-form input[type=search]:focus {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
          box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
}
.comment-form textarea {
  display: inline-block;
  width: 100%;
  outline: none;
  border: 1px solid #ddd;
}
.comment-form textarea:focus {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
          box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
}
.comment-form input[type=submit] {
  display: inline-block;
  padding: 0.6em 0.5em;
  border: 1px solid #ddd;
  background-color: transparent;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .comment-form input[type=submit] {
    margin-top: 0.5em;
    width: 25%;
  }
}
@media screen and (min-width: 1024px) {
  .comment-form input[type=submit] {
    margin-top: 0;
    width: 18%;
  }
}
.comment-form input[type=submit]:hover {
  border-color: #263238;
  background-color: #263238;
  color: #fff;
}
/*
Pagination
-----------------------------------------------------*/
/*
  archive news Pagination
*/
.archive-news .pagination {
  margin-top: calc(80 * var(--px));
  text-align: center;
}

.archive-news .page-numbers {
  text-align: center;
  display: inline-block;
  width: 2em;
  text-decoration: none;
  line-height: 1;
  padding: 0.25em;
  font-weight: bold;
  /* vertical-align: top; */
  font-family: "Noto Sans JP","Noto Sans",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
.archive-news .page-numbers:before{
  content: "0";

}

.page-numbers.prev,
.page-numbers.next{
  position: relative;
  width: 17px;
  height: 30px;
  padding: 0;
}
.page-numbers.prev{
  float: left;

}
.page-numbers.next{
  float: right;
}
.page-numbers.prev:before, .page-numbers.next:before {
  content: "";
  background-image: url(../images/i-link_arrow.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 17px;
  height: 30px;
}
.page-numbers.next:before{
  transform: rotate(180deg);
}
.page-numbers[href]:hover, .page-numbers.current {
  color: var(--main-red);
}
@media screen and (min-width: 768px) {
  .pagination {
    margin-top: calc(80 * var(--px));
  }
  .archive-news .page-numbers {
    width: 2.5em;
  }

  .page-numbers.prev:hover:before,
  .page-numbers.next:hover:before{
    background-image: url(../images/i-link_arrow_red.svg);
  }
}


/*
  news archive
*/


/*
  news single Pagination
*/

.s-news-nav{
  padding-top: calc(70 * var(--px));
}

.s-news-nav_list{
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.s-news-nav-previous,
.s-news-nav-next {
  position: relative;
  font-size: clamp(14px, calc(14px + (18 - 14) * (100vw - 365px) / (1440 - 365)), 18px);

}
.s-news-nav-previous a:before,
.s-news-nav-next a:before {
  content: "";
  background-image: url(../images/i-link_arrow.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  width: 13px;
  height: 25px;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.s-news-nav-previous a{
  padding-left: calc(24 * var(--px));
}

.s-news-nav-previous a::before{
  left: 0;
}


.s-news-nav-next a{
  padding-right: calc(24 * var(--px));
}
.s-news-nav-next a:before{
  right: 0;
  transform: rotate(180deg);
}

@media screen and (min-width: 768px) {
  .s-news-nav{
    padding-top: calc(120 * var(--px));
  }
  .s-news-nav-previous:hover a:before{
    left: -5px;
  }
  .s-news-nav-next:hover a:before{
    right: -5px;

  }
}

/*
  news Categories
-----------------------------------------------------*/

.post-categories {
  margin-bottom: calc(64 * var(--px));
  gap:calc(24 * var(--px)) ;
}

.post-categories .post-cat_items {
    position: relative;
    padding-top: 4px;
}

.post-categories .post-cat_link {
  font-size: calc(12px + (15 - 12) * (100vw - 365px) / (1440 - 365));

}
.post-categories .post-cat_link[href]:hover, .post-categories .post-cat_link.current {
  color: var(--main-red);

}
.post-categories .post-cat_link[href]:hover:before, .post-categories .post-cat_link.current:before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  top: 0;
  background-color: var(--main-red);
  border-radius: 50%;
  right: 50%;
  transform: translateX(50%);
}
@media screen and (min-width: 768px) {
  .post-categories {
    margin-bottom: calc(80 * var(--px));
    gap: calc(50 * var(--px));
  }
}
/*
  products Categories
*/
.cat_brand .__link {
  font-weight: 700;
  display: block;
}
.cat_brand .cat_child {
  padding: 0.625em 0 4em;
}
.cat_brand .subcat__link {
  display: block;
}


/*
  Hamburger
*/
.p-hamburger {
  position: absolute;
  top: 0;
  right: 2.5%;
  bottom: 0;
  left: auto;
  z-index: 2;
  margin: auto 0;
  width: 30px;
  height: 24px;
  outline: 0;
  border: 0;
  background-color: transparent;
  -webkit-box-shadow: 0 0 40px transparent;
          box-shadow: 0 0 40px transparent;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 0;
}
.p-hamburger:focus {
  -webkit-box-shadow: 0 0 0 1px #212121;
          box-shadow: 0 0 0 1px #212121;
}
.p-hamburger__line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
  /* width: 37%;
  height: 2px;
  border-radius: 0.25em;
  background-color: #fff; */

}
.p-hamburger__line:before,
.p-hamburger__line:after{
  border-radius: 0.25em;
  background-color: #fff;
  position: absolute;
  display: block;
  width: 37%;
  height: 2px;
  right: 50%;
  transform: translateX(50%);
  content: "";
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;

}
.p-hamburger__line:before{
  bottom: 5px;

}
.p-hamburger__line:after {
    bottom: 0;
}
.p-hamburger__menu{
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
}

.is-drawerActive .p-hamburger__line {
  background-color: transparent;
}

.is-drawerActive .p-hamburger__line:before {
  -webkit-transform: translateX(50%) rotate(-45deg);
  transform: translateX(50%) rotate(-45deg);
  bottom: 0;
}
.is-drawerActive .p-hamburger__line:after {
  -webkit-transform: translateX(50%) rotate(45deg);
  transform: translateX(50%) rotate(45deg);
}

.bg-white.is-drawerActive .is-Header  .p-hamburger__line:before,
.bg-white.is-drawerActive .is-Header  .p-hamburger__line:after{
  background-color: #fff;
}
.bg-white .is-Header .p-hamburger__line:before,
.bg-white .is-Header .p-hamburger__line:after{
  background-color: var(--font_color);
}

.bg-white .is-Header .l-header-nav_sp .link_contact svg{
 stroke: var(--font_color);
}

.bg-white .is-Header .p-hamburger__menu{
  color: var(--font_color);
}
.bg-white.is-drawerActive  .is-Header .p-hamburger__menu{
  color: #fff;
}
.bg-white.is-drawerActive .is-Header .l-header-nav_sp .link_contact svg{
 stroke: #fff;
}

@media screen and (min-width: 768px) {
  .p-hamburger {
    display: none;
  }
}




/*
  3.2 - Utility
-----------------------------------------------------*/
/*
  hover
-----------------------------------------------------*/





/*
  Break
*/
.u-break .-sp {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .u-break .-sp {
    display: none;
  }
}
.u-break .-sp02 {
  display: block;
}
@media screen and (min-width: 768px) {
  .u-break .-sp02 {
    display: none;
  }
}
.u-break .-tab {
  display: none;
}
@media screen and (min-width: 768px) {
  .u-break .-tab {
    display: inline-block;
  }
  .u-break .-tab.cen {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  .u-break .-tab._block {
    display: block;
  }
}
.u-break .-lap {
  display: none;
}
@media screen and (min-width: 1024px) {
  .u-break .-lap {
    display: inline-block;
    text-align: right;
  }
}

/*
  Screen Reader Text
*/
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}