@charset "UTF-8";

/* ※注意※ SMACSS的構造にしているが、クラス名・定義は既存JUST.DBオンカタに準じて定義している */
@layer base, layout, module, state, theme, project, utility;

/* ---- 基本設定 ------------------------------------------------ */
@layer base {

  /* ---- 基本定義 -------------------------------- */
  :root {
    /* ---- 変数定義 ---------------- */
    /* ロゴカラー */
    --color-fastask-blue: #4285f4;
    --color-fastask-blue-dec: 66 133 244;
    --color-sprint-green: #10d081;
    --color-sprint-green-dec: 16 208 129;

    /* MRCカラー名定義 */
    --color-grayishwhite: #FBFCFD;
    --color-grayishwhite-dec: 251 252 253;
    --color-charcoal: #272930;
    --color-charcoal-dec: 39 41 48;
    --color-gray: #939497;
    --color-gray-dec: 147 148 151;
    --color-sky: #7ed2ff;
    --color-sky-dec: 126 210 255;
    --color-dustysky: #80b6dc;
    --color-dustysky-dec: 128 182 220;
    --color-lightcerulean: #4687b8;
    --color-lightcerulean-dec: 70 135 184;
    --color-lightcyan: #69b6e4;
    --color-lightcyan-dec: 105 182 228;
    --color-cerulean: #3282ba;
    --color-cerulean-dec: 50 130 186;
    --color-indigo: #255c8d;
    --color-indigo-dec: 37 92 141;
    --color-prussian: #1b446c;
    --color-prussian-dec: 27 68 108;
    --color-navy: #022e62;
    --color-navy-dec: 2 46 98;
    --color-darknavy: #00244e;
    --color-darknavy-dec: 0 36 78;
    --color-darknavy-40: #99a7b8;
    --color-darknavy-40-dec: 153 167 184;
    --color-mandarin-orange: #f39e2f;
    --color-mandarin-orange-dec: 243 158 47;
    --color-chrome-yellow: #f3c52f;
    --color-chrome-yellow-dec: 243 197 47;

    /* MRC用途カラー定義 */
    --color-body-bg: var(--color-grayishwhite);
    --color-text-black: black;
    --color-text-black-dec: 0 0 0;
    --color-text-charcoal: var(--color-charcoal);
    --color-text-charcoal-dec: var(--color-charcoal-dec);
    --color-text-gray: var(--color-gray);
    --color-text-gray-dec: var(--color-gray-dec);
    --color-text-blue: var(--color-indigo);
    --color-text-blue-dec: var(--color-indigo-dec);
    --color-text-link: var(--color-indigo);
    --color-text-link-dec: var(--color-indigo-dec);
    --color-text-link-hover: var(--color-cerulean);
    --color-text-link-hover-dec: var(--color-cerulean-dec);
    --color-footer-text-lighter: white;
    --color-footer-text-light: var(--color-grayishwhite);
    --color-footer-text-link-hover: var(--color-lightcyan);
    --color-button-blue: var(--color-indigo);
    --color-button-blue-dec: var(--color-indigo-dec);
    --color-keyword-blue: var(--color-cerulean);
    --color-keyword-blue-dec: var(--color-cerulean-dec);
    --color-category-blue: var(--color-cerulean);
    --color-category-blue-dec: var(--color-cerulean-dec);
    --color-footer-bg-light: var(--color-prussian);
    --color-footer-bg-light-dec: var(--color-prussian-dec);
    --color-footer-bg-dark: var(--color-navy);
    --color-footer-bg-dark-dec: var(--color-navy-dec);
    --color-button-light: var(--color-cerulean);
    --color-button-light-dec: var(--color-cerulean-dec);
    --color-button-dark: var(--color-prussian);
    --color-button-dark-dec: var(--color-prussian-dec);
    --color-button-hover-light: var(--color-lightcyan);
    --color-button-hover-light-dec: var(--color-lightcyan-dec);
    --color-button-hover-dark: var(--color-cerulean);
    --color-button-hover-dark-dec: var(--color-cerulean-dec);
    --color-menu-bg: var(--color-darknavy);
    --color-menu-bg-dec: var(--color-darknavy-dec);
    --color-menu-switch: var(--color-navy);
    --color-menu-switch-dec: var(--color-navy-dec);
    --color-menu-link-border: var(--color-darknavy-40);
    --color-icon-light: var(--color-dustysky);
    --color-icon-light-dec: var(--color-dustysky-dec);
    --color-icon-dark: var(--color-lightcerulean);
    --color-icon-dark-dec: var(--color-lightcerulean-dec);
    --color-side-marker-light: var(--color-cerulean);
    --color-side-marker-deep: var(--color-prussian);
    --color-side-marker-dark: var(--color-navy);
    --color-scrolltop: var(--color-lightcerulean);
    --color-cta-text-link: var(--color-indigo);
    --color-cta-text-link-hover: var(--color-cerulean);
    --color-cta-button: var(--color-mandarin-orange);
    --color-cta-button-hover: var(--color-chrome-yellow);
    --color-slider-arrow-bg: var(--color-indigo);
    --color-list-title-bar: var(--color-indigo);
    --color-report-download: var(--color-mandarin-orange);

    /* サイズ［JSで動的に定義］ */
    --scrollbar-width: 0;

    /* コンテナサイズ */
    --viewport-width: calc(100vw - var(--scrollbar-width));
    --container-base-width: 86vw;
    --container-max-width: 1440px;
    --container-width: min(calc(var(--container-base-width) - var(--scrollbar-width)), var(--container-max-width));
    --container-margin: calc(calc(var(--viewport-width) - var(--container-width)) / 2);

    /* ヘッダサイズ */
    --header-inline-margin: clamp(16px, 3.2vw, 32px);
    --header-block-margin: clamp(12px, 2.4vw, 24px);
    --header-height: clamp(48px, 7.2vw, 72px);
    --header-safe-margin: calc(var(--header-height) + calc(var(--header-block-margin) * 2));
    /* ヘッダサイズ［JSで動的に定義］ */
    --header-width: calc(100vw - calc(var(--header-inline-margin) * 2));
    /* --header-width: calc(var(--viewport-width) - calc(var(--header-inline-margin) * 2)); */

    /* セクションマージンサイズ */
    --section-block-margin: clamp(60px, 12vw, 120px);

    /* グラデーション角度 */
    --angle-left-upper: 104deg;

    /* 影の濃度 */
    --shade-normal: 0.16;

    /* 透明度 */
    --opacity-hover-text: 0.7;
    --opacity-hover-image: 0.5;

    /* ---- ルート基本設定 ---------------- */
    font-size: clamp(14px, 3.5vw, 16px);
    font-feature-settings: 'palt';
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--color-body-text);
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    text-align: justify;
    scroll-behavior: smooth;

    @media screen and (max-width: 500px) {
      font-size: clamp(14px, 3.85vw, 17px);
    }
  }

  /* ---- html・body -------------------------------- */
  html,
  body {
    min-height: 100vh;
    min-height: 100dvh;
  }

  body {
    margin: 0;
    padding: 0;
    background-color: var(--color-body-bg);
    /*
    font-size: 0;
    font-family: 'Noto Sans JP', sans-serif;
    color: #070b0f;
    */
  }

  /*
  @media only screen and (max-width: 500px) {
    body {
      font-family: 'Hiragino Kaku Gothic Pro';
    }
  }

  p {
    letter-spacing: 1.5px;
    line-height: 1.8;
  }
*/

  a {
    text-decoration: none;
    color: var(--color-text-black);
    /* color: #070b0f; */
  }

  ul {
    list-style: none;
  }

  /* CSS Containment */
  .cta,
  .list_secondary,
  .content,
  .lab-contents,
  footer {
    content-visibility: auto;
    contain: content;
  }

  .article-contents,
  .side-contents,
  .downloadItem {
    /* content-visibility: auto; */
    contain: layout;
  }
}

