@charset "UTF-8";
/*
クラス命名の意味

l-：
(Layout)は「ヘッダー・フッター・メインなど、ページの大枠を構成する要素とその直下の子要素」に使う
p-：
(Project)は「レイアウトのどこに配置されても成立する、独立した意味を持つ再利用可能なパーツ」に使う

l- or p- の切り分けの判断基準としては、「このパーツをもし別のページの別の場所(例えばサイドバーやモーダル内)に移植しても成立するか?」で考える

*/

/* ==========================================================================
   目次 (Table of Contents)
   --------------------------------------------------------------------------
   01. Root variables
   02. Fonts
   03. Global styles
   04. Utility styles
   05. Accessibility utilities
   06. Button
   07. Layout
   08. Header
   09. Nav
   10. Typography
   11. Flex / Slider
   12. Categories, lists , Breadclumb
   13. Project: p-contactCta
   14. Footer
   15. Form
   16. Block editor
   17. Project: Pages
   ========================================================================== */

/* ==========================================================================
   01. Root variables
   ========================================================================== */
:root {
  --color-primary: 222, 59, 0;
  /* #DE3B00 */
  --color-contrast: 28, 28, 28;
  /* #1C1C1C */
  --color-base: 255, 255, 255;
  /* #fff */
  --color-gray-light: 240, 240, 240;
  /* #F0F0F0 */
  --color-gray: 170, 170, 170;
  /* #aaa */
  --color-gray-medium: 85, 85, 85;
  /* #555555 */
  --color-gray-dark: 72, 72, 72;
  /* #484848 */
  --color-gray-deep: 52, 52, 52;
  /* #343434 */
  --border-color: #989898;

  --font-jp: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-en: 'Inter', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Noto Sans JP', sans-serif;
  --root-font-size: 16;
  /* root:16px min:320 max:1520 minS:56 maxS:80 */
  --base-padding-top: clamp(3.5rem, 3.1rem + 2vw, 5rem);
  /* root:16px min:320 max:1520 minS:24 maxS:40 */
  --base-padding-bottom: clamp(1.5rem, 1.2333rem + 1.3333vw, 2.5rem);

  /* root:16px min:320 max:1520 minS:16 maxS:64 */
  --padding-inline: clamp(1rem, 0.2rem + 4vw, 4rem);

  --lb-gap: 4px;
  --lb-radius: 0;
  --lb-focus-color: #4d90fe;
  --lb-duration: 500ms;
  /* 幅(1vw)と高さ(1.8vh)の小さいほうを基準にする。
     1440×800 のとき 14.4px = 今の 1vw と同じなので、現状のデザインは変わらない */
  --vu: clamp(9px, min(1vw, 1.8vh), 17px);
}

/* ==========================================================================
   02. Fonts
   ========================================================================== */
/* noto-sans-jp-regular - japanese_latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-v56-japanese_latin-regular.woff2') format('woff2');
}

/* noto-sans-jp-500 - japanese_latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-jp-v56-japanese_latin-500.woff2') format('woff2');
}

/* noto-sans-jp-600 - japanese_latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/noto-sans-jp-v56-japanese_latin-600.woff2') format('woff2');
}

/* noto-sans-jp-700 - japanese_latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-jp-v56-japanese_latin-700.woff2') format('woff2');
}

/* inter-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2');
}

/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}

/* inter-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}

/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}

/* ==========================================================================
   03. Global styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* html body {
  background: url(null) fixed;
}

html {
  font-size: 100%;

  /* ブラウザ標準の16px */
  /** nav open **/
  &.is-locked {
    height: 100vh;
    overflow: hidden;
  }
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  color: rgb(var(--color-contrast));
  background: rgb(var(--color-base));
  font-weight: 400;
  line-height: calc(32/16);
  font-style: normal;
  font-family: var(--font-jp);
  /* 折り返し指定：収まらない場合に折り返す 長い英単語でのレイアウトの突き抜け防止 */
  overflow-wrap: anywhere;
  /* break-all は強制的に折り返すのて使用控える */
  word-break: normal;
  /*英数字と日本語の間に余白を入れる*/
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 単語の分割はデフォルトに依存 */
  line-break: strict;
  /* フォントの上下につく余白をトリミング */
  text-box: trim-both cap alphabetic;
  /* 禁則処理を厳格に適用 子音や句読点、記号が行頭にこないようにする */
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  overflow-x: hidden;

  &.is-noscroll {
    overflow: hidden;
  }
}

@media (min-width: 751px) {

  /*
  見た目は非リンク化しているが、キーボード/スクリーンリーダー利用者はTab移動でこのリンクにアクセスでき、
  Enterキーで電話発信動作（tel:リンク）が起きてしまう可能性がある
  html側にも　aria-disabled="true" を入れる
  */
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

figure {
  margin: 0;
}

picture {
  display: block;
}

picture,
img {
  height: auto;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

/* ==========================================================================
   04. Utility styles
   ========================================================================== */
::-moz-selection {
  color: rgb(var(--color-contrast));
  background: rgba(var(--color-gray), 0.16);
  text-shadow: none;
}

::selection {
  color: rgb(var(--color-contrast));
  background: rgba(var(--color-gray), 0.16);
  text-shadow: none;
}

@media screen and (min-width: 480px) {
  .sp-only {
    display: none;
  }
}

@media screen and (min-width: 1025px) {
  .sp {
    display: none;
  }
}

.tab {
  display: none;
}

@media screen and (min-width: 768px) {
  .tab {
    display: block;
  }
}

.pc {
  display: none;
}

@media screen and (min-width: 1025px) {
  .pc {
    display: block;
  }
}

.font-jp {
  font-family: var(--font-jp);
}

.font-en {
  font-family: var(--font-en);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

a {
  color: rgb(var(--color-contrast));
  cursor: pointer;
  line-height: inherit;
  transition: all .3s ease-in-out;
  text-decoration: none;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
}

a:hover {
  opacity: 0.72;
  text-decoration: none;
}


.svgicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

/* --------------------------------------------------------------------
   Utility: WordPress color & alignment classes
   -------------------------------------------------------------------- */

.has-primary-color {
  color: rgb(var(--color-primary));
  /* color: rgb(var(--wp--preset--color-charcoal)); */
}

.has-contrast-color {
  color: rgb(var(--color-contrast));
}

.has-base-color {
  color: rgb(var(--color-base));
}

.has-gray-light-color {
  color: rgb(var(--color-gray-light));
}

.has-gray-color {
  color: rgb(var(--color-gray));
}

.has-gray-medium-color {
  color: rgb(var(--color-gray-medium));
}

.has-gray-dark-color {
  color: rgb(var(--color-gray-dark));
}

.has-gray-deep-color {
  color: rgb(var(--color-gray-deep));
}

.has-primary-background-color {
  background-color: rgb(var(--color-primary));
}

.has-contrast-background-color {
  background-color: rgb(var(--color-contrast));
}

.has-base-background-color {
  background-color: rgb(var(--color-base));
}

.has-gray-light-background-color {
  background-color: rgb(var(--color-gray-light));
}

.has-gray-background-color {
  background-color: rgb(var(--color-gray));
}

.has-gray-medium-background-color {
  background-color: rgb(var(--color-gray-medium));
}

.has-gray-dark-background-color {
  background-color: rgb(var(--color-gray-dark));
}

.has-gray-deep-background-color {
  background-color: rgb(var(--color-gray-deep));
}

.aligncenter {
  text-align: center;
}

.alignright {
  text-align: right;
}

.alignleft {
  text-align: left;
}



/* ==========================================================================
   05. Accessibility utilities
   ========================================================================== */
/* キーボード操作時のフォーカス表示。元のCSSにはフォーカス時のスタイルが一切なく、
   .nav-toggleではoutline:noneで完全に消えていたため、すべてのインタラクティブ要素に
   visibleなフォーカスを追加（WCAG 2.4.7 フォーカスの可視化） */
:focus-visible {
  outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid rgb(var(--color-gray));
  outline-offset: 2px;
  border-radius: 2px;
}

/* 背景画像の上にあるため、デフォルトのアウトラインが見えにくい要素は太め・コントラストを上げる */
.nav-toggle:focus-visible,
.modal-closed:focus-visible {
  outline: 3px solid rgb(var(--color-gray));
  outline-offset: 3px;
}

/* スクリーンリーダー専用テキスト。視覚的には隠すが、display:noneにはしない
   （display:noneは支援技術からも除外されてしまうため） */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* スキップリンク：通常は画面外に隠し、キーボードフォーカス時のみ表示する */
.skip-link {
  position: absolute;
  top: -10em;
  left: 0;
  z-index: 10000;
  padding: 0.75em 1.25em;
  background-color: rgb(var(--color-gray));
  color: rgb(var(--color-contrast));
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0 0 0.5em 0;
  transition: top 0.2s;
}

.skip-link:focus-visible {
  top: 0;
  outline: 3px solid rgb(var(--color-gray-deep));
  outline-offset: -3px;
}

/* 動きに敏感な利用者への配慮（前庭障害等）。OS側で「視差効果を減らす」等が
   有効な場合、揺れ続けるツリーや大きく動くアニメーションを止め、
   js-scroll-animate系のコンテンツはJSの実行を待たずに表示する */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-scroll-animate,
  .js-animate-stagger {
    opacity: 1 !important;
    transition: none !important;
  }
}

.u-visually-hidden {
  display: none;
}

/* ==========================================================================
   06. Button
   ========================================================================== */
.btn:not(:has(> a)),
.btn a {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-inline: 0;
  padding: 1.75em 5em;
  font-weight: 600;
  /* letter-spacing: 0.05em; */
  background-size: 200% 100%;
  background-position: right bottom;
  background-image: linear-gradient(to right, rgb(var(--color-base)) 0%, rgb(var(--color-base)) 50%, rgb(var(--color-primary)) 50%, rgb(var(--color-primary)) 100%);
  color: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-primary));
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  appearance: none;
  transition: all .3s;

  /* &::after {
    content: "";
    display: block;
    width: 0.75em;
    height: 0.75em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,255,255,0.5)' viewBox='0 0 12 12'%3E%3Cg transform='translate(-318 -1293)'%3E%3Cpath d='M298.082,1286.058l11.941,5.858-11.959,6.132,4.527-6.132Z' transform='translate(19.936 6.951)'/%3E%3Cpath d='M301.487,1288.842l2.356,3.062-2.444,3.311,6.394-3.279-6.306-3.094m-3.405-2.784,11.941,5.858-11.959,6.132,4.527-6.132Z' transform='translate(19.936 6.951)'/%3E%3C/g%3E%3C/svg%3E") no-repeat right center / contain;
    position: absolute;
    top: 50%;
    right: 0.25em;
    transform: translateY(-50%);
    transition: right 0.3s;
  } */

  .svgicon {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.75em;
  }

  &:hover {
    background-position: left bottom;
    opacity: 1;
    color: rgb(var(--color-primary));

    /* &::after {
      right: 0;
    } */
  }
}

/* .btn a[target="_blank"]::after {
  right: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,255,255,0.7)' viewBox='0 0 41 41'%3E%3Cg transform='translate(-794 -4333)'%3E%3Cpath d='M32.365,32.368H0V0H8.63V4.315H4.315V28.05H28.05V23.735h4.315v8.63Z' transform='translate(794 4341.633)'/%3E%3Cpath d='M4.315,28.053H28.05V4.315H4.315M0,0H32.368V32.368H0Z' transform='translate(802.633 4333)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center / contain;
} */

.btn-cols {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.5em;
  column-gap: 2.5em;

  > .btn {
    flex: 100%;
    min-width: 0;

    a {
      width: 100%;
    }
  }

  @media screen and (min-width: 768px) {
    > .btn {
      flex: 1;
    }
  }
}

/* ==========================================================================
   07. Layout
   ========================================================================== */
.wrapper {
  width: 100%;
  margin-inline: auto;
  /* overflow-x: hidden; */

  &::before {
    content: "";
    display: block;
    width: 100%;
    /* height: 100vh; */
    height: 120vh;
    background: url(../img/bg.jpg) repeat-y center center / cover;
    position: fixed;
    top: 0;
    z-index: -1;
  }
}

.products_child .wrapper {
  &::before {
    display: none;
  }
}

.l-main {
  width: 100%;
  margin-inline: auto;
  position: relative;
  /* z-index: 1; */
  padding-top: 3em;
  padding-bottom: 7.5em;

  @media screen and (min-width: 768px) {
    padding-top: 3.75em;
  }
}

.company,
.product:not(.products_child) {
  .l-main {
    padding-bottom: 0;
  }
}

.base {
  width: 100%;
  padding-top: var(--base-padding-top);
  padding-bottom: var(--base-padding-bottom);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.inner {
  width: 100%;
  /* max-width: calc(1232px + (var(--padding-inline) * 2)); */
  max-width: calc(95vw + (var(--padding-inline) * 2));
  margin-inline: auto;
  padding-inline: var(--padding-inline);

  @media screen and (min-width: 1400px) {
    max-width: calc(75vw + (var(--padding-inline) * 2));
  }

  &.narrow {
    /* max-width: calc(960px + (var(--padding-inline) * 2)); */
    max-width: calc(95vw + (var(--padding-inline) * 2));

    @media screen and (min-width: 960px) {
      max-width: calc(75vw + (var(--padding-inline) * 2));
    }

    @media screen and (min-width: 1400px) {
      max-width: calc(55vw + (var(--padding-inline) * 2));
    }
  }

  &::after {
    content: "";
    clear: both;
    display: block;
  }
}

.p-articleLayout,
.p-pageContainer,
.p-pageHeader {
  width: 100%;
  margin-inline: auto;
}

.p-pageHeader {
  padding-top: 1.5em;
  /* root:16  minV:320 maxV:1520 minS:64 maxS:140  */
  padding-bottom: clamp(4rem, 2.7333rem + 6.3333vw, 8.75rem);


  @media screen and (min-width: 960px) {
    padding-top: 2.25em;
    display: grid;
  }
}

.page:not(.products_child, .contact, .privacypolicy) .p-pageHeader {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  filter: grayscale(100%);
  transition: filter 0.8s;
  position: relative;

  @media screen and (min-width: 960px) {
    height: 100vh;
    max-height: 780px;
  }

  > * {
    color: rgb(var(--color-base));
    position: relative;
    z-index: 3;
  }

  > a {
    color: rgb(var(--color-base));
  }

  &:hover {
    filter: grayscale(0%);
  }

  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-contrast), 0.6);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
}

.contact .p-pageHeader,
.privacypolicy .p-pageHeader,
.products_child .p-pageHeader {
  padding-bottom: 0;

  > * {
    color: rgb(var(--color-contrast));
  }

  &::after {
    display: none;
  }
}


.p-articleLayout {
  &:has(.p-articleLayout__sidebar) {
    /* padding-top: 5em; */
    padding-top: var(--base-padding-top);


    .inner {
      @media (min-width: 1080px) {
        display: grid;
        grid-template-columns: 24vw auto;
        align-items: start;
        gap: 5em;
        max-width: 95vw;
      }

      @media (min-width: 1400px) {
        grid-template-columns: 16vw auto;
        max-width: 75vw;
      }
    }

    .p-pageContainer {
      padding-top: 2.5em;

      @media (min-width: 1080px) {
        padding-top: 0;

      }
    }
  }
}

.p-pageContainer {
  padding-top: 5em;
}

.p-articleLayout__sidebar {
  width: 100%;
  margin-inline: auto;
  position: sticky;
  top: 5em;
  z-index: 100;
  border-radius: 5px;
  background-color: rgb(var(--color-base));
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.16));
  /* (x , y , blur , color) */
  /* box-shadow: 0 0 12px rgba(0, 0, 0, .25); */

  @media (min-width: 480px) {
    max-width: 240px;
    margin-right: 0;
  }

  @media (min-width: 1080px) {
    max-width: 24vw;
    background-color: transparent;
    filter: none;
  }
}

/* --- SP〜タブレット:アコーディオン --- */
.p-localNav__accordion {
  background-color: rgb(var(--color-base));
  border-radius: 5px;

  &[open] {
    border-radius: 5px 5px 0 0;
    /* border-radius: 0 0 5px 5px; */

    .icon-chevron-down {
      transform: rotate(180deg);
    }
  }

  @media (min-width: 1080px) {
    background-color: transparent;
  }
}



.p-localNav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 1em;
  cursor: pointer;
  list-style: none;
  font-weight: bold;

  .icon-chevron-down {
    transition: transform .3s;
  }

  @media (min-width: 1080px) {
    display: none;
  }
}

.p-localNav__summary::-webkit-details-marker {
  display: none;
}




.p-localNav__summaryText {}

.p-localNav {
  background-color: rgb(var(--color-base));
  width: 100%;
  position: absolute;
  top: 100%;
  /* summaryの上に配置 */
  /* bottom: 100%; */
  /* padding: 2em 0.5em 0.5em; */
  padding: 0.5em 0.5em 2em;
  height: 0;
  max-height: calc(100svh - (7em + 1.5em));
  overflow-y: auto;
  border-radius: 0 0 5px 5px;
  /* border-radius: 5px 5px 0 0; */

  @media (min-width: 1080px) {
    background-color: transparent;
    position: relative;
    top: auto;
    bottom: auto;
    height: auto;
    padding: 0;
  }
}

.p-localNav__accordion[open] .p-localNav {
  height: auto;
}

/*
.p-localNav__accordion:not([open]) .p-localNav {
  display: block;
  background-color: transparent;
  position: relative;
  bottom: auto;
  height: auto;
  padding: 0;
} */


.p-localNav__list {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding-left: 1.75em;
}

.p-localNav__item {
  font-weight: 600;
  line-height: 1.5;
  position: relative;

  @media screen and (min-width: 1080px) {
    /* font-size: 1.5vw; */
    font-size: calc(var(--vu) * 1.5);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1vw; */
    font-size: calc(var(--vu) * 1);
  }

  &::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1px;
    background-color: rgb(var(--color-primary));
    position: absolute;
    left: -1.5em;
    top: 0.9em;
  }

  a {
    color: #898989;
    padding-block: 0.25em;
    position: relative;

    &[aria-current] {
      color: rgb(var(--color-contrast));
    }

    &:hover {
      opacity: 1;
      color: rgb(var(--color-primary));
    }
  }
}

.p-localNav__item {
  ul {
    margin-top: 0.5em;
  }

  li {
    margin-top: 0.5em;
    font-weight: 400;
  }
}

/* ==========================================================================
   08. Header
   ========================================================================== */
.l-header {
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 1000;
  background: rgb(var(--color-base));
  backdrop-filter: blur(5px);
}

.top .l-header {
  background: linear-gradient(to bottom, rgba(var(--color-contrast), 0.5) 5%, transparent);

  @media (min-width: 1024px) {
    background: linear-gradient(to bottom, rgba(var(--color-contrast), 0.2) 5%, transparent);
  }
}

.l-header__inner {
  display: flex;
  align-items: center;
  padding: 0.75rem 3rem 0.75rem 0.75rem;
  flex-wrap: wrap;
  position: relative;

  @media (min-width: 1080px) {
    padding: 0.75rem 1.25rem;
  }
}

.en .l-header__inner {
  @media (min-width: 1080px) {
    padding-right: 0.5em;
  }
}


.l-header__logo {
  max-width: 108px;
  margin: 0;
  flex-shrink: 0;
  transition: all .3s;

  @media (min-width: 768px) {
    max-width: 180px;
  }

  @media (min-width: 1120px) {
    /* max-width: 240px; */
    /* max-width: 18vw; */
    max-width: calc(var(--vu) * 18);
  }

  img {
    display: block;
    height: auto;
    width: 100%;
  }
}


