@charset "UTF-8";

:root {
    --white-color: #fff;
    --black-color: #373737;
    --red-color: #D83347;
    --gray-color-100: #FAFAFA;
    --gray-color-200: #F2F2F2;
    --gray-color-300: #D8D8D8;
    --gray-color-400: #B4B4B4;
    --gray-color-500: #616467;
    --deep-blue-100: #E6EAF3;
    --deep-blue-300: #99AACF;
    --deep-blue-500: #002A87;
    --blue-color-100: #e6f3ff;
    --blue-color-300: #99CEFF;
    --blue-color-500: #0085FF;
    --green-color-300: #99DBD7;
    --green-color-500: #00A59B;
    --purple-color-300: #CDD3F1;
    --purple-color-500: #8A66F1;
    --red-color-100: #FF0000;

    --primary-color-100: var(--deep-blue-500);
    --primary-color-300: var(--deep-blue-300);
    --primary-color-light: var(--deep-blue-100);
  
    --font-size: 16;
  }

/* ==========================================================================
  ELEMENT RESET
========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--black-color, #000);
  font-weight: 400;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}

ol,
ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a {
  outline: 0;
}

a:focus,
button:focus {
  outline: 0;
}

em {
  font-style: normal;
}

figure {
  margin: 0;
}

table {
  border-collapse: collapse;
}

button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

button:focus {
  outline: none;
}

input,
button,
select,
textarea {
  line-height: inherit;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  line-height: inherit;
}

hr {
  margin: 0;
}

hr {
  margin: 5rem 0;
  border: 1px #ccc solid;
}

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

[aria-hidden="true"] {
  display: none !important;
}

/* ==========================================================================
  VENDER
========================================================================== */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }  

/* ==========================================================================
  UTILL
========================================================================== */

html{
    scroll-behavior: smooth;
}

body{
  -webkit-print-color-adjust: exact;
}

button{
  cursor: pointer;
}

/* --------------------------------------------------------------------------
  バッファ
-------------------------------------------------------------------------- */

  @media all and (min-width: 768px), print {
    .u-buffer {

    }
  }

  @media all and (max-width: 767px) {
    .u-buffer {
      position: relative;
      margin-top: calc(-50 / var(--font-size)* 1rem);
      padding-top: calc(50 / var(--font-size)* 1rem);
      z-index: -1;
    }
  }

/* ==========================================================================
  JS
========================================================================== */

.js-accordion-trigger{
  cursor: pointer;
}
  .js-accordion-container {
    transition: all 0.2s;
    display: none;
    /* opacity: 0; */
    visibility: hidden;
    overflow-y: hidden;
  }
  .js-accordion.is-opened-accordion .js-accordion-container {
    display: block;
    /* opacity: 1; */
    visibility: visible;
    overflow-y: initial;
  }
  .js-popup{
    cursor: pointer;
    position: relative;
  }
  .js-popup-container{
    transition: all 0.2s;
    display: none;
    /* opacity: 0; */
    visibility: hidden;
    overflow-y: hidden;
    position: absolute;
    z-index: 10;
  }
  .js-popup.is-opened-popup .js-popup-container{
    display: block;
    /* opacity: 1; */
    visibility: visible;
    overflow-y: initial;
  }

/* ==========================================================================
  LAYOUT
========================================================================== */