/* ---- レイアウト ------------------------------------------------ */
@layer layout {

  /* ---- グローバルメニュー -------------------------------- */
  .menu .menu-bar {
    top: var(--header-block-margin);
    left: var(--header-inline-margin);
    width: var(--header-width);
    /*
    width: calc(100vw - 64px);
    height: clamp(45px, 9.33vw, 70px);
    */
  }

  /* ---- コンテナ -------------------------------- */
  /* main #lab div.container { */
  .container {
    width: var(--viewport-width);
    /* width: 100%; */
  }

  /* ---- トップページ用.container-inner ---------------- */
  /* main #lab div.container div.container-inner { */
  .container .container-inner {
    width: var(--container-width);
    /* width: min(90%, 1440px); */
    margin-inline: auto;
  }

  /* ---- 一覧ページ用.container-inner ---------------- */
  .container .container-inner:has(.list-contents) {
    display: grid;
    grid-template-columns: 83.33% 13.89%;
    column-gap: clamp(20px, 5.33vw, 40px);
    width: var(--container-width);
    margin-inline: auto;
  }

  @media screen and (max-width: 1000px) {
    .container .container-inner:has(.list-contents) {
      grid-template-columns: 100%;
    }
  }

  /* ---- 記事ページ用.container-inner ---------------- */
  .container .container-inner:has(.article-contents) {
    display: grid;
    grid-template-columns: 69.44% 27.78%;
    column-gap: clamp(20px, 5.33vw, 40px);
    width: var(--container-width);
    margin-inline: auto;
  }

  @media only screen and (max-width: 1000px) {
    .container .container-inner:has(.article-contents) {
      grid-template-columns: 100%;
    }
  }

  /* ---- サイドバー -------------------------------- */
  @media only screen and (max-width: 1000px) {
    main #lab div.container div.container-inner section.side-contents {
      display: none;
    }
  }

  /* ---- トップページ ファーストビュー -------------------------------- */
  .firstview {
    height: clamp(190px, 63.33vw, 380px);
  }
}