/* ==========================================================================
   Hamburger button (SP only)
   ========================================================================== */
.l-header__hamburger {
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0.25em;
  border: none;
  background: none;
  min-height: inherit;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: opacity .3s;

  &:hover {
    opacity: 0.8;
  }

  @media (min-width: 1080px) {
    display: none;
  }
}

.toggle-icon {
  width: 1.75em;
  height: 1.125em;
  margin-inline: auto;
  display: block;
  position: relative;

  @media screen and (min-width: 768px) {
    width: 2em;
    height: 1.275em;
  }

  &:hover span {
    background: rgb(var(--color-primary));
  }
}


.toggle-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgb(var(--color-contrast));
  transition: transform .3s ease, opacity .3s ease, top .3s ease, background .3s;

  &:first-of-type {
    top: 0;
  }

  &:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
  }

  &:last-of-type {
    bottom: 0;
  }
}

.top .toggle-icon span {
  background: rgb(var(--color-base));
}

.is-open .toggle-icon span {
  &:first-of-type {
    top: 6px;
    transform: rotate(45deg);
  }

  &:nth-of-type(2) {
    opacity: 0;
  }

  &:last-of-type {
    top: 6px;
    transform: rotate(-45deg);
  }
}

.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s, backdrop-filter .5s -.5s;

  &.is-open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(3px);
    /* transition: opacity .25s ease, visibility 0s; */
  }

  @media (min-width: 1080px) {
    display: none;
  }
}



/* ==========================================================================
   09. Nav (PC: inline / SP: drawer)
   ========================================================================== */
.l-header__nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: calc(100svh - 3em);
  max-width: 20rem;
  margin-top: 3em;
  overflow-y: auto;
  background: rgb(var(--color-base));
  opacity: 0;
  visibility: hidden;
  z-index: 950;
  transform: translateX(100%);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, right .25s;
  /* スマホ用の慣性スクロール */
  pointer-events: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  &.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  @media screen and (min-width: 1080px) {
    max-width: 600px;
    width: auto;
    height: auto;
    margin-top: 0;
    margin-right: auto;
    margin-left: 1.5em;
    overflow: visible;
    position: initial;
    top: auto;
    right: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.top .l-header__nav {
  background: none;
}

.top .l-header__nav.is-open {
  background: rgb(var(--color-gray-deep));
}

.l-header__nav_inner {
  width: 100%;
  margin-inline: auto;
  opacity: 0;
  transition: opacity 1.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;

  @media screen and (min-width: 1080px) {
    opacity: 1;
  }
}

.is-open .l-header__nav_inner {
  opacity: 1;
}

.l-header__navList {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;

  @media screen and (min-width: 1080px) {
    flex-direction: row;
    align-items: center;
    /* gap: 0.75em; */
    /* gap: 1vw; */
    gap: calc(var(--vu) * 1);
  }
}

.en .l-header__navList {
  @media screen and (min-width: 1080px) {
    /* gap: 0.5em; */
    /* gap: 0.5vw; */
    gap: calc(var(--vu) * 0.5);
  }
}

.l-header__navItem {
  position: relative;
  border-bottom: 1px solid rgb(var(--color-gray-light));

  @media screen and (min-width: 1080px) {
    position: initial;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.en .l-header__navItem {
  @media screen and (min-width: 1080px) {
    max-width: 10em;
  }

  @media screen and (min-width: 1200px) {
    max-width: initial;
  }
}

.l-header__navLink {
  display: block;
  padding: 1rem;
  font-size: 0.875em;
  font-weight: 600;

  &:hover {
    opacity: 1;
    color: rgb(var(--color-primary));
  }

  @media screen and (min-width: 1080px) {
    white-space: nowrap;
    padding: 0 0.5em;
    text-align: center;
    /* font-size: 1.2vw; */
    font-size: calc(var(--vu) * 1.2);
  }
}

.en .l-header__navLink {
  @media screen and (min-width: 1080px) {
    white-space: normal;
  }

  @media screen and (min-width: 1200px) {
    white-space: nowrap;
  }
}

.top .l-header__navLink {
  color: rgb(var(--color-base));

  &:hover {
    color: rgb(var(--color-primary));
  }
}

/* .l-header__navList li {
  border-bottom: 1px solid rgb(var(--color-gray-light));

  @media screen and (min-width: 1080px) {
    border-bottom: none;

  }
}

.l-header__navList a {
  display: block;
  padding: 1rem;
  font-size: 0.875em;
  font-weight: 600;

  &:hover {
    opacity: 1;
    color: rgb(var(--color-primary));
  }

  @media screen and (min-width: 1080px) {
    white-space: nowrap;
    padding: 0 0.5em;
  }
} */

/* ==========================================================================
   サブメニュー開閉トグル(矢印ボタン)
   ========================================================================== */
.l-header__navItem.has-submenu {
  .l-header__navLink {
    /* SP:トグルボタン分のスペースを確保 */
    padding-right: 3rem;

    @media screen and (min-width: 1080px) {
      padding-right: 0;
    }
  }
}

.l-header__navToggle {
  position: absolute;
  top: 0.5rem;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: currentColor;
  border: none;
  background: transparent;
  cursor: pointer;

  .icon-chevron-down {
    width: 1em;
    height: 1em;
    transition: transform 0.25s ease;
  }

  &[aria-expanded="true"] .icon-chevron-down {
    transform: translateY(-50%) rotate(180deg);

    @media screen and (min-width: 1080px) {
      transform: translateY(0) rotate(180deg);
    }
  }

  @media screen and (min-width: 1080px) {
    position: static;
    /* width: 1vw; */
    width: calc(var(--vu) * 1);
    /* height: 1vw; */
    height: calc(var(--vu) * 1);
    /* margin-left: 0.75vw; */
    margin-left: calc(var(--vu) * 0.75);
    /* width: 1em;
    height: 1em;
    margin-left: 0.25em; */

    .icon-chevron-down {
      /* width: 0.675em;
      height: 0.675em; */
      /* width: 0.75vw; */
      width: calc(var(--vu) * 0.75);
      /* height: 0.75vw; */
      height: calc(var(--vu) * 0.75);
      transform: translateY(2px);
    }
  }
}

.top .l-header__navToggle {
  .icon-chevron-down {
    color: rgb(var(--color-base));
  }

  @media screen and (min-width: 1024px) {}
}



/* ==========================================================================
   サブメニュー本体
   SP:アコーディオン(高さ可変) / PC:ヘッダー下に広がるメガメニュー
   ========================================================================== */
.l-header__submenu {
  background-color: rgb(var(--color-gray-dark));
  color: rgb(var(--color-base));
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  /* grid-template-rows: 1fr; */
  transition: grid-template-rows 0.3s ease;

  .has-submenu.is-open & {
    grid-template-rows: 1fr;
  }

  @media screen and (min-width: 1080px) {
    position: absolute;
    top: 100%;
    left: 0;
    /* left: 50%; */
    width: 100vw;
    /* transform: translateX(-50%); */
    margin-inline: calc(50% - 50vw);
    /* display: block; */
    height: 0;
    /* grid-template-rows: unset; */
    grid-template-rows: 1fr;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
    z-index: 9999;

    .has-submenu:hover &,
    .has-submenu.is-open & {
      height: auto;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  /* @media screen and (min-width: 1120px) {
    top: calc(100% + 1.25rem);
  } */
}

.l-header__submenu_inner {
  min-height: 0;
  /* grid-template-rows:0frとの組み合わせで中身を潰すために必要 */
  padding-inline: 1em;

  @media screen and (min-width: 1080px) {
    width: 100%;
    /* max-width: calc(1232px + (var(--padding-inline) * 2)); */
    max-width: 90vw;
    display: flex;
    align-items: flex-start;
    gap: 2.5em;
    margin-inline: auto;
    padding: 2.5em 2.5em;
  }
}

.l-header__submenu_title {
  margin: 0;
  padding: 0.5em 1rem;
  font-size: 1.5em;
  font-weight: 700;
  font-family: var(--font-en);
  color: rgb(var(--color-base));
  border-bottom: 1px solid rgba(var(--color-base), 0.4);

  @media screen and (min-width: 1080px) {
    min-width: 260px;
    flex-shrink: 0;
    padding: 0;
    padding-right: 2.5em;
    /* font-size: 2.5em; */
    /* font-size: 3.5vw; */
    font-size: calc(var(--vu) * 3.5);
    line-height: 1.2;
    border-bottom: none;
    align-self: center;
    /* border-right: 1px solid rgba(var(--color-base), 0.4); */
  }
}

.l-header__submenu_list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 1em 0;
  list-style: none;

  @media screen and (min-width: 1080px) {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    padding: 0 0 0 5em;
    gap: 1.5em 2.5em;
    border-left: 1px solid rgba(var(--color-base), 0.4);
  }

  li {
    @media screen and (min-width: 1080px) {}
  }

  a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.75em 1rem;
    /* font-size: 1.4vw; */
    font-weight: 400;
    color: rgb(var(--color-base));

    @media screen and (min-width: 1080px) {
      padding-block: 0;
      font-size: calc(var(--vu) * 1.4);
    }

    &:hover {
      opacity: 1;
      color: rgb(var(--color-primary));
    }
  }

  .icon {
    flex-shrink: 0;
    display: grid;
    place-content: center;
    width: 1.25em;
    height: 1.25em;
    color: rgb(var(--color-primary));
    border: 1px solid rgb(var(--color-primary));
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(222, 59, 0)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
  }

}



/* ==========================================================================
   Sub area (contact + language)
   ========================================================================== */
.l-header__sub {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-left: auto;
  margin-right: 0.5em;

  @media screen and (min-width: 768px) {
    gap: 1em;
  }

  @media screen and (min-width: 1080px) {
    /* gap: 1.25em; */
    /* gap: 1.25vw; */
    gap: calc(var(--vu) * 1.25);
    padding-left: 0.5em;
    /* margin-right: auto; */
  }
}

.en .l-header__sub {

  @media screen and (min-width: 1080px) {
    /* gap: 1em; */
    /* gap: 1vw; */
    gap: calc(var(--vu) * 1);
  }
}



.l-header__contact {
  display: flex;
  align-items: center;
  gap: 0.5em;

  @media screen and (min-width: 1024px) {
    /* gap: 0.75vw; */
    gap: calc(var(--vu) * 0.75);
  }

  &:hover {
    color: rgb(var(--color-primary));
  }

  .icon-mail {
    display: inline-block;
    width: 1.25em;
    height: 1em;
    margin-top: 3px;
    flex-shrink: 0;

    @media screen and (min-width: 1024px) {
      /* width: 1.25vw; */
      width: calc(var(--vu) * 1.25);
      /* height: 1vw; */
      height: calc(var(--vu) * 1);
    }
  }
}

.top .l-header__contact {
  color: rgb(var(--color-base));

  &:hover {
    color: rgb(var(--color-primary));
  }

  @media screen and (min-width: 1024px) {}
}

.l-header__contact-text {
  display: none;
  font-size: 0.875em;
  font-weight: 600;

  /* SPはアイコンのみ */
  @media screen and (min-width: 768px) {
    display: inline-block;
  }

  @media screen and (min-width: 1080px) {
    /* font-size: 1.2vw; */
    font-size: calc(var(--vu) * 1.2);
  }
}



.l-header__langWrap {
  position: relative;
  padding-left: 0.5em;
  border-left: 1px solid rgb(var(--color-contrast));
}

.top .l-header__langWrap {
  border-color: rgb(var(--color-base));

  @media screen and (min-width: 1024px) {}
}

.l-header__langButton {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 0.5em;
  border: 1px solid rgb(var(--color-gray-light));
  background: rgb(var(--color-base));
  font-size: 0.675em;
  font-weight: 600;
  font-family: var(--font-en);
  color: rgb(var(--color-contrast));

  .icon-chevron-down {
    width: 0.75em;
    height: 0.75em;
    transition: transform .2s;
  }

  &.is-open .icon-chevron-down {
    transform: rotate(180deg);
  }

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

.top .l-header__langButton {
  background: transparent;
  color: rgb(var(--color-base));

  @media screen and (min-width: 1024px) {}
}

.l-header__lang {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: calc(100% - 0.75em);
  padding: 4px 0;
  background: rgb(var(--color-base));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);

  /* 閉じている状態 */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;

  &.is-open {
    max-height: 200px;
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s;
  }

  @media screen and (min-width: 768px) {
    position: relative;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    top: auto;
    right: auto;
    opacity: 1;
    visibility: visible;
    max-height: inherit;
    min-width: inherit;
    box-shadow: none;
  }

  li {
    @media screen and (min-width: 768px) {
      font-size: 0.875em;
    }

    @media screen and (min-width: 1080px) {
      /* font-size: 1.2vw; */
      font-size: calc(var(--vu) * 1.2);
    }
  }

  li:not(:last-of-type) {
    border-bottom: 1px solid rgb(var(--color-gray-light));

    @media screen and (min-width: 768px) {
      border: none;
    }
  }

  a {
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75em;
    font-weight: 700;
    padding: 0.5rem;
    line-height: 1.2;

    @media screen and (min-width: 768px) {
      font-size: 0.875em;
      padding: 0.25rem 0.5rem;
    }

    &:hover,
    &.is-current {
      color: rgb(var(--color-primary));
    }
  }
}

.top .l-header__lang {
  background: transparent;
  border: 1px solid rgb(var(--color-base));

  a {
    color: rgb(var(--color-base));

    &:hover,
    &.is-current {
      color: rgb(var(--color-primary));
    }
  }

  @media screen and (min-width: 768px) {
    border: none;
  }
}

/* ==========================================================================
   10. Typography
   ========================================================================== */
.p-pageHeader__title {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  text-align: center;
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: 0;
  margin: clamp(2.5rem, 1.3667rem + 5.6667vw, 6.75rem) auto 0;
  position: relative;
  /* wbrで改行 */
  /* CJKテキストでの折り返しを無効化 */
  word-break: keep-all;
  /* 長い単語でも折り返し可能に */
  overflow-wrap: anywhere;

  &::after {
    content: attr(data-caps);
    display: block;
    font-family: var(--font-en);
    font-size: 3em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: capitalize;
    /* margin-bottom: 1em; */
  }

}

.en .p-pageHeader__title {
  font-size: calc(1.25em * 3.5);
  font-weight: 700;
  font-family: var(--font-en);
  line-height: 1;
  letter-spacing: 0;
  text-transform: capitalize;

  &::after {
    display: none;
  }
}

.products_child .p-pageHeader__title {
  /* root:16,minV:320,maxV:1520, 66 - 200px */
  font-size: clamp(4.125rem, 1.8917rem + 11.1667vw, 12.5rem);
  font-weight: 700;
  font-family: var(--font-en);
  line-height: 1;
  letter-spacing: 0;

  &::after {
    display: none;
  }
}

.section-title {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  font-weight: 400;
  font-size: calc(24 / var(--root-font-size) * 1em);
  letter-spacing: 0.05em;
  line-height: 2;
  margin-top: 0;
  margin-bottom: 2em;
  position: relative;
  /* wbrで改行 */
  /* CJKテキストでの折り返しを無効化 */
  word-break: keep-all;
  /* 長い単語でも折り返し可能に */
  overflow-wrap: anywhere;

  &::before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 1px;
    background: rgb(var(--color-white), 0.5);
    position: absolute;
    top: 0.3em;
    left: 0;
  }

  &::after {
    content: attr(data-caps);
    display: block;
    font-family: var(--font-en);
    font-size: calc(12 / var(--root-font-size) * 1rem);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1em;
    margin-left: 5em;
  }
}

.page-title {
  margin-bottom: 0;

  .categories {
    position: absolute;
    right: 0;
    top: -0.25em;
  }

  .tag {
    font-size: 0.75rem;
    padding: 0.125em 0.75em;
  }
}

.page-title:has(.categories) {
  padding-right: 6em;
}


.section-main-title {
  font-size: calc(20 / var(--root-font-size) * 1em);
  font-weight: 400;
  width: fit-content;
  max-width: 100%;
  display: flex;
  margin-top: 0;
  flex-direction: column-reverse;
  justify-content: flex-start;
  word-break: keep-all;
  overflow-wrap: anywhere;

  &::after {
    content: attr(data-caps);
    display: block;
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1em;
  }
}

.section-main-title.font-en {
  font-family: var(--font-en);
  text-transform: capitalize;
  font-weight: 300;
}

.section-sub-title {
  font-size: 1em;
  font-weight: 400;
  margin-top: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.lead {
  font-weight: 500;
  line-height: 1.8;
}

.single .post-title {
  font-size: 1.25em;
  font-weight: 400;
  margin-top: 1.5em;
  margin-bottom: 1.75em;
}

/* ==========================================================================
   11. Flex / box / Slider
   ========================================================================== */
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-item {
  flex: 100%;
}

.flex-2cols {
  gap: 2.5em;

  .flex-item {
    @media screen and (min-width: 768px) {
      flex: 1;
    }
  }
}

.notice-box {
  padding: 2.5em 1.5em;
  border: 1px solid rgb(var(--color-white));
  margin-inline: auto;
  margin-block: 5em;

  @media screen and (min-width: 768px) {
    padding: 3em 2.5em;
  }

  @media screen and (min-width: 960px) {
    padding: 3.5em;
  }

  &.narrow {
    max-width: 960px;
  }

  .flex-item {
    align-self: flex-end;

    .btn {
      margin-left: auto;
      font-size: 0.875em;
    }
  }
}

.notice-title {
  font-size: 1.25em;
  font-weight: 400;
  margin-bottom: 2.5em;
}

.notice-sub-title {
  font-size: 0.875em;
  font-weight: 500;
  line-height: calc(34/14);
  margin-bottom: 5.7em;
}

.notice-text {
  font-size: 0.75em;
  line-height: calc(25/12);
}

.fade-slider {
  aspect-ratio: 1366/768;
  overflow: hidden;
}

.carousel-slider {
  margin-top: 3em;

  .splide__slide {
    @media screen and (min-width: 480px) {
      max-width: calc(100%/2);
    }

    @media screen and (min-width: 768px) {
      max-width: calc(100%/3);
    }
  }
}

.splide__slide picture,
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.lb-gallery {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);

  @media screen and (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media screen and (min-width: 1280px) {
    grid-template-columns: repeat(4, 1fr);
  }


}


.lb-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 460/300;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;

  picture,
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--lb-duration) ease, opacity var(--lb-duration) ease;
  }

  &:hover img,
  &:focus-visible img {
    transform: scale(1.035);
  }
}


/* キーボードフォーカスを常にはっきり見せる（マウスクリック時は出さない） */
.lb-gallery__item:focus-visible {
  outline: 3px solid var(--lb-focus-color);
  outline-offset: -3px;
}

.lb-gallery__item:focus:not(:focus-visible) {
  outline: none;
}

/* 拡大アイコンのヒント（hover/focus時） */
.lb-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 40%);
  opacity: 0;
  transition: opacity var(--lb-duration) ease;
  pointer-events: none;
}

.lb-gallery__item:hover::after,
.lb-gallery__item:focus-visible::after {
  opacity: 1;
}

/* ==========================================================================
   Dialog（ライトボックス本体）
   ========================================================================== */

.lb-modal {
  padding: 1em;
  border: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  color: rgb(var(--color-white));
  backdrop-filter: blur(3px);
}

.lb-modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.lb-modal[open] {
  display: flex;
}

.lb-modal__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.lb-modal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  flex: 0 0 auto;
}

.lb-modal__counter {
  font-size: 0.875em;
  letter-spacing: 0.02em;
  font-family: var(--font-en);
  color: rgba(var(--color-white), 0.6);
  font-variant-numeric: tabular-nums;
}

