@charset "utf-8";

/*-------------------------------------------
 1.base.css
-------------------------------------------*/

/*--------------------------------------------
  HTML5 Reset ::style.css
  -------------------------
  We have learned much from/been inspired by/taken code where offered from:
  Eric Meyer:http://ericmeyer.com
  HTML5 Doctor:http://html5doctor.com
  and the HTML5 Boilerplate:http://html5boilerplate.com
---------------------------------------------*/

/* Let's default this puppy out
--------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

/* Responsive images and other embedded objects
   Note:keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
/*
img,
object,
embed{max-width:100%;}
.ie8 img,
.ie8 object,
.ie8 embed{width:auto;}
*/
html {
  word-wrap: break-word;
}

ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

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

th {
  font-weight: bold;
  vertical-align: top;
}

td {
  font-weight: normal;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #999;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: top;
}

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

input[type="radio"] {
  vertical-align: middle;
}

input[type="checkbox"] {
  vertical-align: middle;
}

select,
input,
textarea {
  font: 99% sans-serif;
  font-family:
    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック";
}

table {
  font: 100%;
}

a:hover,
a:active {
  outline: none;
}

strong,
th {
  font-weight: bold;
}

td,
td img {
  vertical-align: top;
}

sub,
sup {
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}

.clickable,
label,
input[type="button"],
input[type="submit"],
button {
  cursor: pointer;
}

button,
input,
select,
textarea {
  margin: 0;
}

button {
  width: auto;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

img {
  vertical-align: bottom;
}

/*-------------------------------------------
 Base Setting
-------------------------------------------*/

html {
  font-size: 62.5%;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--header-height, 110px);
}

body {
  /* 変数を参照する形に変更 */
  font-family: var(--font-family);
  font-size: var(--fz-txt-md);
  font-weight: var(--weight-s);
  line-height: var(--lh);
  color: var(--ft-color-sub-black);
  min-width: 320px;
  width: 100%;
  overflow-wrap: anywhere;
  /* 収まらない場合に折り返す */
  word-break: normal;
  /* 単語の分割はデフォルトに依存 */
  line-break: strict;
  /* 禁則処理を厳格に適用 */
}

/* =========================================
   SPドロワー開閉時の背景固定＆オーバーレイ
========================================= */

/* 1. 背景スクロールを完全に固定 */
body.is-drawer-open {
  overflow: hidden;
}

/* 2. オーバーレイ（半透明の黒い膜）の土台 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

/* 3. クラスが付いた時にフワッと表示 */
body.is-drawer-open::after {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

:lang(en) {
  font-family: var(--font-family-en);
}

:lang(zh-CN) {
  font-family: var(--font-family-cn);
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}

caption,
th,
td {
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}

fieldset {
  border: none;
}

input,
textarea,
select,
label {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 100%;
  vertical-align: middle;
}

select {
  box-sizing: border-box;
  background-color: white;
  cursor: default;
}

input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
}

label,
button {
  cursor: pointer;
}

textarea {
  overflow: auto;
  box-sizing: border-box;
}

header,
hgroup,
footer,
article,
section,
nav,
aside,
figure {
  display: block;
}

img {
  border: none;
  vertical-align: top;
}

em,
strong {
  font-weight: bold;
  font-style: normal;
}

mark {
  font-weight: bold;
}

object {
  vertical-align: middle;
  outline: none;
}

blockquote,
q {
  quotes: none;
}

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

code {
  font-family: monospace;
}

sup {
  vertical-align: super;
  font-size: 0.555em;
}

sub {
  vertical-align: sub;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

abbr,
acronym {
  border: none;
  font-variant: normal;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #333;
  cursor: help;
}

address,
caption,
cite,
code,
dfn,
var {
  font-weight: normal;
  font-style: normal;
}

hr {
  display: none;
}

pre {
  font-family: monospace;
}

a {
  color: #0978d9;
  vertical-align: baseline;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a[nohref] {
  cursor: pointer;
}

.clear:after,
.section-inner:after {
  display: table;
  content: "";
  clear: both;
}

.clear,
.section-inner {
  zoom: 1;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

@media screen and (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/*-------------------------------------------
 2.cmn.css
-------------------------------------------*/

@font-face {
  font-family: "FS Emeric Light";
  src: url("/cmn/fonts/FSEmericWebLight/fs_emeric_web-light.eot");
  src:
    url("/cmn/fonts/FSEmericWebLight/fs_emeric_web-light.eot#iefix") format("embedded-opentype"),
    url("/cmn/fonts/FSEmericWebLight/fs_emeric_web-light.woff") format("woff"),
    url("/cmn/fonts/FSEmericWebLight/fs_emeric_web-light.svg#webfont") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "FS Emeric Regular";
  src: url("/cmn/fonts/FSEmericWebRegular/fs_emeric_web-regular.eot");
  src:
    url("/cmn/fonts/FSEmericWebRegular/fs_emeric_web-regular.eot#iefix") format("embedded-opentype"),
    url("/cmn/fonts/FSEmericWebRegular/fs_emeric_web-regular.woff") format("woff"),
    url("/cmn/fonts/FSEmericWebRegular/fs_emeric_web-regular.svg#webfont") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "FS Emeric Medium";
  src: url("/cmn/fonts/FSEmericWebMedium/fs_emeric_web-medium.eot");
  src:
    url("/cmn/fonts/FSEmericWebMedium/fs_emeric_web-medium.eot#iefix") format("embedded-opentype"),
    url("/cmn/fonts/FSEmericWebMedium/fs_emeric_web-medium.woff") format("woff"),
    url("/cmn/fonts/FSEmericWebMedium/fs_emeric_web-medium.svg#webfont") format("svg");
  font-display: swap;
}

@font-face {
  font-weight: 700;
  font-family: FSEmeric;
  font-style: normal;
  src: url("/cmn/fonts/FSEmericWebBold/fs_emeric_web-bold.woff") format("woff");
  font-display: swap;
}

.font-fs-L {
  font-family: "FS Emeric Light", Verdana, sans-serif;
}

.font-fs-R {
  font-family: "FS Emeric Regular", Verdana, sans-serif;
}

.font-fs-M {
  font-family: "FS Emeric Medium", Verdana, sans-serif;
}

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

.font-mincho-cn {
  font-family: var(--font-mincho-cn) !important;
}

.font-mincho .sup,
.font-mincho .sub {
  font-family: var(--font-mincho);
}

* {
  box-sizing: border-box;
}

/* **************************************************************
  renew_header
************************************************************** */
a {
  text-decoration: none;
  color: inherit;
}

.header-wrap {
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
}

header {
  width: 100%;
  background: var(--bg-color-white);
  border-bottom: 1px solid #cccccc;
  padding-left: 2rem;
  padding-right: 2rem;
}

.fl-box {
  display: flex;
}

.header-nav-sub .sp-menu {
  display: none;
}

.header-nav-logo {
  display: flex;
  align-items: center;
  position: absolute;
  top: 14px;
}

.header-nav-logo .logo {
  width: 112px;
}

.logo-txt {
  font-family: var(--font-family-en);
  font-weight: bold;
  font-size: 1.4rem;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid #d1d1d1;
}

.logo-txt br {
  display: none;
}

.header-nav-sub {
  position: relative;
}

.header-nav-sub .nav-sub {
  display: flex;
  justify-content: flex-end;
}

.header-nav-sub .nav-sub>li {
  font-size: 1.4rem;
}

.header-nav-sub .nav-sub>li a,
.header-nav-sub .nav-sub>li .lang_switch {
  display: block;
  padding: 20px 15px 20px 35px;
  position: relative;
  font-size: 1.4rem;
  height: 100%;
}

.header-nav-sub .nav-sub>li a:hover,
.header-nav-sub .nav-sub>li .lang_switch:hover {
  text-decoration: none;
  background: var(--color-support1);
  color: var(--bg-color-white);
}

.header-nav-sub .nav-sub>li .lang_switch:focus {
  text-decoration: none;
  background: var(--color-support1);
  color: var(--bg-color-white);
}

.header-nav-sub .nav-sub>li a::before,
.header-nav-sub .nav-sub>li .lang_switch::before {
  display: block;
  content: "";
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}

.header-nav-sub .nav-sub .faq a::before {
  width: 1.25em;
  height: 1.25em;
}

.header-nav-sub .nav-sub .faq a::before {
  background: url("/cmn/img/icon-faq-gy.svg") no-repeat center center;
  background-size: contain;
  filter: invert(8%) sepia(3%) saturate(23%) hue-rotate(356deg) brightness(99%) contrast(88%);
}

.header-nav-sub .nav-sub .inquiry a::before {
  background: url("/cmn/img/icon-mail-gy.svg") no-repeat center center;
  background-size: contain;
  filter: invert(8%) sepia(3%) saturate(23%) hue-rotate(356deg) brightness(99%) contrast(88%);
}

.header-nav-sub .nav-sub>li .lang_switch::before {
  /* content: url("/cmn/img/icon-sprite.svg#icon-globe"); */
  background: url("/cmn/img/icon-global.svg") no-repeat center center;
  background-size: contain;
  /* filter: invert(8%) sepia(3%) saturate(23%) hue-rotate(356deg) brightness(99%)
    contrast(88%); */
}

.header-nav-sub .nav-sub .faq a:hover::before {
  background: url("/cmn/img/icon-faq-wt.svg") no-repeat center center;
  background-size: contain;
}

.header-nav-sub .nav-sub .inquiry a:hover::before {
  background: url("/cmn/img/icon-mail-wt.svg") no-repeat center center;
  background-size: contain;
}

.header-nav-sub .nav-sub>li .lang_switch:hover::before,
.header-nav-sub .nav-sub>li .lang_switch:focus::before {
  background: url("/cmn/img/header_nav_global_wt.png") no-repeat center center;
  background-size: contain;
  /* background: url("/cmn/img/icon-global.svg") no-repeat center center; */
  /* filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg)
    brightness(102%) contrast(102%); */
}

.header-nav-sub .nav-sub .lang_select button {
  border: 0;
  background: none;
  /* color: var(--color-support1); */
}

#drawer_local {
  display: none;
}

#drawer_local.active {
  background-color: var(--bg-color-white);
  border-radius: 4px;
  bottom: 0;
  box-shadow: 0 0 4px rgb(0 0 0 / 16%);
  padding: 22px 20px;
  position: absolute;
  right: 0;
  transform: translateY(100%);
  width: 304px;
  z-index: 1001;
  display: block;
}

#drawer_local .dropdown_list>li {
  word-wrap: break-word;
  margin-top: 11px;
}

#drawer_local .dropdown_list>li:first-of-type {
  margin-top: 0;
}

#drawer_local .dropdown_list>li a {
  text-decoration: underline;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 0;
}

#drawer_local .dropdown_list>li a:hover {
  background: var(--bg-color-white);
  color: var(--color-support1);
  text-decoration: none;
}

#drawer_local .dropdown_list>li a[aria-current] {
  position: relative;
  text-decoration: none;
  pointer-events: none;
}

#drawer_local .dropdown_list>li a[aria-current]::before {
  background-color: var(--color-main1);
  content: "";
  display: block;
  height: 16px;
  left: -20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
}

.header-nav-sub .nav-sub>li .lang_switch.active::before,
.header-nav-sub .nav-sub>li .lang_switch.active::after {
  content: "";
  height: 2px;
  background: #525b5c;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  z-index: 2;
  width: 1em;
  transform-origin: center center;
}

.header-nav-sub .nav-sub>li .lang_switch.active:hover::before,
.header-nav-sub .nav-sub>li .lang_switch.active:hover::after,
.header-nav-sub .nav-sub>li .lang_switch.active:focus::before,
.header-nav-sub .nav-sub>li .lang_switch.active:focus::after {
  background-color: #fff;
}

.header-nav-sub .nav-sub>li .lang_switch.active::before {
  /* rotate: 45deg; */
  transform: translate(0, -50%) rotate(45deg);
}

.header-nav-sub .nav-sub>li .lang_switch.active::after {
  /* rotate: -45deg; */
  transform: translate(0, -50%) rotate(-45deg);
}

/* メイングロナビ */
.header-nav-main_inner {
  align-items: center;
  display: flex;
  height: 100%;
  /* justify-content: flex-end; */
  justify-content: center;
  /* padding-top: 10px; */
}

.header-nav-main nav>ul {
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 3rem;
}

.header-nav-main nav>ul>li>a {
  color: #222222;
  font-weight: bold;
  font-size: 1.6rem;
  height: 100%;
  padding: 2px 16px 13px;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  text-align: left;
}

.header-nav-main nav>ul>li>a.menu-trigger {
  /* padding: 10px 36px 19px 16px; */
  padding-right: 36px;
}

.header-nav-main nav>ul>li>a::before {
  background-color: var(--color-main1);
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right top;
  transition: transform 0.3s;
  width: 100%;
}

.header-nav-main nav>ul>li>a.current::before,
.header-nav-main nav>ul>li>a:hover::before,
.header-nav-main nav>ul>li>a.is-open::before {
  transform: scale(1);
  transform-origin: left top;
}

.header-nav-main nav>ul>li>a:hover,
.header-nav-main nav>ul>li>a.is-open {
  color: var(--ft-color-main);
}

.header-nav-main nav>ul>li>a .menu-ttl-sub {
  display: block;
  text-align: center;
  font-size: 0.75em;
  margin-top: 0.5em;
  color: var(--color-support2);
}

.header-nav-main nav>ul>li>a .menu-ttl {
  position: relative;
}

.header-nav-main nav>ul>li>a.menu-trigger .menu-ttl::before {
  top: 50%;
  right: -15px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.header-nav-main nav>ul>li>a.menu-trigger .menu-ttl:hover::before {
  border-color: var(--color-main1);
}

.header-nav-main nav>ul>li>a.menu-trigger.is-open .menu-ttl::before {
  margin-top: 2px;
  transform: translateY(-50%) rotate(-135deg);
}

.header-nav-main .megaMenu {
  width: 100%;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-support7);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  /* scrollbar-width: thin; */
}

.header-nav-main .megaMenu {
  display: none;
}

.header-nav-main .megaMenu.is-open {
  display: block;
}

.header-nav-main .megaMenu .megaMenuChild {
  max-width: 1280px;
  margin: auto;
  background: var(--bg-color-white);
}