/* ---- スタイル設定 ------------------------------------------------ */
@layer module {

  /* ---- リンク -------------------------------- */
  a.link-color {
    color: var(--color-text-link);
  }

  a.link-color {
    text-decoration: underline !important;
  }

  a.link-color:hover {
    color: var(--color-text-link-hover);
  }

  /* ---- SVGアイコンカラー定義 -------------------------------- */
  .icon-color-light {
    fill: var(--color-icon-light);
  }

  .icon-color-dark {
    fill: var(--color-icon-dark);
  }

  .menu-switch {
    & svg {
      fill: var(--color-menu-switch);

    }
  }

  /* ---- ガラスエフェクト -------------------------------- */
  .grass_container {
    --edge-width: 1px;
    --blur-width: 0.3px;
    --shadow-width: 10px;
    --corner-radius: 10px;
    --brightness: 1.1;
    --top-left-light: 0.35;
    --top-left-high-light: 0.45;
    --top-left-edge-shadow: 0.1;
    --bottom-right-light: 0.25;
    --bottom-right-high-light: 0.4;
    --bottom-right-edge-shadow: 0.1;
    position: relative;
    z-index: 0;
  }

  .grass_material {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: var(--corner-radius);
    contain: content;
    overflow: hidden;

    & .grass_blur {
      position: absolute;
      z-index: 0;
      inset: -5px;
      backdrop-filter: blur(var(--blur-width)) brightness(var(--brightness));
    }

    & .grass_top_left {
      position: absolute;
      z-index: -1;
      inset: 0 calc(var(--shadow-width) * -2) calc(var(--shadow-width) * -2) 0;
      border: var(--edge-width) solid rgb(255 255 255 / var(--top-left-light));
      border-radius: var(--corner-radius);
      box-shadow: inset 0 0 var(--shadow-width) rgb(0 0 0 / var(--top-left-edge-shadow));

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: calc(var(--edge-width) * -1);
        left: calc(var(--edge-width) * -1);
        width: calc(var(--corner-radius) * 2);
        height: calc(var(--corner-radius) * 2);
        border-radius: var(--corner-radius);
        padding: var(--edge-width);
        background: linear-gradient(135deg, rgb(255 255 255 / var(--top-left-high-light)) 15%, rgb(255 255 255 / 0) 33.3%);
        mask: linear-gradient(white) center / cover luminance subtract,
          linear-gradient(white) center / cover luminance content-box;
      }
    }

    & .grass_bottom_right {
      position: absolute;
      z-index: -1;
      inset: calc(var(--shadow-width) * -2) 0 0 calc(var(--shadow-width) * -2);
      border: var(--edge-width) solid rgb(255 255 255 / var(--bottom-right-light));
      border-radius: var(--corner-radius);
      box-shadow: inset 0 0 var(--shadow-width) rgb(252 255 255 / var(--bottom-right-edge-shadow));

      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: calc(var(--edge-width) * -1);
        right: calc(var(--edge-width) * -1);
        width: calc(var(--corner-radius) * 2);
        height: calc(var(--corner-radius) * 2);
        padding: var(--edge-width);
        border-radius: var(--corner-radius);
        background: linear-gradient(135deg, rgb(255 255 255 / 0) 66.7%, rgb(255 255 255 / var(--bottom-right-high-light)) 85%);
        mask: linear-gradient(white) center / cover luminance subtract,
          linear-gradient(white) center / cover luminance content-box;
      }
    }
  }

  /* ---- トップにスムーススクロールするボタン -------------------------------- */
  section.scrolltop .arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
  }

  section.scrolltop .arrow::after,
  section.scrolltop .arrow::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    vertical-align: middle;
  }

  section.scrolltop .arrow_up::before {
    top: auto;
    left: 19px;
    bottom: 15px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(14px) rotate(-45deg);
  }

  section.scrolltop #btn-backtotop {
    position: fixed;
    bottom: 10px;
    right: 5px;
    z-index: 1000;
    transition: all 1s ease-out;
    transition: bottom 0.2s ease-out;
    opacity: 0;
  }

  section.scrolltop #btn-backtotop.fadein {
    opacity: 1;
  }

  section.scrolltop #btn-backtotop:hover {
    opacity: .8;
    bottom: 10px;
  }

  section.scrolltop #btn-backtotop:hover::after {
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
  }

  @media only screen and (max-width: 500px) {
    section.scrolltop #btn-backtotop:hover::after {
      box-shadow: none;
    }
  }

  section.scrolltop #btn-backtotop::after {
    content: "";
    display: block;
    color: #fff;
    text-align: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 50%;
    background-color: var(--color-scrolltop);
    /* background-color: #399afe; */
    transition: all .3s;
    transform: scale(0.8) rotate(45deg);
    transition: background-color 0.5s ease-out;
  }

  @media only screen and (max-width: 500px) {
    section.scrolltop #btn-backtotop::after {
      opacity: 0.9;
    }
  }

  section.scrolltop #btn-backtotop .arrow {
    top: 46px;
    left: -1px;
  }

  section.scrolltop #btn-backtotop .arrow::before {
    width: 10px;
    height: 10px;
    z-index: 1;
  }

  section.scrolltop-secondary {
    display: block;
  }

  @media only screen and (max-width: 500px) {
    section.scrolltop-secondary {
      display: none;
    }
  }

  section.scrolltop-secondary .arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
  }

  section.scrolltop-secondary .arrow::after,
  section.scrolltop-secondary .arrow::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    vertical-align: middle;
  }

  section.scrolltop-secondary .arrow_up::before {
    top: auto;
    left: 19px;
    bottom: 15px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(14px) rotate(-45deg);
  }

  section.scrolltop-secondary #btn-backtotop {
    position: fixed;
    bottom: 30px;
    right: 5px;
    z-index: 1000;
    transition: all 1s ease-out;
    transition: bottom 0.2s ease-out;
    opacity: 0;
  }

  section.scrolltop-secondary #btn-backtotop.fadein {
    opacity: 1;
  }

  section.scrolltop-secondary #btn-backtotop:hover {
    opacity: .8;
    bottom: 28px;
  }

  section.scrolltop-secondary #btn-backtotop:hover::after {
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
  }

  @media only screen and (max-width: 500px) {
    section.scrolltop-secondary #btn-backtotop:hover::after {
      box-shadow: none;
    }
  }

  section.scrolltop-secondary #btn-backtotop::after {
    content: "";
    display: block;
    color: #fff;
    text-align: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 50%;
    background-color: var(--color-scrolltop);
    transition: all .3s;
    transform: scale(0.8) rotate(45deg);
    transition: background-color 0.5s ease-out;
  }

  @media only screen and (max-width: 500px) {
    section.scrolltop-secondary #btn-backtotop::after {
      opacity: 0.9;
    }
  }

  section.scrolltop-secondary #btn-backtotop .arrow {
    top: 46px;
    left: -1px;
  }

  section.scrolltop-secondary #btn-backtotop .arrow::before {
    width: 10px;
    height: 10px;
    z-index: 1;
  }

  /* ---- グローバルメニュー -------------------------------- */
  .menu~main {
    padding-block-start: var(--header-safe-margin);
  }

  .menu .menu-bar {
    position: fixed;
    z-index: 9999;
    border-radius: clamp(4px, 1.6vw, 8px);
    opacity: 1;
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 12px rgb(0 0 0 / var(--shade-normal));
    transition: opacity 0.2s ease-in-out 0s;

    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      background-color: rgb(255 255 255 / 0.9);
      border-radius: clamp(4px, 1.6vw, 8px);
      box-shadow: inset 0 0.5px 2.5px rgb(0 0 0 / 0.07);
    }
  }

  .menu .menu-bg {
    display: none;
    position: absolute;
    width: var(--viewport-width);
    height: 100vh;
    height: 100dvh;
    top: calc(var(--header-block-margin) * -1);
    left: calc(var(--header-inline-margin) * -1);
    z-index: -1;
    background-color: rgb(var(--color-menu-bg-dec) / 0);
    transition: display 0.15s ease 0s allow-discrete,
      background-color 0.15s ease 0s;
  }

  .menu.active .menu-bg {
    display: unset;
    background-color: rgb(var(--color-menu-bg-dec) / 0.4);

    @starting-style {
      background-color: rgb(var(--color-menu-bg-dec) / 0);
    }
  }

  .menu .menu-container {
    display: flex;
    position: relative;
    height: var(--header-height);
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    column-gap: clamp(12px, 4vw, 24px);
  }

  .menu .menu-container>*:first-child {
    margin-inline-start: clamp(12px, 4vw, 24px);
  }

  .menu .mrc-logo {
    display: block;
    place-content: center;
    width: 48px;
    height: var(--header-height);
    transition: opacity 0.3s ease 0s;

    & a {
      display: block;
    }

    & a :is(img, svg) {
      display: block;
      width: 100%;
    }

    &:hover {
      opacity: var(--opacity-hover-image);
    }
  }

  .menu .category {
    flex-grow: 1;
    display: flex;
    gap: clamp(28px, 9.33vw, 56px);
    margin-block: 0;
    padding-inline-start: clamp(12px, 4vw, 24px);
    list-style: none;
  }

  .menu .menu-link {
    font-weight: 550;

    & a {
      transition: color 0.2s ease 0s;
    }

    &:hover a {
      color: var(--color-text-link-hover);
    }
  }

  .menu .button-area {
    display: flex;
    justify-content: flex-end;
    gap: clamp(9px, 3vw, 18px);
    box-sizing: border-box;
    height: var(--header-height);
    padding-block: clamp(8px, 1.2vw, 12px);
    padding-inline-end: clamp(6px, 1.2vw, 12px);
  }

  .menu .button {
    display: grid;
    place-content: center;
    position: relative;
    z-index: 0;
    padding-inline: clamp(24px, 3.6vw, 36px);
    font-weight: 550;
    color: white;

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 4px;
    }

    &::before {
      background: linear-gradient(var(--angle-left-upper), var(--color-button-hover-light), var(--color-button-hover-dark));
    }

    &::after {
      background: linear-gradient(var(--angle-left-upper), var(--color-button-light), var(--color-button-dark));
      opacity: 1;
      transition: opacity 0.2s ease 0s;
    }

    &:hover::after {
      opacity: 0.3;
    }
  }

  .menu .menu-switch {
    display: none;
    width: 26px;
    padding-inline-end: clamp(15px, 5vw, 30px);
    cursor: pointer;

    & svg {
      display: block;
    }
  }

  /* ---- グローバルメニュー モバイル表示 ---------------- */
  @media screen and (max-width: 870px) {
    .menu .button-area {
      padding-inline-end: 0;
    }

    .menu .menu-container {
      flex-wrap: wrap;
      height: auto;
    }

    .menu .category {
      display: none;
      order: 4;
      width: 100%;
      padding-inline-start: 0;
    }

    .menu .menu-link {
      --margin-inline-start: clamp(60px, 20vw, 120px);
      margin-inline-start: var(--margin-inline-start);
      padding-block: clamp(13px, 4.33vw, 26px);
      position: relative;

      &~.menu-link::before {
        content: "";
        display: block;
        position: absolute;
        width: var(--header-width);
        height: 1px;
        top: 0;
        left: calc(var(--margin-inline-start) * -1);
        border-block-start: 1px solid var(--color-menu-link-border);
      }
    }

    .menu .button-area {
      flex-grow: 1;
    }

    .menu .menu-switch {
      display: revert;
    }

    .menu .menu-open {
      display: revert;
    }

    .menu .menu-close {
      display: none;
    }

    .menu.active .menu-open {
      display: none;
    }

    .menu.active .category {
      display: revert;
    }

    .menu.active .menu-close {
      display: revert;
    }
  }


  /* ---- サイドバー -------------------------------- */

  /* ---- 追従サイドバー ---------------- */
  /* ↓スクロールしてから追従するタイプ↓ */
  /*
  .side-contents .side-stickey-container {
    display: block flex;
    height: 100%;
  }

  .side-contents .category-frame {
    align-self: flex-end;
    position: sticky;
    bottom: 0;
  }
  */
  /* ↑スクロールしてから追従するタイプ↑ */

  /* ↓通常タイプ↓ */
  .side-contents .side-stickey-container {
    height: 100%;
  }

  .side-contents .category-frame {
    position: sticky;
    top: var(--header-safe-margin);
    /* position: fixed; */
  }

  /* ↑通常タイプ↑ */

  /* ↓ サイドバーテスト用 ↓ */
  .side-contents.bottom .side-stickey-container {
    display: block flex;
    height: 100%;
  }

  .side-contents.bottom .category-frame {
    align-self: flex-end;
    position: sticky;
    top: unset;
    bottom: 30px;
  }

  /* ↑ サイドバーテスト用 ↑ */

  .side-contents .category-keywords+.category-download_items {
    margin-block-start: clamp(14px, 4.67vw, 28px);
  }

  .side-contents .frame-img {
    width: 100%;

    & img {
      width: 100%;
    }
  }

  .side-contents .keywords-title {
    padding-inline-start: calc(0.25rem + 0.5em);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    text-indent: calc(calc(0.25rem + 0.5em) * -1);

    &:first-child {
      margin-block-start: 0;
    }

    &::before {
      content: "";
      display: inline-block;
      width: 0.25rem;
      height: 1.5rem;
      margin-inline-end: 0.5em;
      background: linear-gradient(180deg, var(--color-side-marker-light), var(--color-side-marker-deep));
      vertical-align: middle;
      transform: translateY(-0.05em);
    }
  }

  .side-contents .download_items-title {
    padding-inline-start: calc(0.25rem + 0.5em);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    text-indent: calc(calc(0.25rem + 0.5em) * -1);

    &:first-child {
      margin-block-start: 0;
    }

    &::before {
      content: "";
      display: inline-block;
      width: 0.25rem;
      height: 1.5rem;
      margin-inline-end: 0.5em;
      background-color: var(--color-side-marker-dark);
      vertical-align: middle;
      transform: translateY(-0.05em);
    }
  }

  .side-contents .keywords-title~.keywords-title {
    margin-block-start: clamp(14px, 4.672vw, 28px);
  }

  .side-contents .keywords,
  .side-contents .download_items {
    margin-block: 0;
    padding-inline: 0;
  }

  .side-contents .keyword {
    font-size: 1.1rem;

    &~.keyword {
      margin-block-start: clamp(5px, 0.6vw, 10px);
    }
  }

  .side-contents .keyword a {
    display: inline-block;
    width: 100%;
    transition: color 0.3s ease 0s;
  }

  .side-contents .keyword a:hover {
    color: var(--color-text-link-hover);
  }

  .side-contents .download_item {
    overflow: hidden;
    border-radius: clamp(4px, 1.33vw, 8px);
    box-shadow: 0 2px 8px rgb(0 0 0 / var(--shade-normal));
    transition: opacity 0.2s ease 0s;

    &~.download_item {
      margin-block-start: clamp(12px, 4vw, 24px);
    }

    &:hover {
      opacity: var(--opacity-hover-image);
    }
  }

  /* 一覧ページ・記事ページのサイドコンテンツ表示切り替え */
  .side-contents .category-keywords {
    display: none;
  }

  .page-index .side-contents .category-keywords {
    display: revert;
  }

  .page-index .side-contents .category-download_items {
    display: none;
  }

  /* ---- オーバーレイ -------------------------------- */
  /* ★★ 使用されている形跡はないが一応残す ★★ */
  section.overlay-frame {
    display: none;
  }

  @media only screen and (max-width: 500px) {
    section.overlay-frame {
      display: block;
    }
  }

  section.overlay-frame div.overlay-inner {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    opacity: 0;
    transition: opacity .5s;
  }

  section.overlay-frame div.overlay-inner.open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }

  /* ---- フッタ -------------------------------- */
  .footer {
    margin-block-start: clamp(60px, 20vw, 120px);
    padding-block-start: clamp(40px, 13.33vw, 80px);
    padding-block-end: clamp(30px, 10vw, 60px);
    background: linear-gradient(var(--angle-left-upper), var(--color-footer-bg-light), var(--color-footer-bg-dark)),
      var(--color-footer-bg-dark);
  }

  .footer a {
    color: var(--color-footer-text-lighter);
    transition: color 0.2s ease 0s;

    &:hover {
      color: var(--color-footer-text-link-hover);
    }
  }

  .footer .service-title {
    font-size: 1.5rem;
    color: var(--color-footer-text-lighter);
    text-align: center;
  }

  .footer .service-container {
    display: flex;
    justify-content: center;
    column-gap: clamp(60px, 10vw, 120px);
    margin-block-start: clamp(16px, 5.33vw, 32px);
  }

  .footer .service-content {
    display: grid;
    place-content: center;
    width: 280px;
    height: 120px;
    opacity: var(--op);

    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgb(255 255 255 / 0);
      border-radius: var(--corner-radius);
      transition: background-color 0.3s ease 0s;
    }

    &:hover::before {
      background-color: rgb(255 255 255 / 0.1);
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      width: clamp(8px, 2vw, 12px);
      height: clamp(8px, 2vw, 12px);
      top: 50%;
      right: 20px;
      border-top: 2px solid var(--color-footer-text-lighter);
      border-right: 2px solid var(--color-footer-text-lighter);
      transform: translate(0%, -50%) rotate(45deg);
      transition: transform 0.3s ease 0s;
    }

    &:hover::after {
      transform: translate(50%, -50%) rotate(45deg);
    }
  }

  .footer .service-content-inner {
    color: var(--color-footer-text-light);
    text-align: center;

    & p {
      margin-block-start: 0;
      margin-block-end: 8px;
      letter-spacing: 0.02em;
    }

    & svg {
      height: 40px;
      fill: white;
    }
  }

  .footer .company {
    margin-block-start: clamp(40px, 13.33vw, 80px);
  }

  .footer .company-container {
    display: flex;
    justify-content: center;
    column-gap: clamp(15px, 5vw, 30px);

    /* column-gap: clamp(40px, 13.33vw, 80px); ★ 均等割り ★ */
    & a {
      display: block;
    }
  }

  .footer .company-content {
    flex-basis: 200px;
    text-align: center;
  }

  .footer .copyright {
    margin-block-start: clamp(16px, 5.33vw, 32px);
    text-align: center;
  }

  @media screen and (max-width:750px) {
    .footer .service-container {
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      row-gap: 30px;
    }

    .footer .company-container {
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      row-gap: 20px;
    }

    .footer .company-content {
      flex-basis: auto;
    }
  }


  /* ---- 記事コンテンツ -------------------------------- */

  /* ---- 見出し ---------------- */
  div.article-contents h1 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 2px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents h1 {
      font-size: 19px;
    }
  }

  div.article-contents .title p {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 550;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents .title p {
      font-size: 15px;
    }
  }

  div.article-contents h2 {
    font-size: 28px;
    font-weight: 500;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents h2 {
      font-size: 19px;
      font-weight: 900;
    }
  }

  div.article-contents h3 {
    margin-top: 50px;
    font-size: 22px;
    font-weight: 600;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents h3 {
      margin-top: initial;
      font-size: 16px;
      font-weight: 900;
    }
  }

  div.article-contents h4 {
    margin-top: 50px;
    font-size: 18px;
    font-weight: 600;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents h4 {
      margin-top: initial;
      font-size: 16px;
      font-weight: 900;
    }
  }

  div.article-contents>div.content h3.indent-1em {
    text-indent: -1em;
    padding-left: calc(15px + 1em);
  }

  div.article-contents>div.content h3.wb-keep-all {
    word-break: keep-all;
  }

  /* ---- 本文 ---------------- */
  /* ★★ 調整する ★★ */
  div.article-contents p {
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 16px;
    text-align: justify;
    line-height: 2;
    letter-spacing: initial;
    word-break: break-all;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents p {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 14px;
    }
  }

  /* ---- パンくずリスト ---------------- */
  div.article-contents div.link-home {
    width: var(--container-width);
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: 550;
    display: flex;
  }

  div.article-contents div.link-home a {
    color: var(--color-text-link);
    /* color: #399afe; */
    white-space: nowrap;
    transition: color 0.2s ease 0s;
  }

  div.article-contents div.link-home a:hover {
    color: var(--color-text-link-hover);
    /* opacity: 0.7; */
  }

  div.article-contents div.link-home a img {
    display: none;
    /*
    width: 10px;
    height: auto;
    filter: brightness(0.6);
    */
  }

  div.article-contents div.link-home span {
    padding-left: 5px;
    padding-right: 5px;
  }

  div.article-contents div.link-home div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #070b0f;
  }

  @media screen and (max-width: 500px) {
    div.article-contents div.link-home {
      flex-wrap: wrap;
    }
  }

  /* ---- タイトル画像・記事中画像 ---------------- */
  div.article-contents div.mainvisual img {
    width: 100%;
    height: auto;
  }

  .img-subject:has(+ .img-frame) {
    width: 80%;
    margin: 50px auto -45px auto;
    font-size: 16px;
    font-weight: 500;
  }

  @media only screen and (max-width: 500px) {
    .img-subject:has(+ .img-frame) {
      margin: 20px auto -5px auto;
    }

  }

  /* ---- 目次（アコーディオンリスト） ---------------- */
  div.article-contents div.list_secondary {
    margin-top: 50px;
    font-size: 16px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.list_secondary {
      /* ★★ スマホ版は一時非表示 ★★ */
      display: none;
      /*
      position: fixed;
      bottom: 0;
      left: 0;
      margin-top: 40px;
      width: 100%;
      z-index: 1001;
      */
    }
  }

  div.article-contents div.list_secondary table {
    width: 100%;
    border-collapse: collapse;
  }

  div.article-contents div.list_secondary table tr,
  div.article-contents div.list_secondary table tr.accordion-list {
    border: solid 1px #eee;
  }

  div.article-contents div.list_secondary table tr th.js-accordion-list-title,
  div.article-contents div.list_secondary table tr.accordion-list th.js-accordion-list-title {
    position: relative;
    height: 40px;
    cursor: pointer;
    text-align: center;
  }

  div.article-contents div.list_secondary table tr th.js-accordion-list-title::after,
  div.article-contents div.list_secondary table tr.accordion-list th.js-accordion-list-title::after {
    content: "";
    position: absolute;
    right: 40%;
    top: 33%;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 8px;
    height: 8px;
    border-top: solid 2px #070b0f;
    border-right: solid 2px #070b0f;
    transform: rotate(135deg);
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr th.js-accordion-list-title::after,
    div.article-contents div.list_secondary table tr.accordion-list th.js-accordion-list-title::after {
      display: none;
    }
  }

  div.article-contents div.list_secondary table tr th.js-accordion-list-title.open::after,
  div.article-contents div.list_secondary table tr.accordion-list th.js-accordion-list-title.open::after {
    transform: rotate(-45deg);
    top: 45%;
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr th.js-accordion-list-title.open::after,
    div.article-contents div.list_secondary table tr.accordion-list th.js-accordion-list-title.open::after {}
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr th.js-accordion-list-title,
    div.article-contents div.list_secondary table tr.accordion-list th.js-accordion-list-title {
      width: 80px;
      height: 60px;
      line-height: 40px;
      color: #fff;
      font-weight: 300;
      font-size: 0;
      background-image: url(/local/images/mokuji_icon.png);
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  div.article-contents div.list_secondary table tr td,
  div.article-contents div.list_secondary table tr.accordion-list td {
    padding: 0;
    padding-right: 20px;
    padding-left: 20px;
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr td,
    div.article-contents div.list_secondary table tr.accordion-list td {
      padding-bottom: 53px;
    }
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr td ul,
    div.article-contents div.list_secondary table tr.accordion-list td ul {
      padding-left: 0;
    }
  }

  div.article-contents div.list_secondary table tr td ul li,
  div.article-contents div.list_secondary table tr.accordion-list td ul li {
    margin-left: 1.4em;
    text-indent: -1.4em;
    height: 40px;
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr td ul li,
    div.article-contents div.list_secondary table tr.accordion-list td ul li {
      height: initial;
      min-height: 40px;
    }
  }

  div.article-contents div.list_secondary table tr td ul li a,
  div.article-contents div.list_secondary table tr.accordion-list td ul li a {}

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr td ul li a,
    div.article-contents div.list_secondary table tr.accordion-list td ul li a {
      font-size: 14px;
      color: #070b0f;
    }
  }

  div.article-contents div.list_secondary table tr td ul li a:hover,
  div.article-contents div.list_secondary table tr.accordion-list td ul li a:hover {
    opacity: 0.7;
    text-decoration: underline;
  }

  div.article-contents div.list_secondary table tr td ul li a span,
  div.article-contents div.list_secondary table tr.accordion-list td ul li a span {
    margin-right: 10px;
    color: var(--color-text-blue);
    /* color: #399afe; */
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr td ul li a span,
    div.article-contents div.list_secondary table tr.accordion-list td ul li a span {
      color: #070b0f;
    }
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr:first-child,
    div.article-contents div.list_secondary table tr.accordion-list:first-child {
      position: fixed;
      bottom: 35px;
      left: 12px;
      height: 40px;
      z-index: 3;
      border: none;
    }
  }

  @media only screen and (max-width: 500px) {

    div.article-contents div.list_secondary table tr:last-child,
    div.article-contents div.list_secondary table tr.accordion-list:last-child {
      background-color: #fff;
    }
  }

  div.article-contents div.list_secondary table tr.accordion-list td ul li.js-accordion-list-indent {
    height: auto;
    min-height: 40px;
    padding-left: 2.15em;
    text-indent: -1.15em;
  }

  div.article-contents div.list_secondary table tr.accordion-list td ul li.js-accordion-list-indent.gt-2lines {
    padding-bottom: 15px;
  }

  div.article-contents div.list_secondary table tr.accordion-list td ul li.js-accordion-list-indent-2 {
    height: auto;
    min-height: 35px;
    padding-left: 3.15em;
    text-indent: -1.15em;
  }

  div.article-contents div.list_secondary table tr.accordion-list td ul li.js-accordion-list-indent+li.js-accordion-list-indent-2 {
    margin-top: -5px;
  }

  div.article-contents div.list_secondary table tr.accordion-list td ul li.js-accordion-list-indent-2:has(+ li.js-accordion-list-indent) {
    min-height: 40px;
  }


  /* ---- リード ---------------- */
  .lead ul {
    margin-top: 30px;
    margin-bottom: 30px;
    color: #070b0f;
  }

  .lead ul li {
    margin-top: 10px;
    margin-left: 30px;
    font-size: 16px;
    list-style: disc;
  }

  @media only screen and (max-width: 500px) {
    .lead ul {
      padding-left: 0;
    }

    .lead ul li {
      font-size: 14px;
    }
  }

  /* ---- 記事 ---------------- */
  div.article-contents>div.content {
    margin-top: 80px;
    margin-bottom: 40px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content {
      margin-top: 40px;
    }
  }

  div.article-contents>div.content div.introduction {
    margin: 20px auto;
    padding: 20px 15px 25px;
    border: solid 1px #a8edda;
  }

  div.article-contents>div.content h2 {
    margin-bottom: 40px;
    padding-left: 15px;
    border-left: 5px solid var(--color-text-blue);
    /* border-left: solid 5px #399afe; */
  }

  div.article-contents>div.content h3 {
    margin-top: 50px;
    margin-bottom: 50px;
    padding-left: 15px;
    line-height: 1.5;
    border-left: solid 5px #c8d8d8;
  }

  div.article-contents>div.content h4.plusline {
    position: relative;
    width: calc(100% - 35px);
    left: 35px;
    font-weight: 500;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content h4.plusline {
      width: 75vw;
    }
  }

  div.article-contents>div.content h4.plusline:before {
    content: "";
    display: block;
    position: absolute;
    top: 13px;
    left: -35px;
    width: 25px;
    height: 1px;
    background-color: var(--color-text-blue);
  }

  div.article-contents>div.content ul {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: justify;
    color: #070b0f;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content ul {
      padding-left: 0;
    }
  }

  div.article-contents>div.content ul li {
    margin-top: 10px;
    margin-left: 30px;
    font-size: 16px;
    list-style: disc;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content ul li {
      font-size: 14px;
    }
  }

  div.article-contents>div.content ul.listStyleNone li {
    list-style: none !important;
  }

  div.article-contents>div.content ol {
    margin-top: 30px;
    margin-bottom: 30px;
    color: #070b0f;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content ol {
      padding-left: 0;
    }
  }

  div.article-contents>div.content ol li {
    margin-top: 10px;
    margin-left: 30px;
    font-size: 16px;
  }

  div.article-contents>div.content div.img-frame {
    margin: auto;
    width: 80%;
  }

  div.article-contents>div.content div.img-frame img {
    width: 100%;
    height: auto;
  }

  div.article-contents>div.content div.img-frame+div.reference {
    margin: -40px 0 0 65px !important;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content div.img-frame+div.reference {
      margin: -20px 0 25px 35px !important;
    }
  }

  div.article-contents>div.content div.pre-reference {
    margin: -20px 0 0 65px;
    font-size: 12px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content div.pre-reference {
      margin: -20px 0 0 20px;
    }

    div.article-contents>div.content div.pre-reference+div.reference {
      margin-top: 0px !important;
    }
  }

  div.article-contents>div.content div.reference {
    margin: 20px 0 0 65px;
    display: flex;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content div.reference {
      margin: -20px 0 0 20px;
      flex-direction: column;
      word-break: break-all;
    }
  }

  div.article-contents>div.content div.reference div.heading {
    font-size: 12px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents>div.content div.reference div.heading {
      font-size: 12px;
    }
  }

  div.article-contents>div.content div.reference div.link {
    font-size: 12px;
  }

  div.article-contents>div.content div.reference div.link a {
    font-size: 12px;
    color: var(--color-text-link);
    /* color: #399afe; */
  }

  div.article-contents div.writer {
    display: flex;
    border: solid 2px #eee;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.writer {
      flex-direction: column;
    }
  }

  div.article-contents div.writer div.frame-img {
    margin: 40px 20px 20px 20px;
    text-align: center;
  }

  div.article-contents div.writer div.frame-img img {
    border-radius: 50%;
  }

  div.article-contents div.writer div.text {
    margin: 40px 20px 20px 20px;
    padding: 10px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.writer div.text {
      margin: 10px 20px 20px 20px;
    }
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.writer div.text div {
      text-align: center;
    }
  }

  div.article-contents div.writer div.text div span.tag {
    position: relative;
    padding: 7px 20px;
    background-color: var(--color-text-blue);
    /* background-color: #399afe; */
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.writer div.text div span.tag {
      padding: 4px 2px 2px 4px;
      font-size: 16px;
    }
  }

  div.article-contents div.writer div.text div span.name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.writer div.text div span.name {
      font-size: 18px;
    }
  }

  div.article-contents div.writer div.text p {
    font-size: 14px;
    margin-top: 30px;
  }

  div.article-contents div.articles {
    margin-bottom: 100px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.articles {
      margin-bottom: 0;
    }
  }

  div.article-contents div.articles div.title {
    margin: 60px 0 20px;
  }

  div.article-contents div.articles div.title div {
    margin: 0 auto;
    width: 100px;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  div.article-contents div.articles div.content {
    position: relative;
    margin: 20px 0;
  }

  div.article-contents div.articles div.content a.content-inner {
    display: flex;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.articles div.content a.content-inner {
      flex-direction: column;
      border: solid 1px #eee;
      border-radius: 5px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
      overflow: hidden;
    }
  }

  div.article-contents div.articles div.content a.content-inner:hover {
    opacity: 0.7;
    text-decoration: underline;
  }

  div.article-contents div.articles div.content a.content-inner div.frame-img {
    border-radius: 5px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.articles div.content a.content-inner div.frame-img {
      padding-top: 0;
      padding-bottom: 0;
      background-color: none;
    }
  }

  div.article-contents div.articles div.content a.content-inner div.frame-img img.img {
    width: 235px;
    height: auto;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.articles div.content a.content-inner div.frame-img img.img {
      width: 100%;
      height: auto;
    }
  }

  div.article-contents div.articles div.content a.content-inner div.frame-text {
    position: relative;
    margin-left: 20px;
    width: 100%;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.articles div.content a.content-inner div.frame-text {
      margin: auto;
      width: 90%;
    }
  }

  div.article-contents div.articles div.content a.content-inner div.frame-text div.date {
    position: absolute;
    right: 0;
    bottom: 2px;
    font-size: 12px;
    color: var(--color-text-blue);
    /* color: #399afe; */
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.articles div.content a.content-inner div.frame-text div.date {
      top: 10px;
      left: 0;
    }
  }

  div.article-contents div.articles div.content a.content-inner div.frame-text h3 {
    margin-top: 30px;
    font-size: 16px;
    letter-spacing: 3px;
    text-align: justify;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.articles div.content a.content-inner div.frame-text h3 {
      margin-top: 40px;
      margin-bottom: 45px;
    }
  }

  div.article-contents div.articles div.content a.content-inner div.frame-text div.group {
    text-align: center;
  }

  div.article-contents div.articles div.content a.content-inner div.frame-text div.group div {
    position: absolute;
    bottom: 2px;
    width: 80px;
    height: 20px;
    line-height: 20px;
    color: var(--color-text-blue);
    border: 1px solid var(--color-text-blue);
    /*
    color: #399afe;
    border: solid 1px #399afe;
    */
    border-radius: 5px;
    font-size: 12px;
  }

  @media only screen and (max-width: 500px) {
    div.article-contents div.articles div.content a.content-inner div.frame-text div.group div {
      bottom: 15px;
    }
  }

  .txt-annotation {
    color: var(--color-text-blue);
    /* color: #399afe; */
    font-size: .8em;
  }

  .btn-reg a {
    display: inline-block;
    position: relative;
    background-color: var(--color-report-download);
    padding: 15px 30px;
    border-radius: 20px;
    font-weight: bold;
    color: #fff;
    font-size: 24px;
  }

  .btn-reg a:hover {
    opacity: .7;
  }

  @media only screen and (max-width: 500px) {
    .btn-reg {
      text-align: center;
    }

    .btn-reg a {
      font-size: 16px;
    }

    .btn-reg a i {
      right: 25px;
      width: 20px;
      height: 20px;
    }
  }

  a.add-link {
    text-decoration: none;
    color: var(--color-text-link);
    /* color: #399afe; */
  }

  a.add-link:hover {
    text-decoration: underline;
    color: #9eceff;
  }

  /* ---- 表 ---------------- */
  table.table {
    width: 100%;
    table-layout: fixed;
  }

  table.table,
  .table th,
  .table td {
    border: 1px solid #ddd;
    padding: 15px;
    border-collapse: collapse;
    font-size: 16px;
    text-align: left;
    vertical-align: top;
  }

  .table th {
    background: #eee;
    font-weight: 600;
  }

  div.article-contents>div.content .table ul {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 2em;
  }

  div.article-contents>div.content .table ul li {
    list-style-type: disc;
    margin-left: 0;
    margin-top: 4px;
  }

  .table .bg {
    background: #eee;
  }

  .table.fs-small th,
  .table.fs-small td,
  .table.fs-small td li,
  .table.fs-small td p {
    font-size: 12px !important;
  }

  .table.center td,
  .table td.center {
    text-align: center;
    vertical-align: middle;
  }

  .break {
    word-break: break-all;
  }

  .nowrap {
    white-space: nowrap;
  }

  @media only screen and (max-width: 500px) {
    .table-scroll {
      display: block;
      overflow: scroll;
    }

    table.table {
      table-layout: auto;
    }

    .table th,
    .table td {
      min-width: 60vw;
      max-width: 90vw;
      font-size: 14px;
    }

    .table-scroll+.reference {
      margin-top: 20px !important;
    }

    div.article-contents>div.content .table ul {
      padding-left: 1em;
    }

    div.article-contents>div.content .table ul li {
      margin-left: 1.4em;
    }

    .table.sp-head th:first-child {
      min-width: 30vw;
    }
  }

  div.article-contents div.content table {
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 16px;
    letter-spacing: initial;
    border-collapse: collapse;
    box-sizing: border-box;
    border-spacing: unset;
    border: 1px solid #ccc;
  }

  div.article-contents div.content table>caption:first-child {
    caption-side: top;
    margin-bottom: 30px;
    font-weight: 500;
    text-align: left;
  }

  div.article-contents div.content table>caption:last-child {
    caption-side: bottom;
    margin-top: 30px;
    font-weight: 500;
    text-align: center;
  }

  div.article-contents div.content table td,
  div.article-contents div.content table th {
    border: 1px solid #ccc;
    padding: 12px 15px;
  }

  div.article-contents div.content table th {
    background-color: #d7edff;
  }

  @media screen and (max-width: 500px) {
    div.article-contents div.content table {
      font-size: 14px;
    }
  }


  /* ---- 関連リンク ---------------- */
  .related-link {
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .related-link span:first-of-type {
    display: inline-block;
    position: relative;
    flex-grow: 1;
    flex-shrink: 0;
    max-width: 5em;
    margin-right: 2em;
    font-size: 0.9em;
    font-weight: 500;
  }

  .related-link span:first-of-type::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -0.9em;
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid var(--color-text-blue);
    border-right: 2px solid var(--color-text-blue);
    /*
    border-top: 2px solid #399afe;
    border-right: 2px solid #399afe;
    */
    transform: rotate(45deg) translate(0, -50%);
  }


  /* ---- カテゴリー・キーワード 記事一覧 -------------------------------- */

  /* ---- タイトル ---------------- */
  .list-title {
    position: relative;
    width: fit-content;
    margin-block-start: clamp(30px, 10vw, 60px);
    margin-block-end: clamp(30px, 10vw, 60px);
    margin-inline: auto;
    font-size: 1.75rem;
    font-weight: 550;
    text-align: center;

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: clamp(28px, 9.33vw, 56px);
      height: 4px;
      top: calc(50% - 2px);
      background-color: var(--color-list-title-bar);
    }

    &::before {
      right: calc(100% + clamp(16px, 5.33vw, 32px));
    }

    &::after {
      left: calc(100% + clamp(16px, 5.33vw, 32px));
    }
  }

  .contents-list-container .contents-list-title,
  .group-list-container .group-list-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-charcoal);
  }

  .contents-list-container .contents-list-title .icon,
  .group-list-container .group-list-title .icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    /*
    width: 2.5rem;
    height: 2.5rem;
    */
    margin-inline-end: 0.2em;
    transform: translateY(0.25em);

    & svg {
      display: block;
      width: 100%;
    }
  }

  .contents-list-container .contents-list-title .list-title-link,
  .group-list-container .group-list-title .list-title-link {
    display: inline-block;
    margin-inline-start: 0.5em;
    font-size: 0.75em;
    color: var(--color-text-gray);
    transition: opacity 0.2s ease 0s;

    &:hover {
      opacity: var(--opacity-hover-text);
    }

    &::after {
      content: "＞";
    }
  }

  /* ---- リスト ---------------- */
  .contents-list {
    container: contents-list / inline-size;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(27px, 5.4vw, 54px);
    row-gap: clamp(25px, 5vw, 50px);
    padding-inline-start: 0;
  }

  .list-contents .contents-list {
    column-gap: clamp(18px, 6vw, 36px);
  }

  .article-contents .contents-list {
    column-gap: clamp(10px, 3.33vw, 20px);
  }

  .contents-slider {
    --slider-button-size: clamp(20px, 6.67vw, 40px);
    box-sizing: border-box;
    padding-inline: calc(var(--slider-button-size) * 1.25);
    contain: content;
    overflow: hidden;

    & ul {
      padding-inline-start: 0;
    }
  }

  .contents-slider:has(.contents-slider-inner) {
    width: auto;
    margin-inline-start: calc(var(--slider-button-size) * -1.25);
    /* margin-inline-start: 0; */
    margin-inline-end: calc(var(--container-margin) * -1);
  }

  .contents-slider .contents-slider-inner {
    position: relative;
    z-index: 0;
    margin-inline-end: calc(var(--container-margin) * -1 - 5vw);

    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: 1;
      pointer-events: none;
      width: calc(var(--container-width) + var(--container-margin));
      /* width: calc(var(--container-width) + var(--container-margin) - calc(var(--slider-button-size) * 1.25)); */
      height: 100%;
      left: 0;
      top: 0;
      background: linear-gradient(90deg, rgb(255 255 255 / 0) 80%, rgb(255 255 255 / 1));
    }
  }

  .group-list-container #group-list {
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: clamp(12px, 4vw, 24px);
    row-gap: clamp(6px, 2vw, 12px);
    /* gap: 32px; */
  }

  .group-list-container.keywords .keyword {
    border: 1px solid var(--color-category-blue);

    & a {
      color: var(--color-category-blue);
    }
  }

  @media screen and (max-width: 750px) {
    .contents-list {
      grid-template-columns: 1fr;
    }

    .contents-slider:has(.contents-slider-inner) {
      width: auto;
      margin-inline: 0;
      /* margin-inline-end: 0; */
      padding-inline: 0;
    }

    .contents-slider .contents-slider-inner {
      margin-inline-end: 0;
      padding-inline: calc(var(--slider-button-size) * 1.25);

      &::after {
        content: "";
        display: none;
      }
    }

  }

  /* リスティング */
  .contents-list-container .content-inner {
    contain: content;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 55%) minmax(45%, max-content);
    /* grid-template-rows: min-content max-content; */
    /* grid-template-rows: minmax(30%, 60%) minmax(40%, 70%); */
    height: 100%;
    border-radius: clamp(4px, 1.33vw, 8px);
    box-shadow: 0 2px 12px rgb(0 0 0 / var(--shade-normal));
    transition: opacity 0.3s ease 0s;

    &:hover {
      opacity: var(--opacity-hover-image);
    }
  }

  .contents-list-container .content-inner .frame-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .contents-list-container .content-inner .frame-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    box-sizing: border-box;
    padding: 16px;
  }

  .contents-list-container .content-inner .content-inner-title {
    flex-shrink: 1;
    margin-block: 0;
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .contents-list-container .content-inner .group {
    flex-shrink: 1;
    display: flex;
    justify-content: flex-start;
    column-gap: 12px;
    row-gap: 6px;
  }

  .article-contents .contents-list-container .content-inner .group {
    flex-wrap: wrap;
  }

  .contents-list-container .content-inner .category {
    padding-inline: 0.7em;
    background-color: var(--color-category-blue);
    border-radius: 4px;
    font-size: 0.875rem;
    color: white;
    font-weight: 450;
    line-height: 1.4;
  }

  .contents-list-container .content-inner .keyword {
    padding-inline: 0.7em;
    border: 1px solid var(--color-category-blue);
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--color-category-blue);
    font-weight: 450;
    line-height: 1.4;
  }

  .contents-list-container .content-inner .update {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* font-size: 1.1rem; */
    color: var(--color-text-gray);
    font-weight: 500;
    text-align: right;
  }

  /* リスティング もっと見る */
  .contents-list-addmore .show-more {
    margin-block-start: clamp(28px, 9.33vw, 56px);
    font-size: 1.25rem;
    color: var(--color-text-gray);
    font-weight: 500;
    text-align: center;
    transition: color 0.2s ease 0s;

    &:hover {
      color: var(--color-text-link-hover);
    }

    &::after {
      content: "";
      display: inline-block;
      width: 0.6em;
      height: 0.6em;
      margin-inline-start: 0.5em;
      line-height: 1;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-0.2em) rotate(45deg);
    }
  }

  .contents-list-addmore .contents-list>li {
    /* transition: opacity 0.1s ease 0s; */
    opacity: 1;
    display: list-item;

    @starting-style {
      opacity: 0;
    }

    transition: opacity 0.1s ease 0s,
    display 0.1s linear 0s allow-discrete;

    & .frame-img,
    & .frame-text {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }

      transition: opacity 1s ease 0s;
    }
  }

  @container contents-list (max-width: 1000px) {
    .contents-list-container .content-inner .group {
      flex-wrap: wrap;
    }
  }


  /* ---- CTAエリア -------------------------------- */
  .cta {
    border: 1px solid #ccc;
    padding: 22px;
  }

  @media only screen and (max-width: 500px) {
    .cta {
      padding: 18px;
    }
  }

  .cta .itembox {
    display: flex;
  }

  @media only screen and (max-width: 500px) {
    .cta .itembox {
      display: block;
    }
  }

  .cta .item-img {
    flex-basis: 50%;
    margin-right: 12px;
  }

  .cta .item-img img {
    width: 95%;
  }

  @media only screen and (max-width: 500px) {
    .cta .item-img img {
      width: 100%;
    }
  }

  @media only screen and (max-width: 500px) {
    .cta .sp-line {
      margin-right: 0;
      margin-top: 14px;
      display: block;
    }
  }

  .cta .item-text {
    flex-basis: 50%;
  }

  .cta .item-text p {
    text-align: initial;
    letter-spacing: initial;
  }

  .cta .item-text .title {
    margin: 0;
    color: var(--color-cta-text-link);
    /* color: #399afe; */
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
  }

  .cta .item-text .title span {
    font-size: 1.2em;
  }

  .cta .item-text .detail {
    font-size: 14px;
    border-top: 1px solid #CCC;
    padding-top: 18px;
    margin-top: 18px;
    margin-bottom: 0;
  }

  .cta .btn {
    position: relative;
    margin: 30px auto 0;
  }

  .cta .btn a {
    display: block;
    background-color: var(--color-cta-button);
    /* background: #ff8000; */
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding: 12px 20px;
    border-radius: 60px;
  }

  @media only screen and (max-width: 500px) {
    .cta .btn a {
      border-radius: 40px;
    }
  }

  .cta a {
    transition: all 0.3s ease-out;
  }

  .cta a:hover {
    opacity: var(--opacity-hover-image);
    /* opacity: .7; */
  }

  /* 連続するCTA */
  .cta~.cta {
    margin-top: 25px;
  }

  /* .content内のCTA */
  .content .cta {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  /* ---- SATORIポップアップ -------------------------------- */
  #satori__popup_wrapper {
    font-size: 16px;
  }
}

