@charset "UTF-8";

/* =====================
  Custom properties
===================== */
:root {
  --red: #811c0d;
  --orange: #cc3a25;
  --white: #fff;
  --black: #000;

  --header-height: 210px;
  --inner-width: 1240px;
  --header-nav-height: 130px;
  --icon-point: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="4" viewBox="0 0 20 4" fill="none"><line y1="2" x2="20" y2="2" stroke="%23D5D5D5"/><rect y="0.5" width="3" height="3" fill="%23811C0D"/></svg>');
  --icon-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="5" viewBox="0 0 22 5" fill="none"><path d="M0 4.5L20 4.5" stroke="currentColor"/><path d="M16 5V0L22 5H16Z" fill="currentColor"/></svg>');
  --icon-square: url('data:image/svg+xml,<svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="5" height="5" fill="%23ababab"/></svg>');
  --icon-square-red: url('data:image/svg+xml,<svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="5" height="5" fill="%23811C0D"/></svg>');
  --icon-square-white: url('data:image/svg+xml,<svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="5" height="5" fill="white"/></svg>');
  --icon-arrow-circle: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none"><circle cx="30" cy="30" r="29.5" transform="matrix(-1 0 0 1 60 0)" stroke="currentColor"/><path d="M33.3333 38.3332L25 29.9998L33.3333 21.6665" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --icon-border: url('data:image/svg+xml,<svg width="90" height="8" viewBox="0 0 90 8" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="4.5" x2="90" y2="4.5" stroke="currentColor" /><rect width="8" height="8" fill="currentColor" /></svg>');
  --icon-plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="41" viewBox="0 0 40 41" fill="none"><line x1="20.5" y1="0.500061" x2="20.5" y2="40.5001" stroke="currentColor"/><line x1="40" y1="21.0001" x2="2.42633e-06" y2="21.0001" stroke="currentColor"/></svg>');
  --icon-link-circle: url('data:image/svg+xml,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="24.5" stroke="currentColor"/><path d="M32 29V21L40 29H32Z" fill="currentColor"/><rect x="10" y="28" width="23" height="1" fill="currentColor"/></svg>');
  --icon-arrow-down: url('data:image/svg+xml,<svg width="5" height="14" viewBox="0 0 5 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0L0.500001 12" stroke="currentColor"/><path d="M0 8L5 8L-2.62268e-07 14L0 8Z" fill="currentColor"/></svg>');
  --icon-blank: url('/assets/img/common/icon-blank.svg');
  --icon-circle-line: url('/assets/img/common/circle-line.png');
  --icon-circle-arrow: url('data:image:svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"><circle cx="12.5" cy="12.0005" r="12" fill="#811C0D"/><path d="M18.5 10.0005L12.5 16.0005L6.5 10.0005" stroke="white" stroke-width="2"/></svg>');
}
@media not all and (min-width: 768px) {
  :root {
    --header-height: calc((100 / 750) * 210 * 1vw);
    --inner-width: calc((100 / 750) * 670 * 1vw);
    --header-nav-height: calc((100 / 750) * 160 * 1vw);
  }
}

/* =====================
  utility
===================== */
/* === inner === */
.u-inner {
  max-inline-size: var(--inner-width);
  margin-inline: auto;
}

/* === anchor === */
.u-anchor {
  cursor: pointer;
  font-family: var(--mincho);
  font-weight: bold;
  position: relative;
  display: inline grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  box-shadow: inset 0 0 0 1px #ababab;
  max-inline-size: 284px;
  padding-inline: 30px;
  padding-block: 21px;
  transition: all 250ms ease 0s;
  background-color: white;
  @media (any-hover: hover) {
    &:hover {
      translate: 0 -2%;
      box-shadow: inset 0 0 0 1px var(--red);
      &::before {
        background-image: var(--icon-square-red), var(--icon-square-red), var(--icon-square-red), var(--icon-square-red);
      }
      &::after {
        background-color: var(--red);
        translate: 25% 0;
      }
    }
  }
}
@media not all and (min-width: 768px) {
  .u-anchor {
    display: grid;
    max-inline-size: calc((100 / 750) * 497 * 1vw);
    font-size: calc((100 / 750) * 28 * 1vw);
    padding-inline: calc((100 / 750) * 56 * 1vw);
    padding-block: calc((100 / 750) * 38 * 1vw);
  }
}
.u-anchor::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
  pointer-events: none;
  background-image: var(--icon-square), var(--icon-square), var(--icon-square), var(--icon-square);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-size: 6px, 6px, 6px, 6px;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}