.header-nav-main .megaMenu .menu-close-button {
  align-items: center;
  background-color: #222;
  border-width: 0;
  border-radius: 8px 8px 0 0;
  color: var(--bg-color-white);
  display: flex;
  justify-content: center;
  padding: 15px 30px;
  width: 100%;
  position: sticky;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.header-nav-main .megaMenu .menu-close-button span {
  position: relative;
  color: var(--bg-color-white);
  font-weight: normal;
}

.header-nav-main .megaMenu .menu-close-button span::before,
.header-nav-main .megaMenu .menu-close-button span::after {
  background-color: var(--bg-color-white);
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  top: 0;
  height: 20px;
  left: -20px;
}

.header-nav-main .megaMenu .menu-close-button span::before {
  transform: rotate(45deg);
}

.header-nav-main .megaMenu .menu-close-button span::after {
  transform: rotate(-45deg);
}

/* megaMenu オープン時 */
.megaMenu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: none;
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .megaMenu-overlay {
  padding-right: calc(100vw - 100% + 17px);
  width: 100vw;
}

.megaMenu .megaMenu-list {
  padding: 30px 30px 40px;
}

.megaMenu .megaMenu-link-main {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid var(--color-support4);
  padding: 30px 25px;
}

.megaMenu .megaMenu-link-main .link {
  position: relative;
  font-weight: bold;
  font-size: 2rem;
  border-left: 5px solid var(--color-main1);
  padding-left: 10px;
}

.megaMenu .megaMenu-link-main .link .link-ttl-main {
  display: inline-flex;
  align-items: center;
}

.megaMenu .megaMenu-link-main .link .link-ttl-sub {
  font-size: 1.6rem;
  position: relative;
}

.megaMenu .megaMenu-link-main .link:hover {
  color: var(--color-main1);
}

.megaMenu .megaMenu-link-main .link::before {
  width: 8px;
  height: 8px;
  top: 58%;
  right: -15px;
}

.megaMenu .megaMenu-link-sub.mb {
  margin-bottom: 40px;
}

.megaMenu .megaMenu-txt-ttl {
  padding: 30px 30px 20px 30px;
}

.megaMenu .megaMenu-link-sub .no-link {
  font-weight: bold;
  font-size: 1.6rem;
}

.megaMenu .megaMenu-link-sub .link {
  display: flex;
  position: relative;
  font-weight: bold;
  font-size: 1.6rem;
  padding-left: 15px;
}

.megaMenu .megaMenu-link-sub .link:hover {
  color: var(--color-main1);
}

.megaMenu .megaMenu-link-sub .link::after {
  content: "";
  width: 3em;
  height: 2px;
  background-color: var(--color-main1);
  position: absolute;
  left: 1em;
  bottom: -10px;
}

.megaMenu .line-bottom-light,
.megaMenu .line-bottom-bold {
  position: relative;
}

.megaMenu .line-bottom-light::after {
  content: "";
  width: 1220px;
  height: 1px;
  background: var(--color-support5);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.megaMenu .line-bottom-bold::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-support3);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.megaMenu .megaMenu-item .megaMenu-list .list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 4%;
}

.megaMenu .megaMenu-item .megaMenu-list .list-long li .thumb {
  margin-bottom: 1em;
  width: 250px;
}

.megaMenu .megaMenu-item .megaMenu-list .list-short li {
  width: calc(100% / 3 - 35px);
}

.megaMenu .megaMenu-item .megaMenu-list .list-short li a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.megaMenu .megaMenu-item .megaMenu-list .list li a:hover * {
  color: var(--color-main1);
}

.megaMenu .megaMenu-item .megaMenu-list .list-short li a .thumb {
  width: 125px;
}

.megaMenu .megaMenu-item .megaMenu-list .list-short li a .megaMenu-list-ttl {
  position: relative;
  padding-left: 16px;
  font-weight: var(--weight-b);
  font-size: 1.3rem;
}

.megaMenu .megaMenu-item .megaMenu-list .list-short li a .megaMenu-list-ttl span sub {
  bottom: 0.25rem;
}

.megaMenu .megaMenu-item .megaMenu-list .list-short li a .tab-ttl {
  padding-left: 0;
}

.megaMenu .megaMenu-item .megaMenu-list .list-short li a .megaMenu-list-ttl::before {
  width: 5px;
  height: 5px;
  left: 0;
}

@media screen and (max-width: 1320px) {
  .megaMenu .megaMenu-item .megaMenu-list .list-short li {
    width: calc(100% / 2 - 35px);
  }
}

/* ヘッダーの固定と追従 */
.header-wrap {
  width: 100%;
  transition: transform 0.3s ease;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
}

/* メガメニューのz-index調整 */
.megaMenu {
  position: relative;
  z-index: 1000;
}

.header-nav-sp {
  display: none;
}

/* KUMIHIMO用サブナビ */
.k-header {
  background-color: var(--bg-color-grey);
  color: var(--bg-color-white);
  padding: 0.5rem 2rem;
}

.k-header_inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.logo-sub {
  font-size: 1.6rem;
  font-weight: var(--weight-b);
  grid-column: 1 /2;
  white-space: nowrap;
}

.k-header_nav {
  grid-column: 2 / 3;
  display: flex;
  flex-wrap: wrap;
  column-gap: 3rem;
}

.k_nav-list a,
.k_nav-list.archive button {
  font-size: 1.4rem;
  display: flex;
  min-height: 6rem;
  align-items: center;
  color: var(--bg-color-white);
  padding: 0;
}

.k_nav-list.archive button {
  appearance: none;
  border: none;
  background-color: transparent;
}

.k_nav-list.has-child {
  position: relative;
  z-index: 1;
}

.k_nav-list.has-child .child {
  display: none;
  background-color: var(--bg-color-white);
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
}

.k_nav-list.has-child .child a {
  padding: 1rem;
}

@media screen and (max-width: 768.9px) {
  .header-nav-logo .logo {
    width: 90px;
  }

  .logo-txt {
    line-height: var(--lh-sm);
    font-size: 1.2rem;
  }

  .logo-txt br {
    display: block;
  }

  .header-nav-logo {
    margin: 0 auto;
    max-width: 80vw;
    padding: 1.2rem 1rem;
    justify-content: center;
  }

  .header-nav-sp__container,
  .header-nav-sub,
  .header-nav-main {
    display: none;
  }

  .header-nav-sp {
    display: block;
  }

  .header-nav-sp .header-nav-logo {
    position: static;
  }

  /* --- ボタン土台 --- */
  .header-nav-sp__nav .js-drawer-menu {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 6rem;
    height: 6rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0;
  }

  /* --- 3本の線の共通設定 --- */
  .header-nav-sp__nav .js-drawer-menu::before,
  .header-nav-sp__nav .js-drawer-menu::after,
  .header-nav-sp__nav .js-drawer-menu span::before {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    background-color: #525b5c;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s;
  }

  /* --- 通常時の長さと位置（左揃え） --- */
  .header-nav-sp__nav .js-drawer-menu::before {
    margin-top: -10px;
    width: 28px;
    right: 16px;
  }

  .header-nav-sp__nav .js-drawer-menu span::before {
    width: 24px;
    right: 20px;
  }

  .header-nav-sp__nav .js-drawer-menu::after {
    margin-top: 10px;
    width: 20px;
    right: 24px;
  }

  /* --- アクティブ時：ここでアニメーションを指定（上書き厳禁） --- */
  .header-nav-sp__nav .js-drawer-menu.is-active::before {
    animation: menu-line1 0.8s 0.1s forwards;
    /* 0.1s遅れ */
  }

  .header-nav-sp__nav .js-drawer-menu.is-active span::before {
    animation: menu-line2 0.8s 0.2s forwards;
    /* 0.2s遅れ */
  }

  .header-nav-sp__nav .js-drawer-menu.is-active::after {
    animation: menu-line3 0.8s 0.3s forwards;
    /* 0.3s遅れ */
  }
}

@keyframes menu-line1 {
  0% {
    margin-top: -10px;
    right: 16px;
    width: 28px;
    opacity: 1;
    transform: translateY(-50%) rotate(0);
  }

  30% {
    margin-top: -10px;
    right: 16px;
    width: 0;
    opacity: 1;
    transform: translateY(-50%) rotate(0);
  }

  31% {
    margin-top: 0;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%) rotate(45deg) scaleX(0);
    width: 28px;
    opacity: 0;
  }

  100% {
    margin-top: 0;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%) rotate(45deg) scaleX(1);
    width: 28px;
    opacity: 1;
  }
}

@keyframes menu-line2 {
  0% {
    right: 20px;
    width: 24px;
    opacity: 1;
  }

  30% {
    right: 20px;
    width: 0;
    opacity: 1;
  }

  100% {
    right: 20px;
    width: 0;
    opacity: 0;
  }
}

@keyframes menu-line3 {
  0% {
    margin-top: 10px;
    right: 24px;
    width: 20px;
    opacity: 1;
    transform: translateY(-50%) rotate(0);
  }

  30% {
    margin-top: 10px;
    right: 24px;
    width: 0;
    opacity: 1;
    transform: translateY(-50%) rotate(0);
  }

  31% {
    margin-top: 0;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%) rotate(-45deg) scaleX(0);
    width: 28px;
    opacity: 0;
  }

  100% {
    margin-top: 0;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%) rotate(-45deg) scaleX(1);
    width: 28px;
    opacity: 1;
  }
}

/* PC用グロナビ調整CSS - Start */

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

  .header-nav-main .megaMenu {
    width: 100%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-support7);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    border-top: 1px solid #d1d1d1;
  }

  .megaMenu .megaMenu-link-main {
    border-top: 0;
    border-bottom: 0;
    padding: 30px 30px;
  }

  .megaMenu .line-bottom-bold::after {
    content: "";
    width: 100%;
    height: 3px;
    background: var(--color-support7);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

  .megaMenu .megaMenu-list {
    padding: 0 30px 40px;
  }

  .icon-tab {
    width: 1.0em;
    height: 1.0em;
    margin-left: 0.5em;
    vertical-align: middle;
  }

  .megaMenu .megaMenu-item .megaMenu-list .list-short li a {
    gap: 10px;
  }

  .megaMenu .megaMenu-item .megaMenu-list .list-short li a .megaMenu-list-ttl {
    position: relative;
    padding-left: 16px;
    font-weight: var(--weight-b);
    font-size: var(--fz-txt-sm);
    display: inline-block;
  }

  .megaMenu .megaMenu-link-sub .link {
    margin-bottom: 30px;
  }

  .megaMenu .megaMenu-link-sub .link {
    display: flex;
    position: relative;
    font-weight: var(--weight-b);
    font-size: var(--fz-txt-md);
    padding-left: 15px;
  }

  .megaMenu .megaMenu-link-sub .no-link {
    font-weight: bold;
    font-size: 1.6rem;
  }

  .megaMenu .line-bottom-light::after {
    content: "";
    width: 1220px;
    height: 0;
    background: var(--color-support5);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

  .bd-top {
    border-top: 1px solid #d1d1d1;
    padding-top: 24px;
  }

  .pt-40 {
    padding-top: 40px !important;
  }

  .pb-20 {
    padding-bottom: 20px !important;
  }

  .pb-30 {
    padding-bottom: 30px !important;
  }

  .pb-40 {
    padding-bottom: 40px !important;
  }

  .pb-50 {
    padding-bottom: 50px !important;
  }

  .megaMenu .megaMenu-item .megaMenu-list .list-long li a .thumb {
    margin-bottom: 10px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    transition: border-color .3s cubic-bezier(.25, .8, .25, 1), box-shadow .3s cubic-bezier(.25, .8, .25, 1);
  }

  .megaMenu .megaMenu-item .megaMenu-list .list-short li a .thumb {
    width: 125px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    transition: border-color .3s cubic-bezier(.25, .8, .25, 1), box-shadow .3s cubic-bezier(.25, .8, .25, 1);
  }

  .megaMenu .megaMenu-item .megaMenu-list .list-long li a:hover .thumb,
  .megaMenu .megaMenu-item .megaMenu-list .list-short li a:hover .thumb {
    border-color: #fff;
    box-shadow: 0 0 10px rgba(234, 0, 42, .16);
  }

  /* =========================================
    PC時（769px以上）：メガメニューの4等幅グリッド
  ========================================= */
  .megaMenu .megaMenu-item .megaMenu-list .list.list-long {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .megaMenu .megaMenu-item .megaMenu-list .list-long li a {
    margin-bottom: 1em;
    width: 100%;
    height: auto;
  }

  .megaMenu .megaMenu-item .megaMenu-list .list-long li a .thumb {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

}

/* PC用グロナビ調整CSS - End */

@media (max-width: 768.9px) {
  header {
    padding-left: 0;
    padding-right: 0;
  }

  .header-nav-sp__list {
    overflow-y: auto;
    max-height: calc(100vh - 186px);
    max-height: calc(100dvh - 186px);
    -webkit-overflow-scrolling: touch;
  }

  /* --- button要素の初期化（追加） --- */
  .header-nav-sp__list button.js-sp-accordion-toggle {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
  }

  /* =========================================
     共通のレイアウト（はみ出し防止の安全設計）
  ========================================= */
  .header-nav-sp__list a,
  .header-nav-sp__list button.js-sp-accordion-toggle {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 5.0rem 1.2rem 2.4rem;
    text-decoration: none;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
  }

  /* カレント時の左ライン（フォントサイズ同寸） */
  .header-nav-sp__list a::before,
  .header-nav-sp__list button.js-sp-accordion-toggle::before {
    content: "";
    position: absolute;
    left: 2.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1em;
    background-color: transparent;
    transition: background-color 0.3s ease;
  }

  .header-nav-sp__list>li>a.current,
  .header-nav-sp__list>li>button.js-sp-accordion-toggle.current {
    color: #ea002a;
    font-weight: bold;
    padding-left: 3.6rem;
  }

  .header-nav-sp__list>li>a.current::before,
  .header-nav-sp__list>li>button.js-sp-accordion-toggle.current::before {
    background-color: #ea002a;
  }

  /* =========================================
     1. 階層感の表現 ＆ 文字色の統一
     ※文字色はすべて #222 で統一
  ========================================= */
  .header-nav-sp__list>li>a,
  .header-nav-sp__list>li>button.js-sp-accordion-toggle {
    font-size: 1.6rem;
    font-weight: bold;
    color: #222;
  }

  .header-nav-sp__sublist>li>a,
  .header-nav-sp__sublist>li>button.js-sp-accordion-toggle {
    font-size: 1.4rem;
    font-weight: normal;
    color: #222;
  }

  .header-nav-sp__sublist .header-nav-sp__sublist>li>a,
  .header-nav-sp__sublist .header-nav-sp__sublist>li>button.js-sp-accordion-toggle {
    font-size: 1.3rem;
    font-weight: normal;
    color: #222;
    line-height: 1.5;
  }

  /* --- リストのボーダー --- */
  .header-nav-sp__list li {
    border-bottom: 1px solid var(--color-support5);
  }

  .header-nav-sp__list li:last-child {
    border-bottom: none;
  }

  /* =========================================
     2. 背景色の設定（自然なブロック幅で安全に塗りつぶす）
  ========================================= */
  .header-nav-sp__sublist {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
    background-color: var(--color-support7);
  }

  /* 第3階層目の背景色を指定 */
  .header-nav-sp__sublist .header-nav-sp__sublist {
    background-color: var(--color-support6);
    padding-left: 1.4rem;
  }

  /* =========================================
     3. 識別性の向上（絶対配置による完璧なアラインメント）
  ========================================= */

  /* 【共通】 矢印の土台 */
  .header-nav-sp__list a::after,
  .header-nav-sp__list button.js-sp-accordion-toggle::after {
    content: "";
    position: absolute;
    right: 2.4rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-main1);
  }

  /* 【リンク】 右矢印（画面遷移） */
  .header-nav-sp__list a::after {
    border-top: 2px solid var(--color-main1);
    transform: translateY(-50%) rotate(45deg);
  }

  /* 【アコーディオン】 下矢印（その場での開閉） */
  .header-nav-sp__list button.js-sp-accordion-toggle::after {
    border-bottom: 2px solid var(--color-main1);
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s ease;
  }

  /* アコーディオン開状態（クルッと回って上矢印になる） */
  .header-nav-sp__list .is-open>button.js-sp-accordion-toggle::after {
    transform: translateY(-50%) rotate(-135deg);
  }

  /* =========================================
     外部サイトリンク（target="_blank"）の自動アイコン化
  ========================================= */
  .header-nav-sp__list a[target="_blank"]::after {
    right: 2.1rem;
    border: none;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url('/cmn/img/icon_tab_red.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
  }

  /* ※ もしHTML側に手動で置かれた <img class="icon-tab"> がある場合、
     CSSの自動アイコンと重複してしまうため非表示にする安全装置 */
  .header-nav-sp__list a[target="_blank"] .icon-tab {
    display: none;
  }

  /* =========================================
     【厳守箇所】検索・言語切り替えフォーム等
     ※ここから下はご提示いただいたコードそのままです
  ========================================= */
  .m-nav-search_form.js-form-link {
    position: relative;
    display: grid;
    grid-template-columns: 5fr 1fr;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2.4rem;
  }

  .m-nav-search_form.js-form-link>p {
    grid-column: 1 / 3;
  }

  .m-nav-search_select-wrap,
  .js-form-link_select {
    width: 100%;
  }

  .js-form-link_select {
    font-size: 1.6rem;
    padding: 12px 40px 12px 16px;
    appearance: none;
    border: 1px solid #babdbe;
    border-radius: 2px;
    color: var(--color-sub-black);
  }

  .m-nav-search_select-wrap {
    position: relative;
    z-index: 1;
    grid-column: 1 / 2;
  }

  .m-nav-search_select-wrap::after {
    border-bottom: 2px solid #222;
    border-left-width: 0;
    border-right: 2px solid #222;
    border-top-width: 0;
    content: "";
    height: 10px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-75%) rotate(45deg);
    width: 10px;
  }

  .js-form-link_select::after {
    display: none;
  }

  .js-form-link_submit {
    white-space: nowrap;
    background-color: var(--color-main1);
    color: var(--bg-color-white);
    border: none;
    grid-column: 2 / 3;
    border-radius: 2px;
    font-size: 1.6rem;
  }

  /* SP版言語切り替え */
  .sp-nav-search {
    padding: 40px 18px 30px;
  }

  .sp-nav-search_label {
    display: block;
    font-weight: 700;
  }

  .sp-nav-search_form {
    display: flex;
    margin-top: 20px;
  }

  .sp-nav-search_select-wrap {
    flex-grow: 1;
    min-width: 0;
    position: relative;
  }

  .sp-nav-search_select {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid #babdbe;
    border-radius: 2px;
    font-size: 16px;
    height: 100%;
    padding: 12px 40px 12px 16px;
    width: 100%;
  }

  .sp-nav-search_select-wrap:after {
    border-bottom: 2px solid #222;
    border-left-width: 0;
    border-right: 2px solid #222;
    border-top-width: 0;
    content: "";
    height: 10px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-75%) rotate(45deg);
    width: 10px;
  }

  .sp-nav-search_button {
    background-color: var(--color-main1);
    border-radius: 2px;
    border-width: 0;
    color: var(--bg-color-white);
    display: block;
    flex-shrink: 0;
    margin-left: 10px;
    padding: 10px;
  }
}

/* =========================================
     パンくず
  ========================================= */

  .l-breadcrumb.content-top,
.l-breadcrumb.content-bottom {
  background-color: var(--color-support6);
}

.breadcrumb-area {
  padding: 18px 30px 13px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  font-size: 1.2rem;
  line-height: var(--lh-sm);
}

.breadcrumb>li a svg {
  margin-right: 5px;
  fill: var(--ft-color-support);
}

.breadcrumb li a {
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
}

.breadcrumb li a:hover {
  text-decoration: none;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin: 0 0.6rem;
  display: inline-block;
}

@media screen and (max-width: 768.9px) {
  .breadcrumb-area {
    display: none;
  }

  .l-breadcrumb.content-bottom .breadcrumb-area {
    display: block;
  }

}

/* =========================================
     cv-area
  ========================================= */

#cv-area {
  background-color: var(--color-main1);
  padding: 70px 0;
  margin-top: 100px;
}