.lb-modal__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 calc(44px + 2em);
}

.lb-modal__img-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-modal__img {
  max-width: 100%;
  max-height: calc(100vh - 170px);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--lb-duration) ease;
}

.lb-modal__img.is-loaded {
  opacity: 1;
}

.lb-modal__caption {
  flex: 0 0 auto;
  padding: 10px 16px 20px;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(var(--color-white), 0.6);
  max-width: 60ch;
  margin: 0 auto;
}

.lb-modal__caption:empty {
  display: none;
}

/* ボタン共通 */
.lb-modal button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--color-white), 0.24);
  transition: background var(--lb-duration) ease;
}

.lb-btn:hover {
  background: rgba(var(--color-white), 0.4);
}

.lb-btn:focus-visible {
  outline: 3px solid var(--lb-focus-color);
  outline-offset: 2px;
}

.lb-btn svg {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lb-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
}

.lb-modal__nav--prev {
  left: 4px;
}

.lb-modal__nav--next {
  right: 4px;
}

.lb-modal__nav:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* アクセシビリティ / レスポンシブ */
@media (max-width: 640px) {
  .lb-modal__stage {
    padding: 0 calc(36px + 2em);
  }

  .lb-modal__nav {
    width: 36px;
    height: 36px;
  }
}

/* スクリーンリーダー専用テキスト */
.lb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {

  .lb-gallery__item img,
  .lb-gallery__item::after,
  .lb-modal__img,
  .lb-btn {
    transition-duration: 0.001ms !important;
  }
}

/* 背景が inert 化されている間のスクロール固定 */
body.lb-modal-open {
  overflow: hidden;
}


/* ==========================================================================
   12. Categories, lists , Breadclumb
   ========================================================================== */
/* Breadclumb */
.p-breadcrumb {
  font-size: 0.75em;
  font-weight: 400;
  font-family: var(--font-en);
}

.p-breadcrumb__list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
}

.p-breadcrumb__item {
  display: flex;
  align-items: center;
  max-width: 50%;

  &:not(:has(> a)) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* padding-inline: 0.5em; */
  }

  &:not(:last-of-type)::after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    /* background: url(../img/icon/icon-cheveron-right.svg) no-repeat center / contain; */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.1 19.4'%3E%3Cpath d='M10.1,9.6L.7,19.4,0,18.7l8.7-9.1L0,.7.7,0l9.4,9.6Z' fill='%231C1C1C'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  a {
    width: 100%;
    display: inline-flex;
    align-items: center;

    /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; */
    /* padding-inline: 0.5em; */
    &:hover {
      opacity: 1;
      color: rgb(var(--color-primary));
    }
  }
}

.page:not(.products_child, .contact, .privacypolicy) .p-breadcrumb__item {
  &:not(:last-of-type)::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.1 19.4'%3E%3Cpath d='M10.1,9.6L.7,19.4,0,18.7l8.7-9.1L0,.7.7,0l9.4,9.6Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  a {
    color: rgb(var(--color-base));

    &:hover {
      opacity: 1;
      color: rgb(var(--color-primary));
    }
  }
}


.p-postDetail__meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.675em;
}

.p-postDetail__category {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 1em;
  font-size: 0.75em;
  line-height: 1.5;
  border: 1px solid rgb(var(--color-primary));
  border-radius: 100vmax;
  color: rgb(var(--color-primary));
  transition: color .3s, border-color .3s;
}

.p-postDetail__date {
  font-family: var(--font-en);
  font-weight: 300;
  /* color: rgb(var(--color-gray-dark)); */
}

.p-postDetail__title {
  font-size: 1.875em;
  font-weight: 600;
  line-height: 1.5;
  margin-top: calc(1em + 10px);
  margin-bottom: calc(2em + 4px);
  padding-bottom: calc(1em + 10px);
  border-bottom: 1px solid rgb(var(--color-contrast));
}

.p-postFilter {
  margin-bottom: 2.5em;

  @media screen and (min-width: 960px) {
    margin-bottom: 3.5em;
  }
}

.p-postFilter__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em;

}

.p-postFilter__item {}

.p-postFilter__link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 0.5em 1.5em;
  background: rgba(var(--color-primary), 0);
  border: 1px solid rgb(var(--color-primary));
  color: rgb(var(--color-primary));
  border-radius: 3px;

  &:hover {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-base));
    opacity: 1;
  }
}

.p-postFilter__link[aria-current="page"] {
  background: rgb(var(--color-primary));
  color: rgb(var(--color-base));

  &:hover {
    background: rgb(var(--color-base));
    color: rgb(var(--color-primary));

  }
}


.p-postList {
  display: flex;
  flex-direction: column;
  row-gap: 2.5em;
  margin: 0 auto 5em;
}

.p-postList__item {
  padding-bottom: 1.25em;
  border-bottom: 1px solid rgb(var(--color-gray-dark));
}

.p-postList__link {
  padding-right: calc(3em + 1.25em);
  position: relative;
  display: block;
  width: 100%;

  &:hover {
    opacity: 1;
    color: rgb(var(--color-primary));
  }

  &::after {
    content: "";
    display: block;
    width: 1.25em;
    height: 1.25em;
    padding: 0.25em;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-primary));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)' fill='%23DE3B00'/%3E%3C/svg%3E") no-repeat center / 0.675em auto;
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%);
    transition: right .3s;
  }

  &:hover::after {
    right: 1em;
    background: rgb(var(--color-primary)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / 0.675em auto;

  }
}

.p-postList__card {
  position: relative;


  .p-postDetail__meta {}

  .p-postDetail__title {
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 0.8em;
    margin-bottom: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}



.pagination {
  display: flex;
  justify-content: space-between;
  gap: 0.75em;
  width: fit-content;
  margin-inline: auto;
  margin-top: 4em;

  /* @media screen and (min-width: 480px) {
    margin-right: 0;
  } */

  &.btn-cols {
    gap: 1em;
  }

  .btn {
    padding: 0.75em 2em;
    flex: 1 1 auto;
    order: 3;
    justify-content: center;
    text-align: center;

    @media screen and (min-width: 480px) {
      order: inherit;
    }
  }

  .btn.prev {
    /* padding: 0.675em 0.25em 0.675em 2.5em; */
    order: 1;

    @media screen and (min-width: 480px) {
      order: inherit;
    }

    &::after {
      right: auto;
      left: 0.25em;
      transform: translateY(-50%) rotate(180deg);
      transition-property: left;
    }

    &:hover::after {
      right: auto;
      left: 0;
    }
  }

  .btn.next {
    order: 2;

    @media screen and (min-width: 480px) {
      order: inherit;
    }
  }
}

.page-numbers {
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.875em;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  font-family: var(--font-en);
  color: #989898;

  &.current,
  &:hover {
    color: rgb(var(--color-primary));
  }

  .svgicon {
    width: 0.675em;
    height: 0.675em;
  }

  &.prev {
    color: rgb(var(--color-primary));
    border: 1px solid rgb(var(--color-primary));
    border-radius: 50%;

    .svgicon {
      transform: rotate(180deg);
    }

    &:hover {
      background-color: rgb(var(--color-primary));
      color: rgb(var(--color-base));
    }
  }

  &.next {
    color: rgb(var(--color-primary));
    border: 1px solid rgb(var(--color-primary));
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary));
      color: rgb(var(--color-base));
    }
  }

}


/* ==========================================================================
   13. Section: Inquiry
   ========================================================================== */
.p-contactCta {
  background-color: rgb(var(--color-primary));
  color: rgb(var(--color-base));

  .inner {
    display: flex;
    flex-direction: column;

    @media screen and (min-width: 1080px) {
      flex-direction: row;
      justify-content: space-between;
      column-gap: 2.5em;
      padding-inline: 2.5em;
    }

    &::after {
      display: none;
    }

  }
}

.p-contactCta__lead {
  margin-bottom: 3rem;

  @media screen and (min-width: 1080px) {
    margin-bottom: 0;
    flex-basis: 35%;
  }

  @media screen and (min-width: 1280px) {
    flex-basis: auto;
  }
}

.top .p-contactCta__lead {
  @media screen and (min-width: 1024px) {
    /* margin-bottom: 3vh; */
    margin-bottom: calc(var(--vu) * 1.667);
  }
}

.p-contactCta__title {
  font-size: 3.5em;
  font-weight: 700;
  font-family: var(--font-en);
  margin-block: 0;
  line-height: calc(85/70);
}

.p-contactCta__text {
  font-size: 0.875em;
  line-height: calc(24/14);
}

.top .p-contactCta__text {
  @media screen and (min-width: 1024px) {
    /* font-size: 2.2vh; */
    font-size: calc(var(--vu) * 1.222);
    line-height: 1.65;
  }
}

.p-contactCta__list {
  @media screen and (min-width: 480px) {
    display: flex;
    gap: 2.5em;
  }

  @media screen and (min-width: 1080px) {
    flex-basis: 65%;
  }

  @media screen and (min-width: 1280px) {
    flex-basis: auto;
  }
}

.p-contactCta__item {
  padding-top: 1.5em;
  padding-bottom: 4em;
  border-top: 1px solid rgb(var(--color-base));

  @media screen and (min-width: 480px) {
    border-top: none;
    border-left: 1px solid rgb(var(--color-base));
    padding-top: 0;
    padding-inline: 2.5em;
  }

  @media screen and (min-width: 1025px) {
    padding-bottom: 12em;
  }

  @media screen and (min-width: 1080px) {
    flex: 1;
    padding-right: 0;
  }

  @media screen and (min-width: 1280px) {
    flex: auto;
  }

}

.p-contactCta__itemTitle {
  font-size: 2.5em;
  font-weight: 700;
  font-family: var(--font-en);
  margin-block: 0;
  line-height: calc(49/40);

}

.p-contactCta__itemLead {
  font-size: 0.875em;
  margin-top: 0;
  margin-bottom: 2rem;
}

.top .p-contactCta__itemLead {
  @media screen and (min-width: 1024px) {
    /* font-size: 2vh; */
    font-size: calc(var(--vu) * 1.111);
    line-height: 1.5;
    /* margin-bottom: 2vh; */
    margin-bottom: calc(var(--vu) * 1.111);
    margin-top: 0.75rem;
  }
}

.p-contactCta__tel {
  font-size: 1.875em;
  font-weight: 600;
  font-family: var(--font-en);
  margin-block: 0;
  line-height: 1;
  color: rgb(var(--color-base));

  &:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}

.top .p-contactCta__tel {
  @media screen and (min-width: 1024px) {
    /* font-size: 4.25vh; */
    font-size: calc(var(--vu) * 2.361);
  }
}

.p-contactCta__mailBtn {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(var(--color-base));
  background-color: rgb(var(--color-base));
  border-radius: 50%;
  display: grid;
  place-content: center;
  color: rgb(var(--color-primary));

  &:hover {
    opacity: 1;
    color: rgb(var(--color-base));
    background-color: rgb(var(--color-primary));
  }
}

.top .p-contactCta__mailBtn {
  @media screen and (min-width: 1024px) {
    /* font-size: 2.25vh; */
    font-size: calc(var(--vu) * 1.25);
  }
}


.top {
  .p-contactCta {
    @media screen and (min-width: 1024px) {
      /* max-width: 460px; */
      max-width: 46vw;
    }

    @media screen and (min-width: 1400px) {
      max-width: 28vw;
    }

    & .inner {
      padding-inline: clamp(1rem, 0.6rem + 2vw, 2.5rem);

      @media screen and (min-width: 1024px) {
        flex-direction: column;
        justify-content: space-between;
        column-gap: 0;
        /* row-gap: 3.5vh; */
        row-gap: calc(var(--vu) * 1.945);
        padding-inline: 3.5vw;
        height: 100%;
      }
    }
  }

  .p-contactCta__title {
    @media screen and (min-width: 1024px) {
      /* font-size: 3em; */
      /* font-size: 6.5vh; */
      font-size: calc(var(--vu) * 3.611);
      line-height: 1.2;
    }
  }

  .p-contactCta__list {
    @media screen and (min-width: 1024px) {
      flex-direction: column;
      flex-basis: auto;
      margin-top: auto;
      /* gap: 3.5vh; */
      gap: calc(var(--vu) * 1.945);
      /* margin-bottom: 8em; */
    }
  }

  .p-contactCta__item {
    @media screen and (min-width: 1024px) {
      padding-inline: 0;
      /* padding-bottom: 2.5em; */
      /* padding-bottom: 3.5vh; */
      padding-bottom: calc(var(--vu) * 1.945);
      border-left: none;
      border-bottom: 1px solid rgb(var(--color-base));
      display: flex;
      flex-wrap: wrap;

      &:last-of-type {
        border-bottom: none;
      }
    }
  }

  .p-contactCta__itemTitle {
    @media screen and (min-width: 1024px) {
      /* font-size: 4vh; */
      font-size: calc(var(--vu) * 2.222);
      margin-right: 0.75rem;
      /* font-size: 1.875em;
       */
    }
  }

  .p-contactCta__tel {
    @media screen and (min-width: 1024px) {
      width: fit-content;
    }
  }

  .p-contactCta__mailBtn {
    @media screen and (min-width: 1024px) {
      margin-left: auto;
    }
  }
}


/* ==========================================================================
   14. Footer
   ========================================================================== */
.l-footer {
  color: rgb(var(--color-base));
  background-color: rgb(var(--color-gray-deep));
  margin: 0;
  padding-top: 2.5em;
  padding-bottom: 1.5em;

  a {
    color: rgb(var(--color-base));
  }

  .inner {
    @media screen and (min-width: 1080px) {
      max-width: 100%;
      padding-inline: 2.5em;
      display: flex;
      flex-wrap: wrap;
      column-gap: 2.5em;
    }

    @media screen and (min-width: 1360px) {
      padding-right: 5em;
    }
  }
}

.l-footer__logo {
  max-width: 270px;
  margin-top: 0;
  margin-bottom: 2.5em;

  @media screen and (min-width: 1080px) {
    flex-basis: 20%;
  }

  @media screen and (min-width: 1280px) {
    flex-basis: auto;
  }

  img {
    display: block;
    height: auto;
    width: 100%;
  }
}

.l-footer__nav {
  margin-bottom: 2.5em;

  @media screen and (min-width: 1080px) {
    flex-basis: calc(80% - 2.5em);
    margin-left: auto;
    margin-right: 0;
  }

  @media screen and (min-width: 1280px) {
    flex-basis: auto;
  }
}

.l-footer__navList {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;

  @media screen and (min-width: 1080px) {
    gap: 2em;
    justify-content: space-between;
  }

  @media screen and (min-width: 1280px) {
    gap: 3.5em;
  }
}

.l-footer__navGroup {
  flex-basis: calc(50% - 0.5em);

  @media screen and (min-width: 768px) {
    flex-basis: calc(25% - 1em);
  }

  @media screen and (min-width: 960px) {
    flex-basis: calc((100% - 5em) / 6);
  }

  @media screen and (min-width: 1080px) {
    flex-basis: auto;
  }

  &:not(:has(.l-footer__navSubList)) {
    flex-basis: 100%;

    @media screen and (min-width: 960px) {
      flex-basis: calc((100% - 5em) / 6);
    }

    @media screen and (min-width: 1080px) {
      flex-basis: auto;
    }
  }

  a:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 8px;
  }
}

.l-footer__navHeading {
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.l-footer__navSubList {
  display: flex;
  flex-direction: column;
  gap: 0.25em;

  li {
    font-size: 0.875em;
  }

  a:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 8px;
  }

}

.l-footer__copyright {
  font-family: var(--font-en);
  font-weight: 300;
  color: rgb(var(--color-base));

  @media screen and (min-width: 1080px) {
    flex-basis: 100%;
  }
}

.top {
  .l-footer {
    background-color: rgb(var(--color-gray-dark));

    .inner {
      display: grid;
      align-content: end;
      justify-items: end;
      padding-inline: clamp(1rem, 0.6rem + 2vw, 2.5rem);
      height: 100%;
    }
  }

  .l-footer__copyright {
    flex-basis: 100%;
    text-align: right;
  }

  .p-topHero__pageTop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    margin-bottom: 1.5rem;
    font-family: var(--font-en);
    font-size: 0.875em;
    font-weight: 700;

    &::before {
      content: "";
      display: inline-block;
      width: 120px;
      height: 1px;
      margin-top: 4px;
      background-color: rgb(var(--color-base));
      transition: background-color .3s;
    }

    &:hover {
      opacity: 1;
      color: rgb(var(--color-primary));

      &::before {
        background-color: rgb(var(--color-primary));
      }
    }
  }
}


/* ==========================================================================
   15. Form
   ========================================================================== */
.form-container {
  width: 100%;
  margin: 0 auto;
  /* margin-top: 5em; */
  padding: 2.5em 1em;
  background-color: rgb(var(--color-gray-light));

  @media screen and (min-width: 768px) {
    padding: 4em;
  }

  @media screen and (min-width: 1120px) {
    padding: 5em;
  }
}


.form-notice {
  font-size: 0.875em;
  line-height: 2.2;
  margin-bottom: 1.5em;

  p {
    font-size: 1em;
    padding-top: 0;
  }
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.675em 1em;
  margin-top: 2.5rem;
  /* margin-bottom: 2.5rem; */
}

/* .form-row:first-of-type {
} */

.field-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.field-label .required {
  margin-left: 0.2em;
}

.field-block {
  flex: 1 1 auto;
  min-width: 0;
}

.field-shell {
  display: flex;
  align-items: center;
}

.address-row-gap {
  margin-top: 1rem;
}

.form-container .input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.form-container .input-wrap.small {
  max-width: 50%;

  @media screen and (min-width: 480px) {
    max-width: 12rem;
  }
}

.form-container .input-wrap.medium {
  @media screen and (min-width: 480px) {
    max-width: 25rem;
  }
}


.form-title {
  font-size: 1.25em;
  font-weight: 500;
  margin-bottom: 1.25em;
}

.form-notice + .form-title {
  margin-top: 2em;

}

.form-row + .form-title {
  margin-top: 3.25em;
}

.field-shell .prefix,
.field-shell .suffix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875em;
}

.field-shell .prefix {
  margin-right: 1em;
}

.field-shell .suffix {
  margin-left: 1.5em;
}

.field-shell .suffix.auto {
  font-size: 0.75rem;
  padding: 0.25em 0.5em;
  background-color: rgb(var(--color-gray-deep));
  color: rgb(var(--color-base));
}

.helper-text {
  margin: 0.45rem 0 0;
  padding-left: 0.15rem;
  font-size: 0.75rem;
}

.field-block p + p {
  margin-top: 1.5em;
}

/* form parts */
input:not([type="checkbox"], [type="radio"], [type="submit"], [type="file"]),
select,
textarea {
  width: 100%;
  min-width: 0;
  outline: none;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  padding: 0.75em 1em;
  color: rgb(var(--color-contrast));
  background: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-gray));
  box-shadow: inset 0 0 0 1px rgba(var(--color-white), 0.02);
}

textarea {
  height: 15em;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.5em;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: rgb(var(--color-gray));
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  margin: 0;
  padding: 0;
  background: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-gray));
  border-radius: 0;
  position: relative;
  box-shadow: none;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  border-color: rgb(var(--color-primary));
}

input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 0.75em;
  height: 0.75em;
  /* background: url(../img/icon/icon-check.svg) no-repeat center center / contain; */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.807 13.513'%3E%3Cpath d='M8554.638,3353.358l-6.467-5.487,1.295-1.525,4.939,4.191,9.045-10.692,1.527,1.292Z' transform='translate(-8548.171 -3339.845)' fill='%23DE3B00'/%3E%3C/svg%3E") no-repeat center / contain;

  position: absolute;
  left: 50%;
  top: 0.125em;
  transform: translateX(-50%);
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  background: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-gray));
  position: relative;
  cursor: pointer;
}

