/*********/
.about {
  padding: 0 0 72px; }

.about_flex {
  max-width: 1200px;
  width: calc(100% - 80px);
  margin: 0 auto 48px;
  position: relative; }
  .about_flex .txt {
    width: 100%;
    max-width: 560px;
    position: relative;
    z-index: 1; }
    .about_flex .txt p {
      font: 1.8rem/2.4em "Noto Serif", serif;
      font-weight: 500;
      letter-spacing: 0.1em;
      margin-bottom: 24px;
      text-align: justify;
      text-justify: inter-ideograph; }
  .about_flex .map {
    position: absolute;
    right: 0;
    top: 0;
    background: url("../images/index/aboutus_map.png") center right no-repeat;
    background-size: contain;
    aspect-ratio: 600/543;
    width: 100%;
    max-width: 600px;
    height: auto;
    transition: .3s; }

.about_list {
  max-width: 1200px;
  width: calc(100% - 80px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch; }
  .about_list h3 {
    width: 192px;
    margin: 0 24px 0 0;
    border: 1px solid #A3B7BC;
    font: 1.7rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
  .about_list ul {
    width: calc(100% - 216px); }
  .about_list li {
    padding: 0 0 0 24px;
    position: relative;
    margin-bottom: 10px;
    font: 1.7rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em; }
    .about_list li:before {
      position: absolute;
      content: "";
      display: block;
      width: 4px;
      height: 4px;
      background-color: #2AA4B8;
      border-radius: 50%;
      left: 4px;
      top: 14px; }
    .about_list li:last-of-type {
      margin-bottom: 0; }

@media (max-width: 1280px) {
  .about_flex .map {
    background: url("../images/index/aboutus_map.png") center right -100px no-repeat;
    background-size: contain; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .about_flex {
    max-width: 896px;
    margin: 0 auto;
    position: relative; }
    .about_flex .txt {
      margin-bottom: 48px; }
    .about_flex .map {
      position: relative;
      right: auto;
      top: auto;
      margin: 0 auto; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .about_flex {
    margin-bottom: 48px; }
    .about_flex .txt {
      width: 100%;
      max-width: 580px;
      position: relative;
      z-index: 1; }
      .about_flex .txt p {
        font: 1.6rem/2.4em "Noto Serif", serif;
        font-weight: 500;
        letter-spacing: 0.1em;
        margin-bottom: 24px; }
        .about_flex .txt p br {
          display: none; }

  .about_list {
    margin: 0 auto;
    display: block; }
    .about_list h3 {
      width: 100%;
      margin: 0 auto 24px;
      border: 1px solid #A3B7BC;
      font: 1.7rem/1.8em "Noto Sans JP", sans-serif;
      font-weight: 400;
      letter-spacing: 0.05em;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 10px; }
    .about_list ul {
      width: 100%; }
    .about_list li {
      padding: 0 0 0 24px;
      position: relative;
      margin-bottom: 10px;
      font: 1.7rem/1.8em "Noto Sans JP", sans-serif;
      font-weight: 400;
      letter-spacing: 0.05em; }
      .about_list li:before {
        position: absolute;
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        background-color: #2AA4B8;
        border-radius: 50%;
        left: 4px;
        top: 14px; }
      .about_list li:last-of-type {
        margin-bottom: 0; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .about h1 {
    margin-bottom: 40px; }

  .about_flex {
    max-width: 315px;
    width: calc(100% - 60px); }
    .about_flex .txt {
      width: 100%;
      max-width: 580px;
      position: relative;
      z-index: 1;
      margin-bottom: 40px; }
      .about_flex .txt p {
        font: 1.6rem/2.4em "Noto Serif", serif;
        font-weight: 500;
        letter-spacing: 0.1em;
        margin-bottom: 24px; }
      .about_flex .txt h2 {
        font: 3rem/1em "Noto Serif", serif;
        font-weight: 400;
        letter-spacing: 0.2em;
        margin-bottom: 44px; }
        .about_flex .txt h2 span {
          padding: 0 8px; }
    .about_flex .map {
      background: url("../images/index/aboutus_map_s.png") center center no-repeat;
      background-size: contain;
      aspect-ratio: 375/434;
      width: 100%;
      max-width: 375px;
      height: auto; }

  .about_list {
    max-width: 315px;
    width: calc(100% - 60px); }
    .about_list h3 {
      font: 1.6rem/1.5em "Noto Sans JP", sans-serif;
      font-weight: 400;
      padding: 10px; }
    .about_list li {
      font: 1.6rem/1.8em "Noto Sans JP", sans-serif;
      font-weight: 400;
      letter-spacing: 0.05em; } }
/*max-width:480px*/
/************************************/
.box {
  width: calc(100% - 80px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 72px; }
  .box:last-of-type {
    padding: 0 0 120px; }
  .box h3 {
    background: linear-gradient(to right, transparent 0%, #2AA4B8 35%, #2AA4B8 65%, transparent 100%);
    text-align: center;
    color: #fff;
    display: block;
    height: 48px;
    font: 1.9rem/46px "Noto Sans JP", sans-serif;
    font-weight: 500;
    letter-spacing: 0.2em;
    margin-bottom: 48px;
    width: 100%; }
  .box .js-scrollable {
    overflow: hidden !important; }
  .box table {
    font: 1.7rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    width: 100%;
    margin-bottom: 10px; }
    .box table.staff-item th, .box table.staff-item td {
      width: 50%; }
    .box table.executive-item th, .box table.executive-item td {
      width: calc(100%/3); }
  .box th {
    padding: 8px 5px;
    border: 1px solid #A3B7BC;
    background-color: #D7ECF1; }
  .box td {
    padding: 15px;
    border: 1px solid #A3B7BC;
    background-color: #fff;
    width: 100%; }
  .box small {
    display: block;
    text-align: right;
    font: 1.4rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 400; }

/*max-width:1024px*/
@media (max-width: 768px) {
  .box .js-scrollable {
    overflow: scroll !important;
    width: 100%; }
    .box .js-scrollable table {
      width: 768px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .box {
    width: calc(100% - 60px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 40px; }
    .box:last-of-type {
      padding: 0 0 120px; }
    .box h3 {
      background: linear-gradient(to right, transparent 0%, #2AA4B8 35%, #2AA4B8 65%, transparent 100%);
      text-align: center;
      color: #fff;
      display: block;
      height: 40px;
      font: 1.9rem/38px "Noto Sans JP", sans-serif;
      font-weight: 500;
      letter-spacing: 0.2em;
      margin-bottom: 32px;
      width: 100%; }
    .box table {
      font: 1.5rem/1.8em "Noto Sans JP", sans-serif;
      font-weight: 400;
      letter-spacing: 0.05em;
      border: 1px solid #A3B7BC;
      width: 100%;
      margin-bottom: 10px; }
      .box table.staff-item th, .box table.staff-item td {
        width: 50%; }
      .box table.executive-item {
        width: 375px; }
        .box table.executive-item th:nth-of-type(1), .box table.executive-item th:nth-of-type(2), .box table.executive-item td:nth-of-type(1), .box table.executive-item td:nth-of-type(2) {
          width: 30%; }
        .box table.executive-item th:nth-of-type(3), .box table.executive-item td:nth-of-type(3) {
          width: 40%; }
    .box th {
      padding: 8px 5px;
      border: 1px solid #A3B7BC;
      background-color: #D7ECF1; }
    .box td {
      padding: 15px;
      border: 1px solid #A3B7BC;
      background-color: #fff;
      width: 100%; }
    .box small {
      text-align: right !important;
      font: 1.3rem/1.8em "Noto Sans JP", sans-serif;
      font-weight: 400; } }
/*max-width:480px*/
/************************************/
.scroll {
  background-color: #fff;
  padding: 25px 30px;
  border: 1px solid #A3B7BC;
  height: 230px;
  overflow-y: scroll; }
  .scroll section {
    padding: 0 0 52px;
    font: 1.5rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 400; }
    .scroll section .article {
      margin: 0 0 28px; }
      .scroll section .article:last-of-type {
        margin: 0; }
    .scroll section h2 {
      margin: 0;
      padding: 0;
      color: #222;
      font: 1.5rem/1.8em "Noto Sans JP", sans-serif;
      font-weight: 600;
      letter-spacing: 0.05em;
      margin: 0 0 16px; }
      .scroll section h2:before, .scroll section h2:after {
        display: none; }
    .scroll section h3 {
      background: inherit;
      color: #222;
      padding: 0;
      margin: 0;
      height: auto;
      text-align: left;
      font: 1.5rem/1.8em "Noto Sans JP", sans-serif;
      font-weight: 400;
      margin-bottom: 8px; }
    .scroll section ul, .scroll section ol {
      margin: 10px 0; }
      .scroll section ul li, .scroll section ol li {
        margin: 0 0 6px; }
        .scroll section ul li:last-of-type, .scroll section ol li:last-of-type {
          margin: 0; }
    .scroll section .items > li {
      display: grid;
      grid-template-columns: 2.5em minmax(0, 1fr);
      margin: 0 0 6px;
      padding: 0; }

@media (max-width: 480px) {
  .scroll {
    padding: 20px;
    height: 224px; }
    .scroll section {
      padding: 0 0 52px;
      font: 1.4rem/1.8em "Noto Sans JP", sans-serif;
      font-weight: 400; } }
/*max-width:480px*/
/************************************/
.graph {
  aspect-ratio: 480/647;
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  background: url("../images/common/graph.svg") center center no-repeat;
  background-size: contain; }

@media (max-width: 480px) {
  .graph {
    aspect-ratio: 316/456;
    background: url("../images/common/grap_sp.svg") center center no-repeat;
    background-size: contain; } }
/*max-width:480px*/
/************************************/
.map_flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start; }
  .map_flex .gmap {
    height: 320px;
    max-width: 640px;
    width: calc(100% - 560px); }
    .map_flex .gmap iframe {
      width: 100%;
      height: 100%; }
  .map_flex .address {
    width: 520px;
    font: 1.7rem/2.2em "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em; }
  .map_flex a {
    text-decoration: none; }
  .map_flex .mail a {
    display: block;
    width: fit-contetn;
    background: url("../images/common/about_mail.svg") center center no-repeat;
    background-size: contain;
    aspect-ratio: 318/18;
    width: 100%;
    max-width: 318px;
    height: auto;
    margin: 10px 0 0 0;
    opacity: 1; }

@media (hover: hover) {
  .map_flex a:hover {
    opacity: 0.7; }
  .map_flex .mail a:hover {
    opacity: 0.5; } }
@media (max-width: 768px) {
  .map_flex {
    display: block; }
    .map_flex .gmap {
      height: 220px;
      max-width: 640px;
      width: 100%;
      margin: 0 auto 32px; }
    .map_flex .address {
      width: 100%;
      font: 1.7rem/2.4em "Noto Sans JP", sans-serif; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .map_flex .gmap {
    height: 158px;
    margin-bottom: 24px; }
  .map_flex .address {
    width: 100%;
    font: 1.5rem/1.6em "Noto Sans JP", sans-serif;
    font-weight: 400; }
  .map_flex .mail a {
    aspect-ratio: 318/18;
    width: 100%;
    max-width: 297px;
    opacity: 1;
    margin: 8px 0 0 0; } }
/*max-width:768px*/
/************************************/