#cv-area .ttl-main-01 {
  margin-bottom: 40px;
}

#cv-area .fl-box {
  display: flex;
  align-items: flex-start;
  gap: 72px;
}

#cv-area .fl-box .cv-area-img {
  width: 45%;
  max-width: 500px;
}

#cv-area .fl-box .ttl-main-01 {
  color: var(--bg-color-white);
}

#cv-area .fl-box .txt-box {
  color: var(--bg-color-white);
  margin-bottom: 48px;
}

@media screen and (max-width: 768.9px) {
  #cv-area {
    padding: 40px 0;
  }

  #cv-area .ttl-main-01 {
    margin-bottom: 24px;
  }

  #cv-area .fl-box {
    display: block;
  }

  #cv-area .fl-box .cv-area-img {
    display: none;
  }

  #cv-area .fl-box .txt-box {
    margin-bottom: 32px;
  }
}

/* =========================================
     footer
  ========================================= */

.l-footer-banner,
.l-footer-extra,
.l-footer-main,
.l-footer-share {
  min-width: 320px;
  line-height: 1.6;
}

.l-footer-banner_inner,
.l-footer-extra_inner,
.l-footer-main_inner,
.l-footer-share_content {
  margin: 0 auto;
  max-width: 1500px;
}

.l-footer a:hover {
  opacity: 0.6;
}

.m-footer-contact_logo a:hover,
.l-footer-main_banner a:hover,
.l-footer-extra a:hover {
  opacity: 1;
}

.l-footer-extra a:hover {
  text-decoration: underline;
}

.l-footer-banner {
  background-color: var(--color-support5);
  /* padding: 20px 24px; */
}

.l-footer-main {
  background-color: var(--bg-color-grey);
  color: var(--bg-color-white);
}

.l-footer-main_contact {
  padding: 30px 24px 20px;
}

.l-footer-main_banner {
  padding: 20px 24px;
}

.l-footer-extra {
  background-color: var(--bg-color-grey);
  color: var(--bg-color-white);
  padding: 20px 24px 10px;
}

.l-footer-extra_inner {
  padding-right: 40px;
}

.l-footer-extra a {
  color: var(--bg-color-white);
}

.m-footer-contact_logo {
  max-width: 196px;
  width: 100%;
}

.m-nav-footer {
  border-width: 0;
  display: flex;
}

.m-nav-footer_list {
  flex-basis: 30%;
  padding-left: 40px;
}

.m-nav-footer_list:not(:last-child) {
  position: relative;
}

.m-nav-footer_panel .m-nav-footer_list {
  margin-top: 14px;
  min-width: 0;
  padding-left: 10px;
}

.m-nav-footer_list>[role="listitem"],
.m-nav-footer_list>li {
  line-height: 1.6;
}

.m-nav-footer_list>[role="listitem"]>a {
  display: inline;
  line-height: 1.6;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 0;
  text-decoration: underline;
  vertical-align: top;
  color: var(--bg-color-white);
}

.m-nav-footer_panel .m-nav-footer_list>[role="listitem"]+[role="listitem"] {
  margin-top: 7px;
}

.m-nav-footer_list>[role="listitem"]+[role="listitem"] {
  margin-top: 14px;
}

.l-footer-main {
  background-color: var(--bg-color-grey);
  padding: 0 30px 100px;
}

.l-footer-main_inner {
  display: flex;
  flex-wrap: wrap;
  padding-top: 60px;
}

.l-footer-main_contact {
  flex-basis: calc((100% - 120px) / 4);
  padding: 0;
}

.l-footer-main_nav {
  flex-grow: 1;
}

.l-footer-main_banner {
  flex-basis: 100%;
  padding: 0;
}

.l-footer-main_nav+.l-footer-main_banner {
  border-top: 1px solid var(--ft-color-support);
  margin-top: 40px;
  padding-top: 40px;
}

.l-footer-main .m-footer-banner-list {
  flex-wrap: nowrap;
  margin-left: -60px;
  margin-top: -20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -60px;
  margin-top: -20px;
}

.m-footer-banner-list>li {
  margin-left: 60px;
  margin-top: 20px;
}

.m-footer-banner-list>li:nth-of-type(2) {
  width: 305px;
}

.m-footer-banner-list>li .l-footer-bnr {
  width: 100%;
}

.l-footer-main .m-footer-banner-rohs {
  background-color: var(--bg-color-white);
  border: 1px solid var(--color-support4);
  color: #222;
  text-decoration: none;
  align-items: center;
  display: flex;
  padding: 14px 20px;
  position: relative;
  width: 460px;
  display: grid;
  grid-template-columns:
    calc((199 / 420) * 100%) calc((1 / 420) * 100%) calc((200 / 420) * 100%);
  gap: 10px;
}

.m-footer-banner-rohs:before {
  border-left: 1px solid var(--color-support4);
  bottom: 0;
  content: "";
  display: block;
  height: calc(100% - 28px);
  margin: auto;
  position: absolute;
  top: 0;
  grid-column: 2 / 3;
}

.m-footer-banner-rohs_logo {
  position: absolute;
  left: -7px;
  width: 46px;
  bottom: 0;
  margin: auto;
  top: 0;
}

.m-footer-banner-rohs_title {
  flex-basis: 51%;
  padding-left: 50px;
  position: relative;
  grid-column: 1 / 2;
}

.l-footer-main .m-footer-banner-rohs_text {
  font-size: 14px;
}

.l-footer-main .m-footer-banner-rohs_text {
  font-size: 14px;
}

.m-footer-banner-rohs_text+.m-footer-banner-rohs_text {
  margin-top: 8px;
}

.l-footer-main .m-footer-banner-rohs_description {
  font-size: 13px;
  border-top-width: 0;
  flex-basis: 49%;
  margin-top: 0;
  padding-left: 6px;
  padding-top: 0;
  grid-column: 3 / 4;
}

.l-footer-extra {
  padding: 30px 30px 20px;
}

.l-footer-extra_inner {
  padding-right: 80px;
}

.m-footer-link-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -40px;
  margin-top: -10px;
  padding-right: 60px;
}

.m-footer-link-list>li {
  margin-left: 40px;
  margin-top: 10px;
}

.m-footer-link-list>li>a {
  text-decoration: none;
  font-size: 1.6rem;
}

.m-footer-sns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  margin-top: 20px;
  width: 100%;
}

.m-footer-sns_title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-right: 10px;
  margin-top: 10px;
}

.m-footer-sns_list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.m-footer-sns_list>li {
  margin-left: 10px;
  margin-top: 10px;
}

.m-footer-sns_list>li>a {
  align-items: center;
  display: flex;
  height: 100%;
}

.m-footer-sns_icon {
  max-height: 24px;
  width: 24px;
}

.m-footer-copyright {
  margin-top: 25px;
  font-size: 1.6rem;
}

.m-pagetop {
  bottom: 40px;
  font-size: 0;
  height: 48px;
  margin: 0;
  position: fixed;
  right: 10px;
  width: 48px;
  z-index: 2;
}

.m-pagetop_link {
  align-items: center;
  background-color: #ea002a;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #fff;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
  transition: 0.3s all;
}

.m-pagetop_link:after,
.m-pagetop_link:before {
  content: "";
  position: absolute;
}

.m-pagetop_link:before {
  border-bottom-width: 0;
  border-left-width: 0;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  height: 9px;
  left: 50%;
  margin-top: -6px;
  top: 50%;
  transform: translate(-50%) rotate(-45deg);
  width: 9px;
}

.m-pagetop_link:after {
  background-color: #fff;
  height: 12px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
}

.m-pagetop_link:hover {
  background-color: #c01;
  opacity: 1 !important;
}

@media screen and (max-width: 768.9px) {
  .l-footer-main {
    padding: 0;
  }

  .l-footer-main_inner {
    display: block;
    padding-top: 0;
  }

  .l-footer-main_contact {
    padding: 30px 24px 20px;
  }

  .l-footer-main .m-footer-banner-rohs {
    padding: 20px 24px;
  }

  .m-footer-banner-rohs_title {
    max-width: 100%;
  }

  .m-nav-footer {
    display: block;
    border-top: 1px solid var(--ft-color-support);
  }

  .m-footer-contact_logo {
    margin: auto;
  }

  .m-nav-footer_list {
    padding-left: 0;
  }

  .m-nav-footer_list>[role="listitem"]>a {
    display: block;
    font-size: 1.4rem;
    text-decoration: none;
    padding: 13px 44px 13px 24px;
    position: relative;
  }

  .m-nav-footer_list>[role="listitem"]>a::before {
    border-bottom: 2px solid var(--bg-color-white);
    border-left-width: 0;
    border-right: 2px solid var(--bg-color-white);
    border-top-width: 0;
    display: block;
    content: "";
    height: 8px;
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 8px;
    box-sizing: border-box;
  }

  .m-nav-footer_list>[role="listitem"]+[role="listitem"] {
    margin-top: 0;
  }

  .m-nav-footer_list>[role="listitem"] {
    margin-top: 0;
    border-bottom: 1px solid var(--ft-color-support);
  }

  .l-footer-main_nav+.l-footer-main_banner {
    border-top: none;
    margin-top: 0;
    padding: 20px 24px;
  }

  .l-footer-main .m-footer-banner-list {
    display: block;
    margin: 0;
  }

  .m-footer-banner-list>li {
    margin: 0;
    width: 100%;
  }

  .m-footer-banner-list>li+li {
    margin-top: 10px;
  }

  .m-footer-banner-list>li:nth-of-type(2) {
    width: 100%;
  }

  .l-footer-main .m-footer-banner-rohs {
    width: 100%;
    box-sizing: border-box;
    display: block;
  }

  .m-footer-banner-rohs:before {
    display: none;
  }

  .l-footer-main .m-footer-banner-rohs_description {
    border-top: 1px solid var(--color-support4);
    font-size: 1.3rem;
    margin-top: 10px;
    padding-top: 10px;
  }

  .l-footer-extra {
    background-color: var(--bg-color-grey);
    color: var(--bg-color-white);
    padding: 20px 24px 10px;
  }

  .l-footer-extra_inner {
    padding-right: 40px;
  }

  .m-footer-link-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-top: -10px;
    padding-right: 0;
  }

  .m-footer-link-list>li {
    margin-left: 20px;
    margin-top: 10px;
  }

  .m-footer-link-list>li>a {
    font-size: 1.4rem;
  }

  .m-footer-sns {
    align-items: center;
    border-top: 1px solid var(--ft-color-support);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
  }

  .m-footer-sns_title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 20px;
  }

  .m-footer-sns_list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
  }

  .m-footer-sns_list>li {
    margin-left: 20px;
    margin-top: 10px;
  }

  .m-footer-sns_icon {
    max-height: 40px;
    width: 40px;
  }

  .m-footer-copyright {
    margin-top: 10px;
  }

  .m-footer-copyright_text {
    font-size: 1rem;
  }
}

@media (min-width: 769px) {
  .m-pagetop {
    height: 60px;
    right: 40px;
    width: 60px;
    bottom: 100px;
  }
}