input[type="radio"]:checked::after {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: rgb(var(--color-primary));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

input[type="date"] {
  padding-right: 1.5em;
  cursor: pointer;
  position: relative;
}

/* input内のどこをクリックしてもカレンダーが展開 */
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background: transparent;
  z-index: 1;
  cursor: pointer;
}

/* カレンダーアイコン */
input[type="date"]::after {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  background: url("../img/icon/icon-calendar.svg") no-repeat center center / contain;
  position: absolute;
  top: 50%;
  right: 1em;
  translate: 0 -50%;
}

.checkbox-field,
.radio-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.checkbox-field {
  margin-top: 0.75em;
}

.radio-field {
  gap: 1em 2em;
  margin-top: 0.5em;
}

.check-label,
.check-label label,
.radio-label label,
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.5;
  cursor: pointer;
}


.date-row {
  gap: 1em 2em;
  flex-wrap: wrap;
}

.date-row .date-field {
  width: auto;
  min-width: 100%;

  @media screen and (min-width: 480px) {
    min-width: 12.5em;
  }
}

.date-row .select-field {
  width: auto;
  min-width: 100%;

  @media screen and (min-width: 480px) {
    min-width: 15em;
  }
}

.select-label {
  display: flex;
  width: 100%;
  position: relative;
}

.select-label::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  /* background: url(../img/icon/icon-cheveron-down.svg) no-repeat center center / contain; */

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.414 10.088'%3E%3Cpath d='M437.868,2114.872l-9.82-9.365.69-.724,9.122,8.7,8.9-8.695.7.715Z' transform='translate(-428.048 -2104.783)' fill='%23343434'/%3E%3C/svg%3E") no-repeat right center / contain;
  position: absolute;
  right: 1em;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}

.form-row:has(.accept-field) {
  margin-bottom: 4em;
}

.field-block:has(.accept-field) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.accept-label label,
.accept-label {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  line-height: 1.6;
  cursor: pointer;
}

.accept-label a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.accept-label a:hover {
  text-decoration: none;
}

.field-block:has(.submit-field) {
  display: flex;
  justify-content: center;
}

.submit-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.submit-field input {
  color: rgb(var(--color-base));
}

.submit-field input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  background-size: 200% 100%;
  background-position: right bottom;
  background-image: linear-gradient(to right, rgb(var(--color-base)) 0%, rgb(var(--color-base)) 50%, rgb(var(--color-primary)) 50%, rgb(var(--color-primary)) 100%);
  color: rgb(var(--color-base));
  border-radius: 5px;
  border: 1px solid rgb(var(--color-primary));
  padding: 1.25em 5em;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s;

  &:disabled {
    background: rgb(var(--color-gray));
    color: rgb(var(--color-gray-dark));
    border-color: rgb(var(--color-gray));

    &:hover {
      color: rgb(var(--color-gray-dark));
    }
  }

  &:hover {
    background-position: left bottom;
    opacity: 1;
    color: rgb(var(--color-primary));
  }
}


.submit-field:has(:disabled):hover {
  background-position: right bottom;
  color: rgb(var(--color-gray-dark));
}

.submit-field .btn:hover {
  opacity: 0.85;
}

/* CF7 */
.wpcf7-form-control-wrap {
  width: 100%;
}

.wpcf7-form-control-wrap:has(.wpcf7-checkbox) {
  display: block;
}

.wpcf7-not-valid-tip {
  font-size: 0.75em;
}

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

.wpcf7-checkbox {
  display: grid;
  gap: 0.9rem 1.5rem;

  @media screen and (min-width: 560px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   16. block-editor styles
   ========================================================================== */
.wp-block-group {
  padding-top: var(--base-padding-top);
  /* root:16px min:320 max:1520 minS:72 maxS:120 */
  padding-bottom: clamp(4.5rem, 3.7rem + 4vw, 7.5rem);

  > .wp-block-group {
    padding-block: 0;
  }

  + .wp-block-group {
    padding-top: 0;
  }
}


.wp-block-paragraph {
  /* width: 100%; */
  /* line-height: 2.2; */
  margin-bottom: 0.75em;

  @media screen and (min-width: 1080px) {
    /* font-size: 1.2vw; */
    font-size: calc(var(--vu) * 1.2);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1vw; */
    font-size: calc(var(--vu) * 1);
  }
}

.wp-block-paragraph:not(.has-background) {
  padding-top: 0.25em;
}

.wp-block-paragraph a {
  /* color: rgb(var(--color-white)); */
  text-decoration: underline;
}

/* .wp-block-paragraph a[target=_blank]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 0.25em;
  background: url(../img/icon/icon-blank.svg) no-repeat center center/contain;
  font-size: 0.875em;
  color: rgb(var(--color-white));
} */

.wp-block-paragraph a:hover {
  color: rgb(var(--color-primary));
  opacity: 1;
  text-decoration: none;
}

.editor-area sup,
.editor-area sub {
  font-size: 0.675em;
  line-height: 1.2;
  margin-inline: 1px;
}

.editor-area sup {
  vertical-align: text-top;
}

.editor-area strong {
  font-weight: 700;
}

.editor-area iframe[src^="https://www.google.com/"] {
  width: 100%;
  height: 360px;
}

.editor-area > .wp-block-image {
  margin-block: 1em;
}

.editor-area > .has-border-color {
  padding: 1.25em 2.375em;
}

.has-text-align-left {
  text-align: left;
}

.has-text-align-right {
  text-align: right;
}

.has-text-align-center {
  text-align: center;
}


.has-en-font-family {
  font-family: var(--font-en);
}

.has-system-font-font-family {
  font-family: var(--font-jp);
}

.wp-block-heading {
  font-family: var(--font-jp);
  font-weight: 600;
}


h1.wp-block-heading,
.has-huge-font-size {
  /* @include clampSize(font-size, 33, 320, 1280, 38); */
  /* line-height: 1.55;
  --min-size: 28;
  --max-size: 40;
  --clamp-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100vw - var(--min-viewport) * 1px) / (var(--max-viewport) - var(--min-viewport)));
  --font-size: clamp(var(--min-size) * 1px,
      var(--clamp-size),
      var(--max-size) * 1px);
  font-size: var(--font-size); */
  line-height: 1.5;
  font-size: 2.5em;
}

/* .has-xx-large-font-size {
  line-height: 1.55;
  font-size: 1.875em;
} */

h2.wp-block-heading,
.has-x-large-font-size {
  line-height: 1.5;
  font-size: 1.875em;

  @media screen and (min-width: 1080px) {
    /* font-size: 2.75vw; */
    font-size: calc(var(--vu) * 2.75);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 2vw; */
    font-size: calc(var(--vu) * 2);
  }
}

h2.wp-block-heading {
  margin-top: 2.67em;
}

h3.wp-block-heading,
h4.wp-block-heading,
.has-large-font-size {
  line-height: 1.5;
  font-size: 1.5em;

  @media screen and (min-width: 1080px) {
    /* font-size: 2vw; */
    font-size: calc(var(--vu) * 2);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.75vw; */
    font-size: calc(var(--vu) * 1.75);
  }
}

h3.wp-block-heading,
h4.wp-block-heading {
  margin-top: 1.675em;
}


h5.wp-block-heading,
.has-medium-font-size {
  font-size: 1.25em;

  @media screen and (min-width: 1080px) {
    /* font-size: 1.5vw; */
    font-size: calc(var(--vu) * 1.5);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.2vw; */
    font-size: calc(var(--vu) * 1.2);
  }
}

h5.wp-block-heading {
  margin-top: 1.5em;
}

h6.wp-block-heading,
.has-normal-font-size {
  font-size: 1em;

  @media screen and (min-width: 1080px) {
    /* font-size: 1.2vw; */
    font-size: calc(var(--vu) * 1.2);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1vw; */
    font-size: calc(var(--vu) * 1);
  }
}

h6.wp-block-heading {
  margin-top: 1.25em;
}

.has-small-font-size {
  font-size: 0.875em;
}

.has-x-small-font-size {
  font-size: 0.75em;
}

.has-xx-small-font-size {
  font-size: 10px;
}



.wp-block-heading.is-style-underline {
  padding-bottom: 0.25em;
  margin-top: 2.67em;
  margin-bottom: 1.35em;
  border-bottom: 1px solid rgb(var(--color-primary));
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 60%;
    height: 3px;
    background-color: rgb(var(--color-primary));
    position: absolute;
    bottom: -2px;
    left: 0;
  }

  &.has-text-color {
    border-color: currentColor;

    &::before {
      background-color: currentColor;
    }
  }
}

.overseas-base .wp-block-heading.is-style-underline {
  margin-bottom: 2.675em;
}

.wp-block-heading.is-style-hasnumber {
  display: flex;
  gap: 0.5em;
  position: relative;

  mark {
    flex-shrink: 0;
    background: none !important;
    /* color: currentColor !important; */
    font-size: 1em;
    font-family: var(--font-en);
    font-weight: 700;
    /* line-height: 1; */
    padding-right: 0.5em;
    border-right: 1px solid currentColor;

  }
}

.editor-area .wp-block-heading:first-of-type,
.wp-block-group .wp-block-heading:first-of-type,
.wp-block-columns .wp-block-heading:first-of-type {
  margin-top: 0;
}



sup,
sub {
  display: inline-block;
  vertical-align: middle;
}

hr,
.wp-block-separator {
  width: 100%;
  border: none;
  border-top: 1px solid;
  background-color: rgba(var(--color-contrast), 0.2);
  margin-top: 2.5em;
  margin-bottom: 2.5em;
  color: rgba(var(--color-contrast), 0.2);
}

hr.has-background,
.wp-block-separator.has-background {
  padding: 0;
}

.wp-block-list {
  padding-left: 1.625em;
}

.wp-block-list ul,
.wp-block-list ol {
  margin-top: 0.5em;
}

.wp-block-list li {
  line-height: 1.75;
  margin-bottom: 0.5em;
}

ul.wp-block-list li::marker {
  display: none;
}

.wp-block-list li .wp-block-list {
  margin-top: 1em;
  margin-bottom: 1.5em;
}

ul.wp-block-list {
  list-style: none;
}

ul.wp-block-list > li {
  position: relative;
}

ul.wp-block-list > li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1px;
  background-color: rgb(var(--color-primary));
  position: absolute;
  left: -1.75em;
  top: 0.9em;
}

ul.wp-block-list > li li::marker {
  color: rgb(var(--color-primary));
}

ul.wp-block-list > li ul.wp-block-list li {
  position: relative;
}

/* ul.wp-block-list>li ul.wp-block-list li::before {
  width: 4px;
  height: 4px;
  top: 0.85em;
  background-color: rgb(var(--color-primary));

} */

ol.wp-block-list,
ol.wp-block-list li {
  list-style: decimal;
}

ol.wp-block-list li::marker {
  display: block;
  font-family: var(--font-en);
  /* font-size: 0.875em; */
  font-weight: 500;
  color: rgb(var(--color-primary));
}

ol.wp-block-list li li::marker {
  color: rgb(var(--color-primary));
}

ol.wp-block-list li ul.wp-block-list {
  padding-left: 1.5em;
}

ol.wp-block-list li ul.wp-block-list li {
  list-style: none;
}

ol.wp-block-list li ul.wp-block-list li::marker {
  display: none;
}

ol.wp-block-list li ul.wp-block-list li::before {
  left: -1.5em;
}

