@charset "UTF-8";
/*
Theme Name:Leather Knowledge Project -革を、構造から理解する-
Theme URL:https://leather-knowledge-expert.jp
Description:メインテーマ
Author:ブレインアンドトラスト
*/

/* ===============================================
breakpoints: 576px, 768px, 992px, 1200px, 1400px
=============================================== */

/* ===============================================
変数設定
=============================================== */
:root {
  /* カラー */
  --color-white: #ffffff;
  --color-line: #e8e8e8;
  --color-bg: #f6f6f6;
  --color-txtPri: #1a1a1a;
  --color-txtSec: #666666;
  --color-txtTer: #9e9e9e;
  /* コンテンツサイズ */
  --Wcont: min(94%, 1200px);
  --HeaderHeight: 80px;
  --SpHeaderHeight: 70px;
}

/* ===============================================
font
=============================================== */
/* Noto Sans JP */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* Zen Old Mincho */
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap");
/* Noto Serif JP */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");

/* ===============================================
Elements
=============================================== */
body {
  color: var(--color-txtPri);
  background-color: var(--color-white);
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: YakuHanJP, "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  overflow-x: hidden;
  min-height: 100dvh;
}
body[data-ham-open=open] {
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 767.98px) {
  body {
    font-size: 14px;
  }
}
a {
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
@media screen and (min-width: 992px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
/* pc sp　表示切替
----------------------- */
@media screen and (min-width: 768px) {
  .vw_l,
  .pc-only {
    display: block !important;
  }
}
@media screen and (max-width: 767.98px) {
  .vw_l,
  .pc-only {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .vw_s,
  .sp-only {
    display: none !important;
  }
}
@media screen and (max-width: 767.98px) {
  .vw_s,
  .sp-only {
    display: block !important;
  }
}
img {
  max-width: 100%;
}
.ff-mincho {
  font-family: YakuHanMP, "Zen Old Mincho", "Noto Serif JP", serif;
}

/* ===============================================
layout
=============================================== */
.layoutCenter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.layoutCenterX {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.layoutCenterY {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.clearfix::after {
  clear: both;
  content: "";
  display: block;
}
.img-cover {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ===============================================
ui
=============================================== */
.ui-button {
  font-family: YakuHanMP, "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.ui-button::after {
  content: "";
  background-image: url("/cms/wp-content/themes/knowledge-ex/img/icon_button_arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 2em;
  height: 1em;
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.ui-button:hover::after {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}


/* ===============================================
ページ構成レイアウト
=============================================== */
/*メインコンテンツ
----------------------- */
/* トップページ以外 */
main.container {
  padding-top: 120px;
}
@media screen and (max-width: 991.98px) {
  main.container {
    padding-top: 110px;
  }
}
/* トップページのみ */
.home main.container {
  padding-top: var(--HeaderHeight);
}
@media screen and (max-width: 991.98px) {
  .home main.container {
    padding-top: var(--SpHeaderHeight);
  }
}
/*共通コンテンツ幅
----------------------- */
.wCont {
  width: var(--Wcont);
  margin-inline: auto;
  padding-inline: 24px;
}
@media screen and (max-width: 991.98px) {
  .wCont {
    padding-inline: 16px;
  }
}
/*グリッド
----------------------- */
.grid-12 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(12, 1fr);
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}
@media screen and (max-width: 767.98px) {
  .grid-12 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.grid-12 .col-1 {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}
.grid-12 .col-2 {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}
.grid-12 .col-3 {
  -ms-grid-column-span: 3;
  grid-column: span 3;
}
.grid-12 .col-4 {
  -ms-grid-column-span: 4;
  grid-column: span 4;
}
.grid-12 .col-5 {
  -ms-grid-column-span: 5;
  grid-column: span 5;
}
.grid-12 .col-6 {
  -ms-grid-column-span: 6;
  grid-column: span 6;
}
.grid-12 .col-7 {
  -ms-grid-column-span: 7;
  grid-column: span 7;
}
.grid-12 .col-8 {
  -ms-grid-column-span: 8;
  grid-column: span 8;
}
.grid-12 .col-9 {
  -ms-grid-column-span: 9;
  grid-column: span 9;
}
.grid-12 .col-10 {
  -ms-grid-column-span: 10;
  grid-column: span 10;
}
.grid-12 .col-11 {
  -ms-grid-column-span: 11;
  grid-column: span 11;
}
.grid-12 .col-12 {
  -ms-grid-column-span: 12;
  grid-column: span 12;
}
.grid-12.wCont {
  padding-inline: 0;
}


/* ===============================================
ヘッダー
=============================================== */
.gheader {
  position: fixed;
  z-index: 99;
  inset: 0 0 auto 0;
  width: 100%;
  background-color: var(--color-white);
  height: var(--HeaderHeight);
  border-bottom: 1px solid var(--color-line);
}
@media screen and (max-width: 991.98px) {
  .gheader {
    height: var(--SpHeaderHeight);
  }
}
.gheader_inner {
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-shadow: 0 0 0 1px var(--color-line);
          box-shadow: 0 0 0 1px var(--color-line);
}
.gheader_inner > a {
  display: block;
}
.gheader_inner > a .sub {
  font-size: 14px;
  color: var(--color-txtSec);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em;
}
@media screen and (max-width: 991.98px) {
  .gheader_inner > a .sub {
    font-size: 10px;
  }
}
.gheader_inner > a .main {
  line-height: 1.6;
  font-size: 20px;
}
@media screen and (max-width: 991.98px) {
  .gheader_inner > a .main {
    font-size: 16px;
  }
}
/*ヘッダーハンバーガーボタン
----------------------- */
.gheader_toggle {
  display: block;
  width: 35px;
  height: 23.3333333333px;
  position: relative;
  cursor: pointer;
}
.gheader_toggle .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-txtPri);
  border-radius: 1px;
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.gheader_toggle .bar:nth-of-type(1) {
  top: 0;
}
.gheader_toggle .bar:nth-of-type(2) {
  top: 50%;
}
.gheader_toggle .bar:nth-of-type(3) {
  bottom: 0;
}
.gheader_toggle.is-active .bar:nth-of-type(1) {
  -webkit-transform: translateY(11px) rotate(-45deg);
          transform: translateY(11px) rotate(-45deg);
}
.gheader_toggle.is-active .bar:nth-of-type(2) {
  opacity: 0;
}
.gheader_toggle.is-active .bar:nth-of-type(3) {
  -webkit-transform: translateY(-11px) rotate(45deg);
          transform: translateY(-11px) rotate(45deg);
}
/* pcの時ハンバーガー非表示 */
@media screen and (min-width: 992px) {
  .gheader_toggle {
    display: none;
  }
}


/* ===============================================
ヘッダーナビ
=============================================== */
/*pc
----------------------- */
@media screen and (min-width: 992px) {
  .gnav_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 24px;
  }
  .gnav_inner img {
    display: none;
  }
}
/*tab + sp
----------------------- */
@media screen and (max-width: 991.98px) {
  .gnav {
    position: fixed;
    top: var(--SpHeaderHeight);
    right: -100%;
    width: 100%;
    height: calc(100dvh - var(--SpHeaderHeight));
    background-color: var(--color-white);
    -webkit-transition: right 0.5s ease-in-out;
    transition: right 0.5s ease-in-out;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 10;
    overflow-y: auto;
  }
  .gnav.is-active {
    right: 0;
  }
  .gnav_inner {
    width: var(--Wcont);
    margin-inline: auto;
    -webkit-box-shadow: 0 0 0 1px var(--color-line);
            box-shadow: 0 0 0 1px var(--color-line);
    height: 100%;
    padding-block: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .gnav_inner li {
    border-top: 1px solid var(--color-line);
  }
  .gnav_inner li:last-of-type {
    border-bottom: 1px solid var(--color-line);
  }
  .gnav_inner li a {
    background-color: var(--color-bg);
    padding: 16px 24px;
    font-size: 18px;
    font-family: YakuHanMP, "Zen Old Mincho", "Noto Serif JP", serif;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}


/* ===============================================
フッター
=============================================== */
.gfooter {
  position: sticky;
  top: 100%;
}
.gfooter_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-block: 24px;
}
@media screen and (max-width: 991.98px) {
  .gfooter_inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
  }
}
@media screen and (max-width: 991.98px) {
  .gfooter_main p {
    text-align: center;
  }
}
.gfooter_main p:first-of-type {
  color: var(--color-txtSec);
  font-size: 14px;
}
.gfooter_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
}
.gfooter_list:first-of-type {
  font-size: 14px;
}


/* ===============================================
共通コンテンツ　common
=============================================== */
/*全体コンテンツライン
----------------------- */
.cmnLine {
  position: fixed;
  width: 100%;
  height: 100vh;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
.cmnLine_wrap {
  width: var(--Wcont);
  margin-inline: auto;
  -webkit-box-shadow: 0 0 0 1px var(--color-line);
          box-shadow: 0 0 0 1px var(--color-line);
  height: 100%;
}
/*コンテンツスペース
----------------------- */
.cmnSpace {
  border-bottom: 1px solid var(--color-line);
}
/* スペース大 */
.cmnSpace.-large .wCont {
  height: 128px;
}
/* スペース中 */
.cmnSpace.-medium .wCont {
  height: 64px;
}
/* スペース小 */
.cmnSpace.-small .wCont {
  height: 32px;
}
/*パンくず
----------------------- */
.cmnBreadcrumbs {
  border-bottom: 1px solid var(--color-line);
  font-size: 14px;
  background-color: var(--color-white);
  position: fixed;
  top: var(--HeaderHeight);
  z-index: 55;
  width: 100%;
}
@media screen and (max-width: 991.98px) {
  .cmnBreadcrumbs {
    top: var(--SpHeaderHeight);
  }
}
@media screen and (max-width: 767.98px) {
  .cmnBreadcrumbs {
    font-size: 10px;
  }
}
.cmnBreadcrumbs .wCont {
  -webkit-box-shadow: 0 0 0 1px var(--color-line);
          box-shadow: 0 0 0 1px var(--color-line);
}
.cmnBreadcrumbs > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-block: 8px;
}
.cmnBreadcrumbs > ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cmnBreadcrumbs > ul li a {
  color: var(--color-txtSec);
}
.cmnBreadcrumbs > ul li + li::before {
  content: "";
  margin: 0 1em;
  background-image: url("/cms/wp-content/themes/knowledge-ex/img/angle-right.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
}
@media screen and (max-width: 767.98px) {
  .cmnBreadcrumbs > ul li + li::before {
    margin: 0 0.5em;
  }
}
/*タイトル　heading
----------------------- */
.cmnHeading {
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}
.cmnHeading_inner {
  padding-block: 96px;
}
.cmnHeading_inner > h1 {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 767.98px) {
  .cmnHeading_inner > h1 {
    font-size: 26px;
  }
}
.cmnHeading_inner .sub {
  color: var(--color-txtSec);
}
/*ページ戻る
----------------------- */
.cmnBackpage {
  border-bottom: 1px solid var(--color-line);
}
.cmnBackpage .wrap {
  -ms-grid-column: 3;
  -ms-grid-column-span: 8;
  grid-column: 3/span 8;
}
@media screen and (min-width: 768px) {
  .cmnBackpage .wrap {
    border-left: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
  }
}
.cmnBackpage .wrap > a {
  display: block;
  padding: 16px 24px;
  text-align: center;
  background-color: var(--color-bg);
}
.cmnBackpage .wrap > a:hover {
  background-color: var(--color-white);
}
/*ページトップ
----------------------- */
.cmnPagetop {
  position: fixed;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 767.98px) {
  .cmnPagetop {
    right: 3%;
  }
}
.cmnPagetop > a {
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0 0 1px var(--color-line);
          box-shadow: 0 0 0 1px var(--color-line);
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: #9e9e9e;
}
.cmnPagetop > a i {
  font-size: 12px;
}
.cmnPagetop > a:hover {
  background-color: var(--color-bg);
}


/* ===============================================
トップページ
=============================================== */
/*トップページ共通
----------------------- */
.home section {
  border-bottom: 1px solid var(--color-line);
}
.homeTitle p {
  color: var(--color-txtSec);
}
.homeTitle h2 {
  font-size: 36px;
  line-height: 1.6;
  font-weight: 500;
  margin-top: 32px;
}
@media screen and (max-width: 767.98px) {
  .homeTitle h2 {
    font-size: 26px;
  }
}
.homeLead {
  margin-top: 16px;
}
.home h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 767.98px) {
  .home h3 {
    font-size: 20px;
  }
}
/*トップページ_キービジュアル
----------------------- */
.home .keyv_inner {
  height: max(80vh - 80px, 500px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: 24px;
}
.home .keyv_cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.home .keyv_cont p {
  color: var(--color-txtSec);
  text-align: center;
}
.home .keyv_cont p:last-child {
  font-size: 20px;
  margin-top: 24px;
}
@media screen and (max-width: 767.98px) {
  .home .keyv_cont p:last-child {
    font-size: 16px;
  }
}
.home .keyv_cont h1 {
  margin-top: 32px;
  width: max(56%, 400px);
}
@media screen and (max-width: 767.98px) {
  .home .keyv_cont h1 {
    width: max(56%, 200px);
  }
}
.home .keyv_cont h1 img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
}
/*トップページ_イントロ
----------------------- */
.home .intro_inner {
  max-width: 800px;
  padding-block: 128px;
}
.home .intro_cont {
  font-size: 20px;
}
@media screen and (max-width: 767.98px) {
  .home .intro_cont {
    font-size: 16px;
  }
}
.home .intro_cont p + p {
  margin-top: 1em;
}
.home .intro_cont p:nth-of-type(3),
.home .intro_cont p:nth-of-type(5),
.home .intro_cont p:nth-of-type(6) {
  margin-top: 2.5em;
}
.home .intro_cont a {
  color: var(--color-txtSec);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.home .intro_cont a:hover {
  color: var(--color-txtPri);
  text-decoration: none;
}
/*トップページ_構造的理解
----------------------- */
.home .structure_inner {
  text-align: center;
  padding-block: 64px;
  padding-inline: 0;
}
.home .structure_heading {
  padding-inline: 24px;
}
.home .structure_illust {
  width: 100%;
  margin-top: 24px;
  padding-inline: 16px;
  display: block;
}
/*トップページ_革を理解する6つのテーマ
----------------------- */
.home .topics_inner {
  padding-block: 64px 32px;
}
.home .topics_sec, .home .topics_space {
  border-bottom: 1px solid var(--color-line);
}
@media screen and (max-width: 767.98px) {
  .home .topics_sec .grid-12 {
    gap: 16px;
  }
}
.home .topics_sec:last-of-type {
  border-bottom: none;
}
@media screen and (min-width: 768px) {
  .home .topics_label {
    padding: 48px 24px;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: subgrid;
    grid-template-rows: subgrid;
    -ms-grid-row-span: 4;
    grid-row: span 4;
  }
}
@media screen and (max-width: 767.98px) {
  .home .topics_label {
    padding: 24px 16px 8px;
  }
}
.home .topics_label > p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--color-txtSec);
}
.home .topics_label > p::before {
  content: "●";
  color: var(--color-txtPri);
  font-size: 8px;
}
.home .topics_panel {
  background-color: var(--color-bg);
}
@media screen and (min-width: 768px) {
  .home .topics_panel {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: subgrid;
    grid-template-rows: subgrid;
    -ms-grid-row-span: 4;
    grid-row: span 4;
    border-left: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
    padding: 48px 24px;
  }
}
@media screen and (max-width: 767.98px) {
  .home .topics_panel {
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    padding: 32px 16px;
  }
  .home .topics_panel:nth-of-type(2) {
    border-bottom: none;
  }
}
.home .topics_panel .sub {
  color: var(--color-txtSec);
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.home .topics_panel .main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-block: 24px 8px;
}
.home .topics_panel .more {
  margin-top: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 8px;
}
.home .topics_panel .more img {
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.home .topics_panel:hover {
  background-color: var(--color-white);
}
.home .topics_panel:hover .more img {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}
/*トップページ_革の複層的な評価構造
----------------------- */
.home .conceptual_inner {
  padding-inline: 0;
}
.home .conceptual_heading {
  padding: 64px 24px;
}
@media screen and (max-width: 767.98px) {
  .home .conceptual_heading {
    padding: 32px 16px;
    border-bottom: 1px solid var(--color-line);
  }
}
@media screen and (min-width: 768px) {
  .home .conceptual_cont {
    border-left: 1px solid var(--color-line);
  }
}
.home .conceptual_list {
  padding: 32px 24px;
}
@media screen and (max-width: 767.98px) {
  .home .conceptual_list {
    padding: 32px 16px;
  }
}
.home .conceptual_list:not(:first-of-type) {
  border-top: 1px solid var(--color-line);
}
.home .conceptual_list > ul {
  margin-top: 16px;
}
.home .conceptual_list > ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.home .conceptual_list > ul li::before {
  content: "●";
  font-size: 8px;
}
/*トップページ_本サイトの立場
----------------------- */
.home .position_inner {
  padding-block: 64px;
}
/*トップページ_補助ページ
----------------------- */
.home .reference_inner {
  padding-inline: 0;
}
.home .reference_heading {
  padding: 32px 24px;
}
@media screen and (max-width: 767.98px) {
  .home .reference_heading {
    padding: 32px 16px;
  }
}
.home .reference_cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 768px) {
  .home .reference_cont {
    border-left: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
  }
}
.home .reference_panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 8px;
  background-color: var(--color-bg);
  padding: 32px 24px;
}
.home .reference_panel:first-of-type {
  border-bottom: 1px solid var(--color-line);
}
.home .reference_panel:last-of-type {
  border-top: 1px solid var(--color-line);
}
@media screen and (max-width: 767.98px) {
  .home .reference_panel {
    border-top: 1px solid var(--color-line);
    padding: 32px 16px;
  }
}
.home .reference_panel .sub {
  color: var(--color-txtSec);
  font-size: 14px;
  line-height: 1.4;
}
.home .reference_panel .main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-block: 8px;
}
.home .reference_panel img {
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.home .reference_panel:hover {
  background-color: var(--color-white);
}
.home .reference_panel:hover img {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}


/* ===============================================
皮を理解する6つのテーマ + 固定ページ
=============================================== */
.topics section,
.page section {
  border-bottom: 1px solid var(--color-line);
}
/*カテゴリ
----------------------- */
/* 説明文 */
.topics .desc_inner,
.page .desc_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-block: 96px;
  font-size: 18px;
}
@media screen and (max-width: 767.98px) {
  .topics .desc_inner,
  .page .desc_inner {
    font-size: 16px;
  }
}
.topics .desc_inner h2,
.page .desc_inner h2 {
  font-size: 24px;
  font-weight: 500;
  margin-block: 1em;
}
.topics .desc_inner p,
.page .desc_inner p {
  margin-block: 1em;
}
.topics .desc_inner ul,
.topics .desc_inner ol,
.page .desc_inner ul,
.page .desc_inner ol {
  padding-inline: 2em 1em;
  margin-block: 0.5em;
}
.topics .desc_inner ul,
.page .desc_inner ul {
  list-style-type: disc;
}
.topics .desc_inner ol,
.page .desc_inner ol {
  list-style-type: decimal;
}
.topics .desc_cont,
.page .desc_cont {
  max-width: 800px;
}
/* 記事一覧 */
.topics .list_inner > ul,
.page .list_inner > ul {
  -ms-grid-column: 3;
  -ms-grid-column-span: 8;
  grid-column: 3/span 8;
}
@media screen and (min-width: 768px) {
  .topics .list_inner > ul,
  .page .list_inner > ul {
    border-left: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
  }
}
.topics .list_item,
.page .list_item {
  border-bottom: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
  margin-top: 16px;
}
.topics .list_item:first-of-type,
.page .list_item:first-of-type {
  border-top: none;
  margin-top: 0;
}
.topics .list_item:last-of-type,
.page .list_item:last-of-type {
  border-bottom: none;
}
.topics .list_link,
.page .list_link {
  font-size: 20px;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 8px;
  background-color: var(--color-bg);
  padding: 24px;
}
@media screen and (max-width: 767.98px) {
  .topics .list_link,
  .page .list_link {
    padding: 24px 16px;
    font-size: 16px;
  }
}
.topics .list_link img,
.page .list_link img {
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.topics .list_link:hover,
.page .list_link:hover {
  background-color: var(--color-white);
}
.topics .list_link:hover img,
.page .list_link:hover img {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}
/*記事内コンテンツ
----------------------- */
.topics .pageContent_inner,
.page .pageContent_inner {
  padding-block: 48px;
  width: min(94%, 800px);
}
.topics .pageContent h1,
.topics .pageContent h2,
.topics .pageContent h3,
.topics .pageContent h4,
.page .pageContent h1,
.page .pageContent h2,
.page .pageContent h3,
.page .pageContent h4 {
  font-family: YakuHanMP, "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 500;
  line-height: 1.6;
}
.topics .pageContent h1,
.page .pageContent h1 {
  font-size: 36px;
  margin-block: 2em 0.5em;
}
@media screen and (max-width: 767.98px) {
  .topics .pageContent h1,
  .page .pageContent h1 {
    font-size: 26px;
  }
}
.topics .pageContent h2,
.page .pageContent h2 {
  font-size: 30px;
  margin-block: 2em 0.5em;
}
@media screen and (max-width: 767.98px) {
  .topics .pageContent h2,
  .page .pageContent h2 {
    font-size: 24px;
  }
}
.topics .pageContent h3,
.page .pageContent h3 {
  font-size: 24px;
  margin-block: 1.5em 0.5em;
}
@media screen and (max-width: 767.98px) {
  .topics .pageContent h3,
  .page .pageContent h3 {
    font-size: 20px;
  }
}
.topics .pageContent h4,
.page .pageContent h4 {
  font-size: 20px;
  margin-block: 1em 0.5em;
}
@media screen and (max-width: 767.98px) {
  .topics .pageContent h4,
  .page .pageContent h4 {
    font-size: 18px;
  }
}
.topics .pageContent h5,
.page .pageContent h5 {
  font-size: 18px;
  font-weight: 500;
  margin-block: 1em 0.5em;
}
@media screen and (max-width: 767.98px) {
  .topics .pageContent h5,
  .page .pageContent h5 {
    font-size: 16px;
  }
}
.topics .pageContent h6,
.page .pageContent h6 {
  font-weight: 500;
  margin-block: 1em 0.5em;
}
.topics .pageContent p,
.page .pageContent p {
  margin-block: 0.5em;
}
.topics .pageContent ul,
.topics .pageContent ol,
.page .pageContent ul,
.page .pageContent ol {
  padding-inline: 2em 1em;
  margin-block: 0.5em;
}
.topics .pageContent ul,
.page .pageContent ul {
  list-style-type: disc;
}
.topics .pageContent ol,
.page .pageContent ol {
  list-style-type: decimal;
}
.topics .pageContent img,
.page .pageContent img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.topics .pageContent table,
.page .pageContent table {
  border: 1px solid var(--color-line);
  width: 100%;
}
.topics .pageContent table thead,
.page .pageContent table thead {
  background-color: var(--color-bg);
  font-weight: 600;
}
.topics .pageContent table th,
.topics .pageContent table td,
.page .pageContent table th,
.page .pageContent table td {
  padding: 8px;
  border: 1px solid var(--color-line);
}
.topics .pageContent a,
.page .pageContent a {
  color: var(--color-txtSec);
  text-decoration: underline;
}
.topics .pageContent a:hover,
.page .pageContent a:hover {
  color: var(--color-txtPri);
  text-decoration: none;
}


/* ===============================================
FAQ よくある質問 / 用語集
=============================================== */
.faq section,
.glossary section {
  border-bottom: 1px solid var(--color-line);
}
/*リード文
----------------------- */
.faq .info_inner,
.faq .intro_inner,
.faq .rule_inner,
.glossary .info_inner,
.glossary .intro_inner,
.glossary .rule_inner {
  padding-block: 96px;
  font-size: 18px;
  max-width: 800px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 767.98px) {
  .faq .info_inner,
  .faq .intro_inner,
  .faq .rule_inner,
  .glossary .info_inner,
  .glossary .intro_inner,
  .glossary .rule_inner {
    font-size: 16px;
  }
}
.faq .info_inner h3,
.faq .intro_inner h3,
.faq .rule_inner h3,
.glossary .info_inner h3,
.glossary .intro_inner h3,
.glossary .rule_inner h3 {
  font-size: 24px;
  margin-block: 1em;
  font-weight: 500;
}
@media screen and (max-width: 767.98px) {
  .faq .info_inner h3,
  .faq .intro_inner h3,
  .faq .rule_inner h3,
  .glossary .info_inner h3,
  .glossary .intro_inner h3,
  .glossary .rule_inner h3 {
    font-size: 20px;
  }
}
.faq .info_inner p,
.faq .intro_inner p,
.faq .rule_inner p,
.glossary .info_inner p,
.glossary .intro_inner p,
.glossary .rule_inner p {
  margin-block: 1em;
}
.faq .info_inner ul,
.faq .info_inner ol,
.faq .intro_inner ul,
.faq .intro_inner ol,
.faq .rule_inner ul,
.faq .rule_inner ol,
.glossary .info_inner ul,
.glossary .info_inner ol,
.glossary .intro_inner ul,
.glossary .intro_inner ol,
.glossary .rule_inner ul,
.glossary .rule_inner ol {
  padding-inline: 2em 1em;
  margin-block: 0.5em;
}
.faq .info_inner ul,
.faq .intro_inner ul,
.faq .rule_inner ul,
.glossary .info_inner ul,
.glossary .intro_inner ul,
.glossary .rule_inner ul {
  list-style-type: disc;
}
.faq .info_inner ol,
.faq .intro_inner ol,
.faq .rule_inner ol,
.glossary .info_inner ol,
.glossary .intro_inner ol,
.glossary .rule_inner ol {
  list-style-type: decimal;
}
.faq .info_inner a,
.faq .intro_inner a,
.faq .rule_inner a,
.glossary .info_inner a,
.glossary .intro_inner a,
.glossary .rule_inner a {
  color: var(--color-txtSec);
  text-decoration: underline;
}
.faq .info_inner a:hover,
.faq .intro_inner a:hover,
.faq .rule_inner a:hover,
.glossary .info_inner a:hover,
.glossary .intro_inner a:hover,
.glossary .rule_inner a:hover {
  color: var(--color-txtPri);
  text-decoration: none;
}
/*カテゴリ一覧
----------------------- */
.faq .category_inner,
.glossary .category_inner {
  padding-inline: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
@media screen and (max-width: 767.98px) {
  .faq .category_inner,
  .glossary .category_inner {
    gap: 8px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.faq .category_inner li,
.glossary .category_inner li {
  height: stretch;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (min-width: 768px) {
  .faq .category_inner li:not(:last-child),
  .glossary .category_inner li:not(:last-child) {
    border-right: 1px solid var(--color-line);
  }
  .faq .category_inner li + li,
  .glossary .category_inner li + li {
    border-left: 1px solid var(--color-line);
  }
}
.faq .category_inner li a,
.glossary .category_inner li a {
  display: block;
  text-align: center;
  padding: 24px 16px;
  font-weight: 500;
  background-color: var(--color-bg);
  height: stretch;
}
@media screen and (max-width: 767.98px) {
  .faq .category_inner li a,
  .glossary .category_inner li a {
    padding: 16px;
  }
}
.faq .category_inner li a:hover,
.glossary .category_inner li a:hover {
  background-color: var(--color-white);
}
@media screen and (max-width: 767.98px) {
  .faq .category_inner li,
  .glossary .category_inner li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 4px);
            flex: 0 0 calc(50% - 4px);
    -webkit-box-shadow: 0 0 0 1px var(--color-line);
            box-shadow: 0 0 0 1px var(--color-line);
  }
}
/*記事一覧
----------------------- */
.faq .box,
.glossary .box {
  border-bottom: none;
}
.faq .box .cmnSpace:last-of-type,
.glossary .box .cmnSpace:last-of-type {
  display: none;
}
.faq .heading,
.faq .list,
.glossary .heading,
.glossary .list {
  border-bottom: 1px solid var(--color-line);
}
.faq .heading_inner,
.glossary .heading_inner {
  padding-block: 48px;
}
.faq .heading p,
.glossary .heading p {
  color: var(--color-txtSec);
}
.faq .heading h2,
.glossary .heading h2 {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 767.98px) {
  .faq .heading h2,
  .glossary .heading h2 {
    font-size: 26px;
  }
}
.faq .list_box,
.glossary .list_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 768px) {
  .faq .list_box,
  .glossary .list_box {
    border-left: 1px solid var(--color-line);
  }
}
.faq .list_title,
.glossary .list_title {
  padding: 24px;
  font-size: 24px;
  font-weight: 500;
}
@media screen and (max-width: 767.98px) {
  .faq .list_title,
  .glossary .list_title {
    padding: 24px 16px;
    font-size: 20px;
  }
}
.faq .list_item,
.glossary .list_item {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.faq .list_item:last-of-type,
.glossary .list_item:last-of-type {
  border-bottom: none;
}
@media screen and (min-width: 768px) {
  .faq .list_item:first-of-type,
  .glossary .list_item:first-of-type {
    border-top: none;
  }
}
.faq .list_item_question,
.glossary .list_item_question {
  padding: 32px 48px;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 24px;
}
@media screen and (max-width: 767.98px) {
  .faq .list_item_question,
  .glossary .list_item_question {
    padding: 24px 16px;
    font-size: 16px;
  }
}
.faq .list_item_question .toggle,
.glossary .list_item_question .toggle {
  width: 1em;
  height: 1em;
  position: relative;
}
.faq .list_item_question .toggle::before, .faq .list_item_question .toggle::after,
.glossary .list_item_question .toggle::before,
.glossary .list_item_question .toggle::after {
  content: "";
  display: block;
  background-color: var(--color-txtPri);
  border-radius: 5px;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: 100%;
  height: 1px;
}
.faq .list_item_question .toggle::after,
.glossary .list_item_question .toggle::after {
  rotate: 90deg;
  -webkit-transition: scale 0.2s;
  transition: scale 0.2s;
}
.faq .list_item_question.open .toggle::after,
.glossary .list_item_question.open .toggle::after {
  scale: 0 1;
}
.faq .list_item_answer,
.glossary .list_item_answer {
  display: none;
  padding: 0 48px 32px;
}
@media screen and (max-width: 767.98px) {
  .faq .list_item_answer,
  .glossary .list_item_answer {
    padding: 0 16px 24px;
  }
}
.faq .list_item_answer .answer_box p:not(:first-of-type),
.glossary .list_item_answer .answer_box p:not(:first-of-type) {
  margin-block: 0.5em;
}
.faq .list_item_answer .details,
.glossary .list_item_answer .details {
  margin-block: 1em;
}
.faq .list_item_answer .details_link,
.glossary .list_item_answer .details_link {
  color: var(--color-txtSec);
}
.faq .list_item_answer .details_link:hover,
.glossary .list_item_answer .details_link:hover {
  opacity: 0.7;
}
/*# sourceMappingURL=style.css.map */