@charset "UTF-8";

/*
	##### OGIS #####
	info/assets/css/info_pc.css
*/


/* --------------------------------------------------
contents section
-------------------------------------------------- */

.main-lead {
  text-align: center;
  font-weight: 700;
  font-size: calc(30 / 750 * 100vw);
  line-height: 1.6666666666666667;
  color: var(--color-3);
  margin: calc(150 / 750 * 100vw) 0 calc(130 / 750 * 100vw);
}

.two-cols-area {
  margin: 0 auto calc(200 / 750 * 100vw);
  width: calc(670 / 750 * 100vw);

  .side-menu-area {
    display: none;
  }
}

.answers-area .inner-sec {
  margin-bottom: calc(80 / 750 * 100vw);

  & + .line {
    all: unset;
    display: block;
    height: 1px;
    width: 100%;
    margin: 0 auto calc(80 / 750 * 100vw);
    background-color: var(--color-5);
  }
  .inner-sec-ttl {
    font-weight: 700;
    font-size: calc(30 / 750 * 100vw);
    color: var(--color-6);
    margin-bottom: 30px;

    &::before {
      content: '● ';
      font-size: 50%;
      letter-spacing: .14em;
      vertical-align: middle;
      color: var(--color-4);
    }
  }
}


.faq-list-box {
  display: flex;
  flex-direction: column;
  row-gap: 15px;

  .q-a-box {
    display: block;
    width: 100%;
    padding: calc(30 / 750 * 100vw) calc(40 / 750 * 100vw) calc(35 / 750 * 100vw);
    border-radius: calc(10 / 750 * 100vw);
    background-image:
      linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 0),
      linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 0);
    background-size: calc(14 / 750 * 100vw) calc(14 / 750 * 100vw);
    background-color: var(--bg-col);
    position: relative;

    .quest + .answr {
      overflow: hidden;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      transition: grid-template-rows .3s ease;

      &.hide {
        grid-template-rows: minmax(0, 0fr);
        transition: grid-template-rows .3s ease;
      }
      & .inner {
        padding-top: calc(30 / 750 * 100vw);
      }
    }

    .quest, .answr {
      display: grid;
      grid-template-columns: calc(60 / 750 * 100vw) 1fr;
      font-weight: 500;
      font-size: calc(28 / 750 * 100vw);
      line-height: 1.4285714285714286;

      &::before {
        display: inline-block;
        font-family: "Catamaran", sans-serif;
        font-weight: 600;
        font-size: calc(54 / 750 * 100vw);
        line-height: 1;
        align-self: first baseline;
      }
    }

    .quest {
      cursor: pointer;
      grid-template-rows: minmax(calc(56 / 750 * 100vw), 1fr);
      padding-right: calc(60 / 750 * 100vw);

      &::before {
        content: 'Q ';
        color: var(--color-6);
      }
      &::after {
        position: absolute;
        top: calc(30 / 750 * 100vw);
        right: calc(30 / 750 * 100vw);
        content: '';
        display: inline-block;
        width: calc(50 / 750 * 100vw);
        height: calc(50 / 750 * 100vw);
        background: url(../images/arrw-faq.svg) no-repeat center / contain;
        rotate: 0;
        transition: rotate .3s ease;
      }
      &.is-open::after {
        rotate: 90deg;
      }
    }

    .answr::before {
      content: 'A ';
      color: var(--color-4);
      padding-top: calc(30 / 750 * 100vw);
    }
  }

  .related-link {
    display: block;
    width: 100%;
    height: calc(80 / 750 * 100vw);
    margin: 1em auto;

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: 100px;
      background-color: #595757;
      color: #fff;
      font-weight: 700;
      font-size: calc(23 / 750 * 100vw);
      line-height: 1.4285714285714286;
      overflow: hidden;
      text-align: center;
      text-decoration: none;
      position: relative;

      &.pop::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        right: calc(35 / 750 * 100vw);
        width: calc(20 / 750 * 100vw);
        height: calc(20 / 750 * 100vw);
        transform: translateY(-60%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../../../assets/images/related-pop-w.svg);
      }
    }
  }
}









.guidelines-area {
  margin-top: calc(90 / 750 * 100vw);

  .related-link {
    display: block;
    width: 100%;
    height: calc(160 / 750 * 100vw);
    margin: calc(70 / 750 * 100vw) auto 0;

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      font-weight: 700;
      font-size: calc(30 / 750 * 100vw);
      letter-spacing: .14em;
      color: #fff;
      text-decoration: none;
      background: url(../images/related-link-bttn_sp.jpg) no-repeat center / contain;
      border-radius: calc(10 / 750 * 100vw);
      overflow: hidden;
    }
  }
}

.guidelines-list .inner-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(50 / 750 * 100vw);
  width: 100%;
  padding-bottom: calc(50 / 750 * 100vw);
  margin-bottom: calc(40 / 750 * 100vw);
  border-radius: calc(10 / 750 * 100vw);
  background-image:
    linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 0),
    linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 0);
  background-size: calc(10 / 750 * 100vw) calc(10 / 750 * 100vw);
  background-color: var(--bg-col);

  .inner-sec-ttl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 calc(10 / 750 * 100vw) calc(10 / 750 * 100vw);
    min-width: calc(460 / 750 * 100vw);
    min-height: calc(70 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
    background-color: var(--color-3);
    color: #fff;
    padding: 0 1em;
  }

  .inner {
    display: block;
    width: 100%;
    max-width: calc(560 / 750 * 100vw);
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.4666666666666666;

    .details + .details {
      margin-top: 1.5em;
    }

    .details dt {
      font-weight: 700;
      padding-left: 1em;
      text-indent: -.5em;

      &::before {
        font-feature-settings: normal;
        display: inline-block;
        content: '●';
        font-size: 65%;
        vertical-align: middle;
        line-height: 1;
        translate: 0 -.075em;
        padding-right: .5em;
        color: var(--color-3);
      }
    }
    .details dd {
      margin-top: .5em;
      padding-left: 1em;
    }
  }
}