.alignleft:not(.post-ttl) {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

.alignright:not(.post-ttl) {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}

.clearfloat {
  clear: both;
  margin: 1em 0;
}

.wp-block-image {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.wp-block-image figure,
.wp-block-image picture {
  margin: 0;
  width: 100%;
  display: block;
  position: relative;
}

.wp-block-image .wp-element-caption {
  margin-bottom: 1em;
  margin-top: 0.5em;
  font-size: 0.75rem;
  text-align: center;
  font-weight: var(--weight-medium);
  color: rgb(var(--color-gray-medium));
}

.wp-block-image picture,
.wp-block-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.wp-block-image.size-thumbmail {
  max-width: 240px;
}

.wp-block-image.size-thumb picture,
.wp-block-image.size-thumb img,
.wp-block-image.size-medium picture,
.wp-block-image.size-medium img,
.wp-block-image.size-large picture,
.wp-block-image.size-large img,
.wp-block-image.size-full picture,
.wp-block-image.size-full img,
.wp-block-image.alignleft picture,
.wp-block-image.alignright picture,
.wp-block-image.alignleft img,
.wp-block-image.alignright img {
  width: 100%;
}

.wp-block-image.size-large {
  max-width: 80%;
}

.wp-block-image.size-full {
  width: 100%;
}

.wp-block-image.size-full picture,
.wp-block-image.size-full img {
  width: 100%;
}

.wp-block-image.size-medium,
.wp-block-image.alignleft,
.wp-block-image.alignright {
  max-width: 50%;
}

.wp-block-image.aligncenter {
  margin-inline: auto;
}

.wp-block-image.alignright {
  margin-top: 0;
  margin-left: 1em;
}

.wp-block-image.alignleft {
  margin-top: 0;
  margin-right: 1em;
}

.wp-block-image.alignleft + *,
.wp-block-image.alignright + * {
  margin-top: 0;
  padding-top: 0;
}

.wp-block-embed.is-type-video {
  aspect-ratio: 16/9;
}

.wp-block-embed .wp-block-embed__wrapper {
  width: 100%;
  height: 100%;
}

.wp-block-embed iframe {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.wp-block-embed iframe[src^="https://www.google.com/"] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.wp-block-embed {
  margin-bottom: 2em;
}

.wp-block-embed .wp-element-caption {
  margin-bottom: 1em;
  margin-top: 1em;
  font-size: 0.75rem;
  text-align: center;
  font-weight: 400;
  color: rgb(var(--color-gray-medium));
}

.editor-area > iframe[src*="youtube.com/embed/"] {
  height: auto;
  aspect-ratio: 16/9;
}

.wp-block-table,
.wp-block-flexible-table-block-table {
  overflow-x: scroll;
  padding-top: 1.5em;
  position: relative;
  width: 100%;
  margin: 1.5em auto 2.5em;
  /* https://mimihokuro.com/blog/change-color-svg-in-css/ */
  /* ストライプ */
}


@media screen and (min-width: 768px) {

  .wp-block-table,
  .wp-block-flexible-table-block-table {
    padding-top: 0;
    overflow-x: hidden;
  }
}


.wp-block-table::before,
.wp-block-table::after,
.wp-block-flexible-table-block-table::before,
.wp-block-flexible-table-block-table::after {
  display: inline-block;
  font-size: 0.75em;
  color: rgb(var(--color-gray-medium));
  position: absolute;
  top: 0;
}

@media screen and (min-width: 768px) {

  .wp-block-table::before,
  .wp-block-table::after,
  .wp-block-flexible-table-block-table::before,
  .wp-block-flexible-table-block-table::after {
    display: none !important;
  }
}

.wp-block-table::before,
.wp-block-flexible-table-block-table::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  aspect-ratio: 1;
  top: 0.25em;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23484848' viewBox='0 0 448 512'%3E%3Cpath d='M128 40c0-22.1 17.9-40 40-40s40 17.9 40 40l0 148.2c8.5-7.6 19.7-12.2 32-12.2c20.6 0 38.2 13 45 31.2c8.8-9.3 21.2-15.2 35-15.2c25.3 0 46 19.5 47.9 44.3c8.5-7.7 19.8-12.3 32.1-12.3c26.5 0 48 21.5 48 48l0 48 0 16 0 48c0 70.7-57.3 128-128 128l-16 0-64 0-.1 0-5.2 0c-5 0-9.9-.3-14.7-1c-55.3-5.6-106.2-34-140-79L8 336c-13.3-17.7-9.7-42.7 8-56s42.7-9.7 56 8l56 74.7L128 40zM240 304c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 96c0 8.8 7.2 16 16 16s16-7.2 16-16l0-96zm48-16c-8.8 0-16 7.2-16 16l0 96c0 8.8 7.2 16 16 16s16-7.2 16-16l0-96c0-8.8-7.2-16-16-16zm80 16c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 96c0 8.8 7.2 16 16 16s16-7.2 16-16l0-96z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.wp-block-table::after,
.wp-block-flexible-table-block-table::after {
  content: "スクロールで全体をご覧いただけます";
  left: 1.75em;
}

.en .wp-block-table::after,
.en .wp-block-flexible-table-block-table::after {
  content: "You can view the entire table by scrolling.";
}

.cn .wp-block-table::after,
.cn .wp-block-flexible-table-block-table::after {
  content: "您可以通过滚动查看表格的全部内容。";
}

.wp-block-table .element-caption,
.wp-block-flexible-table-block-table .element-caption {
  color: rgb(var(--color-gray-medium));
  font-size: 0.875rem;
  margin-top: 0.5em;
  border: none;
}

.wp-block-table table,
.wp-block-flexible-table-block-table table {
  border-spacing: 0;
  width: 100%;
  min-width: 640px;
  border: none;
  background-color: transparent;
  overflow: hidden;

  @media screen and (min-width: 768px) {
    min-width: 100%;
  }
}


.wp-block-table.is-style-non-scroll-default,
.wp-block-table.is-style-non-scroll-stripe {
  overflow: hidden;
  padding-top: 0;

  &::before,
  &::after {
    display: none;
  }
}

.wp-block-table.is-style-non-scroll-default table,
.wp-block-table.is-style-non-scroll-stripe table {
  min-width: 100%;
}

/*
.wp-block-table table.has-fixed-layout,
.wp-block-flexible-table-block-table table.has-fixed-layout {
  table-layout: fixed;
}

.wp-block-table table:not(.has-fixed-layout:not(:has(thead))) {
  border-radius: 0;
}

.wp-block-table table:not(.has-fixed-layout:not(:has(thead))) td:first-of-type {
  width: 33%;
}

.wp-block-table table:not(.has-fixed-layout:not(:has(thead))) th+td:first-of-type {
  width: auto;
} */



.wp-block-table table th,
.wp-block-table table td {
  background: none;
  border: none;
  padding: 0.5em 0.75em;
  line-height: 1.7;
}

.wp-block-table table mark {
  font-size: 0.875rem;
  font-weight: 600;
}

.wp-block-table table mark:not([style^="background-color:rgba(0, 0, 0, 0)"]) {
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.25rem 1em;
  border-radius: 100vmax;
}


.wp-block-table table:has(thead) thead th {
  padding-block: 0.75em;
}

.wp-block-table table:has(thead) tbody td {
  padding: 1.5em;
}

.wp-block-table table tr {
  border-bottom: 1px solid rgb(var(--color-contrast));
}

.wp-block-table thead,
.wp-block-table tfoot {
  border: none !important;
}

.wp-block-table thead,
.wp-block-table thead tr,
.wp-block-table tfoot,
.wp-block-table tfoot tr {
  border: none;
}

.wp-block-table.p-productTabs__panel thead tr {
  border-bottom: 1px solid var(--border-color);
}


.wp-block-table thead th,
.wp-block-table thead td {
  font-weight: 600;
}

.wp-block-table:not(.p-productTabs__panel) thead th,
.wp-block-table:not(.p-productTabs__panel) thead td {
  background-color: rgb(var(--color-primary));
  color: rgb(var(--color-base));
}

.wp-block-table:not(.p-productTabs__panel, .is-style-stripes) thead th:not(:last-of-type),
.wp-block-table:not(.p-productTabs__panel, .is-style-stripes) thead td:not(:last-of-type) {
  border-right: 4px solid rgb(var(--color-gray-light));
}

.wp-block-table tfoot {
  border: none;
  font-size: 0.875em;
  color: rgb(var(--color-gray-medium));
}

.wp-block-table tbody td,
.wp-block-table tbody th {
  background-color: transparent;
}

.wp-block-table tbody td:first-of-type,
.wp-block-table tbody th:first-of-type {
  min-width: 10em;

  @media (min-width: 768px) {
    min-width: 20em;
  }
}

.die-casting .wp-block-table tbody td:first-of-type,
.die-casting .wp-block-table tbody th:first-of-type {
  @media (min-width: 768px) {
    width: 320px;
  }
}


/* table.is-style-stripes */
.wp-block-table.is-style-stripes,
.wp-block-table.is-style-non-scroll-stripe {
  border: none !important;
}

.wp-block-table.is-style-stripes table,
.wp-block-table.is-style-non-scroll-stripe table {
  border: none;
  background: none;
}

.wp-block-table.is-style-stripes thead,
.wp-block-table.is-style-non-scroll-stripe thead {
  background: transparent;
  border-bottom: 1px solid var(--border-color) !important;
}

.wp-block-table.is-style-stripes tfoot,
.wp-block-table.is-style-non-scroll-stripe tfoot {
  background: transparent;
  border-top: 1px solid var(--border-color) !important;
}

.wp-block-table.is-style-stripes thead tr:not(:last-of-type),
.wp-block-table.is-style-stripes tfoot tr:not(:last-of-type),
.wp-block-table.is-style-non-scroll-stripe thead tr:not(:last-of-type),
.wp-block-table.is-style-non-scroll-stripe tfoot tr:not(:last-of-type) {
  border-bottom: 1px solid var(--border-color);
}

.wp-block-table.is-style-stripes thead th,
.wp-block-table.is-style-stripes thead td,
.wp-block-table.is-style-non-scroll-stripe thead th,
.wp-block-table.is-style-non-scroll-stripe thead td {
  background: none;
  border: none;
  color: rgb(var(--color--contrast));
}

.wp-block-table.is-style-stripes tfoot,
.wp-block-table.is-style-non-scroll-stripe tfoot {
  border: none;
  /* border-top: 1px solid rgb(var(--color-gray-dark)); */
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-non-scroll-stripe td,
.wp-block-table.is-style-non-scroll-stripe th {
  background: none;
  border: none;
}

.wp-block-table.is-style-stripes tbody tr,
.wp-block-table.is-style-non-scroll-stripe tbody tr {
  border: none;
  background: transparent !important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even),
.wp-block-table.is-style-stripes tbody tr:nth-of-type(even),
.wp-block-table.is-style-non-scroll-stripe tbody tr:nth-child(even),
.wp-block-table.is-style-non-scroll-stripe tbody tr:nth-of-type(even) {
  background: transparent !important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.wp-block-table.is-style-stripes tbody tr:nth-of-type(odd),
.wp-block-table.is-style-non-scroll-stripe tbody tr:nth-child(odd),
.wp-block-table.is-style-non-scroll-stripe tbody tr:nth-of-type(odd) {
  background: transparent !important;
}

.wp-block-table.is-style-stripes tbody td:first-of-type,
.wp-block-table.is-style-non-scroll-stripe tbody td:first-of-type {
  color: rgb(var(--color-primary));
  font-weight: 700;
  border-bottom: 1px solid rgb(var(--color-primary));
}

.wp-block-table.is-style-stripes tbody td:first-of-type,
.wp-block-table.is-style-stripes tbody th:first-of-type,
.wp-block-table.is-style-non-scroll-stripe tbody td:first-of-type,
.wp-block-table.is-style-non-scroll-stripe tbody th:first-of-type {
  min-width: 6em;
  padding-left: 0;

  @media (min-width: 768px) {
    min-width: 6em;
  }
}

/* flexible-table-block */
/* .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
  border: none;
  padding: 1em 0.875em;
  background-color: rgb(var(--color-white), 0.5);
  border-left: 4px solid rgb(var(--color-white));
  border-bottom: 4px solid rgb(var(--color-white));
}

.wp-block-flexible-table-block-table thead {
  background-color: rgb(var(--color-gray));
  border: none;
}

.wp-block-flexible-table-block-table thead tr {
  border-bottom: 4px solid rgb(var(--color-white));
}

.wp-block-flexible-table-block-table table thead th,
.wp-block-flexible-table-block-table table thead td {
  border-left: 4px solid rgb(var(--color-white));

  color: rgb(var(--color-white));
  background-color: rgb(var(--color-gray));
}

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table thead th {
  background-color: rgb(var(--color-gray));
}

.wp-block-flexible-table-block-table>table tbody tr th,
.wp-block-flexible-table-block-table>table tbody tr td {
  border-left: 4px solid rgb(var(--color-white));
  border-bottom: 4px solid rgb(var(--color-white));
  background-color: rgb(var(--color-white), 0.5);
}

.wp-block-flexible-table-block-table>table tbody td:first-of-type,
.wp-block-flexible-table-block-table>table tbody th:first-of-type {
  min-width: 6em;
  background-color: rgb(var(--color-gray));
  color: rgb(var(--color-white));

}

.wp-block-flexible-table-block-table>table tbody td:first-of-type,
.wp-block-flexible-table-block-table>table tbody th:first-of-type {
  min-width: 6em;
  background-color: rgb(var(--color-gray));
  color: rgb(var(--color-white));

}

.wp-block-flexible-table-block-table>table tbody tr:has(td[rowspan])+tr td:first-of-type,
.wp-block-flexible-table-block-table>table tbody tr:has(td[rowspan])+tr th:first-of-type {

  color: rgb(var(--color-white));
  background-color: rgb(var(--color-white), 0.5);

}

.wp-block-flexible-table-block-table tfoot {
  border-top: 1px solid rgb(var(--color-white));
  background-color: rgb(var(--color-gray));
  color: rgb(var(--color-white));
}

.wp-block-flexible-table-block-table>table tfoot tr th,
.wp-block-flexible-table-block-table>table tfoot tr td {
  font-size: 0.875em;
  border-left: 4px solid rgb(var(--color-white));
  background-color: rgb(var(--color-gray));
}

.wp-block-flexible-table-block-table table:not(:has(thead)) th+td:first-of-type {
  border-left: 4px solid rgb(var(--color-white));
}

.wp-block-flexible-table-block-table table:has(tfoot) tr:last-of-type td {
  border-bottom: none;
} */

/* flexible-table-block is-style-stripes */
/* .wp-block-flexible-table-block-table.is-style-stripes {
  border: none;
}

.wp-block-flexible-table-block-table.is-style-stripes table {
  background: none;
}

.wp-block-flexible-table-block-table.is-style-stripes thead {
  background: rgb(var(--color-gray));
}

.wp-block-flexible-table-block-table.is-style-stripes thead th,
.wp-block-flexible-table-block-table.is-style-stripes thead td {
  background: none !important;
}


.wp-block-flexible-table-block-table.is-style-stripes tfoot {
  border-top: 4px solid rgb(var(--color-white));
}

.wp-block-flexible-table-block-table.is-style-stripes td,
.wp-block-flexible-table-block-table.is-style-stripes th {
  background: none !important;
  border: none;
}

.wp-block-flexible-table-block-table.is-style-stripes>table tr th,
.wp-block-flexible-table-block-table.is-style-stripes>table tr td {
  border: none;
}

.wp-block-flexible-table-block-table.is-style-stripes tbody tr {
  background-color: rgb(var(--color-white));
}

.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-of-type(even) {
  background-color: rgb(var(--color-white), 0.5);
}

.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-of-type(odd) {
  background-color: rgb(var(--color-gray));
} */


/* buttons */
.wp-block-buttons {
  width: 100%;
  margin: 1.5em auto;
}

.wp-block-buttons + .wp-block-buttons {
  margin-top: 0;
}

.wp-block-buttons > .wp-block-button {
  width: 100%;
}

@media screen and (min-width: 480px) {
  .wp-block-buttons > .wp-block-button {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: calc(50% - 0.75rem);
  }
}

@media screen and (min-width: 960px) {
  .wp-block-buttons > .wp-block-button {
    max-width: calc(40% - 0.75rem);
  }
}

.wp-block-buttons:has(:nth-child(1)) > .wp-block-button {
  width: auto;
}

@media screen and (min-width: 480px) {
  .wp-block-buttons:has(:nth-child(1)) > .wp-block-button {
    max-width: initial;
    -webkit-box-flex: initial;
    -ms-flex: initial;
    flex: initial;
  }
}

@media screen and (min-width: 960px) {
  .wp-block-buttons:has(:nth-child(1)) > .wp-block-button {
    max-width: initial;
  }
}

@media screen and (min-width: 960px) {
  .wp-block-buttons:has(:nth-child(2)) > .wp-block-button {
    max-width: calc(50% - 0.75rem);
  }
}

.wp-block-buttons > .wp-block-button.wp-block-button__width-100 {
  width: 100%;
  max-width: 100%;
}

.wp-block-button {
  /* 矢印右共通 */
  /* 矢印左共通 */
  /* 矢印右 */
  /* 矢印左 */
  /* 輪郭・矢印右 */
  /* 輪郭・矢印左 */
}

.wp-block-buttons .wp-block-button__link {
  padding: 0.675em 1.125em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  @media screen and (min-width: 960px) {
    padding-inline: 2.5em;
  }
}

.wp-block-buttons .wp-block-button__link[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 1em;
  mix-blend-mode: exclusion;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255,255,255)' viewBox='0 0 41 41'%3E%3Cg transform='translate(-794 -4333)'%3E%3Cpath d='M32.365,32.368H0V0H8.63V4.315H4.315V28.05H28.05V23.735h4.315v8.63Z' transform='translate(794 4341.633)'/%3E%3Cpath d='M4.315,28.053H28.05V4.315H4.315M0,0H32.368V32.368H0Z' transform='translate(802.633 4333)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center / contain;
}

/* .wp-block-buttons .wp-block-button__link[href$=".pdf"]::after {
  content: "";
  display: inline-block;
  width: 1.275em;
  height: 1.275em;
  background: url(../img/icon/icon-pdf.svg) no-repeat center / contain;
} */

/* .wp-block-button.is-style-no-arrow .wp-block-button__link {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-inline: 0;
  background-repeat: no-repeat;
  background-size: 200% 1px;
  background-position: right bottom;
  background-image: linear-gradient(to right, rgb(var(--color-white), 1) 0%, rgb(var(--color-white), 1) 50%, rgb(var(--color-white), 0.5) 50%, rgb(var(--color-white), 0.5) 100%);
  transition: all .3s;

  &:hover {
    background-position: left bottom;
    opacity: 1;
  }
} */

.wp-block-button.is-style-arrow-right .wp-block-button__link,
.wp-block-button.is-style-arrow-left .wp-block-button__link {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-inline: 0;
  padding-block: 1.75em;
  background-size: 200% 100%;
  color: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-primary));
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  appearance: none;
  transition: all .3s;

  &::before {
    content: "";
    display: block;
    width: 2.5rem;
    aspect-ratio: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255, 255, 255)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
    display: grid;
    place-content: center;
    border: 1px solid rgb(var(--color-base));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background .3s, border .3s;
  }

  &:hover {
    /* opacity: 1; */

    &::before {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255, 255, 255)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
      border-color: rgb(var(--color-base));
    }
  }
}

.wp-block-button.is-style-arrow-right .wp-block-button__link {
  /* background-position: right bottom;
  background-image: linear-gradient(to right, rgb(var(--color-base)) 0%, rgb(var(--color-base)) 50%, rgb(var(--color-primary)) 50%, rgb(var(--color-primary)) 100%); */


  &::before {
    transition: right 0.3s;
    right: 1em;
  }

  &:hover {
    /* background-position: left bottom; */

    &::before {
      right: 0.75em;
    }
  }
}

.wp-block-button.is-style-arrow-left .wp-block-button__link {
  /* padding-right: 0.25em;
  padding-left: 2.5em; */
  /* background-position: left bottom;
  background-image: linear-gradient(to left, rgb(var(--color-base)) 0%, rgb(var(--color-base)) 50%, rgb(var(--color-primary)) 50%, rgb(var(--color-primary)) 100%); */



  &::before {
    left: 1em;
    transform: translateY(-50%) rotate(180deg);
    transition: left 0.3s;
  }

  &:hover {
    /* background-position: right bottom; */

    &::before {
      left: 0.75em;
    }
  }
}


.wp-block-button.is-style-arrow-right .wp-block-button__link.has-text-color,
.wp-block-button.is-style-arrow-left .wp-block-button__link.has-text-color {
  &::before {
    border-color: currentColor;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
  }

  &:hover {

    &::before {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
      border-color: currentColor;
    }
  }
}

.wp-block-button.is-style-arrow-right .wp-block-button__link.has-gray-light-background-color,
.wp-block-button.is-style-arrow-left .wp-block-button__link.has-gray-light-background-color {
  &::before {
    border-color: #DE3B00;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(222, 59, 0)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
  }

  &:hover {
    color: #DE3B00 !important;

    &::before {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(222, 59, 0)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
      border-color: #DE3B00;
    }
  }
}


:root :where(.is-layout-flex) {
  gap: 24px;
}

.wp-block-columns {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap !important;
  margin-bottom: var(--base-padding-top);

  > .wp-block-group {
    padding-block: 0;
  }
}

@media (min-width: 782px) {
  .wp-block-columns {
    flex-wrap: nowrap !important;
  }
}

/* .wp-block-columns {
  align-items: normal !important;
} */

.wp-block-columns.are-vertically-aligned-top {
  align-items: flex-start
}

.wp-block-columns.are-vertically-aligned-center {
  align-items: center
}

.wp-block-columns.are-vertically-aligned-bottom {
  align-items: flex-end
}

@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}

@media (min-width: 782px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0;
    flex-grow: 1
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*=flex-basis] {
    flex-grow: 0
  }
}

.wp-block-columns.is-not-stacked-on-mobile {
  flex-wrap: nowrap !important;
}

.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
  flex-basis: 0;
  flex-grow: 1
}

.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*=flex-basis] {
  flex-grow: 0
}

:where(.wp-block-columns) {
  margin-bottom: 1.75em
}

:where(.wp-block-columns.has-background) {
  padding: 1.25em 2.375em
}

.wp-block-column {
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word
}

.wp-block-column.is-vertically-aligned-top {
  align-self: flex-start
}

.wp-block-column.is-vertically-aligned-center {
  align-self: center
}

.wp-block-column.is-vertically-aligned-bottom {
  align-self: flex-end
}

.wp-block-column.is-vertically-aligned-stretch {
  align-self: stretch
}

.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top {
  width: 100%
}


/*
.wp-block-accordion-heading {
  font-family: var(--font-jp);

  color: rgb(var(--color-white));
  background-color: rgb(var(--color-white), 0.5);
  border-top: 1px solid rgb(var(--color-white));
}

.wp-block-accordion-heading__toggle,
.wp-block-accordion-heading__toggle:focus,
.wp-block-accordion-heading__toggle:hover {
  position: relative;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

.wp-block-accordion-heading__toggle-icon {
  text-indent: -9999px;
  position: relative;
}

.wp-block-accordion-heading__toggle-icon::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 2px;
  aspect-ratio: 1;
  background-color: rgb(var(--color-white));
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.wp-block-accordion-heading__toggle-icon::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  aspect-ratio: 1;
  background-color: rgb(var(--color-white));
  position: absolute;
  top: 50%;
  right: 0.8rem;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
} */

/*
.wp-block-accordion-panel {
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}

.wp-block-accordion-panel[aria-hidden=true],
.wp-block-accordion-panel[inert] {
  display: block;
  height: 0;
  opacity: 0;
}

.wp-block-accordion-panel[aria-hidden=false],
.wp-block-accordion-panel {
  height: auto;
  opacity: 1;
}

.wp-block-post-template {
  list-style: none;
  padding: 0;
}

.wp-block-post {
  width: 100%;
  margin: 0 0 1.5em;
  padding: 0 0 1.5em;
  border-bottom: 1px solid rgba(var(--color-white), 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: rgb(var(--color-white));
}

.wp-block-post .wp-block-post-date {
  font-size: 0.875rem;
  font-family: var(--font-en);

  font-style: normal;
  color: rgb(var(--color-white)) !important;
  letter-spacing: 0.05em;
}

.wp-block-post .wp-block-post-terms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-jp);
}

.wp-block-post .wp-block-post-terms a {
  min-width: 4.5rem;
  font-size: 0.875rem;
  padding: 0.286em 0.5em;
  line-height: 1;
  text-align: center;
  color: rgb(var(--color-white));
  border: 1px solid currentColor;
  border-radius: 0.25em;
  font-weight: var(--weight-medium);
}

.wp-block-post .wp-block-post-terms a:hover {
  opacity: 1;
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-gray));
}

.wp-block-post .wp-block-post-terms .wp-block-post-terms__separator {
  display: none;
}

.wp-block-post .wp-block-post-title {
  width: 100%;
  font-size: 1em;
  font-family: var(--font-jp);

  background: none;
  margin: 0.5em 0 0;
  padding: 0;
  border: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media screen and (min-width: 768px) {
  .wp-block-post .wp-block-post-title {
    -webkit-line-clamp: 1;
  }
} */

/* ==========================================================================
   17. Pages
   ========================================================================== */
.realestate .editor-area .btn {
  width: fit-content;
  margin-top: 5em;
  margin-inline: auto;
}

.other {
  /* padding-bottom: 0; */
}

/* ==========================================================================
   Pages: Products
   ========================================================================== */

.p-productIntro {
  position: relative;
  z-index: 3;
  overflow: hidden;

  @media screen and (min-width: 768px) {}
}

.p-productIntro__image {
  margin-inline: auto;
  /* position: absolute;
  bottom: 0; */
}

.p-productIntro__image {
  display: grid;
  overflow: hidden;
}

.p-productIntro__image > div {
  grid-area: 1 / 1;
  /* 2枚を同じセルに重ねる(DOM順で後ろの mono が上) */
}

.p-productIntro__img {
  display: block;
  width: 100%;
  height: auto;
}

/* カラー画像:初期状態は全体をクリップして隠しておく(下の白黒だけが見える) */
.p-productIntro__img--color {
  clip-path: inset(0% 0% 100% 0%);
  will-change: clip-path;
}

/* 視覚効果を減らす設定:アニメーションせず、最初からカラーで表示 */
@media (prefers-reduced-motion: reduce) {
  .p-productIntro__img--color {
    clip-path: none;
  }
}

/* PC:製品画像の高さを、画面の高さに応じて縮小する(JSなし)。
   大見出しは従来どおりウィンドウ幅で可変(高さの上限なし)。
   画像は「画面の高さ − 画像の上端の位置」までを目安に縮むが、下限(--fv-min)より小さくはならないため、
   縦が低い画面ではファーストビューを超えてスクロールで見える。
   画像の上端は「見出しの文字サイズ×約2 + 約9rem(パンくず・余白など)」の位置にある */
@media screen and (min-width: 960px) {
  .products_child {
    --fv-title: clamp(4.125rem, 1.8917rem + 11.1667vw, 12.5rem);
    --fv-offset: 9rem;
    /* 見出し以外で画像の上端までに使う高さ(パンくず・余白など) */
    --fv-min: 72.5rem;
    /* 画像の高さの下限 1160px程度(これ以下には縮めない) */
  }

  .products_child .p-pageHeader__title {
    font-size: var(--fv-title);
  }

  .p-productIntro__img {
    max-height: max(calc(100svh - var(--fv-title) * 2 - var(--fv-offset)), var(--fv-min));
    /* 歪ませずに縮小する(box自体は幅100%のまま) */
    object-fit: contain;
    /* object-position: left center; */
  }
}