@media not all and (min-width: 768px) {
  .u-anchor::before {
    width: calc(100% + calc((100 / 750) * 10 * 1vw));
    height: calc(100% + calc((100 / 750) * 10 * 1vw));
    background-size: calc((100 / 750) * 12 * 1vw), calc((100 / 750) * 12 * 1vw), calc((100 / 750) * 12 * 1vw), calc((100 / 750) * 12 * 1vw);
  }
}
.u-anchor::after {
  width: 22px;
  content: '';
  display: block;
  will-change: translate;
  transition: translate 250ms ease 0s;
  aspect-ratio: 22 / 5;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-image: var(--icon-arrow);
  background-color: currentColor;
}
@media not all and (min-width: 768px) {
  .u-anchor::after {
    width: calc((100 / 750) * 40 * 1vw);
  }
}
.u-anchor[target='_blank']::after {
  mask-image: var(--icon-blank);
  background-color: var(--orange);
  width: 13px;
  aspect-ratio: 1 / 1;
}
@media not all and (min-width: 768px) {
  .u-anchor[target='_blank']::after {
    width: calc((100 / 750) * 26 * 1vw);
  }
}
.u-anchor[data-type='white'] {
  box-shadow: inset 0 0 0 1px white;
}
.u-anchor[data-type='white']::before {
  background-image: var(--icon-square-white), var(--icon-square-white), var(--icon-square-white), var(--icon-square-white);
}

