@charset "UTF-8";

.pages_index {
  a {
    color: #222;
  }

  a:hover {
    color: #DA6B18;
  }

  ul:not([class]) {
    padding-left: 1.6em;

    li {
      margin-block: 1em;
    }
  }
}

/* 大見出しh1とパンくずリスト
================================ */
.pagesHeader {
  background-image: linear-gradient(124deg, rgba(255, 239, 80, 0.5) 0%, rgba(146, 216, 97, 0.5) 80%, rgba(69, 187, 164, 0.5) 100%), url(/assets/img/common/back_factory.png), url(/assets/img/common/back_city.png);
  background-size: 100%, clamp(200px, 45%, 600px), clamp(200px, 45%, 550px);
  background-position: center, left -10% bottom 80%, right 0 center;
  background-repeat: no-repeat;
}

.pagesHeader_inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  min-height: 28svh;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
}

.pagesHeader h1 {
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.4;
  margin-block: auto;
}

.crumbs {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
}

.crumbs_item {
  font-size: 1.2rem;
}

.crumbs_item--home {
  text-transform: uppercase;
}

.crumbs_item:not(:last-of-type)::after {
  content: "-";
  display: inline-block;
  margin-left: 1rem;
}

.crumbs_item a {
  color: #222;
  font-weight: 500;
}

.crumbs_item a:hover {
  color: #208E66;
  text-decoration: none;
}


/* 共通パーツ
================================ */


.pages_inner {
  margin: 0 auto;
  max-width: 1100px;
  padding: 2rem;
}

.pages_inner h2:first-of-type {
  margin-block: 1em 0.6em;
}

.pages_inner>p:first-child {
  margin-block: 1em;
}

/* 見出しデザイン */
.pages h3,
.pages h4,
.pages h5,
.pages h6 {
  margin-block: 1.5em 0.6em;
}

.pages h2+h3,
.pages h2+h4,
.pages h2+h5,
.pages h2+h6,
.pages h3+h4,
.pages h3+h5,
.pages h3+h6,
.pages h5+h6,
.pages h6+h6 {
  margin-block-start: 0.5em;
}

.pages h2 {
  border-bottom: solid 4px var(--b-yellow);
  position: relative;
  font-size: 3.0rem;
  font-weight: 600;
  margin-block: 2em 0.6em;
}

.pages h2::before {
  content: "";
  display: inline-block;
  width: 5em;
  height: 4px;
  background-color: var(--m-yellow);
  position: absolute;
  bottom: -3.5px;
}

.pages h3 {
  position: relative;
  padding-left: 0.6em;
  font-size: 2.6rem;
  font-weight: 600;
}

.pages h3::before,
.pages h3::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 0.5em;
  position: absolute;
  left: 0;
}

.pages h3::before {
  background-color: var(--m-yellow);
  top: 0.4em;
}

.pages h3::after {
  background-color: var(--b-yellow);
  top: 0.9em;
}