.flex-row {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-row-rev {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-col {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-col-rev {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

@media (max-width: 768px) {
  .sp-flex-row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .sp-flex-row-rev {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .sp-flex-col {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .sp-flex-col-rev {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
}

@media (min-width: 768.1px) {
  .pc-flex-row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .pc-flex-row-rev {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .pc-flex-col {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .pc-flex-col-rev {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
}

/* カラム分けシステム */
.gap-0 {
  --gap-x: 0px !important;
  gap: 0px !important;
}

.gap-x-0 {
  --gap-x: 0px !important;
  -webkit-column-gap: 0px !important;
  -moz-column-gap: 0px !important;
  column-gap: 0px !important;
}

.gap-y-0 {
  row-gap: 0px !important;
}

.gap-5 {
  --gap-x: 5px !important;
  gap: 5px !important;
}

.gap-x-5 {
  --gap-x: 5px !important;
  -webkit-column-gap: 5px !important;
  -moz-column-gap: 5px !important;
  column-gap: 5px !important;
}

.gap-y-5 {
  row-gap: 5px !important;
}

.gap-10 {
  --gap-x: 10px !important;
  gap: 10px !important;
}

.gap-x-10 {
  --gap-x: 10px !important;
  -webkit-column-gap: 10px !important;
  -moz-column-gap: 10px !important;
  column-gap: 10px !important;
}

.gap-y-10 {
  row-gap: 10px !important;
}

.gap-15 {
  --gap-x: 15px !important;
  gap: 15px !important;
}

.gap-x-15 {
  --gap-x: 15px !important;
  -webkit-column-gap: 15px !important;
  -moz-column-gap: 15px !important;
  column-gap: 15px !important;
}

.gap-y-15 {
  row-gap: 15px !important;
}

.gap-20 {
  --gap-x: 20px !important;
  gap: 20px !important;
}

.gap-x-20 {
  --gap-x: 20px !important;
  -webkit-column-gap: 20px !important;
  -moz-column-gap: 20px !important;
  column-gap: 20px !important;
}

.gap-y-20 {
  row-gap: 20px !important;
}

.gap-25 {
  --gap-x: 25px !important;
  gap: 25px !important;
}

.gap-x-25 {
  --gap-x: 25px !important;
  -webkit-column-gap: 25px !important;
  -moz-column-gap: 25px !important;
  column-gap: 25px !important;
}

.gap-y-25 {
  row-gap: 25px !important;
}

.gap-30 {
  --gap-x: 30px !important;
  gap: 30px !important;
}

.gap-x-30 {
  --gap-x: 30px !important;
  -webkit-column-gap: 30px !important;
  -moz-column-gap: 30px !important;
  column-gap: 30px !important;
}

.gap-y-30 {
  row-gap: 30px !important;
}

.gap-35 {
  --gap-x: 35px !important;
  gap: 35px !important;
}

.gap-x-35 {
  --gap-x: 35px !important;
  -webkit-column-gap: 35px !important;
  -moz-column-gap: 35px !important;
  column-gap: 35px !important;
}

.gap-y-35 {
  row-gap: 35px !important;
}

.gap-40 {
  --gap-x: 40px !important;
  gap: 40px !important;
}

.gap-x-40 {
  --gap-x: 40px !important;
  -webkit-column-gap: 40px !important;
  -moz-column-gap: 40px !important;
  column-gap: 40px !important;
}

.gap-y-40 {
  row-gap: 40px !important;
}

.gap-45 {
  --gap-x: 45px !important;
  gap: 45px !important;
}

.gap-x-45 {
  --gap-x: 45px !important;
  -webkit-column-gap: 45px !important;
  -moz-column-gap: 45px !important;
  column-gap: 45px !important;
}

.gap-y-45 {
  row-gap: 45px !important;
}

.gap-50 {
  --gap-x: 50px !important;
  gap: 50px !important;
}

.gap-x-50 {
  --gap-x: 50px !important;
  -webkit-column-gap: 50px !important;
  -moz-column-gap: 50px !important;
  column-gap: 50px !important;
}

.gap-y-50 {
  row-gap: 50px !important;
}

@media (max-width: 768px) {
  .sp-gap-0 {
    --gap-x: 0px !important;
    gap: 0px !important;
  }

  .sp-gap-x-0 {
    --gap-x: 0px !important;
    -webkit-column-gap: 0px !important;
    -moz-column-gap: 0px !important;
    column-gap: 0px !important;
  }

  .sp-gap-y-0 {
    row-gap: 0px !important;
  }

  .sp-gap-5 {
    --gap-x: 5px !important;
    gap: 5px !important;
  }

  .sp-gap-x-5 {
    --gap-x: 5px !important;
    -webkit-column-gap: 5px !important;
    -moz-column-gap: 5px !important;
    column-gap: 5px !important;
  }

  .sp-gap-y-5 {
    row-gap: 5px !important;
  }

  .sp-gap-10 {
    --gap-x: 10px !important;
    gap: 10px !important;
  }

  .sp-gap-x-10 {
    --gap-x: 10px !important;
    -webkit-column-gap: 10px !important;
    -moz-column-gap: 10px !important;
    column-gap: 10px !important;
  }

  .sp-gap-y-10 {
    row-gap: 10px !important;
  }

  .sp-gap-15 {
    --gap-x: 15px !important;
    gap: 15px !important;
  }

  .sp-gap-x-15 {
    --gap-x: 15px !important;
    -webkit-column-gap: 15px !important;
    -moz-column-gap: 15px !important;
    column-gap: 15px !important;
  }

  .sp-gap-y-15 {
    row-gap: 15px !important;
  }

  .sp-gap-20 {
    --gap-x: 20px !important;
    gap: 20px !important;
  }

  .sp-gap-x-20 {
    --gap-x: 20px !important;
    -webkit-column-gap: 20px !important;
    -moz-column-gap: 20px !important;
    column-gap: 20px !important;
  }

  .sp-gap-y-20 {
    row-gap: 20px !important;
  }

  .sp-gap-25 {
    --gap-x: 25px !important;
    gap: 25px !important;
  }

  .sp-gap-x-25 {
    --gap-x: 25px !important;
    -webkit-column-gap: 25px !important;
    -moz-column-gap: 25px !important;
    column-gap: 25px !important;
  }

  .sp-gap-y-25 {
    row-gap: 25px !important;
  }

  .sp-gap-30 {
    --gap-x: 30px !important;
    gap: 30px !important;
  }

  .sp-gap-x-30 {
    --gap-x: 30px !important;
    -webkit-column-gap: 30px !important;
    -moz-column-gap: 30px !important;
    column-gap: 30px !important;
  }

  .sp-gap-y-30 {
    row-gap: 30px !important;
  }

  .sp-gap-35 {
    --gap-x: 35px !important;
    gap: 35px !important;
  }

  .sp-gap-x-35 {
    --gap-x: 35px !important;
    -webkit-column-gap: 35px !important;
    -moz-column-gap: 35px !important;
    column-gap: 35px !important;
  }

  .sp-gap-y-35 {
    row-gap: 35px !important;
  }

  .sp-gap-40 {
    --gap-x: 40px !important;
    gap: 40px !important;
  }

  .sp-gap-x-40 {
    --gap-x: 40px !important;
    -webkit-column-gap: 40px !important;
    -moz-column-gap: 40px !important;
    column-gap: 40px !important;
  }

  .sp-gap-y-40 {
    row-gap: 40px !important;
  }

  .sp-gap-45 {
    --gap-x: 45px !important;
    gap: 45px !important;
  }

  .sp-gap-x-45 {
    --gap-x: 45px !important;
    -webkit-column-gap: 45px !important;
    -moz-column-gap: 45px !important;
    column-gap: 45px !important;
  }

  .sp-gap-y-45 {
    row-gap: 45px !important;
  }

  .sp-gap-50 {
    --gap-x: 50px !important;
    gap: 50px !important;
  }

  .sp-gap-x-50 {
    --gap-x: 50px !important;
    -webkit-column-gap: 50px !important;
    -moz-column-gap: 50px !important;
    column-gap: 50px !important;
  }

  .sp-gap-y-50 {
    row-gap: 50px !important;
  }
}

@media (min-width: 768.1px) {
  .pc-gap-0 {
    --gap-x: 0px !important;
    gap: 0px !important;
  }

  .pc-gap-x-0 {
    --gap-x: 0px !important;
    -webkit-column-gap: 0px !important;
    -moz-column-gap: 0px !important;
    column-gap: 0px !important;
  }

  .pc-gap-y-0 {
    row-gap: 0px !important;
  }

  .pc-gap-5 {
    --gap-x: 5px !important;
    gap: 5px !important;
  }

  .pc-gap-x-5 {
    --gap-x: 5px !important;
    -webkit-column-gap: 5px !important;
    -moz-column-gap: 5px !important;
    column-gap: 5px !important;
  }

  .pc-gap-y-5 {
    row-gap: 5px !important;
  }

  .pc-gap-10 {
    --gap-x: 10px !important;
    gap: 10px !important;
  }

  .pc-gap-x-10 {
    --gap-x: 10px !important;
    -webkit-column-gap: 10px !important;
    -moz-column-gap: 10px !important;
    column-gap: 10px !important;
  }

  .pc-gap-y-10 {
    row-gap: 10px !important;
  }

  .pc-gap-15 {
    --gap-x: 15px !important;
    gap: 15px !important;
  }

  .pc-gap-x-15 {
    --gap-x: 15px !important;
    -webkit-column-gap: 15px !important;
    -moz-column-gap: 15px !important;
    column-gap: 15px !important;
  }

  .pc-gap-y-15 {
    row-gap: 15px !important;
  }

  .pc-gap-20 {
    --gap-x: 20px !important;
    gap: 20px !important;
  }

  .pc-gap-x-20 {
    --gap-x: 20px !important;
    -webkit-column-gap: 20px !important;
    -moz-column-gap: 20px !important;
    column-gap: 20px !important;
  }

  .pc-gap-y-20 {
    row-gap: 20px !important;
  }

  .pc-gap-25 {
    --gap-x: 25px !important;
    gap: 25px !important;
  }

  .pc-gap-x-25 {
    --gap-x: 25px !important;
    -webkit-column-gap: 25px !important;
    -moz-column-gap: 25px !important;
    column-gap: 25px !important;
  }

  .pc-gap-y-25 {
    row-gap: 25px !important;
  }

  .pc-gap-30 {
    --gap-x: 30px !important;
    gap: 30px !important;
  }

  .pc-gap-x-30 {
    --gap-x: 30px !important;
    -webkit-column-gap: 30px !important;
    -moz-column-gap: 30px !important;
    column-gap: 30px !important;
  }

  .pc-gap-y-30 {
    row-gap: 30px !important;
  }

  .pc-gap-35 {
    --gap-x: 35px !important;
    gap: 35px !important;
  }

  .pc-gap-x-35 {
    --gap-x: 35px !important;
    -webkit-column-gap: 35px !important;
    -moz-column-gap: 35px !important;
    column-gap: 35px !important;
  }

  .pc-gap-y-35 {
    row-gap: 35px !important;
  }

  .pc-gap-40 {
    --gap-x: 40px !important;
    gap: 40px !important;
  }

  .pc-gap-x-40 {
    --gap-x: 40px !important;
    -webkit-column-gap: 40px !important;
    -moz-column-gap: 40px !important;
    column-gap: 40px !important;
  }

  .pc-gap-y-40 {
    row-gap: 40px !important;
  }

  .pc-gap-45 {
    --gap-x: 45px !important;
    gap: 45px !important;
  }

  .pc-gap-x-45 {
    --gap-x: 45px !important;
    -webkit-column-gap: 45px !important;
    -moz-column-gap: 45px !important;
    column-gap: 45px !important;
  }

  .pc-gap-y-45 {
    row-gap: 45px !important;
  }

  .pc-gap-50 {
    --gap-x: 50px !important;
    gap: 50px !important;
  }

  .pc-gap-x-50 {
    --gap-x: 50px !important;
    -webkit-column-gap: 50px !important;
    -moz-column-gap: 50px !important;
    column-gap: 50px !important;
  }

  .pc-gap-y-50 {
    row-gap: 50px !important;
  }
}

.ee-components-style-videoTitle {
  font-size: var(--fz-txt-md);
}

/* =========================================
   Layout: Grid System (.l-row / .l-col)
========================================= */

.l-section {
  padding-block: clamp(3.0rem, 1.18rem + 5.68vw, 7.0rem);
}

.l-container {
  width: 100%;
  box-sizing: border-box;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-px, clamp(2.4rem, -8.4rem + 14.0625vw, 6.0rem));
  /* 古い方のパディング処理
  padding-inline: var(--container-px, clamp(2.4rem, -0.154rem + 6.01vw, 6.0rem));
  */
}

.l-wide .l-container {
  max-width: 1500px;
}

/* =========================================
   例外処理：CVブロック内のコンテナ
========================================= */
.l-cv-block {
  --container-px: clamp(2.4rem, -0.154rem + 6.01vw, 6.0rem);
}

.l-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-fluid-lg);
  box-sizing: border-box;
}

.l-row--w-720 {
  max-width: 720px;
  margin-inline: auto;
}

.l-row--w-850 {
  max-width: 850px;
  margin-inline: auto;
}

.l-row--w-900 {
  max-width: 900px;
  margin-inline: auto;
}

.l-row--gap-none {
  --grid-gap: 0;
  row-gap: 0;
}

@media (min-width: 768.1px) {
  .l-row--row-gap-xl {
    --space-fluid-lg: 6.0rem;
  }

  .l-row--gap-xl {
    --grid-gap: 4.8rem;
    --space-fluid-lg: 4.8rem;
  }

  .l-row--gap-xxl {
    --grid-gap: 6.4rem;
    --space-fluid-lg: 6.4rem;
  }

  .l-row--gap-sm-pc {
    --grid-gap: 1.2rem;
    --space-fluid-lg: 1.2rem;
  }

  .l-row--gap-md-pc {
    --grid-gap: 1.6rem;
    --space-fluid-lg: 1.6rem;
  }

}

@media (max-width: 768px) {
  .l-row--row-gap-xl {
    --space-fluid-lg: 4.8rem;
  }

  .l-row--gap-sm {
    --grid-gap: 1.2rem;
    --space-fluid-lg: 1.2rem;
  }

  .l-row--gap-md {
    --grid-gap: 1.6rem;
    --space-fluid-lg: 1.6rem;
  }

}

/* --- スマホ用のカラム幅 --- */
.l-col-1 {
  grid-column: span 1;
}

.l-col-2 {
  grid-column: span 2;
}

.l-col-3 {
  grid-column: span 3;
}

.l-col-4 {
  grid-column: span 4;
}

.l-col-5 {
  grid-column: span 5;
}

.l-col-6 {
  grid-column: span 6;
}

.l-col-7 {
  grid-column: span 7;
}

.l-col-8 {
  grid-column: span 8;
}

.l-col-9 {
  grid-column: span 9;
}

.l-col-10 {
  grid-column: span 10;
}

.l-col-11 {
  grid-column: span 11;
}

.l-col-12 {
  grid-column: span 12;
}

/* --- PC用のカラム幅 (768.1px以上) --- */
@media (min-width: 768.1px) {
  .l-pc-col-1 {
    grid-column: span 1;
  }

  .l-pc-col-2 {
    grid-column: span 2;
  }

  .l-pc-col-3 {
    grid-column: span 3;
  }

  .l-pc-col-4 {
    grid-column: span 4;
  }

  .l-pc-col-5 {
    grid-column: span 5;
  }

  .l-pc-col-6 {
    grid-column: span 6;
  }

  .l-pc-col-7 {
    grid-column: span 7;
  }

  .l-pc-col-8 {
    grid-column: span 8;
  }

  .l-pc-col-9 {
    grid-column: span 9;
  }

  .l-pc-col-10 {
    grid-column: span 10;
  }

  .l-pc-col-11 {
    grid-column: span 11;
  }

  .l-pc-col-12 {
    grid-column: span 12;
  }
}

/* --- 768.1px以上1023.9pxのカラム幅 --- */
@media (min-width: 768.1px) {
  .l-md-col-1 {
    grid-column: span 1;
  }

  .l-md-col-2 {
    grid-column: span 2;
  }

  .l-md-col-3 {
    grid-column: span 3;
  }

  .l-md-col-4 {
    grid-column: span 4;
  }

  .l-md-col-5 {
    grid-column: span 5;
  }

  .l-md-col-6 {
    grid-column: span 6;
  }

  .l-md-col-7 {
    grid-column: span 7;
  }

  .l-md-col-8 {
    grid-column: span 8;
  }

  .l-md-col-9 {
    grid-column: span 9;
  }

  .l-md-col-10 {
    grid-column: span 10;
  }

  .l-md-col-11 {
    grid-column: span 11;
  }

  .l-md-col-12 {
    grid-column: span 12;
  }
}

/* --- 1024px以上のカラム幅 --- */
@media (min-width: 1024px) {
  .l-lg-col-1 {
    grid-column: span 1;
  }

  .l-lg-col-2 {
    grid-column: span 2;
  }

  .l-lg-col-3 {
    grid-column: span 3;
  }

  .l-lg-col-4 {
    grid-column: span 4;
  }

  .l-lg-col-5 {
    grid-column: span 5;
  }

  .l-lg-col-6 {
    grid-column: span 6;
  }

  .l-lg-col-7 {
    grid-column: span 7;
  }

  .l-lg-col-8 {
    grid-column: span 8;
  }

  .l-lg-col-9 {
    grid-column: span 9;
  }

  .l-lg-col-10 {
    grid-column: span 10;
  }

  .l-lg-col-11 {
    grid-column: span 11;
  }

  .l-lg-col-12 {
    grid-column: span 12;
  }
}

/* =========================================
   Utility: SP時の順序指定 (.u-sp-order-*)
========================================= */

@media (max-width: 768px) {

  /* HTMLの記述順に関わらず、指定した順番通りに並び替えます */
  .u-sp-order-1 {
    order: 1 !important;
  }

  .u-sp-order-2 {
    order: 2 !important;
  }

  .u-sp-order-3 {
    order: 3 !important;
  }

  .u-sp-order-4 {
    order: 4 !important;
  }
}

/* =========================================
   Layout: Stack (.l-stack)
========================================= */
.l-stack {
  display: grid;
  gap: var(--stack-gap, var(--space-fluid-xl));
}

/* --- 余白サイズのモディファイア --- */
.l-stack--sm {
  --stack-gap: var(--space-fluid-sm);
}

.l-stack--md {
  --stack-gap: var(--space-fluid-md);
}

.l-stack--lg {
  --stack-gap: var(--space-fluid-lg);
}

.l-stack--xxl {
  --stack-gap: var(--space-fluid-xxl);
}

.l-stack--xxxl {
  --stack-gap: var(--space-fluid-xxxl);
}

/* =========================================
   Module: Card (.m-card)
========================================= */

/* --- カードの大枠 --- */
.m-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.m-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --- 画像エリア --- */
.m-card__img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.m-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.m-card:hover .m-card__img {
  transform: scale(1.05);
}

/* --- ラベル（カテゴリ等のバッジ） --- */
.m-card__label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-main1);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px 0 4px 0;
  z-index: 1;
}

/* --- テキストエリア --- */
.m-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px;
}

.m-card__meta {
  font-size: 1.2rem;
  color: var(--color-support1);
  margin-bottom: 8px;
}

.m-card__title {
  font-size: clamp(1.6rem, 1.4rem + 0.5vw, 1.8rem);
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 12px;
  min-height: calc(1.5em * 4);

  /* 一旦省略しないためコメントアウト
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
*/
}

.m-card__desc {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-support1);
  margin: 0;
  display: -webkit-box;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================
   外部リンクアイコン (.m-card__external)
========================================= */

/* 画像の右上に配置するアイコン */
.m-card__external {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 0 4px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  backdrop-filter: blur(4px);
}

/* 汎用的な別ウィンドウアイコン（SVGを背景画像として使用） */
.m-card__external::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url(/cmn/img/icon_tab_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

/* =========================================
   タグモジュール (.m-card__tags / .m-card__tag)
========================================= */

/* タグを囲むコンテナ */
.m-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin-top: auto;
  padding-top: 16px;
}

/* 個別のタグ */
.m-card__tag {
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
  color: var(--color-support1);
  background-color: var(--color-support6);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: normal;
}

/* =========================================
   Modifier: テキスト制限解除 (.m-card--full)
========================================= */

/* タイトルと説明文の行数制限をリセット */
.m-card--full .m-card__title,
.m-card--full .m-card__desc {
  display: block;
  -webkit-line-clamp: initial;
  line-clamp: initial;
  overflow: visible;
  min-height: initial;
}

/* =========================================
   Element: Read Moreラベル (.m-card__readmore)
========================================= */

.m-card__readmore {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-main1);
  transition: color 0.3s ease;
}

/* アロー（矢印）の装飾 */
.m-card__readmore::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  background-image: url(/cmn/img/icon_chev_red.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  color: var(--color-main1);
}

.m-card:hover .m-card__readmore::after {
  transform: translateX(4px);
}

.m-card:hover .m-card__readmore {
  color: var(--ft-color-sub-black);
}

/* =========================================
   Modifier: 横並びカード (.m-card--horizontal)
   用途：PC（769px以上）で画像とテキストを横並びにする
========================================= */

@media (min-width: 768.1px) {

  .m-card--horizontal {
    flex-direction: row;
    align-items: stretch;
  }

  .m-card--horizontal .m-card__img-wrapper {
    flex-basis: 30%;
    max-width: 30%;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .m-card--horizontal .m-card__body {
    flex-basis: 70%;
    max-width: 70%;
    padding: 32px;
  }

  .m-card--horizontal .m-card__title {
    min-height: auto;
  }
}

/* =========================================
   Modifier: 高さをコンテンツにフィットさせる (.m-card--fit)
   用途：.l-col-12 など全幅で使う際の間延びを解消する
========================================= */

/* 1. Grid環境での無条件な縦伸びを解除 */
.m-card.m-card--fit {
  height: auto;
}

@media (min-width: 768.1px) {
  .m-card--horizontal.m-card--fit {
    align-items: center;
  }

  /* 3. サムネイルの巨大化を防ぐストッパー（超重要） */
  /* 全幅（1200px等）の30%になると画像が大きくなりすぎるため、最大幅を固定します */
  .m-card--horizontal.m-card--fit .m-card__img-wrapper {
    flex-basis: 240px;
    max-width: 240px;
    flex-shrink: 0;
  }

  /* 4. 画像の幅を固定した分、テキストエリアがしっかり広がるように再計算 */
  .m-card--horizontal.m-card--fit .m-card__body {
    flex-basis: auto;
    max-width: none;
    flex-grow: 1;
  }
}

/* =========================================
   Modifier: 左右反転 (.m-card--reverse)
   用途：.m-card--horizontal と併用し、画像を右に配置する
========================================= */

@media (min-width: 768.1px) {

  /* 親要素のFlex方向を反転（row-reverse）させるだけ */
  .m-card--horizontal.m-card--reverse {
    flex-direction: row-reverse;
  }
}

/* =========================================
   スマホ時、タイトル分確保していた高さをcancel
========================================= */

@media (max-width: 768px) {
  .m-card__title {
    min-height: initial;
  }

}

/* =========================================
   Module: Showcase Hero (.m-showcase-hero)
   思想：サイトの顔となる4つの柱を、洗練された交互レイアウトで魅せる
========================================= */

.m-showcase-hero {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 12vw, 160px);
}

/* --- 1行分のアイテム（PCは横並び、スマホは縦積み） --- */
.m-showcase-hero__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.m-showcase-hero__img-wrap {
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.m-showcase-hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  object-position: center;
}

.m-showcase-hero__item:hover .m-showcase-hero__img-wrap img {
  transform: scale(1.03);
}

/* --- テキストボックス（画像の上に重ねる白い箱） --- */
.m-showcase-hero__body {
  background-color: #fff;
  position: relative;
  z-index: 2;
  padding: clamp(32px, 5vw, 64px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768.1px) {
  .m-showcase-hero__item {
    flex-direction: row;
    justify-content: space-between;
  }

  .m-showcase-hero__item:nth-child(even) {
    flex-direction: row-reverse;
  }

  .m-showcase-hero__img-wrap {
    width: 52%;
    border-radius: 4px 0 0 4px;
  }

  .m-showcase-hero__img-wrap img {
    object-position: 25% center;
  }

  .m-showcase-hero__item:nth-child(even) .m-showcase-hero__img-wrap {
    border-radius: 0 4px 4px 0;
  }

  .m-showcase-hero__item:nth-child(even) .m-showcase-hero__img-wrap img {
    object-position: 75% center;
  }

  /* PC時はテキスト箱の幅を50%にし、画像側に少し食い込ませる */
  .m-showcase-hero__body {
    width: 48%;
    margin-left: -6%;
  }

  /* 偶数番目（画像が右）の場合は、テキスト箱を画像の左端に被せる */
  .m-showcase-hero__item:nth-child(even) .m-showcase-hero__body {
    margin-left: 0;
    margin-right: -6%;
  }

}

@media (max-width: 768px) {

  /* スマホ時は画像を上にし、テキスト箱を上に「マイナスマージン」で重ねる */
  .m-showcase-hero__body {
    width: 90%;
    margin-top: -5%;
    margin-left: auto;
  }

  .m-showcase-hero__item:nth-child(even) .m-showcase-hero__body {
    margin-left: 0;
    margin-right: auto;
  }
}

/* --- タイポグラフィと装飾 --- */
.m-showcase-hero__num {
  display: block;
  font-size: var(--fz-txt-lg);
  font-family: var(--font-family-en);
  font-weight: var(--weight-b);
  color: var(--color-main1);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.m-showcase-hero__title {
  font-size: var(--fz-headline-lg);
  font-family: var(--font-mincho);
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 24px;
}

.m-showcase-hero__title .m-showcase-hero__title_sub {
  display: block;
  font-size: var(--fz-txt-md);
  margin-bottom: 8px;
  line-height: 1.8;
}

.m-showcase-hero__desc {
  font-size: 1.5rem;
  font-family: var(--font-family);
  font-weight: var(--weight-s);
  line-height: var(--lh);
  color: var(--color-support1);
  margin: 0 0 40px;
}

.m-showcase-hero__desc:lang(en) {
  font-family: var(--font-family-en);
}

.m-showcase-hero__desc:lang(zh-CN) {
  font-family: var(--font-family-cn);
}

/* =========================================
   Module: News List (.m-news-list)
========================================= */

/* --- リストを囲む大枠（スクロールエリア） --- */
.m-news-list {
  background: #fff;
  height: 300px;
  border: 1px solid var(--color-support5);
  padding: 2rem;
  -webkit-overflow-scrolling: touch;
}

/* Modifier: スクロールさせない通常表示用 */
.m-news-list--no-scroll {
  height: auto;
  overflow-y: visible;
}

/* --- リスト全体 --- */
.m-news-list__items {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- リストアイテム（1行分） --- */
.m-news-list__item {
  border-bottom: 1px solid var(--color-support5);
  padding-bottom: 2rem;
}

/* 最後の線は消す */
.m-news-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* --- リンクエリア（行全体をクリッカブルにする魔法） --- */
.m-news-list__link {
  display: grid;
  grid-template-columns: 1fr 24px;
  column-gap: 2rem;
  row-gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.m-news-list__meta,
.m-news-list__title {
  grid-column: 1 / 2;
}

/* --- メタ情報（日付とカテゴリの横並び） --- */
.m-news-list__meta {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: 2rem;
}

.m-news-list__date {
  font-size: var(--fz-txt-sm);
  font-weight: var(--weight-b);
  line-height: 1;
  text-decoration: none;
}

.m-news-list__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  text-decoration: none;
}

.m-news-list__category {
  display: inline-block;
  font-size: var(--fz-txt-xs);
  border: 1px solid var(--color-main1);
  color: var(--ft-color-main);
  padding: 0.5rem;
  line-height: 1;
  text-decoration: none;
}

/* --- タイトル --- */
.m-news-list__title {
  margin: 0;
  margin-top: 1rem;
  line-height: 1.6;
}

.m-news-list__link .m-news-list__title {
  margin-top: 0;
  text-decoration: underline;
}

.m-news-list__link:hover .m-news-list__title {
  text-decoration: none;
}

@media (max-width: 768px) {
  .m-news-list {
    height: 350px;
    padding: 1.5rem;
  }

  .m-news-list.m-news-list--no-scroll {
    height: auto;
  }

  .m-news-list__items {
    gap: 1.5rem;
  }

  .m-news-list__item {
    padding-bottom: 1.5rem;
  }

  .m-news-list__meta {
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
  }

  .m-news-list__categories {
    gap: 0.5rem;
  }
}

/* =========================================
   追加：アイコン要素 (.m-news-list__icon)
========================================= */

.m-news-list__icon {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

/* --- 1. 通常リンク（右アロー） --- */
.m-news-list__icon {
  background-image: url(/cmn/img/icon_chev_red.svg);
}

.m-news-list__link:hover .m-news-list__icon:not(.m-news-list__icon--external) {
  transform: translateX(4px);
}

.m-news-list__icon--external {
  background-image: url(/cmn/img/icon_tab_red.svg);
}

/* ホバーで右上にスッと動かす（別窓で開く感覚の演出） */
.m-news-list__link:hover .m-news-list__icon--external {
  transform: translate(2px, -2px);
}

/* --- スマホ表示の微調整 --- */
@media (max-width: 768px) {
  .m-news-list__link {
    column-gap: 1.5rem;
  }
}

/* =========================================
   Module: Heading (.m-heading)
========================================= */

/* --- ベース設定（リセットと共通項） --- */
.m-heading {
  margin: 0;
}

/* --- H1 スタイル 01 --- */
.m-heading--h1-01 {
  font-weight: bold;
  /* 4rem(固定)ではなく、スマホで縮むようにclampにしておくとさらに安全です */
  font-size: var(--theme-headline-xl, clamp(2.4rem, 2rem + 2vw, 4rem));
  line-height: 1.5;
  text-align: left;
}

/* --- H2 スタイル 01（元 .ttl-main-01） --- */
/* 用途：シンプルな明朝体・中央寄せの大見出し */
.m-heading--h2-01 {
  font-family: var(--font-mincho);
  font-weight: bold;
  font-size: clamp(2.4rem, 2rem + 2vw, 4rem);
  line-height: 1.5;
  text-align: center;
}

/* --- H2 スタイル 02（元 .theme-title） --- */
/* 用途：2色アンダーラインのエレガントな見出し */
.m-heading--h2-02 {
  font-family: var(--font-mincho);
  font-size: var(--theme-headline-xl, clamp(2.4rem, 2rem + 2vw, 4rem));
  font-weight: var(--weight-b, bold);
  letter-spacing: 0.01em;
  line-height: var(--lh-sm, 1.4);
}

.m-heading--h2-02::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.5em;
  background-image: linear-gradient(to right, var(--color-main1) 0%, var(--color-main1) 1.8em, var(--color-support5) 1.8em, var(--color-support5) 100%);
}

.m-heading--h2-03 {
  font-family: var(--font-mincho);
  font-weight: bold;
  font-size: clamp(2.4rem, 2rem + 2vw, 4rem);
  line-height: 1.5;
  width: fit-content;
  margin: auto;
  padding: 0.5em 1em;
  text-align: center;
  position: relative;
}

.m-heading--h2-03::before,
.m-heading--h2-03::after {
  content: '';
  background-color: var(--color-main1);
  width: 8%;
  height: 3px;
  position: absolute;
}

.m-heading--h2-03::before {
  top: 0;
  left: 0;
}

.m-heading--h2-03::after {
  bottom: 0;
  right: 0;
}

.m-heading--h2-03 .m-heading-h2--sub {
  font-size: var(--fz-txt-lg);
  display: block;
  margin-bottom: 0.5em;
}


/* -----------------------------------------
   H3 スタイル 01
   用途：コンテンツブロックのメイン見出し
----------------------------------------- */

.m-heading--h3-01 {
  font-size: var(--theme-headline-md);
  font-weight: var(--weight-b);
}

.m-heading--h3-02 {
  font-weight: bold;
  font-size: var(--theme-headline-xl);
  line-height: 1.5;
  text-align: center;
}

.m-heading--h3-02 span {
  display: block;
  font-weight: bold;
  font-size: var(--theme-headline-sm);
  line-height: 1.5;
  text-align: center;
  margin-top: 1.0rem;
}

.m-heading--h3-03 {
  font-size: var(--fz-headline-md);
  font-weight: var(--weight-b);
}

.m-heading--h3-03 span {
  display: flex;
  align-items: center;
  color: var(--color-main1);
  font-size: var(--fz-txt-md);
  text-transform: uppercase;
}

.m-heading--h3-03 span::before {
  content: '';
  display: inline-block;
  margin-right: 16px;
  width: 32px;
  height: 1px;
  background-color: var(--color-main1);
}

.m-heading--h3-04 {
  font-size: var(--fz-headline-md);
  font-weight: var(--weight-b);
  background-image: linear-gradient(#fbccd4 50%, #ea002a 50%);
  background-size: 5px 100%;
  background-repeat: no-repeat;
  padding-left: 16px;
}

/* -----------------------------------------
   H4 スタイル 01
   用途：小見出し、機能の箇条書きタイトルなど
----------------------------------------- */
.m-heading--h4-01 {
  font-size: var(--fz-txt-xl);
  font-weight: var(--weight-b);
}

/* -----------------------------------------
   H5 スタイル 01
   用途：さらに小さな区切り、ポイント解説
----------------------------------------- */
.m-heading--h5-01 {
  font-size: clamp(1.6rem, 1.5rem + 0.5vw, 1.8rem);
  position: relative;
  padding-left: 1.2em;
}

/* 先頭に小さなドット（・）を置くデザイン */
.m-heading--h5-01::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #0056b3;
  border-radius: 50%;
}

.m-heading--h5-02 {
  background-color: var(--color-support1);
  font-size: var(--fz-txt-md);
  font-weight: var(--weight-b);
  color: #fff;
  display: block;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 4px;
}

/* -----------------------------------------
   H6 スタイル 01
   用途：本文と同じサイズだが、見出しとして扱いたい要素
----------------------------------------- */
.m-heading--h6-01 {
  font-size: var(--fz-txt-md, 1.6rem);
  color: #333;
}

/* =========================================
   Module: Box (.m-box)
   用途：情報のグループ化、強調、補足説明
========================================= */

/* --- 1. 基本設定（枠線ボックス） --- */
.m-box {
  position: relative;
  background-color: var(--bg-color-white, #ffffff);
  border: 1px solid var(--color-support5, #cccccc);
  border-radius: 4px;
  padding: clamp(20px, 4vw, 32px);
}

.m-box__title {
  font-size: clamp(1.6rem, 1.4rem + 0.5vw, 1.8rem);
  font-weight: bold;
  color: var(--color-sub-black, #333333);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-support5, #cccccc);
}

.m-box__body {
  font-size: 1.5rem;
  line-height: 1.7;
}

.m-box__body>*:last-child {
  margin-bottom: 0 !important;
}


/* =========================================
   Modifier: 2. 背景色付きボックス (.m-box--filled)
========================================= */
.m-box--filled {
  border: none;
  background-color: var(--color-support7, #f5f7fa);
}

.m-box--filled .m-box__title {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}


/* =========================================
   Modifier: 3. ラベルめり込みボックス (.m-box--labeled)
========================================= */
.m-box--labeled {
  display: flex;
  flex-direction: column;
  margin-top: clamp(24px, 5vw, 48px);
  padding-top: 0;
  border: 2px solid var(--color-main1);
  position: relative;
}

/* --- タイトル（ラベル）エリア --- */
.m-box--labeled .m-box__title {
  position: static;
  margin: calc(-1 * clamp(16px, 3.5vw, 24px)) 0 0 0;
  width: fit-content;
  align-self: flex-start;
  padding: clamp(6px, 1.5vw, 10px) 16px;
  background-color: var(--color-main1);
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1.4;
  border-bottom: none;
  border-radius: 2px;
  letter-spacing: 0.05em;
  z-index: 2;
}

/* --- コンテンツエリア --- */
.m-box--labeled .m-box__body {
  padding-top: clamp(16px, 3vw, 24px);
}

/* =========================================
   Module: Page Hero (.m-page-hero)
   特徴：HTML側の style="--hero-bg: ..." で画像を切り替え可能
========================================= */

/* --- ヒーロー大枠（背景画像を画面いっぱいに広げる） --- */
.m-page-hero {
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color-support10, #333333);
  background-image: var(--hero-bg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 1;
}

/* Modifier: 少し高さのあるバージョン（必要に応じて） */
.m-page-hero--lg {
  min-height: 350px;
}

/* --- 背景の暗いオーバーレイ（文字を読みやすくする幕） --- */
.m-page-hero::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

/* --- コンテンツを囲むインナー（最大幅の制御） --- */
.m-page-hero__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 2rem;
}

/* --- タイトル --- */
.m-page-hero__title {
  margin: 0;
  font-size: 4.6rem;
  font-family: var(--font-mincho, serif);
  color: var(--bg-color-white, #ffffff);
  text-align: center;
  font-weight: var(--weight-b, bold);
  line-height: 1.3;
}

/* --- スマホ表示 --- */
@media (max-width: 768px) {
  .m-page-hero {
    min-height: 180px;
  }

  .m-page-hero__title {
    font-size: 2.4rem;
  }
}

/* =========================================
   Module: Hero Section (.m-hero)
========================================= */

.m-hero {
  border-top: 1px solid #dcdede;
  position: relative;
  width: 100%;

  --default-overlay: linear-gradient(to bottom, #ffffff, #eee);
  --default-bg: url('/ja-jp/asset/mobility-robotics/img/mv-bg.png');

  background-image:
    var(--hero-bg, var(--default-bg)),
    var(--hero-overlay, var(--default-overlay));

  background-position: right center, center top;
  background-size: cover, 100% 100%;
  background-repeat: no-repeat;
  padding-block: clamp(60px, 8vw, 120px);
}

/* --- コンテンツを囲む1500pxの中央配置コンテナ --- */
.m-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(2.4rem, 5vw, 4.0rem);
}

/* --- 左寄せのテキストエリア --- */
.m-hero__content {
  max-width: 640px;
  text-align: left;
}

/* --- ヒーロー専用のタイトル装飾 --- */
.m-hero__title {
  font-family: var(--font-mincho);
  font-size: var(--fz-headline-xl);
  font-weight: var(--weight-b);
  color: var(--ft-color-sub-black);
  line-height: var(--lh-sm);
  margin: 0;
}

/* --- ヒーロー専用の説明文 --- */
.m-hero__desc {
  font-size: var(--fz-txt-md);
  line-height: var(--lh);
  color: var(--ft-color-sub-black);
  margin: 0;
}

@media screen and (max-width: 768px) {
  .m-hero {
    padding-top: 30px;
    padding-bottom: 120px;
    background-position: bottom right;
  }

  .m-hero__action a {
    max-width: 100%;
  }

  .m-hero__content {
    padding: 0;
  }
}

/* =========================================
   Modifier: Hero Section with <img> (.m-hero--with-img) - Fixed Ver.
========================================= */

/* --- Block control --- */
.m-hero--with-img {
  background-image: var(--hero-overlay, var(--default-overlay));
  overflow: hidden;
}

.m-hero--with-img .m-hero__inner {
  position: static;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
}

.m-hero--with-img .m-hero__content {
  position: relative;
  z-index: 2;
  padding-inline: clamp(2.4rem, 5vw, 4.0rem);
}

.m-hero__picture {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
}

/* pictureタグ内の img 要素の制御 (sourceタグではなく、imgにのみ指定) */
.m-hero__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================================
   PC幅狭時の処理
========================================= */
@media screen and (min-width: 1100px) and (max-width: 1200px) {
  .m-hero__picture {
    margin-right: -10%;
  }

}

@media screen and (min-width: 769px) and (max-width: 1099.9px) {
  .m-hero__picture {
    margin-right: -15%;
  }

}

/* =========================================
   SP（スマホ）対応のオーバーライド
========================================= */
@media screen and (max-width: 768px) {
  .m-hero--with-img {
    padding-bottom: 0;
  }

  .m-hero--with-img .m-hero__content {
    width: 100%;
    max-width: initial;
    padding-bottom: 40px;
  }

  .m-hero__picture {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    right: auto;
    margin-top: -35%;
    margin-right: 0;
  }
}

/* =========================================
   Module: Button (.m-btn)
   特徴： Flexboxによる完璧な中央揃えと、破綻しないアイコン配置
========================================= */

/* --- 1. ベース設定（共通） --- */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  border-radius: 9999px;
  padding: 1.6rem 2.4rem;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* =========================================
   Modifier: デザインバリエーション
========================================= */

/* --- btn01: プライマリー（塗りつぶし） --- */
.m-btn--primary {
  background-color: var(--color-main1);
  color: var(--bg-color-white, #ffffff);
  border: 2px solid var(--color-main1);
  --btn-icon-color: currentColor;
}

.m-btn--primary:hover {
  background-color: var(--bg-color-white, #ffffff);
  color: var(--color-main1);
}

/* --- btn02: アウトライン（枠線のみ） --- */
.m-btn--outline {
  background-color: var(--bg-color-white, #ffffff);
  color: var(--color-main1);
  border: 2px solid var(--color-main1);
}

.m-btn--outline:hover {
  background-color: var(--color-main1);
  color: var(--bg-color-white, #ffffff);
}

/* --- btn03: インバース（反転用・濃い背景の上に置く場合など） --- */
.m-btn--inverse {
  background-color: var(--color-main1);
  color: var(--bg-color-white, #ffffff);
  border: 2px solid var(--bg-color-white, #ffffff);
}

.m-btn--inverse:hover {
  background-color: var(--bg-color-white, #ffffff);
  color: var(--color-main1);
  border-color: var(--bg-color-white, #ffffff);
}

/* =========================================
   Modifier: アイコン付き (.m-btn--arrow)
========================================= */

.m-btn--arrow {
  position: relative;
  padding-right: 3.5rem;
  padding-left: 3.5rem;
}

/* --- アローアイコン・別窓アイコン共通 --- */
.m-btn--arrow,
.m-btn--external {
  padding-right: 2rem;
  padding-left: 2rem;
  gap: 12px;
}

.m-btn--arrow::after {
  content: "";
  position: static;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--btn-icon-color, currentColor);
  border-right: 2px solid var(--btn-icon-color, currentColor);
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-top: 0;
}

/* ホバー時のマイクロインタラクション（矢印がスッと右へ動く） */
.m-btn:hover.m-btn--arrow::after {
  transform: translateY(-50%) rotate(45deg) translate(2px, -2px);
}

/* --- 4. ダークアウトライン（背景白 ＋ 黒文字・枠線） --- */
.m-btn--outline-dark {
  background-color: var(--bg-color-white, #ffffff);
  color: #222222;
  border: 2px solid #222222;
}

/* ホバーで色が反転（背景黒 ＋ 白文字） */
.m-btn--outline-dark:hover {
  background-color: #222222;
  color: var(--bg-color-white, #ffffff);
}

.m-btn--external {
  --btn-icon: url('/cmn/img/icon_tab_red.svg');
}

.m-btn--external::after {
  content: "";
  position: static;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: var(--btn-icon-color, currentColor);
  -webkit-mask-image: var(--btn-icon);
  mask-image: var(--btn-icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform: none;
  transition: transform 0.3s ease;
}

.m-btn:hover.m-btn--arrow::after {
  transform: rotate(45deg) translate(2px, -2px);
}

.m-btn:hover.m-btn--external::after {
  transform: translate(2px, -2px);
}

/* =========================================
   Modifier: 形状バリエーション (.m-btn--rect)
========================================= */
.m-btn--rect {
  border-radius: 4px;
  font-size: 1.4rem;
}

/* =========================================
   Modifier: カラーバリエーション (.m-btn--outline-light)
   特徴：薄い枠線＋黒文字から、ホバーでメインカラーに変化
========================================= */
.m-btn--outline-light {
  background-color: var(--bg-color-white, #ffffff);
  border: 3px solid var(--color-support4, #dddddd);
  color: #222222;
  --btn-icon-color: #ea002a;
}

.m-btn--outline-light:hover {
  border-color: var(--color-main1);
  color: var(--color-main1);
  background-color: var(--bg-color-white, #ffffff);
  --btn-icon-color: #ea002a;
}

.m-btn--outline-red {
  background-color: var(--bg-color-white, #ffffff);
  color: #ea002a;
  border: 2px solid #ea002a;
}

.m-btn--outline-red:hover {
  background-color: #ea002a;
  color: var(--bg-color-white, #ffffff);
}

.m-btn--white {
  background-color: var(--bg-color-white, #ffffff);
  color: #ea002a;
  border: 2px solid var(--bg-color-white, #ffffff);
}

.m-btn--white:hover {
  background-color: transparent;
  color: var(--bg-color-white, #ffffff);
  --btn-icon-color: currentColor;
}

.m-btn--icon-red {
  --btn-icon-color: #ea002a;
}

.m-btn--icon-red:hover {
  --btn-icon-color: #ea002a;
}

/* =========================================
   Modifier: 横幅の拡張バリエーション
========================================= */

/* --- 1. 少し広めのボタン (.m-btn--wide) --- */
/* 通常の300pxから、400pxまで引き上げ */
.m-btn--wide {
  max-width: 400px;
}

/* --- 2. 親要素いっぱいに広がるボタン (.m-btn--block) --- */
/* max-widthの制限を完全に解除し、コンテナの100%まで広げる */
.m-btn--block {
  max-width: 100%;
}

/* =========================================
   Module: Button Group (.m-btn-group)
   用途：複数のボタンを配置・整列させるラッパー
========================================= */

/* --- ベース設定（PC向けの横並び） --- */
.m-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}

/* --- 配置バリエーション（モディファイア） --- */

/* 中央揃え */
.m-btn-group--center {
  justify-content: center;
}

/* 右寄せ */
.m-btn-group--right {
  justify-content: flex-end;
}

/* =========================================
   修正: ボタングループ内の高さ揃え (リストタグ対応)
========================================= */

.m-btn-group {
  align-items: stretch;
}

.m-btn-group>li {
  display: flex;
  flex: 1;
}

.m-btn-group>li>.m-btn {
  height: 100%;
  width: 100%;
  max-width: 100%;
}

/* --- スマホ表示（768px以下で縦積み） --- */
@media (max-width: 768px) {
  .m-btn-group {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .m-btn-group>* {
    width: 100% !important;
    max-width: 100% !important;
  }

  .m-btn-group>li>* {
    width: 100% !important;
  }

  .m-btn--sm {
    max-width: 250px !important;
  }
}

/* =========================================
   Module: FAQ Accordion (.m-faq)
========================================= */

.m-faq {
  display: flex;
  flex-direction: column;
}

/* --- すべて開くボタン --- */
.m-faq__toggle-all {
  margin-left: auto;
  margin-bottom: 2rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--color-support5);
  background-color: #fff;
  color: var(--color-sub-black);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.m-faq__toggle-all:hover {
  background-color: var(--color-support7);
}

/* --- 1. 初期状態（aria-expanded="false" の時） --- */
/* 「閉じる」の文言を隠し、「開く」を表示する */
.m-faq__toggle-all[aria-expanded="false"] .m-faq__text-close {
  display: none;
}

.m-faq__toggle-all[aria-expanded="false"] .m-faq__text-open {
  display: inline;
}

/* --- 2. 展開状態（aria-expanded="true" の時） --- */
/* 「開く」の文言を隠し、「閉じる」を表示する */
.m-faq__toggle-all[aria-expanded="true"] .m-faq__text-open {
  display: none;
}

.m-faq__toggle-all[aria-expanded="true"] .m-faq__text-close {
  display: inline;
}

/* --- アコーディオンの1項目 --- */
.m-faq__item {
  border: 1px solid var(--color-support5);
  margin-bottom: 2rem;
}

.m-faq__item:last-child {
  margin-bottom: 0;
}

/* --- 質問ボタン（ヘッダー） --- */
.m-faq__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background-color: #fff;
  border: none;
  cursor: pointer;
  color: var(--color-sub-black);
  transition: background-color 0.3s ease, border-bottom 0.3s ease;
}

.m-faq__head:hover {
  background-color: var(--color-support7);
}

/* 開いている時は下線を引く */
.m-faq__head[aria-expanded="true"] {
  border-bottom: 1px solid var(--color-support5);
}

/* 質問テキストと「Q.」の装飾 */
.m-faq__q {
  display: block;
  position: relative;
  padding-left: 3.5rem;
  font-size: var(--fz-txt-md);
  font-weight: bold;
  text-align: left;
}

.m-faq__q::before {
  content: "Q.";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-main1);
  font-size: 2.2rem;
  line-height: 1;
}

/* 右側のアロー（矢印）アイコン */
.m-faq__head::after {
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: 2px solid var(--color-main1);
  border-right: 2px solid var(--color-main1);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 2rem;
}

/* 開いている時は矢印を反転 */
.m-faq__head[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

/* =========================================
   回答エリア
========================================= */
.m-faq__body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease-out, visibility 0s 0.3s;
  background-color: var(--color-support7);
}

/* 質問ボタンが「開く(true)」になったら、隣接するbodyの高さを1fr（中身の高さ）に広げる */
.m-faq__head[aria-expanded="true"]+.m-faq__body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease-out, visibility 0s 0s;
}

/* Gridアニメーションを効かせるための必須設定 */
.m-faq__body-inner {
  overflow: hidden;
}

/* 回答テキストと「A.」の装飾 */
.m-faq__a {
  display: block;
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 5rem;
  margin: 0;
  line-height: 1.6;
}

.m-faq__a::before {
  content: "A.";
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  color: var(--color-main1);
  font-size: 2.2rem;
  line-height: 1;
  font-weight: bold;
}

/* =========================================
   Module: Figure (.m-figure)
========================================= */
.m-figure {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* --- 配置のモディファイア --- */
.m-figure--center {
  margin-inline: auto;
}

.m-figure--right {
  margin-left: auto;
}

/* --- サイズのモディファイア --- */
.m-figure--w-400 {
  max-width: 400px;
}

.m-figure--w-450 {
  max-width: 450px;
}

.m-figure--w-600 {
  max-width: 600px;
}

.m-figure--w-720 {
  max-width: 720px;
}

.m-figure--w-800 {
  max-width: 800px;
}

.m-figure--w-850 {
  max-width: 850px;
}

.m-figure--w-900 {
  max-width: 900px;
}

.m-figure--w-1000 {
  max-width: 1000px;
}

.m-figure--w-max {
  max-width: 1080px;
}

.m-figure--w-half {
  max-width: 50%;
}

/* --- Modifier (流体サイズ：スマホ〜PCで滑らかに可変) --- */
/* SP(320px)で400px → PC(1024px)で720px */
.m-figure--w-fluid-720 {
  max-width: clamp(40rem, 25.45rem + 4.55vw, 72rem);
}

/* (オプション) SP(320px)で400px → PC(1024px)で850px にしたい場合 */
.m-figure--w-fluid-850 {
  max-width: clamp(40rem, 19.55rem + 6.39vw, 85rem);
}

/* --- SP専用のサイズ制限（PCでは親カラムに100%追従） --- */
.m-figure--w-sp-400 {
  max-width: 400px;
}

@media (min-width: 768.1px) {
  .m-figure--w-sp-400 {
    max-width: 100%;
  }
}

.m-figure picture {
  display: block;
  width: 100%;
}

/* --- 子要素（Element） --- */
.m-figure__img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.m-figure__caption {
  margin-top: var(--space-8);
  font-size: var(--fz-txt-md);
  font-weight: var(--weight-b);
  color: var(--ft-color-sub-black);
  text-align: center;
}

.m-figure--caption-top_normal .m-figure__caption {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--space-8);
  font-size: var(--fz-headline-md);
  color: var(--ft-color-sub-black);
  text-align: center;
}

.m-figure--caption-top .m-figure__caption {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--space-8);
  font-size: var(--fz-headline-md);
  color: var(--ft-color-main);
  text-align: left;
}

/* --- Modifier (SP時のみ 4:3 でクロップ) --- */
@media (max-width: 768px) {
  .m-figure--crop-sp-4-3 .m-figure__img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
  }
}

@media (max-width: 768px) {
  .m-figure--crop-sp-1-1 .m-figure__img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
  }
}

/* =========================================
   Module: Swipe Box (.m-swipe-box)
   役割：SP時のみコンテンツを横スクロールさせる
========================================= */

/* --- 1. ヒントテキスト（スワイプ注釈） --- */
.m-swipe-box__hint {
  display: none;
}

@media (max-width: 767.9px) {
  .m-swipe-box__hint {
    display: block;
    font-size: var(--fz-txt-sm, 1.3rem);
    text-align: center;
    background-color: var(--color-support5);
    color: var(--ft-color-sub-black);
    padding: 6px 24px;
    margin-bottom: 14px;
    line-height: 1.4;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  }

}

/* --- 2. スクロール領域 --- */
@media (max-width: 767.9px) {
  .m-swipe-box__inner {
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox用 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }

  .m-swipe-box__inner::-webkit-scrollbar {
    display: none;
  }

}

/* =========================================
   Module: List (.m-list)
   特徴：複数行でも完璧なインデント、アイコン切り替え可能
========================================= */

/* --- 共通ベース設定 --- */
.m-list {
  list-style: none;
  padding: 0 !important;
  padding-left: 2.0rem !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-list__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fz-txt-md);
  line-height: 1.5;
}

/* アイコンや数字のベーススタイル */
.m-list__item::before {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   Modifier: 1. ドットリスト (.m-list--dot)
========================================= */
.m-list--dot .m-list__item::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: calc(1.7em / 2 - 3px);
  background-color: var(--color-main1);
  border-radius: 50%;
}

/* =========================================
   Modifier: 2. チェックリスト (.m-list--check)
========================================= */
.m-list--check .m-list__item::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 4px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ea002a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}


/* --- 2. 2×2グリッドレイアウト (.m-list--grid) --- */
@media (min-width: 768.1px) {
  .m-list--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
  }

  /* グリッド時は各項目の下マージンを調整（gapで制御するため） */
  .m-list--grid .m-list__item {
    margin: 0;
  }

  /* アイテム数が3つのとき、3列表示 */
  .m-list--grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 16px;
  }

  .m-list--grid-3 .m-list__item {
    margin: 0;
  }
}

/* SP時はデフォルトで1列（flex-direction: column）なので設定不要 */

/* --- 3. 小見出しとしての強調表示 (.m-list__item span) --- */
.m-list__item span {
  display: block;
  font-weight: bold;
  font-size: 1.7rem;
  color: var(--color-sub-black);
  margin-bottom: 4px;
  line-height: 1.4;
}

/* span の後に続くテキスト（説明文）のスタイル調整 */
.m-list__text {
  display: block;
  font-size: 1.5rem;
  color: #555555;
  line-height: 1.6;
}

/* =========================================
   Modifier: 3. 数字リスト (.m-list--num)
========================================= */
.m-list--num {
  counter-reset: m-list-counter;
}

.m-list--num .m-list__item {
  counter-increment: m-list-counter;
}

.m-list--num .m-list__item::before {
  content: counter(m-list-counter);
  width: 24px;
  height: 24px;
  background-color: var(--color-main1, #0056b3);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 50%;
  /* 数字の位置調整 */
  margin-top: 1px;
}

/* =========================================
   Modifier: 4. 境界線付きリスト (.m-list--border)
========================================= */
.m-list--border .m-list__item {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-support5, #eeeeee);
}

.m-list--border .m-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}


/* =========================================
   Module: Text Link (.m-link)
========================================= */

/* --- 1. インラインリンク（基本） --- */
.m-link {
  color: var(--ft-color-sub-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

/* ホバー時の演出（色は少し暗くし、下線は消す） */
.m-link:hover {
  color: var(--color-hover);
  text-decoration-color: transparent;
}

/* =========================================
   Modifier: 2. 独立リンク・左アロー付き (.m-link--back)
========================================= */
.m-link--back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  text-decoration: none;
}

.m-link--back:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 左アローアイコン（mask-image の魔法） */
.m-link--back::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;

  transition: transform 0.3s ease;
}

/* ホバー時に左にスッと動く */
.m-link--back:hover::before {
  transform: translateX(-4px);
}

.m-link--arrow-left {
  position: relative;
  display: inline-block;
  padding-left: 1.2em;
  line-height: 1.5;
}

.m-link--arrow-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  transform: translateY(-50%) rotate(45deg);

  /* アローのスタイル（赤色） */
  width: 7px;
  height: 7px;
  border-top: 2px solid #ea002a;
  border-right: 2px solid #ea002a;
}


.m-link--arrow-left[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 0.4em;
  vertical-align: -2px;
  background-image: url('/cmn/img/icon_tab_red.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================
   Modifier: 3. 外部リンクアイコン (.m-link--external)
========================================= */
.m-link--external::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  margin-bottom: 2px;
  background-color: currentColor;
  -webkit-mask-image: url(/cmn/img/icon_tab_red.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: url(/cmn/img/icon_tab_red.svg);
  mask-size: contain;
  mask-repeat: no-repeat;

  transition: transform 0.3s ease;
}

/* .m-link--back と .m-link--external を併用した時の微調整 */
.m-link--back.m-link--external::after {
  margin-bottom: 0;
}

/* =========================================
   State: 表示制御用クラス
========================================= */

/* 要素を完全に隠す（JSから付け外し） */
.is-hidden {
  display: none !important;
}

/* ボタンで追加された時にフワッと現れるアニメーション */
.is-fade-in {
  animation: fadeInCard 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInCard {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   Module: Table of Contents (.m-toc)
========================================= */

/* --- 共通・SP時（768px以下）：通常配置 --- */
.m-toc {
  margin: 3rem 0;
}

.m-toc__inner {
  background-color: var(--bg-color-white, #ffffff);
  border: 2px solid var(--color-support5, #eeeeee);
  border-radius: 6px;
  padding: 1.2rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 1000px;
}

.m-toc__title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-sub-black);
  line-height: 1.3;
  margin: 0 0 1.2rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--color-support5, #eeeeee);
  padding-left: 1.2rem;
  position: relative;
  transition: opacity 0.2s ease;
}

.m-toc__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 1.3em;
  background-color: #ea002a;
  border-radius: 2px;
}

.m-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================================
   リンク項目と現在地のハイライト
========================================= */
.m-toc__link {
  display: flex;
  align-items: flex-start;
  font-size: 1.3rem;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  color: var(--color-sub-black);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-support5, #eeeeee);
  transition: all 0.3s ease;
}

/* 追加：トグルに見えない「ジャンプ（↓）矢印」 */
.m-toc__link::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  margin-right: 6px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="4" x2="12" y2="20"></line><polyline points="18 14 12 20 6 14"></polyline></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="4" x2="12" y2="20"></line><polyline points="18 14 12 20 6 14"></polyline></svg>');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ホバー＆アクティブ（現在地）のスタイル */
.m-toc__link:hover,
.m-toc__link.is-active {
  color: #ea002a;
  font-weight: bold;
  background-color: #fff0f0;
  border-bottom-color: transparent;
}

.m-toc__content {
  transition: opacity 0.3s ease;
}

/* =========================================
   ハンバーガーボタンの基本設定
========================================= */
.m-toc__toggle {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 10;
  padding: 0;
}

/* 三本線のラッパー */
.m-toc__toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.m-toc__toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  background-color: var(--color-sub-black, #111111);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 開閉アニメーション */
.m-toc.is-open .m-toc__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.m-toc.is-open .m-toc__toggle-bar:nth-child(2) {
  opacity: 0;
}

.m-toc.is-open .m-toc__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 追加：テキストは初期状態（開いている時やSP時）は隠す */
.m-toc__toggle-text {
  display: none;
}

/* =========================================
   SP時（768px以下）：閉じた時のアコーディオン化
========================================= */
@media (max-width: 768px) {
  .m-toc:not(.is-open) .m-toc__inner {
    max-height: 48px;
    padding-bottom: 0;
  }

  .m-toc:not(.is-open) .m-toc__content {
    opacity: 0;
    visibility: hidden;
  }

  .m-toc:not(.is-open) .m-toc__title {
    border-bottom: 0;
  }

}

/* =========================================
   PC時（769px以上）：右端固定の縦型タブ
========================================= */
@media (min-width: 769px) {
  .m-toc {
    position: fixed;
    top: 50%;
    right: 0;
    margin: 0;
    z-index: 100;
    transform: translateY(calc(-50% + 20px));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
  }

  .m-toc.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
  }

  .m-toc__inner {
    width: 240px;
    border-radius: 6px 0 0 6px;
    box-shadow: -2px 4px 15px rgba(0, 0, 0, 0.08);
  }

  /* 閉じた時（最小化）：縦に細長い「タブ」に変形する魔法 */
  .m-toc:not(.is-open) .m-toc__inner {
    background-color: var(--color-support1);
    border-color: var(--color-support1);
    width: 44px;
    max-height: 300px;
    padding: 1.5rem 0;
    cursor: pointer;
  }

  .m-toc:not(.is-open) .m-toc__title,
  .m-toc:not(.is-open) .m-toc__content {
    opacity: 0;
    visibility: hidden;
  }

  /* 閉じている時は、ボタンがタブ全面を覆う */
  .m-toc:not(.is-open) .m-toc__toggle {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  .m-toc:not(.is-open) .m-toc__toggle-bar {
    background-color: #fff;
  }

  /* 最小化時のみテキストを表示し、多言語対応の縦書きにする */
  .m-toc:not(.is-open) .m-toc__toggle-text {
    display: block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;
  }
}

/* =========================================
   修正：目次トグルボタンのホバーアクション（背景色反転）
========================================= */
@media (hover: hover) and (pointer: fine) {
  .m-toc__inner {
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  .m-toc__toggle-icon,
  .m-toc__toggle-text {
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .m-toc:not(.is-open) .m-toc__inner:hover {
    background-color: var(--color-support2);
    border-color: var(--color-support2);
  }

  .m-toc.is-open .m-toc__toggle:hover .m-toc__toggle-bar {
    background-color: var(--color-support2);
  }

  .m-toc.is-open .m-toc__toggle:hover .m-toc__toggle-text {
    color: var(--color-support2);
  }

  .m-toc.is-open .m-toc__toggle:hover .m-toc__toggle-icon {
    transform: scale(1.1);
  }
}


/* =========================================
   Module: Filter Search (.m-filter) 
========================================= */

.m-filter {
  background-color: #4a5559;
  margin: 0 auto;
  max-width: 1200px;
  padding: 3.0rem 6.0rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.m-filter__group {
  border: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #7a8a8e;
  padding: 1.0rem 0;
}

.m-filter__group:first-of-type {
  padding-top: 0;
}

.m-filter__group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* --- 行のレイアウト（PCでも縦並び） --- */
.m-filter__row {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* --- 項目名（上：白い太字） --- */
.m-filter__label {
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
}

.m-filter__label legend {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.1em;
}

/* --- チェックボックスエリア（下：パネルと同じダークグレー） --- */
.m-filter__control {
  flex-grow: 1;
  padding: 0;
  margin: 0;
}

.m-filter__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}

/* --- チェックボックス本体（白い枠線） --- */
.m-filter .checkbox {
  display: flex;
  align-items: center;
  gap: 1.0rem;
  cursor: pointer;
  font-size: 1.6rem;
  padding: 0.5rem 0;
  color: #ffffff;
}

.m-filter input[type="checkbox"] {
  /* appearance: none; で標準の見た目を消し、白い枠線のみにする */
  appearance: none;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid #ffffff;
  border-radius: 2px;
  background-color: transparent;
  cursor: pointer;
  margin: 0;
  position: relative;
}

/* チェック時のスタイル（白背景にグレーのチェックマーク） */
.m-filter input[type="checkbox"]:checked {
  background-color: var(--color-main1);
}

/* チェック時のスタイル（CSS描画の美しいチェックマーク） */
.m-filter input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 42.5%;
  left: 50%;
  width: 5px;
  height: 10px;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* =========================================
   ボタンエリア（中央配置 ＆ 活性/非活性の切り替え）
========================================= */
.m-filter__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.0rem;
  padding: 3.0rem 0 0;
  background-color: transparent;
}

/* リセットボタン（変更なし） */
.m-filter .filter-reset {
  appearance: none;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 1.6rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 1.0rem;
  transition: opacity 0.3s ease;
}

.m-filter .filter-reset:hover {
  opacity: 0.8;
}

/* 絞り込みボタン（基本 ＝ 非活性グレー） */
.m-filter .filtering {
  appearance: none;
  border: none;
  background-color: #cccccc;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 1.5rem 4.0rem;
  border-radius: 2px;
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  gap: 1.0rem;
  transition: background-color 0.3s ease, opacity 0.3s ease;

  /* 追加：非活性時はクリック不可（禁止マーク）にする */
  cursor: not-allowed;
  opacity: 0.8;
}

/* 追加：活性状態（disabledが外れた時）はブランドカラーの赤にする */
.m-filter .filtering:not(:disabled) {
  background-color: #ea002a;
  cursor: pointer;
  opacity: 1;
}

.m-filter .filtering:not(:disabled):hover {
  background-color: #cc0025;
}

.m-filter .filtering::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: 2px;
}

/* =========================================
   絞り込み結果サマリーのスタイル
========================================= */
.filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.0rem;
  margin: 3.0rem auto 0;
  width: 100%;
  max-width: 1200px;
  padding: 2.0rem 3.0rem;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.filter-summary__text {
  font-weight: bold;
  margin: 0;
  color: #222222;
  font-size: 1.6rem;
}

.filter-summary__count {
  color: #ea002a;
  font-size: 2.8rem;
  margin-right: 0.5rem;
  line-height: 1;
}

.filter-summary__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
}

/* 選択された条件を示すタグ（チップ） */
.filter-tag {
  background-color: #4a5559;
  color: #ffffff;
  padding: 0.6rem 1.6rem;
  border-radius: 2.0rem;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* =========================================
   SP（スマホ）対応
========================================= */
@media (max-width: 768px) {}

/* =========================================
   SP（スマホ）対応
========================================= */
@media (max-width: 768px) {
  .m-filter-tab-title {
    margin-left: 0;
    width: 100%;
    text-align: center;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
  }

  .m-filter {
    padding: 2.0rem;
    max-width: 100%;
    border-radius: 0 0 4px 4px;
  }

  .m-filter__group {
    padding: 1.5rem 0;
  }

  .m-filter__label {
    margin-bottom: 1.0rem;
  }

  .m-filter__label legend {
    font-size: 1.6rem;
  }

  .m-filter__checkboxes {
    gap: 1.5rem;
  }

  .m-filter .checkbox {
    gap: 0.5rem;
    font-size: 1.4rem;
    padding: 0;
  }

  .m-filter__actions {
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 2.0rem;
    justify-content: center;
  }

  .m-filter .filtering {
    width: 100%;
    justify-content: center;
  }

  .filter-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2.0rem;
    margin-top: 2.0rem;
  }

}

/* =========================================
   Module: Fixed Bar (.m-fixed-bar)
========================================= */
/* --- Block --- */
.m-fixed-bar {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 2.4rem;
  padding-right: 10.0rem;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--color-support2);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s linear;
}

/* --- State: 非表示状態 --- */
.m-fixed-bar.m-fixed-bar--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* --- Element: 閉じるボタン --- */
.m-fixed-bar__close {
  position: absolute;
  z-index: 1;
  right: 5.5rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  appearance: none;
  padding: 0;
  cursor: pointer;
}

.m-fixed-bar__close:hover {
  background-color: #efefef;
}

/* --- Element: 閉じるアイコン --- */
.m-fixed-bar__icon {
  display: block;
  width: 16px;
  height: 16px;
}

.m-fixed-bar__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.0rem;
  flex-wrap: wrap;
  width: 100%;
}

/* --- Element: テキスト --- */
.m-fixed-bar__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--color-sub-black, #333333);
}

/* --- Element: リンク --- */
.m-fixed-bar__link {
  margin: 0;
  white-space: nowrap;
}

/* =========================================
   SP（スマホ）対応
========================================= */
@media screen and (max-width: 768px) {
  .m-fixed-bar {
    padding: 1.5rem 2.0rem;
    padding-right: 6.0rem;
  }

  .m-fixed-bar__close {
    right: 1.5rem;
    width: 28px;
    height: 28px;
  }

  .m-fixed-bar__icon {
    width: 14px;
    height: 14px;
  }

  .m-fixed-bar__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.0rem;
  }
}

@media screen and (max-width: 767.9px) {
  .m-fixed-bar__item {
    max-width: 260px;
    width: 100%;
  }
}

/* =========================================
   トップページのヒーローバナー1枚目にh1をあてる
========================================= */
.hero-title {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* =========================================
   Utility Classes (汎用ヘルパークラス)
   ※ レイアウトやコンポーネントに依存せず、単一の機能を提供するクラス群
========================================= */

/* リストスタイルの初期化 */
.u-list-reset {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================
   Utility: Fluid Spacing (可変余白の微調整)
   ※ スマホ画面〜PC画面で滑らかに拡縮する余白
========================================= */

/* --- マージン・ボトム (Margin Bottom) --- */
.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-xs {
  margin-bottom: var(--space-fluid-xs) !important;
}

.u-mb-sm {
  margin-bottom: var(--space-fluid-sm) !important;
}

.u-mb-md {
  margin-bottom: var(--space-fluid-md) !important;
}

.u-mb-lg {
  margin-bottom: var(--space-fluid-lg) !important;
}

.u-mb-xl {
  margin-bottom: var(--space-fluid-xl) !important;
}

.u-mb-xxl {
  margin-bottom: var(--space-fluid-xxl) !important;
}

/* --- マージン・トップ (Margin Top) --- */
.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-xs {
  margin-top: var(--space-fluid-xs) !important;
}

.u-mt-sm {
  margin-top: var(--space-fluid-sm) !important;
}

.u-mt-md {
  margin-top: var(--space-fluid-md) !important;
}

.u-mt-lg {
  margin-top: var(--space-fluid-lg) !important;
}

.u-mt-xl {
  margin-top: var(--space-fluid-xl) !important;
}

.u-mt-xxl {
  margin-top: var(--space-fluid-xxl) !important;
}

/* --- パディング・ボトム (Padding Bottom) --- */
.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-pb-sm {
  padding-bottom: var(--space-fluid-sm) !important;
}

.u-pb-md {
  padding-bottom: var(--space-fluid-md) !important;
}

.u-pb-lg {
  padding-bottom: var(--space-fluid-lg) !important;
}

.u-pb-xl {
  padding-bottom: var(--space-fluid-xl) !important;
}

.u-pb-xxl {
  padding-bottom: var(--space-fluid-xxl) !important;
}

/* --- パディング・トップ (Padding Top) --- */
.u-pt-0 {
  padding-top: 0 !important;
}

.u-pt-sm {
  padding-top: var(--space-fluid-sm) !important;
}

.u-pt-md {
  padding-top: var(--space-fluid-md) !important;
}

.u-pt-lg {
  padding-top: var(--space-fluid-lg) !important;
}

.u-pt-xl {
  padding-top: var(--space-fluid-xl) !important;
}

.u-pt-xxl {
  padding-top: var(--space-fluid-xxl) !important;
}

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

  /* --- マージン・ボトム (Margin Bottom) --- */
  .u-sp-mb-0 {
    margin-bottom: 0 !important;
  }

  .u-sp-mb-xs {
    margin-bottom: var(--space-fluid-xs) !important;
  }

  .u-sp-mb-sm {
    margin-bottom: var(--space-fluid-sm) !important;
  }

  .u-sp-mb-md {
    margin-bottom: var(--space-fluid-md) !important;
  }

  .u-sp-mb-lg {
    margin-bottom: var(--space-fluid-lg) !important;
  }

  .u-sp-mb-xl {
    margin-bottom: var(--space-fluid-xl) !important;
  }

  .u-sp-mb-xxl {
    margin-bottom: var(--space-fluid-xxl) !important;
  }

  /* --- マージン・トップ (Margin Top) --- */
  .u-sp-mt-0 {
    margin-top: 0 !important;
  }

  .u-sp-mt-xs {
    margin-top: var(--space-fluid-xs) !important;
  }

  .u-sp-mt-sm {
    margin-top: var(--space-fluid-sm) !important;
  }

  .u-sp-mt-md {
    margin-top: var(--space-fluid-md) !important;
  }

  .u-sp-mt-lg {
    margin-top: var(--space-fluid-lg) !important;
  }

  .u-sp-mt-xl {
    margin-top: var(--space-fluid-xl) !important;
  }

  .u-sp-mt-xxl {
    margin-top: var(--space-fluid-xxl) !important;
  }

  /* --- パディング・ボトム (Padding Bottom) --- */
  .u-sp-pb-0 {
    padding-bottom: 0 !important;
  }

  .u-sp-pb-sm {
    padding-bottom: var(--space-fluid-sm) !important;
  }

  .u-sp-pb-md {
    padding-bottom: var(--space-fluid-md) !important;
  }

  .u-sp-pb-lg {
    padding-bottom: var(--space-fluid-lg) !important;
  }

  .u-sp-pb-xl {
    padding-bottom: var(--space-fluid-xl) !important;
  }

  .u-sp-pb-xxl {
    padding-bottom: var(--space-fluid-xxl) !important;
  }

  /* --- パディング・トップ (Padding Top) --- */
  .u-sp-pt-0 {
    padding-top: 0 !important;
  }

  .u-sp-pt-sm {
    padding-top: var(--space-fluid-sm) !important;
  }

  .u-sp-pt-md {
    padding-top: var(--space-fluid-md) !important;
  }

  .u-sp-pt-lg {
    padding-top: var(--space-fluid-lg) !important;
  }

  .u-sp-pt-xl {
    padding-top: var(--space-fluid-xl) !important;
  }

  .u-sp-pt-xxl {
    padding-top: var(--space-fluid-xxl) !important;
  }
}

/* =========================================
   Utility: Typography (フォント・テキスト装飾)
========================================= */

/* --- 1. テキストの行揃え (Text Align) --- */
.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-right {
  text-align: right !important;
}

.u-text-center-pc {
  text-align: center !important;
}

.u-text-right-pc {
  text-align: right !important;
}

/* SPとPCで行揃えを変えたい場合によく使うModifier */
@media (max-width: 768px) {
  .u-text-center-sp {
    text-align: center !important;
  }

  .u-text-center,
  .u-text-center-pc,
  .u-text-right,
  .u-text-right-pc {
    text-align: left !important;
  }
}

/* --- 2. フォントの太さ (Font Weight) --- */
.u-fw-normal {
  font-weight: normal !important;
}

.u-fw-bold {
  font-weight: bold !important;
}

/* フォントによっては 500 や 600 などの中間ウェイトも */
.u-fw-medium {
  font-weight: 500 !important;
}

/* --- 3. フォントサイズ --- */
/* ※ _root.css などで定義した可変変数（clamp）を使う想定 */
.u-fz-xs {
  font-size: var(--fz-txt-xs, 1.2rem) !important;
}

.u-fz-sm {
  font-size: var(--fz-txt-sm, 1.4rem) !important;
}

.u-fz-md {
  font-size: var(--fz-txt-md, 1.6rem) !important;
}

/* 基本サイズ */
.u-fz-lg {
  font-size: var(--fz-txt-lg, 1.8rem) !important;
}

.u-fz-xl {
  font-size: var(--fz-txt-xl, 2.0rem) !important;
}

/* --- 4. テキストの装飾 --- */
.u-text-underline {
  text-decoration: underline !important;
}

.u-text-line-through {
  text-decoration: line-through !important;
}

.u-text-italic {
  font-style: italic !important;
}

/* --- 5. テキストの省略 --- */
/* 1行に収まらない長いテキストを「...」で省略 */
.u-text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.u-ft-red {
  color: var(--color-main1);
}

.u-bg-grey {
  background-color: var(--color-support5) !important;
}

.u-bg-lightred {
  background-color: var(--color-main8) !important;
}

.u-bg-darkgrey {
  background-color: var(--color-support1) !important;
}

.u-bg-black {
  background-color: var(--color-sub-black) !important;
}

/* =========================================
   Utility: Check Icon (.u-icon-check)
   用途：任意のテキスト要素の先頭にチェックアイコン（赤）を付与
========================================= */

.u-icon-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.u-icon-check::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
  margin-top: calc((1.6em - 1.0em) / 2);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ea002a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.u-icon-check--center {
  align-items: center;
}

.u-icon-check--center::before {
  margin-top: 0;
}

.u-lh-xs {
  line-height: 1.0;
}

.u-lh-sm {
  line-height: 1.2;
}