/* === u-hgroup === */
.u-hgroup {
  position: relative;
  width: fit-content;
}
.u-hgroup::before {
  content: '';
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: var(--icon-circle-line);
  filter: invert(1);
  z-index: 1;
  opacity: 0.3;
  right: -70px;
  top: -21px;
  width: 165px;
  height: 131px;
}
.u-hgroup[data-type='gray']::before {
  filter: unset;
}
@media not all and (min-width: 768px) {
  .u-hgroup::before {
    right: calc((100 / 750) * -107 * 1vw);
    top: calc((100 / 750) * -35 * 1vw);
    width: calc((100 / 750) * 248 * 1vw);
    height: calc((100 / 750) * 197 * 1vw);
  }
}
.u-hgroup .title {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(auto, 90px) 1fr;
  gap: 0.8em;
  font-family: var(--mincho);
  font-size: 18px;
  z-index: 2;
}
@media not all and (min-width: 768px) {
  .u-hgroup .title {
    grid-template-columns: 18vw 1fr;
    gap: 3vw;
    font-size: calc((100 / 750) * 27 * 1vw);
    font-weight: bold;
  }
}
.u-hgroup .title::before,
.u-hgroup .title::after {
  content: '';
  display: block;
}
.u-hgroup .title::before {
  display: block;
  height: 1px;
  background: currentColor;
}
.u-hgroup .title::after {
  width: 5px;
  aspect-ratio: 1 / 1;
  background: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.u-hgroup[data-line='orange'] .title::before,
.u-hgroup[data-line='orange'] .title::after {
  background-color: var(--orange);
}

@media not all and (min-width: 768px) {
  .u-hgroup .title::after {
    width: calc((100 / 750) * 8 * 1vw);
  }
}
.u-hgroup [lang='en'] {
  position: relative;
  z-index: 1;
  padding-left: 0.2em;
  line-height: 1;
  font-size: 60px;
  font-weight: normal;
  display: inline-block;
}
@media not all and (min-width: 768px) {
  .u-hgroup [lang='en'] {
    font-size: calc((100 / 750) * 90 * 1vw);
  }
}
.u-hgroup [lang='en']::first-letter {
  color: var(--orange);
}

/* === marquee === */
.u-marquee {
  font-family: var(--title);
  font-size: 300px;
  font-weight: 100;
  position: absolute;
  white-space: nowrap;
  color: var(--orange);
  opacity: 0.08;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
@media not all and (min-width: 768px) {
  .u-marquee {
    font-size: calc((100 / 750) * 200 * 1vw);
  }
}
.u-marquee::before {
  content: attr(data-text);
  display: block;
  animation: marquee 100s linear infinite;
}
@keyframes marquee {
  100% {
    translate: -100%;
  }
}
@keyframes marquee-reverse {
  100% {
    translate: 100%;
  }
}

/* =====================
  u-overhead
===================== */
.u-overhead {
  color: var(--orange);
  font-family: var(--mincho);
  position: relative;
  font-size: 18px;
  padding-left: 0.8em;
}
@media not all and (min-width: 768px) {
  .u-overhead {
    font-size: calc((100 / 750) * 28 * 1vw);
    margin-left: calc((100 / 750) * 31 * 1vw);
    font-weight: bold;
    padding-left: calc((100 / 750) * 11.8 * 1vw);
  }
}
.u-overhead::before,
.u-overhead::after {
  content: '';
  display: block;
}
.u-overhead::before {
  width: 5px;
  aspect-ratio: 1 / 1;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -5px;
}
@media not all and (min-width: 768px) {
  .u-overhead::before {
    width: calc((100 / 750) * 10 * 1vw);
    left: -1.6vw;
  }
}
.u-overhead::after {
  display: block;
  position: absolute;
  left: -100vw;
  right: 100%;
  top: 50%;
  translate: 0 -50%;
  border-top: 1px solid currentColor;
  margin-right: 5px;
  pointer-events: none;
}

/* =====================
  u-table
===================== */
.u-table {
  max-inline-size: 1000px;
  width: 100%;
  margin-inline: auto;
}
.u-table :where(th, td) {
  padding-inline: 9px;
  padding-block: 1.5em;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
@media not all and (min-width: 768px) {
  .u-table :where(th, td) {
    padding-block: calc((100 / 750) * 40 * 1vw);
    font-size: calc((100 / 750) * 24 * 1vw);
    padding-inline: calc((100 / 750) * 16 * 1vw) 0;
  }
}
.u-table th {
  font-weight: bold;
  border-color: var(--red);
  width: 25%;
}
@media not all and (min-width: 768px) {
  .u-table th {
    width: 22%;
    padding-inline-start: 0;
  }
}
.u-table td {
  border-color: #d2d2d2;
}
@media not all and (min-width: 768px) {
  .u-table td a[href^='tel:'] {
    color: var(--red);
    text-decoration: underline;
  }
}
.u-table ul {
  color: #003586;
}
.u-table li::before {
  content: '・';
}
.u-table ul a {
  text-decoration: underline;
}

/* =====================
  main
===================== */
main {
  min-height: 100vh;
}

/* =====================
  header
===================== */
.header {
  position: fixed;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: var(--header-height);
  z-index: 30;
}
@media not all and (min-width: 768px) {
  .header {
    transition: all 600ms ease 0s;
    top: calc((100 / 750) * 222 * -1 * 1vw);
  }
  .touch-menu-on .header {
    inset: 0;
  }
}
.header .wrap {
  position: relative;
  z-index: 2;
}
.header .wrap::before {
  /* z-index: 2; */
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../img/common/header.png');
  width: 650px;
  height: 210px;
  position: absolute;
  top: 0;
  left: 0;
}
@media not all and (min-width: 768px) {
  .header .wrap::before {
    width: calc((100 / 750) * 690 * 1vw);
    height: calc((100 / 750) * 225 * 1vw);
  }
}
.header .inner {
  display: grid;
  grid-template-columns: 1fr auto;
  height: 130px;
  position: relative;
  align-items: center;
  min-width: 1300px;
  z-index: 1;
}
@media not all and (min-width: 768px) {
  .header .inner {
    grid-template-columns: auto auto;
    height: calc((100 / 750) * 120 * 1vw);
  }
}

body.top.isHeaderColor .header::after {
  content: '';
  width: 100%;
  height: var(--header-nav-height);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: white;
}
@media not all and (min-width: 768px) {
  body.top.isHeaderColor .header::after {
    display: none;
  }
}
body.top.isHeaderColor .header ul a {
  color: #000;
}

/* ==== logo ==== */
.header .logo {
  display: block;
  width: 346px;
  aspect-ratio: 346 / 60;
  margin-left: 30px;
  pointer-events: auto;
}
@media print, screen and (min-width: 768px) {
  .header .logo svg {
    width: 100%;
  }
}
@media not all and (min-width: 768px) {
  .header .logo {
    width: calc((100 / 750) * 402 * 1vw);
    margin-left: calc((100 / 750) * 20 * 1vw);
  }
}
.header .logo-mark {
  fill: #fff;
}
.header .logo-text {
  fill: #fff;
}

/* ==== nav ==== */
.header .nav {
  align-items: center;
  display: grid;
  grid-auto-columns: auto 180px 200px;
  grid-auto-flow: column;
  font-size: 15px;
  height: inherit;
}
@media not all and (min-width: 768px) {
  .header .nav {
    display: none;
  }
}
.header .nav [data-id='1'] {
  display: grid;
  grid-auto-flow: column;
  font-weight: bold;
  height: inherit;
  margin-right: 20px;
  min-inline-size: auto;
}
.header .nav [data-id='1'] li {
  height: inherit;
}
.header .nav [data-id='1'] a {
  pointer-events: auto;
  display: grid;
  text-align: center;
  height: inherit;
  padding-inline: 20px;
  align-items: center;
  position: relative;
  @media (any-hover: hover) {
    &::after {
      width: 0;
      will-change: width;
      transition: width 250ms var(--easeOutExpo) 0s;
      content: '';
      position: absolute;
      height: 4px;
      background: var(--red);
      left: 50%;
      translate: -50% 0;
      bottom: 0;
    }
    &:hover {
      &::after {
        width: 100%;
      }
    }
  }
}
body.company .header .nav [data-id='1'] a[href='/company/']::after,
body.base .header .nav [data-id='1'] a[href='/base/']::after,
body.product .header .nav [data-id='1'] a[href='/product/']::after,
body.recruit .header .nav [data-id='1'] a[href='/recruit/']::after {
  width: 100%;
  opacity: 0.8;
}

body.top .header [data-id='1'] a {
  color: white;
}

/* sdgs */
.header .nav [data-id='2'] {
  pointer-events: auto;
}

/* Contact */
.header .nav [data-id='3'] {
  background: black;
  color: white;
  font-family: var(--title);
  font-size: 20px;
  font-weight: 500;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block: 17px;
  pointer-events: auto;
}
@media not all and (min-width: 768px) {
  .header .nav [data-id='3'] {
    font-weight: bold;
  }
}
.header .nav [data-id='3']::before {
  content: '';
  width: 21px;
  aspect-ratio: 21 / 16.5;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-image: url('data:image/svg+xml,<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.375 0C2.47989 0 1.62145 0.355579 0.988515 0.988515C0.355579 1.62145 0 2.47989 0 3.375V13.125C0 14.0201 0.355579 14.8785 0.988515 15.5115C1.62145 16.1444 2.47989 16.5 3.375 16.5H17.625C18.5201 16.5 19.3785 16.1444 20.0115 15.5115C20.6444 14.8785 21 14.0201 21 13.125V3.375C21 2.47989 20.6444 1.62145 20.0115 0.988515C19.3785 0.355579 18.5201 0 17.625 0H3.375ZM19.5 4.05225L10.5 8.898L1.5 4.05225V3.375C1.5 2.87772 1.69754 2.40081 2.04917 2.04917C2.40081 1.69754 2.87772 1.5 3.375 1.5H17.625C18.1223 1.5 18.5992 1.69754 18.9508 2.04917C19.3025 2.40081 19.5 2.87772 19.5 3.375V4.05225ZM1.5 5.7555L10.1445 10.4108C10.2538 10.4696 10.3759 10.5004 10.5 10.5004C10.6241 10.5004 10.7462 10.4696 10.8555 10.4108L19.5 5.7555V13.125C19.5 13.6223 19.3025 14.0992 18.9508 14.4508C18.5992 14.8025 18.1223 15 17.625 15H3.375C2.87772 15 2.40081 14.8025 2.04917 14.4508C1.69754 14.0992 1.5 13.6223 1.5 13.125V5.7555Z" fill="currentColor"/></svg>');
  background-color: currentColor;
}

/* =====================
  footer
===================== */
.footer {
  --_totop-width: 50px;
  position: relative;
}
@media not all and (min-width: 768px) {
  .footer {
    --_totop-width: calc((100 / 750) * 80 * 1vw);
  }
}
.footer::before {
  content: '';
  background: #eeeae9;
  display: block;
  position: absolute;
  height: 60px;
  width: 100%;
  left: 50%;
  translate: -50% 0;
  bottom: 0;
}
@media not all and (min-width: 768px) {
  .footer::before {
    display: none;
  }
}
.footer {
  background: #f7f5f4;
  position: relative;
  padding-top: 65px;
  padding-right: var(--_totop-width);
}
@media print, screen and (min-width: 768px) {
  .footer .inner {
    padding-left: 31px;
  }
}
@media not all and (min-width: 768px) {
  .footer {
    padding-top: 15.2vw;
    padding-right: 0;
    padding-inline: calc((100 / 750) * 80 * 1vw);
  }
}
.footer .inner {
  position: relative;
  max-inline-size: 1190px;
  margin-inline: auto;
  display: grid;
  justify-content: space-between;
  grid-template-areas:
    'logo nav'
    'address nav'
    'sub-nav small';
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 60px;
}
@media not all and (min-width: 768px) {
  .footer .inner {
    display: block;
  }
}
.footer .inner logo {
  grid-area: logo;
}
.footer .inner .nav {
  grid-area: nav;
}
.footer .inner address {
  grid-area: address;
}
.footer .inner sub-nav {
  grid-area: sub-nav;
}
.footer .inner small {
  grid-area: small;
}

/* ==== nav ==== */
.footer .nav {
  display: grid;
  justify-content: flex-start;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px 29px;
  width: fit-content;
  align-self: flex-start;
}
@media not all and (min-width: 768px) {
  .footer .nav {
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 1fr);
    gap: 4.4vw 11.6vw;
  }
}
.footer .nav li {
  align-self: self-start;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
@media not all and (min-width: 768px) {
  .footer .nav li {
    gap: calc((100 / 750) * 16 * 1vw);
  }
}
.footer .nav li::before {
  content: '';
  display: block;
  width: 20px;
  aspect-ratio: 20 / 4;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../img/common/point.svg');
  translate: 0 0.75em;
}
@media not all and (min-width: 768px) {
  .footer .nav li::before {
    width: calc((100 / 750) * 41 * 1vw);
  }
}
.footer .nav [lang='en'] {
  color: var(--red);
  font-size: 20px;
  font-weight: 400;
}
@media not all and (min-width: 768px) {
  .footer .nav [lang='en'] {
    font-size: calc((100 / 750) * 44 * 1vw);
    font-weight: 400;
  }
}
.footer .nav li a {
  font-size: 14px;
  display: grid;
  color: #999;
  font-weight: bold;
  gap: 0.4em;
  grid-auto-flow: row;
}
@media not all and (min-width: 768px) {
  .footer .nav li a {
    font-size: calc((100 / 750) * 25 * 1vw);
    gap: calc((100 / 750) * 6.1 * 1vw);
  }
}

/* ==== logo ==== */
.footer .logo .logo-mark {
  fill: #e71f19;
}
@media not all and (min-width: 768px) {
  .footer .logo {
    width: calc((100 / 750) * 465 * 1vw);
    margin-top: 15vw;
    display: block;
    margin-inline: auto;
  }
}

/* ==== address ==== */
.footer address {
  line-height: 2;
  padding-top: 18px;
  width: fit-content;
  font-size: 14px;
  padding-bottom: 89px;
}
@media not all and (min-width: 768px) {
  .footer address {
    display: block;
    margin-inline: auto;
    padding-top: calc((100 / 750) * 17 * 1vw);
    padding-bottom: calc((100 / 750) * 103 * 1vw);
    text-align: left;
    font-size: calc((100 / 750) * 24 * 1vw);
  }
  .footer address a {
    color: var(--red);
    text-decoration: underline;
  }
}

/* ==== sub-nav ==== */
.footer .sub-nav {
  justify-content: flex-start;
  display: grid;
  height: 100%;
  align-items: center;
  grid-auto-flow: column;
  width: 100%;
  gap: 2.3em;
  font-size: 13px;
  color: #666666;
  background: #eeeae9;
}
@media not all and (min-width: 768px) {
  .footer .sub-nav {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    background: unset;
    font-size: calc((100 / 750) * 24 * 1vw);
  }
}

/* ==== copyright ==== */
.footer small {
  font-size: 12px;
  color: #888;
  font-weight: 400;
  height: 100%;
  display: grid;
  align-items: center;
  text-align: right;
  background: #eeeae9;
  font-family: var(--title);
}
@media print, screen and (min-width: 768px) {
  .footer small {
    padding-right: -2px;
    letter-spacing: 1.1px;
  }
}
@media not all and (min-width: 768px) {
  .footer small {
    margin-top: calc((100 / 750) * 130 * 1vw);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    text-align: left;
    font-size: calc((100 / 750) * 24 * 1vw);
    padding-block: calc((100 / 750) * 35 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }
}

/* ==== totop ==== */
.footer .totop {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #2c2321;
  height: 100%;
  width: var(--_totop-width);
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  gap: 1em;
}
@media not all and (min-width: 768px) {
  .footer .totop {
    height: calc((100 / 750) * 100 * 1vw);
    gap: 1.3vw;
  }
}
.footer .totop::before,
.footer .totop::after {
  display: block;
  margin-inline: auto;
}
.footer .totop::before {
  content: '';
  width: 1px;
  background: white;
  height: 92px;
}
@media not all and (min-width: 768px) {
  .footer .totop::before {
    height: calc((100 / 750) * 38 * 1vw);
  }
}
.footer .totop::after {
  content: 'Pagetop';
  pointer-events: none;
  color: white;
  font-size: 13px;
  font-family: var(--title);
  line-height: 1;
  letter-spacing: 1.3px;
  rotate: 0 0 1 90deg;
  translate: 2em 0;
  transform-origin: 0 center;
}
@media not all and (min-width: 768px) {
  .footer .totop::after {
    font-size: calc((100 / 750) * 18 * 1vw);
    rotate: unset;
    translate: unset;
    word-break: break-all;
    text-align: center;
    width: 8vw;
  }
}

/* =====================
  sp-menu
===================== */
.sp-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: calc(infinity * 1);
  background: #000000;
  width: calc((100 / 750) * 120 * 1vw);
  aspect-ratio: 1 / 1;
  display: grid;
  place-content: center;
}
.sp-menu::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../img/common/sp-menu.svg');
  width: calc((100 / 750) * 53 * 1vw);
  height: calc((100 / 750) * 63 * 1vw);
  transition: all 250ms ease 0s;
}
.menu-on .sp-menu::before {
  background-image: url('../img/common/sp-menu-close.svg');
}

/* =====================
  Sp-nav
===================== */
.sp-nav {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  translate: 100% 0;
  height: 100%;
  z-index: calc(infinity * 1);
  background: color-mix(in srgb, var(--red) 95%, transparent 0%);
  opacity: 0;
  pointer-events: none;
}
.menu-on .sp-nav {
  transition: translate 600ms var(--easeOutExpo) 0s;
  opacity: 1;
  translate: 0% 0;
  pointer-events: auto;
}
.sp-nav-inner {
  max-height: calc(100vh - calc((100 / 750) * 120 * 1vw));
  overflow-y: scroll;
  padding-left: calc((100 / 750) * 80 * 1vw);
  padding-block: calc((100 / 750) * 250 * 1vw) 11vw;
}
.sp-nav-inner .global-nav > ul {
  display: grid;
  gap: calc((100 / 750) * 58 * 1vw);
  grid-template-columns: 1fr;
}
.sp-nav-inner .global-nav > ul > li {
  position: relative;
  padding-top: calc((100 / 750) * 42 * 1vw);
}
.sp-nav-inner .global-nav > ul > li::before,
.sp-nav-inner .global-nav > ul > li::after {
  content: '';
  position: absolute;
  left: 0;
}
.sp-nav-inner .global-nav > ul > li::before {
  width: 100%;
  height: 1px;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
}
.sp-nav-inner .global-nav > ul > li::after {
  width: calc((100 / 750) * 60 * 1vw);
  height: calc((100 / 750) * 6 * 1vw);
  background-color: white;
  position: absolute;
  top: 0;
  translate: 0 -50%;
  left: 0;
}
.sp-nav-inner .global-nav > ul > li > a {
  display: grid;
  grid-template-columns: 1fr;
  color: white;
  gap: calc((100 / 750) * 22 * 1vw);
  line-height: 1;
  font-size: calc((100 / 750) * 20 * 1vw);
  position: relative;
  padding-left: calc((100 / 750) * 65 * 1vw);
}
.sp-nav-inner .global-nav > ul > li > a::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../img/common/point-nav.svg');
  width: calc((100 / 750) * 41 * 1vw);
  height: calc((100 / 750) * 8 * 1vw);
  position: absolute;
  left: 0;
  top: 2.4vw;
}
.sp-nav-inner .global-nav > ul li > a span[lang='en'] {
  font-size: calc((100 / 750) * 44 * 1vw);
  font-family: var(--title);
  font-weight: 400;
  color: white;
  line-height: 1;
}
.sp-nav-inner .global-nav > ul li > a + ul {
  color: white;
  display: grid;
  grid-template-columns: 1fr;
}
.sp-nav-inner .global-nav > ul li > a + ul li a {
  padding-left: calc((100 / 750) * 40 * 1vw);
  padding-block: calc((100 / 750) * 20 * 1vw);
  display: block;
  font-size: calc((100 / 750) * 26 * 1vw);
  text-align: right;
  padding-right: calc((100 / 750) * 80 * 1vw);
}

/* subnav */
.sp-nav-inner .sub-nav ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  text-align: center;
  gap: calc((100 / 750) * 20 * 1vw);
  margin-top: calc((100 / 750) * 130 * 1vw);
  color: white;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin-inline: auto;
  font-size: calc((100 / 750) * 24 * 1vw);
}
.sp-nav-inner .sub-nav ul li:nth-child(3) {
  grid-column: span 2 / span 2;
  grid-row-start: 2;
}
.sp-nav-inner .banner {
  margin-top: calc((100 / 750) * 80 * 1vw);
  width: calc((100 / 750) * 368 * 1vw);
  margin-inline: auto;
  left: 50%;
  translate: calc((100 / 750) * 29 * -1 * 1vw) 0;
}

@media print, screen and (min-width: 768px) {
  .sp-nav,
  .sp-menu {
    display: none;
  }
}

/* =====================
  FadeIn
===================== */
body:not(.top, .contact, .entry)::after {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: calc(infinity * 1);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  opacity: 1;
  pointer-events: none;
  transition: all 300ms ease-in-out 100ms;
}
.pageshow body::after {
  opacity: 0;
}