.pages h4 span {
  padding: 0 0.2em;
  background-image: linear-gradient(0deg, var(--m-yellow) 0%, var(--m-yellow) 40%, transparent 45%);
  background-size: 100% 1.4em;
  background-repeat: repeat-x;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.4;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.pages h5 span {
  background-image: repeating-linear-gradient(90deg, var(--m-yellow), var(--m-yellow) 6px, transparent 6px, transparent 12px);
  padding-bottom: 0.6rem;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 3px;
  font-size: 1.8rem;
  font-weight: 600;
}

.pages h6 {
  color: var(--m-green);
  font-size: 1.6rem;
  font-weight: 600;
}

/* テキストデザイン */
.pages p {
  font-weight: 400;
  margin-block: 0 1em;
}

.pages a {
  font-weight: 500;
}

.pages a:hover {
  text-decoration: none;
  color: #DA6B18;
  text-decoration: none;

  img {
    opacity: 0.7;
  }
}

.pages p a[target=_blank]::after {
  font-family: "Material Symbols Rounded";
  content: "\2060\e89e";
  font-size: 0.9em;
  display: inline-block;
  position: relative;
  bottom: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}

/* .pages p a[href$=".pdf"]::after {
  content: "(PDF)";
} */

/* ボタンデザイン */
.pages p a.link-btn {
  min-width: 16.0rem;
  text-align: center;
  white-space: nowrap;
  font-size: 1.6rem;
  line-height: 1.5;
  display: block;
  width: fit-content;
  border: solid 2px #246FD1;
  border-radius: 100px;
  color: #222;
  text-decoration: none;
  padding: 0.7em 2.5em 0.7em 1.5em;
  position: relative;
  transition: 0.2s;
}

.pages p a.link-btn::after {
  font-family: "Material Symbols Rounded";
  font-size: 1.1em;
  color: #246FD1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  content: "\e5c8";
  position: absolute;
  line-height: 0;
  top: 50%;
  bottom: 0;
  right: 1.5rem;
  translate: 0 -50%;
}

.pages p a.link-btn[target=_blank]::after {
  content: "\e89e";
  font-size: 0.9em;
}

.pages p a.link-btn[href$=".pdf"]::after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(/assets/img/common/icon_pdf.svg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.pages p a.link-btn:hover {
  background-color: #E1EEFF;
  opacity: 1;
}


/* リストデザイン */
/* -------- 第2階層リスト -------- */
.pages ol ol {
  counter-reset: level2;
  list-style: none;
  padding-left: 2.5em;
}

.pages ol ol>li {
  counter-increment: level2;
  position: relative;
}

.pages ol ol>li::before {
  content: "(" counter(level2) ") ";
  position: absolute;
  left: -2.5em;
}

/* -------- 第3階層リスト -------- */
.pages ol ol ol {
  counter-reset: level3;
  list-style: none;
  padding-left: 1.5em;
}

.pages ol ol ol>li {
  counter-increment: level3;
  position: relative;
}

.pages ol ol ol>li::before {
  content: counter(level3, lower-alpha) ". ";
  position: absolute;
  left: -1.5em;
}

/* テーブルデザイン */
/* テーブル全体 */
.pages table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 1.5rem;
  line-height: 1.5;
}

/* th と td の基本スタイル */
.pages th,
.pages td {
  border: 1px solid #aeaeae;
  padding: 0.5em 1em;
}

tbody th {
  text-align: left;
}

.pages td>ul,
.pages td>ol {
  padding-left: 1.5em;
}


/* 上部の列ヘッダー */
.pages th {
  background-color: #f3f3f3;
  font-weight: 600;
}

/* 左列行見出し */
.pages th[scope="row"] {
  background-color: #f3f3f3;
  font-weight: 600;
}

.pages thead td:empty {
  background-color: #f3f3f3;
}

table a {
  color: #222;
}

table .vertical {
  margin: auto;
  padding: 0.6em 0;
  text-align: center;
  display: block;
  width: 1em;
  line-height: 1.1;
}

table a[target=_blank]::after {
  font-family: "Material Symbols Rounded";
  content: "\e89e";
  display: inline-block;
  position: relative;
  text-decoration: none;
}

table a:hover {
  color: #DA6B18;
}

/* その他のスタイル */
.pages {
  .red {
    color: #ff4b00;
    font-weight: 700;
  }

  .large-font {
    display: inline-block;
    font-size: 2.4em;
    font-weight: 700;
    padding: 0 0.1em;
    line-height: 1.1;
  }

  .medium-font {
    display: inline-block;
    font-size: 1.5em;
    font-weight: 600;
    padding: 0 0.1em;
    line-height: 1.2;
  }

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

.border_box {
  border: solid 1px #222;
  padding: 2.5rem;

  dl {
    margin-block: 0;
  }

  dt {
    font-weight: 700;
  }

  dd {
    margin-left: 0;
  }
}

.label_dl {
  dt {
    font-size: 1.8rem;
    font-weight: 700;
    background-image: linear-gradient(0deg, var(--m-yellow) 0%, var(--m-yellow) 40%, transparent 45%);
    width: fit-content;
    padding-inline: 0.3em;
    line-height: 1.5;
    margin-bottom: 0.6em;
  }

  dd {
    margin-left: 0.4em;
  }
}

/* 目次デザイン
================================ */
.pages_indexList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.0rem;
  list-style-type: none;
  max-width: 1100px;
  margin: 3.0rem auto;
  padding-left: 0;
}

.pages_indexItem {
  a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: solid 3px #208E66;
    border-radius: 10px;
    padding: 2.0rem;
    text-decoration: none;
    color: #222;
    font-size: 2.0rem;
    transition: 0.2s;
    line-height: 1.2;
  }

  a::after {
    content: '\e5c8';
    font-family: 'Material Symbols Rounded';
    font-weight: 300;
    letter-spacing: 0;
    background-color: #208E66;
    color: #fff;
    border-radius: 50%;
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
  }

  a:hover {
    background-color: #208E66;
    color: #fff;
  }

  a:hover::after {
    background-color: #fff;
    color: #208E66;
    font-weight: 500;
    transition: 0.2s;
  }
}