.equip_top .p-productIntro {
  margin-top: -6%;
}

.equip_top .p-productIntro__image {
  width: 80%;
  transform: translateX(-5%);

  @media screen and (min-width: 480px) {
    max-width: 70%;
  }

  @media screen and (min-width: 768px) {
    max-width: 600px;
    /* max-height: 780px; */
    transform: translateX(-8%);

    .p-productIntro__img {
      display: block;
      width: 100%;
      /* height: 100%; */
      /* 親に高さがないと100%が効かず、画像がmax-heightで切り取られるだけになるため、高さは自動+max-heightで縮小する */
      height: auto;
      /* object-fit: contain; (上の共通ルールで指定) */
    }
  }

  @media screen and (min-width: 960px) {
    max-width: 1200px;
    max-height: 1200px;

  }
}

.valve_top .p-productIntro {
  margin-top: -30%;

  @media screen and (min-width: 960px) {
    padding-bottom: 10%;
  }

  @media screen and (min-width: 1080px) {
    margin-top: -30vw;
  }

  @media screen and (min-width: 1400px) {
    margin-top: -25vw;
  }
}


.valve_top .p-productIntro__image {
  width: 100%;

  @media screen and (min-width: 480px) {
    max-width: 70%;
  }

  @media screen and (min-width: 768px) {
    max-width: 600px;
  }

  @media screen and (min-width: 960px) {
    max-width: 740px;
    margin-left: 5%;
  }

  @media screen and (min-width: 1280px) {
    max-width: 950px;
  }
}

.vent_top .p-productIntro {
  margin-top: -30%;

  @media screen and (min-width: 960px) {
    margin-top: -20%;
    padding-bottom: 10%;
  }


  @media screen and (min-width: 1120px) {
    margin-top: -7%;
  }
}

.vent_top .p-productIntro__image {
  width: 100%;

  @media screen and (min-width: 480px) {
    max-width: 70%;
  }

  @media screen and (min-width: 768px) {
    max-width: 500px;
  }

  @media screen and (min-width: 960px) {
    max-width: 580px;
    margin-left: 5%;
  }

  @media screen and (min-width: 1120px) {
    max-width: 700px;
    margin-left: 10%;
  }
}

.p-productIntro__body {
  padding-top: 1.5rem;
  padding-bottom: 3rem;

  @media screen and (min-width: 960px) {
    padding-bottom: 5rem;
    max-width: 330px;
    position: absolute;
    bottom: 20%;
    right: var(--padding-inline);
  }
}

.valve_top .p-productIntro__body {
  @media screen and (min-width: 960px) {
    bottom: 30%;
    max-width: 300px;
  }

  @media screen and (min-width: 1280px) {
    bottom: 40%;
    max-width: 330px;
  }
}

.vent_top .p-productIntro__body {
  @media screen and (min-width: 960px) {
    max-width: 300px;
  }

  @media screen and (min-width: 1280px) {
    max-width: 330px;
    bottom: 10%;
  }
}

.p-productIntro__title {
  font-size: 1.5em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;

  @media screen and (min-width: 960px) {
    margin-bottom: 1.25em;
  }

  &::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: rgb(var(--color-contrast));
  }
}

.p-productsSection__img {
  width: 100%;
  margin-top: -1rem;
  margin-inline: auto;
  aspect-ratio: 5/3;
  max-height: 528px;
  overflow: hidden;
  position: relative;
  z-index: 4;
  background-color: rgb(var(--color-gray-light));
  display: grid;

  @media screen and (min-width: 768px) {
    aspect-ratio: 1520/528;
    margin-bottom: var(--base-padding-top);
  }

  picture,
  img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    /* width: 100%;
    height: auto;
    transform-origin: center; */
    will-change: transform;
  }
}

/* ACFの白黒画像が無いときだけ、カラー画像をモノクロ化して代用 */
.p-productsSection__imgMono.is-fallback {
  filter: grayscale(1);
}

.p-productsSection__imgColor {
  clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: reduce) {
  .p-productsSection__imgColor {
    clip-path: none;
  }
}

.p-productFilter {
  padding: 2em 1em;
  border: 1px solid rgb(var(--color-gray));
  max-width: 960px;
  margin-inline: auto;

  @media screen and (min-width: 480px) {
    padding: 2em 2em;
  }

  @media screen and (min-width: 768px) {
    padding: 2.5em;
  }
}

.p-productFilter__fieldset,
.p-productFilter__group {
  border: none;
  padding: 0;
  margin: 0;
}

.p-productFilter__fieldset {
  display: flex;
  flex-direction: column;

}

.p-productFilter__legend {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}

.p-productFilter__legendMain {
  font-size: 3em;
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1;
}

.p-productFilter__legendSub {
  font-weight: 500;
}

.p-productFilter__group {
  margin-top: 2.5em;

}

.p-productFilter__groupLegend {}

.p-productFilter__groupLabel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: 1.25em;
  font-weight: 600;
}

input.p-productFilter__checkbox {
  border-color: rgb(var(--color-primary));
}

.p-productFilter__tonList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em 0.5em;
  margin-top: 1em;
  padding-left: 2em;
}

.p-productFilter__tonItem {}

.p-productFilter__tonButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.5em;
  border-radius: 5px;
  border: 1px solid rgb(var(--color-primary));
  color: rgb(var(--color-primary));
  font-weight: 600;
  cursor: pointer;
}

.p-productFilter__tonButton:has(input:checked) {
  background: rgb(var(--color-primary));
  color: rgb(var(--color-base));
}

.p-productFilter__tonButton:has(input:focus-visible) {
  outline: 2px solid rgb(var(--color-primary));
  outline-offset: 2px;
}

.p-productFilter__resetButton {
  margin: 2.5em auto 0;
  padding: 0.75em 1.5em;
  border-radius: 5px;
  border: 1px solid rgb(var(--color-primary));
  background: rgb(var(--color-primary));
  color: rgb(var(--color-base));
  font-weight: 600;
  transition: color .3s, background .3s;

  &:hover {
    color: rgb(var(--color-primary));
    background: rgb(var(--color-base));

  }
}

.p-productSeries {
  padding-block: var(--base-padding-top);
}

.p-productGroup {

  .wp-block-columns {
    gap: 1.5em;
    align-items: center !important;

    @media screen and (min-width: 768px) {
      gap: 2.5em;
    }

    @media screen and (min-width: 960px) {
      gap: 5em;
    }
  }

  .wp-block-column {
    flex: 1;
  }
}

.p-productGroup:not(:first-of-type) {
  margin-top: 5em;
}

.p-productSeries__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(2.5rem, 2.3333rem + 0.8333vw, 3.125rem) !important;
}

.p-productGroup__title {
  margin-bottom: 2.5rem !important;
}

.valve_top .p-productGroup__title {
  display: none;
}

.p-productGroup__image {
  /* margin-block: 2.5em; */
  max-width: 760px;
  height: 400px;

  /*画面幅480pxのとき400px、1024pxのとき460px*/
  @media (min-width: 480px) {
    height: clamp(400px, 347px + 11.03vw, 460px);
  }

  picture {
    display: block;
    height: 100%;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.p-productBack {
  display: flex;
  justify-content: center;
  margin-top: 7.5em;

  .btn a {
    font-size: 1.5em;
    padding-block: 1.175em;
    padding-inline: 2em;

    @media screen and (min-width: 960px) {
      padding-inline: 4em;
    }
  }
}


.p-productTabs {}

.p-productTabs__tablist {
  display: flex;
  align-items: flex-end;
  gap: 1em;
  margin-top: 3em;

  @media screen and (min-width: 960px) {
    gap: 2em;
  }
}

.p-productTabs__tab {
  border: none;
  background: none;
  min-height: 60px;
  font-size: 1.5em;
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
  color: rgb(var(--color-gray));
  padding-right: 2rem;
  padding-left: 0;
  padding-bottom: 0.5rem;
  border-right: 1px solid var(--border-color);
  display: flex;
  align-items: end;
  flex-grow: 1;
  /* padding: 0.25rem 2rem 0.25rem 0; */
  /* min-height: 2.5rem; */
  position: relative;
  cursor: pointer;
  transition: opacity .3s,
    color .3s;

  @media screen and (min-width: 960px) {
    padding-right: 4rem;
    flex-grow: 0;
  }

  &:last-of-type {
    border-right: none;
  }

  &.is-active {
    color: rgb(var(--color-contrast));
    font-size: 2.5em;
    padding-right: 1rem;
    flex-grow: 1;

    @media screen and (min-width: 960px) {
      padding-right: 2rem;
      flex-grow: 0;
    }

    &::after {
      opacity: 0;
      visibility: hidden;
    }
  }


  &:hover {
    color: rgb(var(--color-primary));

  }

  &::after {
    content: "＋";
    display: grid;
    place-content: center;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-base));
    border-radius: 50%;
    padding-top: 1px;
    position: absolute;
    bottom: 0.6rem;
    right: 0.5rem;
    transition: opacity .3s;

    @media screen and (min-width: 960px) {
      right: 2rem;
    }
  }
}



.p-productTabs__panel {}

.p-productTabs__panel:has(.p-productDrawings) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3.5rem;

  .p-productTable {
    max-width: calc(100% - (96px + 3.5rem));
  }
}


.p-productGroup__featureLabel {
  font-size: 1.25em;
  font-weight: 700;
  font-family: var(--font-en);
  padding: 0;
  margin: 0 0 1rem;
}

.p-productGroup__features {
  font-weight: 600;
}


.p-productTable__model {
  padding: 0;
  margin: 0;
  font-size: 1.25em;
  font-weight: 600;
  text-align: left;
}

.p-productTable__note {
  padding: 0;
  margin: 0;
  font-weight: 400;
  text-align: left;
}

.wp-block-table.p-productTabs__panel {
  overflow-x: scroll;
  padding-top: 1.5em;

  @media screen and (min-width: 768px) {
    overflow-x: scroll;
    padding-top: 1.5em;
  }

  @media screen and (min-width: 960px) {
    padding-top: 0;
    overflow-x: hidden;
  }

  &::before,
  &::after {
    display: block;

    @media screen and (min-width: 768px) {
      display: block !important;
    }

    @media screen and (min-width: 960px) {
      display: none !important;
    }
  }
}

.wp-block-table .p-productTable {
  min-width: 900px;

  @media screen and (min-width: 768px) {
    min-width: 900px;
  }

  @media screen and (min-width: 960px) {
    min-width: 100%;
  }
}

.wp-block-table:has(.p-productDrawings) .p-productTable {
  @media screen and (min-width: 960px) {
    min-width: calc(100% - (96px + 3.5rem));
    max-width: calc(100% - (96px + 3.5rem));
  }
}

.wp-block-table .p-productTable tr {
  border-bottom: 1px solid var(--border-color);
}

.p-productTable th:first-of-type,
.p-productTable td:first-of-type {
  width: 180px !important;
  min-width: 180px !important;
  position: sticky;
  left: 0;
  background-color: rgb(var(--color-base));

  @media (min-width: 768px) {
    width: 180px;
    min-width: 180px;
  }
}

.wp-block-table .p-productTable th,
.wp-block-table .p-productTable td {
  padding-inline: 0.25em;

}

.p-productTable td {
  text-align: center;
}

.p-productTable__pdfLink {
  max-width: 90%;

  @media (min-width: 768px) {
    max-width: 260px;
  }

  margin-inline: auto;
  border: 1px solid rgb(var(--color-contrast));
  border-radius: 5px;
  padding: 0.75em 0.5em;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  &::before {
    content: "";
    display: inline-block;
    margin-right: 0.75em;
    width: 1.275em;
    height: 1.275em;
    background: url(../img/icon/icon-pdf.svg) no-repeat center / contain;
  }

  &:hover {
    opacity: 1;
    border-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary));
  }
}

.p-productTable__extLink {
  max-width: 90%;

  @media (min-width: 768px) {
    max-width: 260px;
  }

  margin-inline: auto;
  border: 1px solid rgb(var(--color-contrast));
  border-radius: 5px;
  padding: 0.75em 0.5em;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  &::before {
    content: "";
    display: inline-block;
    margin-right: 0.75em;
    width: 1.125em;
    height: 1.125em;
    background: url(../img/icon/icon-external-link.svg) no-repeat center / contain;
  }

  &:hover {
    opacity: 1;
    border-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary));
  }
}

.p-productDrawings {
  max-width: 96px;
  display: flex;
  flex-direction: column;
  padding-top: 1em;
  gap: 1.5rem;
  /* @media (min-width: 960px) {
    max-width: 260px;
  } */

  img {
    width: 100%;
    object-fit: contain;
  }
}

.product:not(.products_child) .p-articleLayout {
  /* background: url(../img/bg.jpg) no-repeat center center / cover; */
  /* background-color: rgb(var(--color-gray-medium)); */
  /* color: rgb(var(--color-base)); */
}

.p-productsGroup {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  padding-block: var(--base-padding-top);
  /* padding-block: var(--base-padding-bottom); */

  &:nth-of-type(even) {
    /* background-color: rgb(var(--color-gray-dark)); */

    .wp-block-columns {

      @media (min-width: 768px) {
        flex-direction: row;
      }
    }
  }

  .wp-block-columns {
    gap: 2.5em;
    margin-bottom: 0;

    @media (min-width: 768px) {
      gap: 5em;
      flex-direction: row-reverse;
    }

    @media (min-width: 782px) {
      flex-wrap: wrap !important;
    }

    @media (min-width: 960px) {
      flex-wrap: nowrap !important;
    }
  }

  .wp-block-column {
    position: relative;
    margin-top: var(--base-padding-top);

    @media (min-width: 782px) {
      flex-basis: auto !important;
      flex-grow: 1 !important;
    }

    @media (min-width: 960px) {
      flex-basis: 0 !important;
      flex-grow: 1 !important;
    }
  }

  .wp-block-column:has(.wp-block-image) {
    align-self: flex-end;
    margin-top: 0;
  }

  .wp-block-image {
    position: relative;
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
    overflow: visible;
    z-index: 3;

    picture,
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      margin-top: auto;
      margin-bottom: 0;
    }
  }

  .font-en {
    font-family: var(--font-en);
    /* font-size: clamp(4.125rem, 1.8917rem + 11.1667vw, 12.5rem); */
    font-size: 7.5rem;
    font-weight: 700;
    color: rgb(var(--color-primary));
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0;
    margin: 0;

    @media (min-width: 480px) {
      font-size: 10.5rem;
    }

    @media (min-width: 768px) {
      font-size: 24vw;
    }

    @media (min-width: 960px) {
      font-size: 18vw;

      @media screen and (min-width: 1025px) {
        /* font-size: 18vw; */
        font-size: calc(var(--vu) * 18);
      }
    }

    @media (min-width: 1120px) {
      font-size: 12.5rem;
    }

    span {
      font-size: 0.75em;
    }
  }

  .more {
    text-align: right;

    > a {
      /* font-size: 0.75em; */
      font-weight: 500;
      padding: 0.5em 1.5em;
      border: 1px solid rgb(var(--color-contrast));
      /* color: rgb(var(--color-base)); */
      border-radius: 3px;
      text-decoration: none;

      &:hover {
        border-color: rgb(var(--color-primary));
      }
    }
  }

  .wp-block-separator {
    margin-block: 3rem;
    background-color: rgb(var(--color-contrast));
    color: rgb(var(--color-contrast));
  }

  h6 {
    margin-bottom: 1.25rem;
  }

  .is-style-arrow {
    padding-left: 0;
    width: 100%;

    @media (min-width: 782px) {
      margin-bottom: 7.5rem;
    }

    li {
      padding-left: 0;
      list-style: none;
      margin-bottom: 1.5rem;

      @media (min-width: 1025px) {
        margin-bottom: 2rem;
      }

      &::before {
        display: none;
      }
    }

    a {
      width: 100%;
      display: block;
      border-bottom: 1px solid currentColor;
      color: rgb(var(--color-contrast));
      font-size: 1.375em;
      padding-right: 3em;
      padding-block: 0.5em;
      position: relative;

      @media (min-width: 1025px) {
        font-size: 1.875em;
        padding-bottom: 0.75em;
      }

      &::before {
        content: "";
        display: block;
        width: 2.5rem;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(0,0,0)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.675em auto;
        aspect-ratio: 1;
        display: grid;
        place-content: center;
        border: 1px solid rgb(var(--color-contrast));
        border-radius: 50%;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        transition: background .3s, border .3s;
      }

      &:hover {
        opacity: 1;
        color: rgb(var(--color-primary));

        &::before {
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(222, 59, 0)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
          border-color: rgb(var(--color-primary));
        }
      }
    }
  }

}

/* WPのカラムが縦積みになるブレークポイント(781px)に合わせる */
@media (max-width: 781px) {
  .wp-block-columns.p-productsColumns {
    /* 対象のcolumnsにだけ付けるクラス */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    /* 余白は各要素のmarginで調整 */
  }

  /* カラムの箱を無効化して、中身を同じ階層に出す */
  .p-productsColumns > .wp-block-column {
    display: contents;
  }

  /* 並び順 */
  .p-productsColumns h2.wp-block-heading {
    order: 1;
    width: 100%;
  }

  /* h2 */
  .p-productsColumns .wp-block-image {
    order: 2;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .p-productsColumns .wp-block-paragraph {
    order: 3;
  }

  .p-productsColumns .wp-block-paragraph.more {
    order: 4;
  }

  .p-productsColumns .wp-block-separator {
    order: 5;
  }

  .p-productsColumns h6.wp-block-heading {
    order: 6;
  }

  .p-productsColumns .wp-block-list {
    order: 7;
  }
}


#dievs.p-productsGroup {

  .wp-block-image {
    margin-left: auto;
    margin-right: 0;

    @media (min-width: 782px) {
      margin-left: -25%;
      width: 128%;
    }

    img {
      transform: translateY(1em);
    }
  }

  .font-en {
    width: fit-content;
    writing-mode: vertical-rl;
    position: absolute;
    top: 0;
    left: -5%;
    /* z-index: -1; */

    @media (min-width: 480px) {
      max-width: 1em;
    }

    @media (min-width: 782px) {
      left: 10%;
    }
  }
}

#cvv.p-productsGroup {
  padding-bottom: var(--base-padding-top);

  .wp-block-column:has(.wp-block-image) {
    @media (min-width: 960px) {
      align-self: flex-start;
    }
  }

  .is-style-arrow {
    @media (min-width: 782px) {
      margin-bottom: 0;
    }
  }

  .wp-block-image {

    @media (min-width: 960px) {
      width: 115%;
      margin-left: -5%;
    }

    @media (min-width: 120px) {
      width: 100%;
      margin-left: auto;
    }

  }

  .font-en {
    width: fit-content;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;

    @media (min-width: 960px) {
      top: 5%;
    }
  }
}