/* --------------------------------------------------------------------------
  HEADER
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .gheader {
        position: relative;
        z-index: 1;
        /* gheader-subnav用 */
        /* padding-bottom: calc(62 / var(--font-size)* 1rem); */
    }
    .gheader__in {
        padding: 0 calc(40 / var(--font-size)* 1rem);
        max-width: calc(1440 / var(--font-size)* 1rem);
        min-height: calc(80 / var(--font-size)* 1rem);
        margin: auto;
        height: calc(180 / var(--font-size)* 1rem);
    }
    .gheader__body {
        display: flex;
        justify-content: flex-start;
        min-height: calc(80 / var(--font-size)* 1rem);
    }
    .gheader-logo{

    }
    .gheader-logo__in{
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: 100%;
    }
    .gheader-logo-img {
        display: block;
        width: calc(393 / var(--font-size)* 1rem);
        height: calc(30 / var(--font-size)* 1rem);
    }
    .gheader-logo-img__label {
        margin: 0;
    }
    .gheader-logo-img__label img {
        vertical-align: top;
    }
    .gheader-content {
        flex-grow: 1;
    }
    .gheader-menu {

    }
    .gheader-menu-heading {
      display: none;
    }
    .gheader-menu-body {

    }
    .gheader-menu-body__in {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
        padding-bottom: calc(9 / var(--font-size)* 1rem);
    }
    .gheader-nav {
        flex-grow: 1;
        width: 100%;
    }
    .gheader-nav-list {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-right: calc(-40 / var(--font-size)* 1rem);
    }
    .gheader-nav-list-item {
        margin-left: calc(2 / var(--font-size)* 1rem);
    }
    .gheader-nav-list-item:first-child {
        margin-left: 0;
    }
    .gheader-nav-list-item > a {
        display: inline-block;
        vertical-align: top;
    }
    .gheader-nav-body {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(57 / var(--font-size)* 1rem);
        padding-left: calc(20 / var(--font-size)* 1rem);
        padding-right: calc(20 / var(--font-size)* 1rem);
        transition: all 0.2s;
    }
    .gheader-nav-body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .gheader-nav-list-item--company .gheader-nav-body {
        background: var(--blue-color-500);
    }
    .gheader-nav-list-item--company .gheader-nav-body::before {
        border: calc(1 / var(--font-size) * 1rem) solid var(--blue-color-500);
        border-top: none;
    }
    .gheader-nav-list-item--dealer .gheader-nav-body {
        background: var(--green-color-500);
    }
    .gheader-nav-list-item--dealer .gheader-nav-body::before {
        border: calc(1 / var(--font-size) * 1rem) solid var(--green-color-500);
        border-top: none;
    }
    .gheader-nav-list-item--manufacturer .gheader-nav-body {
        background: var(--purple-color-500);
    }
    .gheader-nav-list-item--manufacturer .gheader-nav-body::before {
        border: calc(1 / var(--font-size) * 1rem) solid var(--purple-color-500);
        border-top: none;
    }
    .gheader-nav-list-item--industry .gheader-nav-body {
        background: var(--gray-color-500);
    }
    .gheader-nav-list-item--industry .gheader-nav-body::before {
        border: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-500);
        border-top: none;
    }
    .gheader-nav-list-item--login .gheader-nav-body {
      background: var(--white-color);
    }
    .gheader-nav-list-item--login .gheader-nav-body::before {
        border: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-500);
        border-top: none;
    }
    .gheader-nav-list-item--login .gheader-nav-body .gheader-nav-login__ico{
      display: block;
      width: calc(14 / var(--font-size)* 1rem);
      height: calc(14 / var(--font-size)* 1rem);
    }
    .gheader-nav-list-item--login .gheader-nav-body .gheader-nav-login__arrow{
      display: block;
      width: calc(20 / var(--font-size)* 1rem);
      height: calc(20 / var(--font-size)* 1rem);
      transform: scaleY(1);
      transition: transform 0.2s;
    }
    .gheader-nav-list-item--login.is-opened-popup .gheader-nav-login__arrow{
      transform: scaleY(-1);
    }
    .gheader-nav-list-item--login .gheader-nav-body svg{
      display: block;
      width: 100%;
      height: 100%;
      fill: var(--black-color);
      transition: all 0.2s;
    }
    .gheader-nav-list-item--login .gheader-nav__label{
      color: var(--black-color);
      margin-left:calc(4 / var(--font-size)* 1rem);
      margin-right:calc(0 / var(--font-size)* 1rem);
    }
    .gheader-nav-list-item > a:hover .gheader-nav-body {
        background: var(--white-color);
    }
    .gheader-nav__label {
        display: block;
        text-align: center;
        font-size: calc(16 / var(--font-size)* 1rem);
        font-weight: bold;
        color: var(--white-color);
        transition: all 0.2s;
    }
    .gheader-nav-list-item--company > a:hover .gheader-nav__label {
        color: var(--blue-color-500);
    }
    .gheader-nav-list-item--dealer > a:hover .gheader-nav__label {
        color: var(--green-color-500);
    }
    .gheader-nav-list-item--manufacturer > a:hover .gheader-nav__label {
        color: var(--purple-color-500);
    }
    .gheader-nav-list-item--industry > a:hover .gheader-nav__label {
        color: var(--gray-color-500);
    }
    .gheader-nav-list-item--login .gheader-nav-list-item__body > a:hover .gheader-nav-body {
        background: var(--black-color);
    }
    .gheader-nav-list-item--login .gheader-nav-list-item__body > a:hover .gheader-nav__label {
        color: var(--white-color);
    }
    .gheader-nav-list-item--login .gheader-nav-list-item__body > a:hover .gheader-nav-body svg {
      fill: var(--white-color);
    }
    .gheader-subnav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--gray-color-200);
    }
    .gheader-subnav__in {
        max-width: calc(1440 / var(--font-size)* 1rem);
        margin: auto;
        padding: 0 calc(40 / var(--font-size)* 1rem);
    }
    .gheader-subnav-list {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: calc(62 / var(--font-size)* 1rem);
    }
    .gheader-subnav-list-item {
        margin-left: calc(58 / var(--font-size)* 1rem);
    }
    .gheader-subnav-list-item:first-child {
        margin-left: 0;
    }
    .gheader-subnav-list-item > a {
        display: inline-block;
        vertical-align: top;
    }
    .gheader-subnav-list-item > a[disabled] {
        pointer-events: none;
    }
    .gheader-subnav-body {

    }
    .gheader-subnav__label {
        display: block;
        text-align: center;
        font-size: calc(16 / var(--font-size)* 1rem);
        font-weight: bold;
        color: var(--black-color);
    }
    .gheader-subnav-list-item > a[disabled] .gheader-subnav__label {
        color: var(--gray-color-400);
    }
    .gheader-submenu {
        flex-grow: 1;
        margin-top: calc(28 / var(--font-size)* 1rem);
    }
    .gheader-submenu:first-child {
        margin-top: 0;
    }
    .gheader-submenu-list {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-right: calc(-15 / var(--font-size)* 1rem);
    }
    .gheader-submenu-list-item {
        margin-left: calc(16 / var(--font-size)* 1rem);
        padding-left: calc(16 / var(--font-size)* 1rem);
        border-left: 1px solid var(--gray-color-300);
    }
    .gheader-submenu-list-item:first-child {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
    .gheader-submenu-list-item > a {
        display: inline-block;
        vertical-align: top;
    }
    .gheader-submenu-body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .gheader-submenu-body i {
        display: block;
        width: calc(20 / var(--font-size)* 1rem);
        height: calc(20 / var(--font-size)* 1rem);
    }
    .gheader-submenu-body svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: var(--black-color);
    }
    .gheader-submenu-list-item--pr_tool .gheader-submenu-body svg{
      max-width: calc(16 / var(--font-size)* 1rem);
    }
    .gheader-submenu-list-item--infodesk .gheader-submenu-body svg{
      max-width: calc(20 / var(--font-size)* 1rem);
    }
    .gheader-submenu-list-item--pr_tool .gheader-submenu-body i{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gheader-submenu-list-item--infodesk .gheader-submenu-body i{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gheader-submenu__label {
        display: block;
        margin-left: calc(4 / var(--font-size)* 1rem);
        font-size: calc(14 / var(--font-size)* 1rem);
        font-weight: bold;
        color: var(--black-color);
    }
    .gheader-submenu__label:first-child {
        margin-left: 0;
    }
    .gheader-nav-popup{
      right: 0;
      background: var(--white-color);
      width: calc(708 / var(--font-size)* 1rem);
      box-shadow: calc(4 / var(--font-size)* 1rem) calc(4 / var(--font-size)* 1rem) calc(10 / var(--font-size)* 1rem) rgba(0, 0, 0, 0.05);
    }
    .gheader-nav-popup-body{
      padding: calc(24 / var(--font-size)* 1rem) calc(30 / var(--font-size)* 1rem);
    }
    .gheader-nav-popup-list{
      display: flex;
      gap: calc(15 / var(--font-size)* 1rem);
    }
    .gheader-nav-popup-list-item{
    }
    .gheader-nav-popup-list-item--smb{
      --primary-color-100:var(--blue-color-500);
    }
    .gheader-nav-popup-list-item--dealer{
      --primary-color-100:var(--green-color-500);
    }
    .gheader-nav-popup-list-item--manufacturer{
      --primary-color-100:var(--purple-color-500);
    }
    .gheader-nav-popup-content-header{
      margin-bottom: calc(8 / var(--font-size)* 1rem);
    }
    .gheader-nav-popup-content-header-txt__label{
      display: block;
      font-size: calc(16 / var(--font-size)* 1rem);
      font-weight: bold;
      color: var(--primary-color-100);
      transition: all 0.2s;
    }
    .gheader-nav-popup-content-btn{
      position: relative;
    }
    .gheader-nav-popup-content-btn a::before{
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 100%;
      border: calc(2 / var(--font-size)* 1rem) solid var(--primary-color-100);
    }
    .gheader-nav-popup-content-btn a{
      padding: calc(16 / var(--font-size)* 1rem) calc(26 / var(--font-size)* 1rem);
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--white-color);
      z-index: 10;
      transition: all 0.2s;
    }
    .gheader-nav-popup-content-btn > a:hover{
      background: var(--primary-color-100);
    }
    .gheader-nav-popup-content-btn a i{
      display: block;
      width: calc(16 / var(--font-size)* 1rem);
      height: calc(16 / var(--font-size)* 1rem);
      margin-right: calc(4 / var(--font-size)* 1rem);
      transition: all 0.2s;
    }
    .gheader-nav-popup-content-btn a svg{
      display: block;
      width: 100%;
      height: 100%;
      fill: var(--primary-color-100);
      transition: all 0.2s;
    }
    .gheader-nav-popup-content-btn > a:hover svg{
      fill: var(--white-color);
    }
    .gheader-nav-popup-content-btn__label{
      display: block;
      font-size: calc(16 / var(--font-size)* 1rem);
      font-weight: bold;
      color: var(--primary-color-100);
      transition: all 0.2s;
    }
    .gheader-nav-popup-content-btn > a:hover .gheader-nav-popup-content-btn__label{
      color: var(--white-color);
    }
    .gheader-nav-popup-list-note{
      margin-top: calc(16 / var(--font-size)* 1rem);
    }
    .gheader-nav-popup-list-txt{
      position: relative;
    }
    .gheader-nav-popup-list-txt__label::before{
      content: "※";
    }
    .gheader-nav-popup-list-txt__label{
      display: block;
      font-size: calc(12 / var(--font-size)* 1rem);
      font-weight: bold;
      color: var(--red-color-100);
    }
}
@media all and (min-width: 768px) and (max-width: 1180px), print {
    .gheader-logo-img {
        width: calc(393 / var(--font-size)* 1024 / 1260 * 1rem);
        height: calc(30 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-nav-list-item {
        margin-left: calc(2 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-nav-list-item:first-child {
        margin-left: 0;
    }
    .gheader-nav-body {
        padding-left: calc(20 / var(--font-size)* 1024 / 1260 * 1rem);
        padding-right: calc(20 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-nav__label {
        font-size: calc(16 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-subnav-list-item {
        margin-left: calc(40 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-subnav-list-item:first-child {
        margin-left: 0;
    }
    .gheader-subnav__label {
        font-size: calc(16 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-submenu-list-item {
        margin-left: calc(16 / var(--font-size)* 1024 / 1260 * 1rem);
        padding-left: calc(16 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-submenu-list-item:first-child {
        margin-left: 0;
        padding-left: 0;
    }
    .gheader-submenu-body i {
        width: calc(20 / var(--font-size)* 1024 / 1260 * 1rem);
        height: calc(20 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-submenu__label {
        margin-left: calc(4 / var(--font-size)* 1024 / 1260 * 1rem);
        font-size: calc(14 / var(--font-size)* 1024 / 1260 * 1rem);
    }
    .gheader-submenu__label:first-child {
        margin-left: 0;
    }
}
@media all and (min-width: 768px) and (max-width: 900px), print {
  .gheader__body{
    gap: calc(12 / var(--font-size)* 1rem);
  }
  .gheader-logo-img{
    width: calc(300 / var(--font-size)* 1rem);
    height: calc(24 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px) {
  .gheader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10000;
  }
  .gheader::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--white-color);
  }
  .gheader__in {
      position: relative;
      padding: 0 calc(16 / var(--font-size)* 1rem);
      max-width: calc(1440 / var(--font-size)* 1rem);
      margin: auto;
  }
  .gheader__body {
      display: flex;
      justify-content: flex-start;
      height: calc(50 / var(--font-size)* 1rem);
  }
  .gheader-logo{

  }
  .gheader-logo__in{
      display: flex;
      align-items: center;
      flex-shrink: 0;
      height: 100%;
  }
  .gheader-logo-img {
      display: block;
      width: calc(244 / var(--font-size)* 1rem);
      height: calc(19 / var(--font-size)* 1rem);
  }
  .gheader-logo-img__label {
      margin: 0;
  }
  .gheader-logo-img__label img {
      vertical-align: top;
  }
  .gheader-content {

  }
  .gheader-menu {

  }
  .gheader-menu-heading {

  }
  .gheader-menu-open {
      position: absolute;
      top: 50%;
      right: 0;
      width: calc(40 / var(--font-size)* 1rem);
      height: calc(40 / var(--font-size)* 1rem);
      margin-right: calc(10 / var(--font-size)* 1rem);
      padding: 0;
      transform: translate3d(0,-50%,0);
      cursor: pointer;
  }
  .gheader-menu-open__ico {
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(30 / var(--font-size)* 1rem);
      height: calc(2 / var(--font-size)* 1rem);
      transform: translate3d(-50%,-50%,0);
  }
  .gheader-menu-open__ico::before ,
  .gheader-menu-open__ico::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: calc(2 / var(--font-size)* 1rem);
      background: var(--deep-blue-500);
  }
  [aria-expanded="true"] .gheader-menu-open__ico {
      background: none;
  }
  [aria-expanded="true"] .gheader-menu-open__ico::before{
      top: 0;
      transform: rotate(-22.5deg);
      transition: top .1s ease,
      transform .1s ease .1s;
  }
  [aria-expanded="true"] .gheader-menu-open__ico::after {
      bottom: 0;
      transform: rotate(22.5deg);
      transition: top .1s ease,
      transform .1s ease .1s;
  }
  [aria-expanded="false"] .gheader-menu-open__ico {
      background: var(--deep-blue-500);
  }
  [aria-expanded="false"] .gheader-menu-open__ico::before{
      top: calc(-6 / var(--font-size)* 1rem);
      transition: top .1s ease .1s,
      transform .1s ease;
  }
  [aria-expanded="false"] .gheader-menu-open__ico::after {
      bottom: calc(-6 / var(--font-size)* 1rem);
      transition: bottom .1s ease .1s,
      transform .1s ease;
  }
  .gheader-menu-body {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      padding-top: calc(50 / var(--font-size)* 1rem);
      padding-bottom: calc(50 / var(--font-size)* 1rem);
      background: var(--white-color);
      z-index: -1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transform: translate3d(0,-100%,0);
      transition: transform .2s ease;
  }
  .is-opened-header-menu .gheader-menu-body {
      transform: translate3d(0,0,0);
  }
  .gheader-menu-body__in {

  }
  .gheader-nav {

  }
  .gheader-nav-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
  }
  .gheader-nav-list-item {
      width: calc(1 / 2 * 100% - calc(2 / 2 / var(--font-size)* 1rem));
      margin-left: calc(2 / var(--font-size)* 1rem);
  }
  .gheader-nav-list-item:nth-child(2n+1) {
      margin-left: 0;
  }
  .gheader-nav-list-item:nth-child(n+3) {
      margin-top: calc(2 / var(--font-size)* 1rem);
  }
  .gheader-nav-list-item > a {
      display: inline-block;
      vertical-align: top;
      width: 100%;
  }
  .gheader-nav-body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(90 / var(--font-size)* 1rem);
      padding-left: calc(21 / var(--font-size)* 1rem);
      padding-right: calc(12 / var(--font-size)* 1rem);
  }
  .gheader-nav-list-item--company .gheader-nav-body {
      background: var(--blue-color-500);
  }
  .gheader-nav-list-item--dealer .gheader-nav-body {
      background: var(--green-color-500);
  }
  .gheader-nav-list-item--manufacturer .gheader-nav-body {
      background: var(--purple-color-500);
  }
  .gheader-nav-list-item--industry .gheader-nav-body {
      background: var(--gray-color-500);
  }
  .gheader-nav-list-item--login .gheader-nav-body {
      background: var(--white-color);
      border: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-500);
  }
  .gheader-nav-list-item--login .gheader-nav__label{
      color: var(--black-color);
  }
  .gheader-nav-list-item--login .gheader-nav-body svg{
    fill: var(--black-color);
  }
  .gheader-nav__label {
      display: block;
      flex-grow: 1;
      font-size: calc(16 / var(--font-size)* 1rem);
      font-weight: bold;
      color: var(--white-color);
  }
  .gheader-nav-body i {
      flex-shrink: 0;
      display: block;
      width: calc(24 / var(--font-size)* 1rem);
      height: calc(24 / var(--font-size)* 1rem);
  }
  .gheader-nav-body svg {
      display: block;
      width: 100%;
      height: 100%;
      fill: var(--white-color);
  }
  .gheader-subnav {
      margin-top: calc(32 / var(--font-size)* 1rem);
      padding: 0 calc(46 / var(--font-size)* 1rem);
  }
  .gheader-subnav__in {

  }
  .gheader-subnav-list {

  }
  .gheader-subnav-list-item {
      border-bottom: 1px solid var(--gray-color-300);
  }
  .gheader-subnav-list-item > a {
      display: inline-block;
      vertical-align: top;
  }
  .gheader-subnav-list-item > a[disabled] {
      pointer-events: none;
  }
  .gheader-subnav-body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(60 / var(--font-size)* 1rem);
      padding-left: calc(16 / var(--font-size)* 1rem);
      padding-right: calc(16 / var(--font-size)* 1rem);
  }
  .gheader-subnav__label {
      display: block;
      text-align: center;
      font-size: calc(16 / var(--font-size)* 1rem);
      font-weight: bold;
      color: var(--deep-blue-500);
  }
  .gheader-subnav-list-item > a[disabled] .gheader-subnav__label {
      color: var(--gray-color-400);
  }
  .gheader-submenu {
      margin-top: calc(32 / var(--font-size)* 1rem);
      padding: 0 calc(46 / var(--font-size)* 1rem);
  }
  .gheader-submenu:first-child {
      margin-top: 0;
  }
  .gheader-submenu-list {

  }
  .gheader-submenu-list-item {
      margin-top: calc(18 / var(--font-size)* 1rem);
  }
  .gheader-submenu-list-item:first-child {
      margin-top: 0;
  }
  .gheader-submenu-list-item > a {
      display: inline-block;
      vertical-align: top;
  }
  .gheader-submenu-body {
      display: flex;
      justify-content: flex-start;
      align-items: center;
  }
  .gheader-submenu-body i {
      display: block;
      width: calc(20 / var(--font-size)* 1rem);
      height: calc(20 / var(--font-size)* 1rem);
  }
  .gheader-submenu-body svg {
      display: block;
      width: 100%;
      height: 100%;
      fill: var(--deep-blue-500);
  }
  .gheader-submenu-list-item--pr_tool .gheader-submenu-body svg{
    max-width: calc(16 / var(--font-size)* 1rem);
  }
  .gheader-submenu-list-item--infodesk .gheader-submenu-body svg{
    max-width: calc(20 / var(--font-size)* 1rem);
  }
  .gheader-submenu-list-item--pr_tool .gheader-submenu-body i{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gheader-submenu-list-item--infodesk .gheader-submenu-body i{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gheader-submenu__label {
      display: block;
      margin-left: calc(4 / var(--font-size)* 1rem);
      font-size: calc(14 / var(--font-size)* 1rem);
      font-weight: bold;
      color: var(--deep-blue-500);
  }
  .gheader-submenu__label:first-child {
      margin-left: 0;
  }
  .gheader-contact-menu {
      margin-top: calc(32 / var(--font-size)* 1rem);
      padding: 0 calc(46 / var(--font-size)* 1rem);
  }
  .gheader-contact-menu:first-child {
      margin-top: 0;
  }
  .gheader-contact-menu-list{

  }
  .gheader-contact-menu-list-item{
      margin-top: calc(16 / var(--font-size)* 1rem);
  }
  .gheader-contact-menu-list-item:first-child{
      margin-top: 0;
  }
  .gheader-contact-menu-list-txt__label{
      font-size: calc(12 / var(--font-size)* 1rem);
      line-height: 1.5;
  }
  .gheader-contact-menu-list-txt__label a{
      display: inline-block;
      vertical-align: text-top;
      color: var(--deep-blue-500);
  }
  .gheader-login{
    padding:0 calc(46 / var(--font-size)* 1rem);
    margin-top: calc(30 / var(--font-size)* 1rem);
  }
  .gheader-login-list-item__body{
    position: relative;
  }
  .gheader-login-list-item__body a::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border: calc(2 / var(--font-size)* 1rem) solid var(--primary-color-100);
  }
  .gheader-login-list-item__body a{
    padding: calc(16 / var(--font-size)* 1rem) calc(26 / var(--font-size)* 1rem);
    background: var(--white-color);
    z-index: 10;
    transition: all 0.2s;
    display: block;
  }
  .gheader-login-body{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gheader-login-body i{
    display: block;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
    margin-right: calc(4 / var(--font-size)* 1rem);
    transition: all 0.2s;
  }
  .gheader-login-body svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--primary-color-100);
  }
  .gheader-login .gheader-login-login__arrow{
    transition: transform 0.2s;
    transform: scaleY(1);
  }
  .gheader-login .is-opened-accordion .gheader-login-login__arrow{
    transform: scaleY(-1);
  }
  .gheader-login__label{
    display: block;
    font-size: calc(16 / var(--font-size)* 1rem);
    font-weight: bold;
    color: var(--primary-color-100);
    transition: all 0.2s;
  }
  .gheader-login-accordion{

  }
  .gheader-login-accordion-body{
    padding: calc(24 / var(--font-size)* 1rem) 0 0;
  }
  .gheader-login-accordion-list{
    display: flex;
    flex-direction: column;
    gap: calc(15 / var(--font-size)* 1rem);
  }
  .gheader-login-accordion-list-item{
  }
  .gheader-login-accordion-list-item--smb{
    --primary-color-100:var(--blue-color-500);
  }
  .gheader-login-accordion-list-item--dealer{
    --primary-color-100:var(--green-color-500);
  }
  .gheader-login-accordion-list-item--manufacturer{
    --primary-color-100:var(--purple-color-500);
  }
  .gheader-login-accordion-content-header{
    margin-bottom: calc(8 / var(--font-size)* 1rem);
  }
  .gheader-login-accordion-content-header-txt__label{
    display: block;
    font-size: calc(16 / var(--font-size)* 1rem);
    font-weight: bold;
    color: var(--primary-color-100);
    transition: all 0.2s;
  }
  .gheader-login-accordion-content-btn{
    position: relative;
  }
  .gheader-login-accordion-content-btn a::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border: calc(2 / var(--font-size)* 1rem) solid var(--primary-color-100);
  }
  .gheader-login-accordion-content-btn a{
    padding: calc(16 / var(--font-size)* 1rem) calc(26 / var(--font-size)* 1rem);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--white-color);
    z-index: 10;
    transition: all 0.2s;
  }
  .gheader-login-accordion-content-btn a i{
    display: block;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
    margin-right: calc(4 / var(--font-size)* 1rem);
    transition: all 0.2s;
  }
  .gheader-login-accordion-content-btn a svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--primary-color-100);
    transition: all 0.2s;
  }
  .gheader-login-accordion-content-btn__label{
    display: block;
    font-size: calc(16 / var(--font-size)* 1rem);
    font-weight: bold;
    color: var(--primary-color-100);
    transition: all 0.2s;
  }
  .gheader-login-accordion-list-note{
    margin-top: calc(16 / var(--font-size)* 1rem);
  }
  .gheader-login-accordion-list-txt{
    position: relative;
  }
  .gheader-login-accordion-list-txt__label::before{
    content: "※";
  }
  .gheader-login-accordion-list-txt__label{
    display: block;
    font-size: calc(12 / var(--font-size)* 1rem);
    font-weight: bold;
    color: var(--red-color-100);
    padding-left: 1.2em;
    text-indent: -1.2em;
  }
}
/* --------------------------------------------------------------------------
  FOOTER
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .gfooter {
      border-top: 1px solid var(--deep-blue-300);
  }
  .gfooter__in {
      max-width: calc(1160 / var(--font-size)* 1rem);
      margin: auto;
      padding: calc(30 / var(--font-size)* 1rem) calc(40 / var(--font-size)* 1rem) calc(32 / var(--font-size)* 1rem);
      position: relative;
      z-index: 1;
  }
  .gfooter-logo__in{
      display: flex;
      align-items: center;
  }
  .gfooter-txt {
      color: var(--white-color);
      text-align: center;
      font-size: calc(12 / var(--font-size)* 1rem);
      line-height: 1.8;
  }
  .gfooter-copy {
      color: var(--white-color);
      text-align: center;
      margin-top: calc(16 / var(--font-size)* 1rem);
      font-size: calc(10 / var(--font-size)* 1rem);
  }
  .gfooter-link{
      margin-bottom: calc(16 / var(--font-size)* 1rem);
  }
  .gfooter-list{
      display: flex;
      justify-content: center;
  }
  .gfooter-list__item{
      font-size: calc(12 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px) {
  .gfooter {
      border-top: 1px solid var(--deep-blue-300);
  }
  .gfooter__in {
      max-width: calc(1160 / var(--font-size)* 1rem);
      margin: auto;
      padding: calc(32 / var(--font-size)* 1rem) calc(20 / var(--font-size)* 1rem) calc(40 / var(--font-size)* 1rem);
      position: relative;
      z-index: 1;
  }
  .gfooter-logo__in{
      display: flex;
      align-items: center;
  }
  .gfooter-txt {
      color: var(--white-color);
      text-align: center;
      font-size: calc(12 / var(--font-size)* 1rem);
      line-height: 1.8;
  }
  .gfooter-copy {
      color: var(--white-color);
      text-align: center;
      margin-top: calc(16 / var(--font-size)* 1rem);
      font-size: calc(10 / var(--font-size)* 1rem);
  }
  .gfooter-link{
      margin-bottom: calc(16 / var(--font-size)* 1rem);
  }
  .gfooter-list{
      display: flex;
      justify-content: center;
  }
  .gfooter-list__item{
      font-size: calc(12 / var(--font-size)* 1rem);
  }
}

/* --------------------------------------------------------------------------
  PAGE TOP
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .page-top{
      position: relative;
      z-index: 10;
  }
  .page-top__in{
      position: absolute;
      bottom: 0;
      right: 0;
      margin-right: calc(32 / var(--font-size)* 1rem);
      margin-bottom: calc(37 / var(--font-size)* 1rem);
  }
  .page-top--no-contact .page-top__in{
      margin-bottom: calc(90 / var(--font-size)* 1rem);
  }
  .page-top--no-contact .page-top-link{
      display: inline-block;
      vertical-align: top;
      background: url(../../assets/img/page_top_deep-blue.svg) no-repeat center top;
      background-size: contain;
  }
  .page-top--no-contact .page-top-link img{
      opacity: 0;
  }
}
@media all and (max-width: 767px) {
  .page-top{
      position: relative;
      z-index: 10;
  }
  .page-top__in{
      position: absolute;
      bottom: 0;
      right: 0;
      margin-right: calc(22 / var(--font-size)* 1rem);
      margin-bottom: calc(32 / var(--font-size)* 1rem);
  }
}

/* ==========================================================================
  UTILL
========================================================================== */

/* 画像置換 */

.u-ir {
    display: block;
    overflow: hidden;
    font: 0/0 a;
    white-space: nowrap;
    text-indent: 100%;
  }
  
  /* PC、タブレットで画像置換 */
  
  @media all and (min-width: 768px), print {
    .u-ir--tab-pc {
      display: block;
      overflow: hidden;
      font: 0/0 a;
      white-space: nowrap;
      text-indent: 100%;
    }
  }
  
  /* --------------------------------------------------------------------------
    非表示
  -------------------------------------------------------------------------- */
  
  /* PCで非表示 */
  
  @media all and (min-width: 1025px), print {
    .u-hide-pc {
      display: none;
    }
  }
  
  /* PC、タブレットで非表示 */
  
  @media all and (min-width: 768px), print {
    .u-hide-tab-pc {
      display: none;
    }
  }

  /* タブレット、SPで非表示 */
  
    @media all and (max-width: 1024px) {
      .u-hide-sp-tab {
        display: none;
      }
    }
  
  /* タブレットのみ非表示 */
  
  @media all and (min-width: 768px) and (max-width: 1024px), print {
    .u-hide-tab {
      display: none;
    }
  }
  
  /* SPで非表示 */
  
  @media all and (max-width: 767px) {
    .u-hide-sp {
      display: none;
    }
  }
  
  /* --------------------------------------------------------------------------
    行揃え
  -------------------------------------------------------------------------- */
  
  .u-center {
    text-align: center;
  }
  
  /* TAB,PCのみテキストセンター */
  
  @media all and (min-width: 768px), print {
    .u-center-tab-pc {
      text-align: center;
    }
  }
  
  /* SPのみテキストセンター */
  
  @media all and (max-width: 767px) {
    .u-center-sp {
      text-align: center;
    }
  }
  
  .u-left {
    text-align: left;
  }
  
  /* TAB,PCのみテキストセンター */
  
  @media all and (min-width: 768px), print {
    .u-left-tab-pc {
      text-align: left;
    }
  }
  
  /* SPのみテキストセンター */
  
  @media all and (max-width: 767px) {
    .u-left-sp {
      text-align: left;
    }
  }
  
  .u-justify {
    text-align: justify;
    text-justify: inter-ideograph;
  }
  
  .u-combine {
    text-combine-upright: all;
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
  }
  
  /* --------------------------------------------------------------------------
    強調
  -------------------------------------------------------------------------- */
  
  .u-strong {
    font-weight: 700;
  }
  
  .u-bold {
    font-weight: 700;
  }
  
  .u-underline {
    text-decoration: underline;
  }
  
  /* --------------------------------------------------------------------------
    背景
  -------------------------------------------------------------------------- */
  
  /* primary */
  .u-bg-primary-100 {
    background-color: var(--primary-color-100);
  }
  .u-bg-primary-10 {
    background-color: var(--primary-color-10);
  }
  .u-bg-gray-100{
    background-color: var(--gray-color-100);
  }
  .u-bg-blue-500{
    background-color: var(--blue-color-500);
  }
  .u-bg-purple-500{
    background-color: var(--purple-color-500);
  }
  
  
  /* --------------------------------------------------------------------------
    テキストカラー
  -------------------------------------------------------------------------- */
  
  /* primary */
  .u-color-primary-100 {
    color: var(--primary-color-100);
  }
  .u-color-primary-10 {
    color: var(--primary-color-10);
  }
  
  .u-color-white {
    color: var(--white-color);
  }
  
  .u-color-red-100 {
    color: var(--red-color-100);
  }
  
  
  /* ==========================================================================
    LAYOUT
  ========================================================================== */
  
  /* --------------------------------------------------------------------------
    MAIN
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .l-main-container {
    }
    .l-main-container__in {

    }
    .l-main-container__footer {
      margin-top: calc(60 / var(--font-size) * 1rem);
    }
  }
  
  @media all and (max-width: 767px) {
    .l-main-container {
      padding-top: calc(50 / var(--font-size) * 1rem);
    }
    .l-main-container__in {

    }
    .l-main-container__footer {
      margin-top: calc(60 / var(--font-size) * 1rem);
    }
  }
  
  /* --------------------------------------------------------------------------
    SECTION
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .l-sec {
    }
    .l-sec__in {
      max-width: calc(1160 / var(--font-size) * 1rem);
      margin: auto;
      padding: 0 calc(40 / var(--font-size) * 1rem);
      position: relative;
      z-index: 1;
    }
    .l-sec__body {
      padding: calc(88 / var(--font-size) * 1rem) 0 calc(96 / var(--font-size) * 1rem);
    }
    .l-sec__header {
      margin-bottom: calc(38 / var(--font-size) * 1rem);
    }
    .l-sec__content {
    }
    .l-sec__lead {
    }
    .l-sec__container + .l-sec__container,
    .l-sec__container + .u-buffer + .l-sec__container{
        margin-top: calc(80 / var(--font-size) * 1rem);
    }
    .l-sec__footer{
        margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .l-sec__footer:first-child{
        margin-top: 0;
    }
  }
  
  @media all and (max-width: 767px) {
    .l-sec {
    }
    .l-sec__in {
      max-width: calc(1160 / var(--font-size) * 1rem);
      margin: auto;
      padding: 0 calc(20 / var(--font-size) * 1rem);
      position: relative;
      z-index: 1;
    }
    .l-sec__body {
      padding: calc(40 / var(--font-size) * 1rem) 0 calc(64 / var(--font-size) * 1rem);
    }
    .l-sec__header {
      margin-bottom: calc(30 / var(--font-size)* 1rem);
    }
    .l-sec__content {
    }
    .l-sec__lead {
      text-align: left;
    }
    .l-sec__container + .l-sec__container,
    .l-sec__container + .u-buffer + .l-sec__container{
        margin-top: calc(32 / var(--font-size) * 1rem);
    }
    .l-sec__footer{
        margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .l-sec__footer:first-child{
        margin-top: 0;
    }
  }
  
  /* --------------------------------------------------------------------------
    BTN
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .l-btn-list {
      --col: 1;
      --gap-x: 30;
      --gap-y: 38;
      display: flex;
      gap: calc(var(--gap-y) / var(--font-size) * 1rem) calc(var(--gap-x) / var(--font-size) * 1rem);
      flex-wrap: wrap;
      justify-content: center;
    }
    .l-btn-list-item {
      width: calc((100% - var(--gap-x) / var(--font-size) * 1rem * (var(--col) - 1)) / var(--col));
    }
    .l-btn-list-note{
        margin-top: calc(14 / var(--font-size) * 1rem);
        font-size: calc(12 / var(--font-size) * 1rem);
    }
    .l-btn-list-note--center{
        text-align: center;
    }
    .l-btn-list-item:has(.l-btn-list-thum){
      display: flex;
      flex-direction: column;
    }
    .l-btn-list-thum{
      display: flex;
      align-items: center;
      flex: auto;
      margin-bottom: calc(46 / var(--font-size) * 1rem);
      gap: calc((var(--gap-x) / 2) / var(--font-size) * 1rem);
      max-height: calc(350 / var(--font-size) * 1rem);
      justify-content: center;
    }
    .l-btn-list-thum-img{
      max-height: 100%;
      height: 100%;
    }
    .l-btn-list-thum-img img{
      width: auto;
      max-width: 100%;
      max-height: 100%;
      height: 100%;
    }
  
    /* size */
    .l-btn-list-item--l {
      width: calc(524 / var(--font-size) * 1rem);
    }
    .l-btn-list-item--ml{
      width: calc(390 / var(--font-size) * 1rem);
    }
    .l-btn-list-item--m {
      width: calc(272 / var(--font-size) * 1rem);
    }
    .l-btn-list-item--s {
      width: calc(240 / var(--font-size) * 1rem);
    }
    .l-btn-list-item--xs {
      width: calc(216 / var(--font-size) * 1rem);
    }
  
    /* postion */
    .l-btn-list--left {
      justify-content: left;
    }
  
    /* col */
    .l-btn-list--2col {
      --col: 2;
    }
    .l-btn-list--3col {
      --col: 3;
    }
    .l-btn-list--4col {
      --col: 4;
    }
    .l-btn-list--5col {
      --col: 5;
    }
    .l-btn-list--auto .l-btn-list-item {
      width: auto;
    }
  }
  
  @media all and (max-width: 767px) {
    .l-btn-list {
      --col: 1;
      --gap-x: 30;
      --gap-y: 20;
      display: flex;
      gap: calc(var(--gap-y) / var(--font-size) * 1rem) calc(var(--gap-x) / var(--font-size) * 1rem);
      flex-wrap: wrap;
      justify-content: center;
    }
    .l-btn-list-item {
      width: calc((100% - var(--gap-x) / var(--font-size) * 1rem * (var(--col) - 1)) / var(--col));
    }
    .l-btn-list-note{
        margin-top: calc(14 / var(--font-size) * 1rem);
        font-size: calc(12 / var(--font-size) * 1rem);
    }
    .l-btn-list-note--center{
        text-align: center;
    }
    .l-btn-list:has(.l-btn-list-thum){
      --gap-y: 32;
    }
    .l-btn-list-thum{
      display: flex;
      flex-direction: row;
      margin-bottom: calc(16 / var(--font-size) * 1rem);
      gap: calc((var(--gap-x) / 2) / var(--font-size) * 1rem);
    }
  
    /* size */
    .l-btn-list-item--l {
      width: calc(524 / var(--font-size) * 1rem);
    }
    .l-btn-list-item--m {
      width: calc(288 / var(--font-size) * 1rem);
    }
    .l-btn-list-item--s {
      width: calc(240 / var(--font-size) * 1rem);
    }
    .l-btn-list-item--xs {
      width: calc(216 / var(--font-size) * 1rem);
    }
  
    /* postion */
    .l-btn-list--left {
      justify-content: left;
    }
  
    /* col */
    .l-btn-list--2col {
      --col: 2;
    }
    .l-btn-list--3col {
      --col: 3;
    }
    .l-btn-list--4col {
      --col: 4;
    }
    .l-btn-list--5col {
      --col: 5;
    }
    .l-btn-list--auto .l-btn-list-item {
      width: auto;
    }
  }
  
  /* --------------------------------------------------------------------------
    PAGE
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .l-page-container {
    }
    .l-page-container__in {
      /* padding-bottom: calc(120 / var(--font-size) * 1rem); */
    }
    .l-page-container__footer {
      margin-top: calc(60 / var(--font-size) * 1rem);
    }
  }
  
  @media all and (max-width: 767px) {
    .l-page-container {
    }
    .l-page-container__in {
      /* padding-bottom: calc(120 / var(--font-size) * 1rem); */
    }
    .l-page-container__footer {
      margin-top: calc(60 / var(--font-size) * 1rem);
    }
  }
  
  /* sec */
  
  @media all and (min-width: 768px), print {
    .l-page-sec {
    }
    .l-page-sec + .l-page-sec {
      margin-top: calc(96 / var(--font-size) * 1rem);
    }
    .l-page-sec__in {
      max-width: calc(1000 / var(--font-size) * 1rem);
      margin: auto;
      padding: 0 calc(20 / var(--font-size) * 1rem);
    }
    .l-page-sec__header {
      margin-bottom: calc(36 / var(--font-size) * 1rem);
    }
    .l-page-sec__content {
    }
    .l-page-sec__footer {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
  }
  
  @media all and (max-width: 767px) {
    .l-page-sec {
    }
    .l-page-sec + .l-page-sec {
      margin-top: calc(96 / var(--font-size) * 1rem);
    }
    .l-page-sec__in {
      max-width: calc(1000 / var(--font-size) * 1rem);
      margin: auto;
      padding: 0 calc(20 / var(--font-size) * 1rem);
    }
    .l-page-sec__header {
      margin-bottom: calc(36 / var(--font-size) * 1rem);
    }
    .l-page-sec__content {
    }
    .l-page-sec__footer {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
  }
  
  /* block */
  
  @media all and (min-width: 768px), print {
    .l-page-block {
    }
    .l-page-block + .l-page-block {
      margin-top: calc(60 / var(--font-size) * 1rem);
    }
    .l-page-block__in {
    }
    .l-page-block__header {
      margin-bottom: calc(20 / var(--font-size) * 1rem);
    }
    .l-page-block__content {
    }
  }
  
  @media all and (max-width: 767px) {
    .l-page-block {
    }
    .l-page-block + .l-page-block {
      margin-top: calc(60 / var(--font-size) * 1rem);
    }
    .l-page-block__in {
    }
    .l-page-block__header {
      margin-bottom: calc(20 / var(--font-size) * 1rem);
    }
    .l-page-block__content {
    }
  }
  
  /* ==========================================================================
    HEADER COMPONENT
  ========================================================================== */
  
  /* --------------------------------------------------------------------------
    下層
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .page-hero {
        height: calc(235 / var(--font-size)* 1rem);
        background-image: url(../../assets/img/hero_bg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color: var(--white-color);
        overflow: hidden;
    }
    [data-page="dealer"] .page-hero,
    [data-page="dealer-effect"] .page-hero {
        background-image: url(../../assets/img/hero_bg_dealer.png);
    }
    [data-page="manufacturer"] .page-hero {
        background-image: url(../../assets/img/hero_bg_manufacturer.png);
    }
    [data-page="industry"] .page-hero {
        background-image: url(../../assets/img/hero_bg_industry.png);
    }
    [data-page="smb"] .page-hero {
      background-image: url(../../assets/img/hero_bg_smb.png);
  }
    .page-hero__in {
        position: relative;
        padding: 0 calc(40 / var(--font-size)* 1rem);
        max-width: calc(1160 / var(--font-size)* 1rem);
        margin: auto;
        height: 100%;
    }
    .page-hero__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .page-hero__header {

    }
    .page-hero__header-title {
        display: block;
        text-align: center;
    }
    .page-hero__header-title__main {
        display: inline-block;
        vertical-align: top;
        font-size: calc(40 / var(--font-size)* 1rem);
        font-weight: bold;
        letter-spacing: 0.08em;
    }
    .page-breadcrumb {

    }
    .page-breadcrumb-body {
        padding-top: calc(12 / var(--font-size)* 1.6 * 1rem);
        padding-bottom: calc(12 / var(--font-size)* 1.6 * 1rem);
    }
    .page-breadcrumb-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .page-breadcrumb-list-item {
        position: relative;
        margin-left: calc(8 / var(--font-size)* 1rem);
        padding-left: calc(24 / var(--font-size)* 1rem);
        line-height: 1.6;
        font-size: calc(12 / var(--font-size)* 1rem);
        color: var(--gray-color-500);
    }
    .page-breadcrumb-list-item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(16 / var(--font-size)* 1rem);
        height: calc(16 / var(--font-size)* 1rem);
        background: url(../../assets/img/ico_arw.svg) no-repeat center center;
        background-size: contain;
        transform: translate3d(0, -50%, 0);
    }
    .page-breadcrumb-list-item:first-child {
        margin-left: 0;
        padding-left: 0;
    }
    .page-breadcrumb-list-item:first-child::before {
        content: none;
    }
    .page-breadcrumb-list-item > a {
        display: inline-block;
        vertical-align: top;
    }
    .page-breadcrumb-list-item > a:hover {
        text-decoration: underline;
    }
  }
  
  @media all and (max-width: 767px) {
    .page-hero {
        height: calc(170 / var(--font-size)* 1rem);
        background-image: url(../../assets/img/hero_bg_sp.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color: var(--white-color);
        overflow: hidden;
    }
    [data-page="dealer"] .page-hero,
    [data-page="dealer-effect"] .page-hero {
        background-image: url(../../assets/img/hero_bg_dealer_sp.png);
    }
    [data-page="manufacturer"] .page-hero {
        background-image: url(../../assets/img/hero_bg_manufacturer_sp.png);
    }
    [data-page="industry"] .page-hero {
        background-image: url(../../assets/img/hero_bg_industry_sp.png);
    }
    [data-page="smb"] .page-hero {
      background-image: url(../../assets/img/hero_bg_smb_sp.png);
  }
    .page-hero__in {
        position: relative;
        padding: 0 calc(20 / var(--font-size)* 1rem);
        max-width: calc(1160 / var(--font-size)* 1rem);
        margin: auto;
        height: 100%;
    }
    .page-hero__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .page-hero__header {

    }
    .page-hero__header-title {
        display: block;
        text-align: center;
    }
    .page-hero__header-title__main {
        display: inline-block;
        vertical-align: top;
        font-size: calc(26 / var(--font-size)* 1rem);
        font-weight: bold;
        letter-spacing: 0.08em;
    }
    .page-breadcrumb {

    }
    .page-breadcrumb-body {
        padding-top: calc(11 / var(--font-size)* 1.6 * 1rem);
        padding-bottom: calc(11 / var(--font-size)* 1.6 * 1rem);
    }
    .page-breadcrumb-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .page-breadcrumb-list-item {
        position: relative;
        margin-left: calc(8 / var(--font-size)* 1rem);
        padding-left: calc(24 / var(--font-size)* 1rem);
        line-height: 1.6;
        font-size: calc(11 / var(--font-size)* 1rem);
        color: var(--gray-color-500);
    }
    .page-breadcrumb-list-item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(16 / var(--font-size)* 1rem);
        height: calc(16 / var(--font-size)* 1rem);
        background: url(../../assets/img/ico_arw.svg) no-repeat center center;
        background-size: contain;
        transform: translate3d(0, -50%, 0);
    }
    .page-breadcrumb-list-item:first-child {
        margin-left: 0;
        padding-left: 0;
    }
    .page-breadcrumb-list-item:first-child::before {
        content: none;
    }
    .page-breadcrumb-list-item > a {
        display: inline-block;
        vertical-align: top;
    }
    .page-breadcrumb-list-item > a:hover {
        text-decoration: underline;
    }
  }
  
  /* --------------------------------------------------------------------------
    HEADER COMPONENT
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-header-title {
      --header-font-size: 24;
      --header-color: var(--black-color);
  
      text-align: center;
    }
    .c-header-title__label {
      color: var(--header-color);
      font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
      font-weight: bold;
    }
  
    .c-header-title--primary {
      --header-color: var(--primary-color-100);
    }
    .c-header-title--l{
      --header-font-size: 28;
    }
    .c-header-title--xl{
      --header-font-size: 34;
    }
  }
  @media all and (max-width: 767px) {
    .c-header-title {
      --header-font-size: 20;
      --header-color: var(--black-color);
  
      line-height: 1.5;
      text-align: start;
    }
    .c-header-title__label {
      color: var(--header-color);
      font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
      font-weight: bold;
    }
  
    .c-header-title--primary {
      --header-color: var(--primary-color-100);
    }

    .c-header-title--l{
      --header-font-size: 24;
    }
    .c-header-title--xl{
      --header-font-size: 28;
    }
  }
  
  /* under */
  @media all and (min-width: 768px), print {
    .c-under-header {
      --header-font-size: 34;
      --header-color: var(--primary-color-100);
  
      text-align: center;
      position: relative;
      padding-bottom: calc(42 / var(--font-size) * 1rem);
    }
    .c-under-header::before {
      content: "";
      display: block;
      width: calc(32 / var(--font-size) * 1rem);
      height: calc(2/ var(--font-size) * 1rem);
      background-color: var(--deep-blue-300);
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .c-under-header__label {
      font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
      font-weight: 700;
      color: var(--header-color);
      line-height: 1.4;
    }
    .c-under-header__label small {
      font-size: calc(20 / 30 * 1em);
    }
  
    /* color */
    .u-bg-primary-100 .c-under-header,
    .c-under-header--white {
      --header-color: var(--white-color);
    }
  }
  @media all and (max-width: 767px) {
    .c-under-header {
      --header-font-size: 28;
      --header-color: var(--primary-color-100);
  
      text-align: center;
      position: relative;
      padding-bottom: calc(26 / var(--font-size) * 1rem);
    }
    .c-under-header::before {
      content: "";
      display: block;
      width: calc(32 / var(--font-size) * 1rem);
      height: calc(2/ var(--font-size) * 1rem);
      background-color: var(--deep-blue-300);
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .c-under-header__label {
      font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
      font-weight: 700;
      color: var(--header-color);
      line-height: 1.4;
    }
    .c-under-header__label small {
      font-size: calc(20 / 30 * 1em);
    }
  
    /* color */
    .u-bg-primary-100 .c-under-header,
    .c-under-header--white {
      --header-color: var(--white-color);
    }
  }

  /* box */
  @media all and (min-width: 768px), print {
    .c-box-header {
      --header-font-size: 32;
      --header-color: var(--primary-color-100);
      --header-bg-color: var(--white-color);
  
      text-align: center;
      position: relative;
      padding-top: calc(9 / var(--font-size) * 1rem);
      padding-bottom: calc(12 / var(--font-size) * 1rem);
      background-color: var(--header-bg-color);
      border-radius:calc(8 / var(--font-size) * 1rem);
    }
    .c-box-header--reverse{
      --header-color: var(--white-color);
      --header-bg-color: var(--primary-color-100);
    }
    .c-box-header__label {
      font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
      font-weight: 700;
      color: var(--header-color);
      line-height: 1.4;
      letter-spacing: 0.02em;
    }
    .c-box-header__label small {
      font-size: calc(20 / 30 * 1em);
    }
  
    /* color */
    .u-bg-primary-100 .c-box-header,
    .c-box-header--white {
      --header-color: var(--white-color);
    }
  }
  @media all and (max-width: 767px) {
    .c-box-header {
      --header-font-size: 24;
      --header-color: var(--primary-color-100);
      --header-bg-color: var(--white-color);
  
      text-align: center;
      position: relative;
      padding-top: calc(11 / var(--font-size) * 1rem);
      padding-bottom: calc(12 / var(--font-size) * 1rem);
      background-color: var(--header-bg-color);
      border-radius:calc(8 / var(--font-size) * 1rem);
    }
    .c-box-header--reverse{
      --header-color: var(--white-color);
      --header-bg-color: var(--primary-color-100);
    }
    .c-box-header__label {
      font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
      font-weight: 700;
      color: var(--header-color);
      line-height: 1.4;
      letter-spacing: 0.02em;
    }
    .c-box-header__label small {
      font-size: calc(20 / 30 * 1em);
    }
  
    /* color */
    .u-bg-primary-100 .c-box-header,
    .c-box-header--white {
      --header-color: var(--white-color);
    }
  }
  
  /* disc */
  @media all and (min-width: 768px), print {
    .c-disc-header {
      --header-font-size: 26;
      --header-ratio: var(--header-font-size) / 26;
      --header-deco-color: var(--primary-color-100);
  
    }
    .c-disc-header__in {
      position: relative;
      padding-left: calc(30 * var(--header-ratio) / var(--font-size) * 1rem);
      display: flex;
    }
    .c-disc-header__in::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: calc(20 * var(--header-ratio) / var(--font-size) * 1rem);
      height: calc(20 * var(--header-ratio) / var(--font-size) * 1rem);
      -webkit-mask: url("../../assets/img/common/title_deco_disc.svg");
      mask: url("../../assets/img/common/title_deco_disc.svg");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      background-color: var(--header-deco-color);
      margin-top: calc(11 * var(--header-ratio) / var(--font-size) * 1rem);
    }
    .c-disc-header__in::after {
      background: radial-gradient(circle farthest-side, var(--primary-color-100), var(--primary-color-100) 30%, transparent 30%, transparent);
      background-size: calc(6 / var(--font-size) * 1rem) calc(6 / var(--font-size) * 1rem);
      content: '';
      display: inline-block;
      height: calc(6 / var(--font-size) * 1rem);
      width: 100%;
      margin-left: calc(10 / var(--font-size) * 1rem);
      margin-top: calc(17 / var(--font-size) * 1rem);
    }
    .c-disc-header__body {
      flex-shrink: 0;
    }
    .c-disc-header__label {
      font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
      font-weight: 700;
      line-height: 1.5;
    }
  }
  @media all and (max-width: 767px) {
    .c-disc-header {
      --header-font-size: 26;
      --header-ratio: var(--header-font-size) / 26;
      --header-deco-color: var(--primary-color-100);
  
    }
    .c-disc-header__in {
      position: relative;
      padding-left: calc(30 * var(--header-ratio) / var(--font-size) * 1rem);
      display: flex;
    }
    .c-disc-header__in::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: calc(20 * var(--header-ratio) / var(--font-size) * 1rem);
      height: calc(20 * var(--header-ratio) / var(--font-size) * 1rem);
      -webkit-mask: url("../../assets/img/common/title_deco_disc.svg");
      mask: url("../../assets/img/common/title_deco_disc.svg");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      background-color: var(--header-deco-color);
      margin-top: calc(11 * var(--header-ratio) / var(--font-size) * 1rem);
    }
    .c-disc-header__in::after {
      background: radial-gradient(circle farthest-side, var(--primary-color-100), var(--primary-color-100) 30%, transparent 30%, transparent);
      background-size: calc(6 / var(--font-size) * 1rem) calc(6 / var(--font-size) * 1rem);
      content: '';
      display: inline-block;
      height: calc(6 / var(--font-size) * 1rem);
      width: 100%;
      margin-left: calc(10 / var(--font-size) * 1rem);
      margin-top: calc(17 / var(--font-size) * 1rem);
    }
    .c-disc-header__body {
      flex-shrink: 0;
    }
    .c-disc-header__label {
      font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
      font-weight: 700;
      line-height: 1.5;
    }
  }

    /* --------------------------------------------------------------------------
    attention-box
  -------------------------------------------------------------------------- */

  @media all and (min-width: 768px), print {
    .c-attention-box{
      border: calc(1 / var(--font-size) * 1rem) solid var(--red-color-100);
    }
    .c-attention-box__inner{
      padding: calc(8 / var(--font-size) * 1rem) calc(25 / var(--font-size) * 1rem);
    }
    .c-attention-box .c-note-txt{
      gap: calc(12 / var(--font-size) * 1rem);
    }
    .c-attention-box .c-note-txt::before{
      line-height: 1.8;
    }
    .c-attention-box .c-note-txt__label{
      line-height: 1.8;
    }
  }

  @media all and (max-width: 767px), print {
    .c-attention-box{
      border: calc(1 / var(--font-size) * 1rem) solid var(--red-color-100);
    }
    .c-attention-box__inner{
      padding: calc(14 / var(--font-size) * 1rem) calc(14 / var(--font-size) * 1rem);
    }
    .c-attention-box .c-note-txt::before{
      line-height: 1.8;
    }
    .c-attention-box .c-note-txt__label{
      line-height: 1.8;
    }
  }
  
  /* ==========================================================================
    TEXT COMPONENT
  ========================================================================== */
  
  /* --------------------------------------------------------------------------
    テキスト
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-txt {
      --txt-font-size: 16;
      --txt-line-height: 1.8;
      font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
      line-height: var(--txt-line-height);
    }
    .c-txt sub,
    .c-txt sub {
      font-size: 0.5em;
    }
  
    .c-txt sub{
      top: -0.5em;
    }
  
    .c-txt sub {
      bottom: -0.1em;
    }
  
    /* L */
    .c-txt--xxxl {
      --txt-font-size: 28;
    }
    .c-txt--xxl {
      --txt-font-size: 24;
    }
    .c-txt--xl {
      --txt-font-size: 20;
    }
    .c-txt--l {
      --txt-font-size: 18;
    }
  
    /* M */
    .c-txt--m {
      --txt-font-size: 16;
    }
  
    /* S */
    .c-txt--s {
      --txt-font-size: 14;
    }
    .c-txt--xs {
      --txt-font-size: 12;
    }
    .c-txt--xxs {
      --txt-font-size: 11;
    }
    .c-txt--xxxs {
      --txt-font-size: 10;
    }
  }
  
  @media all and (max-width: 767px) {
    .c-txt {
      --txt-font-size: 16;
      --txt-line-height: 1.8;
      font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
      line-height: var(--txt-line-height);
    }
    .c-txt sub,
    .c-txt sub {
      font-size: 0.5em;
    }
  
    .c-txt sub{
      top: -0.5em;
    }
  
    .c-txt sub {
      bottom: -0.1em;
    }
  
    /* L */
    .c-txt--xxxl {
      --txt-font-size: 28;
    }
    .c-txt--xxl {
      --txt-font-size: 24;
    }
    .c-txt--xl {
      --txt-font-size: 20;
    }
    .c-txt--l {
      --txt-font-size: 18;
    }
  
    /* M */
    .c-txt--m {
      --txt-font-size: 16;
    }
  
    /* S */
    .c-txt--s {
      --txt-font-size: 14;
    }
    .c-txt--xs {
      --txt-font-size: 12;
    }
    .c-txt--xxs {
      --txt-font-size: 11;
    }
    .c-txt--xxxs {
      --txt-font-size: 10;
    }
  }
  
  /* --------------------------------------------------------------------------
    リスト テキスト
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-list {
      --list-font-size: 16;
      --list-line-height: 1.6;
    }
    .c-list--desc {
      --list-desc-color: var(--primary-color-100);
    }
    .c-list--gap {
      --list-gap-x: 24;
      --list-gap-y: 24;
  
      display: flex;
      gap: calc(var(--list-gap-y) / var(--font-size) * 1rem) calc(var(--list-gap-x) / var(--font-size) * 1rem);
      flex-wrap: wrap;
    }
    .c-list--num{
      counter-reset: number 0; 
    }
    .c-list-item {
      position: relative;
      display: flex;
      font-size: calc(var(--list-font-size) / var(--font-size) * 1rem);
      line-height: var(--list-line-height);
    }
    .c-list-item::before {
      content: "・";
    }
    .c-list--desc .c-list-item::before {
      content: "";
      display: block;
      width: calc(var(--list-font-size) / var(--font-size) * 1rem);
      height: calc(var(--list-font-size) / var(--font-size) * 1rem);
      border-radius: 9999px;
      background-color: var(--list-desc-color);
      margin-top: calc((var(--list-font-size) * var(--list-line-height) - var(--list-font-size)) / 2 / var(--font-size) * 1rem);
      margin-right: calc(6 * var(--list-font-size) / var(--font-size) / var(--font-size) * 1rem);
      flex-shrink: 0;
    }
    .c-list--note .c-list-item::before {
      content: "※";
    }
    .c-list--num .c-list-item::before {
      counter-increment: number 1; 
      content: counter(number) "."; 
      line-height: 1.8;
    }
    .c-list--indent>.c-list-item::before{
      content: none;
    }
    .c-list-item__in {
    }
    .c-list-item__in > a {
      color: var(--primary-color-100);
      text-decoration: underline;
    }
    .c-list-item__in > a:hover {
      text-decoration: none;
    }
    .c-list--indent .c-list-item__in{
      display: flex;
    }
  
    /* L */
    .c-list--l {
      --list-font-size: 18;
    }
    /* m */
    .c-list--m {
      --list-font-size: 16;
    }
    /* s */
    .c-list--s {
      --list-font-size: 14;
    }
    /* xs */
    .c-list--xs {
      --list-font-size: 12;
    }
    
    /* xxs */
    .c-list--xs {
      --list-font-size: 11;
    }

    /* xxxs */
    .c-list--xxxs {
      --list-font-size: 10;
    }
  
  }
  
  @media all and (max-width: 767px) {
    .c-list {
      --list-font-size: 16;
      --list-line-height: 1.6;
    }
    .c-list--desc {
      --list-desc-color: var(--primary-color-100);
    }
    .c-list--gap {
      --list-gap-x: 24;
      --list-gap-y: 24;
  
      display: flex;
      gap: calc(var(--list-gap-y) / var(--font-size) * 1rem) calc(var(--list-gap-x) / var(--font-size) * 1rem);
      flex-wrap: wrap;
    }
    .c-list--num{
      counter-reset: number 0; 
    }
    .c-list-item {
      position: relative;
      display: flex;
      font-size: calc(var(--list-font-size) / var(--font-size) * 1rem);
      line-height: var(--list-line-height);
    }
    .c-list-item::before {
      content: "・";
    }
    .c-list--desc .c-list-item::before {
      content: "";
      display: block;
      width: calc(var(--list-font-size) / var(--font-size) * 1rem);
      height: calc(var(--list-font-size) / var(--font-size) * 1rem);
      border-radius: 9999px;
      background-color: var(--list-desc-color);
      margin-top: calc((var(--list-font-size) * var(--list-line-height) - var(--list-font-size)) / 2 / var(--font-size) * 1rem);
      margin-right: calc(6 * var(--list-font-size) / var(--font-size) / var(--font-size) * 1rem);
      flex-shrink: 0;
    }
    .c-list--note .c-list-item::before {
      content: "※";
    }
    .c-list--num .c-list-item::before {
      counter-increment: number 1; 
      content: counter(number) "."; 
    }
    .c-list--indent>.c-list-item::before{
      content: none;
    }
    .c-list-item__in {
    }
    .c-list-item__in > a {
      color: var(--primary-color-100);
      text-decoration: underline;
    }
    .c-list-item__in > a:hover {
      text-decoration: none;
    }
    .c-list--indent .c-list-item__in{
      display: flex;
    }
  
    /* L */
    .c-list--l {
      --list-font-size: 18;
    }
    /* m */
    .c-list--m {
      --list-font-size: 16;
    }
    /* s */
    .c-list--s {
      --list-font-size: 14;
    }
    /* xs */
    .c-list--xs {
      --list-font-size: 12;
    }
    
    /* xxs */
    .c-list--xs {
      --list-font-size: 11;
    }

    /* xxxs */
    .c-list--xxxs {
      --list-font-size: 10;
    }
  
  }
  
  /* --------------------------------------------------------------------------
    番号付きリスト
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-num-list {
      --num-list-font-size: 16;
      --num-list-color: var(--primary-color-100);
    }
    .c-num-list__dl {
      position: relative;
      padding-left: 2rem;
    }
    .c-num-list__dt {
      position: absolute;
      top: 0;
      left: 0;
      width: 1.95em;
      color: var(--white-color);
      font-weight: 700;
      font-size: 0.75rem;
      line-height: 1.95;
      text-align: center;
      background-color:  var(--num-list-color);
      border-radius: 9999px;
    }
    .c-num-list__dd {
      line-height: 1.5;
      font-size: calc(var(--num-list-font-size) / var(--font-size) * 1rem);
    }
  }
  
  @media all and (max-width: 767px) {
    .c-num-list {
      --num-list-font-size: 16;
      --num-list-color: var(--primary-color-100);
    }
    .c-num-list__dl {
      position: relative;
      padding-left: 2rem;
    }
    .c-num-list__dt {
      position: absolute;
      top: 0;
      left: 0;
      width: 1.95em;
      color: var(--white-color);
      font-weight: 700;
      font-size: 0.75rem;
      line-height: 1.95;
      text-align: center;
      background-color:  var(--num-list-color);
      border-radius: 9999px;
    }
    .c-num-list__dd {
      line-height: 1.5;
      font-size: calc(var(--num-list-font-size) / var(--font-size) * 1rem);
    }
  }
  
  /* --------------------------------------------------------------------------
    注釈 テキスト
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-note {
      --note-txt-font-size: 16;
      --note-position: start;
      --note-line-height: 1.6;
    }
    .c-note-txt {
      font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1rem);
      display: flex;
      justify-content: var(--note-position);
      line-height: var(--note-line-height);
    }
    .c-note-txt::before {
      content: "※";
    }
    .c-note-txt__label {
    }
  
    /* CENTER */
    .c-note--center {
      --note-position: center;
    }

    /* L */
    .c-note--l {
      --note-txt-font-size: 18;
    }
  
    /* M */
    .c-note--m {
      --note-txt-font-size: 16;
    }
    /* S */
    .c-note--s {
      --note-txt-font-size: 14;
    }
    /* XS */
    .c-note--xs {
      --note-txt-font-size: 12;
    }
    /* XXS */
    .c-note--xxs {
      --note-txt-font-size: 11;
    }
    /* XXXS */
    .c-note--xxxs {
      --note-txt-font-size: 10;
    }
  
  }
  
  @media all and (max-width: 767px) {
    .c-note {
      --note-txt-font-size: 16;
      --note-position: start;
      --note-line-height: 1.6;
    }
    .c-note-txt {
      font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1rem);
      display: flex;
      justify-content: var(--note-position);
      line-height: var(--note-line-height);
    }
    .c-note-txt::before {
      content: "※";
    }
    .c-note-txt__label {
    }
  
    /* CENTER */
    .c-note--center {
      --note-position: center;
    }

    /* L */
    .c-note--l {
      --note-txt-font-size: 18;
    }
  
    /* M */
    .c-note--m {
      --note-txt-font-size: 16;
    }
    /* S */
    .c-note--s {
      --note-txt-font-size: 14;
    }
    /* XS */
    .c-note--xs {
      --note-txt-font-size: 12;
    }
    /* XXS */
    .c-note--xxs {
      --note-txt-font-size: 11;
    }
    /* XXXS */
    .c-note--xxxs {
      --note-txt-font-size: 10;
    }
  
  }
  
  /* ==========================================================================
    BUTTON COMPONENT
  ========================================================================== */
  
  /* --------------------------------------------------------------------------
    ボタン
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-btn {
      --btn-bg-color: var(--primary-color-100);
      --btn-border-color: var(--primary-color-100);
      --btn-txt-color: var(--white-color);
      --btn-arrow-color: var(--white-color);
      --btn-txt-font-size: 16;
      --btn-min-height: 48;
      --btn-px: 32;
      --btn-ico-size: 24;
      --btn-radius: 0;
  
      display: block;
      width: 100%;
    }
    .c-btn.c-btn-blue-500 {
      --btn-bg-color: var(--blue-color-500);
      --btn-border-color: var(--blue-color-500);
    }
    .c-btn.c-btn-green-500 {
      --btn-bg-color: var(--green-color-500);
      --btn-border-color: var(--green-color-500);
    }
    .c-btn.c-btn-purple-500 {
      --btn-bg-color: var(--purple-color-500);
      --btn-border-color: var(--purple-color-500);
    }
    .c-btn.c-btn-gray-500 {
      --btn-bg-color: var(--gray-color-500);
      --btn-border-color: var(--gray-color-500);
    }
    .c-btn.c-btn-deep-blue-500 {
      --btn-bg-color: var(--deep-blue-500);
      --btn-border-color: var(--deep-blue-500);
    }
    .c-btn.c-btn--ico{
      --btn-deco-bg-color: var(--gray-color-300);
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--black-color);
      --btn-border-color: none;
      --btn-min-height: 108;
      --btn-px: 40;
      --btn-ico-size: 30;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10)
    }
    a.c-btn:hover,
    a .c-btn:hover,
    button.c-btn:hover {
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--btn-border-color);
      --btn-arrow-color: var(--btn-border-color);
    }
    .c-btn.c-btn--ico:hover{
      --btn-deco-bg-color: var(--white-color);
      --btn-bg-color: var(--gray-color-300);
    }
    .c-btn__in {
      background-color: var(--btn-bg-color);
      border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
      border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
      height: 100%;
      transition: all 0.2s;
    }
    .c-btn--ico .c-btn__in{
      position: relative;
    }
    .c-btn--ico .c-btn__in::before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      background-color: var(--btn-deco-bg-color);
      width: calc(var(--btn-px) / 5 / var(--font-size) * 1rem);
      height: 100%;
    }
    .c-btn__body {
      position: relative;
      min-height: calc(var(--btn-min-height) / var(--font-size) * 1rem);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: calc(17.5 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem);
    }
    .c-btn--ico .c-btn__body{
      padding-right: calc((var(--btn-ico-size) + var(--btn-px) * 1.5) / var(--font-size)* 1rem);
    }
    .c-btn--ico .c-btn__body:has(.c-btn-new){
      padding-right: calc((var(--btn-ico-size) + var(--btn-px) * 1.5) / var(--font-size)* 1rem + 3em);
    }
    .c-btn--ico-mark .c-btn__body{
      padding-right: calc((var(--btn-ico-size) + var(--btn-px) * 1.5) / var(--font-size)* 1rem);
    }
    .c-btn-txt {
      color: var(--btn-txt-color);
      text-align: center;
      width: 100%;
      transition: all 0.2s;
    }
    .c-btn-new{
      position: absolute;
      right: 0;
      font-weight: 700;
      color: var(--red-color-100);
      margin-right: calc((var(--btn-ico-size) + var(--btn-px)* 1.5) / var(--font-size)* 1rem);
    }
    .c-btn--ico .c-btn-txt{
      text-align: start;
      font-weight: bold;
    }
    .c-btn-txt__label {
      font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
      font-weight: 700;
      line-height: 1.5;
    }
    .c-btn-txt__label > span {
      display: block;
      font-size: 75%;
    }
    .c-btn-arrow {
      width: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
      height: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
      margin-top: calc(8 / var(--font-size) * 1rem);
      margin-top: 0;
      margin-left: calc(8 / var(--font-size) * 1rem);
    }
    .c-btn-arrow__label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .c-btn-arrow__label .c-svg {
      width: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
      fill: var(--btn-arrow-color);
      transition: all 0.2s;
    }

    .c-btn-ico{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: calc((var(--btn-ico-size) + var(--btn-px) * 2) / var(--font-size)* 1rem);
      height: calc(var(--btn-min-height) / var(--font-size)* 1rem);
    }
    .c-btn-ico__label{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .c-btn-ico__label .c-svg{
      width: calc(var(--btn-ico-size) / var(--font-size)* 1rem);
      transition: all 0.2s;
    }
    .c-btn-ico--pdf .c-svg{
      fill: #ea4832;
    }
    .c-btn-ico--xls .c-svg{
      fill: #00A875;
    }
    .c-btn-ico--doc .c-svg{
      fill: #158FE7;
    }
    .c-btn-ico--ppt .c-svg{
      fill: #e76115;
    }
    .c-btn--ico-mark .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--stroke.c-btn--ico-mark .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--ico-mark:hover .c-btn-ico--pdf .c-svg{
      fill: #ea4832;
    }
    .c-btn--ico-mark:hover .c-btn-ico--xls .c-svg{
      fill: #00A875;
    }
    .c-btn--ico-mark:hover .c-btn-ico--doc .c-svg{
      fill: #158FE7;
    }
    .c-btn--ico-mark:hover .c-btn-ico--ppt .c-svg{
      fill: #e76115;
    }
    .c-btn--stroke.c-btn--ico-mark:hover .c-btn-ico--pdf .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--stroke.c-btn--ico-mark:hover .c-btn-ico--xls .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--stroke.c-btn--ico-mark:hover .c-btn-ico--doc .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--stroke.c-btn--ico-mark:hover .c-btn-ico--ppt .c-svg{
      fill: var(--btn-txt-color);
    }
  
    /* square */
    .c-btn--square {
      --btn-radius: 0;
    }
  
    /* fontsize */
    .c-btn--xl {
      --btn-txt-font-size: 20;
      --btn-min-height: 99;
    }
    .c-btn--l {
      --btn-txt-font-size: 18;
      --btn-min-height: 88;
      --btn-px: 78;
    }
    .c-btn--m {
      --btn-txt-font-size: 16;
    }
    .c-btn--s {
      --btn-txt-font-size: 14;
      --btn-min-height: 36;
      --btn-ico-size: 9;
      --btn-px: 30;
    }
    .c-btn--xs {
      --btn-txt-font-size: 12;
      --btn-min-height: 32;
    }
    .c-btn--xs .c-btn-arrow {
      display: none;
    }
  
    /* color */
    .c-btn--stroke {
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--btn-border-color);
      --btn-arrow-color: var(--btn-border-color);
    }
    a.c-btn--stroke:hover,
    a .c-btn--stroke:hover,
    button.c-btn--stroke:hover  {
      --btn-bg-color: var(--btn-border-color);
      --btn-txt-color: var(--white-color);
      --btn-arrow-color: var(--white-color);
    }
  
    /* back */
    .c-btn--back .c-btn-arrow {
      left: 0;
      right: unset;
      transform: translateY(-50%) rotate(180deg);
    }
  
    /* disable */
    .c-btn--disable {
      --btn-bg-color: var(--gray-color-300);
      --btn-border-color: var(--gray-color-300);
      pointer-events: none;
    }
  }
  
  @media all and (max-width: 767px) {
    .c-btn {
      --btn-bg-color: var(--primary-color-100);
      --btn-border-color: var(--primary-color-100);
      --btn-txt-color: var(--white-color);
      --btn-arrow-color: var(--white-color);
      --btn-txt-font-size: 16;
      --btn-min-height: 48;
      --btn-px: 32;
      --btn-ico-size: 24;
      --btn-radius: 0;
  
      display: block;
      width: 100%;
    }
    .c-btn.c-btn-blue-500 {
      --btn-bg-color: var(--blue-color-500);
      --btn-border-color: var(--blue-color-500);
    }
    .c-btn.c-btn-green-500 {
      --btn-bg-color: var(--green-color-500);
      --btn-border-color: var(--green-color-500);
    }
    .c-btn.c-btn-purple-500 {
      --btn-bg-color: var(--purple-color-500);
      --btn-border-color: var(--purple-color-500);
    }
    .c-btn.c-btn-gray-500 {
      --btn-bg-color: var(--gray-color-500);
      --btn-border-color: var(--gray-color-500);
    }
    .c-btn.c-btn-deep-blue-500 {
      --btn-bg-color: var(--deep-blue-500);
      --btn-border-color: var(--deep-blue-500);
    }
    .c-btn.c-btn--ico{
      --btn-deco-bg-color: var(--gray-color-300);
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--black-color);
      --btn-border-color: none;
      --btn-min-height: 96;
      --btn-px: 24;
      --btn-ico-size: 30;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10)
    }
    a.c-btn:hover,
    a .c-btn:hover,
    button.c-btn:hover {
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--btn-border-color);
      --btn-arrow-color: var(--btn-border-color);
    }
    .c-btn.c-btn--ico:hover{
      --btn-deco-bg-color: var(--white-color);
      --btn-bg-color: var(--gray-color-300);
    }
    .c-btn__in {
      background-color: var(--btn-bg-color);
      border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
      border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
      height: 100%;
      transition: all 0.2s;
    }
    .c-btn--ico .c-btn__in{
      position: relative;
    }
    .c-btn--ico .c-btn__in::before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      background-color: var(--btn-deco-bg-color);
      width: calc(var(--btn-px) / 3 / var(--font-size) * 1rem);
      height: 100%;
    }
    .c-btn__body {
      position: relative;
      min-height: calc(var(--btn-min-height) / var(--font-size) * 1rem);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: calc(6 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem);
    }
    .c-btn--ico .c-btn__body{
      padding-right: calc((var(--btn-ico-size) + var(--btn-px)* 2) / var(--font-size)* 1rem);
    }
    .c-btn--ico .c-btn__body:has(.c-btn-new){
      padding-right: calc((var(--btn-ico-size) + var(--btn-px) * 1.5) / var(--font-size)* 1rem + 3em);
    }
    .c-btn--ico-mark .c-btn__body{
      padding-right: calc((var(--btn-ico-size) + var(--btn-px) * 1.5) / var(--font-size)* 1rem);
    }
    .c-btn--ico-mark .c-btn-ico{
      width: calc((var(--btn-ico-size) + var(--btn-px)* 1.5) / var(--font-size)* 1rem);
    }
    .c-btn-txt {
      color: var(--btn-txt-color);
      text-align: center;
      width: 100%;
      transition: all 0.2s;
    }
    .c-btn-new{
      position: absolute;
      right: 0;
      font-weight: 700;
      color: var(--red-color-100);
      margin-right: calc((var(--btn-ico-size) + var(--btn-px)* 1.5) / var(--font-size)* 1rem);
    }
    .c-btn--ico .c-btn-txt{
      text-align: start;
      font-weight: bold;
    }
    .c-btn-txt__label {
      font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
      font-weight: 700;
      line-height: 1.5;
    }
    .c-btn-txt__label > span {
      display: block;
      font-size: 75%;
    }
    .c-btn-arrow {
      width: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
      height: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
      margin-top: calc(7 / var(--font-size) * 1rem);
      margin-top: 0;
      margin-left: calc(7 / var(--font-size) * 1rem);
    }
    .c-btn-arrow__label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .c-btn-arrow__label .c-svg {
      width: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
      fill: var(--btn-arrow-color);
      transition: all 0.2s;
    }

    .c-btn-ico{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: calc((var(--btn-ico-size) + var(--btn-px) * 2) / var(--font-size)* 1rem);
      height: calc(var(--btn-min-height) / var(--font-size)* 1rem);
    }
    .c-btn-ico__label{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .c-btn-ico__label .c-svg{
      width: calc(var(--btn-ico-size) / var(--font-size)* 1rem);
      transition: all 0.2s;
    }
    .c-btn-ico--pdf .c-svg{
      fill: #ea4832;
    }
    .c-btn-ico--xls .c-svg{
      fill: #00A875;
    }
    .c-btn-ico--doc .c-svg{
      fill: #158FE7;
    }
    .c-btn-ico--ppt .c-svg{
      fill: #e76115;
    }
    .c-btn--ico-mark .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--stroke.c-btn--ico-mark .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--ico-mark:hover .c-btn-ico--pdf .c-svg{
      fill: #ea4832;
    }
    .c-btn--ico-mark:hover .c-btn-ico--xls .c-svg{
      fill: #00A875;
    }
    .c-btn--ico-mark:hover .c-btn-ico--doc .c-svg{
      fill: #158FE7;
    }
    .c-btn--ico-mark:hover .c-btn-ico--ppt .c-svg{
      fill: #e76115;
    }
    .c-btn--stroke.c-btn--ico-mark:hover .c-btn-ico--pdf .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--stroke.c-btn--ico-mark:hover .c-btn-ico--xls .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--stroke.c-btn--ico-mark:hover .c-btn-ico--doc .c-svg{
      fill: var(--btn-txt-color);
    }
    .c-btn--stroke.c-btn--ico-mark:hover .c-btn-ico--ppt .c-svg{
      fill: var(--btn-txt-color);
    }
  
    /* square */
    .c-btn--square {
      --btn-radius: 0;
    }
  
    /* fontsize */
    .c-btn--xl {
      --btn-min-height: 103;
      --btn-txt-font-size: 20;
    }
    .c-btn--l {
      --btn-txt-font-size: 16;
      --btn-min-height: 88;
      --btn-px: 78;
    }
    .c-btn--m {
      --btn-txt-font-size: 16;
    }
    .c-btn--s {
      --btn-txt-font-size: 14;
      --btn-min-height: 36;
      --btn-ico-size: 9;
      --btn-px: 30;
    }
    .c-btn--xs {
      --btn-txt-font-size: 12;
      --btn-min-height: 32;
    }
    .c-btn--xs .c-btn-arrow {
      display: none;
    }
  
    /* color */
    .c-btn--stroke {
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--btn-border-color);
      --btn-arrow-color: var(--btn-border-color);
    }
    a.c-btn--stroke:hover,
    a .c-btn--stroke:hover,
    button.c-btn--stroke:hover  {
      --btn-bg-color: var(--btn-border-color);
      --btn-txt-color: var(--white-color);
      --btn-arrow-color: var(--white-color);
    }
  
    /* back */
    .c-btn--back .c-btn-arrow {
      left: 0;
      right: unset;
      transform: translateY(-50%) rotate(180deg);
    }
  
    /* disable */
    .c-btn--disable {
      --btn-bg-color: var(--gray-color-300);
      --btn-border-color: var(--gray-color-300);
      pointer-events: none;
    }
  }
  
  /* --------------------------------------------------------------------------
    テキストボタン
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-link-btn {
      --link-arrow-color: var(--primary-color-100);
      --link-font-size: 14;
      --link-note-font-size: 12;
      --link-rate: var(--link-font-size) / 14;
      --link-txt-color: var(--blue-color-100);
    }
    a.c-link-btn:hover,
    a .c-link-btn:hover {
      --link-txt-color: var(--link-arrow-color);
    }
    .c-link-btn__in {
      display: flex;
    }
    .c-link-btn-ico {
      width: calc(26 * var(--link-rate) / var(--font-size) * 1rem);
      height: calc(26 * var(--link-rate) / var(--font-size) * 1rem);
      border: calc(1 / var(--font-size) * 1rem) solid var(--link-arrow-color);
      border-radius: 50%;
      margin-right: calc(8 / var(--font-size) * 1rem);
      flex-shrink: 0;
    }
    .c-link-btn-ico__label {
      display: flex;
      justify-content: center;
      align-self: center;
      height: 100%;
    }
    .c-link-btn-ico__label .c-svg {
      width: calc(9 / var(--font-size) * 1rem);
    }
    .c-link-btn-ico__label svg {
      fill: var(--link-arrow-color);
    }
    .c-link-btn-txt {
    }
    .c-link-btn-txt__label {
      font-size: calc(var(--link-font-size) / var(--font-size) * 1rem);
      line-height: 1.8;
      color: var(--link-txt-color);
      transition: all 0.2s;
      display: inline-block;
    }
    .c-link-btn-txt__label-note{
      font-size: calc(var(--link-note-font-size) / var(--font-size) * 1rem);
    }
    .c-link-btn-txt__ico {
      display: inline-block;
      width: calc(24 * var(--link-rate) / var(--font-size) * 1rem);
      vertical-align: text-top;
    }
    .c-link-btn-txt__ico svg {
      fill: var(--link-arrow-color);
    }
  
    /* fontsize */
    .c-link-btn--l {
      --link-font-size: 16;
      --link-note-font-size: 14;
    }
    .c-link-btn--m {
      --link-font-size: 14;
      --link-note-font-size: 12;
    }
    .c-link-btn--s {
      --link-font-size: 12;
      --link-note-font-size: 10;
    }
  
    .c-link-btn--ico .c-link-btn__in {
      align-items: center;
    }
    .c-link-btn--ico .c-link-btn-ico {
      width: calc(16 * var(--link-rate) / var(--font-size) * 1rem);
      height: calc(18 * var(--link-rate) / var(--font-size) * 1rem);
      margin-right: calc(10 / var(--font-size) * 1rem);
      border: none;
      flex-shrink: 0;
    }
  }
  
  @media all and (max-width: 767px) {
    .c-link-btn {
      --link-arrow-color: var(--primary-color-100);
      --link-font-size: 14;
      --link-note-font-size: 12;
      --link-rate: var(--link-font-size) / 14;
      --link-txt-color: var(--blue-color-100);
    }
    a.c-link-btn:hover,
    a .c-link-btn:hover {
      --link-txt-color: var(--link-arrow-color);
    }
    .c-link-btn__in {
      display: flex;
    }
    .c-link-btn-ico {
      width: calc(26 * var(--link-rate) / var(--font-size) * 1rem);
      height: calc(26 * var(--link-rate) / var(--font-size) * 1rem);
      border: calc(1 / var(--font-size) * 1rem) solid var(--link-arrow-color);
      border-radius: 50%;
      margin-right: calc(8 / var(--font-size) * 1rem);
      flex-shrink: 0;
    }
    .c-link-btn-ico__label {
      display: flex;
      justify-content: center;
      align-self: center;
      height: 100%;
    }
    .c-link-btn-ico__label .c-svg {
      width: calc(9 / var(--font-size) * 1rem);
    }
    .c-link-btn-ico__label svg {
      fill: var(--link-arrow-color);
    }
    .c-link-btn-txt {
    }
    .c-link-btn-txt__label {
      font-size: calc(var(--link-font-size) / var(--font-size) * 1rem);
      line-height: 1.8;
      color: var(--link-txt-color);
      transition: all 0.2s;
      display: inline-block;
    }
    .c-link-btn-txt__label-note{
      font-size: calc(var(--link-note-font-size) / var(--font-size) * 1rem);
    }
    .c-link-btn-txt__ico {
      display: inline-block;
      width: calc(24 * var(--link-rate) / var(--font-size) * 1rem);
      vertical-align: text-top;
    }
    .c-link-btn-txt__ico svg {
      fill: var(--link-arrow-color);
    }
  
    /* fontsize */
    .c-link-btn--l {
      --link-font-size: 16;
      --link-note-font-size: 14;
    }
    .c-link-btn--m {
      --link-font-size: 14;
      --link-note-font-size: 12;
    }
    .c-link-btn--s {
      --link-font-size: 12;
      --link-note-font-size: 10;
    }
  
    .c-link-btn--ico .c-link-btn__in {
      align-items: center;
    }
    .c-link-btn--ico .c-link-btn-ico {
      width: calc(16 * var(--link-rate) / var(--font-size) * 1rem);
      height: calc(18 * var(--link-rate) / var(--font-size) * 1rem);
      margin-right: calc(10 / var(--font-size) * 1rem);
      border: none;
      flex-shrink: 0;
    }
  }
  

    /* --------------------------------------------------------------------------
    テキストリンク
  -------------------------------------------------------------------------- */
  @media all and (min-width: 768px), print {
    .c-link-txt{
      position: relative;
      color: var(--blue-color-500);
      padding-right: calc(20 / var(--font-size) * 1rem);
    }
    .c-link-txt::after{
      content: "";
      position: absolute;
      bottom: 0;
      margin-bottom: 0.1em;
      width: calc(20 / var(--font-size) * 1rem);
      height: calc(20 / var(--font-size) * 1rem);
      background-image: url(../../assets/img/ico_link.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: calc(14.5 / var(--font-size) * 1rem);
    }
    .c-link-txt--s::after{
      width: calc(16 / var(--font-size) * 1rem);
      height: calc(16 / var(--font-size) * 1rem);
      background-size: calc(12 / var(--font-size) * 1rem);
    }
    .c-link-txt:hover{
      text-decoration: underline;
    }
    .c-link-txt--underline{
      color: var(--primary-color-100);
      text-decoration: underline;
      padding-right: 0;
    }
    .c-link-txt--underline-window{
      text-decoration: underline;
    }
    .c-link-txt--underline-window:hover{
      text-decoration: none;
    }
    .c-link-txt--underline::after{
      content: none;
    }
    .c-link-txt--underline:hover{
      text-decoration: none;
    }
    .c-link-txt--white{
      color: #fff;
    }
    .c-link-txt--white::after{
      background-image: url(../../assets/img/ico_link_white.svg);
    }
    .c-link-txt--blue-color-500{
      color: var(--blue-color-500);
    }
    .c-link-txt--primary-color-100{
      color: var(--primary-color-100);
    }
    .c-link-txt--red-color-100{
      color: var(--red-color-100);
    }
    .c-link-txt--primary-color-100::after{
      background-image: url(../../assets/img/ico_link_deep-blue-500.svg);
    }
    .c-link-txt--pdf::after{
      background-image: url(../../assets/img/ico_pdf.svg);
    }
  }
  @media all and (max-width: 767px) {
    .c-link-txt{
      position: relative;
      color: var(--blue-color-500);
      padding-right: calc(20 / var(--font-size) * 1rem);
    }
    .c-link-txt::after{
      content: "";
      position: absolute;
      bottom: 0;
      margin-bottom: 0.1em;
      width: calc(20 / var(--font-size) * 1rem);
      height: calc(20 / var(--font-size) * 1rem);
      background-image: url(../../assets/img/ico_link.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: calc(14.5 / var(--font-size) * 1rem);
    }
    .c-link-txt--s::after{
      width: calc(16 / var(--font-size) * 1rem);
      height: calc(16 / var(--font-size) * 1rem);
      background-size: calc(12 / var(--font-size) * 1rem);
    }
    .c-link-txt:hover{
      text-decoration: underline;
    }
    .c-link-txt--underline{
      color: var(--primary-color-100);
      text-decoration: underline;
      padding-right: 0;
    }
    .c-link-txt--underline-window{
      text-decoration: underline;
    }
    .c-link-txt--underline-window:hover{
      text-decoration: none;
    }
    .c-link-txt--underline::after{
      content: none;
    }
    .c-link-txt--underline:hover{
      text-decoration: none;
    }
    .c-link-txt--white{
      color: #fff;
    }
    .c-link-txt--white::after{
      background-image: url(../../assets/img/ico_link_white.svg);
    }
    .c-link-txt--blue-color-500{
      color: var(--blue-color-500);
    }
    .c-link-txt--primary-color-100{
      color: var(--primary-color-100);
    }
    .c-link-txt--red-color-100{
      color: var(--red-color-100);
    }
    .c-link-txt--primary-color-100::after{
      background-image: url(../../assets/img/ico_link_deep-blue-500.svg);
    }
    .c-link-txt--pdf::after{
      background-image: url(../../assets/img/ico_pdf.svg);
    }
  }
  
  /* --------------------------------------------------------------------------
    アイコンボタン
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-ico-btn {
      --btn-bg-color: var(--primary-color-100);
      --btn-border-color: var(--primary-color-100);
      --btn-txt-color: var(--white-color);
      --btn-arrow-color: var(--white-color);
      --btn-txt-font-size: 16;
      --btn-min-height: 180;
      --btn-px: 60;
      --btn-ico-size: 10;
      --btn-radius: 10;
      --btn-rate: var(--btn-txt-font-size) / 16;
  
      display: block;
      width: 100%;
    }
    .c-ico-btn:hover {
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--btn-border-color);
      --btn-arrow-color: var(--btn-border-color);
    }
    .c-ico-btn__in {
      background-color: var(--btn-bg-color);
      border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
      border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
      height: 100%;
      transition: all 0.2s;
    }
    .c-ico-btn__body {
      position: relative;
      min-height: calc(var(--btn-min-height) * var(--btn-rate) / var(--font-size) * 1rem);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: calc(20 * var(--btn-rate) / var(--font-size) * 1rem) calc(var(--btn-px) * var(--btn-rate) / var(--font-size) * 1rem);
      flex-direction: column;
    }
    .c-ico-btn-img {
      width: calc(64 * var(--btn-rate) / var(--font-size) * 1rem);
      height: calc(64 * var(--btn-rate) / var(--font-size) * 1rem);
      flex-shrink: 0;
      margin-bottom: calc(16 * var(--btn-rate) / var(--font-size) * 1rem);
    }
    .c-ico-btn-img__label {
    }
    .c-ico-btn-txt {
      color: var(--btn-txt-color);
      text-align: center;
      width: 100%;
      transition: all 0.2s;
    }
    .c-ico-btn-txt__sub-label {
      font-size: calc(15 * var(--btn-rate) / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1.5;
      display: block;
      margin-bottom: calc(4 * var(--btn-rate) / var(--font-size) * 1rem);
    }
    .c-ico-btn-txt__label {
      font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1.5;
    }
    .c-ico-btn-arrow {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: calc(var(--btn-px) / var(--font-size)* 1rem);
      height: calc(var(--btn-min-height) / var(--font-size)* 1rem);
    }
    .c-ico-btn-arrow__label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .c-ico-btn-arrow__label .c-svg {
      width: calc(var(--btn-ico-size) * var(--btn-rate) / var(--font-size) * 1rem);
      fill: var(--btn-arrow-color);
      transition: all 0.2s;
    }
    .c-ico-btn-img__label .c-svg {
      fill: var(--btn-arrow-color);
      transition: all 0.2s;
  }
  
    /* size */
    .c-ico-btn--l {
      --btn-txt-font-size: 18;
    }
    .c-ico-btn--m {
      --btn-txt-font-size: 16;
    }
    .c-ico-btn--s {
      --btn-txt-font-size: 14;
    }
    .c-ico-btn--xs {
      --btn-txt-font-size: 12;
    }
    .c-ico-btn--xxs {
      --btn-txt-font-size: 10;
    }
  }
  
  @media all and (max-width: 767px) {
    .c-ico-btn {
      --btn-bg-color: var(--primary-color-100);
      --btn-border-color: var(--primary-color-100);
      --btn-txt-color: var(--white-color);
      --btn-arrow-color: var(--white-color);
      --btn-txt-font-size: 16;
      --btn-min-height: 180;
      --btn-px: 60;
      --btn-ico-size: 10;
      --btn-radius: 10;
      --btn-rate: var(--btn-txt-font-size) / 16;
  
      display: block;
      width: 100%;
    }
    .c-ico-btn:hover {
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--btn-border-color);
      --btn-arrow-color: var(--btn-border-color);
    }
    .c-ico-btn__in {
      background-color: var(--btn-bg-color);
      border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
      border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
      height: 100%;
      transition: all 0.2s;
    }
    .c-ico-btn__body {
      position: relative;
      min-height: calc(var(--btn-min-height) * var(--btn-rate) / var(--font-size) * 1rem);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: calc(20 * var(--btn-rate) / var(--font-size) * 1rem) calc(var(--btn-px) * var(--btn-rate) / var(--font-size) * 1rem);
      flex-direction: column;
    }
    .c-ico-btn-img {
      width: calc(64 * var(--btn-rate) / var(--font-size) * 1rem);
      height: calc(64 * var(--btn-rate) / var(--font-size) * 1rem);
      flex-shrink: 0;
      margin-bottom: calc(16 * var(--btn-rate) / var(--font-size) * 1rem);
    }
    .c-ico-btn-img__label {
    }
    .c-ico-btn-txt {
      color: var(--btn-txt-color);
      text-align: center;
      width: 100%;
      transition: all 0.2s;
    }
    .c-ico-btn-txt__sub-label {
      font-size: calc(15 * var(--btn-rate) / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1.5;
      display: block;
      margin-bottom: calc(4 * var(--btn-rate) / var(--font-size) * 1rem);
    }
    .c-ico-btn-txt__label {
      font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1.5;
    }
    .c-ico-btn-arrow {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: calc(var(--btn-px) / var(--font-size)* 1rem);
      height: calc(var(--btn-min-height) / var(--font-size)* 1rem);
    }
    .c-ico-btn-arrow__label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .c-ico-btn-arrow__label .c-svg {
      width: calc(var(--btn-ico-size) * var(--btn-rate) / var(--font-size) * 1rem);
      fill: var(--btn-arrow-color);
      transition: all 0.2s;
    }
    .c-ico-btn-img__label .c-svg {
      fill: var(--btn-arrow-color);
      transition: all 0.2s;
  }
  
    /* size */
    .c-ico-btn--l {
      --btn-txt-font-size: 18;
    }
    .c-ico-btn--m {
      --btn-txt-font-size: 16;
    }
    .c-ico-btn--s {
      --btn-txt-font-size: 14;
    }
    .c-ico-btn--xs {
      --btn-txt-font-size: 12;
    }
    .c-ico-btn--xxs {
      --btn-txt-font-size: 10;
    }
  }
  
  /* ==========================================================================
    TABLE COMPONENT
  ========================================================================== */
  
  @media all and (min-width: 768px), print {
    .c-table {
    }
    .c-table__in {
    }
    .c-table__header {
      margin-bottom: calc(10 / var(--font-size) * 1rem);
    }
    .c-table__body {
    }
    .c-table-chart {
      border-radius: calc(16 / var(--font-size) * 1rem);
      overflow: hidden;
      border: var(--secondary-color-200) calc(2 / var(--font-size) * 1rem) solid;
      border-collapse: separate;
      border-spacing: 0;
      background-color: var(--white-color);
      width: 100%;
    }
    .c-table-chart__thead {
    }
    .c-table-chart__thead + .c-table-chart__tbody {
      border-top: var(--secondary-color-200) calc(2 / var(--font-size) * 1rem) solid;
    }
    .c-table-chart__thead .c-table-chart__tr {
      text-align: left;
    }
    .c-table-chart__tr {
    }
    .c-table-chart__tr + .c-table-chart__tr .c-table-chart-cell {
      border-top: var(--secondary-color-200) calc(2 / var(--font-size) * 1rem) solid;
    }
    .c-table-chart-cell {
      padding: calc(16 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
    }
    .c-table-chart-cell + .c-table-chart-cell {
      border-left: var(--secondary-color-200) calc(2 / var(--font-size) * 1rem) solid;
    }
    .c-table__footer {
      margin-top: calc(10 / var(--font-size) * 1rem);
    }
  
    .table-cell-size {
    }
    .table-cell-size--l {
      width: calc(300 / var(--font-size) * 1rem);
    }
    .table-cell-size--m {
      width: calc(200 / var(--font-size) * 1rem);
    }
    .table-cell-size--s {
      width: calc(100 / var(--font-size) * 1rem);
    }
  
  }
  
  @media all and (max-width: 767px) {
    .c-table {
    }
    .c-table__in {
    }
    .c-table__header {
      margin-bottom: calc(10 / var(--font-size) * 1rem);
    }
    .c-table__body {
    }
    .c-table-chart {
      border-radius: calc(16 / var(--font-size) * 1rem);
      overflow: hidden;
      border: var(--secondary-color-200) calc(2 / var(--font-size) * 1rem) solid;
      border-collapse: separate;
      border-spacing: 0;
      background-color: var(--white-color);
      width: 100%;
    }
    .c-table-chart__thead {
    }
    .c-table-chart__thead + .c-table-chart__tbody {
      border-top: var(--secondary-color-200) calc(2 / var(--font-size) * 1rem) solid;
    }
    .c-table-chart__thead .c-table-chart__tr {
      text-align: left;
    }
    .c-table-chart__tr {
    }
    .c-table-chart__tr + .c-table-chart__tr .c-table-chart-cell {
      border-top: var(--secondary-color-200) calc(2 / var(--font-size) * 1rem) solid;
    }
    .c-table-chart-cell {
      padding: calc(16 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
    }
    .c-table-chart-cell + .c-table-chart-cell {
      border-left: var(--secondary-color-200) calc(2 / var(--font-size) * 1rem) solid;
    }
    .c-table__footer {
      margin-top: calc(10 / var(--font-size) * 1rem);
    }
  
    .table-cell-size {
    }
    .table-cell-size--l {
      width: calc(300 / var(--font-size) * 1rem);
    }
    .table-cell-size--m {
      width: calc(200 / var(--font-size) * 1rem);
    }
    .table-cell-size--s {
      width: calc(100 / var(--font-size) * 1rem);
    }
  
  }
  
  /* ==========================================================================
    IMG SVG COMPONENT
  ========================================================================== */
  
  /* --------------------------------------------------------------------------
    img
  -------------------------------------------------------------------------- */
  
  @media all and (min-width: 768px), print {
    .c-img {
    }
    .c-img__label {
      width: 100%;
    }
    .c-img__caption {
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
  }
  
  @media all and (max-width: 767px) {
    .c-img {
    }
    .c-img__label {
      width: 100%;
    }
    .c-img__caption {
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
  }
  
  /* --------------------------------------------------------------------------
    svg
  -------------------------------------------------------------------------- */
  
  .c-svg {
    position: relative;
    display: block;
    width: 100%;
  }
  
  .c-svg::before {
    display: block;
    padding-top: 100%;
    content: '';
  }
  
  .c-svg > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  

    /* ==========================================================================
    TAB
  ========================================================================== */
  @media all and (min-width: 768px), print {
  .tab-panel-item{
    display: none;
  }
  [data-tab="all"] .tab-panel-item--all,
  [data-tab="company"] .tab-panel-item--company,
  [data-tab="dealer"] .tab-panel-item--dealer,
  [data-tab="manufacturer"] .tab-panel-item--manufacturer,
  [data-tab="industry"] .tab-panel-item--industry{
    display: block;
  }
}
@media all and (max-width: 767px) {
  .tab-panel-item{
    display: none;
  }
  [data-tab="all"] .tab-panel-item--all,
  [data-tab="company"] .tab-panel-item--company,
  [data-tab="dealer"] .tab-panel-item--dealer,
  [data-tab="manufacturer"] .tab-panel-item--manufacturer,
  [data-tab="industry"] .tab-panel-item--industry{
    display: block;
  }
}

/* ==========================================================================
  PROJECT
========================================================================== */

@media all and (min-width: 768px), print {
    .top-flow-heading{
        font-size: calc(24 / var(--font-size)* 1rem);
        font-weight: bold;
        text-align: center;
        margin-bottom: calc(28 / var(--font-size)* 1rem);
        color: var(--primary-color-100);
    }
    .top-box{
        --box-bg-color: var(--white-color);
        --box-title-color: var(--primary-color-100);
        --box-deco-color: var(--gray-color-300);
        --box-txt-color: var(--black-color);
        padding:calc(40 / var(--font-size)* 1rem) calc(32 / var(--font-size)* 1rem);
        background-color: var(--box-bg-color);
    }
    .top-box .c-under-header {
        --header-color: var(--box-title-color);
    }
    .top-box .c-under-header::before{
        background-color: var(--box-deco-color);
    }
    .top-box__heading{
        text-align: center;
        margin-bottom: calc(20 / var(--font-size)* 1rem);
        color: var(--box-txt-color);
        letter-spacing: 0.02em;
    }
    .top-box__lead{
        text-align: center;
        color: var(--box-txt-color);
        letter-spacing: 0.02em;
    }
    .top-box__content{
      margin-top: calc(20 / var(--font-size)* 1rem);
    }
    .top-box__state{
        font-weight: bold;
        text-align: center;
        letter-spacing: 0.02em;
    }
}
@media all and (max-width: 767px) {
  .top-flow-heading{
      font-size: calc(24 / var(--font-size)* 1rem);
      font-weight: bold;
      text-align: center;
      margin-bottom: calc(16 / var(--font-size)* 1rem);
      color: var(--primary-color-100);
  }
  .top-flow-heading .c-header-title{
      --header-font-size: 24;
      text-align: center;
      line-height: 1.5;
  }
  .top-box{
      --box-bg-color: var(--white-color);
      --box-title-color: var(--primary-color-100);
      --box-deco-color: var(--gray-color-300);
      --box-txt-color: var(--black-color);
      padding:calc(32 / var(--font-size)* 1rem) calc(16 / var(--font-size)* 1rem);
      background-color: var(--box-bg-color);
  }
  .top-box .c-under-header {
      --header-color: var(--box-title-color);
  }
  .top-box .c-under-header::before{
      background-color: var(--box-deco-color);
  }
  .top-box__header{
      margin-bottom: calc(20 / var(--font-size)* 1rem);
  }
  .top-box__heading{
      text-align: center;
      margin-bottom: calc(18 / var(--font-size)* 1rem);
      color: var(--box-txt-color);
      letter-spacing: 0.02em;
  }
  .top-box__heading .c-txt{
      line-height: 1.5;
  }
  .top-box__lead{
      text-align: start;
      color: var(--box-txt-color);
      letter-spacing: 0.02em;
  }
  .top-box__content{
    margin-top: calc(18 / var(--font-size)* 1rem);
  }
  .top-box__state{
      font-weight: bold;
      text-align: center;
      letter-spacing: 0.02em;
  }
}

/* --------------------------------------------------------------------------
  MV
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .top-mv {
        height: calc(598 / var(--font-size)* 1rem);
        background-image: url(../../assets/img/mv_bg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }
    .top-mv__in {
        position: relative;
        padding: 0 calc(40 / var(--font-size)* 1rem);
        max-width: calc(1160 / var(--font-size)* 1rem);
        margin: auto;
        height: 100%;
    }
    .top-mv__in::before {
        content: "";
        background-image: url(../../assets/img/mv_img.png);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(838 / var(--font-size)* 1rem);
        height: calc(300 / var(--font-size)* 1rem);
    }
    .top-mv__body {
        padding-top: calc(72 / var(--font-size)* 1rem);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .top-mv-lead{
        color: var(--white-color);
        text-align: center;
        font-size: calc(20 / var(--font-size)* 1rem);
        line-height: 1.8;
        margin-bottom: calc(32 / var(--font-size)* 1rem);
        letter-spacing: 0.08em;
    }
    .top-mv-title{
         max-width: calc(839 / var(--font-size)* 1rem);
         width: 100%;
    }
}
@media all and (max-width: 767px) {
  .top-mv {
      height: calc(449 / var(--font-size)* 1rem);
      background-image: url(../../assets/img/mv_bg_sp.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
  }
  .top-mv__in {
      position: relative;
      padding: 0 calc(16 / var(--font-size)* 1rem);
      max-width: calc(1160 / var(--font-size)* 1rem);
      margin: auto;
      height: 100%;
  }
  .top-mv__in::before {
      content: "";
      background-image: url(../../assets/img/mv_img_sp.png);
      background-position: bottom center;
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      max-width: calc(285 / var(--font-size)* 1rem);
      max-height: calc(140 / var(--font-size)* 1rem);
      width: 100%;
      height: 100%;
  }
  .top-mv__body {
      padding-top: calc(44 / var(--font-size)* 1rem);
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .top-mv-lead{
      color: var(--white-color);
      text-align: center;
      font-size: calc(14 / var(--font-size)* 1rem);
      line-height: 1.8;
      margin-bottom: calc(28 / var(--font-size)* 1rem);
      letter-spacing: 0.08em;
  }
  .top-mv-title{
      max-width: calc(263 / var(--font-size)* 1rem);
      width: 100%;
  }
}

/* --------------------------------------------------------------------------
  PURPOSE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .top-purpose__body{
      padding-top: calc(42 / var(--font-size)* 1rem);
  }
  [data-page="top"] .top-purpose__body{
      padding-top: calc(96 / var(--font-size)* 1rem);
  }
  [data-page="contact"] .top-purpose__body{
      padding-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-purpose__lead{
      text-align: center;
  }
}
@media all and (max-width: 767px) {
  .top-purpose__body{
      padding-top: calc(40 / var(--font-size)* 1rem);
  }
  .top-purpose__lead .c-txt{
      font-size: calc(16 / var(--font-size)* 1rem);
  }
}

/* --------------------------------------------------------------------------
  NEWS
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .top-news-tab-list { 
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: calc(20 / var(--font-size)* 1rem);
    margin-left: calc(42 / var(--font-size)* 1rem);
    margin-bottom: calc(30 / var(--font-size)* 1rem);
    text-align: center;
  }
  .top-news-tab-item {
    background: var(--white-color);
    width: calc(135 / var(--font-size)* 1rem);
  }
  .top-news-tab-btn {
    padding: calc(10 / var(--font-size)* 1rem) calc(8 / var(--font-size)* 1rem);
    cursor: pointer;
  }
  .top-news-tab-btn[data-cat="all"] {
    border: 1px solid var(--deep-blue-500);
    color: var(--deep-blue-500);
  }
  .top-news-tab-btn[data-cat="company"] {
    border: 1px solid var(--blue-color-500);
    color: var(--blue-color-500);
  }
  .top-news-tab-btn[data-cat="dealer"] {
    border: 1px solid var(--green-color-500);
    color: var(--green-color-500);
  }
  .top-news-tab-btn[data-cat="manufacturer"] {
    border: 1px solid var(--purple-color-500);
    color: var(--purple-color-500);
  }
  .top-news-tab-btn[data-cat="industry"] {
    border: 1px solid var(--gray-color-500);
    color: var(--gray-color-500);
  }
  .top-news-tab[data-tab="all"] .top-news-tab-btn[data-cat="all"] {
    border: 1px solid var(--deep-blue-500);
    background-color: var(--deep-blue-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news-tab[data-tab="company"] .top-news-tab-btn[data-cat="company"] {
    border: 1px solid var(--blue-color-500);
    background-color: var(--blue-color-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news-tab[data-tab="dealer"] .top-news-tab-btn[data-cat="dealer"] {
    border: 1px solid var(--green-color-500);
    background-color: var(--green-color-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news-tab[data-tab="manufacturer"] .top-news-tab-btn[data-cat="manufacturer"] {
    border: 1px solid var(--purple-color-500);
    background-color: var(--purple-color-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news-tab[data-tab="industry"] .top-news-tab-btn[data-cat="industry"] {
    border: 1px solid var(--gray-color-500);
    background-color: var(--gray-color-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news__body{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      padding-top: calc(80 / var(--font-size)* 1rem);
      padding-bottom: calc(80 / var(--font-size)* 1rem);
  }
  .top-news__header{
      flex-shrink: 0;
      width: calc(180 / var(--font-size)* 1rem);
  }
  .top-news__header .c-under-header{
      text-align: left;
  }
  .top-news__header .c-under-header::before{
      left: 0;
      transform: translateX(0);
  }
  .top-news__content{
      flex-grow: 1;
      margin-left: calc(42 / var(--font-size)* 1rem);
  }
  .top-news__content:first-child{
      margin-left: 0;
  }
  .top-news-list{

  }
  .top-news-list-item{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-top: calc(24 / var(--font-size)* 1rem);
      padding-bottom: calc(24 / var(--font-size)* 1rem);
  }
  .top-news-list-item + .top-news-list-item{
      border-top: 1px solid var(--gray-color-300);
  }
  .top-news-list-item:first-child{
      padding-top: 0;
  }
  .top-news-list-item:last-child{
      border-bottom: 1px solid var(--gray-color-300);
  }
  .top-news-list-heading{
      flex-shrink: 0;
      width: calc(120 / var(--font-size)* 1rem);
  }
  .top-news-list-heading__label{
      display: block;
      text-align: center;
      font-weight: bold;
      font-size:  calc(14 / var(--font-size)* 1rem);
  }
  .top-news-list-tag__label{
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(22 / var(--font-size)* 1rem);
      margin-top: calc(9 / var(--font-size)* 1rem);
      border: 1px solid var(--black-color);
      background: var(--white-color);
      text-align: center;
      font-weight: bold;
      font-size:  calc(11 / var(--font-size)* 1rem);
      color: var(--black-color);
  }
  .top-news-list-tag__label--notice{
      border: 1px solid var(--red-color);
      background: var(--red-color);
      color: var(--white-color);
  }
  .top-news-list-tag__label--maintenance{
      border: 1px solid var(--red-color-100);
      background: var(--white-color);
      color: var(--red-color-100);
  }
  .top-news-list-detail{
      flex-grow: 1;
      margin-left: calc(40 / var(--font-size)* 1rem);
  }
  .top-news-list-detail:first-child{
      margin-left: 0;
  }
  .top-news-list-txt__label{
      line-height: 1.8;
      font-size:  calc(14 / var(--font-size)* 1rem);
  }
  .top-news-list-txt__label a{
      color: var(--deep-blue-500);
      text-decoration: underline;
  }
  .top-news-list-txt__label a:hover{
      text-decoration: none;
  }
  .top-news-list-txt__ico{
    display: inline-block;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
  }
  .top-news-list-txt__ico--pdf{
    fill: #ea4832;
  }
  .top-news-list-txt__ico--xls{
    fill: #00A875;
  }
  .top-news-list-txt__ico--doc{
    fill: #158FE7;
  }
  .top-news-list-txt__ico--ppt{
    fill: #e76115;
  }
  .top-news-feature{
    height: calc(264 / var(--font-size)* 1rem);
    overflow-y: scroll;
  }
  @-moz-document url-prefix() {
    .top-news-feature{
      scrollbar-width: thin;
      scrollbar-color: var(--gray-color-400) var(--gray-color-300);
    }
  }
  .top-news-feature::-webkit-scrollbar{
    width: calc(4 / var(--font-size)* 1rem);
 }
  .top-news-feature::-webkit-scrollbar-track{
    background-color: var(--gray-color-300);
 }
 .top-news-feature::-webkit-scrollbar-thumb{
    background-color:var(--gray-color-400);
 }
}
@media all and (max-width: 767px) {
  .top-news-tab-list { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(20 / var(--font-size)* 1rem);
    margin-bottom: calc(30 / var(--font-size)* 1rem);
    text-align: center;
  }
  .top-news-tab-item {
    background: var(--white-color);
    width: 100%;
    max-width: calc(135 / var(--font-size)* 1rem);
  }
  .top-news-tab-btn {
    padding: calc(10 / var(--font-size)* 1rem) calc(8 / var(--font-size)* 1rem);
    cursor: pointer;
  }
  .top-news-tab-btn[data-cat="all"] {
    border: 1px solid var(--deep-blue-500);
    color: var(--deep-blue-500);
  }
  .top-news-tab-btn[data-cat="company"] {
    border: 1px solid var(--blue-color-500);
    color: var(--blue-color-500);
  }
  .top-news-tab-btn[data-cat="dealer"] {
    border: 1px solid var(--green-color-500);
    color: var(--green-color-500);
  }
  .top-news-tab-btn[data-cat="manufacturer"] {
    border: 1px solid var(--purple-color-500);
    color: var(--purple-color-500);
  }
  .top-news-tab-btn[data-cat="industry"] {
    border: 1px solid var(--gray-color-500);
    color: var(--gray-color-500);
  }
  .top-news-tab[data-tab="all"] .top-news-tab-btn[data-cat="all"] {
    border: 1px solid var(--deep-blue-500);
    background-color: var(--deep-blue-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news-tab[data-tab="company"] .top-news-tab-btn[data-cat="company"] {
    border: 1px solid var(--blue-color-500);
    background-color: var(--blue-color-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news-tab[data-tab="dealer"] .top-news-tab-btn[data-cat="dealer"] {
    border: 1px solid var(--green-color-500);
    background-color: var(--green-color-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news-tab[data-tab="manufacturer"] .top-news-tab-btn[data-cat="manufacturer"] {
    border: 1px solid var(--purple-color-500);
    background-color: var(--purple-color-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news-tab[data-tab="industry"] .top-news-tab-btn[data-cat="industry"] {
    border: 1px solid var(--gray-color-500);
    background-color: var(--gray-color-500);
    color: var(--white-color);
    pointer-events: none;
  }
  .top-news__body{

  }
  .top-news__header{

  }
  .top-news__header .c-under-header{

  }
  .top-news__header .c-under-header::before{

  }
  .top-news__content{

  }
  .top-news__content:first-child{

  }
  .top-news-list{

  }
  .top-news-list-item{
      padding-top: calc(16 / var(--font-size)* 1rem);
      padding-bottom: calc(16 / var(--font-size)* 1rem);
  }
  .top-news-list-item + .top-news-list-item{
      border-top: 1px solid var(--gray-color-300);
  }
  .top-news-list-item:first-child{
      padding-top: 0;
  }
  .top-news-list-item:last-child{
      border-bottom: 1px solid var(--gray-color-300);
  }
  .top-news-list-heading{
      display: flex;
      justify-content: flex-start;
      align-items: center;
  }
  .top-news-list-heading__label{
      display: block;
      text-align: center;
      font-weight: bold;
      font-size:  calc(14 / var(--font-size)* 1rem);
  }
  .top-news-list-tag__label{
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(90 / var(--font-size)* 1rem);
      height: calc(22 / var(--font-size)* 1rem);
      margin-left: calc(8 / var(--font-size)* 1rem);
      border: 1px solid var(--black-color);
      background: var(--white-color);
      text-align: center;
      font-weight: bold;
      font-size:  calc(11 / var(--font-size)* 1rem);
      color: var(--black-color);
  }
  .top-news-list-tag__label--notice{
      border: 1px solid var(--red-color);
      background: var(--red-color);
      color: var(--white-color);
  }
  .top-news-list-tag__label--maintenance{
    border: 1px solid var(--red-color-100);
    background: var(--white-color);
    color: var(--red-color-100);
  }
  .top-news-list-detail{
      margin-top: calc(8 / var(--font-size)* 1rem);
  }
  .top-news-list-detail:first-child{
      margin-top: 0;
  }
  .top-news-list-txt__label{
      line-height: 1.8;
      font-size:  calc(14 / var(--font-size)* 1rem);
  }
  .top-news-list-txt__label a{
      color: var(--deep-blue-500);
      text-decoration: underline;
  }
  .top-news-list-txt__ico{
    display: inline-block;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
  }
  .top-news-list-txt__ico--pdf{
    fill: #ea4832;
  }
  .top-news-list-txt__ico--xls{
    fill: #00A875;
  }
  .top-news-list-txt__ico--doc{
    fill: #158FE7;
  }
  .top-news-list-txt__ico--ppt{
    fill: #e76115;
  }
  .top-news-feature{
    height: calc(264 / var(--font-size)* 1rem);
    overflow-y: scroll;
  }
  @-moz-document url-prefix() {
    .top-news-feature{
      scrollbar-width: thin;
      scrollbar-color: var(--gray-color-400) var(--gray-color-300);
    }
  }
  .top-news-feature::-webkit-scrollbar{
    width: calc(2 / var(--font-size)* 1rem);
 }
  .top-news-feature::-webkit-scrollbar-track{
    background-color: var(--gray-color-300);
 }
 .top-news-feature::-webkit-scrollbar-thumb{
    background-color:var(--gray-color-400);
 }
}

/* --------------------------------------------------------------------------
  ABOUT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .top-about{
        overflow-x: hidden;
    }
    .top-about__body{
        padding-top: calc(42 / var(--font-size)* 1rem);
        padding-bottom: calc(80 / var(--font-size)* 1rem);
    }
    .top-about-list-item{
        font-size: calc(18 / var(--font-size)* 1rem);
        padding: calc(23 / var(--font-size)* 1rem) 0;
        display: flex;
    }
    .top-about-list-item + .top-about-list-item{
        border-top: 1px solid var(--gray-color-300);
    }
    .top-about-list-item:first-of-type{
        padding-top: calc(12 / var(--font-size)* 1rem);
    }
    .top-about-list-heading{
        width: calc(140 / var(--font-size)* 1rem);
        font-weight: bold;
        margin-right: calc(20 / var(--font-size)* 1rem);
    }
    .top-about-figure{
        margin-top: calc(20 / var(--font-size)* 1rem);
    }
    .top-about-table{
        border: 1px solid var(--gray-color-300);
        display: flex;
    }
    .top-about-table-block{
        display: flex;
        flex-direction: column;
        flex: auto;
    }
    .top-about-table-block + .top-about-table-block {
        border-left: 1px solid var(--gray-color-300);
    }
    .top-about-table-block--heading{
        width: calc(270 / var(--font-size)* 1rem);
        flex-shrink: 0;
        flex-grow: 0;
    }
    .top-about-table-block--footer{
        width: calc(156 / var(--font-size)* 1rem);
        flex-shrink: 0;
        flex-grow: 0;
    }
    .top-about-table-cell{
        min-height: calc(67 / var(--font-size)* 1rem);
        display: flex;
        padding: calc(16 / var(--font-size)* 1rem) calc(24 / var(--font-size)* 1rem);
    }
    .top-about-table__header{
        background-color: var(--gray-color-200);
    }
    .top-about-table__content{
        height: 100%;
    }
    .top-about-table-group{
        display: flex;
        border-top: 1px solid var(--gray-color-300);
    }
    .top-about-table-cell{
        height: 100%;
        flex: 1;
        align-items: center;
    }
    .top-about-table-cell + .top-about-table-cell{
        border-left: 1px solid var(--gray-color-300);
    }
    .top-about-table__header .top-about-table-cell{
        align-items: center;
        justify-content: center;
        min-height: calc(60 / var(--font-size)* 1rem);
    }
    .top-about-table-block--heading .top-about-table-group{
        height: 100%;
    }
    .top-about-table-block--heading .top-about-table-cell{
        justify-content: center;
    }
    .top-about-table-block--footer .top-about-table-group{
        height: 100%;
    }
    .top-about-table-block--footer .top-about-table-cell{
        justify-content: center;
    }
    .top-about-table-txt{
        color: var(--primary-color-100);
        font-weight: bold;
        font-size:  calc(18 / var(--font-size)* 1rem);
        line-height: 1.5;
    }
    .top-about-table-block--heading .top-about-table-txt{
        text-align: center;
    }
    .top-about-table-cell--heading .top-about-table-txt{
        font-size:  calc(16 / var(--font-size)* 1rem);
    }
    .top-about-table-block--footer .top-about-table__content .top-about-table-txt{
        font-size:  calc(28 / var(--font-size)* 1rem);
        text-align: center;
    }
    .top-about-note{
        margin-top: calc(16 / var(--font-size)* 1rem);
    }
    .top-about-anchor{
        margin-top: calc(80 / var(--font-size)* 1rem);
    }
    .top-about-anchor__heading{
        text-align: center;
        font-size: calc(24 / var(--font-size)* 1rem);
        font-weight: bold;
        color: var(--deep-blue-500);
        letter-spacing: 0.02em;
    }
    .top-about-btn{
        margin-top: calc(32 / var(--font-size)* 1rem);
    }
    .top-about-btn:first-child{
        margin-top: 0;
    }
    .top-about-btn .c-btn{
        --btn-min-height: 78;
    }
    .top-about-btn .c-btn__body{
        padding: calc(17.5 / var(--font-size) * 1rem) calc(var(--btn-px) / 2 / var(--font-size) * 1rem);
        flex-direction: row;
    }
    .top-about-btn .c-btn-txt{
        flex-grow: 1;
        margin-left: calc(var(--btn-ico-size) / var(--font-size) * 1rem + 8 / var(--font-size) * 1rem);
    }
}
@media all and (min-width: 960px) and (max-width: 1160px), print {
  .top-about-btn .l-btn-list{
    --gap-x: 20;
  }
  .top-about-btn .c-btn{
    --btn-txt-font-size: 18;
  }
  .top-about-btn .c-btn-txt{
    margin-left: 0;
  }
}
@media all and (min-width: 768px) and (max-width: 960px), print {
  .top-about-btn .l-btn-list{
    --col: 2;
    --gap-x: 20;
    --gap-y: 20;
  }
  .top-about-btn .c-btn{
    --btn-txt-font-size: 18;
  }
}
@media all and (max-width: 767px) {
  .top-about__body{
      padding-top: calc(40 / var(--font-size)* 1rem);
      padding-bottom: calc(66 / var(--font-size)* 1rem);
  }
  .top-about-list-item{
      font-size: calc(18 / var(--font-size)* 1rem);
      padding: calc(18 / var(--font-size)* 1rem) 0;
      display: flex;
      flex-direction: column;
  }
  .top-about-list-item + .top-about-list-item{
      border-top: 1px solid var(--gray-color-300);
  }
  .top-about-list-item:first-of-type{
      padding-top: calc(3 / var(--font-size)* 1rem);
  }
  .top-about-list-heading{
      width: calc(140 / var(--font-size)* 1rem);
      font-weight: bold;
      margin-bottom: calc(14 / var(--font-size)* 1rem);
  }
  .top-about-list-detail{
      line-height: 1.8;
  }
  .top-about-figure{
      margin-top: calc(5 / var(--font-size)* 1rem);
  }
  .top-about-table{
      border: 1px solid var(--gray-color-300);
      display: flex;
      flex-direction: column;
  }
  .top-about-table-block{
      display: flex;
      flex-direction: column;
      flex: auto;
  }
  .top-about-table-block + .top-about-table-block {
      border-top: 1px solid var(--gray-color-300);
  }
  .top-about-table-block--heading{
      flex-shrink: 0;
      flex-grow: 0;
  }
  .top-about-table-block--footer{
      flex-shrink: 0;
      flex-grow: 0;
  }
  .top-about-table-cell{
      min-height: calc(56 / var(--font-size)* 1rem);
      display: flex;
      padding: calc(8 / var(--font-size)* 1rem) calc(8 / var(--font-size)* 1rem);
  }
  .top-about-table__header{
      background-color: var(--gray-color-200);
  }
  .top-about-table__content{
      height: 100%;
  }
  .top-about-table-group{
      display: flex;
      border-top: 1px solid var(--gray-color-300);
  }
  .top-about-table-cell{
      height: 100%;
      flex: auto;
      align-items: center;
  }
  .top-about-table-cell + .top-about-table-cell{
      border-left: 1px solid var(--gray-color-300);
  }
  .top-about-table__header .top-about-table-cell{
      align-items: center;
      justify-content: center;
      min-height: calc(44 / var(--font-size)* 1rem);
  }
  .top-about-table-cell--title{
      width: calc(137 / var(--font-size)* 1rem);
      flex-shrink: 0;
      flex-grow: 0;
  }
  .top-about-table-block--heading .top-about-table-group{
      height: 100%;
  }
  .top-about-table-block--heading .top-about-table-cell{
      justify-content: center;
  }
  .top-about-table-block--footer .top-about-table-group{
      height: 100%;
  }
  .top-about-table-block--footer .top-about-table-cell{
      justify-content: center;
  }
  .top-about-table-txt{
      color: var(--primary-color-100);
      font-weight: bold;
      font-size:  calc(14 / var(--font-size)* 1rem);
      line-height: 1.5;
  }
  .top-about-table-block--heading .top-about-table-txt{
      text-align: center;
  }
  .top-about-table-cell--heading .top-about-table-txt{
      font-size:  calc(16 / var(--font-size)* 1rem);
  }
  .top-about-table-block--footer .top-about-table__content .top-about-table-txt{
      font-size:  calc(14 / var(--font-size)* 1rem);
  }
  .top-about-note{
      margin-top: calc(8 / var(--font-size)* 1rem);
  }
  .top-about-anchor{
      margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .top-about-anchor__heading{
      text-align: center;
      font-size: calc(20 / var(--font-size)* 1rem);
      font-weight: bold;
      color: var(--deep-blue-500);
      letter-spacing: 0.02em;
  }
  .top-about-btn{
      margin-top: calc(24 / var(--font-size)* 1rem);
  }
  .top-about-btn:first-child{
      margin-top: 0;
  }
  .top-about-btn .c-btn{
      --btn-min-height: 70;
  }
  .top-about-btn .l-btn-list-item {
      width: calc(280 / var(--font-size) * 1rem);
  }
  .top-about-btn .c-btn__body{
      padding: calc(6 / var(--font-size) * 1rem) calc(var(--btn-px) / 2 / var(--font-size) * 1rem);
      flex-direction: row;
  }
  .top-about-btn .c-btn-txt{
      flex-grow: 1;
      margin-left: calc(var(--btn-ico-size) / var(--font-size) * 1rem + 7 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  COMPANY
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    [data-page="top"] .top-company{
        position: relative;
    }
    .top-company {
        --primary-color-100: var(--blue-color-500);
    }
    [data-page="top"] .top-company {
        color: var(--white-color);
    }
    [data-page="top"] .top-company .c-under-header,
    [data-page="top"] .top-company .c-header-title{
        --header-color: var(--white-color);
    }
    [data-page="top"] .top-company .c-under-header::before{
        background-color: var(--white-color);
    }
    .top-company .top-box{
        color: var(--black-color);
    }
    .top-company .top-box .c-under-header{
        --box-title-color: var(--deep-blue-500);
        --header-color: var(--box-title-color);
    }
    .top-company .top-box .c-under-header::before{
        background-color: var(--deep-blue-300);
    }
    .top-company .top-download-btn .c-btn-txt{
        --btn-txt-color: var(--black-color);
    }
    [data-page="top"] .top-company::before,
    [data-page="top"] .top-company::after{
        content: "";
        position: absolute;
        width: calc(710 / var(--font-size)* 1rem);
        height: calc(710 / var(--font-size)* 1rem);
        background-repeat: no-repeat;
        background-size: contain;
        mix-blend-mode: overlay;
    }
    [data-page="top"] .top-company::before{
        top: 0;
        right: 0;
        background-image: url(../../assets/img/company_bg01.png);
        background-position: top right;
    }
    [data-page="top"] .top-company::after{
        bottom: 0;
        left: 0;
        background-image: url(../../assets/img/company_bg02.png);
        background-position: bottom left;
    }
    .top-company__body{
        padding-top: calc(42 / var(--font-size)* 1rem);
    }
    [data-page="top"] .top-company__body{
        padding-top: calc(80 / var(--font-size)* 1rem);
        padding-bottom: calc(92 / var(--font-size)* 1rem);
    }
    .top-company__anchor{
        margin-bottom: calc(60 / var(--font-size)* 1rem);
    }
    .top-company__lead{
        color: var(--white-color);
        text-align: center;
    }
    .top-company-merit{
        max-width: calc(860 / var(--font-size)* 1rem);
        margin-left: auto;
        margin-right: auto;
        margin-top: calc(16 / var(--font-size)* 1rem * -1);
    }
    .top-company-list{
        display: flex;
        flex-wrap: wrap;
    }
    .top-company-list-item{
        width: calc((100% - (116 / var(--font-size)* 1rem)) / 2);
    }
    .top-company-list-item:nth-of-type(2n){
        margin-left: calc(116 / var(--font-size)* 1rem);
    }
    .top-company-list-item:nth-of-type(n + 3){
        margin-top: calc(50 / var(--font-size)* 1rem);
    }
    .top-company-list__content{
        margin-top: calc(24 / var(--font-size)* 1rem);
    }
    .top-company-list-txt{
        font-size: calc(24 / var(--font-size)* 1rem);
        font-weight: bold;
        text-align: center;
        color: var(--white-color);
        line-height: 1.5;
    }
    .top-company-flow{
        margin-top: calc(80 / var(--font-size)* 1rem);
    }
    .top-company-flow:first-child{
        margin-top: 0;
    }
    .top-company__container.top-company__download{
        margin-top: calc(88 / var(--font-size)* 1rem);
    }
    .top-company__container.top-company__download:first-child{
        margin-top: 0;
    }
    .top-company__container.top-company__schdule{
        margin-top: calc(88 / var(--font-size)* 1rem);
    }
    .top-company__container.top-company__schdule:first-child{
        margin-top: 0;
    }
    .top-company-note{
        text-align: center;
        margin-bottom: calc(30 / var(--font-size)* 1rem);
    }
    .top-company-btn{
        margin-top: calc(80 / var(--font-size)* 1rem);
    }
    .top-company-btn:first-child{
        margin-top: 0;
    }
    .top-company-btn .c-btn{
        --btn-min-height: 78;
    }
    .top-company-btn .l-btn-list-item {
        width: calc(390 / var(--font-size) * 1rem);
    }
    .top-company-btn .c-btn__body{
        padding: calc(17.5 / var(--font-size)* 1rem) calc(var(--btn-px) / 2 / var(--font-size)* 1rem);
        flex-direction: row;
    }
    .top-company-btn .c-btn-txt{
        flex-grow: 1;
        margin-left: calc(var(--btn-ico-size) / var(--font-size) * 1rem + 8 / var(--font-size) * 1rem);
    }
}
@media all and (max-width: 767px) {
  [data-page="top"] .top-company{
      position: relative;
  }
  .top-company {
      --primary-color-100: var(--blue-color-500);
  }
  [data-page="top"] .top-company {
      color: var(--white-color);
  }
  [data-page="top"] .top-company .c-under-header,
  [data-page="top"] .top-company .c-header-title{
      --header-color: var(--white-color);
  }
  [data-page="top"] .top-company .c-under-header::before{
      background-color: var(--white-color);
  }
  .top-company .top-box{
      color: var(--black-color);
  }
  .top-company .top-box .c-under-header{
      --box-title-color: var(--deep-blue-500);
      --header-color: var(--box-title-color);
  }
  .top-company .top-box .c-under-header::before{
      background-color: var(--deep-blue-300);
  }
  .top-company .top-download-btn .c-btn-txt{
      --btn-txt-color: var(--black-color);
  }
  [data-page="top"] .top-company::before,
  [data-page="top"] .top-company::after{
      content: "";
      position: absolute;
      max-width: calc(710 / var(--font-size)* 1rem);
      max-height: calc(710 / var(--font-size)* 1rem);
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      mix-blend-mode: overlay;
  }
  [data-page="top"] .top-company::before{
      top: 0;
      right: 0;
      background-image: url(../../assets/img/company_bg01.png);
      background-position: top right;
  }
  [data-page="top"] .top-company::after{
      bottom: 0;
      left: 0;
      background-image: url(../../assets/img/company_bg02.png);
      background-position: bottom left;
  }
  .top-company__body{
      padding-top: calc(40 / var(--font-size)* 1rem);
  }
  [data-page="top"] .top-company__body{
      padding-bottom: calc(64 / var(--font-size)* 1rem);
  }
  .top-company__anchor{
      margin-bottom: calc(42 / var(--font-size)* 1rem);
  }
  .top-company__lead{
      color: var(--white-color);
  }
  .top-company-merit{
      max-width: calc(860 / var(--font-size)* 1rem);
      margin-left: auto;
      margin-right: auto;
      margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .top-company-list{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
  }
  .top-company-list-item{
      width: 100%;
  }
  .top-company-list__header{
      max-width: calc(310 / var(--font-size)* 1rem);
      margin-left: auto;
      margin-right: auto;
  }
  .top-company-list-item + .top-company-list-item{
      margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .top-company-list__content{
      margin-top: calc(14 / var(--font-size)* 1rem);
  }
  .top-company-list-txt{
      font-size: calc(21 / var(--font-size)* 1rem);
      font-weight: bold;
      text-align: center;
      color: var(--white-color);
      line-height: 1.5;
  }
  .top-company-flow{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-company-flow:first-child{
      margin-top: 0;
  }
  .top-company__container.top-company__download{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-company__container.top-company__download:first-child{
      margin-top: 0;
  }
  .top-company__container.top-company__schdule{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-company__container.top-company__schdule:first-child{
      margin-top: 0;
  }
  .sec__container + .u-buffer + .top-company__schdule{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-company__schdule + .u-buffer + .top-company__schdule{
      margin-top: calc(76 / var(--font-size) * 1rem);
  }
  .top-company__container.top-company__catalog{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-company__container.top-company__catalog:first-child{
      margin-top: 0;
  }
  .top-company-note{
      text-align: center;
      margin-bottom: calc(26 / var(--font-size)* 1rem);
      line-height: 1.5;
  }
  .top-company-btn{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-company-btn:first-child{
      margin-top: 0;
  }
  .top-company-btn .c-btn{
      --btn-min-height: 70;
  }
  .top-company-btn .l-btn-list-item {
      width: calc(280 / var(--font-size) * 1rem);
  }
  .top-company-btn .c-btn__body{
      padding: calc(6 / var(--font-size)* 1rem) calc(var(--btn-px) / 2 / var(--font-size)* 1rem);
      flex-direction: row;
  }
  .top-company-btn .c-btn-txt{
      flex-grow: 1;
      margin-left: calc(var(--btn-ico-size) / var(--font-size) * 1rem + 7 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  SALES
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .top-sales .c-box-header{
        --primary-color-100: var(--green-color-500);
    }
    .top-sales .top-flow-heading .c-header-title,
    .top-sales .top-movie-heading .c-header-title{
        --header-color: var(--primary-color-100);
    }
    .top-sales .top-box{
        --box-bg-color: var(--green-color-500);
        --box-title-color: var(--white-color);
        --box-deco-color: var(--white-color);
        --box-txt-color: var(--white-color);
        padding-top: calc(58 / var(--font-size)* 1rem);
        padding-bottom: calc(58 / var(--font-size)* 1rem);
        color: var(--white-color);
    }
    .top-sales__body{
        padding-top: calc(42 / var(--font-size)* 1rem);
    }
    [data-page="top"] .top-sales__body{
        padding-top: calc(80 / var(--font-size)* 1rem);
        padding-bottom: calc(78 / var(--font-size)* 1rem);
    }
    .top-sales__anchor {
        margin-bottom: calc(58 / var(--font-size)* 1rem);
    }
  .top-sales__lead{
    text-align: center;
  }
  .top-sales-note{
    text-align: center;
    margin-bottom: calc(30 / var(--font-size)* 1rem);
    line-height: 1.5;
  }
  .top-sales-video{
    background-color: #e5e5e5;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 300ms ease;
  }
  .top-sales-video .movie-thum {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .top-sales-video .movie-object{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .top-sales-video .triangle{
    display: block;
    height: calc(tan(60deg)* 60px / 2);
    width: 42px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: var(--white-color);
    position: absolute;
    top: calc((100% - 40px) / 2);
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
  .top-sales-heading{
      font-size: calc(24 / var(--font-size)* 1rem);
      font-weight: bold;
      text-align: center;
      margin-bottom: calc(36 / var(--font-size)* 1rem);
  }
  .top-sales-btn + .top-sales-btn{
      margin-top: calc(56 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__flow{
      margin-top: calc(94 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__movie{
    margin-top: calc(64 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__movie .top-sales__footer + .top-sales__content {
    margin-top: calc(64 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__download{
      margin-top: calc(88 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__schdule{
      margin-top: calc(88 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px) {
  .top-sales .c-box-header{
      --primary-color-100: var(--green-color-500);
  }
  .top-sales .top-flow-heading .c-header-title,
  .top-sales .top-movie-heading .c-header-title{
      --header-color: var(--primary-color-100);
  }
  .top-sales .top-box{
      --box-bg-color: var(--green-color-500);
      --box-title-color: var(--white-color);
      --box-deco-color: var(--white-color);
      --box-txt-color: var(--white-color);
      padding-top: calc(32 / var(--font-size)* 1rem);
      padding-bottom: calc(36 / var(--font-size)* 1rem);
      color: var(--white-color);
  }
  .top-sales__body{
      padding-top: calc(40 / var(--font-size)* 1rem);
  }
  [data-page="top"] .top-sales__body{
      padding-bottom: calc(64 / var(--font-size)* 1rem);
  }
  .top-sales__anchor {
      margin-bottom: calc(40 / var(--font-size)* 1rem);
  }
  .top-sales-note{
    text-align: center;
    margin-bottom: calc(26 / var(--font-size)* 1rem);
    line-height: 1.5;
  }
  .top-sales-video{
    background-color: #e5e5e5;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 300ms ease;
  }
  .top-sales-video .movie-thum {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .top-sales-video .movie-object{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .top-sales-video .triangle{
    display: block;
    height: calc(tan(60deg)* 60px / 2);
    width: 42px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: var(--white-color);
    position: absolute;
    top: calc((100% - 40px) / 2);
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }

  .top-sales-heading{
      font-size: calc(24 / var(--font-size)* 1rem);
      font-weight: bold;
      text-align: center;
      margin-bottom: calc(22 / var(--font-size)* 1rem);
  }
  .top-sales-btn + .top-sales-btn{
      margin-top: calc(26 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__flow{
      margin-top: calc(56 / var(--font-size)* 1rem);
}
  .l-sec__container.top-sales__movie{
    margin-top: calc(36 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__movie .top-sales__footer + .top-sales__content {
    margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__download{
      margin-top: calc(46 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-sales__schdule{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .l-sec__container + .u-buffer + .top-sales__schdule{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-sales__schdule + .u-buffer + .top-sales__schdule{
      margin-top: calc(76 / var(--font-size) * 1rem);
  }
  .top-sales-flow .top-flow-heading{
      margin-bottom: calc(24 / var(--font-size)* 1rem);
  }
  .top-sales__footer{
      margin-top: calc(30 / var(--font-size)* 1rem);
  }
}
@media all and (min-width: 768px), print {
  .flow-step__body{
      padding-top: calc(130 / var(--font-size)* 1rem);
      padding-bottom: calc(96 / var(--font-size)* 1rem);
  }
  .top-sales-step-content{
      margin-top: calc(64 / var(--font-size)* 1rem);
  }
  .top-sales-step-content-item + .top-sales-step-content-item{
      margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .top-sales-step-content-item-header{
      margin-bottom: calc(28 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header__body{
      display: flex;
      gap: calc(21 / var(--font-size) * 1rem);
      align-items: flex-end;
  }
  .top-sales-step-content-item-header-img{
      display: flex;
      align-items: flex-end;
      gap: calc(10 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header-img-ico{
      width: calc(49 / var(--font-size) * 1rem);
      height: calc(49 / var(--font-size) * 1rem);
      margin-bottom: calc(-4 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header-img-ico .c-svg{
      fill:var(--green-color-500);
  }
  .top-sales-step-content-item-header-img-txt__label{
      font-size: calc(23 / var(--font-size) * 1rem);
      color: var(--green-color-500);
      font-weight: bold;
  }
  .top-sales-step-content-item-header-img-txt-num{
      font-size: calc(33 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header-sentence{
      margin-bottom: calc(4 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header-sentence-title__label{
      font-size: calc(24 / var(--font-size) * 1rem);
      color: var(--deep-blue-500);
      font-weight: bold; 
  }
  .top-sales-step-content-item-content{
      background-color: var(--gray-color-100);
  }
  .top-sales-step-content-item-content__inner{
      padding: calc(32 / var(--font-size) * 1rem) calc(40 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-content-element + .top-sales-step-content-item-content-element{
      margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-content-btn{
      margin-top: calc(31 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px) {
  .flow-step__body{
      padding-top: calc(96 / var(--font-size)* 1rem);
      padding-bottom: calc(96 / var(--font-size)* 1rem);
  }
  .top-sales-step-figure{
      max-width: calc(313 / var(--font-size)* 1rem);
      margin-left: auto;
      margin-right: auto;
  }
  .top-sales-step-content{
      margin-top: calc(64 / var(--font-size)* 1rem);
  }
  .top-sales-step-content-item + .top-sales-step-content-item{
      margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .top-sales-step-content-item-header{
      margin-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header__body{
      display: flex;
      flex-direction: column;
      gap: calc(16 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header-img{
      display: flex;
      align-items: flex-end;
      gap: calc(10 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header-img-ico{
      width: calc(49 / var(--font-size) * 1rem);
      height: calc(49 / var(--font-size) * 1rem);
      margin-bottom: calc(-4 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header-img-ico .c-svg{
      fill:var(--green-color-500);
  }
  .top-sales-step-content-item-header-img-txt__label{
      font-size: calc(23 / var(--font-size) * 1rem);
      color: var(--green-color-500);
      font-weight: bold;
  }
  .top-sales-step-content-item-header-img-txt-num{
      font-size: calc(33 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-header-sentence-title__label{
      font-size: calc(20 / var(--font-size) * 1rem);
      color: var(--deep-blue-500);
      font-weight: bold; 
  }
  .top-sales-step-content-item-content-element + .top-sales-step-content-item-content-element{
      margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .top-sales-step-content-item-content-btn{
      margin-top: calc(31 / var(--font-size) * 1rem);
      max-width: calc(233 / var(--font-size) * 1rem);
      margin-left: auto;
      margin-right: auto;
  }
  .top-sales-step-content-item-content-btn .c-btn{
      --btn-min-height: 71;
      --btn-px: 12;
  }
}
@media all and (min-width: 768px), print {
  .top-sales-step-submit{
      margin-top: calc(80 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px) {
  .top-sales-step-submit{
      margin-top: calc(80 / var(--font-size) * 1rem);
  }
}
@media all and (min-width: 768px), print {
  .top-sales-step-submit-result{
  }
  .top-sales-step-submit-accordion__inner{
  }
  .top-sales-step-submit-result-title{
    margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-result-list{
  }
  .top-sales-step-submit-result-list-item{
  }
  .top-sales-step-submit-result-list-item + .top-sales-step-submit-result-list-item{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-result-list-item__inner{
  }
  .top-sales-step-submit-accordion__head{
    border: 1px solid var(--deep-blue-500);
  }
  .is-opened-accordion .top-sales-step-submit-accordion__head{
    /* border-bottom: 1px solid var(--deep-blue-500); */
  }
  .top-sales-step-submit-accordion-title{
    cursor: pointer;
    padding: calc(20 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-title__inner{
    position: relative;
    padding-right:calc(46 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-title-text{
    line-height: 1.8;
  }
  .top-sales-step-submit-accordion-title-text__label{
    color: var(--deep-blue-500);
    --txt-font-size: 18;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-sales-step-submit-accordion-title-ico{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(16 / var(--font-size)* 1rem);
    height: 100%;
    display: flex;
    align-items: center;
  }
  .top-sales-step-submit-accordion-title-ico__label{
    position: relative;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
  }
  .top-sales-step-submit-accordion-title-ico__label::before, .top-sales-step-submit-accordion-title-ico__label::after{
    content: "";
    display: block;
    position: absolute;
    background-color: var(--deep-blue-500);
    transition: all 0.3s;
  }
  .top-sales-step-submit-accordion-title-ico__label::before{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: calc(2 / var(--font-size)* 1rem);
  }
  .top-sales-step-submit-accordion-title-ico__label::after{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(2 / var(--font-size)* 1rem);
    height: 100%;
  }
  .is-opened-accordion .top-sales-step-submit-accordion-title-ico__label::after{
    transform: translateX(-50%) rotate(90deg);
  }
  .top-sales-step-submit .top-sales-step-submit-accordion .top-sales-step-submit-accordion__body{
      margin-top: 0;
  }
  .top-sales-step-submit-accordion-detail{
    padding: calc(50 / var(--font-size) * 1rem) calc(36 / var(--font-size) * 1rem) calc(40 / var(--font-size) * 1rem);
    background-color: var(--primary-color-10);
    border-bottom-right-radius: calc(5 / var(--font-size)* 1rem);
    border-bottom-left-radius: calc(5 / var(--font-size)* 1rem);
    background-color: var(--gray-color-100);
  }
  .top-sales-step-submit-accordion-detail__inner{
    position: relative;
  }
  .top-sales-step-submit-accordion-detail-content{
  }
  .top-sales-step-submit-accordion-detail-content__in{
  }
  .top-sales-step-submit-accordion-detail-content__in .c-txt + .c-txt{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-table{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content__element + .top-sales-step-submit-accordion-detail-content__element{
      margin-top: calc(41 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item + .top-sales-step-submit-accordion-detail-content-unit-item{
      margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item__heading{
      margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-title__label{
      font-size: calc(18 / var(--font-size) * 1rem);
      font-weight: 700;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc{
      background-color: var(--white-color);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc + .top-sales-step-submit-accordion-detail-content-unit-item-doc{
      margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc__inner{
      padding: calc(11 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc__body{
      display: flex;
      align-items: flex-start;
      gap: calc(11 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-name .c-txt{
      display: inline-block;
      vertical-align: middle;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico{
      width: calc(26 / var(--font-size) * 1rem);
      height: calc(29 / var(--font-size) * 1rem);
      display: inline-block;
      vertical-align: middle;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--pdf .c-svg{
      fill: #ea4832;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--xls .c-svg{
      fill: #00A875;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--doc .c-svg{
      fill: #158FE7;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--jpeg .c-svg{
      fill: #373737;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--png .c-svg{
      fill: #373737;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-col__element + .top-sales-step-submit-accordion-detail-content-unit-item-doc-col__element{
      margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-note{
      margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-link{
      max-width: calc(776 / var(--font-size) * 1rem);
      margin-left: auto;
      margin-right: auto;
  }
  .top-sales-step-submit-accordion-detail-content-link .c-btn{
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10);
  }
}
@media all and (max-width: 767px) {
  .top-sales-step-submit-result{
  }
  .top-sales-step-submit-accordion__inner{
  }
  .top-sales-step-submit-result-title{
    margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-result-list{
  }
  .top-sales-step-submit-result-list-item{
  }
  .top-sales-step-submit-result-list-item + .top-sales-step-submit-result-list-item{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-result-list-item__inner{
  }
  .top-sales-step-submit-accordion__head{
    border: 1px solid var(--deep-blue-500);
  }
  .is-opened-accordion .top-sales-step-submit-accordion__head{
    /* border-bottom: 1px solid var(--deep-blue-500); */
  }
  .top-sales-step-submit-accordion-title{
    cursor: pointer;
    padding: calc(20 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-title__inner{
    position: relative;
    padding-right:calc(46 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-title-text{
    line-height: 1.8;
  }
  .top-sales-step-submit-accordion-title-text__label{
    color: var(--deep-blue-500);
    --txt-font-size: 18;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-sales-step-submit-accordion-title-ico{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(16 / var(--font-size)* 1rem);
    height: 100%;
    display: flex;
    align-items: center;
  }
  .top-sales-step-submit-accordion-title-ico__label{
    position: relative;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
  }
  .top-sales-step-submit-accordion-title-ico__label::before, .top-sales-step-submit-accordion-title-ico__label::after{
    content: "";
    display: block;
    position: absolute;
    background-color: var(--deep-blue-500);
    transition: all 0.3s;
  }
  .top-sales-step-submit-accordion-title-ico__label::before{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: calc(2 / var(--font-size)* 1rem);
  }
  .top-sales-step-submit-accordion-title-ico__label::after{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(2 / var(--font-size)* 1rem);
    height: 100%;
  }
  .is-opened-accordion .top-sales-step-submit-accordion-title-ico__label::after{
    transform: translateX(-50%) rotate(90deg);
  }
  .top-sales-step-submit .top-sales-step-submit-accordion .top-sales-step-submit-accordion__body{
      margin-top: 0;
  }
  .top-sales-step-submit-accordion-detail{
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    padding: calc(24 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem) calc(40 / var(--font-size) * 1rem);
    background-color: var(--primary-color-10);
    border-bottom-right-radius: calc(5 / var(--font-size)* 1rem);
    border-bottom-left-radius: calc(5 / var(--font-size)* 1rem);
    background-color: var(--gray-color-100);
  }
  .top-sales-step-submit-accordion-detail__inner{
    position: relative;
  }
  .top-sales-step-submit-accordion-detail-content{
  }
  .top-sales-step-submit-accordion-detail-content__in{
  }
  .top-sales-step-submit-accordion-detail-content__in .c-txt + .c-txt{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-table{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content__element + .top-sales-step-submit-accordion-detail-content__element{
      margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item + .top-sales-step-submit-accordion-detail-content-unit-item{
      margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item__heading{
      margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-title__label{
      font-size: calc(18 / var(--font-size) * 1rem);
      font-weight: 700;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc{
      background-color: var(--white-color);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc + .top-sales-step-submit-accordion-detail-content-unit-item-doc{
      margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc__inner{
      padding: calc(11 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc__body{
      display: flex;
      align-items: flex-start;
      gap: calc(11 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-name .c-txt{
      display: inline-block;
      vertical-align: middle;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-name .c-txt{
      --txt-font-size: 14;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico{
      width: calc(26 / var(--font-size) * 1rem);
      height: calc(29 / var(--font-size) * 1rem);
      display: inline-block;
      vertical-align: middle;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--pdf .c-svg{
      fill: #ea4832;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--xls .c-svg{
      fill: #00A875;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--doc .c-svg{
      fill: #158FE7;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--jpeg .c-svg{
      fill: #373737;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-ico.top-sales-step-submit-accordion-detail-content-unit-item-doc-ico--png .c-svg{
      fill: #373737;
  }
  .top-sales-step-submit-accordion-detail-content-unit-item-doc-col__element + .top-sales-step-submit-accordion-detail-content-unit-item-doc-col__element{
      margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-note{
      margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-sales-step-submit-accordion-detail-content-link{
      max-width: calc(281 / var(--font-size) * 1rem);
      margin-left: auto;
      margin-right: auto;
  }
  .top-sales-step-submit-accordion-detail-content-link .l-btn-list{
      flex-direction: column;
  }
  .top-sales-step-submit-accordion-detail-content-link .l-btn-list-item{
      --col: 1;
  }
  .top-sales-step-submit-accordion-detail-content-link .c-btn{
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10);
      --btn-min-height: 71;
      --btn-px: 12;
  }
}
@media all and (min-width: 768px), print {
  .top-sales-step-lead{
      margin-top: calc(57 / var(--font-size)* 1rem);
  }
  .top-sales-step-lead .c-btn{
      box-shadow: 0 0 calc(32 / var(--font-size)* 1rem) rgba(0, 0, 0, 0.08);
  }
}
@media all and (max-width: 767px) {
  .top-sales-step-lead{
      margin-top: calc(24 / var(--font-size)* 1rem);
      max-width: calc(281 / var(--font-size)* 1rem);
      margin-left: auto;
      margin-right: auto;
  }
  .top-sales-step-lead .c-btn{
      box-shadow: 0 0 calc(32 / var(--font-size)* 1rem) rgba(0, 0, 0, 0.08);
      --btn-min-height: 71;
      --btn-px: 12;
  }
}

/* --------------------------------------------------------------------------
  PRODUCTION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .top-production .c-box-header{
        --primary-color-100: var(--purple-color-500);
    }
    .top-production .top-flow-heading .c-header-title,
    .top-production .top-movie-heading .c-header-title{
        --header-color: var(--primary-color-100);
    }
    .top-production .top-box{
        --box-bg-color: var(--purple-color-500);
        --box-title-color: var(--white-color);
        --box-deco-color: var(--white-color);
        --box-txt-color: var(--white-color);
        padding-top: calc(58 / var(--font-size)* 1rem);
        padding-bottom: calc(58 / var(--font-size)* 1rem);
        color: var(--white-color);
    }
    .top-production__body {
        padding-top: calc(42 / var(--font-size)* 1rem);
    }
    .top-production__anchor {
        margin-bottom: calc(56 / var(--font-size)* 1rem);
    }
    .top-production__lead{
        text-align: center;
    }
    .top-production-note{
      text-align: center;
      margin-bottom: calc(30 / var(--font-size)* 1rem);
      line-height: 1.5;
    }
    .top-production-video{
      background-color: #e5e5e5;
      margin: 0 auto;
      width: 100%;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all 300ms ease;
    }
    .top-production-video .movie-thum {
      z-index: 2;
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .top-production-video .movie-object{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    .top-production-video .triangle{
      display: block;
      height: calc(tan(60deg)* 60px / 2);
      width: 42px;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      background-color: var(--white-color);
      position: absolute;
      top: calc((100% - 40px) / 2);
      left: 50%;
      transform: translate(-50%);
      z-index: 3;
    }

    .top-production-heading{
        font-size: calc(24 / var(--font-size)* 1rem);
        font-weight: bold;
        text-align: center;
        margin-bottom: calc(32 / var(--font-size)* 1rem);
    }
    .top-production-btn + .top-production-btn{
        margin-top: calc(40 / var(--font-size)* 1rem);
    }
    .l-sec__container.top-production__flow{
        margin-top: calc(46 / var(--font-size)* 1rem);
    }
    .l-sec__container.top-production__movie{
    margin-top: calc(64 / var(--font-size)* 1rem);
  }
    .l-sec__container.top-production__schdule{
        margin-top: calc(88 / var(--font-size)* 1rem);
    }
    .top-production .top-box{
        padding-top: calc(56 / var(--font-size)* 1rem);
        padding-bottom: calc(45 / var(--font-size)* 1rem);
    }
}
@media all and (max-width: 767px) {
  .top-production .c-box-header{
      --primary-color-100: var(--purple-color-500);
  }
  .top-production .top-flow-heading .c-header-title,
  .top-production .top-movie-heading .c-header-title{
      --header-color: var(--primary-color-100);
  }
  .top-production .top-box{
      --box-bg-color: var(--purple-color-500);
      --box-title-color: var(--white-color);
      --box-deco-color: var(--white-color);
      --box-txt-color: var(--white-color);
      padding-top: calc(32 / var(--font-size)* 1rem);
      padding-bottom: calc(36 / var(--font-size)* 1rem);
      color: var(--white-color);
  }
  .top-production .top-box__state .c-txt{
      --txt-font-size: 18;
  }
  .top-production__body {
      padding-top: calc(40 / var(--font-size)* 1rem);
  }
  .top-production__anchor {
      margin-bottom: calc(42 / var(--font-size)* 1rem);
  }
  .top-production__lead{
      text-align: center;
  }
  .top-production-note{
      text-align: center;
      margin-bottom: calc(26 / var(--font-size)* 1rem);
      line-height: 1.5;
  }
  .top-production-video{
    background-color: #e5e5e5;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 300ms ease;
  }
  .top-production-video .movie-thum {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .top-production-video .movie-object{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .top-production-video .triangle{
    display: block;
    height: calc(tan(60deg)* 60px / 2);
    width: 42px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: var(--white-color);
    position: absolute;
    top: calc((100% - 40px) / 2);
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }

  .top-production-heading{
      font-size: calc(24 / var(--font-size)* 1rem);
      font-weight: bold;
      text-align: center;
      margin-bottom: calc(32 / var(--font-size)* 1rem);
  }
  .top-production-btn + .top-production-btn{
      margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-production__flow{
      margin-top: calc(36 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-production__movie{
    margin-top: calc(36 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-production__schdule{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .l-sec__container + .u-buffer + .top-production__schdule{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-production__schdule + .u-buffer + .top-production__schdule{
      margin-top: calc(76 / var(--font-size) * 1rem);
  }
  .top-production .top-box{
      padding-bottom: calc(30 / var(--font-size)* 1rem);
  }
  .top-production .top-flow-heading{
      margin-bottom: calc(24 / var(--font-size)* 1rem);
  }
  .top-production__footer{
      margin-top: calc(30 / var(--font-size)* 1rem);
  }
}

/* --------------------------------------------------------------------------
  DOWNLOAD
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .top-download__body{
        padding-bottom: calc(88 / var(--font-size)* 1rem);
    }
    .top-download__lead{
        text-align: center;
        letter-spacing: 0.02em;
    }
    .top-download-heading{
        font-size: calc(24 / var(--font-size)* 1rem);
        font-weight: bold;
        text-align: center;
        margin-bottom: calc(36 / var(--font-size)* 1rem);
    }
    .top-download-lead{
        text-align: center;
        margin-bottom: calc(36 / var(--font-size)* 1rem);
    }
    .top-download-lead .c-list-item{
        justify-content: center;
    }
    .top-download-note{
        margin-top: calc(36 / var(--font-size)* 1rem);
        text-align: center;
    }
    .top-download-note .c-list-item{
      justify-content: center;
    }
    .top-download-btn .l-btn-list--2col .l-btn-list-item--l{
        width: calc((100% - var(--gap-x) / var(--font-size)* 1rem*(var(--col) - 1)) / var(--col));
    }
    .top-download-btn + .top-download-btn{
        margin-top: calc(68 / var(--font-size)* 1rem);
    }
    .top-download__container.top-download__faq{
        margin-top: calc(88 / var(--font-size)* 1rem);
    }
}
@media all and (max-width: 767px) {
  .top-download__body{
      padding-bottom: calc(68 / var(--font-size)* 1rem);
  }
  .top-download__lead{
      text-align: center;
      letter-spacing: 0.02em;
  }
  .top-download-note{
      margin-top: calc(24 / var(--font-size)* 1rem);
  }
  .top-download-heading{
     font-size: calc(24 / var(--font-size)* 1rem);
     font-weight: bold;
     text-align: center;
     margin-bottom: calc(24 / var(--font-size)* 1rem);
  }
  .top-download-lead{
      margin-bottom: calc(24 / var(--font-size)* 1rem);
  }
  .top-download-btn .l-btn-list--2col{
      --col:1;
  }
  .top-download-btn + .top-download-btn{
      margin-top: calc(42 / var(--font-size)* 1rem);
   }
   .top-download__container.top-download__faq{
       margin-top: calc(42 / var(--font-size)* 1rem);
   }
   .top-download__footer{
      margin-top: calc(40 / var(--font-size)* 1rem);
   }
}

/* --------------------------------------------------------------------------
  INDUSTRY
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .top-industry .top-box {
        --box-bg-color: var(--gray-color-500);
        --box-title-color: var(--white-color);
        --box-deco-color: var(--white-color);
        --box-txt-color: var(--white-color);
        padding-top: calc(58 / var(--font-size)* 1rem);
        padding-bottom: calc(58 / var(--font-size)* 1rem);
        color: var(--white-color);
    }
    .top-industry .c-header-title{
        --header-color: var(--primary-color-100);
    }
    .top-industry .top-box .c-header-title{
        --header-color: var(--white-color);
    }
    .top-industry .c-box-header {
        --primary-color-100: var(--gray-color-500);
    }
    .top-industry a.c-btn:hover, .top-industry a .c-btn:hover, .top-industry button.c-btn:hover{
        --btn-txt-color: var(--black-color);
    }
    .top-industry__body{
        padding-top: calc(42 / var(--font-size)* 1rem);
    }
    [data-page="top"] .top-industry__body{
        padding-top: calc(80 / var(--font-size)* 1rem);
        padding-bottom: calc(78 / var(--font-size)* 1rem);
    }
    .top-industry__lead{
        text-align: center;
        letter-spacing: 0.02em;
    }
    .top-industry-heading{
        font-size: calc(24 / var(--font-size)* 1rem);
        font-weight: bold;
        text-align: center;
        margin-bottom: calc(36 / var(--font-size)* 1rem);
    }
    .top-industry-lead{
        text-align: center;
        margin-bottom: calc(36 / var(--font-size)* 1rem);
    }
    .top-industry-mail a{
        color: var(--primary-color-100);
        text-decoration: underline;
    }
    .top-industry-mail a:hover{
        text-decoration: none;
    }
    .top-industry-btn + .top-industry-btn{
        margin-top: calc(68 / var(--font-size)* 1rem);
    }
    .top-industry__container.top-industry__faq{
        margin-top: calc(88 / var(--font-size)* 1rem);
    }
    .top-industry-group + .top-industry-group{
        margin-top: calc(68 / var(--font-size)* 1rem);
    }
    .top-industry-txt{
        text-align: center;
    }
    .top-industry-note{
        text-align: center;
    }
    .top-industry-note .c-list-item{
        justify-content: center;
        line-height: 1.8;
    }
    .top-industry-txt + .top-industry-txt{
        margin-top: calc(20 / var(--font-size)* 1rem);
    }
    .top-industry-note{
        margin-top: calc(20 / var(--font-size)* 1rem);
    }
    .l-sec__container.top-industry__schdule{
        margin-top: calc(88 / var(--font-size)* 1rem);
    }
}
@media all and (max-width: 767px) {
  .top-industry .top-box {
      --box-bg-color: var(--gray-color-500);
      --box-title-color: var(--white-color);
      --box-deco-color: var(--white-color);
      --box-txt-color: var(--white-color);
      padding-top: calc(32 / var(--font-size)* 1rem);
      padding-bottom: calc(36 / var(--font-size)* 1rem);
      color: var(--white-color);
  }
  .top-industry .c-header-title{
      --header-color: var(--primary-color-100);
  }
  .top-industry .top-box .c-header-title{
      --header-color: var(--white-color);
  }
  .top-industry .c-box-header {
      --primary-color-100: var(--gray-color-500);
  }
  .top-industry a.c-btn:hover, .top-industry a .c-btn:hover, .top-industry button.c-btn:hover{
      --btn-txt-color: var(--black-color);
  }
  .top-industry__body{
      padding-top: calc(40 / var(--font-size)* 1rem);
  }
  [data-page="top"] .top-industry__body{
      padding-bottom: calc(64 / var(--font-size)* 1rem);
  }
  .top-industry__lead{
      letter-spacing: 0.02em;
  }
  .top-industry-heading{
      font-size: calc(24 / var(--font-size)* 1rem);
      font-weight: bold;
      text-align: center;
      margin-bottom: calc(24 / var(--font-size)* 1rem);
  }
  .top-industry-lead{
      text-align: center;
      margin-bottom: calc(24 / var(--font-size)* 1rem);
  }
  .top-industry-mail a{
      color: var(--primary-color-100);
      text-decoration: underline;
  }
  .top-industry-mail a:hover{
      text-decoration: none;
  }
  .top-industry-btn + .top-industry-btn{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-industry__container.top-industry__faq{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-industry__footer{
      margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .top-industry-group + .top-industry-group{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-industry-txt{

  }
  .top-industry-note{

  }
  .top-industry-note .c-list-item{
      line-height: 1.8;
  }
  .top-industry-txt + .top-industry-txt{
      margin-top: calc(24 / var(--font-size)* 1rem);
  }
  .top-industry-note{
      margin-top: calc(24 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-industry__schdule{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .l-sec__container + .u-buffer + .top-industry__schdule{
      margin-top: calc(42 / var(--font-size)* 1rem);
  }
  .top-industry__schdule + .u-buffer + .top-industry__schdule{
      margin-top: calc(76 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
SITEMAP
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .top-sitemap{

  }
  .top-sitemap__in{
      text-align: center;
  }
  .top-sitemap__body{
      display: inline-block;
      vertical-align: top;
      text-align: left;
  }
  .top-sitemap-column{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
  }
  .top-sitemap-column__parts{
      margin-left: calc(200 / var(--font-size)* 1rem);
  }
  .top-sitemap-column__parts:nth-child(2n+1){
      margin-left: 0;
  }
  .top-sitemap-column__parts:nth-child(n+3){
      margin-top: calc(20 / var(--font-size)* 1rem);
  }
  .top-sitemap-btn{

  }
  .top-sitemap-btn-list{

  }
  .top-sitemap-btn-list-item{
      margin-top: calc(20 / var(--font-size)* 1rem);
  }
  .top-sitemap-btn-list-item:first-child{
      margin-top: 0;
  }
  .top-sitemap-btn-list-item--child{
    padding-left: calc(24 / var(--font-size)* 1rem);
  }
  .top-sitemap-btn-list-item > a{
      display: inline-block;
      vertical-align: top;
      color: var(--deep-blue-500);
  }
  .top-sitemap-btn-body{

  }
  .top-sitemap-btn__label{
      display: inline-block;
      vertical-align: top;
      line-height: 1.5;
      font-size: calc(24 / var(--font-size)* 1rem);
      font-weight: bold;
      letter-spacing: .02em;
  }
  .top-sitemap-btn-list-item > a:hover .top-sitemap-btn__label{
      text-decoration: underline;
  }
}
@media all and (max-width: 767px) {
  .top-sitemap{

  }
  .top-sitemap__in{
      text-align: center;
  }
  .top-sitemap__body{
      display: inline-block;
      vertical-align: top;
      text-align: left;
  }
  .top-sitemap-column{

  }
  .top-sitemap-column__parts{
      margin-top: calc(20 / var(--font-size)* 1rem);
  }
  .top-sitemap-column__parts:first-child{
      margin-top: 0;
  }
  .top-sitemap-btn{

  }
  .top-sitemap-btn-list{

  }
  .top-sitemap-btn-list-item{
      margin-top: calc(20 / var(--font-size)* 1rem);
  }
  .top-sitemap-btn-list-item:first-child{
      margin-top: 0;
  }
  .top-sitemap-btn-list-item--child{
    padding-left: calc(18 / var(--font-size)* 1rem);
  }
  .top-sitemap-btn-list-item > a{
      display: inline-block;
      vertical-align: top;
      color: var(--deep-blue-500);
  }
  .top-sitemap-btn-body{

  }
  .top-sitemap-btn__label{
      display: inline-block;
      vertical-align: top;
      line-height: 1.5;
      font-size: calc(18 / var(--font-size)* 1rem);
      font-weight: bold;
      letter-spacing: .02em;
  }
}

/* --------------------------------------------------------------------------
CONTACT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .top-contact__body{
        padding: calc(70 / var(--font-size)* 1rem) 0 0;
    }
    .top-contact--s .top-contact__body{
        padding: 0;
    }
    .top-contact__header{
        margin-bottom: calc(30 / var(--font-size)* 1rem);
    }
    .top-contact-title{
        font-size: calc(30 / var(--font-size)* 1rem);
        color: var(--white-color);
        font-weight: bold;
        text-align: center;
    }
    .top-contact-box{
        background-color: var(--white-color);
        padding: calc(40 / var(--font-size)* 1rem) calc(100 / var(--font-size)* 1rem);
    }
    [data-page="contact"] .top-contact-box{
        background-color: transparent;
        padding: 0 calc(54 / var(--font-size)* 1rem);
    }
    .top-contact-heading{
        margin-bottom: calc(24 / var(--font-size)* 1rem);
    }
    .top-contact-lead{
        text-align: center;
        font-size: calc(24 / var(--font-size)* 1rem);
        color: var(--primary-color-100);
    }
    .top-contact-comment{
        margin-bottom: calc(24 / var(--font-size)* 1rem);
    }
    [data-page="contact"] .top-contact-comment{
        margin-bottom: calc(38 / var(--font-size)* 1rem);
    }
    .top-contact-comment__label{
      text-align: center;
      font-size: calc(14 / var(--font-size)* 1rem);
      line-height: 1.8;
    }
    .top-contact-comment__label.top-contact-comment__label-left {
      text-align: left;
    }
    [data-page="contact"] .top-contact-comment__label{
      font-size: calc(18 / var(--font-size)* 1rem);
    }
    .top-contact-phone-box{
        background-color: var(--white-color);
        padding: calc(24 / var(--font-size)* 1rem) calc(64 / var(--font-size)* 1rem);
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10)
    }
    .top-contact-list{
        display: flex;
        width: 100%;
    }
    #gcatalogSupport .top-contact-list{
      justify-content: center;
    }
    .top-contact-list-item{
      flex-grow: 1;
    }
    #gcatalogSupport .top-contact-list-item {
      flex-grow: initial;
    }
    .top-contact-list-item + .top-contact-list-item{
        margin-left: calc(40 / var(--font-size)* 1rem);
    }
    .top-contact-list__content{
      display: flex;
      align-items: center;
    }
    .top-contact-target{
        width: calc(140 / var(--font-size)* 1rem);
        height: calc(54 / var(--font-size)* 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--gray-color-200);
        color: var(--primary-color-100);
        font-weight: bold;
        margin-right: calc(16 / var(--font-size)* 1rem);
        font-size:  calc(15 / var(--font-size)* 1rem);
    }
    .top-contact-list-item--ip .top-contact-target{
        font-size:  calc(13 / var(--font-size)* 1rem);
    }
    .top-contact-num{
        font-size: calc(34 / var(--font-size)* 1rem);
        color: var(--primary-color-100);
        font-weight: bold;
    }
    .top-contact-num__label{
        letter-spacing: 0.05em;
        white-space: nowrap;
    }
    .top-contact-reception{
        margin-top: calc(4 / var(--font-size)* 1rem);
    }
    [data-page="contact"] .top-contact-reception,
    #gcatalogSupport .top-contact-reception{
      margin-top: calc(16 / var(--font-size)* 1rem);
    }
    .top-contact-note + .top-contact-reception{
        margin-top: calc(36 / var(--font-size)* 1rem);
    }
    [data-page="contact"] .top-contact-note + .top-contact-reception{
        margin-top: calc(64 / var(--font-size)* 1rem);
    }
    .top-contact-reception-box{
        background-color: var(--gray-color-100);
        padding: calc(40 / var(--font-size)* 1rem) calc(64 / var(--font-size)* 1rem);
    }
    .top-contact-time{
        letter-spacing: 0.02em;
    }
    .top-contact-list__footer{
        margin-top: calc(8 / var(--font-size)* 1rem);
    }
    .top-contact-time{
        text-align: center;
        font-weight: bold;
    }
    .top-contact-note{
        margin-top: calc(16 / var(--font-size)* 1rem);
    }
    .top-contact-note .c-list-item{
        justify-content: center;
        line-height: 1.8;
    }
    .top-contact-select{
        margin-top: calc(16 / var(--font-size)* 1rem);
    }
    .top-contact-reception-box .top-contact-select{
        margin-top: calc(32 / var(--font-size)* 1rem);
    }
    .top-contact-select-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .top-contact-select-list-item{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: calc(1 / 2 * 100% - calc(16 / 2 / var(--font-size)* 1rem));
        margin-left: calc(16 / var(--font-size)* 1rem);
        padding: calc(20 / var(--font-size)* 1rem) calc(8 / var(--font-size)* 1rem) calc(16 / var(--font-size)* 1rem) calc(16 / var(--font-size)* 1rem);
        background: var(--white-color);
    }
    .top-contact-select-list-item:nth-child(1){
        border: 1px solid var(--gray-color-300);
    }
    .top-contact-select-list-item:nth-child(2){
        border: 1px solid var(--purple-color-300);
    }
    .top-contact-select-list-item:nth-child(3){
        border: 1px solid var(--green-color-300);
    }
    .top-contact-select-list-item:nth-child(4){
        border: 1px solid var(--blue-color-300);
    }
    .top-contact-select-list-item:nth-child(2n+1){
        margin-left: 0;
    }
    .top-contact-select-list-item:nth-child(n+3){
        margin-top: calc(16 / var(--font-size)* 1rem);
    }
    [data-page="contact"] .top-contact-select-list-item{
        display: block;
        padding: calc(24 / var(--font-size)* 1rem);
        border: 1px solid transparent;
    }
    .top-contact-select-list-heading{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-shrink: 0;
    }
    .top-contact-select-list-heading__label{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-shrink: 0;
        font-size: calc(14 / var(--font-size)* 1rem);
        font-weight: bold;
    }
    [data-page="contact"] .top-contact-select-list-heading__label{
        align-items: baseline;
    }
    .top-contact-select-list-heading__label em{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(37 / 20* 1em);
        height: calc(37 / 20* 1em);
        margin-right: calc(2 / 20* 1em);
        border-radius: calc(37 / 20* 1em);
        text-align: center;
        font-size: calc(20 / 14* 100%);
        color: var(--white-color);
    }
    .top-contact-select-list-item:nth-child(1) .top-contact-select-list-heading__label em{
        background: var(--gray-color-500);
    }
    .top-contact-select-list-item:nth-child(2) .top-contact-select-list-heading__label em{
        background: var(--purple-color-500);
    }
    .top-contact-select-list-item:nth-child(3) .top-contact-select-list-heading__label em{
        background: var(--green-color-500);
    }
    .top-contact-select-list-item:nth-child(4) .top-contact-select-list-heading__label em{
        background: var(--blue-color-500);
    }
    .top-contact-select-list-cat__label{
        flex-grow: 1;
        margin-left: calc(8 / 17* 1em);
        font-size: calc(17 / var(--font-size)* 1rem);
        font-weight: bold;
    }
    .top-contact-select-list-cat__label em{
        font-size: calc(22 / 17* 100%);
    }
    .top-contact-select-list-item:nth-child(1) .top-contact-select-list-cat__label em{
        color: var(--gray-color-500);
    }
    .top-contact-select-list-item:nth-child(2) .top-contact-select-list-cat__label em{
        color: var(--purple-color-500);
    }
    .top-contact-select-list-item:nth-child(3) .top-contact-select-list-cat__label em{
        color: var(--green-color-500);
    }
    .top-contact-select-list-item:nth-child(4) .top-contact-select-list-cat__label em{
        color: var(--blue-color-500);
    }
    .top-contact-select-list-cat__label em > span{
        font-size: calc(17 / 22* 100%);
    }
    .top-contact-select-list-detail{
        flex-grow: 1;
        margin-left: calc(16 / var(--font-size)* 1rem);
    }
    [data-page="contact"] .top-contact-select-list-detail{
        margin-top: calc(12 / var(--font-size)* 1rem);
        margin-left: 0;
    }
    .top-contact-select-list-txt__label{
        line-height: 1.5;
        font-size: calc(14 / var(--font-size)* 1rem);
    }
    .top-contact-select-list-txt__label em{
        font-weight: bold;
    }
    .top-contact-select-list-item:nth-child(1) .top-contact-select-list-txt__label em{
        color: var(--gray-color-500);
    }
    .top-contact-select-list-item:nth-child(2) .top-contact-select-list-txt__label em{
        color: var(--purple-color-500);
    }
    .top-contact-select-list-item:nth-child(3) .top-contact-select-list-txt__label em{
        color: var(--green-color-500);
    }
    .top-contact-select-list-item:nth-child(4) .top-contact-select-list-txt__label em{
        color: var(--blue-color-500);
    }
    .top-contact-menu{
        padding: calc(88 / var(--font-size)* 1rem) 0 calc(28 / var(--font-size)* 1rem);
    }
    .top-contact-menu:first-child{
        padding-top: 0;
    }
    .top-contact--s .top-contact-menu{
        padding: calc(28 / var(--font-size)* 1rem) 0 calc(28 / var(--font-size)* 1rem);
    }
    .top-contact-menu__in{
        padding: 0 calc(40 / var(--font-size) * 1rem);
    }
    .top-contact-menu-list{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .top-contact-menu-list-item{
        flex-shrink: 0;
        margin-left: calc(24 / var(--font-size) * 1rem);
    }
    .top-contact-menu-list-item:first-child{
        margin-left: 0;
    }
    .top-contact-menu-list-txt__label{
        font-size: calc(10 / var(--font-size)* 1rem);
        line-height: 1.5;
    }
    .top-contact-menu-list-txt__label a{
        position: relative;
        display: inline-block;
        vertical-align: text-top;
        padding-left: calc(17 / var(--font-size) * 1rem);
        color: var(--white-color);
    }
    .top-contact-menu-list-txt__label a::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(9 / var(--font-size) * 1rem);
        height: calc(8 / var(--font-size) * 1rem);
        margin-top: calc(1.5em / 2 - calc(8 / 2 / var(--font-size) * 1rem));
        background-image: url(../../assets/img/ico_arw_link.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: calc(9 / var(--font-size) * 1rem);
    }
    .top-contact-menu-list-txt__label a:hover{
        text-decoration: underline;
    }
}

@media all and (min-width: 768px) and (max-width:1260px), print {
  .top-contact-list-item{
      width: calc((100% - (40 / var(--font-size)* 1rem)) / 2);
  }
  .top-contact-num{
      font-size: calc(28 / var(--font-size)* 1rem);
  }
  .top-contact-menu{
      padding-bottom: calc(88 / var(--font-size)* 1rem + 15 / 2 / var(--font-size)* 1rem);
  }
}


@media all and (min-width: 768px) and (max-width: 1023px), print {
  .top-contact-box{
      padding: calc(40 / var(--font-size)* 1rem) calc(40 / var(--font-size)* 1rem);
  }
  [data-page="contact"] .top-contact-box{
      padding: 0 calc(40 / var(--font-size)* 1rem);
  }
  .top-contact-target{
      font-size: calc(12 / var(--font-size)* 1rem);
      margin-right: calc(8 / var(--font-size)* 1rem);
  }
  .top-contact-list-item--ip .top-contact-target{
      font-size: calc(10 / var(--font-size)* 1rem);
  }
  .top-contact-list-item{
      width: calc((100% - (20 / var(--font-size)* 1rem)) / 2);
  }
  .top-contact-list-item + .top-contact-list-item{
      margin-left: calc(20 / var(--font-size)* 1rem);
  }
}

@media all and (max-width: 767px) {
  #ginfodeskReservation .top-contact__body{
    padding: calc(34 / var(--font-size)* 1rem) 0 calc(174 / var(--font-size)* 1rem);
  }
  .top-contact--s .top-contact__body{
      padding: 0 0 calc(174 / var(--font-size)* 1rem);
  }
  .top-contact__header{
      margin-bottom: calc(20 / var(--font-size)* 1rem);
  }
  .top-contact-title{
      font-size: calc(24 / var(--font-size)* 1rem);
      color: var(--white-color);
      font-weight: bold;
      text-align: center;
      letter-spacing:0.02em;
  }
  .top-contact-box{
      background-color: var(--white-color);
      padding: calc(24 / var(--font-size)* 1rem) calc(20 / var(--font-size)* 1rem) calc(30 / var(--font-size)* 1rem);
  }
  [data-page="contact"] .top-contact-box{
      background-color: transparent;
      padding: 0;
  }
  .top-contact-heading{
      margin-bottom: calc(16 / var(--font-size)* 1rem);
  }
  .top-contact-lead{
      text-align: center;
      font-size: calc(18 / var(--font-size)* 1rem);
      color: var(--primary-color-100);
      line-height: 1.5;
  }
  .top-contact-comment{
      margin-bottom: calc(16 / var(--font-size)* 1rem);
  }
  [data-page="contact"] .top-contact-comment{
      margin-bottom: calc(32 / var(--font-size)* 1rem);
  }
  .top-contact-comment__label{
      font-size: calc(14 / var(--font-size)* 1rem);
      line-height: 1.8;
  }
  [data-page="contact"] .top-contact-comment__label{
      font-size: calc(16 / var(--font-size)* 1rem);
  }
  .top-contact-phone-box{
      background-color: var(--white-color);
      padding: calc(24 / var(--font-size)* 1rem) calc(24 / var(--font-size)* 1rem);
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10)
  }
  .top-contact-list{
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
  }
  .top-contact-list-item{
      max-width: calc(285.77 / var(--font-size)* 1rem);
      width: 100%;
  }
  .top-contact-list-item + .top-contact-list-item{
      margin-top: calc(16 / var(--font-size)* 1rem);
  }
  .top-contact-list__content{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .top-contact-target{
      width: calc(96 / var(--font-size)* 1rem);
      height: calc(44 / var(--font-size)* 1rem);
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--gray-color-200);
      color: var(--primary-color-100);
      font-weight: bold;
      margin-right: calc(16 / var(--font-size)* 1rem);
      font-size:  calc(12 / var(--font-size)* 1rem);
      flex-shrink: 0;
      line-height: 1.5;
  }
  .top-contact-list-item--ip .top-contact-target{
      font-size: calc(10 / var(--font-size)* 1rem);
  }
  .top-contact-num{
      font-size: calc(24 / var(--font-size)* 1rem);
      color: var(--primary-color-100);
      font-weight: bold;
  }
  .top-contact-num__label{
      letter-spacing: 0.05em;
      white-space: nowrap;
  }
  .top-contact-reception{
      margin-top: calc(20 / var(--font-size)* 1rem);
      font-size: calc(14 / var(--font-size)* 1rem);
  }
  [data-page="contact"] .top-contact-reception,
  #gcatalogSupport .top-contact-reception{
      margin-top: calc(20 / var(--font-size)* 1rem);
      padding: 0 calc(15 / var(--font-size)* 1rem);
  }
  .top-contact-note + .top-contact-reception{
      margin-top: calc(20 / var(--font-size)* 1rem);
  }
  [data-page="contact"] .top-contact-note + .top-contact-reception{
      margin-top: calc(64 / var(--font-size)* 1rem);
      padding: 0;
  }
  .top-contact-reception-box{
      background-color: var(--gray-color-100);
      padding: calc(40 / var(--font-size)* 1rem) calc(20 / var(--font-size)* 1rem);
  }
  .l-sec__in .top-contact-reception-box{
      margin-left: calc(-20 / var(--font-size)* 1rem);
      margin-right: calc(-20 / var(--font-size)* 1rem);
  }
  .top-contact-time{
      letter-spacing: 0.02em;
  }
  .top-contact-list__footer{
      margin-top: calc(4 / var(--font-size)* 1rem);
  }
  .top-contact-time{
      font-weight: bold;
  }
  .top-contact-note + .top-contact-reception .top-contact-time{
      text-align: center;
      font-size: calc(16 / var(--font-size)* 1rem);
      letter-spacing: 0;
  }
  .top-contact-note{
      margin-top: calc(28 / var(--font-size)* 1rem);
  }
  [data-page="contact"] .top-contact-note{
      padding: 0 calc(15 / var(--font-size)* 1rem);
  }
  .top-contact-note .c-list-item{
      justify-content: center;
      line-height: 1.8;
  }
  .top-contact-select{
      margin-top: calc(16 / var(--font-size)* 1rem);
  }
  .top-contact-select-list{

  }
  .top-contact-select-list-item{
      margin-top: calc(12 / var(--font-size)* 1rem);
      padding: calc(16 / var(--font-size)* 1rem);
      background: var(--white-color);
  }
  .top-contact-box .top-contact-select-list-item{
      margin-left: calc(-10 / var(--font-size)* 1rem);
      margin-right: calc(-10 / var(--font-size)* 1rem);
  }
  [data-page="contact"] .top-contact-box .top-contact-select-list-item{
      margin-left: 0;
      margin-right: 0;
  }
  .top-contact-select-list-item:nth-child(1){
      border: 1px solid var(--gray-color-300);
  }
  .top-contact-select-list-item:nth-child(2){
      border: 1px solid var(--purple-color-300);
  }
  .top-contact-select-list-item:nth-child(3){
      border: 1px solid var(--green-color-300);
  }
  .top-contact-select-list-item:nth-child(4){
      border: 1px solid var(--blue-color-300);
  }
  .top-contact-select-list-item:first-child{
      margin-top: 0;
  }
  [data-page="contact"] .top-contact-select-list-item{
      border: 1px solid transparent;
  }
  .top-contact-select-list-heading{
      display: flex;
      justify-content: flex-start;
      align-items: center;
  }
  .top-contact-select-list-heading__label{
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      flex-shrink: 0;
      font-size: calc(16 / var(--font-size)* 1rem);
      font-weight: bold;
  }
  .top-contact-select-list-heading__label em{
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(37 / 23* 1em);
      height: calc(37 / 23* 1em);
      margin-right: calc(2 / 23* 1em);
      border-radius: calc(37 / 23* 1em);
      text-align: center;
      font-size: calc(23 / 16* 100%);
      color: var(--white-color);
  }
  .top-contact-select-list-item:nth-child(1) .top-contact-select-list-heading__label em{
      background: var(--gray-color-500);
  }
  .top-contact-select-list-item:nth-child(2) .top-contact-select-list-heading__label em{
      background: var(--purple-color-500);
  }
  .top-contact-select-list-item:nth-child(3) .top-contact-select-list-heading__label em{
      background: var(--green-color-500);
  }
  .top-contact-select-list-item:nth-child(4) .top-contact-select-list-heading__label em{
      background: var(--blue-color-500);
  }
  .top-contact-select-list-cat__label{
      flex-grow: 1;
      margin-left: calc(8 / 14* 1em);
      font-size: calc(14 / var(--font-size)* 1rem);
      font-weight: bold;
  }
  .top-contact-select-list-cat__label em{
      font-size: calc(18 / 14* 100%);
  }
  .top-contact-select-list-item:nth-child(1) .top-contact-select-list-cat__label em{
      color: var(--gray-color-500);
  }
  .top-contact-select-list-item:nth-child(2) .top-contact-select-list-cat__label em{
      color: var(--purple-color-500);
  }
  .top-contact-select-list-item:nth-child(3) .top-contact-select-list-cat__label em{
      color: var(--green-color-500);
  }
  .top-contact-select-list-item:nth-child(4) .top-contact-select-list-cat__label em{
      color: var(--blue-color-500);
  }
  .top-contact-select-list-cat__label em > span{
      font-size: calc(14 / 18* 100%);
  }
  .top-contact-select-list-detail{
      margin-top: calc(6 / var(--font-size)* 1rem);
  }
  .top-contact-select-list-txt__label{
      line-height: 1.5;
      font-size: calc(14 / var(--font-size)* 1rem);
  }
  .top-contact-select-list-txt__label em{
      font-weight: bold;
  }
  .top-contact-select-list-item:nth-child(1) .top-contact-select-list-txt__label em{
      color: var(--gray-color-500);
  }
  .top-contact-select-list-item:nth-child(2) .top-contact-select-list-txt__label em{
      color: var(--purple-color-500);
  }
  .top-contact-select-list-item:nth-child(3) .top-contact-select-list-txt__label em{
      color: var(--green-color-500);
  }
  .top-contact-select-list-item:nth-child(4) .top-contact-select-list-txt__label em{
      color: var(--blue-color-500);
  }
  .top-contact-menu{
      padding-top: calc(20 / var(--font-size)* 1rem);
      color: var(--white-color);
  }
  .top-contact-menu:first-child{
      padding-top: 0;
  }
  .top-contact-menu__in{
      padding: 0 calc(20 / var(--font-size)* 1rem);
  }
  .top-contact-menu-list{
      display: flex;
      justify-content: center;
      align-items: flex-start;
  }
  .top-contact-menu-list-item{
      flex-shrink: 0;
      margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .top-contact-menu-list-item:first-child{
      margin-left: 0;
  }
  .top-contact-menu-list-txt__label{
      font-size: calc(10 / var(--font-size)* 1rem);
      line-height: 1.5;
  }
  .top-contact-menu-list-txt__label a{
      position: relative;
      display: inline-block;
      vertical-align: text-top;
      padding-left: calc(17 / var(--font-size) * 1rem);
      color: var(--white-color);
  }
  .top-contact-menu-list-txt__label a::after{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: calc(9 / var(--font-size) * 1rem);
      height: calc(8 / var(--font-size) * 1rem);
      margin-top: calc(1.5em / 2 - calc(8 / 2 / var(--font-size) * 1rem));
      background-image: url(../../assets/img/ico_arw_link.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: calc(9 / var(--font-size) * 1rem);
  }
  .top-contact-menu-list-txt__label a:hover{
      text-decoration: underline;
  }
}

@media all and (max-width: 374px), print {
  .top-contact-list__content{
      flex-direction: column;
      align-items: flex-start;
  }
  .top-contact-target{
      margin-right: 0;
      margin-bottom: calc(8 / var(--font-size)* 1rem);
  }
}
/* スケジュール */
@media all and (min-width: 768px) {
  .top-schedule__lead{
    text-align: center;
    margin-bottom: calc(36 / var(--font-size)* 1rem);
  }
  /* .schedule-table */
  .schedule-table {
    margin-top: calc(20 / var(--font-size)* 1rem);
  }
  .schedule-table__tr {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-bottom: var(--gray-color-300) 1px solid;
  }
  .schedule-table > .schedule-table__tr {
    border-right: var(--gray-color-300) 1px solid;
  }
  .schedule-table__tr .schedule-table__tr {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-bottom: none;
    border-top: var(--gray-color-300) 1px solid;
  }
  .schedule-table__tr--lv2 {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-bottom: none;
    border-top: var(--gray-color-300) 1px solid;
  }
  .schedule-table__tr--lv2:first-child {
    border-top: none;
  }
  .schedule-table__th--lv2 {
    display: table-cell;
    vertical-align: middle;
    border-right: var(--gray-color-300) 1px solid;
    width: 120px;
    text-align: center;
    padding: calc(16 / var(--font-size)* 1rem);
    font-weight: bold;
    font-size: 160%;
    line-height: 1.4;
  }
  .schedule-table__tr:first-child {
    border-top: var(--gray-color-300) 1px solid;
  }
  .schedule-table__tr:nth-child(2) .schedule-table__td-row {
    min-height: calc(60 / var(--font-size)* 1rem);
  }
  .schedule-table__tr .schedule-table__tr:first-child {
    border-top: none;
  }
  .schedule-table__th {
    display: table-cell;
    vertical-align: middle;
    border-left: var(--gray-color-300) 1px solid;
    border-right: var(--gray-color-300) 1px solid;
    width: calc(540 / var(--font-size)* 1rem);
    text-align: center;
    padding: calc(16 / var(--font-size)* 1rem);
    color: var(--primary-color-100);
    font-weight: bold;
    font-size: calc(18 / var(--font-size)* 1rem);
    line-height: 1.5;
    background-color: var(--gray-color-200);
  }
  .schedule-table__th + .schedule-table__th {
    border-left: none;
  }
  .schedule-table__tr .schedule-table__tr .schedule-table__th {
    border-left: none;
    background: #fff;
    color: var(--black-color);
    width: calc(270 / var(--font-size)* 1rem);
  }
  .schedule-table__tr.schedule-table--lv3 .schedule-table__tr .schedule-table__th {
    border-left: none;
    background: #fff;
    width: calc(270 / var(--font-size)* 1rem);
  }
  .schedule-table--lv2 .schedule-table__th {
    width: calc(540 / var(--font-size)* 1rem);
  }
  .schedule-table--lv3 .schedule-table__th {
    width: calc(270 / var(--font-size)* 1rem);
  }
  .schedule-table--lv4 .schedule-table__th {
    width: auto;
  }
  .schedule-table__th + .schedule-table__td {
    border-right: var(--gray-color-300) 1px solid;
  }
  .schedule-table__td {
    display: table-cell;
    vertical-align: middle;
  }
  .schedule-table__tr .schedule-table__tr .schedule-table__td--short {
    width: 80%;
    border-left: none;
  }
  div.schedule-table__td {
    border-left: none;
  }
  .schedule-table__td-row {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-top: var(--gray-color-300) 1px solid;
  }
  .schedule-table__td-row:first-child {
    border-top: none;
  }

  .schedule-table__td-col-main {
    display: table-cell;
    vertical-align: middle;
    padding: calc(16 / var(--font-size)* 1rem);
  }
  .schedule-note {
    margin-top: calc(16 / var(--font-size)* 1rem);
  }
}

@media all and (min-width: 768px) and (max-width: 980px) {
  /* .schedule-table */
  .schedule-table__th {
    width: calc(360 / var(--font-size)* 1rem);
  }
  .schedule-table--lv2 .schedule-table__th {
    width: calc(360 / var(--font-size)* 1rem);
  }
  .schedule-table--lv3 .schedule-table__th {
    width: calc(180 / var(--font-size)* 1rem);
  }
  .schedule-table__tr.schedule-table--lv3 .schedule-table__tr .schedule-table__th {
    width: calc(180 / var(--font-size)* 1rem);
  }
}

@media all and (max-width: 767px) {
  .top-schedule__lead{
    margin-bottom: calc(24 / var(--font-size)* 1rem);
  }
  /* .schedule-table */
  .schedule-table {
    margin-top: calc(20 / var(--font-size)* 1rem);
  }
  .schedule-table__tr {
    margin-top: 15px;
  }
  .schedule-table__tr:first-child {
    margin-top: 0;
  }
  .schedule-table__tr .schedule-table__tr:first-child {
    border-top: none;
  }
  .schedule-table__tr .schedule-table__tr {
    margin-top: 0;
  }
  .schedule-table__th {
    border: var(--gray-color-300) 1px solid;
    text-align: center;
    padding: calc(8 / var(--font-size)* 1rem);
    color: var(--primary-color-100);
    font-weight: bold;
    font-size: calc(14 / var(--font-size)* 1rem);
    line-height: 1.5;
    background-color: var(--gray-color-200);
  }
  .schedule-table__th--lv2 {
    border: var(--gray-color-300) 1px solid;
    border-top: none;
    text-align: center;
    padding: calc(8 / var(--font-size)* 1rem);
    color: var(--primary-color-100);
    font-weight: bold;
    font-size: calc(14 / var(--font-size)* 1rem);
    line-height: 1.5;
    background-color: var(--gray-color-200);
  }
  .schedule-table__tr .schedule-table__tr .schedule-table__th {
    border-top: none;
    text-align: left;
  }
  .schedule-table__td-row {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-bottom: var(--gray-color-300) 1px solid;
  }
  .schedule-table__td-row:first-child {
    border-top: none;
  }
  .schedule-table__td-col-sub {
    display: table-cell;
    vertical-align: middle;
    border-right: var(--gray-color-300) 1px solid;
    border-left: var(--gray-color-300) 1px solid;
    text-align: center;
    padding: calc(8 / var(--font-size)* 1rem);
  }
  .schedule-table__td-col-main + .schedule-table__td-col-sub {
    border-left: transparent 1px solid;
  }
  .schedule-table__td-col-main {
    display: table-cell;
    vertical-align: middle;
    border-right: var(--gray-color-300) 1px solid;
    border-left: var(--gray-color-300) 1px solid;
    padding: calc(8 / var(--font-size)* 1rem);
    font-size: calc(14 / var(--font-size)* 1rem);
  }
  .schedule-note {
    margin-top: calc(8 / var(--font-size)* 1rem);
  }
}

/* --------------------------------------------------------------------------
  SMB
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .top-smb .c-box-header{
      --primary-color-100: var(--blue-color-500);
  }
  .top-smb .top-flow-heading .c-header-title,
  .top-smb .top-movie-heading .c-header-title{
      --header-color: var(--primary-color-100);
  }
  .top-smb .top-box{
      --box-bg-color: var(--blue-color-500);
      --box-title-color: var(--white-color);
      --box-deco-color: var(--white-color);
      --box-txt-color: var(--white-color);
      padding-top: calc(58 / var(--font-size)* 1rem);
      padding-bottom: calc(58 / var(--font-size)* 1rem);
      color: var(--white-color);
  }
  .top-smb__body{
      padding-top: calc(42 / var(--font-size)* 1rem);
  }
  [data-page="top"] .top-smb__body{
      padding-top: calc(80 / var(--font-size)* 1rem);
      padding-bottom: calc(78 / var(--font-size)* 1rem);
  }
  .top-smb__anchor {
      margin-bottom: calc(58 / var(--font-size)* 1rem);
  }
  .top-smb__lead{
    text-align: center;
    margin-bottom: calc(36 / var(--font-size)* 1rem);
  }
  .top-smb-note{
      text-align: center;
      margin-bottom: calc(30 / var(--font-size)* 1rem);
  }
  .top-smb-video{
    background-color: #e5e5e5;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 300ms ease;
  }
  .top-smb-video .movie-thum {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .top-smb-video .movie-object{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .top-smb-video .triangle{
    display: block;
    height: calc(tan(60deg)* 60px / 2);
    width: 42px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: var(--white-color);
    position: absolute;
    top: calc((100% - 40px) / 2);
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
  .top-smb-heading{
      font-size: calc(24 / var(--font-size)* 1rem);
      font-weight: bold;
      text-align: center;
      margin-bottom: calc(36 / var(--font-size)* 1rem);
  }
  .top-smb-btn + .top-smb-btn{
      margin-top: calc(56 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-smb__flow{
      margin-top: calc(64 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-smb__movie{
    margin-top: calc(64 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-smb__download{
      margin-top: calc(88 / var(--font-size)* 1rem);
  }
  .l-sec__container.top-smb__schdule{
      margin-top: calc(88 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px) {
.top-smb .c-box-header{
    --primary-color-100: var(--blue-color-500);
}
.top-smb .top-flow-heading .c-header-title,
.top-smb .top-movie-heading .c-header-title{
    --header-color: var(--primary-color-100);
}
.top-smb .top-box{
    --box-bg-color: var(--blue-color-500);
    --box-title-color: var(--white-color);
    --box-deco-color: var(--white-color);
    --box-txt-color: var(--white-color);
    padding-top: calc(32 / var(--font-size)* 1rem);
    padding-bottom: calc(36 / var(--font-size)* 1rem);
    color: var(--white-color);
}
.top-smb__body{
    padding-top: calc(40 / var(--font-size)* 1rem);
}
[data-page="top"] .top-smb__body{
    padding-bottom: calc(64 / var(--font-size)* 1rem);
}
.top-smb__anchor {
    margin-bottom: calc(40 / var(--font-size)* 1rem);
}
.top-smb__lead{
  margin-bottom: calc(24 / var(--font-size)* 1rem);
}
.top-smb-note{
  text-align: center;
  margin-bottom: calc(26 / var(--font-size)* 1rem);
  line-height: 1.5;
}
.top-smb-video{
  background-color: #e5e5e5;
  margin: 0 auto;
  width: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 300ms ease;
}
.top-smb-video .movie-thum {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.top-smb-video .movie-object{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.top-smb-video .triangle{
  display: block;
  height: calc(tan(60deg)* 60px / 2);
  width: 42px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: var(--white-color);
  position: absolute;
  top: calc((100% - 40px) / 2);
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
}
.top-smb-heading{
    font-size: calc(24 / var(--font-size)* 1rem);
    font-weight: bold;
    text-align: center;
    margin-bottom: calc(22 / var(--font-size)* 1rem);
}
.top-smb-btn + .top-smb-btn{
    margin-top: calc(26 / var(--font-size)* 1rem);
}
.l-sec__container.top-smb__flow{
    margin-top: calc(36 / var(--font-size)* 1rem);
}
.l-sec__container.top-smb__movie{
    margin-top: calc(36 / var(--font-size)* 1rem);
}
.l-sec__container.top-smb__download{
    margin-top: calc(46 / var(--font-size)* 1rem);
}
.l-sec__container.top-smb__schdule{
    margin-top: calc(42 / var(--font-size)* 1rem);
}
.l-sec__container + .u-buffer + .top-smb__schdule{
    margin-top: calc(42 / var(--font-size)* 1rem);
}
.top-smb__schdule + .u-buffer + .top-smb__schdule{
    margin-top: calc(76 / var(--font-size) * 1rem);
}
.top-smb-flow .top-flow-heading{
    margin-bottom: calc(24 / var(--font-size)* 1rem);
}
.top-smb-movie .top-movie-heading{
    margin-bottom: calc(24 / var(--font-size)* 1rem);
}
.top-smb__footer{
    margin-top: calc(30 / var(--font-size)* 1rem);
}
}

/* --------------------------------------------------------------------------
announcement
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .top-purpose__announcement{
    margin-bottom: calc(76 / var(--font-size)* 1rem);
  }
  .announcement-link-txt {
    color: var(--deep-blue-500);
    text-decoration: underline;
  }
  .announcement-link-txt:hover {
    text-decoration: none;
  }
  .top-purpose__announcement .c-link-txt::after {
    content: none;
  }
}

@media all and (max-width: 767px) {
  .top-purpose__announcement{
    margin-bottom: calc(76 / var(--font-size)* 1rem);
  }
  .announcement-link-txt {
    color: var(--deep-blue-500);
    text-decoration: underline;
  }
  .announcement-link-txt:hover {
    text-decoration: none;
  }
  .top-purpose__announcement .c-link-txt::after {
    content: none;
  }
}

@media all and (min-width: 768px){
  .js-accordion-container {
    transition: all 0.3s;
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .js-accordion.is-opened-accordion .js-accordion-container {
    display: block;
    opacity: 1;
    visibility: visible;
    margin-top: 10px;
  }
}
@media all and (max-width: 767px){
  .js-accordion-container {
    transition: all 0.3s;
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .js-accordion.is-opened-accordion .js-accordion-container {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

@media all and (min-width: 768px), print {
  .announcement-result{
  }
  .announcement-accordion__inner{
  }
  .announcement-result-title{
    margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .announcement-result-list{
  }
  .announcement-result-list-item{
  }
  .announcement-result-list-item + .announcement-result-list-item{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .announcement-result-list-item__inner{
  }
  .announcement-accordion__head{
    border: 1px solid var(--red-color-100);
  }
  .is-opened-accordion .announcement-accordion__head{
    /* border-bottom: 1px solid var(--red-color-100); */
  }
  .announcement-accordion-title{
    cursor: pointer;
    padding: calc(20 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
  }
  .announcement-accordion-title__inner{
    position: relative;
    padding-right:calc(46 / var(--font-size) * 1rem);
  }
  .announcement-accordion-title-text{
    line-height: 1.8;
  }
  .announcement-accordion-title-text__label{
    color: var(--red-color-100);
    --txt-font-size: 18;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .announcement-accordion-title-ico{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(16 / var(--font-size)* 1rem);
    height: 100%;
    display: flex;
    align-items: center;
  }
  .announcement-accordion-title-ico__label{
    position: relative;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
  }
  .announcement-accordion-title-ico__label::before, .announcement-accordion-title-ico__label::after{
    content: "";
    display: block;
    position: absolute;
    background-color: var(--red-color-100);
    transition: all 0.3s;
  }
  .announcement-accordion-title-ico__label::before{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: calc(2 / var(--font-size)* 1rem);
  }
  .announcement-accordion-title-ico__label::after{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(2 / var(--font-size)* 1rem);
    height: 100%;
  }
  .is-opened-accordion .announcement-accordion-title-ico__label::after{
    transform: translateX(-50%) rotate(90deg);
  }
  .announcement-accordion-detail{
    padding: calc(10 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
    background-color: var(--primary-color-10);
    border-bottom-right-radius: calc(5 / var(--font-size)* 1rem);
    border-bottom-left-radius: calc(5 / var(--font-size)* 1rem);
  }
  .announcement-accordion-detail__inner{
    position: relative;
  }
  .announcement-accordion-detail-content{
  }
  .announcement-accordion-detail-content__in{
  }
  .announcement-accordion-detail-content__in .c-txt + .c-txt{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .announcement-accordion-detail-content__in .c-txt + .c-note{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .announcement-accordion-detail-content-table{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px) {
  .announcement-result{
    counter-reset: number 0;
  }
  .announcement-accordion__inner{
  }
  .announcement-result-title{
    margin-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .announcement-result-list{
  }
  .announcement-result-list-item{
  }
  .announcement-result-list-item + .announcement-result-list-item{
    margin-top: calc(10 / var(--font-size) * 1rem);
  }
  .announcement-result-list-item__inner{
  }
  .announcement-accordion__head{
    border: 1px solid var(--red-color-100);
  }
  .is-opened-accordion .announcement-accordion__head{
  }
  .announcement-accordion-title{
    cursor: pointer;
    padding: calc(14 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
  }
  .announcement-accordion-title__inner{
    position: relative;
    padding-right:calc(30 / var(--font-size) * 1rem);
  }
  .announcement-accordion-title-text{
    line-height: 1.5;
  }
  .announcement-accordion-title-text__label{
    color: var(--red-color-100);
    --txt-font-size: 16;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .announcement-accordion-title-ico{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(16 / var(--font-size)* 1rem);
    height: 100%;
    display: flex;
    align-items: center;
  }
  .announcement-accordion-title-ico__label{
    position: relative;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
  }
  .announcement-accordion-title-ico__label::before, .announcement-accordion-title-ico__label::after{
    content: "";
    display: block;
    position: absolute;
    border-radius: 9999px;
    background-color: var(--red-color-100);
    transition: all 0.3s;
  }
  .announcement-accordion-title-ico__label::before{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: calc(1 / var(--font-size)* 1rem);
  }
  .announcement-accordion-title-ico__label::after{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(1 / var(--font-size)* 1rem);
    height: 100%;
  }
  .is-opened-accordion .announcement-accordion-title-ico__label::after{
    transform: translateX(-50%) rotate(90deg);
  }
  .announcement-accordion__body{
  }
  .announcement-accordion-detail{
    padding: calc(10 / var(--font-size) * 1rem) calc(14 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
    background-color: var(--primary-color-10);
    border-bottom-right-radius: calc(5 / var(--font-size)* 1rem);
    border-bottom-left-radius: calc(5 / var(--font-size)* 1rem);
  }
  .announcement-accordion-detail__inner{
    position: relative;
  }
  .announcement-accordion-detail-content{

  }
  .announcement-accordion-detail-content__in{
  }
  .announcement-accordion-detail-content__in .c-txt + .c-txt{
    margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .announcement-accordion-detail-content__in .c-txt + .c-note{
    margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .announcement-accordion-detail-content .c-txt{
    --txt-font-size: 14;
    --txt-line-height: 1.5;
  }
  .announcement-accordion-detail-content .c-note{
    --note-txt-font-size: 14;
    --note-line-height: 1.5;
  }
  .announcement-accordion-detail-content-table{
    margin-top: calc(20 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .announcement-accordion-detail-content-table .c-table{
    margin-left: 0;
    margin-right: 0;
  }
  .announcement-accordion-detail-content-table .c-table-chart{
    margin-left: 0;
  }
  .announcement-accordion-detail-content-table .c-table-chart::after{
    content: none;
  }
}

/* --------------------------------------------------------------------------
  CATALOG
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .top-catalog{
    position: relative;
  }
  [data-page="top"] .top-catalog::before, [data-page="top"] .top-catalog::after{
    content: "";
    position: absolute;
    width: calc(433 / var(--font-size)* 1rem);
    height: calc(433 / var(--font-size)* 1rem);
    background-repeat: no-repeat;
    background-size: contain;
  }
  [data-page="top"] .top-catalog::before{
    top: 0;
    right: 0;
    background-image: url(../../assets/img/catalog_bg01.png);
    background-position: top right;
  }
  [data-page="top"] .top-catalog::after{
    bottom: 0;
    left: 0;
    background-image: url(../../assets/img/catalog_bg02.png);
    background-position: bottom left;
  }
  .top-catalog__in{

  }
  .top-catalog__body{
    padding-bottom: calc(80 / var(--font-size)* 1rem);
  }
  .top-catalog__container{

  }
  .top-catalog__header{
    margin-bottom: calc(48 / var(--font-size)* 1rem);
  }
  .top-catalog__content{

  }
  .top-catalog-column{
    display: flex;
    gap: calc(50 / var(--font-size)* 1rem);
    justify-content: center;
    align-items: flex-end;
  }
  .top-catalog-column__item{

  }
  .top-catalog-column__item-txt{
    width: calc(354 / var(--font-size)* 1rem);
    flex-shrink: 0;
  }
  .top-catalog-column__item-img{
    display: flex;
    align-items: center;
    max-width: calc(283 / var(--font-size)* 1rem);
    width: 100%;
  }
  .top-catalog-column_lead{

  }
  .top-catalog-column__btn{
    margin-top: calc(26 / var(--font-size)* 1rem);
  }
  .top-catalog-column__btn .l-btn-list-item{
    max-width: calc(390 / var(--font-size)* 1rem);
    margin-left: auto;
    margin-right: auto;
  }
  .top-catalog-column__btn .c-btn{
    --btn-min-height: 80;
  }
  .top-catalog-column__figure{

  }
}

@media all and (min-width: 768px) and (max-width: 960px), print {
  .top-catalog-column{
    gap: calc(24 / var(--font-size)* 1rem);
  }
  .top-catalog-column__item-txt{
    width: calc(360 / var(--font-size)* 1rem);
  }
}

@media all and (max-width: 767px) {
  .top-catalog{
    position: relative;
  }
  [data-page="top"] .top-catalog::before, [data-page="top"] .top-catalog::after{
    content: "";
    position: absolute;
    width: calc(265 / var(--font-size)* 1rem);
    height: calc(265 / var(--font-size)* 1rem);
    background-repeat: no-repeat;
    background-size: contain;
  }
  [data-page="top"] .top-catalog::before{
    top: 0;
    right: 0;
    background-image: url(../../assets/img/catalog_bg01.png);
    background-position: top right;
  }
  [data-page="top"] .top-catalog::after{
    bottom: 0;
    left: 0;
    background-image: url(../../assets/img/catalog_bg02.png);
    background-position: bottom left;
  }
  .top-catalog__in{

  }
  .top-catalog__body{
    padding-bottom: calc(48 / var(--font-size)* 1rem);
  }
  .top-catalog__container{

  }
  .top-catalog__header{
    margin-bottom: calc(24 / var(--font-size)* 1rem);
  }
  .top-catalog__content{

  }
  .top-catalog-column{
    display: flex;
    flex-direction: column-reverse;
    gap: calc(24 / var(--font-size)* 1rem);
    justify-content: center;
  }
  .top-catalog-column__item{

  }
  .top-catalog-column__item-txt{
  }
  .top-catalog-column__item-img{
  }
  .top-catalog-column_lead{

  }
  .top-catalog-column__btn{
    margin-top: calc(22 / var(--font-size)* 1rem);
  }
  .top-catalog-column__btn .l-btn-list-item{
    max-width: calc(280 / var(--font-size)* 1rem);
    margin-left: auto;
    margin-right: auto;
  }
  .top-catalog-column__btn .c-btn{
    --btn-min-height: 70;
    --btn-txt-font-size: 16;
    --btn-px: 14;
  }
  .top-catalog-column__figure{
    max-width: calc(279 / var(--font-size)* 1rem);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(22 / var(--font-size)* 1rem);
  }
}
/* --------------------------------------------------------------------------
  Effect
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .effect-about-sec__lead {
    text-align: center;
  }
  .effect-result{
    /* counter-reset: number 0; */
  }
  .effect-accordion__inner{
  }
  .effect-result-list{
  }
  .effect-result-list-item{
  }
  .effect-result-list-item + .effect-result-list-item{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .effect-result-list-item__inner{
  }
  .effect-accordion__head{
    border: 1px solid var(--deep-blue-500);
  }
  .is-opened-accordion .effect-accordion__head{
  }
  .effect-accordion-question{
    cursor: pointer;
    padding: calc(20 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
  }
  .effect-accordion-question__inner{
    position: relative;
    padding-right:calc(46 / var(--font-size) * 1rem);
  }
  .effect-accordion-question-text{
    line-height: 1.8;
  }
  .effect-accordion-question-text__label{
    color: var(--deep-blue-500);
    --txt-font-size: 18;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .effect-accordion-question-ico{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(16 / var(--font-size)* 1rem);
    height: 100%;
    display: flex;
    margin-top: 0.4em;
  }
  .effect-accordion-question-ico__label{
    position: relative;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
  }
  .effect-accordion-question-ico__label::before,
  .effect-accordion-question-ico__label::after{
    content: "";
    display: block;
    position: absolute;
    background-color: var(--black-color);
    transition: all 0.3s;
  }
  .effect-accordion-question-ico__label::before{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: calc(2 / var(--font-size)* 1rem);
  }
  .effect-accordion-question-ico__label::after{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(2 / var(--font-size)* 1rem);
    height: 100%;
  }
  .is-opened-accordion .effect-accordion-question-ico__label::after{
    transform: translateX(-50%) rotate(90deg);
  }
  .js-accordion.is-opened-accordion .effect-accordion__body {
    margin: calc(32/ var(--font-size) * 1rem) 0 calc(50/ var(--font-size) * 1rem);
  }
  .effect-accordion-answer{
  }
  .effect-accordion-answer__inner{
    position: relative;
  }
  .effect-accordion-answer__inner::before{
  }
  .effect-accordion-answer-content{
  }
  .effect-accordion-answer-content__in{
  }
  .effect-accordion-answer-content__in .c-txt + .c-txt{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .effect-accordion-answer-content__in .c-list-item__in .c-txt + .c-txt{
    margin-top: calc(0 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px) {
  .effect-result{
  }
  .effect-accordion__inner{
  }
  .effect-result-list{
  }
  .effect-result-list-item{
  }
  .effect-result-list-item + .effect-result-list-item{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .effect-result-list-item__inner{
  }
  .effect-accordion__head{
    border: 1px solid var(--deep-blue-500);
  }
  .is-opened-accordion .effect-accordion__head{
  }
  .effect-accordion-question{
    cursor: pointer;
    padding: calc(16 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem) calc(23 / var(--font-size) * 1rem);
  }
  .effect-accordion-question__inner{
    position: relative;
    padding-right:calc(30 / var(--font-size) * 1rem);
  }
  .effect-accordion-question-text{
    line-height: 1.5;
  }
  .effect-accordion-question-text__label{
    color: var(--deep-blue-500);
    --txt-font-size: 16;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .effect-accordion-question-ico{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(16 / var(--font-size)* 1rem);
    height: 100%;
    display: flex;
    margin-top: 0.4em;
  }
  .effect-accordion-question-ico__label{
    position: relative;
    width: calc(16 / var(--font-size)* 1rem);
    height: calc(16 / var(--font-size)* 1rem);
  }
  .effect-accordion-question-ico__label::before, .effect-accordion-question-ico__label::after{
    content: "";
    display: block;
    position: absolute;
    border-radius: 9999px;
    background-color: var(--black-color);
    transition: all 0.3s;
  }
  .effect-accordion-question-ico__label::before{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: calc(1 / var(--font-size)* 1rem);
  }
  .effect-accordion-question-ico__label::after{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(1 / var(--font-size)* 1rem);
    height: 100%;
  }
  .is-opened-accordion .effect-accordion-question-ico__label::after{
    transform: translateX(-50%) rotate(90deg);
  }
  .effect-accordion__body{
  }
  .js-accordion.is-opened-accordion .effect-accordion__body {
    margin: calc(18 / var(--font-size) * 1rem) 0;
  }
  .effect-accordion-answer{
  }
  .effect-accordion-answer__inner{
    position: relative;
  }
  .effect-accordion-answer__inner::before{
  }
  .effect-accordion-answer-content{
  }
  .effect-accordion-answer-content__in{
  }
  .effect-accordion-answer-content__in .c-txt + .c-txt{
    margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .effect-accordion-answer-content__in .c-list-item__in .c-txt + .c-txt{
    margin-top: calc(0 / var(--font-size) * 1rem);
  }
  .effect-accordion-answer-content .c-txt{
    --txt-font-size: 14;
    --txt-line-height: 1.5;
  }
}