/* ------------------------------
ABOUT PAGE（調査の概要）
------------------------------ */
.about {
  & .link__list2 {
    margin-top: 40px;

    & ul {
      justify-content: flex-start;
      gap: 20px 40px;

      & li {
        &+li {
          margin: 0;
        }

        & a {
          color: var(--blue01);

          &::before {
            background: url(../img/common/icon_arrow_right_blue.svg) center center / 100% 100% no-repeat;
          }

          &.outlink {
            &::after {
              background: url(../img/common/icon_outlink_blue.svg) center center / 100% 100% no-repeat;
            }
          }
        }
      }
    }

    &.local__navi {
      margin-bottom: 72px;
      margin-top: 0;

      & ul {
        background: var(--blue03);
        padding: 24px;
      }
    }
  }

  

  & .section__box {
    scroll-margin: 80px;
    & .img__box {
      & img {
        display: block; margin-left: auto; margin-right: auto;
      }
    }

    & + .section__box {
      margin-top: 40px;
    }
    & .section__elementbox {
      margin-top: 40px;
      & h5 {
        font-size: var(--px16); margin: 0 0 0 0; display: block; position: relative; padding: 0 0 0 1em; font-weight: 400;
        &::before {
          content: '◎'; display: inline; position: absolute; left: 0; top:0;
        }
      }
    }
    &.about01 {
      & .text__box {
        flex-basis:calc( 76% - 100px ); margin-right: 66px;
      }
      & .img__box {
        flex-basis:24%; margin-right: 33px; margin-top: 8px;
      }
    }
    &.about02 {
      & .link__list2 {
        margin-top: 14px; margin-bottom: 14px;
      }
    }
    &.about03 {
      & .schedule {
        
      }
      & .text__box {
        flex-basis:calc( 65% - 100px ); margin-right: 66px;
      }
      & .img__box {
        flex-basis:35%; margin-right: 33px; margin-top: 8px;
      }
    }
    &.about04 {
      & .note__box {
        margin-top: 24px;
      }
      & .section__subbox {
        margin-top: 24px;
      }
    }
    &.about05 {
      & .section__subbox {
        & + .section__subbox {
          margin-top: 24px;
        }
        &.about05_01 {
          & .img__box {
            padding: 40px 30px;
          }
        }        
        &.about05_02 {
          & .text__box {
            flex-basis:calc( 60% - 100px ); margin-right: 66px;
          }
          & .img__box {
            flex-basis:40%; margin-right: 33px; margin-top: 8px;
          }
        }
        &.about05_03 {
          & .text__box {
            flex-basis:calc( 55% - 100px ); margin-right: 66px;
          }
          & .img__box {
            flex-basis:45%; margin-right: 33px; margin-top: 8px;
          }
        }
        &.about05_04 {
          & .img__box {
            padding: 40px 30px;
          }
        }
      }
    }
    &.about06 {
      & .img__box {
        padding: 40px 30px;
      }
    }
    &.about07 {
      & .schedule {
        & dl {
          & dt {
            flex-basis: 9em;
          }
          & dd {
            flex-basis: calc( 100% - 9em );
            & .link__list2 {
              margin-top: 0;
            }
          }
        }
      }
    }
  }

  & .tel__box {
    & .box {
      padding: 0;
      overflow: hidden;
      margin-top: 40px;

      & h4 {
        background: var(--blue01);
        color: var(--white01);
        font-size: var(--px16);
        display: flex;
        height: 71px;
        justify-content: center;
        align-items: center;
      }

      & p {
        padding: 24px;
        margin: 0;
        text-align: center;
      }
    }
  }

  & .faq__list {
    margin-top: 40px;
  }

  & .search__box {
    padding: 30px;
    background: var(--blue03);
    margin-top: 40px;

    & .form__box {
      border: none;
      padding: 0;
      margin-top: 30px;
      margin-left: 0;
      margin-right: 0;

      & legend {
        padding: 0;
        margin-bottom: 16px;
      }

      & label {
        display: block;
        margin-bottom: 16px;
      }

      & select {
        min-width: 430px;
        background: var(--white01);
        border: none;
        display: flex;
        height: 43px;
        padding: 0.5em 1em;
      }

      & .input__box {
        & input {
          flex-basis: calc(100% - 140px);
          display: flex;
          flex-wrap: wrap;
          padding: 0.5em 1em;
          font-size: var(--px16);
          height: 43px;
          border: none;
        }

        & button {
          flex-basis: 130px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          background: var(--blue01);
          color: var(--white01);
          height: 43px;
        }
      }
    }
  }
}

@media screen and ( max-width:767px ) {
  .about {
    & .section__box {
      &.about01 {
        & .text__box {
          flex-basis: 100%; margin: 0 0 24px 0;
        }
        & .img__box {
          flex-basis: 100%; margin: 0; padding: 30px 30px;
        }
      }
      &.about03 {
        & .schedule {
          & dl {
            & dt {
              flex-basis: 100%;
            }
            & dd {
              flex-basis: 100%;
            }
          }
        }
        & .text__box {
          flex-basis: 100%; margin: 0 0 24px 0;
        }
        & .img__box {
          flex-basis: 100%; margin: 0; padding: 30px 30px; text-align: center;
        }
      }
      &.about05 {
        & figure {
          & figcaption {
            &.caption {
              &.right {
                text-align: center;
              }
            }
          }
        }
        & .section__subbox {
          &.about05_02 {
            & .text__box {
              flex-basis: 100%; margin: 0 0 24px 0;
            }
            & .img__box {
              flex-basis: 100%; margin: 0; padding: 30px 30px;
            }
          }
          &.about05_03 {
            & .text__box {
              flex-basis: 100%; margin: 0 0 24px 0;
            }
            & .img__box {
              flex-basis: 100%; margin: 0; padding: 30px 30px;
            }
          }
        }        
      }
      &.about07 {
        & .schedule {
          & dl {
            padding: 0 ;
            & dt {
              flex-basis: 100%;
            }
            & dd {
              flex-basis: 100%;
              & + dt {
                margin-top: 14px;
              }
            }
          }
        }
      }
    }
  }
}