#ev_zm.p-productsGroup {
  padding-bottom: var(--base-padding-top);

  .wp-block-column:has(.wp-block-image) {
    @media (min-width: 782px) {
      align-self: center;
    }

    @media (min-width: 120px) {
      align-self: flex-start;
    }
  }

  .wp-block-image {
    @media (min-width: 960px) {
      margin-left: -16%;
      width: 120%;
    }

    @media (min-width: 1120px) {
      margin-left: -6%;
      width: 110%;
    }
  }

  .is-style-arrow {
    @media (min-width: 782px) {
      margin-bottom: 3.5rem;
    }
  }

  .font-en {
    width: fit-content;
    font-size: 6.8rem;
    position: absolute;
    top: -7%;
    right: -8%;
    z-index: -1;

    @media (min-width: 480px) {
      font-size: 10.5rem;
      top: -5%;
      right: 0;
    }


    @media (min-width: 768px) {
      font-size: 24vw;
    }

    @media (min-width: 960px) {
      font-size: 16vw;

      @media screen and (min-width: 1025px) {
        /* font-size: 16vw; */
        font-size: calc(var(--vu) * 16);
      }

      top: -3%;
      right: -3%;
    }

    @media (min-width: 1120px) {
      /* font-size: 14vw; */
      font-size: calc(var(--vu) * 14);
      top: 4%;
      right: -5%;
    }

    @media (min-width: 1240px) {
      font-size: 12.5rem;
      top: 5%;
      right: -7%;
    }
  }
}


/* ==========================================================================
   company
   ========================================================================== */

.overseas-base .p-articleLayout {
  overflow: hidden;
}

.feature {
  padding-top: 0;
  /* overflow: visible; */
}

/* ==========================================================================
   Feature:セクション見出し
   ========================================================================== */
.p-feature__head {
  /* padding-block: 1.5rem 2rem; */
}

.p-feature__label {
  margin: 0 0 0.5em;
  font-size: 1.25em;
  font-weight: 700;
  font-family: var(--font-en);
  line-height: 1;

  @media screen and (min-width: 1080px) {
    /* font-size: 1.75vw; */
    font-size: calc(var(--vu) * 1.75);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.25vw; */
    font-size: calc(var(--vu) * 1.25);
  }

  span {
    display: inline-block;
    font-weight: 600;
    margin-right: 0.55em;
  }
}

.p-feature__title {
  margin: 0;
  font-size: 1.875em;
  /* font-size: clamp(1.25rem, 2.6vw, 1.75rem); */
  font-weight: 600;
  line-height: 1.6;

  @media screen and (min-width: 1080px) {
    /* font-size: 2.875vw; */
    font-size: calc(var(--vu) * 2.875);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.875vw; */
    font-size: calc(var(--vu) * 1.875);
  }

}

.p-feature__title_sub {
  font-weight: 400;
  text-align: center;
  margin-top: 2.5em;
  line-height: 1.5;
  font-size: 1.155em;

  @media screen and (min-width: 480px) {
    font-size: 1.275em;
  }

  @media screen and (min-width: 768px) {
    font-size: 1.5em;
  }

  @media screen and (min-width: 1080px) {
    /* font-size: 2.5vw; */
    font-size: calc(var(--vu) * 2.5);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.875vw; */
    font-size: calc(var(--vu) * 1.875);
  }

  span {
    display: block;
    font-size: 2.05em;
    font-weight: 700;
    font-family: var(--font-en);
    line-height: 1.3;
    margin-bottom: 0.5em;

    @media screen and (min-width: 480px) {
      font-size: 2.084em;
    }
  }
}

.p-feature__body {
  margin-top: 2.5rem;
  padding-top: 3rem;

  @media screen and (min-width: 768px) {
    margin-top: 0;
    padding-bottom: 3rem;
  }

  @media screen and (min-width: 1025px) {
    padding-block: 2.5rem 3rem;
  }
}

/* ==========================================================================
   Splide 本体
   ========================================================================== */
.p-featureSlider {
  position: relative;

  &:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 0.5rem;
  }

}

/* ==========================================================================
   スライド内容
   ========================================================================== */
.p-featureItem {
  display: grid;
  gap: 2rem;

  @media screen and (min-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    /* 矢印ボタンの領域 */
  }

  @media screen and (min-width: 1025px) {
    column-gap: 3.5rem;
    padding-right: 1.5rem;
  }

  @media screen and (min-width: 1360px) {
    padding-right: 3.5rem;
  }
}

/* --- 左:見出し+Point --- */
.p-featureItem__main {
  position: relative;
  padding-top: 4rem;
  padding-inline: 1rem;

  @media screen and (min-width: 768px) {
    padding-right: 0;
  }
}

.p-featureItem__num {
  position: absolute;
  top: 0;
  left: -0.25rem;
  z-index: 0;
  font-family: var(--font-en);
  /* font-size: clamp(3.5rem, 6.5vw, 4.5rem); */
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(255 255 255 / 0.6);
  pointer-events: none;
  user-select: none;
}

.p-featureItem__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.4;

  @media screen and (min-width: 1080px) {
    /* font-size: 2.75vw; */
    font-size: calc(var(--vu) * 2.75);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.75vw; */
    font-size: calc(var(--vu) * 1.75);
  }
}

.p-featureItem__pointLabel {
  margin: 1.5rem 0 0;
  font-weight: 500;
  /* font-size: 0.75rem; */
}

.p-featureItem__text {
  margin: 0;
  padding-block: 1rem;
  line-height: 1.5;
  border-bottom: 1px solid currentColor;

  /* font-size: 0.875rem; */
  @media screen and (min-width: 1080px) {
    /* font-size: 1.25vw; */
    font-size: calc(var(--vu) * 1.25);
  }

}

/* --- 右:リード+年数パネル --- */
.p-featureItem__sub {
  min-width: 0;
  padding-inline: 1rem;

  @media screen and (min-width: 768px) {
    padding-inline: 0;
    padding-top: 3.5rem;
  }

  @media screen and (min-width: 1025px) {}
}

.p-featureItem__lead {
  margin: 0;
  /* font-size: 1.75em; */
  font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  font-weight: 700;
  color: rgb(var(--color-primary));
  line-height: 1.5;

  @media screen and (min-width: 1080px) {
    /* font-size: 2.75vw; */
    font-size: calc(var(--vu) * 2.75);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.75vw; */
    font-size: calc(var(--vu) * 1.75);
  }
}

.p-featureItem__panel {
  margin-top: 1rem;
  overflow: hidden;

  img {
    width: 100%;
    object-fit: cover;
  }
}

.p-featureItem__panel:has(.p-featureItem__years) {
  padding-inline: 1rem;
  overflow: hidden;

  /* はみ出させたタイムラインの線をここで切る */
  @media screen and (min-width: 768px) {
    padding-inline: 1.5rem;
  }
}

.p-featureItem__years {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 7.5vw;
  margin: 0 auto;
  font-weight: 700;
  line-height: 1;
  max-width: fit-content;

  @media screen and (min-width: 768px) {
    gap: 1rem;
  }

  @media screen and (min-width: 1025px) {
    gap: 2rem;
  }

  @media screen and (min-width: 1360px) {
    gap: 3rem;
  }

  /* 右に向かってフェードするライン */
  &::after {
    content: "";
    position: absolute;
    width: 120%;
    left: -2rem;
    bottom: 0.25rem;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgb(var(--color-primary)) 20%, transparent);
    /*, rgba(var(--color-primary), .4) 55%*/

    @media screen and (min-width: 768px) {
      /* left: -4rem; */
      background: linear-gradient(90deg, transparent, rgb(var(--color-primary)) 20%, transparent);
    }
  }

  /* 右に向かってフェードするライン */
  &::before {
    content: "";
    position: absolute;
    width: calc(75% + 2rem);
    height: calc(100% + 0.5rem);
    right: -2rem;
    bottom: -0.25rem;
    background: linear-gradient(90deg, transparent, rgba(219, 219, 218, .02) 5%, rgba(219, 219, 218, .5) 90%, transparent);
    z-index: 1;
  }
}

.p-featureItem__year {
  position: relative;
  padding-bottom: 1.5rem;
  font-family: var(--font-en);
  font-size: clamp(2.25rem, 1.6rem + 3.25vw, 4.6875rem);
  color: rgb(var(--color-primary));

  @media screen and (min-width: 768px) {
    font-size: clamp(3rem, 1.2766rem + 3.5904vw, 4.6875rem);
  }

  @media screen and (min-width: 1080px) {
    /* font-size: 5.75vw; */
    font-size: calc(var(--vu) * 5.75);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 3.75vw; */
    font-size: calc(var(--vu) * 3.75);
  }

  /* ラインの上のドット */
  &::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0.675rem;
    height: 0.675rem;
    border-radius: 50%;
    background: currentColor;
    transform: translateX(-50%);

    @media screen and (min-width: 1080px) {
      width: 1.25vw;
      height: 1.25vw;
    }

    @media screen and (min-width: 1400px) {
      width: 0.75vw;
      height: 0.75vw;
    }

  }

  &.is-current {
    /* font-size: clamp(3rem, 1.9667rem + 5.1667vw, 6.875rem); */
    font-size: clamp(2.5rem, 0.9091rem + 7.9545vw, 6.875rem);

    @media screen and (min-width: 768px) {
      font-size: clamp(4rem, 1.0638rem + 6.117vw, 6.875rem);
    }

    @media screen and (min-width: 1080px) {
      /* font-size: 7.75vw; */
      font-size: calc(var(--vu) * 7.75);
    }

    @media screen and (min-width: 1400px) {
      /* font-size: 4.75vw; */
      font-size: calc(var(--vu) * 4.75);
    }
  }

  &:nth-child(2) {
    opacity: 0.8;
  }

  &:nth-child(3) {
    opacity: 0.5;
  }
}

.p-featureItem__unit {
  font-size: 0.45em;
}

/* ==========================================================================
   矢印(次へのみ表示)
   ========================================================================== */
.p-featureSlider .splide__arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgb(var(--color-primary));
  border-radius: 50%;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(222, 59, 0)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 1em auto;
  color: rgb(var(--color-primary));
  cursor: pointer;
  appearance: none;
  opacity: 1;
  transition: background 0.25s, color 0.25s;

  svg {
    display: none;
    /* width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round; */
  }

  &:hover {
    opacity: 1;
    background: rgb(var(--color-primary)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255, 255, 255)' viewBox='0 0 20.926 15.684'%3E%3Cpath d='M15.522,19.171l-6.551-6.48a1.362,1.362,0,1,0-1.916,1.937l4.195,4.15H-3.638A1.362,1.362,0,0,0-5,20.14,1.362,1.362,0,0,0-3.638,21.5H11.25L7.055,25.651a1.362,1.362,0,1,0,1.916,1.937l6.551-6.48a1.362,1.362,0,0,0,0-1.937Z' transform='translate(5 -12.298)'/%3E%3C/svg%3E") no-repeat center center / 0.75em auto;
    color: rgb(var(--color-base));
  }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
}

.p-featureSlider .splide__arrow--prev {
  display: none;
  /* デザインに無いので非表示(戻る操作はページャー/←キー/ドラッグで可能) */
}

.p-featureSlider .splide__arrow--next {
  position: absolute;
  top: var(--feature-arrow-top);
  right: 0;
}

/* ==========================================================================
   ページャー(01 02 03 04 05 をCSSカウンターで生成)
   ========================================================================== */
.p-featureSlider .splide__pagination {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  justify-content: flex-start;
  align-items: center;
  min-height: 2.5rem;
  margin: 0;
  padding-right: 3.5rem;
  padding-left: 0;
  top: -3.5rem;
  bottom: auto;
  counter-reset: featureNo;

  @media screen and (min-width: 768px) {
    justify-content: flex-end;
    top: auto;
    bottom: -3rem;
  }

  @media screen and (min-width: 960px) {
    bottom: -4rem;
  }

  @media screen and (min-width: 1025px) {
    padding-right: 0;
  }

  li {
    counter-increment: featureNo;
  }
}

.p-featureSlider .splide__pagination__page {
  padding: 0.25em;
  margin-inline: 0.25em;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  font-family: var(--font-en);
  /* font-size: 0.75rem; */
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgb(var(--color-gray));
  opacity: 1;
  cursor: pointer;
  appearance: none;
  transition: color 0.25s;

  @media screen and (min-width: 1080px) {
    /* font-size: 1.75vw; */
    font-size: calc(var(--vu) * 1.75);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.2vw; */
    font-size: calc(var(--vu) * 1.2);
  }

  &::before {
    content: counter(featureNo, decimal-leading-zero);
  }

  &:hover,
  &.is-active {
    opacity: 1;
    color: rgb(var(--color-primary));
  }

  &:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
  }
}

.p-featureSlider .splide__arrow--next {
  top: -2.5rem;
  bottom: auto;

  @media screen and (min-width: 768px) {
    top: auto;
    bottom: -4rem;
  }

  @media screen and (min-width: 960px) {
    bottom: -5rem;
  }

  @media screen and (min-width: 1025px) {
    bottom: 50%;
    transform: translateY(50%);
  }
}



.achievements {
  overflow: visible;
  position: relative;
}

.p-globalMap_container {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: visible;

  &::after {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    background-color: rgb(var(--color-base));
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    /* 上辺がゆるくふくらむ fromから順番に輪郭を一周 両端を 100px 下げてスタートし、制御点を中央の -100px(上方向)に置くと、カーブの頂点（制御点）がちょうど要素の上端(0px)に来る*/
    clip-path: shape(from 0 30px,
        curve to 100% 30px with 50% -30px,
        line to 100% 100%,
        line to 0 100%,
        close);
    transition: clip-path .3s, top .3s;

    @media screen and (min-width: 960px) {
      /* PCのアーチは.p-globalMap::before(マップ基準)に移した */
      display: none;
      top: 40%;
      clip-path: shape(from 0 100px,
          curve to 100% 100px with 50% -100px,
          line to 100% 100%,
          line to 0 100%,
          close);
    }

    @media screen and (min-width: 1080px) {
      /* top: 40%;
      clip-path: shape(from 0 180px,
          curve to 100% 180px with 50% -180px,
          line to 100% 100%,
          line to 0 100%,
          close); */
      top: 45vw;
      clip-path: shape(from 0 8vw, curve to 100% 8vw with 50% -8vw, line to 100% 100%, line to 0 100%, close);
    }

    @media screen and (min-width: 1400px) {
      top: 38vw;
    }
  }
}

.p-globalMap {
  position: relative;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  /* マップ(SVG)の幅と、SVG座標1単位あたりの長さ。
     1520pxのデザインではマップ幅=1232px(81.1vw)。線・ラベル・国名はこの--uを基準に配置する */
  --map-w: 81.1vw;
  --u: calc(var(--map-w) / 1900.43);

  @media screen and (min-width: 768px) {
    margin-top: 5rem;
    width: 100%;
    margin-inline: auto;
  }

  @media screen and (min-width: 960px) {
    /* padding-top: 15rem; */
    width: var(--map-w);
    /* ラベル・線の置き場(SVGの上端まで306.3単位) */
    padding-top: calc(var(--u) * 306.3);
    margin-top: 5rem;

    /* 白いアーチ背景:マップ基準で配置(頂点がSVG上端の約92単位上)。旧:.p-globalMap_container::after */
    &::before {
      content: "";
      display: block;
      width: 100vw;
      height: 200vh;
      position: absolute;
      top: calc(var(--u) * 214.7);
      bottom: -5rem;
      left: 50%;
      translate: -50% 0;
      z-index: -1;
      background-color: rgb(var(--color-base));
      clip-path: shape(from 0 11.43vw, curve to 100% 11.43vw with 50% -11.43vw, line to 100% 100%, line to 0 100%, close);
    }
  }
}

.p-globalMap__figure {
  width: 100%;
  overflow: auto;
  /* 縦書きにするプロパティで右から左に見せる */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;

  /* width: 100vw;
  margin-inline: calc(50% - 50vw);
  */
  @media screen and (min-width: 960px) {
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
  }
}

.p-globalMap__svg {
  display: block;
  min-width: 768px;
  height: auto;

  @media screen and (min-width: 960px) {
    width: 100%;
  }
}

/* ベースの非対象ドットは常時グレー */
.p-globalMap__dots--base {
  fill: #c6c6c6;
}

/* 各地域のドットはデフォルトでグレー */
.p-globalMap__dots[data-region] {
  fill: #c6c6c6;
  transition: fill 0.25s ease;
}

.p-globalMap__dots .c1 {
  fill: rgb(var(--color-primary));
}

/* 対応するトリガーがホバー/フォーカスされたら、同じdata-regionのドットをオレンジに */
.p-globalMap:has(.p-globalMap__region[data-region="americas"] .p-globalMap__regionTrigger:is(:hover, :focus-visible)) .p-globalMap__dots[data-region="americas"] {
  fill: rgb(var(--color-primary));
}

.p-globalMap:has(.p-globalMap__region[data-region="europe"] .p-globalMap__regionTrigger:is(:hover, :focus-visible)) .p-globalMap__dots[data-region="europe"] {
  fill: rgb(var(--color-primary));
}

.p-globalMap:has(.p-globalMap__region[data-region="mea"] .p-globalMap__regionTrigger:is(:hover, :focus-visible)) .p-globalMap__dots[data-region="mea"] {
  fill: rgb(var(--color-primary));
}

.p-globalMap:has(.p-globalMap__region[data-region="asia"] .p-globalMap__regionTrigger:is(:hover, :focus-visible)) .p-globalMap__dots[data-region="asia"] {
  fill: rgb(var(--color-primary));
}

.p-globalMap:has(.p-globalMap__region[data-region="oceania"] .p-globalMap__regionTrigger:is(:hover, :focus-visible)) .p-globalMap__dots[data-region="oceania"] {
  fill: rgb(var(--color-primary));
}

/* 地域のドット:隙間もホバー判定にする */
.p-globalMap__dots:not(.p-globalMap__dots--base) use {
  stroke: transparent;
  stroke-width: 6px;
  /* ドット間隔(約14.5)の半分を超える太さにして、隣のドットと重ねる */
  pointer-events: all;
}

/* ベースのドット(非対象国)はホバーに反応させない */
.p-globalMap__dots--base {
  pointer-events: none;
}

.p-globalMap__dots:not(.p-globalMap__dots--base) {
  transition: fill .3s;
  /* 既存の指定があればそれに合わせる */
}

@media (hover: hover) {

  /* タッチ端末では、押した後にホバーが残ってしまうのを防ぐ */
  .p-globalMap__dots:not(.p-globalMap__dots--base):hover {
    fill: rgb(var(--color-primary));
  }
}

@media (hover: hover) {

  .p-globalMap:has(.p-globalMap__dots[data-region="americas"]:hover) .p-globalMap__region[data-region="americas"] .p-globalMap__regionTrigger,
  .p-globalMap:has(.p-globalMap__dots[data-region="europe"]:hover) .p-globalMap__region[data-region="europe"] .p-globalMap__regionTrigger,
  .p-globalMap:has(.p-globalMap__dots[data-region="mea"]:hover) .p-globalMap__region[data-region="mea"] .p-globalMap__regionTrigger,
  .p-globalMap:has(.p-globalMap__dots[data-region="asia"]:hover) .p-globalMap__region[data-region="asia"] .p-globalMap__regionTrigger,
  .p-globalMap:has(.p-globalMap__dots[data-region="oceania"]:hover) .p-globalMap__region[data-region="oceania"] .p-globalMap__regionTrigger {
    /* リスト側をホバーしたときの、既存のボタンのスタイルと同じ指定を入れる */
    color: rgb(var(--color-primary));
  }
}


.p-globalMap__regionList {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  gap: 0.75em;
  width: 100%;
  /* max-width: calc(1232px + (var(--padding-inline) * 2)); */
  max-width: calc(95vw + (var(--padding-inline) * 2));
  margin-inline: auto;
  padding-inline: var(--padding-inline);

  @media screen and (min-width: 768px) {
    margin-bottom: 5rem;
  }

  @media screen and (min-width: 960px) {
    /* position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); */
    /* PC:各地域(li)は.p-globalMap(=マップと同じ幅)を基準に絶対配置するので、ul自体は大きさを持たせない */
    width: 0;
    max-width: none;
    height: 0;
    margin: 0;
    padding: 0;
  }

  /* @media screen and (min-width: 1400px) {
    max-width: calc(75vw + (var(--padding-inline) * 2));
  } */
}