/* ---- JSで設定するスタイル ------------------------------------------------ */
@layer state {

  /* ---- メニュー -------------------------------- */
  .menu .menu-link.is-active a {
    color: var(--color-text-link);
    cursor: auto;
  }

  .menu .menu-link.is-active:hover a {
    color: var(--color-text-link);
  }

  /* ---- サイドコンテンツ -------------------------------- */
  .side-contents :where(.category-keywords:has(.is-active) .keyword) a {
    color: var(--color-text-gray);
  }

  .side-contents .keyword.is-active a {
    color: var(--color-text-black);
    cursor: auto;
  }

  /* ---- リスト -------------------------------- */
  .contents-list-addmore .is-hidden {
    display: none;
    opacity: 0;

    & .frame-img,
    & .frame-text {
      opacity: 0;
    }
  }

}

/* ---- OSテーマ対応 ------------------------------------------------ */
@layer theme {}

/* ---- 個別コンテンツ調整 ------------------------------------------------ */
@layer project {
  /* ---- トップページ -------------------------------- */

  /* ---- ファーストビュー ---------------- */
  .page-index.home .firstview {
    display: grid;
    place-content: center;
    box-sizing: border-box;
    margin-block-start: calc(calc(var(--header-safe-margin) + var(--header-block-margin)) * -1);
    padding-block-start: var(--header-safe-margin);
    background-position: center bottom;
    background-size: cover;
    background-color: var(--color-darknavy);
    background-image: url(/jp/marketing-research/local/images/title_bg_1920w.webp);

    & hgroup {
      color: white;
      text-align: center;
    }

    & h1 {
      margin-block-start: 0;
      margin-block-end: clamp(9px, 3vw, 18px);
      font-family: "Montserrat", sans-serif;
      font-size: clamp(1.7rem, 5.33vw, 2.5rem);
      font-weight: normal;
      letter-spacing: 0.01em;
      word-break: keep-all;
    }

    & p {
      margin-block: 0;
      font-size: clamp(1.1rem, 3.2vw, 1.5rem);
      line-height: 1.5;
      word-break: keep-all;
    }
  }

  @media screen and (min-width: 1920px) {
    .page-index.home .firstview {
      background-image: url(/jp/marketing-research/local/images/title_bg_3840w.webp)
    }
  }

  @media screen and (max-width: 960px) {
    .page-index.home .firstview {
      background-image: url(/jp/marketing-research/local/images/title_bg_960w.webp);
    }
  }

  /* ---- 一覧部分 ---------------- */
  .page-index.home .contents-list-container,
  .page-index.home .group-list-container {
    margin-block-start: clamp(15px, 5vw, 30px);
  }

  .page-index.home .contents-list-container:nth-child(1) {
    margin-block-start: clamp(30px, 10vw, 60px);
    margin-block-end: clamp(45px, 15vw, 90px);
  }

  .page-index.home .contents-list-container:nth-child(2) {
    margin-block-end: clamp(45px, 15vw, 90px);
  }

  /* ---- 記事ページ -------------------------------- */

  /* ---- リスト ---------------- */
  .article-contents .contents-list-container {
    margin-block-start: clamp(30px, 10vw, 60px);
  }


  /* ----  -------------------------------- */
  /* ----  ---------------- */
}