/* フレックスボックス
================================ */
.flexBox {
  display: flex;
  align-items: flex-start;
  gap: 2.0rem;
  margin-block: 0 3.0rem;
}

.flexBox.row-reverse {
  flex-direction: row-reverse;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem 4.0rem;
}

.gridBox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 4.0rem 3.5rem;
  margin-block: 0 3.0rem;
}


/* SVG地図
=============================== */
#map_office {
  width: 100%;

  a:hover {
    path[fill="#a7d2f3"] {
      fill: #5ca8e2;
    }

    path[fill="#bce4c8"] {
      fill: #74C48C;
    }

    path[fill="#f9e980"] {
      fill: #f7d91b;
    }

    rect[stroke="#67aee6"] {
      fill: #ecf7ffff;
    }

    rect[stroke="#74c48c"] {
      fill: #f2ffe7ff;
    }

    rect[stroke="#fde029"] {
      fill: #fffcdeff;
    }
  }

  a path,
  a rect {
    transition: 0.2s;
  }
}


@media (orientation: portrait) {
  .pagesHeader_inner {
    min-height: 18svh;
    gap: 0.8rem;
  }
}

@media (max-width: 767px) {

  /* 大見出しh1とパンくずリスト
================================ */
  .pagesHeader {
    background-size: 100%, clamp(210px, 50%, 600px), clamp(200px, 50%, 600px);
    background-position: center, left -20% bottom 60%, right -20% center;
  }

  .pagesHeader h1 {
    font-size: 2.4rem;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
  }

  .crumbs {
    gap: 5px;
  }

  .crumbs_item {
    font-size: 1.1rem;
  }


  /* 共通パーツ
================================ */
  .pages_inner {
    max-width: 650px;
  }

  /* 見出しデザイン */
  .pages h2 {
    font-size: 2.2rem;
  }

  .pages h2::before {
    content: "";
    display: inline-block;
    width: 5em;
    height: 4px;
    background-color: var(--m-yellow);
    position: absolute;
    bottom: -3.5px;
  }

  .pages h3 {
    font-size: 2.0rem;
    font-weight: 600;
  }

  .pages h4 span {
    font-size: 1.8rem;
  }

  .pages h5 span {
    background-image: repeating-linear-gradient(90deg, var(--m-yellow), var(--m-yellow) 4px, transparent 4px, transparent 8px);
    padding-bottom: 0.5rem;
    font-size: 1.6rem;
  }

  .pages h6 {
    font-size: 1.5rem;
  }

  /* テキストデザイン */
  .pages p {
    font-size: 1.5rem;
  }

  /* ボタンデザイン */
  .pages p a.link-btn {
    min-width: 16.0rem;
    white-space: initial;
    word-break: keep-all;
    font-size: 1.5rem;
  }


  /* リストデザイン */
  /* -------- 第2階層リスト -------- */
  .pages ol ol {
    padding-left: 2.0em;
  }

  .pages ul ul {
    padding-left: 2.0rem;
  }


  /* テーブルデザイン */
  /* テーブル全体 */
  .pages table {
    font-size: 1.4rem;
  }

  /* th と td の基本スタイル */
  .pages th,
  .pages td {
    padding: 0.6em;
  }

  .table_container {
    width: 100%;
    overflow-x: auto;

    table {
      min-width: 767px;
    }
  }

  /* その他のスタイル */
  .pages {
    .large-font {
      font-size: 2.3em;
      font-weight: 700;
      padding: 0 0.1em;
    }

    .medium-font {
      display: inline-block;
      font-size: 1.3em;
      font-weight: 600;
      padding: 0 0.1em;
      line-height: 1.4;
    }

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


  /* 目次デザイン
================================ */
  .pages_indexList {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 650px;
  }

  .pages_indexItem {
    a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: solid 3px #208E66;
      border-radius: 10px;
      padding: 1.6rem;
      text-decoration: none;
      color: #222;
      font-size: 1.7rem;
      transition: 0.2s;
    }
  }

  /* フレックスボックス
================================ */
  .flexBox {
    flex-direction: column;
    align-items: flex-start;
  }

  .flexBox.row-reverse {
    flex-direction: column;
    align-items: flex-start;
  }

  .gridBox {
    display: flex;
    flex-direction: column;
  }
}