.p-globalMap__region {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  position: relative;

  @media screen and (min-width: 960px) {
    color: rgb(var(--color-primary));
    /* width: fit-content;
    max-width: 15vw; */

    /* 線の位置(--x)と長さ(--line-h)はマップ(SVG)の座標で指定。
       高さ・幅ともに --u(=マップ幅/1900.43)の倍数なので、画面幅が変わってもマップと一緒に伸縮する */
    position: absolute;
    top: calc(var(--u) * 81.1);
    /* 線の上端 */
    left: var(--x);
    width: 0;
    height: calc(var(--u) * var(--line-h));
    /* font-size: calc(var(--vu) * 1.05); */
  }
}

/* 縦の引き出し線(PCのみの装飾) */
.p-globalMap__region::after {
  content: "";
  display: none;
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  width: 1px;
  background: rgb(var(--color-primary));

  /* SPはデフォルト非表示 */
  @media screen and (min-width: 960px) {
    /* min-height: 340px; */
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    translate: -50% 0;
    /* 旧:1025px以上は --h-min/--h-max と100vwの線形計算(clamp)でheightを指定していた */
  }
}

.p-globalMap__regionTrigger {
  display: block;
  background: none;
  border: none;
  font-family: var(--font-en);
  font-weight: 500;
  color: rgb(var(--color-primary));
  cursor: pointer;
  padding: 0.5em 0.75em;
  border: 1px solid rgb(var(--color-gray));
  border-radius: 999px;
  /* チップ/タブらしい見た目に */
  font-size: 0.875em;
  white-space: nowrap;


  @media screen and (min-width: 960px) {
    padding: 0 0.5em;
    border: none;
    /* font-size: 1em; */
    /* 地域名:1520pxで16px相当。960px付近でも11pxを下回らないようにする */
    font-size: max(11px, calc(var(--vu) * 1.05));
    /* 線の上端にラベルの下端を合わせ、線のx位置がラベルの中心になるように */
    position: absolute;
    bottom: 100%;
    left: 0;
    translate: -50% 0;
    line-height: 2;
    /* buttonはline-heightを継承しないため明示(ラベルの高さ=32px@16px) */
  }
}

.p-globalMap__region[data-region] .p-globalMap__regionTrigger:hover,
.p-globalMap__region[data-region] .p-globalMap__regionTrigger[aria-selected="true"] {
  background: rgb(var(--color-primary));
  color: #fff;
  border-color: rgb(var(--color-primary));
}


/* 国名リストは選択中の地域だけ表示(5つ全部出すと縦に長すぎるため) */
.p-globalMap__countries {
  display: none;

  @media screen and (min-width: 960px) {
    display: block;
    /* margin-top: 1em; */
    margin: 0;
    /* font-size: 0.75em; */
    /* 国名:1520pxで12px相当。960px付近でも10pxを下回らないようにする */
    font-size: max(10px, calc(var(--vu) * 0.7875));
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: 0;
    text-align: right;
    position: absolute;
    /* left: 0;
    top: 100%; */
    /* 線の少し下・線の左側に、右揃えで置く */
    top: calc(var(--u) * 21.3);
    right: calc(var(--u) * 27);
    width: max-content;
    max-width: var(--countries-w, none);
    /* 改行は「／」の後ろに入れた<wbr>の位置だけ */
    word-break: keep-all;
    overflow-wrap: normal;
    /* デザインは1文字=1em(palt無し)。折り返し位置(--countries-w)をフォントに依存させないため */
    font-feature-settings: normal;
  }
}

/* --x:線のx位置(マップ幅に対する%) / --line-h:線の長さ(マップ座標) / --countries-w:国名の折り返し幅 */
.p-globalMap__region[data-region="americas"] {
  --x: 12.79%;
  --line-h: 538;
  --countries-w: 12em;
}

.p-globalMap__region[data-region="europe"] {
  --x: 43.54%;
  --line-h: 507;
  --countries-w: 21em;
}

.p-globalMap__region[data-region="mea"] {
  --x: 55.35%;
  --line-h: 523;
  --countries-w: none;
}

.p-globalMap__region[data-region="asia"] {
  --x: 77.65%;
  --line-h: 569;
  --countries-w: 18.5em;

  /* 960〜1099pxは文字の下限(10px)が効いて、左隣のMEAの線にぶつかるため、折り返し幅を狭めて3行にする */
  @media screen and (min-width: 960px) and (max-width: 1099px) {
    --countries-w: 14.5em;
  }
}

.p-globalMap__region[data-region="oceania"] {
  --x: 93.63%;
  --line-h: 1012;
  --countries-w: none;
}



.p-achievementsList {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2.5rem 1.5rem;
  max-width: calc(1232px + (var(--padding-inline) * 2));
  margin-inline: auto;
  padding-inline: var(--padding-inline);

  @media screen and (min-width: 1120px) {
    justify-content: space-between;
  }

  @media screen and (min-width: 1360px) {
    gap: 2.5rem;
  }

}

.p-achievementsList-item {
  flex-basis: calc(50% - 1.5rem);

  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1rem;
  text-align: center;
  padding-right: 1rem;
  border-right: 1px solid rgb(var(--color-contrast));

  @media screen and (min-width: 480px) {
    flex-basis: calc(35% - 1.5rem);
  }

  @media screen and (min-width: 768px) {
    flex-basis: auto;
  }

  @media screen and (min-width: 1080px) {
    flex-basis: 40%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  @media screen and (min-width: 1120px) {
    /* flex-basis: calc(18% - 3rem - 2px); */
  }

  @media screen and (min-width: 1360px) {
    /* flex-basis: calc(20% - 5rem - 2px); */
    column-gap: 2.5rem;
    padding-right: 2.5rem;
  }

  h4 {
    width: 100%;
    font-size: 0.875em;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.75rem;

    @media screen and (min-width: 1080px) {
      /* font-size: 1.65vw; */
      font-size: calc(var(--vu) * 1.65);
      padding-bottom: 0.75rem;
      margin-bottom: 0;

    }

    @media screen and (min-width: 1400px) {
      /* font-size: 1.25vw; */
      font-size: calc(var(--vu) * 1.25);
    }
  }

  p {
    max-width: 220px;
    font-size: 0.75em;
    font-weight: 400;
    margin-bottom: 0;
    text-align: left;
    letter-spacing: 0;

    @media screen and (min-width: 768px) {
      max-width: 220px;
    }

    @media screen and (min-width: 1080px) {
      max-width: 100%;
      /* font-size: 1.25vw; */
      font-size: calc(var(--vu) * 1.25);
      margin-bottom: auto;
    }

    @media screen and (min-width: 1120px) {
      /* max-width: 30%; */
    }

    @media screen and (min-width: 1280px) {
      /* max-width: 220px; */
      /* max-width: 30%; */
      /* font-size: 1vw; */
      font-size: calc(var(--vu) * 1);
    }
  }

  .num {
    max-width: inherit;
    text-align: center;
    margin-top: 0;

    > span {
      font-family: var(--font-en);
      color: rgb(var(--color-primary));
      /* font-size: 2.5rem; */
      font-size: calc(var(--vu) * 5);
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1;
      display: block;
      margin-top: 0.75rem;

      @media screen and (min-width: 768px) {
        font-size: calc(var(--vu) * 10);
      }

      @media screen and (min-width: 1080px) {
        /* font-size: 10vw; */
        font-size: calc(var(--vu) * 10);
      }

      @media screen and (min-width: 1400px) {
        /* font-size: 5vw; */
        font-size: calc(var(--vu) * 5);
      }

      span {
        font-size: 0.75rem;
        font-weight: 400;
        color: rgb(var(--color-contrast));
        display: inline-block;

        @media screen and (min-width: 1080px) {
          /* font-size: 1.25vw; */
          font-size: calc(var(--vu) * 1.25);
        }

        @media screen and (min-width: 1400px) {
          /* font-size: 1vw; */
          font-size: calc(var(--vu) * 1);
        }
      }
    }
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 1.5rem;
    margin-top: auto;

    @media screen and (min-width: 1360px) {
      gap: 2.5rem;
    }
  }

  li {
    padding-right: 1rem;
    padding-bottom: 1rem;
    border-right: 1px solid rgb(var(--color-contrast));

    @media screen and (min-width: 1080px) {
      &:first-of-type {
        flex-basis: 25%;

      }

      &:not(:first-of-type) {
        flex-basis: calc((75% - 3rem)/2);
      }
    }

    @media screen and (min-width: 1120px) {
      padding-block: 1.5rem;
    }

    @media screen and (min-width: 1360px) {
      padding-top: 0;
      padding-right: 2.5rem;

      &:not(:first-of-type) {
        flex-basis: calc((75% - 5rem)/2);
      }
    }

    .num {

      > span {
        /* font-size: 2.5rem; */
        font-size: calc(var(--vu) * 5);

        @media screen and (min-width: 768px) {
          font-size: calc(var(--vu) * 9);
        }

        @media screen and (min-width: 1080px) {
          /* font-size: 10vw; */
          font-size: calc(var(--vu) * 10);
        }

        @media screen and (min-width: 1400px) {
          /* font-size: 5vw; */
          font-size: calc(var(--vu) * 5);
        }

      }
    }

    &:last-of-type {
      border-right: none;
    }
  }
}

.p-achievementsList-item:first-of-type {
  flex-basis: 50%;

  @media screen and (min-width: 480px) {
    flex-basis: 65%;
  }

  @media screen and (min-width: 768px) {
    flex-basis: auto;
  }

  @media screen and (min-width: 1080px) {
    flex-basis: 55%;
  }

  /* @media screen and (min-width: 1120px) {
    flex-basis: 32%;
  }

  @media screen and (min-width: 1280px) {
    flex-basis: 32.5%;
  } */
}

.p-achievementsList-item:last-of-type {
  flex-basis: 100%;
  border-right: none;
  padding-right: 0;

  @media screen and (min-width: 1120px) {
    /* flex-basis: auto; */
    /* max-width: 50%; */
  }

  @media screen and (min-width: 1360px) {
    /* max-width: 47.5%; */
  }

  h4 {
    text-align: left;
  }

  li:last-of-type {
    padding-right: 0;
  }
}

.p-achievements-caps {
  text-align: right;
  font-weight: 300;
  font-size: 0.75em;
  max-width: calc(1232px + (var(--padding-inline) * 2));
  margin-inline: auto;
  padding-inline: var(--padding-inline);

  @media screen and (min-width: 1080px) {
    /* font-size: 1.4vw; */
    font-size: calc(var(--vu) * 1.4);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.2vw; */
    font-size: calc(var(--vu) * 1.2);
  }
}

.about {
  overflow: visible;
  padding-bottom: calc(7.5em + var(--base-padding-bottom));

  &::before {
    content: "";
    display: block;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    height: 100%;
    background-color: rgb(var(--color-base));
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}

.about .wp-block-table {
  overflow: hidden;
  padding-top: 0;

  &::before,
  &::after {
    display: none;
  }
}

.about table {
  min-width: 100%;
}


.is-style-history table {
  table-layout: fixed;
  position: relative;
  /* 縦線の太さ / 縦線のx位置(=1列目の幅) / 矢じりの幅 */
  --line-w: 1px;
  --line-x: 80px;
  --head-w: 14px;
  /* 矢じりの高さ(幅の約1.38倍) */
  --head-h: calc(var(--head-w) * 1.379);

  @media screen and (min-width: 768px) {
    --line-x: 120px;
    --head-w: 16px;
  }

  @media screen and (min-width: 1080px) {
    --line-w: 0.2vw;
    --line-x: 15vw;
    --head-w: 1.8vw;
  }

  @media screen and (min-width: 1400px) {
    --line-x: 8vw;
    --head-w: 1.4vw;
  }

  /* 矢じり:後ろに切れ込みのある塗りの三角(下向き)。先端がテーブル下端、縦線の中心の延長上 */
  &::after {
    content: "";
    display: block;
    width: var(--head-w);
    height: var(--head-h);
    background: rgb(var(--color-primary));
    /* 左上の角 → 切れ込みの頂点 → 右上の角 → 先端 */
    clip-path: polygon(0 0, 50% 31%, 100% 0, 50% 100%);
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: calc(var(--line-x) - var(--line-w) / 2);
    translate: -50% 0;
    transition: opacity .3s;
    /* 旧:2remの正方形を45°回転して、border-right/bottomでV字を作っていた
    width: 2rem; height: 2rem; bottom: 0.4rem; left: calc(15vw - 1.05rem);
    border-right: 0.2vw solid rgb(var(--color-primary)); border-bottom: 0.2vw solid rgb(var(--color-primary));
    transform: rotate(45deg); */
  }
}

.is-style-history table:has(tr.start:last-child) {

  &::after {
    /* animation: arrowEnd .8s linear .5s forwards; */
    /* 縦線が伸び終わる頃に、上から下りてくるように出す */
    animation: arrowHead .6s cubic-bezier(.22, 1, .36, 1) .6s forwards;
  }
}

.is-style-history table tr {
  border-bottom: none;

  &:last-of-type td {
    padding-bottom: 4vw;
  }
}

.is-style-history table td {
  vertical-align: top;
  padding-top: 1em;
  padding-inline: 0.5em;
  font-size: 0.875em;

  @media screen and (min-width: 1080px) {
    /* font-size: 1.45vw; */
    font-size: calc(var(--vu) * 1.45);
  }

  @media screen and (min-width: 1400px) {
    /* font-size: 1.2vw; */
    font-size: calc(var(--vu) * 1.2);
  }
}

.is-style-history td:first-of-type {
  min-width: inherit !important;
  width: 80px;
  text-align: center;
  color: rgb(var(--color-primary));
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.5em;
  padding-left: 0;
  padding-top: 0.6em;
  line-height: 1;
  position: relative;

  @media screen and (min-width: 768px) {
    width: 120px;
    font-size: 1.875em;
  }

  @media screen and (min-width: 1080px) {
    width: 15vw;
    /* font-size: 3.5vw; */
    font-size: calc(var(--vu) * 3.5);
    padding-top: 0.3em;
  }

  @media screen and (min-width: 1400px) {
    width: 8vw;
    /* font-size: 2.25vw; */
    font-size: calc(var(--vu) * 2.25);
    padding-top: 0.5em;
  }

  &::before {
    content: "";
    display: block;
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: rgb(var(--color-primary));
    position: absolute;
    top: calc(0.3em + 10px);
    right: -4.5px;

    /* transform: translateY(-50%); */
    @media screen and (min-width: 1080px) {
      /* width: 1vw; */
      /* right: -0.45vw; */
      width: calc(var(--vu) * 1);
      top: calc(0.3em + var(--vu) * 1);
      right: calc((var(--vu) * 0.45) * -1);
    }

    @media screen and (min-width: 1400px) {
      width: calc(var(--vu) * 0.8);
      top: calc(0.3em + var(--vu) * 0.8);
      right: calc((var(--vu) * 0.45) * -0.65);
    }

  }

  &::after {
    --line-top: calc(0.5em + 10px);
    content: "";
    position: absolute;
    /* top: calc(0.5em + 10px); */
    top: var(--line-top);
    right: 0;
    /* width: 1px; */
    width: var(--line-w);
    height: 0;
    background: rgb(var(--color-primary));
    transition: 1s;

    @media screen and (min-width: 1080px) {
      /* width: 0.2vw; (縦線の太さは table の --line-w) */
      /* top: calc(0.3em + 1vw); */
      --line-top: calc(0.3em + var(--vu) * 1);
    }

    /* @media screen and (min-width: 1400px) {
      --line-top: calc(0.3em + var(--vu) * .8);
    } */
  }
}

.is-style-history tr.start td:first-of-type {
  &::after {
    animation: heightLine .3s linear .5s forwards;
  }
}

/* 各行の縦線は「次の行の点」まで伸ばす(行の高さ分)。最後の行だけは、矢じりの高さの半分の位置(矢じりの塗りの中)で止める */
.is-style-history table tr:last-of-type td:first-of-type::after {
  --line-h: calc(100% - var(--line-top) - var(--head-h) * 0.5);
}

.is-style-history td:nth-of-type(2) {
  width: 50px;
  text-align: center;
  color: #ddd;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.125em;
  line-height: 1;

  @media screen and (min-width: 768px) {
    width: 60px;
    font-size: 1.25em;

  }

  @media screen and (min-width: 1080px) {
    width: 8vw;
    /* font-size: 2.75vw; */
    font-size: calc(var(--vu) * 2.75);
    padding-top: 0.55em;
  }

  @media screen and (min-width: 1400px) {
    width: 6vw;
    /* font-size: 2vw; */
    font-size: calc(var(--vu) * 2);
  }
}


@keyframes heightLine {
  0% {
    height: 0;
  }

  100% {
    /* height: 100%; */
    height: var(--line-h, 100%);
  }
}

@keyframes arrowHead {
  0% {
    opacity: 0;
    translate: -50% -0.9em;
  }

  100% {
    opacity: 1;
    translate: -50% 0;
  }
}

@keyframes arrowEnd {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.flow-list {
  .wp-block-group:not(:last-of-type) {
    margin-bottom: calc(2.5em + 15px);
    position: relative;

    &::after {
      content: "";
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid rgb(var(--color-primary));
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.check-contact-area {
  border-bottom: 1px solid rgb(var(--color-contrast));
  padding-bottom: 10em;
  position: relative;

  @media screen and (min-width: 960px) {
    padding-bottom: 2.5em;
  }

  @media screen and (min-width: 1080px) {
    padding-bottom: 10em;
  }

  @media screen and (min-width: 1240px) {
    padding-bottom: 2.5em;
  }

  &::after {
    content: "";
    display: block;
    width: 60%;
    max-width: 180px;
    aspect-ratio: 204/188;
    background: url(../img/illust-ceo.png) no-repeat right bottom / contain;
    position: absolute;
    bottom: 0;
    right: 0;

    @media screen and (min-width: 960px) {
      /* background-size: 220px auto; */
      /* top: 1.5em; */
      bottom: 16px;
      right: 0;
    }

    @media screen and (min-width: 1080px) {
      max-width: 160px;
    }

    @media screen and (min-width: 1240px) {
      max-width: 204px;
    }
  }

  .wp-block-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    &::after {
      content: "";
      display: block;
      flex: 1;
      height: 1px;
      background-color: rgb(var(--color-contrast));

      @media screen and (min-width: 960px) {
        max-width: calc(100% - 204px - 1rem);
      }

      @media screen and (min-width: 1080px) {
        max-width: 100%;
      }

      @media screen and (min-width: 1240px) {
        max-width: calc(100% - 204px - 1rem);
      }
    }
  }

  /* .wp-block-paragraph {
    @media screen and (min-width: 960px) {
      padding-right: calc(2.5em + 220px);
    }
  } */
}

.fix-ceo {
  width: 25%;
  max-width: 150px;
  aspect-ratio: 150/170;
  position: fixed;
  bottom: 1.5em;
  right: 1.5em;
  /* z-index: 3; */

  picture,
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.fix-ceo {
  width: 30%;
  max-width: 150px;
  aspect-ratio: 150/170;
  position: fixed;
  bottom: 1.5em;
  right: 1.5em;
  z-index: 1;
  /* 本文より下、ヘッダー(z-index:1000)より下になるように */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(100% + 1.5em));
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;

  &.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity .5s ease, transform .5s ease, visibility 0s;
  }

  @media screen and (min-width: 1080px) {
    max-width: 12vw;
  }

}

@media (prefers-reduced-motion: reduce) {

  .fix-ceo,
  .fix-ceo.is-visible {
    transition: none;
    transform: none;
  }
}