/* ---- 調整用 ------------------------------------------------ */
@layer utility {

  /*pc表示時のみblock*/
  .pc-b {
    display: block;
  }

  @media only screen and (max-width: 500px) {
    .pc-b {
      display: none;
    }
  }

  /*sp表示時のみblock*/
  .sp-b {
    display: none;
  }

  @media only screen and (max-width: 500px) {
    .sp-b {
      display: block;
    }
  }

  /*pc表示時のみ改行*/
  .pc-line {
    display: inline-block;
  }

  @media only screen and (max-width: 500px) {
    .pc-line {
      display: none;
    }
  }

  /*sp表示時のみ改行*/
  .sp-line {
    display: none;
  }

  @media only screen and (max-width: 500px) {
    .sp-line {
      display: inline;
    }
  }

  /*pc表示時のみflex*/
  .pc-flex {
    display: flex;
  }

  @media only screen and (max-width: 500px) {
    .pc-flex {
      display: none;
    }
  }

  /*sp表示時のみflex*/
  .sp-flex {
    display: none;
  }

  @media only screen and (max-width: 500px) {
    .sp-flex {
      display: flex;
    }
  }

  /*テキストを強調する*/
  .text-highlight {
    background: linear-gradient(#fff 70%, #c1e4db 76%);
    border-radius: 2px;
    font-weight: 600;
  }

  /*画像上下にスペースを挿入*/
  div.mainvisual,
  div.img-frame {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }

  @media only screen and (max-width: 500px) {

    div.mainvisual,
    div.img-frame {
      margin-top: 20px !important;
      margin-bottom: 20px !important;
    }
  }

  /*画像上下のスペースを統一*/
  .break-height {
    display: none;
  }
}

/* ---- 既存スタイル上書き ------------------------------------------------ */
.lab-contents {
  display: none;
}

/* ---- Swiperスタイル調整 ---------------- */
.contents-slider .swiper-button-prev {
  background-image: none;
  left: 0;
  width: var(--slider-button-size);
  height: var(--slider-button-size);
  margin-block-start: calc(var(--slider-button-size) / -2);
}

.contents-slider .swiper-button-next {
  background-image: none;
  left: auto;
  right: 0;
  width: var(--slider-button-size);
  height: var(--slider-button-size);
  margin-block-start: calc(var(--slider-button-size) / -2);
}

.contents-slider:has(.contents-slider-inner) .swiper-button-prev {
  left: calc(var(--slider-button-size) * -1.25);
}

.contents-slider:has(.contents-slider-inner) .swiper-button-next {
  /* left: calc(var(--container-width) + var(--container-margin) - calc(var(--slider-button-size) * 1.25)); */
  /* left: calc(var(--container-width) + var(--container-margin) - calc(var(--slider-button-size) * 2.5)); */
  right: calc(var(--slider-button-size) * -1.25);
}

.contents-slider :is(.swiper-button-prev, .swiper-button-next) svg {
  display: block;
  width: 100%;
}

.contents-slider .swiper-slide {
  height: auto !important;
}

@media screen and (max-width: 750px) {
  .contents-slider:has(.contents-slider-inner) .swiper-button-prev {
    left: 0;
  }

  .contents-slider:has(.contents-slider-inner) .swiper-button-next {
    left: auto;
    right: 0;
  }
}







/* ※※※※※※ここから追記※※※※※※ */

h1{
    display: block;
    font-size: 32px;
    text-align: center;
}

main #lab div.container div.container-inner{
    display: block;
}

.category-filter{
    font-weight: 700;
    font-size: 24px;
    margin: 10px 0;
    text-align: center;
    color: #00b2ab;
}

.group-list-container{
    margin: 70px auto;
}

.contents_wrapper .group-list-container{
  margin: 20px auto;
}

#group-list{
    background-color: #f4f6f7;
    padding: 50px 30px;
    border-radius: 10px;
}

.contents_wrapper #group-list{
  padding: 30px;
}


.group-list-container .keyword {
    font-size: 1.1rem;
    font-weight: 450;
    line-height: 1.6;
}

#group-list .keyword a{
    background-color: #fff;
    padding: 4px 30px;
    border-radius: 30px;
    transition: all 0.1s;
    &:hover{
        color: #00b2ab;
    }
}

.swiper-slide.swiper-slide-next{
    width: 100px;
}


.filter-more {
  position: relative;
  z-index: 10;
}

.filter-more button {
  margin: -10px 0 30px 10px;
  width: 100%;
  background-color: #fff;
  border: none;
  font-size: 14px;
  color: #070b0f;
  outline: none;
  cursor: pointer;
}

.filter-more button:hover {
  opacity: 0.7;
}

@media only screen and (max-width: 500px) {
  .filter-more button {
    margin: 10px 0 30px;
  }
}

.filter-more button span {
  padding: 3px 10px;
}

.filter-more button span::after {
  content: "";
  display: inline-block;
  margin: 0 0 3px 4px;
  width: 5px;
  height: 5px;
  border: 2px solid;
  border-color: transparent transparent #243746 #243746;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.contents_wrapper{
  max-width: 1200px;
  margin: 50px auto;
  font-size: 16px;
}

.medium-title h1 span{
  font-size: 30px;
  font-weight: 700;
  color: #00b2ab;

}

#group-list .keyword a{
    background-color: #fff;
    padding: 4px 30px;
    border-radius: 30px;
    transition: all 0.1s;
    &:hover{
        color: #00b2ab;
    }
}

#group-list .keyword .active{
  color: #fff;
  background-color: #00b2ab;
  &:hover{
    color: #fff;
    background-color: #00b2ab;
    }
}

.pagination ul{
  display: flex;
  justify-content: center;
  column-gap: 15px;
  padding: 0;
}

.pagination ul li a{
  background-color: #fff;
  border: #00b2ab 1px solid;
  color: #00b2ab;
  font-size: 20px;
  padding: 5px 10px;
  &:hover{
    cursor: pointer;
  }
}

.pagination ul li a.active{
  background-color: #00b2ab;
  color: #fff;

}

.pagination ul li a.pagination_prev,
.pagination ul li a.pagination_next{
  border: none;
  background-color: #f4f6f7;
  border-radius: 50px;
  transition: all 0.3s;
  padding: 5px 12px;
  &:hover{
    background-color: #dddddd;
  }
}

@media screen and (max-width: 750px){
  .pagination ul{
    max-width: 90%;
    margin: 0 auto;
    column-gap: 4px;
  }
  .pagination ul li a{
    font-size: 14px;

  }
}